Merge pull request #618 from linkwarden/feat/client-i18n
Feat/client i18n
This commit is contained in:
Daniel
GitHub
commit
c216a92474
|
|
@ -1,5 +1,6 @@
|
|||
import Link from "next/link";
|
||||
import React, { MouseEventHandler } from "react";
|
||||
import { Trans } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
toggleAnnouncementBar: MouseEventHandler<HTMLButtonElement>;
|
||||
|
|
@ -9,19 +10,22 @@ export default function Announcement({ toggleAnnouncementBar }: Props) {
|
|||
const announcementId = localStorage.getItem("announcementId");
|
||||
|
||||
return (
|
||||
<div className="fixed left-0 right-0 bottom-20 sm:bottom-10 w-full p-5 z-20">
|
||||
<div className="fixed left-0 right-0 bottom-20 sm:bottom-10 w-full p-5 z-30">
|
||||
<div className="mx-auto w-full p-2 flex justify-between gap-2 items-center border border-primary shadow-xl rounded-xl bg-base-300 backdrop-blur-sm bg-opacity-80 max-w-md">
|
||||
<i className="bi-stars text-2xl text-yellow-600 dark:text-yellow-500"></i>
|
||||
<p className="w-4/5 text-center text-sm sm:text-base">
|
||||
See what's new in{" "}
|
||||
<Link
|
||||
href={`https://blog.linkwarden.app/releases/${announcementId}`}
|
||||
target="_blank"
|
||||
className="underline"
|
||||
>
|
||||
Linkwarden {announcementId}
|
||||
</Link>
|
||||
!
|
||||
<Trans
|
||||
i18nKey="new_version_announcement"
|
||||
values={{ version: announcementId }}
|
||||
components={[
|
||||
<Link
|
||||
href={`https://blog.linkwarden.app/releases/${announcementId}`}
|
||||
target="_blank"
|
||||
className="underline"
|
||||
key={0}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
</p>
|
||||
<button
|
||||
onClick={toggleAnnouncementBar}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import EditCollectionModal from "./ModalContent/EditCollectionModal";
|
|||
import EditCollectionSharingModal from "./ModalContent/EditCollectionSharingModal";
|
||||
import DeleteCollectionModal from "./ModalContent/DeleteCollectionModal";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
collection: CollectionIncludingMembersAndLinkCount;
|
||||
|
|
@ -17,6 +18,7 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function CollectionCard({ collection, className }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { settings } = useLocalSettingsStore();
|
||||
const { account } = useAccountStore();
|
||||
|
||||
|
|
@ -76,8 +78,8 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
>
|
||||
<i className="bi-three-dots text-xl" title="More"></i>
|
||||
</div>
|
||||
<ul className="dropdown-content z-[1] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
|
||||
{permissions === true ? (
|
||||
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-52 mt-1">
|
||||
{permissions === true && (
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
|
|
@ -87,10 +89,10 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
setEditCollectionModal(true);
|
||||
}}
|
||||
>
|
||||
Edit Collection Info
|
||||
{t("edit_collection_info")}
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
)}
|
||||
<li>
|
||||
<div
|
||||
role="button"
|
||||
|
|
@ -100,7 +102,9 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
setEditCollectionSharingModal(true);
|
||||
}}
|
||||
>
|
||||
{permissions === true ? "Share and Collaborate" : "View Team"}
|
||||
{permissions === true
|
||||
? t("share_and_collaborate")
|
||||
: t("view_team")}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -112,7 +116,9 @@ export default function CollectionCard({ collection, className }: Props) {
|
|||
setDeleteCollectionModal(true);
|
||||
}}
|
||||
>
|
||||
{permissions === true ? "Delete Collection" : "Leave Collection"}
|
||||
{permissions === true
|
||||
? t("delete_collection")
|
||||
: t("leave_collection")}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -16,12 +16,14 @@ import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
|
|||
import { useRouter } from "next/router";
|
||||
import useAccountStore from "@/store/account";
|
||||
import toast from "react-hot-toast";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
interface ExtendedTreeItem extends TreeItem {
|
||||
data: Collection;
|
||||
}
|
||||
|
||||
const CollectionListing = () => {
|
||||
const { t } = useTranslation();
|
||||
const { collections, updateCollection } = useCollectionStore();
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
|
||||
|
|
@ -141,9 +143,7 @@ const CollectionListing = () => {
|
|||
(destinationCollection?.ownerId !== account.id &&
|
||||
destination.parentId !== "root")
|
||||
) {
|
||||
return toast.error(
|
||||
"You can't make change to a collection you don't own."
|
||||
);
|
||||
return toast.error(t("cant_change_collection_you_dont_own"));
|
||||
}
|
||||
|
||||
setTree((currentTree) => moveItemOnTree(currentTree!, source, destination));
|
||||
|
|
@ -203,7 +203,7 @@ const CollectionListing = () => {
|
|||
if (!tree) {
|
||||
return (
|
||||
<p className="text-neutral text-xs font-semibold truncate w-full px-2 mt-5 mb-8">
|
||||
You Have No Collections...
|
||||
{t("you_have_no_collections")}
|
||||
</p>
|
||||
);
|
||||
} else
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import React from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
setSearchFilter: Function;
|
||||
|
|
@ -16,6 +17,8 @@ export default function FilterSearchDropdown({
|
|||
setSearchFilter,
|
||||
searchFilter,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<div className="dropdown dropdown-bottom dropdown-end">
|
||||
<div
|
||||
|
|
@ -38,11 +41,11 @@ export default function FilterSearchDropdown({
|
|||
name="search-filter-checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
checked={searchFilter.name}
|
||||
onChange={() => {
|
||||
setSearchFilter({ ...searchFilter, name: !searchFilter.name });
|
||||
}}
|
||||
onChange={() =>
|
||||
setSearchFilter({ ...searchFilter, name: !searchFilter.name })
|
||||
}
|
||||
/>
|
||||
<span className="label-text">Name</span>
|
||||
<span className="label-text">{t("name")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -56,11 +59,11 @@ export default function FilterSearchDropdown({
|
|||
name="search-filter-checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
checked={searchFilter.url}
|
||||
onChange={() => {
|
||||
setSearchFilter({ ...searchFilter, url: !searchFilter.url });
|
||||
}}
|
||||
onChange={() =>
|
||||
setSearchFilter({ ...searchFilter, url: !searchFilter.url })
|
||||
}
|
||||
/>
|
||||
<span className="label-text">Link</span>
|
||||
<span className="label-text">{t("link")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -74,14 +77,14 @@ export default function FilterSearchDropdown({
|
|||
name="search-filter-checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
checked={searchFilter.description}
|
||||
onChange={() => {
|
||||
onChange={() =>
|
||||
setSearchFilter({
|
||||
...searchFilter,
|
||||
description: !searchFilter.description,
|
||||
});
|
||||
}}
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="label-text">Description</span>
|
||||
<span className="label-text">{t("description")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -95,14 +98,11 @@ export default function FilterSearchDropdown({
|
|||
name="search-filter-checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
checked={searchFilter.tags}
|
||||
onChange={() => {
|
||||
setSearchFilter({
|
||||
...searchFilter,
|
||||
tags: !searchFilter.tags,
|
||||
});
|
||||
}}
|
||||
onChange={() =>
|
||||
setSearchFilter({ ...searchFilter, tags: !searchFilter.tags })
|
||||
}
|
||||
/>
|
||||
<span className="label-text">Tags</span>
|
||||
<span className="label-text">{t("tags")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -116,16 +116,17 @@ export default function FilterSearchDropdown({
|
|||
name="search-filter-checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
checked={searchFilter.textContent}
|
||||
onChange={() => {
|
||||
onChange={() =>
|
||||
setSearchFilter({
|
||||
...searchFilter,
|
||||
textContent: !searchFilter.textContent,
|
||||
});
|
||||
}}
|
||||
})
|
||||
}
|
||||
/>
|
||||
<span className="label-text">Full Content</span>
|
||||
|
||||
<div className="ml-auto badge badge-sm badge-neutral">Slower</div>
|
||||
<span className="label-text">{t("full_content")}</span>
|
||||
<div className="ml-auto badge badge-sm badge-neutral">
|
||||
{t("slower")}
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { isPWA } from "@/lib/client/utils";
|
||||
import React, { useState } from "react";
|
||||
import { Trans } from "next-i18next";
|
||||
|
||||
type Props = {};
|
||||
|
||||
|
|
@ -25,15 +26,17 @@ const InstallApp = (props: Props) => {
|
|||
/>
|
||||
</svg>
|
||||
<p className="w-4/5 text-[0.92rem]">
|
||||
Install Linkwarden to your home screen for a faster access and
|
||||
enhanced experience.{" "}
|
||||
<a
|
||||
className="underline"
|
||||
target="_blank"
|
||||
href="https://docs.linkwarden.app/getting-started/pwa-installation"
|
||||
>
|
||||
Learn more
|
||||
</a>
|
||||
<Trans
|
||||
i18nKey="pwa_install_prompt"
|
||||
components={[
|
||||
<a
|
||||
className="underline"
|
||||
target="_blank"
|
||||
href="https://docs.linkwarden.app/getting-started/pwa-installation"
|
||||
key={0}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
</p>
|
||||
<button
|
||||
onClick={() => setIsOpen(false)}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,203 @@
|
|||
import React, { Dispatch, SetStateAction, useEffect, useState } from "react";
|
||||
import FilterSearchDropdown from "./FilterSearchDropdown";
|
||||
import SortDropdown from "./SortDropdown";
|
||||
import ViewDropdown from "./ViewDropdown";
|
||||
import { TFunction } from "i18next";
|
||||
import BulkDeleteLinksModal from "./ModalContent/BulkDeleteLinksModal";
|
||||
import BulkEditLinksModal from "./ModalContent/BulkEditLinksModal";
|
||||
import toast from "react-hot-toast";
|
||||
import useCollectivePermissions from "@/hooks/useCollectivePermissions";
|
||||
import { useRouter } from "next/router";
|
||||
import useLinkStore from "@/store/links";
|
||||
import { Sort } from "@/types/global";
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
t: TFunction<"translation", undefined>;
|
||||
viewMode: string;
|
||||
setViewMode: Dispatch<SetStateAction<string>>;
|
||||
searchFilter?: {
|
||||
name: boolean;
|
||||
url: boolean;
|
||||
description: boolean;
|
||||
tags: boolean;
|
||||
textContent: boolean;
|
||||
};
|
||||
setSearchFilter?: (filter: {
|
||||
name: boolean;
|
||||
url: boolean;
|
||||
description: boolean;
|
||||
tags: boolean;
|
||||
textContent: boolean;
|
||||
}) => void;
|
||||
sortBy: Sort;
|
||||
setSortBy: Dispatch<SetStateAction<Sort>>;
|
||||
editMode?: boolean;
|
||||
setEditMode?: (mode: boolean) => void;
|
||||
};
|
||||
|
||||
const LinkListOptions = ({
|
||||
children,
|
||||
t,
|
||||
viewMode,
|
||||
setViewMode,
|
||||
searchFilter,
|
||||
setSearchFilter,
|
||||
sortBy,
|
||||
setSortBy,
|
||||
editMode,
|
||||
setEditMode,
|
||||
}: Props) => {
|
||||
const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
|
||||
useLinkStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
|
||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (editMode && setEditMode) return setEditMode(false);
|
||||
}, [router]);
|
||||
|
||||
const collectivePermissions = useCollectivePermissions(
|
||||
selectedLinks.map((link) => link.collectionId as number)
|
||||
);
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedLinks.length === links.length) {
|
||||
setSelectedLinks([]);
|
||||
} else {
|
||||
setSelectedLinks(links.map((link) => link));
|
||||
}
|
||||
};
|
||||
|
||||
const bulkDeleteLinks = async () => {
|
||||
const load = toast.loading(t("deleting_selections"));
|
||||
|
||||
const response = await deleteLinksById(
|
||||
selectedLinks.map((link) => link.id as number)
|
||||
);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok &&
|
||||
toast.success(
|
||||
selectedLinks.length === 1
|
||||
? t("link_deleted")
|
||||
: t("links_deleted", { count: selectedLinks.length })
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex justify-between items-center">
|
||||
{children}
|
||||
|
||||
<div className="flex gap-3 items-center justify-end">
|
||||
<div className="flex gap-2 items-center mt-2">
|
||||
{links.length > 0 && editMode !== undefined && setEditMode && (
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
)}
|
||||
{searchFilter && setSearchFilter && (
|
||||
<FilterSearchDropdown
|
||||
searchFilter={searchFilter}
|
||||
setSearchFilter={setSearchFilter}
|
||||
/>
|
||||
)}
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} t={t} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editMode && links.length > 0 && (
|
||||
<div className="w-full flex justify-between items-center min-h-[32px]">
|
||||
{links.length > 0 && (
|
||||
<div className="flex gap-3 ml-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
onChange={() => handleSelectAll()}
|
||||
checked={
|
||||
selectedLinks.length === links.length && links.length > 0
|
||||
}
|
||||
/>
|
||||
{selectedLinks.length > 0 ? (
|
||||
<span>
|
||||
{selectedLinks.length === 1
|
||||
? t("link_selected")
|
||||
: t("links_selected", { count: selectedLinks.length })}
|
||||
</span>
|
||||
) : (
|
||||
<span>{t("nothing_selected")}</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(
|
||||
collectivePermissions === true ||
|
||||
collectivePermissions?.canUpdate
|
||||
)
|
||||
}
|
||||
>
|
||||
{t("edit")}
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
e.shiftKey ? bulkDeleteLinks() : setBulkDeleteLinksModal(true);
|
||||
}}
|
||||
className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(
|
||||
collectivePermissions === true ||
|
||||
collectivePermissions?.canDelete
|
||||
)
|
||||
}
|
||||
>
|
||||
{t("delete")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{bulkDeleteLinksModal && (
|
||||
<BulkDeleteLinksModal
|
||||
onClose={() => {
|
||||
setBulkDeleteLinksModal(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{bulkEditLinksModal && (
|
||||
<BulkEditLinksModal
|
||||
onClose={() => {
|
||||
setBulkEditLinksModal(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default LinkListOptions;
|
||||
|
|
@ -20,6 +20,7 @@ import useAccountStore from "@/store/account";
|
|||
import usePermissions from "@/hooks/usePermissions";
|
||||
import toast from "react-hot-toast";
|
||||
import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
|
|
@ -30,6 +31,8 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const viewMode = localStorage.getItem("viewMode") || "card";
|
||||
const { collections } = useCollectionStore();
|
||||
const { account } = useAccountStore();
|
||||
|
|
@ -121,9 +124,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
selectable
|
||||
? handleCheckboxClick(link)
|
||||
: editMode
|
||||
? toast.error(
|
||||
"You don't have permission to edit or delete this item."
|
||||
)
|
||||
? toast.error(t("link_selection_error"))
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
|
|
@ -167,7 +168,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
|
||||
<div className="flex flex-col justify-between h-full">
|
||||
<div className="p-3 flex flex-col gap-2">
|
||||
<p className="truncate w-full pr-8 text-primary text-sm">
|
||||
<p className="truncate w-full pr-9 text-primary text-sm">
|
||||
{unescapeString(link.name)}
|
||||
</p>
|
||||
|
||||
|
|
@ -197,7 +198,9 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
>
|
||||
<i className="bi-x text-neutral text-2xl"></i>
|
||||
</div>
|
||||
<p className="text-neutral text-lg font-semibold">Description</p>
|
||||
<p className="text-neutral text-lg font-semibold">
|
||||
{t("description")}
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 border-t border-neutral-content h-[1px]" />
|
||||
<p>
|
||||
|
|
@ -205,13 +208,15 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
|
|||
unescapeString(link.description)
|
||||
) : (
|
||||
<span className="text-neutral text-sm">
|
||||
No description provided.
|
||||
{t("no_description")}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{link.tags && link.tags[0] && (
|
||||
<>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">
|
||||
{t("tags")}
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 border-t border-neutral-content h-[1px]" />
|
||||
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import useLinkStore from "@/store/links";
|
|||
import { toast } from "react-hot-toast";
|
||||
import useAccountStore from "@/store/account";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
|
|
@ -30,6 +31,8 @@ export default function LinkActions({
|
|||
alignToTop,
|
||||
flipDropdown,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const permissions = usePermissions(link.collection.id as number);
|
||||
|
||||
const [editLinkModal, setEditLinkModal] = useState(false);
|
||||
|
|
@ -43,7 +46,7 @@ export default function LinkActions({
|
|||
const pinLink = async () => {
|
||||
const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
const load = toast.loading(t("applying"));
|
||||
|
||||
const response = await updateLink({
|
||||
...link,
|
||||
|
|
@ -53,17 +56,17 @@ export default function LinkActions({
|
|||
toast.dismiss(load);
|
||||
|
||||
response.ok &&
|
||||
toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
|
||||
toast.success(isAlreadyPinned ? t("link_unpinned") : t("link_unpinned"));
|
||||
};
|
||||
|
||||
const deleteLink = async () => {
|
||||
const load = toast.loading("Deleting...");
|
||||
const load = toast.loading(t("deleting"));
|
||||
|
||||
const response = await removeLink(link.id as number);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok && toast.success(`Link Deleted.`);
|
||||
response.ok && toast.success(t("deleted"));
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -96,8 +99,8 @@ export default function LinkActions({
|
|||
}}
|
||||
>
|
||||
{link?.pinnedBy && link.pinnedBy[0]
|
||||
? "Unpin"
|
||||
: "Pin to Dashboard"}
|
||||
? t("unpin")
|
||||
: t("pin_to_dashboard")}
|
||||
</div>
|
||||
</li>
|
||||
{linkInfo !== undefined && toggleShowInfo ? (
|
||||
|
|
@ -110,7 +113,7 @@ export default function LinkActions({
|
|||
toggleShowInfo();
|
||||
}}
|
||||
>
|
||||
{!linkInfo ? "Show" : "Hide"} Link Details
|
||||
{!linkInfo ? t("show_link_details") : t("hide_link_details")}
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
|
|
@ -124,7 +127,7 @@ export default function LinkActions({
|
|||
setEditLinkModal(true);
|
||||
}}
|
||||
>
|
||||
Edit Link
|
||||
{t("edit_link")}
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
|
|
@ -138,7 +141,7 @@ export default function LinkActions({
|
|||
setPreservedFormatsModal(true);
|
||||
}}
|
||||
>
|
||||
Preserved Formats
|
||||
{t("preserved_formats")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
|
|
@ -152,7 +155,7 @@ export default function LinkActions({
|
|||
e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
{t("delete")}
|
||||
</div>
|
||||
</li>
|
||||
) : undefined}
|
||||
|
|
|
|||
|
|
@ -1,53 +0,0 @@
|
|||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
import Image from "next/image";
|
||||
import isValidUrl from "@/lib/shared/isValidUrl";
|
||||
import React from "react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function LinkGroupedIconURL({
|
||||
link,
|
||||
}: {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
}) {
|
||||
const url =
|
||||
isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
|
||||
|
||||
const [showFavicon, setShowFavicon] = React.useState<boolean>(true);
|
||||
|
||||
let shortendURL;
|
||||
|
||||
try {
|
||||
shortendURL = new URL(link.url || "").host.toLowerCase();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
||||
return (
|
||||
<Link href={link.url || ""} target="_blank">
|
||||
<div className="bg-white shadow-md rounded-md border-[2px] flex gap-1 item-center justify-center border-white select-none z-10 max-w-full">
|
||||
{link.url && url && showFavicon ? (
|
||||
<Image
|
||||
src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
|
||||
width={64}
|
||||
height={64}
|
||||
alt=""
|
||||
className="w-5 h-5 rounded"
|
||||
draggable="false"
|
||||
onError={() => {
|
||||
setShowFavicon(false);
|
||||
}}
|
||||
/>
|
||||
) : showFavicon === false ? (
|
||||
<i className="bi-link-45deg text-xl leading-none text-black"></i>
|
||||
) : link.type === "pdf" ? (
|
||||
<i className={`bi-file-earmark-pdf`}></i>
|
||||
) : link.type === "image" ? (
|
||||
<i className={`bi-file-earmark-image`}></i>
|
||||
) : undefined}
|
||||
<p className="truncate bg-white text-black mr-1">
|
||||
<p className="text-sm">{shortendURL}</p>
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
|
@ -10,13 +10,13 @@ import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
|
|||
import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
|
||||
import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
|
||||
import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
|
||||
import Link from "next/link";
|
||||
import { isPWA } from "@/lib/client/utils";
|
||||
import { generateLinkHref } from "@/lib/client/generateLinkHref";
|
||||
import useAccountStore from "@/store/account";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import toast from "react-hot-toast";
|
||||
import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
|
|
@ -31,6 +31,8 @@ export default function LinkCardCompact({
|
|||
flipDropdown,
|
||||
editMode,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { collections } = useCollectionStore();
|
||||
const { account } = useAccountStore();
|
||||
const { links, setSelectedLinks, selectedLinks } = useLinkStore();
|
||||
|
|
@ -96,9 +98,7 @@ export default function LinkCardCompact({
|
|||
selectable
|
||||
? handleCheckboxClick(link)
|
||||
: editMode
|
||||
? toast.error(
|
||||
"You don't have permission to edit or delete this item."
|
||||
)
|
||||
? toast.error(t("link_selection_error"))
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import useAccountStore from "@/store/account";
|
|||
import usePermissions from "@/hooks/usePermissions";
|
||||
import toast from "react-hot-toast";
|
||||
import LinkTypeBadge from "./LinkComponents/LinkTypeBadge";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
link: LinkIncludingShortenedCollectionAndTags;
|
||||
|
|
@ -30,6 +31,8 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { collections } = useCollectionStore();
|
||||
const { account } = useAccountStore();
|
||||
|
||||
|
|
@ -120,9 +123,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
|||
selectable
|
||||
? handleCheckboxClick(link)
|
||||
: editMode
|
||||
? toast.error(
|
||||
"You don't have permission to edit or delete this item."
|
||||
)
|
||||
? toast.error(t("link_selection_error"))
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
|
|
@ -164,7 +165,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
|||
)}
|
||||
|
||||
<div className="p-3 flex flex-col gap-2">
|
||||
<p className="hyphens-auto w-full pr-8 text-primary text-sm">
|
||||
<p className="hyphens-auto w-full pr-9 text-primary text-sm">
|
||||
{unescapeString(link.name)}
|
||||
</p>
|
||||
|
||||
|
|
@ -210,7 +211,9 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
|||
>
|
||||
<i className="bi-x text-neutral text-2xl"></i>
|
||||
</div>
|
||||
<p className="text-neutral text-lg font-semibold">Description</p>
|
||||
<p className="text-neutral text-lg font-semibold">
|
||||
{t("description")}
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
<p>
|
||||
|
|
@ -218,13 +221,15 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
|
|||
unescapeString(link.description)
|
||||
) : (
|
||||
<span className="text-neutral text-sm">
|
||||
No description provided.
|
||||
{t("no_description")}
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
{link.tags[0] && (
|
||||
<>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">Tags</p>
|
||||
<p className="text-neutral text-lg mt-3 font-semibold">
|
||||
{t("tags")}
|
||||
</p>
|
||||
|
||||
<hr className="divider my-2 last:hidden border-t border-neutral-content h-[1px]" />
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +0,0 @@
|
|||
export default function Loading() {
|
||||
return (
|
||||
<div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -5,10 +5,12 @@ import NewLinkModal from "./ModalContent/NewLinkModal";
|
|||
import NewCollectionModal from "./ModalContent/NewCollectionModal";
|
||||
import UploadFileModal from "./ModalContent/UploadFileModal";
|
||||
import MobileNavigationButton from "./MobileNavigationButton";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {};
|
||||
|
||||
export default function MobileNavigation({}: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [newLinkModal, setNewLinkModal] = useState(false);
|
||||
const [newCollectionModal, setNewCollectionModal] = useState(false);
|
||||
const [uploadFileModal, setUploadFileModal] = useState(false);
|
||||
|
|
@ -49,21 +51,21 @@ export default function MobileNavigation({}: Props) {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
New Link
|
||||
{t("new_link")}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setUploadFileModal(true);
|
||||
}}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
{t("upload_file")}
|
||||
</div>
|
||||
</li>
|
||||
{/* <li>
|
||||
<div
|
||||
onClick={() => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
setUploadFileModal(true);
|
||||
}}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
Upload File
|
||||
</div>
|
||||
</li> */}
|
||||
<li>
|
||||
<div
|
||||
onClick={() => {
|
||||
|
|
@ -73,7 +75,7 @@ export default function MobileNavigation({}: Props) {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
New Collection
|
||||
{t("new_collection")}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -3,20 +3,18 @@ import useLinkStore from "@/store/links";
|
|||
import toast from "react-hot-toast";
|
||||
import Modal from "../Modal";
|
||||
import Button from "../ui/Button";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
};
|
||||
|
||||
export default function BulkDeleteLinksModal({ onClose }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { selectedLinks, setSelectedLinks, deleteLinksById } = useLinkStore();
|
||||
|
||||
const deleteLink = async () => {
|
||||
const load = toast.loading(
|
||||
`Deleting ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}...`
|
||||
);
|
||||
const load = toast.loading(t("deleting"));
|
||||
|
||||
const response = await deleteLinksById(
|
||||
selectedLinks.map((link) => link.id as number)
|
||||
|
|
@ -25,12 +23,7 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
|
|||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}`
|
||||
);
|
||||
|
||||
toast.success(t("deleted"));
|
||||
setSelectedLinks([]);
|
||||
onClose();
|
||||
} else toast.error(response.data as string);
|
||||
|
|
@ -39,33 +32,32 @@ export default function BulkDeleteLinksModal({ onClose }: Props) {
|
|||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin text-red-500">
|
||||
Delete {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
|
||||
{selectedLinks.length === 1
|
||||
? t("delete_link")
|
||||
: t("delete_links", { count: selectedLinks.length })}
|
||||
</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
{selectedLinks.length > 1 ? (
|
||||
<p>Are you sure you want to delete {selectedLinks.length} links?</p>
|
||||
) : (
|
||||
<p>Are you sure you want to delete this link?</p>
|
||||
)}
|
||||
<p>
|
||||
{selectedLinks.length === 1
|
||||
? t("link_deletion_confirmation_message")
|
||||
: t("links_deletion_confirmation_message", {
|
||||
count: selectedLinks.length,
|
||||
})}
|
||||
</p>
|
||||
|
||||
<div role="alert" className="alert alert-warning">
|
||||
<i className="bi-exclamation-triangle text-xl" />
|
||||
<span>
|
||||
<b>Warning:</b> This action is irreversible!
|
||||
</span>
|
||||
<span>{t("warning_irreversible")}</span>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking
|
||||
'Delete' to bypass this confirmation in the future.
|
||||
</p>
|
||||
<p>{t("shift_key_tip")}</p>
|
||||
|
||||
<Button className="ml-auto" intent="destructive" onClick={deleteLink}>
|
||||
<i className="bi-trash text-xl" />
|
||||
Delete
|
||||
{t("delete")}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,14 @@ import useLinkStore from "@/store/links";
|
|||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
import toast from "react-hot-toast";
|
||||
import Modal from "../Modal";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
};
|
||||
|
||||
export default function BulkEditLinksModal({ onClose }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { updateLinks, selectedLinks, setSelectedLinks } = useLinkStore();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
const [removePreviousTags, setRemovePreviousTags] = useState(false);
|
||||
|
|
@ -20,7 +22,6 @@ export default function BulkEditLinksModal({ onClose }: Props) {
|
|||
|
||||
const setCollection = (e: any) => {
|
||||
const collectionId = e?.value || null;
|
||||
console.log(updatedValues);
|
||||
setUpdatedValues((prevValues) => ({ ...prevValues, collectionId }));
|
||||
};
|
||||
|
||||
|
|
@ -33,7 +34,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
|
|||
if (!submitLoader) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Updating...");
|
||||
const load = toast.loading(t("updating"));
|
||||
|
||||
const response = await updateLinks(
|
||||
selectedLinks,
|
||||
|
|
@ -44,7 +45,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
|
|||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Updated!`);
|
||||
toast.success(t("updated"));
|
||||
setSelectedLinks([]);
|
||||
onClose();
|
||||
} else toast.error(response.data as string);
|
||||
|
|
@ -57,13 +58,15 @@ export default function BulkEditLinksModal({ onClose }: Props) {
|
|||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">
|
||||
Edit {selectedLinks.length} Link{selectedLinks.length > 1 ? "s" : ""}
|
||||
{selectedLinks.length === 1
|
||||
? t("edit_link")
|
||||
: t("edit_links", { count: selectedLinks.length })}
|
||||
</p>
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
<div className="mt-5">
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="mb-2">Move to Collection</p>
|
||||
<p className="mb-2">{t("move_to_collection")}</p>
|
||||
<CollectionSelection
|
||||
showDefaultValue={false}
|
||||
onChange={setCollection}
|
||||
|
|
@ -72,7 +75,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Add Tags</p>
|
||||
<p className="mb-2">{t("add_tags")}</p>
|
||||
<TagSelection onChange={setTags} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -84,7 +87,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
|
|||
checked={removePreviousTags}
|
||||
onChange={(e) => setRemovePreviousTags(e.target.checked)}
|
||||
/>
|
||||
Remove previous tags
|
||||
{t("remove_previous_tags")}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,7 +97,7 @@ export default function BulkEditLinksModal({ onClose }: Props) {
|
|||
className="btn btn-accent dark:border-violet-400 text-white"
|
||||
onClick={submit}
|
||||
>
|
||||
Save Changes
|
||||
{t("save_changes")}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import { useRouter } from "next/router";
|
|||
import usePermissions from "@/hooks/usePermissions";
|
||||
import Modal from "../Modal";
|
||||
import Button from "../ui/Button";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -17,42 +18,40 @@ export default function DeleteCollectionModal({
|
|||
onClose,
|
||||
activeCollection,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [collection, setCollection] =
|
||||
useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
const { removeCollection } = useCollectionStore();
|
||||
const router = useRouter();
|
||||
const [inputField, setInputField] = useState("");
|
||||
const permissions = usePermissions(collection.id as number);
|
||||
|
||||
useEffect(() => {
|
||||
setCollection(activeCollection);
|
||||
}, []);
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
const { removeCollection } = useCollectionStore();
|
||||
const router = useRouter();
|
||||
const [inputField, setInputField] = useState("");
|
||||
|
||||
const permissions = usePermissions(collection.id as number);
|
||||
|
||||
const submit = async () => {
|
||||
if (permissions === true) if (collection.name !== inputField) return null;
|
||||
|
||||
if (permissions === true && collection.name !== inputField) return;
|
||||
if (!submitLoader) {
|
||||
setSubmitLoader(true);
|
||||
if (!collection) return null;
|
||||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Deleting...");
|
||||
const load = toast.loading(t("deleting_collection"));
|
||||
|
||||
let response;
|
||||
|
||||
response = await removeCollection(collection.id as any);
|
||||
let response = await removeCollection(collection.id as number);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Deleted.`);
|
||||
toast.success(t("deleted"));
|
||||
onClose();
|
||||
router.push("/collections");
|
||||
} else toast.error(response.data as string);
|
||||
} else {
|
||||
toast.error(response.data as string);
|
||||
}
|
||||
|
||||
setSubmitLoader(false);
|
||||
}
|
||||
|
|
@ -61,7 +60,7 @@ export default function DeleteCollectionModal({
|
|||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin text-red-500">
|
||||
{permissions === true ? "Delete" : "Leave"} Collection
|
||||
{permissions === true ? t("delete_collection") : t("leave_collection")}
|
||||
</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
|
@ -69,32 +68,26 @@ export default function DeleteCollectionModal({
|
|||
<div className="flex flex-col gap-3">
|
||||
{permissions === true ? (
|
||||
<>
|
||||
<div className="flex flex-col gap-3">
|
||||
<p>
|
||||
To confirm, type "
|
||||
<span className="font-bold">{collection.name}</span>
|
||||
" in the box below:
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
value={inputField}
|
||||
onChange={(e) => setInputField(e.target.value)}
|
||||
placeholder={`Type "${collection.name}" Here.`}
|
||||
className="w-3/4 mx-auto"
|
||||
/>
|
||||
</div>
|
||||
<p>{t("confirm_deletion_prompt", { name: collection.name })}</p>
|
||||
<TextInput
|
||||
value={inputField}
|
||||
onChange={(e) => setInputField(e.target.value)}
|
||||
placeholder={t("type_name_placeholder", {
|
||||
name: collection.name,
|
||||
})}
|
||||
className="w-3/4 mx-auto"
|
||||
/>
|
||||
|
||||
<div role="alert" className="alert alert-warning">
|
||||
<i className="bi-exclamation-triangle text-xl"></i>
|
||||
<span>
|
||||
<b>Warning:</b> Deleting this collection will permanently erase
|
||||
all its contents, and it will become inaccessible to everyone,
|
||||
including members with previous access.
|
||||
<b>{t("warning")}: </b>
|
||||
{t("deletion_warning")}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p>Click the button below to leave the current collection.</p>
|
||||
<p>{t("leave_prompt")}</p>
|
||||
)}
|
||||
|
||||
<Button
|
||||
|
|
@ -104,7 +97,7 @@ export default function DeleteCollectionModal({
|
|||
className="ml-auto"
|
||||
>
|
||||
<i className="bi-trash text-xl"></i>
|
||||
{permissions === true ? "Delete" : "Leave"} Collection
|
||||
{permissions === true ? t("delete") : t("leave")}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import toast from "react-hot-toast";
|
|||
import Modal from "../Modal";
|
||||
import { useRouter } from "next/router";
|
||||
import Button from "../ui/Button";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -12,11 +13,10 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function DeleteLinkModal({ onClose, activeLink }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [link, setLink] =
|
||||
useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
|
||||
|
||||
const { removeLink } = useLinkStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -24,13 +24,13 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
|
|||
}, []);
|
||||
|
||||
const deleteLink = async () => {
|
||||
const load = toast.loading("Deleting...");
|
||||
const load = toast.loading(t("deleting"));
|
||||
|
||||
const response = await removeLink(link.id as number);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok && toast.success(`Link Deleted.`);
|
||||
response.ok && toast.success(t("deleted"));
|
||||
|
||||
if (router.pathname.startsWith("/links/[id]")) {
|
||||
router.push("/dashboard");
|
||||
|
|
@ -41,28 +41,25 @@ export default function DeleteLinkModal({ onClose, activeLink }: Props) {
|
|||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin text-red-500">Delete Link</p>
|
||||
<p className="text-xl font-thin text-red-500">{t("delete_link")}</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<p>Are you sure you want to delete this Link?</p>
|
||||
<p>{t("link_deletion_confirmation_message")}</p>
|
||||
|
||||
<div role="alert" className="alert alert-warning">
|
||||
<i className="bi-exclamation-triangle text-xl" />
|
||||
<span>
|
||||
<b>Warning:</b> This action is irreversible!
|
||||
<b>{t("warning")}:</b> {t("irreversible_warning")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Hold the <kbd className="kbd kbd-sm">Shift</kbd> key while clicking
|
||||
'Delete' to bypass this confirmation in the future.
|
||||
</p>
|
||||
<p>{t("shift_key_tip")}</p>
|
||||
|
||||
<Button className="ml-auto" intent="destructive" onClick={deleteLink}>
|
||||
<i className="bi-trash text-xl" />
|
||||
Delete
|
||||
{t("delete")}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import toast from "react-hot-toast";
|
|||
import Modal from "../Modal";
|
||||
import useUserStore from "@/store/admin/users";
|
||||
import Button from "../ui/Button";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -9,39 +10,40 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function DeleteUserModal({ onClose, userId }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { removeUser } = useUserStore();
|
||||
|
||||
const deleteUser = async () => {
|
||||
const load = toast.loading("Deleting...");
|
||||
const load = toast.loading(t("deleting_user"));
|
||||
|
||||
const response = await removeUser(userId);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok && toast.success(`User Deleted.`);
|
||||
response.ok && toast.success(t("user_deleted"));
|
||||
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin text-red-500">Delete User</p>
|
||||
<p className="text-xl font-thin text-red-500">{t("delete_user")}</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<p>Are you sure you want to remove this user?</p>
|
||||
<p>{t("confirm_user_deletion")}</p>
|
||||
|
||||
<div role="alert" className="alert alert-warning">
|
||||
<i className="bi-exclamation-triangle text-xl" />
|
||||
<span>
|
||||
<b>Warning:</b> This action is irreversible!
|
||||
<b>{t("warning")}:</b> {t("irreversible_action_warning")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Button className="ml-auto" intent="destructive" onClick={deleteUser}>
|
||||
<i className="bi-trash text-xl" />
|
||||
Delete, I know what I'm doing
|
||||
{t("delete_confirmation")}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import toast from "react-hot-toast";
|
|||
import { HexColorPicker } from "react-colorful";
|
||||
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
|
||||
import Modal from "../Modal";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -15,6 +16,7 @@ export default function EditCollectionModal({
|
|||
onClose,
|
||||
activeCollection,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [collection, setCollection] =
|
||||
useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
|
||||
|
||||
|
|
@ -28,16 +30,14 @@ export default function EditCollectionModal({
|
|||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Updating...");
|
||||
const load = toast.loading(t("updating_collection"));
|
||||
|
||||
let response;
|
||||
|
||||
response = await updateCollection(collection as any);
|
||||
let response = await updateCollection(collection as any);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Updated!`);
|
||||
toast.success(t("updated"));
|
||||
onClose();
|
||||
} else toast.error(response.data as string);
|
||||
|
||||
|
|
@ -47,29 +47,35 @@ export default function EditCollectionModal({
|
|||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">Edit Collection Info</p>
|
||||
<p className="text-xl font-thin">{t("edit_collection_info")}</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Name</p>
|
||||
<p className="mb-2">{t("name")}</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
<TextInput
|
||||
className="bg-base-200"
|
||||
value={collection.name}
|
||||
placeholder="e.g. Example Collection"
|
||||
placeholder={t("collection_name_placeholder")}
|
||||
onChange={(e) =>
|
||||
setCollection({ ...collection, name: e.target.value })
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<p className="w-full mb-2">Color</p>
|
||||
<div className="color-picker flex justify-between">
|
||||
<p className="w-full mb-2">{t("color")}</p>
|
||||
<div className="color-picker flex justify-between items-center">
|
||||
<HexColorPicker
|
||||
color={collection.color}
|
||||
onChange={(color) =>
|
||||
setCollection({ ...collection, color })
|
||||
}
|
||||
/>
|
||||
<div className="flex flex-col gap-2 items-center w-32">
|
||||
<i
|
||||
className="bi-folder-fill text-5xl drop-shadow"
|
||||
className="bi-folder-fill text-5xl"
|
||||
style={{ color: collection.color }}
|
||||
></i>
|
||||
<div
|
||||
|
|
@ -78,29 +84,22 @@ export default function EditCollectionModal({
|
|||
setCollection({ ...collection, color: "#0ea5e9" })
|
||||
}
|
||||
>
|
||||
Reset
|
||||
{t("reset")}
|
||||
</div>
|
||||
</div>
|
||||
<HexColorPicker
|
||||
color={collection.color}
|
||||
onChange={(e) => setCollection({ ...collection, color: e })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Description</p>
|
||||
<p className="mb-2">{t("description")}</p>
|
||||
<textarea
|
||||
className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
|
||||
placeholder="The purpose of this Collection..."
|
||||
placeholder={t("collection_description_placeholder")}
|
||||
value={collection.description}
|
||||
onChange={(e) =>
|
||||
setCollection({
|
||||
...collection,
|
||||
description: e.target.value,
|
||||
})
|
||||
setCollection({ ...collection, description: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -110,7 +109,7 @@ export default function EditCollectionModal({
|
|||
className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
|
||||
onClick={submit}
|
||||
>
|
||||
Save Changes
|
||||
{t("save_changes")}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@ import ProfilePhoto from "../ProfilePhoto";
|
|||
import addMemberToCollection from "@/lib/client/addMemberToCollection";
|
||||
import Modal from "../Modal";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -20,6 +21,8 @@ export default function EditCollectionSharingModal({
|
|||
onClose,
|
||||
activeCollection,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [collection, setCollection] =
|
||||
useState<CollectionIncludingMembersAndLinkCount>(activeCollection);
|
||||
|
||||
|
|
@ -33,7 +36,7 @@ export default function EditCollectionSharingModal({
|
|||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Updating...");
|
||||
const load = toast.loading(t("updating"));
|
||||
|
||||
let response;
|
||||
|
||||
|
|
@ -42,7 +45,7 @@ export default function EditCollectionSharingModal({
|
|||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Updated!`);
|
||||
toast.success(t("updated"));
|
||||
onClose();
|
||||
} else toast.error(response.data as string);
|
||||
|
||||
|
|
@ -93,7 +96,7 @@ export default function EditCollectionSharingModal({
|
|||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">
|
||||
{permissions === true ? "Share and Collaborate" : "Team"}
|
||||
{permissions === true ? t("share_and_collaborate") : t("team")}
|
||||
</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
|
@ -101,7 +104,7 @@ export default function EditCollectionSharingModal({
|
|||
<div className="flex flex-col gap-3">
|
||||
{permissions === true && (
|
||||
<div>
|
||||
<p>Make Public</p>
|
||||
<p>{t("make_collection_public")}</p>
|
||||
|
||||
<label className="label cursor-pointer justify-start gap-2">
|
||||
<input
|
||||
|
|
@ -115,25 +118,26 @@ export default function EditCollectionSharingModal({
|
|||
}
|
||||
className="checkbox checkbox-primary"
|
||||
/>
|
||||
<span className="label-text">Make this a public collection</span>
|
||||
<span className="label-text">
|
||||
{t("make_collection_public_checkbox")}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<p className="text-neutral text-sm">
|
||||
This will let <b>Anyone</b> to view this collection and it's
|
||||
users.
|
||||
{t("make_collection_public_desc")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{collection.isPublic ? (
|
||||
<div className={permissions === true ? "pl-5" : ""}>
|
||||
<p className="mb-2">Sharable Link (Click to copy)</p>
|
||||
<p className="mb-2">{t("sharable_link_guide")}</p>
|
||||
<div
|
||||
onClick={() => {
|
||||
try {
|
||||
navigator.clipboard
|
||||
.writeText(publicCollectionURL)
|
||||
.then(() => toast.success("Copied!"));
|
||||
.then(() => toast.success(t("copied")));
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
|
@ -149,13 +153,13 @@ export default function EditCollectionSharingModal({
|
|||
|
||||
{permissions === true && (
|
||||
<>
|
||||
<p>Members</p>
|
||||
<p>{t("members")}</p>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<TextInput
|
||||
value={memberUsername || ""}
|
||||
className="bg-base-200"
|
||||
placeholder="Username (without the '@')"
|
||||
placeholder={t("members_username_placeholder")}
|
||||
onChange={(e) => setMemberUsername(e.target.value)}
|
||||
onKeyDown={(e) =>
|
||||
e.key === "Enter" &&
|
||||
|
|
@ -163,7 +167,8 @@ export default function EditCollectionSharingModal({
|
|||
account.username as string,
|
||||
memberUsername || "",
|
||||
collection,
|
||||
setMemberState
|
||||
setMemberState,
|
||||
t
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
|
@ -174,7 +179,8 @@ export default function EditCollectionSharingModal({
|
|||
account.username as string,
|
||||
memberUsername || "",
|
||||
collection,
|
||||
setMemberState
|
||||
setMemberState,
|
||||
t
|
||||
)
|
||||
}
|
||||
className="btn btn-accent dark:border-violet-400 text-white btn-square btn-sm h-10 w-10"
|
||||
|
|
@ -214,7 +220,7 @@ export default function EditCollectionSharingModal({
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm font-bold">Owner</p>
|
||||
<p className="text-sm font-bold">{t("owner")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -226,11 +232,11 @@ export default function EditCollectionSharingModal({
|
|||
.map((e, i) => {
|
||||
const roleLabel =
|
||||
e.canCreate && e.canUpdate && e.canDelete
|
||||
? "Admin"
|
||||
? t("admin")
|
||||
: e.canCreate && !e.canUpdate && !e.canDelete
|
||||
? "Contributor"
|
||||
? t("contributor")
|
||||
: !e.canCreate && !e.canUpdate && !e.canDelete
|
||||
? "Viewer"
|
||||
? t("viewer")
|
||||
: undefined;
|
||||
|
||||
return (
|
||||
|
|
@ -307,8 +313,10 @@ export default function EditCollectionSharingModal({
|
|||
}}
|
||||
/>
|
||||
<div>
|
||||
<p className="font-bold">Viewer</p>
|
||||
<p>Read-only access</p>
|
||||
<p className="font-bold">
|
||||
{t("viewer")}
|
||||
</p>
|
||||
<p>{t("viewer_desc")}</p>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
|
|
@ -350,8 +358,10 @@ export default function EditCollectionSharingModal({
|
|||
}}
|
||||
/>
|
||||
<div>
|
||||
<p className="font-bold">Contributor</p>
|
||||
<p>Can view and create Links</p>
|
||||
<p className="font-bold">
|
||||
{t("contributor")}
|
||||
</p>
|
||||
<p>{t("contributor_desc")}</p>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
|
|
@ -393,8 +403,10 @@ export default function EditCollectionSharingModal({
|
|||
}}
|
||||
/>
|
||||
<div>
|
||||
<p className="font-bold">Admin</p>
|
||||
<p>Full access to all Links</p>
|
||||
<p className="font-bold">
|
||||
{t("admin")}
|
||||
</p>
|
||||
<p>{t("admin_desc")}</p>
|
||||
</div>
|
||||
</label>
|
||||
</li>
|
||||
|
|
@ -411,7 +423,7 @@ export default function EditCollectionSharingModal({
|
|||
className={
|
||||
"bi-x text-xl btn btn-sm btn-square btn-ghost text-neutral hover:text-red-500 dark:hover:text-red-500 duration-100 cursor-pointer"
|
||||
}
|
||||
title="Remove Member"
|
||||
title={t("remove_member")}
|
||||
onClick={() => {
|
||||
const updatedMembers =
|
||||
collection.members.filter((member) => {
|
||||
|
|
@ -442,7 +454,7 @@ export default function EditCollectionSharingModal({
|
|||
className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto mt-3"
|
||||
onClick={submit}
|
||||
>
|
||||
Save Changes
|
||||
{t("save_changes")}
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
|||
import toast from "react-hot-toast";
|
||||
import Link from "next/link";
|
||||
import Modal from "../Modal";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -15,13 +16,13 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function EditLinkModal({ onClose, activeLink }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [link, setLink] =
|
||||
useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
|
||||
|
||||
let shortendURL;
|
||||
|
||||
let shortenedURL;
|
||||
try {
|
||||
shortendURL = new URL(link.url || "").host.toLowerCase();
|
||||
shortenedURL = new URL(link.url || "").host.toLowerCase();
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
|
|
@ -31,7 +32,6 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
|
|||
|
||||
const setCollection = (e: any) => {
|
||||
if (e?.__isNew__) e.value = null;
|
||||
|
||||
setLink({
|
||||
...link,
|
||||
collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
|
||||
|
|
@ -39,10 +39,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
|
|||
};
|
||||
|
||||
const setTags = (e: any) => {
|
||||
const tagNames = e.map((e: any) => {
|
||||
return { name: e.label };
|
||||
});
|
||||
|
||||
const tagNames = e.map((e: any) => ({ name: e.label }));
|
||||
setLink({ ...link, tags: tagNames });
|
||||
};
|
||||
|
||||
|
|
@ -53,29 +50,25 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
|
|||
const submit = async () => {
|
||||
if (!submitLoader) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
let response;
|
||||
|
||||
const load = toast.loading("Updating...");
|
||||
|
||||
response = await updateLink(link);
|
||||
|
||||
const load = toast.loading(t("updating"));
|
||||
let response = await updateLink(link);
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Updated!`);
|
||||
toast.success(t("updated"));
|
||||
onClose();
|
||||
} else toast.error(response.data as string);
|
||||
} else {
|
||||
toast.error(response.data as string);
|
||||
}
|
||||
|
||||
setSubmitLoader(false);
|
||||
|
||||
return response;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">Edit Link</p>
|
||||
<p className="text-xl font-thin">{t("edit_link")}</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
|
|
@ -87,42 +80,31 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
|
|||
target="_blank"
|
||||
>
|
||||
<i className="bi-link-45deg text-xl" />
|
||||
<p>{shortendURL}</p>
|
||||
<p>{shortenedURL}</p>
|
||||
</Link>
|
||||
) : undefined}
|
||||
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Name</p>
|
||||
<p className="mb-2">{t("name")}</p>
|
||||
<TextInput
|
||||
value={link.name}
|
||||
onChange={(e) => setLink({ ...link, name: e.target.value })}
|
||||
placeholder="e.g. Example Link"
|
||||
placeholder={t("placeholder_example_link")}
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="mt-5">
|
||||
{/* <hr className="mb-3 border border-neutral-content" /> */}
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="mb-2">Collection</p>
|
||||
<p className="mb-2">{t("collection")}</p>
|
||||
{link.collection.name ? (
|
||||
<CollectionSelection
|
||||
onChange={setCollection}
|
||||
// defaultValue={{
|
||||
// label: link.collection.name,
|
||||
// value: link.collection.id,
|
||||
// }}
|
||||
defaultValue={
|
||||
link.collection.id
|
||||
? {
|
||||
value: link.collection.id,
|
||||
label: link.collection.name,
|
||||
}
|
||||
: {
|
||||
value: null as unknown as number,
|
||||
label: "Unorganized",
|
||||
}
|
||||
? { value: link.collection.id, label: link.collection.name }
|
||||
: { value: null as unknown as number, label: "Unorganized" }
|
||||
}
|
||||
creatable={false}
|
||||
/>
|
||||
|
|
@ -130,23 +112,24 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Tags</p>
|
||||
<p className="mb-2">{t("tags")}</p>
|
||||
<TagSelection
|
||||
onChange={setTags}
|
||||
defaultValue={link.tags.map((e) => {
|
||||
return { label: e.name, value: e.id };
|
||||
})}
|
||||
defaultValue={link.tags.map((e) => ({
|
||||
label: e.name,
|
||||
value: e.id,
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<p className="mb-2">Description</p>
|
||||
<p className="mb-2">{t("description")}</p>
|
||||
<textarea
|
||||
value={unescapeString(link.description) as string}
|
||||
onChange={(e) =>
|
||||
setLink({ ...link, description: e.target.value })
|
||||
}
|
||||
placeholder="Will be auto generated if nothing is provided."
|
||||
placeholder={t("link_description_placeholder")}
|
||||
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -158,7 +141,7 @@ export default function EditLinkModal({ onClose, activeLink }: Props) {
|
|||
className="btn btn-accent dark:border-violet-400 text-white"
|
||||
onClick={submit}
|
||||
>
|
||||
Save Changes
|
||||
{t("save_changes")}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { useState } from "react";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import Modal from "../Modal";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -15,39 +16,40 @@ export default function EmailChangeVerificationModal({
|
|||
oldEmail,
|
||||
newEmail,
|
||||
}: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [password, setPassword] = useState("");
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">Confirm Password</p>
|
||||
<p className="text-xl font-thin">{t("confirm_password")}</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex flex-col gap-5">
|
||||
<p>
|
||||
Please confirm your password before changing your email address.{" "}
|
||||
{process.env.NEXT_PUBLIC_STRIPE === "true" &&
|
||||
"Updating this field will change your billing email on Stripe as well."}
|
||||
{t("password_change_warning")}
|
||||
{process.env.NEXT_PUBLIC_STRIPE === "true" && t("stripe_update_note")}
|
||||
</p>
|
||||
|
||||
<p>
|
||||
If you change your email address, any existing{" "}
|
||||
{process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true" && "Google"} SSO
|
||||
connections will be removed.
|
||||
{t("sso_will_be_removed_warning", {
|
||||
service:
|
||||
process.env.NEXT_PUBLIC_GOOGLE_ENABLED === "true" ? "Google" : "",
|
||||
})}
|
||||
</p>
|
||||
|
||||
<div>
|
||||
<p>Old Email</p>
|
||||
<p>{t("old_email")}</p>
|
||||
<p className="text-neutral">{oldEmail}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>New Email</p>
|
||||
<p>{t("new_email")}</p>
|
||||
<p className="text-neutral">{newEmail}</p>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Password</p>
|
||||
<p className="mb-2">{t("password")}</p>
|
||||
<TextInput
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
|
|
@ -63,7 +65,7 @@ export default function EmailChangeVerificationModal({
|
|||
className="btn btn-accent dark:border-violet-400 text-white"
|
||||
onClick={() => onSubmit(password)}
|
||||
>
|
||||
Confirm
|
||||
{t("confirm")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import Modal from "../Modal";
|
|||
import { CollectionIncludingMembersAndLinkCount } from "@/types/global";
|
||||
import useAccountStore from "@/store/account";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -15,6 +16,7 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function NewCollectionModal({ onClose, parent }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const initial = {
|
||||
parentId: parent?.id,
|
||||
name: "",
|
||||
|
|
@ -39,15 +41,14 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
|
|||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Creating...");
|
||||
const load = toast.loading(t("creating"));
|
||||
|
||||
let response = await addCollection(collection as any);
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Created!");
|
||||
toast.success(t("created"));
|
||||
if (response.data) {
|
||||
// If the collection was created successfully, we need to get the new collection order
|
||||
setAccount(data?.user.id as number);
|
||||
onClose();
|
||||
}
|
||||
|
|
@ -60,11 +61,13 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
|
|||
<Modal toggleModal={onClose}>
|
||||
{parent?.id ? (
|
||||
<>
|
||||
<p className="text-xl font-thin">New Sub-Collection</p>
|
||||
<p className="capitalize text-sm">For {parent.name}</p>
|
||||
<p className="text-xl font-thin">{t("new_sub_collection")}</p>
|
||||
<p className="capitalize text-sm">
|
||||
{t("for_collection", { name: parent.name })}
|
||||
</p>
|
||||
</>
|
||||
) : (
|
||||
<p className="text-xl font-thin">Create a New Collection</p>
|
||||
<p className="text-xl font-thin">{t("create_new_collection")}</p>
|
||||
)}
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
|
@ -72,19 +75,25 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
|
|||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col sm:flex-row gap-3">
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Name</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
<p className="mb-2">{t("name")}</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
<TextInput
|
||||
className="bg-base-200"
|
||||
value={collection.name}
|
||||
placeholder="e.g. Example Collection"
|
||||
placeholder={t("collection_name_placeholder")}
|
||||
onChange={(e) =>
|
||||
setCollection({ ...collection, name: e.target.value })
|
||||
}
|
||||
/>
|
||||
<div>
|
||||
<p className="w-full mb-2">Color</p>
|
||||
<div className="color-picker flex justify-between">
|
||||
<p className="w-full mb-2">{t("color")}</p>
|
||||
<div className="color-picker flex justify-between items-center">
|
||||
<HexColorPicker
|
||||
color={collection.color}
|
||||
onChange={(color) =>
|
||||
setCollection({ ...collection, color })
|
||||
}
|
||||
/>
|
||||
<div className="flex flex-col gap-2 items-center w-32">
|
||||
<i
|
||||
className={"bi-folder-fill text-5xl"}
|
||||
|
|
@ -96,29 +105,22 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
|
|||
setCollection({ ...collection, color: "#0ea5e9" })
|
||||
}
|
||||
>
|
||||
Reset
|
||||
{t("reset")}
|
||||
</div>
|
||||
</div>
|
||||
<HexColorPicker
|
||||
color={collection.color}
|
||||
onChange={(e) => setCollection({ ...collection, color: e })}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Description</p>
|
||||
<p className="mb-2">{t("description")}</p>
|
||||
<textarea
|
||||
className="w-full h-[13rem] resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
|
||||
placeholder="The purpose of this Collection..."
|
||||
placeholder={t("collection_description_placeholder")}
|
||||
value={collection.description}
|
||||
onChange={(e) =>
|
||||
setCollection({
|
||||
...collection,
|
||||
description: e.target.value,
|
||||
})
|
||||
setCollection({ ...collection, description: e.target.value })
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -128,7 +130,7 @@ export default function NewCollectionModal({ onClose, parent }: Props) {
|
|||
className="btn btn-accent dark:border-violet-400 text-white w-fit ml-auto"
|
||||
onClick={submit}
|
||||
>
|
||||
Create Collection
|
||||
{t("create_collection_button")}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -11,14 +11,15 @@ import { useSession } from "next-auth/react";
|
|||
import { useRouter } from "next/router";
|
||||
import toast from "react-hot-toast";
|
||||
import Modal from "../Modal";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
};
|
||||
|
||||
export default function NewLinkModal({ onClose }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { data } = useSession();
|
||||
|
||||
const initial = {
|
||||
name: "",
|
||||
url: "",
|
||||
|
|
@ -38,18 +39,14 @@ export default function NewLinkModal({ onClose }: Props) {
|
|||
|
||||
const [link, setLink] =
|
||||
useState<LinkIncludingShortenedCollectionAndTags>(initial);
|
||||
|
||||
const { addLink } = useLinkStore();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const [optionsExpanded, setOptionsExpanded] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const setCollection = (e: any) => {
|
||||
if (e?.__isNew__) e.value = null;
|
||||
|
||||
setLink({
|
||||
...link,
|
||||
collection: { id: e?.value, name: e?.label, ownerId: e?.ownerId },
|
||||
|
|
@ -57,10 +54,7 @@ export default function NewLinkModal({ onClose }: Props) {
|
|||
};
|
||||
|
||||
const setTags = (e: any) => {
|
||||
const tagNames = e.map((e: any) => {
|
||||
return { name: e.label };
|
||||
});
|
||||
|
||||
const tagNames = e.map((e: any) => ({ name: e.label }));
|
||||
setLink({ ...link, tags: tagNames });
|
||||
};
|
||||
|
||||
|
|
@ -69,7 +63,6 @@ export default function NewLinkModal({ onClose }: Props) {
|
|||
const currentCollection = collections.find(
|
||||
(e) => e.id == Number(router.query.id)
|
||||
);
|
||||
|
||||
if (
|
||||
currentCollection &&
|
||||
currentCollection.ownerId &&
|
||||
|
|
@ -86,53 +79,42 @@ export default function NewLinkModal({ onClose }: Props) {
|
|||
} else
|
||||
setLink({
|
||||
...initial,
|
||||
collection: {
|
||||
name: "Unorganized",
|
||||
ownerId: data?.user.id as number,
|
||||
},
|
||||
collection: { name: "Unorganized", ownerId: data?.user.id as number },
|
||||
});
|
||||
}, []);
|
||||
|
||||
const submit = async () => {
|
||||
if (!submitLoader) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
let response;
|
||||
|
||||
const load = toast.loading("Creating...");
|
||||
|
||||
response = await addLink(link);
|
||||
|
||||
const load = toast.loading(t("creating_link"));
|
||||
const response = await addLink(link);
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Created!`);
|
||||
toast.success(t("link_created"));
|
||||
onClose();
|
||||
} else toast.error(response.data as string);
|
||||
} else {
|
||||
toast.error(response.data as string);
|
||||
}
|
||||
setSubmitLoader(false);
|
||||
|
||||
return response;
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">Create a New Link</p>
|
||||
|
||||
<p className="text-xl font-thin">{t("create_new_link")}</p>
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
|
||||
<div className="sm:col-span-3 col-span-5">
|
||||
<p className="mb-2">Link</p>
|
||||
<p className="mb-2">{t("link")}</p>
|
||||
<TextInput
|
||||
value={link.url || ""}
|
||||
onChange={(e) => setLink({ ...link, url: e.target.value })}
|
||||
placeholder="e.g. http://example.com/"
|
||||
placeholder={t("link_url_placeholder")}
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
<div className="sm:col-span-2 col-span-5">
|
||||
<p className="mb-2">Collection</p>
|
||||
<p className="mb-2">{t("collection")}</p>
|
||||
{link.collection.name ? (
|
||||
<CollectionSelection
|
||||
onChange={setCollection}
|
||||
|
|
@ -144,40 +126,37 @@ export default function NewLinkModal({ onClose }: Props) {
|
|||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={"mt-2"}>
|
||||
{optionsExpanded ? (
|
||||
<div className="mt-5">
|
||||
{/* <hr className="mb-3 border border-neutral-content" /> */}
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="mb-2">Name</p>
|
||||
<p className="mb-2">{t("name")}</p>
|
||||
<TextInput
|
||||
value={link.name}
|
||||
onChange={(e) => setLink({ ...link, name: e.target.value })}
|
||||
placeholder="Will be auto generated if left empty."
|
||||
placeholder={t("link_name_placeholder")}
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Tags</p>
|
||||
<p className="mb-2">{t("tags")}</p>
|
||||
<TagSelection
|
||||
onChange={setTags}
|
||||
defaultValue={link.tags.map((e) => {
|
||||
return { label: e.name, value: e.id };
|
||||
})}
|
||||
defaultValue={link.tags.map((e) => ({
|
||||
label: e.name,
|
||||
value: e.id,
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<p className="mb-2">Description</p>
|
||||
<p className="mb-2">{t("description")}</p>
|
||||
<textarea
|
||||
value={unescapeString(link.description) as string}
|
||||
onChange={(e) =>
|
||||
setLink({ ...link, description: e.target.value })
|
||||
}
|
||||
placeholder="Notes, thoughts, etc."
|
||||
placeholder={t("link_description_placeholder")}
|
||||
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-primary border-solid border outline-none duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -185,27 +164,19 @@ export default function NewLinkModal({ onClose }: Props) {
|
|||
</div>
|
||||
) : undefined}
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center mt-5">
|
||||
<div
|
||||
onClick={() => setOptionsExpanded(!optionsExpanded)}
|
||||
className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
|
||||
>
|
||||
<p className="font-normal">
|
||||
{optionsExpanded ? "Hide" : "More"} Options
|
||||
</p>
|
||||
<i
|
||||
className={`${
|
||||
optionsExpanded ? "bi-chevron-up" : "bi-chevron-down"
|
||||
}`}
|
||||
></i>
|
||||
<p>{optionsExpanded ? t("hide_options") : t("more_options")}</p>
|
||||
<i className={`bi-chevron-${optionsExpanded ? "up" : "down"}`}></i>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-accent dark:border-violet-400 text-white"
|
||||
onClick={submit}
|
||||
>
|
||||
Create Link
|
||||
{t("create_link")}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -6,14 +6,15 @@ import Modal from "../Modal";
|
|||
import useTokenStore from "@/store/tokens";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import Button from "../ui/Button";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
};
|
||||
|
||||
export default function NewTokenModal({ onClose }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [newToken, setNewToken] = useState("");
|
||||
|
||||
const { addToken } = useTokenStore();
|
||||
|
||||
const initial = {
|
||||
|
|
@ -22,21 +23,19 @@ export default function NewTokenModal({ onClose }: Props) {
|
|||
};
|
||||
|
||||
const [token, setToken] = useState(initial as any);
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const submit = async () => {
|
||||
if (!submitLoader) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Creating...");
|
||||
const load = toast.loading(t("creating_token"));
|
||||
|
||||
const { ok, data } = await addToken(token);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (ok) {
|
||||
toast.success(`Created!`);
|
||||
toast.success(t("token_created"));
|
||||
setNewToken((data as any).secretKey);
|
||||
} else toast.error(data as string);
|
||||
|
||||
|
|
@ -44,15 +43,27 @@ export default function NewTokenModal({ onClose }: Props) {
|
|||
}
|
||||
};
|
||||
|
||||
const getLabel = (expiry: TokenExpiry) => {
|
||||
switch (expiry) {
|
||||
case TokenExpiry.sevenDays:
|
||||
return t("7_days");
|
||||
case TokenExpiry.oneMonth:
|
||||
return t("30_days");
|
||||
case TokenExpiry.twoMonths:
|
||||
return t("60_days");
|
||||
case TokenExpiry.threeMonths:
|
||||
return t("90_days");
|
||||
case TokenExpiry.never:
|
||||
return t("no_expiration");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
{newToken ? (
|
||||
<div className="flex flex-col justify-center space-y-4">
|
||||
<p className="text-xl font-thin">Access Token Created</p>
|
||||
<p>
|
||||
Your new token has been created. Please copy it and store it
|
||||
somewhere safe. You will not be able to see it again.
|
||||
</p>
|
||||
<p className="text-xl font-thin">{t("access_token_created")}</p>
|
||||
<p>{t("token_creation_notice")}</p>
|
||||
<TextInput
|
||||
spellCheck={false}
|
||||
value={newToken}
|
||||
|
|
@ -62,33 +73,33 @@ export default function NewTokenModal({ onClose }: Props) {
|
|||
<button
|
||||
onClick={() => {
|
||||
navigator.clipboard.writeText(newToken);
|
||||
toast.success("Copied to clipboard!");
|
||||
toast.success(t("copied_to_clipboard"));
|
||||
}}
|
||||
className="btn btn-primary w-fit mx-auto"
|
||||
>
|
||||
Copy to Clipboard
|
||||
{t("copy_to_clipboard")}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<p className="text-xl font-thin">Create an Access Token</p>
|
||||
<p className="text-xl font-thin">{t("create_access_token")}</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex sm:flex-row flex-col gap-2 items-center">
|
||||
<div className="w-full">
|
||||
<p className="mb-2">Name</p>
|
||||
<p className="mb-2">{t("name")}</p>
|
||||
|
||||
<TextInput
|
||||
value={token.name}
|
||||
onChange={(e) => setToken({ ...token, name: e.target.value })}
|
||||
placeholder="e.g. For the iOS shortcut"
|
||||
placeholder={t("token_name_placeholder")}
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="w-full sm:w-fit">
|
||||
<p className="mb-2">Expires in</p>
|
||||
<p className="mb-2">{t("expires_in")}</p>
|
||||
|
||||
<div className="dropdown dropdown-bottom dropdown-end w-full">
|
||||
<Button
|
||||
|
|
@ -98,11 +109,7 @@ export default function NewTokenModal({ onClose }: Props) {
|
|||
onMouseDown={dropdownTriggerer}
|
||||
className="whitespace-nowrap w-32"
|
||||
>
|
||||
{token.expires === TokenExpiry.sevenDays && "7 Days"}
|
||||
{token.expires === TokenExpiry.oneMonth && "30 Days"}
|
||||
{token.expires === TokenExpiry.twoMonths && "60 Days"}
|
||||
{token.expires === TokenExpiry.threeMonths && "90 Days"}
|
||||
{token.expires === TokenExpiry.never && "No Expiration"}
|
||||
{getLabel(token.expires)}
|
||||
</Button>
|
||||
<ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-full sm:w-52 mt-1">
|
||||
<li>
|
||||
|
|
@ -124,7 +131,7 @@ export default function NewTokenModal({ onClose }: Props) {
|
|||
});
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">7 Days</span>
|
||||
<span className="label-text">{t("7_days")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -143,7 +150,7 @@ export default function NewTokenModal({ onClose }: Props) {
|
|||
setToken({ ...token, expires: TokenExpiry.oneMonth });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">30 Days</span>
|
||||
<span className="label-text">{t("30_days")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -165,7 +172,7 @@ export default function NewTokenModal({ onClose }: Props) {
|
|||
});
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">60 Days</span>
|
||||
<span className="label-text">{t("60_days")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -187,7 +194,7 @@ export default function NewTokenModal({ onClose }: Props) {
|
|||
});
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">90 Days</span>
|
||||
<span className="label-text">{t("90_days")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -206,7 +213,7 @@ export default function NewTokenModal({ onClose }: Props) {
|
|||
setToken({ ...token, expires: TokenExpiry.never });
|
||||
}}
|
||||
/>
|
||||
<span className="label-text">No Expiration</span>
|
||||
<span className="label-text">{t("no_expiration")}</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -219,7 +226,7 @@ export default function NewTokenModal({ onClose }: Props) {
|
|||
className="btn btn-accent dark:border-violet-400 text-white"
|
||||
onClick={submit}
|
||||
>
|
||||
Create Access Token
|
||||
{t("create_token")}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import Modal from "../Modal";
|
|||
import useUserStore from "@/store/admin/users";
|
||||
import TextInput from "../TextInput";
|
||||
import { FormEvent, useState } from "react";
|
||||
import { useTranslation, Trans } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -18,15 +19,14 @@ type FormData = {
|
|||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
|
||||
|
||||
export default function NewUserModal({ onClose }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { addUser } = useUserStore();
|
||||
|
||||
const [form, setForm] = useState<FormData>({
|
||||
name: "",
|
||||
username: "",
|
||||
email: emailEnabled ? "" : undefined,
|
||||
password: "",
|
||||
});
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
async function submit(event: FormEvent<HTMLFormElement>) {
|
||||
|
|
@ -45,11 +45,11 @@ export default function NewUserModal({ onClose }: Props) {
|
|||
|
||||
if (checkFields()) {
|
||||
if (form.password.length < 8)
|
||||
return toast.error("Passwords must be at least 8 characters.");
|
||||
return toast.error(t("password_length_error"));
|
||||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Creating Account...");
|
||||
const load = toast.loading(t("creating_account"));
|
||||
|
||||
const response = await addUser(form);
|
||||
|
||||
|
|
@ -57,29 +57,29 @@ export default function NewUserModal({ onClose }: Props) {
|
|||
setSubmitLoader(false);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("User Created!");
|
||||
toast.success(t("user_created"));
|
||||
onClose();
|
||||
} else {
|
||||
toast.error(response.data as string);
|
||||
}
|
||||
} else {
|
||||
toast.error("Please fill out all the fields.");
|
||||
toast.error(t("fill_all_fields_error"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">Create New User</p>
|
||||
<p className="text-xl font-thin">{t("create_new_user")}</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<form onSubmit={submit}>
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="mb-2">Display Name</p>
|
||||
<p className="mb-2">{t("display_name")}</p>
|
||||
<TextInput
|
||||
placeholder="Johnny"
|
||||
placeholder={t("placeholder_johnny")}
|
||||
className="bg-base-200"
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
value={form.name}
|
||||
|
|
@ -88,9 +88,9 @@ export default function NewUserModal({ onClose }: Props) {
|
|||
|
||||
{emailEnabled ? (
|
||||
<div>
|
||||
<p className="mb-2">Email</p>
|
||||
<p className="mb-2">{t("email")}</p>
|
||||
<TextInput
|
||||
placeholder="johnny@example.com"
|
||||
placeholder={t("placeholder_email")}
|
||||
className="bg-base-200"
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
value={form.email}
|
||||
|
|
@ -100,13 +100,13 @@ export default function NewUserModal({ onClose }: Props) {
|
|||
|
||||
<div>
|
||||
<p className="mb-2">
|
||||
Username{" "}
|
||||
{t("username")}{" "}
|
||||
{emailEnabled && (
|
||||
<span className="text-xs text-neutral">(Optional)</span>
|
||||
<span className="text-xs text-neutral">{t("optional")}</span>
|
||||
)}
|
||||
</p>
|
||||
<TextInput
|
||||
placeholder="john"
|
||||
placeholder={t("placeholder_john")}
|
||||
className="bg-base-200"
|
||||
onChange={(e) => setForm({ ...form, username: e.target.value })}
|
||||
value={form.username}
|
||||
|
|
@ -114,7 +114,7 @@ export default function NewUserModal({ onClose }: Props) {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Password</p>
|
||||
<p className="mb-2">{t("password")}</p>
|
||||
<TextInput
|
||||
placeholder="••••••••••••••"
|
||||
className="bg-base-200"
|
||||
|
|
@ -127,8 +127,10 @@ export default function NewUserModal({ onClose }: Props) {
|
|||
<div role="note" className="alert alert-note mt-5">
|
||||
<i className="bi-exclamation-triangle text-xl" />
|
||||
<span>
|
||||
<b>Note:</b> Please make sure you inform the user that they need to
|
||||
change their password.
|
||||
<Trans
|
||||
i18nKey="password_change_note"
|
||||
components={[<b key={0} />]}
|
||||
/>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -137,7 +139,7 @@ export default function NewUserModal({ onClose }: Props) {
|
|||
className="btn btn-accent dark:border-violet-400 text-white ml-auto"
|
||||
type="submit"
|
||||
>
|
||||
Create User
|
||||
{t("create_user")}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import useLinkStore from "@/store/links";
|
||||
import {
|
||||
ArchivedFormat,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
ArchivedFormat,
|
||||
} from "@/types/global";
|
||||
import toast from "react-hot-toast";
|
||||
import Link from "next/link";
|
||||
|
|
@ -17,6 +17,7 @@ import {
|
|||
import PreservedFormatRow from "@/components/PreserverdFormatRow";
|
||||
import useAccountStore from "@/store/account";
|
||||
import getPublicUserData from "@/lib/client/getPublicUserData";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -24,14 +25,12 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const session = useSession();
|
||||
const { getLink } = useLinkStore();
|
||||
|
||||
const { account } = useAccountStore();
|
||||
|
||||
const [link, setLink] =
|
||||
useState<LinkIncludingShortenedCollectionAndTags>(activeLink);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
let isPublic = router.pathname.startsWith("/public") ? true : undefined;
|
||||
|
|
@ -109,17 +108,16 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
|||
clearInterval(interval);
|
||||
}
|
||||
};
|
||||
}, [link?.image, link?.pdf, link?.readable]);
|
||||
}, [link, getLink]);
|
||||
|
||||
const updateArchive = async () => {
|
||||
const load = toast.loading("Sending request...");
|
||||
const load = toast.loading(t("sending_request"));
|
||||
|
||||
const response = await fetch(`/api/v1/links/${link?.id}/archive`, {
|
||||
method: "PUT",
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
|
|
@ -127,33 +125,29 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
|||
setLink(
|
||||
(newLink as any).response as LinkIncludingShortenedCollectionAndTags
|
||||
);
|
||||
toast.success(`Link is being archived...`);
|
||||
toast.success(t("link_being_archived"));
|
||||
} else toast.error(data.response);
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin">Preserved Formats</p>
|
||||
|
||||
<p className="text-xl font-thin">{t("preserved_formats")}</p>
|
||||
<div className="divider mb-2 mt-1"></div>
|
||||
|
||||
{isReady() &&
|
||||
(screenshotAvailable(link) ||
|
||||
pdfAvailable(link) ||
|
||||
readabilityAvailable(link)) ? (
|
||||
<p className="mb-3">
|
||||
The following formats are available for this link:
|
||||
</p>
|
||||
<p className="mb-3">{t("available_formats")}</p>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
|
||||
<div className={`flex flex-col gap-3`}>
|
||||
<div className="flex flex-col gap-3">
|
||||
{isReady() ? (
|
||||
<>
|
||||
{screenshotAvailable(link) ? (
|
||||
<PreservedFormatRow
|
||||
name={"Screenshot"}
|
||||
name={t("screenshot")}
|
||||
icon={"bi-file-earmark-image"}
|
||||
format={
|
||||
link?.image?.endsWith("png")
|
||||
|
|
@ -164,37 +158,29 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
|||
downloadable={true}
|
||||
/>
|
||||
) : undefined}
|
||||
|
||||
{pdfAvailable(link) ? (
|
||||
<PreservedFormatRow
|
||||
name={"PDF"}
|
||||
icon={"bi-file-earmark-pdf"}
|
||||
name={t("pdf")}
|
||||
icon="bi-file-earmark-pdf"
|
||||
format={ArchivedFormat.pdf}
|
||||
activeLink={link}
|
||||
downloadable={true}
|
||||
/>
|
||||
) : undefined}
|
||||
|
||||
{readabilityAvailable(link) ? (
|
||||
<PreservedFormatRow
|
||||
name={"Readable"}
|
||||
icon={"bi-file-earmark-text"}
|
||||
name={t("readable")}
|
||||
icon="bi-file-earmark-text"
|
||||
format={ArchivedFormat.readability}
|
||||
activeLink={link}
|
||||
/>
|
||||
) : undefined}
|
||||
</>
|
||||
) : (
|
||||
<div
|
||||
className={`w-full h-full flex flex-col justify-center p-10 skeleton bg-base-200`}
|
||||
>
|
||||
<div className="w-full h-full flex flex-col justify-center p-10 skeleton bg-base-200">
|
||||
<i className="bi-stack drop-shadow text-primary text-8xl mx-auto mb-5"></i>
|
||||
<p className="text-center text-2xl">
|
||||
Link preservation is in the queue
|
||||
</p>
|
||||
<p className="text-center text-lg">
|
||||
Please check back later to see the result
|
||||
</p>
|
||||
<p className="text-center text-2xl">{t("preservation_in_queue")}</p>
|
||||
<p className="text-center text-lg">{t("check_back_later")}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
|
@ -209,23 +195,21 @@ export default function PreservedFormatsModal({ onClose, activeLink }: Props) {
|
|||
""
|
||||
)}`}
|
||||
target="_blank"
|
||||
className={`text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm`}
|
||||
className="text-neutral duration-100 hover:opacity-60 flex gap-2 w-1/2 justify-center items-center text-sm"
|
||||
>
|
||||
<p className="whitespace-nowrap">
|
||||
View latest snapshot on archive.org
|
||||
</p>
|
||||
<p className="whitespace-nowrap">{t("view_latest_snapshot")}</p>
|
||||
<i className="bi-box-arrow-up-right" />
|
||||
</Link>
|
||||
{link?.collection.ownerId === session.data?.user.id ? (
|
||||
<div className={`btn btn-outline`} onClick={() => updateArchive()}>
|
||||
{link?.collection.ownerId === session.data?.user.id && (
|
||||
<div className="btn btn-outline" onClick={updateArchive}>
|
||||
<div>
|
||||
<p>Refresh Preserved Formats</p>
|
||||
<p>{t("refresh_preserved_formats")}</p>
|
||||
<p className="text-xs">
|
||||
This deletes the current preservations
|
||||
{t("this_deletes_current_preservations")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : undefined}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,10 @@
|
|||
import React, { useEffect, useState } from "react";
|
||||
import useLinkStore from "@/store/links";
|
||||
import useTokenStore from "@/store/tokens";
|
||||
import toast from "react-hot-toast";
|
||||
import Modal from "../Modal";
|
||||
import { useRouter } from "next/router";
|
||||
import { AccessToken } from "@prisma/client";
|
||||
import useTokenStore from "@/store/tokens";
|
||||
import Button from "../ui/Button";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { AccessToken } from "@prisma/client";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
|
|
@ -13,46 +12,41 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function DeleteTokenModal({ onClose, activeToken }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [token, setToken] = useState<AccessToken>(activeToken);
|
||||
|
||||
const { revokeToken } = useTokenStore();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
setToken(activeToken);
|
||||
}, []);
|
||||
}, [activeToken]);
|
||||
|
||||
const deleteLink = async () => {
|
||||
console.log(token);
|
||||
const load = toast.loading("Deleting...");
|
||||
const load = toast.loading(t("deleting"));
|
||||
|
||||
const response = await revokeToken(token.id as number);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok && toast.success(`Token Revoked.`);
|
||||
if (response.ok) {
|
||||
toast.success(t("token_revoked"));
|
||||
}
|
||||
|
||||
onClose();
|
||||
};
|
||||
|
||||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<p className="text-xl font-thin text-red-500">Revoke Token</p>
|
||||
<p className="text-xl font-thin text-red-500">{t("revoke_token")}</p>
|
||||
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<p>
|
||||
Are you sure you want to revoke this Access Token? Any apps or
|
||||
services using this token will no longer be able to access Linkwarden
|
||||
using it.
|
||||
</p>
|
||||
<p>{t("revoke_confirmation")}</p>
|
||||
|
||||
<Button className="ml-auto" intent="destructive" onClick={deleteLink}>
|
||||
<i className="bi-trash text-xl" />
|
||||
Revoke
|
||||
{t("revoke")}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -5,20 +5,19 @@ import TextInput from "@/components/TextInput";
|
|||
import unescapeString from "@/lib/client/unescapeString";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import useLinkStore from "@/store/links";
|
||||
import {
|
||||
ArchivedFormat,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||
import { useSession } from "next-auth/react";
|
||||
import { useRouter } from "next/router";
|
||||
import toast from "react-hot-toast";
|
||||
import Modal from "../Modal";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
onClose: Function;
|
||||
};
|
||||
|
||||
export default function UploadFileModal({ onClose }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { data } = useSession();
|
||||
|
||||
const initial = {
|
||||
|
|
@ -40,14 +39,11 @@ export default function UploadFileModal({ onClose }: Props) {
|
|||
|
||||
const [link, setLink] =
|
||||
useState<LinkIncludingShortenedCollectionAndTags>(initial);
|
||||
|
||||
const [file, setFile] = useState<File>();
|
||||
|
||||
const { uploadFile } = useLinkStore();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const [optionsExpanded, setOptionsExpanded] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
|
|
@ -74,7 +70,6 @@ export default function UploadFileModal({ onClose }: Props) {
|
|||
const currentCollection = collections.find(
|
||||
(e) => e.id == Number(router.query.id)
|
||||
);
|
||||
|
||||
if (
|
||||
currentCollection &&
|
||||
currentCollection.ownerId &&
|
||||
|
|
@ -91,30 +86,26 @@ export default function UploadFileModal({ onClose }: Props) {
|
|||
} else
|
||||
setLink({
|
||||
...initial,
|
||||
collection: {
|
||||
name: "Unorganized",
|
||||
ownerId: data?.user.id as number,
|
||||
},
|
||||
collection: { name: "Unorganized", ownerId: data?.user.id as number },
|
||||
});
|
||||
}, []);
|
||||
}, [router, collections]);
|
||||
|
||||
const submit = async () => {
|
||||
if (!submitLoader && file) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Creating...");
|
||||
const load = toast.loading(t("creating"));
|
||||
|
||||
const response = await uploadFile(link, file);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success(`Created!`);
|
||||
toast.success(t("created"));
|
||||
onClose();
|
||||
} else toast.error(response.data as string);
|
||||
} else {
|
||||
toast.error(response.data as string);
|
||||
}
|
||||
|
||||
setSubmitLoader(false);
|
||||
|
||||
return response;
|
||||
}
|
||||
};
|
||||
|
|
@ -122,12 +113,12 @@ export default function UploadFileModal({ onClose }: Props) {
|
|||
return (
|
||||
<Modal toggleModal={onClose}>
|
||||
<div className="flex gap-2 items-start">
|
||||
<p className="text-xl font-thin">Upload File</p>
|
||||
<p className="text-xl font-thin">{t("upload_file")}</p>
|
||||
</div>
|
||||
<div className="divider mb-3 mt-1"></div>
|
||||
<div className="grid grid-flow-row-dense sm:grid-cols-5 gap-3">
|
||||
<div className="sm:col-span-3 col-span-5">
|
||||
<p className="mb-2">File</p>
|
||||
<p className="mb-2">{t("file")}</p>
|
||||
<label className="btn h-10 btn-sm w-full border border-neutral-content hover:border-neutral-content flex justify-between">
|
||||
<input
|
||||
type="file"
|
||||
|
|
@ -137,12 +128,13 @@ export default function UploadFileModal({ onClose }: Props) {
|
|||
/>
|
||||
</label>
|
||||
<p className="text-xs font-semibold mt-2">
|
||||
PDF, PNG, JPG (Up to {process.env.NEXT_PUBLIC_MAX_FILE_SIZE || 30}
|
||||
MB)
|
||||
{t("file_types", {
|
||||
size: process.env.NEXT_PUBLIC_MAX_FILE_SIZE || 30,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
<div className="sm:col-span-2 col-span-5">
|
||||
<p className="mb-2">Collection</p>
|
||||
<p className="mb-2">{t("collection")}</p>
|
||||
{link.collection.name ? (
|
||||
<CollectionSelection
|
||||
onChange={setCollection}
|
||||
|
|
@ -156,36 +148,34 @@ export default function UploadFileModal({ onClose }: Props) {
|
|||
</div>
|
||||
{optionsExpanded ? (
|
||||
<div className="mt-5">
|
||||
{/* <hr className="mb-3 border border-neutral-content" /> */}
|
||||
<div className="grid sm:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<p className="mb-2">Name</p>
|
||||
<p className="mb-2">{t("name")}</p>
|
||||
<TextInput
|
||||
value={link.name}
|
||||
onChange={(e) => setLink({ ...link, name: e.target.value })}
|
||||
placeholder="e.g. Example Link"
|
||||
placeholder={t("example_link")}
|
||||
className="bg-base-200"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Tags</p>
|
||||
<p className="mb-2">{t("tags")}</p>
|
||||
<TagSelection
|
||||
onChange={setTags}
|
||||
defaultValue={link.tags.map((e) => {
|
||||
return { label: e.name, value: e.id };
|
||||
})}
|
||||
defaultValue={link.tags.map((e) => ({
|
||||
label: e.name,
|
||||
value: e.id,
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="sm:col-span-2">
|
||||
<p className="mb-2">Description</p>
|
||||
<p className="mb-2">{t("description")}</p>
|
||||
<textarea
|
||||
value={unescapeString(link.description) as string}
|
||||
onChange={(e) =>
|
||||
setLink({ ...link, description: e.target.value })
|
||||
}
|
||||
placeholder="Will be auto generated if nothing is provided."
|
||||
placeholder={t("description_placeholder")}
|
||||
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-200 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -197,14 +187,15 @@ export default function UploadFileModal({ onClose }: Props) {
|
|||
onClick={() => setOptionsExpanded(!optionsExpanded)}
|
||||
className={`rounded-md cursor-pointer btn btn-sm btn-ghost duration-100 flex items-center px-2 w-fit text-sm`}
|
||||
>
|
||||
<p>{optionsExpanded ? "Hide" : "More"} Options</p>
|
||||
<p>
|
||||
{optionsExpanded ? t("hide") : t("more")} {t("options")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="btn btn-accent dark:border-violet-400 text-white"
|
||||
onClick={submit}
|
||||
>
|
||||
Upload File
|
||||
{t("upload_file")}
|
||||
</button>
|
||||
</div>
|
||||
</Modal>
|
||||
|
|
|
|||
|
|
@ -11,8 +11,10 @@ import UploadFileModal from "./ModalContent/UploadFileModal";
|
|||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import MobileNavigation from "./MobileNavigation";
|
||||
import ProfileDropdown from "./ProfileDropdown";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
export default function Navbar() {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
|
||||
const [sidebar, setSidebar] = useState(false);
|
||||
|
|
@ -49,7 +51,7 @@ export default function Navbar() {
|
|||
<ToggleDarkMode className="hidden sm:inline-grid" />
|
||||
|
||||
<div className="dropdown dropdown-end sm:inline-block hidden">
|
||||
<div className="tooltip tooltip-bottom" data-tip="Create New...">
|
||||
<div className="tooltip tooltip-bottom" data-tip={t("create_new")}>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
|
|
@ -74,7 +76,7 @@ export default function Navbar() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
New Link
|
||||
{t("new_link")}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -86,7 +88,7 @@ export default function Navbar() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
Upload File
|
||||
{t("upload_file")}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -98,7 +100,7 @@ export default function Navbar() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
New Collection
|
||||
{t("new_collection")}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import React, { useState } from "react";
|
||||
import NewLinkModal from "./ModalContent/NewLinkModal";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
text?: string;
|
||||
};
|
||||
|
||||
export default function NoLinksFound({ text }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [newLinkModal, setNewLinkModal] = useState(false);
|
||||
|
||||
return (
|
||||
|
|
@ -23,9 +25,7 @@ export default function NoLinksFound({ text }: Props) {
|
|||
<p className="text-center text-xl sm:text-2xl">
|
||||
{text || "You haven't created any Links Here"}
|
||||
</p>
|
||||
<p className="text-center text-sm sm:text-base">
|
||||
Start your journey by creating a new Link!
|
||||
</p>
|
||||
<p className="text-center text-sm sm:text-base">{t("start_journey")}</p>
|
||||
<div className="text-center w-full mt-4">
|
||||
<div
|
||||
onClick={() => {
|
||||
|
|
@ -35,7 +35,7 @@ export default function NoLinksFound({ text }: Props) {
|
|||
>
|
||||
<i className="bi-plus-lg text-3xl left-2 group-hover:ml-[4rem] absolute duration-100"></i>
|
||||
<span className="group-hover:opacity-0 text-right w-full duration-100">
|
||||
Create New Link
|
||||
{t("create_new_link")}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@ import {
|
|||
ArchivedFormat,
|
||||
LinkIncludingShortenedCollectionAndTags,
|
||||
} from "@/types/global";
|
||||
import toast from "react-hot-toast";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { useSession } from "next-auth/react";
|
||||
|
|
|
|||
|
|
@ -4,17 +4,16 @@ import ProfilePhoto from "./ProfilePhoto";
|
|||
import useAccountStore from "@/store/account";
|
||||
import Link from "next/link";
|
||||
import { signOut } from "next-auth/react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
export default function ProfileDropdown() {
|
||||
const { t } = useTranslation();
|
||||
const { settings, updateSettings } = useLocalSettingsStore();
|
||||
const { account } = useAccountStore();
|
||||
|
||||
const handleToggle = () => {
|
||||
if (settings.theme === "dark") {
|
||||
updateSettings({ theme: "light" });
|
||||
} else {
|
||||
updateSettings({ theme: "dark" });
|
||||
}
|
||||
const newTheme = settings.theme === "dark" ? "light" : "dark";
|
||||
updateSettings({ theme: newTheme });
|
||||
};
|
||||
|
||||
return (
|
||||
|
|
@ -38,7 +37,7 @@ export default function ProfileDropdown() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
Settings
|
||||
{t("settings")}
|
||||
</Link>
|
||||
</li>
|
||||
<li className="block sm:hidden">
|
||||
|
|
@ -50,7 +49,9 @@ export default function ProfileDropdown() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
Switch to {settings.theme === "light" ? "Dark" : "Light"}
|
||||
{t("switch_to", {
|
||||
theme: settings.theme === "light" ? t("dark") : t("light"),
|
||||
})}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -62,7 +63,7 @@ export default function ProfileDropdown() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
Logout
|
||||
{t("logout")}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -16,14 +16,6 @@ export default function RadioButton({ label, state, onClick }: Props) {
|
|||
checked={state}
|
||||
onChange={onClick}
|
||||
/>
|
||||
{/*<FontAwesomeIcon*/}
|
||||
{/* icon={faCircleCheck}*/}
|
||||
{/* className="w-5 h-5 text-primary peer-checked:block hidden"*/}
|
||||
{/*/>*/}
|
||||
{/*<FontAwesomeIcon*/}
|
||||
{/* icon={faCircle}*/}
|
||||
{/* className="w-5 h-5 text-primary peer-checked:hidden block"*/}
|
||||
{/*/>*/}
|
||||
<span className="rounded select-none">{label}</span>
|
||||
</label>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ import { useRouter } from "next/router";
|
|||
import React, { useEffect, useMemo, useState } from "react";
|
||||
import LinkActions from "./LinkViews/LinkComponents/LinkActions";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type LinkContent = {
|
||||
title: string;
|
||||
|
|
@ -33,6 +34,7 @@ type Props = {
|
|||
};
|
||||
|
||||
export default function ReadableView({ link }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const [linkContent, setLinkContent] = useState<LinkContent>();
|
||||
const [imageError, setImageError] = useState<boolean>(false);
|
||||
const [colorPalette, setColorPalette] = useState<RGBColor[]>();
|
||||
|
|
@ -271,11 +273,9 @@ export default function ReadableView({ link }: Props) {
|
|||
<path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.598.598 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.659z" />
|
||||
</svg>
|
||||
<p className="text-center text-2xl">
|
||||
The Link preservation is currently in the queue
|
||||
</p>
|
||||
<p className="text-center text-lg mt-2">
|
||||
Please check back later to see the result
|
||||
{t("link_preservation_in_queue")}
|
||||
</p>
|
||||
<p className="text-center text-lg mt-2">{t("check_back_later")}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,20 +1,18 @@
|
|||
import useCollectionStore from "@/store/collections";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
export default function SettingsSidebar({ className }: { className?: string }) {
|
||||
const { t } = useTranslation();
|
||||
const LINKWARDEN_VERSION = process.env.version;
|
||||
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [active, setActive] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
setActive(router.asPath);
|
||||
}, [router, collections]);
|
||||
}, [router]);
|
||||
|
||||
return (
|
||||
<div
|
||||
|
|
@ -26,71 +24,69 @@ export default function SettingsSidebar({ className }: { className?: string }) {
|
|||
<Link href="/settings/account">
|
||||
<div
|
||||
className={`${
|
||||
active === `/settings/account`
|
||||
active === "/settings/account"
|
||||
? "bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<i className="bi-person text-primary text-2xl"></i>
|
||||
|
||||
<p className="truncate w-full pr-7">Account</p>
|
||||
<p className="truncate w-full pr-7">{t("account")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/settings/preference">
|
||||
<div
|
||||
className={`${
|
||||
active === `/settings/preference`
|
||||
active === "/settings/preference"
|
||||
? "bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<i className="bi-sliders text-primary text-2xl"></i>
|
||||
|
||||
<p className="truncate w-full pr-7">Preference</p>
|
||||
<p className="truncate w-full pr-7">{t("preference")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/settings/access-tokens">
|
||||
<div
|
||||
className={`${
|
||||
active === `/settings/access-tokens`
|
||||
active === "/settings/access-tokens"
|
||||
? "bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<i className="bi-key text-primary text-2xl"></i>
|
||||
<p className="truncate w-full pr-7">Access Tokens</p>
|
||||
<p className="truncate w-full pr-7">{t("access_tokens")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/settings/password">
|
||||
<div
|
||||
className={`${
|
||||
active === `/settings/password`
|
||||
active === "/settings/password"
|
||||
? "bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<i className="bi-lock text-primary text-2xl"></i>
|
||||
<p className="truncate w-full pr-7">Password</p>
|
||||
<p className="truncate w-full pr-7">{t("password")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
{process.env.NEXT_PUBLIC_STRIPE ? (
|
||||
{process.env.NEXT_PUBLIC_STRIPE && (
|
||||
<Link href="/settings/billing">
|
||||
<div
|
||||
className={`${
|
||||
active === `/settings/billing`
|
||||
active === "/settings/billing"
|
||||
? "bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
} duration-100 py-5 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<i className="bi-credit-card text-primary text-xl"></i>
|
||||
<p className="truncate w-full pr-7">Billing</p>
|
||||
<p className="truncate w-full pr-7">{t("billing")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
) : undefined}
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
|
|
@ -99,42 +95,38 @@ export default function SettingsSidebar({ className }: { className?: string }) {
|
|||
target="_blank"
|
||||
className="text-neutral text-sm ml-2 hover:opacity-50 duration-100"
|
||||
>
|
||||
Linkwarden {LINKWARDEN_VERSION}
|
||||
{t("linkwarden_version", { version: LINKWARDEN_VERSION })}
|
||||
</Link>
|
||||
<Link href="https://docs.linkwarden.app" target="_blank">
|
||||
<div
|
||||
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<i className="bi-question-circle text-primary text-xl"></i>
|
||||
|
||||
<p className="truncate w-full pr-7">Help</p>
|
||||
<p className="truncate w-full pr-7">{t("help")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="https://github.com/linkwarden/linkwarden" target="_blank">
|
||||
<div
|
||||
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<i className="bi-github text-primary text-xl"></i>
|
||||
<p className="truncate w-full pr-7">GitHub</p>
|
||||
<p className="truncate w-full pr-7">{t("github")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="https://twitter.com/LinkwardenHQ" target="_blank">
|
||||
<div
|
||||
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<i className="bi-twitter-x text-primary text-xl"></i>
|
||||
<p className="truncate w-full pr-7">Twitter</p>
|
||||
<p className="truncate w-full pr-7">{t("twitter")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="https://fosstodon.org/@linkwarden" target="_blank">
|
||||
<div
|
||||
className={`hover:bg-neutral/20 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<i className="bi-mastodon text-primary text-xl"></i>
|
||||
<p className="truncate w-full pr-7">Mastodon</p>
|
||||
<p className="truncate w-full pr-7">{t("mastodon")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,10 @@ import { useEffect, useState } from "react";
|
|||
import { Disclosure, Transition } from "@headlessui/react";
|
||||
import SidebarHighlightLink from "@/components/SidebarHighlightLink";
|
||||
import CollectionListing from "@/components/CollectionListing";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
export default function Sidebar({ className }: { className?: string }) {
|
||||
const { t } = useTranslation();
|
||||
const [tagDisclosure, setTagDisclosure] = useState<boolean>(() => {
|
||||
const storedValue = localStorage.getItem("tagDisclosure");
|
||||
return storedValue ? storedValue === "true" : true;
|
||||
|
|
@ -82,7 +84,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
}}
|
||||
className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
|
||||
>
|
||||
<p className="text-sm">Collections</p>
|
||||
<p className="text-sm">{t("collections")}</p>
|
||||
<i
|
||||
className={`bi-chevron-down ${
|
||||
collectionDisclosure ? "rotate-reverse" : "rotate"
|
||||
|
|
@ -109,7 +111,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
}}
|
||||
className="flex items-center justify-between w-full text-left mb-2 pl-2 font-bold text-neutral mt-5"
|
||||
>
|
||||
<p className="text-sm">Tags</p>
|
||||
<p className="text-sm">{t("tags")}</p>
|
||||
<i
|
||||
className={`bi-chevron-down ${
|
||||
tagDisclosure ? "rotate-reverse" : "rotate"
|
||||
|
|
@ -152,7 +154,7 @@ export default function Sidebar({ className }: { className?: string }) {
|
|||
className={`duration-100 py-1 px-2 flex items-center gap-2 w-full rounded-md h-8 capitalize`}
|
||||
>
|
||||
<p className="text-neutral text-xs font-semibold truncate w-full pr-7">
|
||||
You Have No Tags...
|
||||
{t("you_have_no_tags")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,15 @@
|
|||
import React, { Dispatch, SetStateAction } from "react";
|
||||
import { Sort } from "@/types/global";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import { TFunction } from "i18next";
|
||||
|
||||
type Props = {
|
||||
sortBy: Sort;
|
||||
setSort: Dispatch<SetStateAction<Sort>>;
|
||||
t: TFunction<"translation", undefined>;
|
||||
};
|
||||
|
||||
export default function SortDropdown({ sortBy, setSort }: Props) {
|
||||
export default function SortDropdown({ sortBy, setSort, t }: Props) {
|
||||
return (
|
||||
<div className="dropdown dropdown-bottom dropdown-end">
|
||||
<div
|
||||
|
|
@ -29,13 +31,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
|
|||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
value="Date (Newest First)"
|
||||
checked={sortBy === Sort.DateNewestFirst}
|
||||
onChange={() => {
|
||||
setSort(Sort.DateNewestFirst);
|
||||
}}
|
||||
onChange={() => setSort(Sort.DateNewestFirst)}
|
||||
/>
|
||||
<span className="label-text">Date (Newest First)</span>
|
||||
<span className="label-text">{t("date_newest_first")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -48,11 +47,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
|
|||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
value="Date (Oldest First)"
|
||||
checked={sortBy === Sort.DateOldestFirst}
|
||||
onChange={() => setSort(Sort.DateOldestFirst)}
|
||||
/>
|
||||
<span className="label-text">Date (Oldest First)</span>
|
||||
<span className="label-text">{t("date_oldest_first")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -65,11 +63,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
|
|||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
value="Name (A-Z)"
|
||||
checked={sortBy === Sort.NameAZ}
|
||||
onChange={() => setSort(Sort.NameAZ)}
|
||||
/>
|
||||
<span className="label-text">Name (A-Z)</span>
|
||||
<span className="label-text">{t("name_az")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -82,11 +79,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
|
|||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
value="Name (Z-A)"
|
||||
checked={sortBy === Sort.NameZA}
|
||||
onChange={() => setSort(Sort.NameZA)}
|
||||
/>
|
||||
<span className="label-text">Name (Z-A)</span>
|
||||
<span className="label-text">{t("name_za")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -99,11 +95,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
|
|||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
value="Description (A-Z)"
|
||||
checked={sortBy === Sort.DescriptionAZ}
|
||||
onChange={() => setSort(Sort.DescriptionAZ)}
|
||||
/>
|
||||
<span className="label-text">Description (A-Z)</span>
|
||||
<span className="label-text">{t("description_az")}</span>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -116,11 +111,10 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
|
|||
type="radio"
|
||||
name="sort-radio"
|
||||
className="radio checked:bg-primary"
|
||||
value="Description (Z-A)"
|
||||
checked={sortBy === Sort.DescriptionZA}
|
||||
onChange={() => setSort(Sort.DescriptionZA)}
|
||||
/>
|
||||
<span className="label-text">Description (Z-A)</span>
|
||||
<span className="label-text">{t("description_za")}</span>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,13 @@
|
|||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
type Props = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function ToggleDarkMode({ className }: Props) {
|
||||
const { t } = useTranslation();
|
||||
const { settings, updateSettings } = useLocalSettingsStore();
|
||||
|
||||
const [theme, setTheme] = useState(localStorage.getItem("theme"));
|
||||
|
|
@ -21,7 +23,9 @@ export default function ToggleDarkMode({ className }: Props) {
|
|||
return (
|
||||
<div
|
||||
className="tooltip tooltip-bottom"
|
||||
data-tip={`Switch to ${settings.theme === "light" ? "Dark" : "Light"}`}
|
||||
data-tip={t("switch_to", {
|
||||
theme: settings.theme === "light" ? "Dark" : "Light",
|
||||
})}
|
||||
>
|
||||
<label
|
||||
className={`swap swap-rotate btn-square text-neutral btn btn-ghost btn-sm ${className}`}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,87 @@
|
|||
import DeleteUserModal from "@/components/ModalContent/DeleteUserModal";
|
||||
import { User as U } from "@prisma/client";
|
||||
import { TFunction } from "i18next";
|
||||
|
||||
interface User extends U {
|
||||
subscriptions: {
|
||||
active: boolean;
|
||||
};
|
||||
}
|
||||
|
||||
type UserModal = {
|
||||
isOpen: boolean;
|
||||
userId: number | null;
|
||||
};
|
||||
|
||||
const UserListing = (
|
||||
users: User[],
|
||||
deleteUserModal: UserModal,
|
||||
setDeleteUserModal: Function,
|
||||
t: TFunction<"translation", undefined>
|
||||
) => {
|
||||
return (
|
||||
<div className="overflow-x-auto whitespace-nowrap w-full">
|
||||
<table className="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>{t("username")}</th>
|
||||
{process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
|
||||
<th>{t("email")}</th>
|
||||
)}
|
||||
{process.env.NEXT_PUBLIC_STRIPE === "true" && (
|
||||
<th>{t("subscribed")}</th>
|
||||
)}
|
||||
<th>{t("created_at")}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className="group hover:bg-neutral-content hover:bg-opacity-30 duration-100"
|
||||
>
|
||||
<td className="text-primary">{index + 1}</td>
|
||||
<td>
|
||||
{user.username ? user.username : <b>{t("not_available")}</b>}
|
||||
</td>
|
||||
{process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
|
||||
<td>{user.email}</td>
|
||||
)}
|
||||
{process.env.NEXT_PUBLIC_STRIPE === "true" && (
|
||||
<td>
|
||||
{user.subscriptions?.active ? (
|
||||
<i className="bi bi-check text-green-500"></i>
|
||||
) : (
|
||||
<i className="bi bi-x text-red-500"></i>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
<td>{new Date(user.createdAt).toLocaleString()}</td>
|
||||
<td className="relative">
|
||||
<button
|
||||
className="btn btn-sm btn-ghost duration-100 hidden group-hover:block absolute z-20 right-[0.35rem] top-[0.35rem]"
|
||||
onClick={() =>
|
||||
setDeleteUserModal({ isOpen: true, userId: user.id })
|
||||
}
|
||||
>
|
||||
<i className="bi bi-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{deleteUserModal.isOpen && deleteUserModal.userId ? (
|
||||
<DeleteUserModal
|
||||
onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
|
||||
userId={deleteUserModal.userId}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserListing;
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import { ReactNode, useEffect, useState } from "react";
|
||||
import { useRouter } from "next/router";
|
||||
import { useSession } from "next-auth/react";
|
||||
import Loader from "../components/Loader";
|
||||
import useInitialData from "@/hooks/useInitialData";
|
||||
import useAccountStore from "@/store/account";
|
||||
|
||||
|
|
@ -42,6 +41,7 @@ export default function AuthRedirect({ children }: Props) {
|
|||
{ path: "/tags", isProtected: true },
|
||||
{ path: "/preserved", isProtected: true },
|
||||
{ path: "/admin", isProtected: true },
|
||||
{ path: "/search", isProtected: true },
|
||||
];
|
||||
|
||||
if (isPublicPage) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React, { ReactNode, useEffect } from "react";
|
||||
import React, { ReactNode } from "react";
|
||||
import { Trans } from "next-i18next";
|
||||
|
||||
interface Props {
|
||||
text?: string;
|
||||
|
|
@ -40,11 +41,13 @@ export default function CenteredForm({
|
|||
) : undefined}
|
||||
{children}
|
||||
<p className="text-center text-xs text-neutral mb-5">
|
||||
© {new Date().getFullYear()}{" "}
|
||||
<Link href="https://linkwarden.app" className="font-semibold">
|
||||
Linkwarden
|
||||
</Link>
|
||||
. All rights reserved.
|
||||
<Trans
|
||||
values={{ date: new Date().getFullYear() }}
|
||||
i18nKey="all_rights_reserved"
|
||||
components={[
|
||||
<Link href="https://linkwarden.app" className="font-semibold" />,
|
||||
]}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
import { prisma } from "@/lib/api/db";
|
||||
import { UsersAndCollections } from "@prisma/client";
|
||||
import getPermission from "@/lib/api/getPermission";
|
||||
import removeFile from "@/lib/api/storage/removeFile";
|
||||
import { removeFiles } from "@/lib/api/manageLinkFiles";
|
||||
|
||||
export default async function deleteLinksById(
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ import removeFile from "@/lib/api/storage/removeFile";
|
|||
import createFile from "@/lib/api/storage/createFile";
|
||||
import createFolder from "@/lib/api/storage/createFolder";
|
||||
import sendChangeEmailVerificationRequest from "@/lib/api/sendChangeEmailVerificationRequest";
|
||||
import { i18n } from "next-i18next.config";
|
||||
|
||||
const emailEnabled =
|
||||
process.env.EMAIL_FROM && process.env.EMAIL_SERVER ? true : false;
|
||||
|
|
@ -204,6 +205,7 @@ export default async function updateUserById(
|
|||
collectionOrder: data.collectionOrder.filter(
|
||||
(value, index, self) => self.indexOf(value) === index
|
||||
),
|
||||
locale: i18n.locales.includes(data.locale) ? data.locale : "en",
|
||||
archiveAsScreenshot: data.archiveAsScreenshot,
|
||||
archiveAsPDF: data.archiveAsPDF,
|
||||
archiveAsWaybackMachine: data.archiveAsWaybackMachine,
|
||||
|
|
|
|||
|
|
@ -1,12 +1,14 @@
|
|||
import { CollectionIncludingMembersAndLinkCount, Member } from "@/types/global";
|
||||
import getPublicUserData from "./getPublicUserData";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { TFunction } from "i18next";
|
||||
|
||||
const addMemberToCollection = async (
|
||||
ownerUsername: string,
|
||||
memberUsername: string,
|
||||
collection: CollectionIncludingMembersAndLinkCount,
|
||||
setMember: (newMember: Member) => null | undefined
|
||||
setMember: (newMember: Member) => null | undefined,
|
||||
t: TFunction<"translation", undefined>
|
||||
) => {
|
||||
const checkIfMemberAlreadyExists = collection.members.find((e) => {
|
||||
const username = (e.user.username || "").toLowerCase();
|
||||
|
|
@ -39,9 +41,9 @@ const addMemberToCollection = async (
|
|||
},
|
||||
});
|
||||
}
|
||||
} else if (checkIfMemberAlreadyExists) toast.error("User already exists.");
|
||||
} else if (checkIfMemberAlreadyExists) toast.error(t("user_already_member"));
|
||||
else if (memberUsername.trim().toLowerCase() === ownerUsername.toLowerCase())
|
||||
toast.error("You are already the collection owner.");
|
||||
toast.error(t("you_are_already_collection_owner"));
|
||||
};
|
||||
|
||||
export default addMemberToCollection;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,57 @@
|
|||
import { GetServerSideProps } from "next";
|
||||
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
||||
import { i18n } from "next-i18next.config";
|
||||
import { getToken } from "next-auth/jwt";
|
||||
import { prisma } from "../api/db";
|
||||
|
||||
const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const acceptLanguageHeader = ctx.req.headers["accept-language"];
|
||||
const availableLanguages = i18n.locales;
|
||||
|
||||
const token = await getToken({ req: ctx.req });
|
||||
|
||||
if (token) {
|
||||
const user = await prisma.user.findUnique({
|
||||
where: {
|
||||
id: token.id,
|
||||
},
|
||||
});
|
||||
|
||||
if (user) {
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(user.locale ?? "en", ["common"])),
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const acceptedLanguages = acceptLanguageHeader
|
||||
?.split(",")
|
||||
.map((lang) => lang.split(";")[0]);
|
||||
|
||||
let bestMatch = acceptedLanguages?.find((lang) =>
|
||||
availableLanguages.includes(lang)
|
||||
);
|
||||
|
||||
if (!bestMatch) {
|
||||
acceptedLanguages?.some((acceptedLang) => {
|
||||
const partialMatch = availableLanguages.find((lang) =>
|
||||
lang.startsWith(acceptedLang)
|
||||
);
|
||||
if (partialMatch) {
|
||||
bestMatch = partialMatch;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export default getServerSideProps;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
/** @type {import('next-i18next').UserConfig} */
|
||||
module.exports = {
|
||||
i18n: {
|
||||
defaultLocale: "en",
|
||||
locales: ["en"],
|
||||
},
|
||||
reloadOnPrerender: process.env.NODE_ENV === "development",
|
||||
};
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
/** @type {import('next').NextConfig} */
|
||||
const { version } = require("./package.json");
|
||||
const { i18n } = require("./next-i18next.config");
|
||||
|
||||
const nextConfig = {
|
||||
i18n,
|
||||
reactStrictMode: true,
|
||||
images: {
|
||||
// For fetching the favicons
|
||||
|
|
|
|||
|
|
@ -50,12 +50,14 @@
|
|||
"framer-motion": "^10.16.4",
|
||||
"handlebars": "^4.7.8",
|
||||
"himalaya": "^1.1.0",
|
||||
"i18next": "^23.11.5",
|
||||
"jimp": "^0.22.10",
|
||||
"jsdom": "^22.1.0",
|
||||
"lottie-web": "^5.12.2",
|
||||
"micro": "^10.0.1",
|
||||
"next": "13.4.12",
|
||||
"next-auth": "^4.22.1",
|
||||
"next-i18next": "^15.3.0",
|
||||
"node-fetch": "^2.7.0",
|
||||
"nodemailer": "^6.9.3",
|
||||
"playwright": "^1.43.1",
|
||||
|
|
@ -63,6 +65,7 @@
|
|||
"react-colorful": "^5.6.1",
|
||||
"react-dom": "18.2.0",
|
||||
"react-hot-toast": "^2.4.1",
|
||||
"react-i18next": "^14.1.2",
|
||||
"react-image-file-resizer": "^0.4.8",
|
||||
"react-masonry-css": "^1.0.16",
|
||||
"react-select": "^5.7.4",
|
||||
|
|
|
|||
|
|
@ -9,9 +9,11 @@ import toast from "react-hot-toast";
|
|||
import { Toaster, ToastBar } from "react-hot-toast";
|
||||
import { Session } from "next-auth";
|
||||
import { isPWA } from "@/lib/client/utils";
|
||||
import useInitialData from "@/hooks/useInitialData";
|
||||
// import useInitialData from "@/hooks/useInitialData";
|
||||
import { appWithTranslation } from "next-i18next";
|
||||
import nextI18nextConfig from "../next-i18next.config";
|
||||
|
||||
export default function App({
|
||||
function App({
|
||||
Component,
|
||||
pageProps,
|
||||
}: AppProps<{
|
||||
|
|
@ -96,6 +98,8 @@ export default function App({
|
|||
);
|
||||
}
|
||||
|
||||
export default appWithTranslation(App);
|
||||
|
||||
// function GetData({ children }: { children: React.ReactNode }) {
|
||||
// const status = useInitialData();
|
||||
// return typeof window !== "undefined" && status !== "loading" ? (
|
||||
|
|
|
|||
|
|
@ -3,7 +3,10 @@ import NewUserModal from "@/components/ModalContent/NewUserModal";
|
|||
import useUserStore from "@/store/admin/users";
|
||||
import { User as U } from "@prisma/client";
|
||||
import Link from "next/link";
|
||||
import { Fragment, useEffect, useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import UserListing from "@/components/UserListing";
|
||||
|
||||
interface User extends U {
|
||||
subscriptions: {
|
||||
|
|
@ -17,6 +20,8 @@ type UserModal = {
|
|||
};
|
||||
|
||||
export default function Admin() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { users, setUsers } = useUserStore();
|
||||
|
||||
const [searchQuery, setSearchQuery] = useState("");
|
||||
|
|
@ -44,7 +49,7 @@ export default function Admin() {
|
|||
<i className="bi-chevron-left text-xl"></i>
|
||||
</Link>
|
||||
<p className="capitalize text-3xl font-thin inline">
|
||||
User Administration
|
||||
{t("user_administration")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -60,7 +65,7 @@ export default function Admin() {
|
|||
<input
|
||||
id="search-box"
|
||||
type="text"
|
||||
placeholder={"Search for Users"}
|
||||
placeholder={t("search_users")}
|
||||
value={searchQuery}
|
||||
onChange={(e) => {
|
||||
setSearchQuery(e.target.value);
|
||||
|
|
@ -91,13 +96,13 @@ export default function Admin() {
|
|||
<div className="divider my-3"></div>
|
||||
|
||||
{filteredUsers && filteredUsers.length > 0 && searchQuery !== "" ? (
|
||||
UserListing(filteredUsers, deleteUserModal, setDeleteUserModal)
|
||||
UserListing(filteredUsers, deleteUserModal, setDeleteUserModal, t)
|
||||
) : searchQuery !== "" ? (
|
||||
<p>No users found with the given search query.</p>
|
||||
<p>{t("no_user_found_in_search")}</p>
|
||||
) : users && users.length > 0 ? (
|
||||
UserListing(users, deleteUserModal, setDeleteUserModal)
|
||||
UserListing(users, deleteUserModal, setDeleteUserModal, t)
|
||||
) : (
|
||||
<p>No users found.</p>
|
||||
<p>{t("no_users_found")}</p>
|
||||
)}
|
||||
|
||||
{newUserModal ? (
|
||||
|
|
@ -107,68 +112,4 @@ export default function Admin() {
|
|||
);
|
||||
}
|
||||
|
||||
const UserListing = (
|
||||
users: User[],
|
||||
deleteUserModal: UserModal,
|
||||
setDeleteUserModal: Function
|
||||
) => {
|
||||
return (
|
||||
<div className="overflow-x-auto whitespace-nowrap w-full">
|
||||
<table className="table w-full">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Username</th>
|
||||
{process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
|
||||
<th>Email</th>
|
||||
)}
|
||||
{process.env.NEXT_PUBLIC_STRIPE === "true" && <th>Subscribed</th>}
|
||||
<th>Created At</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{users.map((user, index) => (
|
||||
<tr
|
||||
key={index}
|
||||
className="group hover:bg-neutral-content hover:bg-opacity-30 duration-100"
|
||||
>
|
||||
<td className="text-primary">{index + 1}</td>
|
||||
<td>{user.username ? user.username : <b>N/A</b>}</td>
|
||||
{process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true" && (
|
||||
<td>{user.email}</td>
|
||||
)}
|
||||
{process.env.NEXT_PUBLIC_STRIPE === "true" && (
|
||||
<td>
|
||||
{user.subscriptions?.active ? (
|
||||
JSON.stringify(user.subscriptions?.active)
|
||||
) : (
|
||||
<b>N/A</b>
|
||||
)}
|
||||
</td>
|
||||
)}
|
||||
<td>{new Date(user.createdAt).toLocaleString()}</td>
|
||||
<td className="relative">
|
||||
<button
|
||||
className="btn btn-sm btn-ghost duration-100 hidden group-hover:block absolute z-20 right-[0.35rem] top-[0.35rem]"
|
||||
onClick={() =>
|
||||
setDeleteUserModal({ isOpen: true, userId: user.id })
|
||||
}
|
||||
>
|
||||
<i className="bi bi-trash"></i>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{deleteUserModal.isOpen && deleteUserModal.userId ? (
|
||||
<DeleteUserModal
|
||||
onClose={() => setDeleteUserModal({ isOpen: false, userId: null })}
|
||||
userId={deleteUserModal.userId}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -114,44 +114,7 @@ if (
|
|||
|
||||
if (!user) throw Error("Invalid credentials.");
|
||||
else if (!user?.emailVerified && emailEnabled) {
|
||||
const identifier = user?.email as string;
|
||||
const token = randomBytes(32).toString("hex");
|
||||
const url = `${
|
||||
process.env.NEXTAUTH_URL
|
||||
}/callback/email?token=${token}&email=${encodeURIComponent(
|
||||
identifier
|
||||
)}`;
|
||||
const from = process.env.EMAIL_FROM as string;
|
||||
|
||||
const recentVerificationRequestsCount =
|
||||
await prisma.verificationToken.count({
|
||||
where: {
|
||||
identifier,
|
||||
createdAt: {
|
||||
gt: new Date(new Date().getTime() - 1000 * 60 * 5), // 5 minutes
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
if (recentVerificationRequestsCount >= 4)
|
||||
throw Error("Too many requests. Please try again later.");
|
||||
|
||||
sendVerificationRequest({
|
||||
identifier,
|
||||
url,
|
||||
from,
|
||||
token,
|
||||
});
|
||||
|
||||
await prisma.verificationToken.create({
|
||||
data: {
|
||||
identifier,
|
||||
token,
|
||||
expires: new Date(Date.now() + 24 * 3600 * 1000), // 1 day
|
||||
},
|
||||
});
|
||||
|
||||
throw Error("Email not verified. Verification email sent.");
|
||||
throw Error("Email not verified.");
|
||||
}
|
||||
|
||||
let passwordMatches: boolean = false;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import AccentSubmitButton from "@/components/ui/Button";
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import { FormEvent, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
interface FormData {
|
||||
password: string;
|
||||
|
|
@ -12,8 +14,8 @@ interface FormData {
|
|||
}
|
||||
|
||||
export default function ResetPassword() {
|
||||
const { t } = useTranslation();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [form, setForm] = useState<FormData>({
|
||||
|
|
@ -34,7 +36,7 @@ export default function ResetPassword() {
|
|||
) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Sending password recovery link...");
|
||||
const load = toast.loading(t("sending_password_recovery_link"));
|
||||
|
||||
const response = await fetch("/api/v1/auth/reset-password", {
|
||||
method: "POST",
|
||||
|
|
@ -46,6 +48,7 @@ export default function ResetPassword() {
|
|||
|
||||
const data = await response.json();
|
||||
|
||||
toast.dismiss(load);
|
||||
if (response.ok) {
|
||||
toast.success(data.response);
|
||||
setRequestSent(true);
|
||||
|
|
@ -53,11 +56,9 @@ export default function ResetPassword() {
|
|||
toast.error(data.response);
|
||||
}
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
setSubmitLoader(false);
|
||||
} else {
|
||||
toast.error("Please fill out all the fields.");
|
||||
toast.error(t("please_fill_all_fields"));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,22 +67,18 @@ export default function ResetPassword() {
|
|||
<form onSubmit={submit}>
|
||||
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
|
||||
<p className="text-3xl text-center font-extralight">
|
||||
{requestSent ? "Password Updated!" : "Reset Password"}
|
||||
{requestSent ? t("password_updated") : t("reset_password")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-0"></div>
|
||||
|
||||
{!requestSent ? (
|
||||
<>
|
||||
<p>{t("enter_email_for_new_password")}</p>
|
||||
<div>
|
||||
<p>
|
||||
Enter your email so we can send you a link to create a new
|
||||
password.
|
||||
<p className="text-sm w-fit font-semibold mb-1">
|
||||
{t("new_password")}
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm w-fit font-semibold mb-1">New Password</p>
|
||||
|
||||
<TextInput
|
||||
autoFocus
|
||||
type="password"
|
||||
|
|
@ -93,24 +90,22 @@ export default function ResetPassword() {
|
|||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<AccentSubmitButton
|
||||
<Button
|
||||
type="submit"
|
||||
intent="accent"
|
||||
className="mt-2"
|
||||
size="full"
|
||||
loading={submitLoader}
|
||||
>
|
||||
Update Password
|
||||
</AccentSubmitButton>
|
||||
{t("update_password")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p>Your password has been successfully updated.</p>
|
||||
|
||||
<p>{t("password_successfully_updated")}</p>
|
||||
<div className="mx-auto w-fit mt-3">
|
||||
<Link className="font-semibold" href="/login">
|
||||
Back to Login
|
||||
{t("back_to_login")}
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
|
|
@ -120,3 +115,5 @@ export default function ResetPassword() {
|
|||
</CenteredForm>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -2,9 +2,12 @@ import { signOut } from "next-auth/react";
|
|||
import { useRouter } from "next/router";
|
||||
import { useEffect } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
const VerifyEmail = () => {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
const token = router.query.token;
|
||||
|
|
@ -19,12 +22,12 @@ const VerifyEmail = () => {
|
|||
method: "POST",
|
||||
}).then((res) => {
|
||||
if (res.ok) {
|
||||
toast.success("Email verified. Signing out..");
|
||||
toast.success(t("email_verified_signing_out"));
|
||||
setTimeout(() => {
|
||||
signOut();
|
||||
}, 3000);
|
||||
} else {
|
||||
toast.error("Invalid token.");
|
||||
toast.error(t("invalid_token"));
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -35,3 +38,5 @@ const VerifyEmail = () => {
|
|||
};
|
||||
|
||||
export default VerifyEmail;
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ import { useRouter } from "next/router";
|
|||
import React, { useEffect, useState } from "react";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
import ProfilePhoto from "@/components/ProfilePhoto";
|
||||
import SortDropdown from "@/components/SortDropdown";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import usePermissions from "@/hooks/usePermissions";
|
||||
import NoLinksFound from "@/components/NoLinksFound";
|
||||
|
|
@ -19,23 +18,22 @@ import getPublicUserData from "@/lib/client/getPublicUserData";
|
|||
import EditCollectionModal from "@/components/ModalContent/EditCollectionModal";
|
||||
import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
|
||||
import DeleteCollectionModal from "@/components/ModalContent/DeleteCollectionModal";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import CardView from "@/components/LinkViews/Layouts/CardView";
|
||||
import ListView from "@/components/LinkViews/Layouts/ListView";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
|
||||
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
|
||||
import toast from "react-hot-toast";
|
||||
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
|
||||
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import LinkListOptions from "@/components/LinkListOptions";
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useTranslation();
|
||||
const { settings } = useLocalSettingsStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
|
||||
useLinkStore();
|
||||
const { links } = useLinkStore();
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
|
||||
|
|
@ -84,9 +82,6 @@ export default function Index() {
|
|||
};
|
||||
|
||||
fetchOwner();
|
||||
|
||||
// When the collection changes, reset the selected links
|
||||
setSelectedLinks([]);
|
||||
}, [activeCollection]);
|
||||
|
||||
const [editCollectionModal, setEditCollectionModal] = useState(false);
|
||||
|
|
@ -94,8 +89,6 @@ export default function Index() {
|
|||
const [editCollectionSharingModal, setEditCollectionSharingModal] =
|
||||
useState(false);
|
||||
const [deleteCollectionModal, setDeleteCollectionModal] = useState(false);
|
||||
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
|
||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -115,35 +108,6 @@ export default function Index() {
|
|||
// @ts-ignore
|
||||
const LinkComponent = linkView[viewMode];
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedLinks.length === links.length) {
|
||||
setSelectedLinks([]);
|
||||
} else {
|
||||
setSelectedLinks(links.map((link) => link));
|
||||
}
|
||||
};
|
||||
|
||||
const bulkDeleteLinks = async () => {
|
||||
const load = toast.loading(
|
||||
`Deleting ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}...`
|
||||
);
|
||||
|
||||
const response = await deleteLinksById(
|
||||
selectedLinks.map((link) => link.id as number)
|
||||
);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok &&
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}!`
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<MainLayout>
|
||||
<div
|
||||
|
|
@ -187,7 +151,7 @@ export default function Index() {
|
|||
setEditCollectionModal(true);
|
||||
}}
|
||||
>
|
||||
Edit Collection Info
|
||||
{t("edit_collection_info")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
|
|
@ -201,8 +165,8 @@ export default function Index() {
|
|||
}}
|
||||
>
|
||||
{permissions === true
|
||||
? "Share and Collaborate"
|
||||
: "View Team"}
|
||||
? t("share_and_collaborate")
|
||||
: t("view_team")}
|
||||
</div>
|
||||
</li>
|
||||
{permissions === true && (
|
||||
|
|
@ -215,7 +179,7 @@ export default function Index() {
|
|||
setNewCollectionModal(true);
|
||||
}}
|
||||
>
|
||||
Create Sub-Collection
|
||||
{t("create_subcollection")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
|
|
@ -229,8 +193,8 @@ export default function Index() {
|
|||
}}
|
||||
>
|
||||
{permissions === true
|
||||
? "Delete Collection"
|
||||
: "Leave Collection"}
|
||||
? t("delete_collection")
|
||||
: t("leave_collection")}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -272,11 +236,23 @@ export default function Index() {
|
|||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="text-neutral text-sm font-semibold">
|
||||
By {collectionOwner.name}
|
||||
|
||||
<p className="text-neutral text-sm">
|
||||
{activeCollection.members.length > 0 &&
|
||||
` and ${activeCollection.members.length} others`}
|
||||
.
|
||||
activeCollection.members.length === 1
|
||||
? t("by_author_and_other", {
|
||||
author: collectionOwner.name,
|
||||
count: activeCollection.members.length,
|
||||
})
|
||||
: activeCollection.members.length > 0 &&
|
||||
activeCollection.members.length !== 1
|
||||
? t("by_author_and_others", {
|
||||
author: collectionOwner.name,
|
||||
count: activeCollection.members.length,
|
||||
})
|
||||
: t("by_author", {
|
||||
author: collectionOwner.name,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -313,84 +289,37 @@ export default function Index() {
|
|||
|
||||
<div className="divider my-0"></div>
|
||||
|
||||
<div className="flex justify-between items-center gap-5">
|
||||
<p>Showing {activeCollection?._count?.links} results</p>
|
||||
<div className="flex items-center gap-2">
|
||||
{links.length > 0 &&
|
||||
(permissions === true ||
|
||||
permissions?.canUpdate ||
|
||||
permissions?.canDelete) && (
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
)}
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editMode && links.length > 0 && (
|
||||
<div className="w-full flex justify-between items-center min-h-[32px]">
|
||||
{links.length > 0 && (
|
||||
<div className="flex gap-3 ml-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
onChange={() => handleSelectAll()}
|
||||
checked={
|
||||
selectedLinks.length === links.length && links.length > 0
|
||||
}
|
||||
/>
|
||||
{selectedLinks.length > 0 ? (
|
||||
<span>
|
||||
{selectedLinks.length}{" "}
|
||||
{selectedLinks.length === 1 ? "link" : "links"} selected
|
||||
</span>
|
||||
) : (
|
||||
<span>Nothing selected</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(permissions === true || permissions?.canUpdate)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
e.shiftKey
|
||||
? bulkDeleteLinks()
|
||||
: setBulkDeleteLinksModal(true);
|
||||
}}
|
||||
className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(permissions === true || permissions?.canDelete)
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<LinkListOptions
|
||||
t={t}
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
sortBy={sortBy}
|
||||
setSortBy={setSortBy}
|
||||
editMode={
|
||||
permissions === true ||
|
||||
permissions?.canUpdate ||
|
||||
permissions?.canDelete
|
||||
? editMode
|
||||
: undefined
|
||||
}
|
||||
setEditMode={
|
||||
permissions === true ||
|
||||
permissions?.canUpdate ||
|
||||
permissions?.canDelete
|
||||
? setEditMode
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<p>
|
||||
{activeCollection?._count?.links === 1
|
||||
? t("showing_count_result", {
|
||||
count: activeCollection?._count?.links,
|
||||
})
|
||||
: t("showing_count_results", {
|
||||
count: activeCollection?._count?.links,
|
||||
})}
|
||||
</p>
|
||||
</LinkListOptions>
|
||||
|
||||
{links.some((e) => e.collectionId === Number(router.query.id)) ? (
|
||||
<LinkComponent
|
||||
|
|
@ -429,22 +358,10 @@ export default function Index() {
|
|||
activeCollection={activeCollection}
|
||||
/>
|
||||
)}
|
||||
{bulkDeleteLinksModal && (
|
||||
<BulkDeleteLinksModal
|
||||
onClose={() => {
|
||||
setBulkDeleteLinksModal(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{bulkEditLinksModal && (
|
||||
<BulkEditLinksModal
|
||||
onClose={() => {
|
||||
setBulkEditLinksModal(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -8,8 +8,11 @@ import { Sort } from "@/types/global";
|
|||
import useSort from "@/hooks/useSort";
|
||||
import NewCollectionModal from "@/components/ModalContent/NewCollectionModal";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
export default function Collections() {
|
||||
const { t } = useTranslation();
|
||||
const { collections } = useCollectionStore();
|
||||
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
|
||||
const [sortedCollections, setSortedCollections] = useState(collections);
|
||||
|
|
@ -26,13 +29,13 @@ export default function Collections() {
|
|||
<div className="flex justify-between">
|
||||
<PageHeader
|
||||
icon={"bi-folder"}
|
||||
title={"Collections"}
|
||||
description={"Collections you own"}
|
||||
title={t("collections")}
|
||||
description={t("collections_you_own")}
|
||||
/>
|
||||
|
||||
<div className="flex gap-3 justify-end">
|
||||
<div className="relative mt-2">
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} t={t} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -48,7 +51,9 @@ export default function Collections() {
|
|||
className="card card-compact shadow-md hover:shadow-none duration-200 border border-neutral-content p-5 bg-base-200 self-stretch min-h-[12rem] rounded-2xl cursor-pointer flex flex-col gap-4 justify-center items-center group btn"
|
||||
onClick={() => setNewCollectionModal(true)}
|
||||
>
|
||||
<p className="group-hover:opacity-0 duration-100">New Collection</p>
|
||||
<p className="group-hover:opacity-0 duration-100">
|
||||
{t("new_collection")}
|
||||
</p>
|
||||
<i className="bi-plus-lg text-5xl group-hover:text-7xl group-hover:-mt-6 text-primary drop-shadow duration-100"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -57,8 +62,8 @@ export default function Collections() {
|
|||
<>
|
||||
<PageHeader
|
||||
icon={"bi-folder"}
|
||||
title={"Other Collections"}
|
||||
description={"Shared collections you're a member of"}
|
||||
title={t("other_collections")}
|
||||
description={t("other_collections_desc")}
|
||||
/>
|
||||
|
||||
<div className="grid min-[1900px]:grid-cols-4 2xl:grid-cols-3 sm:grid-cols-2 grid-cols-1 gap-5">
|
||||
|
|
@ -77,3 +82,5 @@ export default function Collections() {
|
|||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -1,19 +1,25 @@
|
|||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import { signIn } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
|
||||
export default function EmailConfirmaion() {
|
||||
const router = useRouter();
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const resend = async () => {
|
||||
if (submitLoader) return;
|
||||
else if (!router.query.email) return;
|
||||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Authenticating...");
|
||||
const load = toast.loading(t("authenticating"));
|
||||
|
||||
const res = await signIn("email", {
|
||||
email: decodeURIComponent(router.query.email as string),
|
||||
|
|
@ -25,29 +31,28 @@ export default function EmailConfirmaion() {
|
|||
|
||||
setSubmitLoader(false);
|
||||
|
||||
toast.success("Verification email sent.");
|
||||
toast.success(t("verification_email_sent"));
|
||||
};
|
||||
|
||||
return (
|
||||
<CenteredForm>
|
||||
<div className="p-4 max-w-[30rem] min-w-80 w-full rounded-2xl shadow-md mx-auto border border-neutral-content bg-base-200">
|
||||
<p className="text-center text-2xl sm:text-3xl font-extralight mb-2 ">
|
||||
Please check your Email
|
||||
{t("check_your_email")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-3"></div>
|
||||
|
||||
<p>
|
||||
A sign in link has been sent to your email address. If you don't see
|
||||
the email, check your spam folder.
|
||||
</p>
|
||||
<p>{t("verification_email_sent_desc")}</p>
|
||||
|
||||
<div className="mx-auto w-fit mt-3">
|
||||
<div className="btn btn-ghost btn-sm" onClick={resend}>
|
||||
Resend Email
|
||||
{t("resend_email")}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CenteredForm>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -17,8 +17,11 @@ import ListView from "@/components/LinkViews/Layouts/ListView";
|
|||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
export default function Dashboard() {
|
||||
const { t } = useTranslation();
|
||||
const { collections } = useCollectionStore();
|
||||
const { links } = useLinkStore();
|
||||
const { tags } = useTagStore();
|
||||
|
|
@ -117,7 +120,7 @@ export default function Dashboard() {
|
|||
<PageHeader
|
||||
icon={"bi-house "}
|
||||
title={"Dashboard"}
|
||||
description={"A brief overview of your data"}
|
||||
description={t("dashboard_desc")}
|
||||
/>
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
|
|
@ -125,7 +128,7 @@ export default function Dashboard() {
|
|||
<div>
|
||||
<div className="flex justify-evenly flex-col xl:flex-row xl:items-center gap-2 xl:w-full h-full rounded-2xl p-8 border border-neutral-content bg-base-200">
|
||||
<DashboardItem
|
||||
name={numberOfLinks === 1 ? "Link" : "Links"}
|
||||
name={numberOfLinks === 1 ? t("link") : t("links")}
|
||||
value={numberOfLinks}
|
||||
icon={"bi-link-45deg"}
|
||||
/>
|
||||
|
|
@ -133,7 +136,9 @@ export default function Dashboard() {
|
|||
<div className="divider xl:divider-horizontal"></div>
|
||||
|
||||
<DashboardItem
|
||||
name={collections.length === 1 ? "Collection" : "Collections"}
|
||||
name={
|
||||
collections.length === 1 ? t("collection") : t("collections")
|
||||
}
|
||||
value={collections.length}
|
||||
icon={"bi-folder"}
|
||||
/>
|
||||
|
|
@ -141,7 +146,7 @@ export default function Dashboard() {
|
|||
<div className="divider xl:divider-horizontal"></div>
|
||||
|
||||
<DashboardItem
|
||||
name={tags.length === 1 ? "Tag" : "Tags"}
|
||||
name={tags.length === 1 ? t("tag") : t("tags")}
|
||||
value={tags.length}
|
||||
icon={"bi-hash"}
|
||||
/>
|
||||
|
|
@ -152,15 +157,15 @@ export default function Dashboard() {
|
|||
<div className="flex gap-2 items-center">
|
||||
<PageHeader
|
||||
icon={"bi-clock-history"}
|
||||
title={"Recent"}
|
||||
description={"Recently added Links"}
|
||||
title={t("recent")}
|
||||
description={t("recent_links_desc")}
|
||||
/>
|
||||
</div>
|
||||
<Link
|
||||
href="/links"
|
||||
className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
|
||||
>
|
||||
View All
|
||||
{t("view_all")}
|
||||
<i className="bi-chevron-right text-sm"></i>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -176,11 +181,10 @@ export default function Dashboard() {
|
|||
) : (
|
||||
<div className="sky-shadow flex flex-col justify-center h-full border border-solid border-neutral-content w-full mx-auto p-10 rounded-2xl bg-base-200">
|
||||
<p className="text-center text-2xl">
|
||||
View Your Recently Added Links Here!
|
||||
{t("view_added_links_here")}
|
||||
</p>
|
||||
<p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm mt-2">
|
||||
This section will view your latest added Links across every
|
||||
Collections you have access to.
|
||||
{t("view_added_links_here_desc")}
|
||||
</p>
|
||||
|
||||
<div className="text-center w-full mt-4 flex flex-wrap gap-4 justify-center">
|
||||
|
|
@ -192,7 +196,7 @@ export default function Dashboard() {
|
|||
>
|
||||
<i className="bi-plus-lg text-xl"></i>
|
||||
<span className="group-hover:opacity-0 text-right">
|
||||
Add New Link
|
||||
{t("add_link")}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
|
@ -205,7 +209,7 @@ export default function Dashboard() {
|
|||
id="import-dropdown"
|
||||
>
|
||||
<i className="bi-cloud-upload text-xl duration-100"></i>
|
||||
<p>Import From</p>
|
||||
<p>{t("import_links")}</p>
|
||||
</div>
|
||||
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
|
||||
<li>
|
||||
|
|
@ -213,9 +217,9 @@ export default function Dashboard() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
htmlFor="import-linkwarden-file"
|
||||
title="JSON File"
|
||||
title={t("from_linkwarden")}
|
||||
>
|
||||
From Linkwarden
|
||||
{t("from_linkwarden")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
|
|
@ -233,9 +237,9 @@ export default function Dashboard() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
htmlFor="import-html-file"
|
||||
title="HTML File"
|
||||
title={t("from_html")}
|
||||
>
|
||||
From Bookmarks HTML file
|
||||
{t("from_html")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
|
|
@ -248,6 +252,26 @@ export default function Dashboard() {
|
|||
/>
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
htmlFor="import-wallabag-file"
|
||||
title={t("from_wallabag")}
|
||||
>
|
||||
{t("from_wallabag")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
id="import-wallabag-file"
|
||||
accept=".json"
|
||||
className="hidden"
|
||||
onChange={(e) =>
|
||||
importBookmarks(e, MigrationFormat.wallabag)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -259,15 +283,15 @@ export default function Dashboard() {
|
|||
<div className="flex gap-2 items-center">
|
||||
<PageHeader
|
||||
icon={"bi-pin-angle"}
|
||||
title={"Pinned"}
|
||||
description={"Your pinned Links"}
|
||||
title={t("pinned")}
|
||||
description={t("pinned_links_desc")}
|
||||
/>
|
||||
</div>
|
||||
<Link
|
||||
href="/links/pinned"
|
||||
className="flex items-center text-sm text-black/75 dark:text-white/75 gap-2 cursor-pointer"
|
||||
>
|
||||
View All
|
||||
{t("view_all")}
|
||||
<i className="bi-chevron-right text-sm "></i>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -291,12 +315,10 @@ export default function Dashboard() {
|
|||
>
|
||||
<i className="bi-pin mx-auto text-6xl text-primary"></i>
|
||||
<p className="text-center text-2xl">
|
||||
Pin Your Favorite Links Here!
|
||||
{t("pin_favorite_links_here")}
|
||||
</p>
|
||||
<p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
|
||||
You can Pin your favorite Links by clicking on the three dots on
|
||||
each Link and clicking{" "}
|
||||
<span className="font-semibold">Pin to Dashboard</span>.
|
||||
{t("pin_favorite_links_here_desc")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -308,3 +330,5 @@ export default function Dashboard() {
|
|||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -1,15 +1,18 @@
|
|||
import AccentSubmitButton from "@/components/ui/Button";
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import Link from "next/link";
|
||||
import { FormEvent, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
interface FormData {
|
||||
email: string;
|
||||
}
|
||||
|
||||
export default function Forgot() {
|
||||
const { t } = useTranslation();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const [form, setForm] = useState<FormData>({
|
||||
|
|
@ -43,7 +46,7 @@ export default function Forgot() {
|
|||
if (form.email !== "") {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Sending password recovery link...");
|
||||
const load = toast.loading(t("sending_password_link"));
|
||||
|
||||
await submitRequest();
|
||||
|
||||
|
|
@ -51,7 +54,7 @@ export default function Forgot() {
|
|||
|
||||
setSubmitLoader(false);
|
||||
} else {
|
||||
toast.error("Please fill out all the fields.");
|
||||
toast.error(t("fill_all_fields"));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -60,7 +63,7 @@ export default function Forgot() {
|
|||
<form onSubmit={sendConfirmation}>
|
||||
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
|
||||
<p className="text-3xl text-center font-extralight">
|
||||
{isEmailSent ? "Email Sent!" : "Forgot Password?"}
|
||||
{isEmailSent ? t("email_sent") : t("forgot_password")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-0"></div>
|
||||
|
|
@ -68,13 +71,10 @@ export default function Forgot() {
|
|||
{!isEmailSent ? (
|
||||
<>
|
||||
<div>
|
||||
<p>
|
||||
Enter your email so we can send you a link to create a new
|
||||
password.
|
||||
</p>
|
||||
<p>{t("password_email_prompt")}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm w-fit font-semibold mb-1">Email</p>
|
||||
<p className="text-sm w-fit font-semibold mb-1">{t("email")}</p>
|
||||
|
||||
<TextInput
|
||||
autoFocus
|
||||
|
|
@ -86,26 +86,23 @@ export default function Forgot() {
|
|||
/>
|
||||
</div>
|
||||
|
||||
<AccentSubmitButton
|
||||
<Button
|
||||
type="submit"
|
||||
intent="accent"
|
||||
className="mt-2"
|
||||
size="full"
|
||||
loading={submitLoader}
|
||||
>
|
||||
Send Login Link
|
||||
</AccentSubmitButton>
|
||||
{t("send_reset_link")}
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<p>
|
||||
Check your email for a link to reset your password. If it doesn’t
|
||||
appear within a few minutes, check your spam folder.
|
||||
</p>
|
||||
<p>{t("reset_email_sent_desc")}</p>
|
||||
)}
|
||||
|
||||
<div className="mx-auto w-fit mt-2">
|
||||
<Link className="font-semibold" href="/login">
|
||||
Back to Login
|
||||
{t("back_to_login")}
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -113,3 +110,5 @@ export default function Forgot() {
|
|||
</CenteredForm>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -1,3 +1,10 @@
|
|||
import { useRouter } from "next/router";
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function Index() {
|
||||
return null;
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
router.push("/login");
|
||||
}, []);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,24 +1,21 @@
|
|||
import NoLinksFound from "@/components/NoLinksFound";
|
||||
import SortDropdown from "@/components/SortDropdown";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
import useLinkStore from "@/store/links";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import { Member, Sort, ViewMode } from "@/types/global";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import { Sort, ViewMode } from "@/types/global";
|
||||
import CardView from "@/components/LinkViews/Layouts/CardView";
|
||||
import ListView from "@/components/LinkViews/Layouts/ListView";
|
||||
import useCollectivePermissions from "@/hooks/useCollectivePermissions";
|
||||
import toast from "react-hot-toast";
|
||||
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
|
||||
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
|
||||
import { useRouter } from "next/router";
|
||||
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
|
||||
import LinkListOptions from "@/components/LinkListOptions";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
export default function Links() {
|
||||
const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
|
||||
useLinkStore();
|
||||
const { t } = useTranslation();
|
||||
const { links } = useLinkStore();
|
||||
|
||||
const [viewMode, setViewMode] = useState<string>(
|
||||
localStorage.getItem("viewMode") || ViewMode.Card
|
||||
|
|
@ -27,49 +24,14 @@ export default function Links() {
|
|||
|
||||
const router = useRouter();
|
||||
|
||||
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
|
||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (editMode) return setEditMode(false);
|
||||
}, [router]);
|
||||
|
||||
const collectivePermissions = useCollectivePermissions(
|
||||
selectedLinks.map((link) => link.collectionId as number)
|
||||
);
|
||||
|
||||
useLinks({ sort: sortBy });
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedLinks.length === links.length) {
|
||||
setSelectedLinks([]);
|
||||
} else {
|
||||
setSelectedLinks(links.map((link) => link));
|
||||
}
|
||||
};
|
||||
|
||||
const bulkDeleteLinks = async () => {
|
||||
const load = toast.loading(
|
||||
`Deleting ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}...`
|
||||
);
|
||||
|
||||
const response = await deleteLinksById(
|
||||
selectedLinks.map((link) => link.id as number)
|
||||
);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok &&
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}!`
|
||||
);
|
||||
};
|
||||
|
||||
const linkView = {
|
||||
[ViewMode.Card]: CardView,
|
||||
[ViewMode.List]: ListView,
|
||||
|
|
@ -82,113 +44,30 @@ export default function Links() {
|
|||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full h-full">
|
||||
<div className="flex justify-between">
|
||||
<LinkListOptions
|
||||
t={t}
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
sortBy={sortBy}
|
||||
setSortBy={setSortBy}
|
||||
editMode={editMode}
|
||||
setEditMode={setEditMode}
|
||||
>
|
||||
<PageHeader
|
||||
icon={"bi-link-45deg"}
|
||||
title={"All Links"}
|
||||
description={"Links from every Collections"}
|
||||
title={t("all_links")}
|
||||
description={t("all_links_desc")}
|
||||
/>
|
||||
|
||||
<div className="mt-2 flex items-center justify-end gap-2">
|
||||
{links.length > 0 && (
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
)}
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editMode && links.length > 0 && (
|
||||
<div className="w-full flex justify-between items-center min-h-[32px]">
|
||||
{links.length > 0 && (
|
||||
<div className="flex gap-3 ml-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
onChange={() => handleSelectAll()}
|
||||
checked={
|
||||
selectedLinks.length === links.length && links.length > 0
|
||||
}
|
||||
/>
|
||||
{selectedLinks.length > 0 ? (
|
||||
<span>
|
||||
{selectedLinks.length}{" "}
|
||||
{selectedLinks.length === 1 ? "link" : "links"} selected
|
||||
</span>
|
||||
) : (
|
||||
<span>Nothing selected</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(
|
||||
collectivePermissions === true ||
|
||||
collectivePermissions?.canUpdate
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
e.shiftKey
|
||||
? bulkDeleteLinks()
|
||||
: setBulkDeleteLinksModal(true);
|
||||
}}
|
||||
className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(
|
||||
collectivePermissions === true ||
|
||||
collectivePermissions?.canDelete
|
||||
)
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</LinkListOptions>
|
||||
|
||||
{links[0] ? (
|
||||
<LinkComponent editMode={editMode} links={links} />
|
||||
) : (
|
||||
<NoLinksFound text="You Haven't Created Any Links Yet" />
|
||||
<NoLinksFound text={t("you_have_not_added_any_links")} />
|
||||
)}
|
||||
</div>
|
||||
{bulkDeleteLinksModal && (
|
||||
<BulkDeleteLinksModal
|
||||
onClose={() => {
|
||||
setBulkDeleteLinksModal(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{bulkEditLinksModal && (
|
||||
<BulkEditLinksModal
|
||||
onClose={() => {
|
||||
setBulkEditLinksModal(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -1,23 +1,21 @@
|
|||
import SortDropdown from "@/components/SortDropdown";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
import useLinkStore from "@/store/links";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import { Sort, ViewMode } from "@/types/global";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import CardView from "@/components/LinkViews/Layouts/CardView";
|
||||
import ListView from "@/components/LinkViews/Layouts/ListView";
|
||||
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
|
||||
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
|
||||
import useCollectivePermissions from "@/hooks/useCollectivePermissions";
|
||||
import toast from "react-hot-toast";
|
||||
import { useRouter } from "next/router";
|
||||
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import LinkListOptions from "@/components/LinkListOptions";
|
||||
|
||||
export default function PinnedLinks() {
|
||||
const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
|
||||
useLinkStore();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { links } = useLinkStore();
|
||||
|
||||
const [viewMode, setViewMode] = useState<string>(
|
||||
localStorage.getItem("viewMode") || ViewMode.Card
|
||||
|
|
@ -27,47 +25,12 @@ export default function PinnedLinks() {
|
|||
useLinks({ sort: sortBy, pinnedOnly: true });
|
||||
|
||||
const router = useRouter();
|
||||
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
|
||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (editMode) return setEditMode(false);
|
||||
}, [router]);
|
||||
|
||||
const collectivePermissions = useCollectivePermissions(
|
||||
selectedLinks.map((link) => link.collectionId as number)
|
||||
);
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedLinks.length === links.length) {
|
||||
setSelectedLinks([]);
|
||||
} else {
|
||||
setSelectedLinks(links.map((link) => link));
|
||||
}
|
||||
};
|
||||
|
||||
const bulkDeleteLinks = async () => {
|
||||
const load = toast.loading(
|
||||
`Deleting ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}...`
|
||||
);
|
||||
|
||||
const response = await deleteLinksById(
|
||||
selectedLinks.map((link) => link.id as number)
|
||||
);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok &&
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}!`
|
||||
);
|
||||
};
|
||||
|
||||
const linkView = {
|
||||
[ViewMode.Card]: CardView,
|
||||
[ViewMode.List]: ListView,
|
||||
|
|
@ -80,91 +43,21 @@ export default function PinnedLinks() {
|
|||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full h-full">
|
||||
<div className="flex justify-between">
|
||||
<LinkListOptions
|
||||
t={t}
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
sortBy={sortBy}
|
||||
setSortBy={setSortBy}
|
||||
editMode={editMode}
|
||||
setEditMode={setEditMode}
|
||||
>
|
||||
<PageHeader
|
||||
icon={"bi-pin-angle"}
|
||||
title={"Pinned Links"}
|
||||
description={"Pinned Links from your Collections"}
|
||||
title={t("pinned")}
|
||||
description={t("pinned_links_desc")}
|
||||
/>
|
||||
<div className="mt-2 flex items-center justify-end gap-2">
|
||||
{!(links.length === 0) && (
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
)}
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editMode && links.length > 0 && (
|
||||
<div className="w-full flex justify-between items-center min-h-[32px]">
|
||||
{links.length > 0 && (
|
||||
<div className="flex gap-3 ml-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
onChange={() => handleSelectAll()}
|
||||
checked={
|
||||
selectedLinks.length === links.length && links.length > 0
|
||||
}
|
||||
/>
|
||||
{selectedLinks.length > 0 ? (
|
||||
<span>
|
||||
{selectedLinks.length}{" "}
|
||||
{selectedLinks.length === 1 ? "link" : "links"} selected
|
||||
</span>
|
||||
) : (
|
||||
<span>Nothing selected</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(
|
||||
collectivePermissions === true ||
|
||||
collectivePermissions?.canUpdate
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
e.shiftKey
|
||||
? bulkDeleteLinks()
|
||||
: setBulkDeleteLinksModal(true);
|
||||
}}
|
||||
className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(
|
||||
collectivePermissions === true ||
|
||||
collectivePermissions?.canDelete
|
||||
)
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</LinkListOptions>
|
||||
|
||||
{links.some((e) => e.pinnedBy && e.pinnedBy[0]) ? (
|
||||
<LinkComponent editMode={editMode} links={links} />
|
||||
|
|
@ -182,30 +75,16 @@ export default function PinnedLinks() {
|
|||
<path d="M4.146.146A.5.5 0 0 1 4.5 0h7a.5.5 0 0 1 .5.5c0 .68-.342 1.174-.646 1.479-.126.125-.25.224-.354.298v4.431l.078.048c.203.127.476.314.751.555C12.36 7.775 13 8.527 13 9.5a.5.5 0 0 1-.5.5h-4v4.5c0 .276-.224 1.5-.5 1.5s-.5-1.224-.5-1.5V10h-4a.5.5 0 0 1-.5-.5c0-.973.64-1.725 1.17-2.189A6 6 0 0 1 5 6.708V2.277a3 3 0 0 1-.354-.298C4.342 1.674 4 1.179 4 .5a.5.5 0 0 1 .146-.354m1.58 1.408-.002-.001zm-.002-.001.002.001A.5.5 0 0 1 6 2v5a.5.5 0 0 1-.276.447h-.002l-.012.007-.054.03a5 5 0 0 0-.827.58c-.318.278-.585.596-.725.936h7.792c-.14-.34-.407-.658-.725-.936a5 5 0 0 0-.881-.61l-.012-.006h-.002A.5.5 0 0 1 10 7V2a.5.5 0 0 1 .295-.458 1.8 1.8 0 0 0 .351-.271c.08-.08.155-.17.214-.271H5.14q.091.15.214.271a1.8 1.8 0 0 0 .37.282" />
|
||||
</svg>
|
||||
<p className="text-center text-2xl">
|
||||
Pin Your Favorite Links Here!
|
||||
{t("pin_favorite_links_here")}
|
||||
</p>
|
||||
<p className="text-center mx-auto max-w-96 w-fit text-neutral text-sm">
|
||||
You can Pin your favorite Links by clicking on the three dots on
|
||||
each Link and clicking{" "}
|
||||
<span className="font-semibold">Pin to Dashboard</span>.
|
||||
{t("pin_favorite_links_here_desc")}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{bulkDeleteLinksModal && (
|
||||
<BulkDeleteLinksModal
|
||||
onClose={() => {
|
||||
setBulkDeleteLinksModal(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{bulkEditLinksModal && (
|
||||
<BulkEditLinksModal
|
||||
onClose={() => {
|
||||
setBulkEditLinksModal(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
130
pages/login.tsx
130
pages/login.tsx
|
|
@ -1,4 +1,4 @@
|
|||
import AccentSubmitButton from "@/components/ui/Button";
|
||||
import Button from "@/components/ui/Button";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import { signIn } from "next-auth/react";
|
||||
|
|
@ -6,22 +6,27 @@ import Link from "next/link";
|
|||
import React, { useState, FormEvent } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { getLogins } from "./api/v1/logins";
|
||||
import { InferGetServerSidePropsType } from "next";
|
||||
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
|
||||
import InstallApp from "@/components/InstallApp";
|
||||
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
||||
import { i18n } from "next-i18next.config";
|
||||
import { getToken } from "next-auth/jwt";
|
||||
import { prisma } from "@/lib/api/db";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
interface FormData {
|
||||
username: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
export const getServerSideProps = () => {
|
||||
const availableLogins = getLogins();
|
||||
return { props: { availableLogins } };
|
||||
};
|
||||
|
||||
export default function Login({
|
||||
availableLogins,
|
||||
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const [form, setForm] = useState<FormData>({
|
||||
|
|
@ -35,7 +40,7 @@ export default function Login({
|
|||
if (form.username !== "" && form.password !== "") {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Authenticating...");
|
||||
const load = toast.loading(t("authenticating"));
|
||||
|
||||
const res = await signIn("credentials", {
|
||||
username: form.username,
|
||||
|
|
@ -48,17 +53,29 @@ export default function Login({
|
|||
setSubmitLoader(false);
|
||||
|
||||
if (!res?.ok) {
|
||||
toast.error(res?.error || "Invalid credentials.");
|
||||
toast.error(res?.error || t("invalid_credentials"));
|
||||
|
||||
if (res?.error === "Email not verified.") {
|
||||
await signIn("email", {
|
||||
email: form.username,
|
||||
callbackUrl: "/",
|
||||
redirect: false,
|
||||
});
|
||||
|
||||
router.push(
|
||||
`/confirmation?email=${encodeURIComponent(form.username)}`
|
||||
);
|
||||
}
|
||||
}
|
||||
} else {
|
||||
toast.error("Please fill out all the fields.");
|
||||
toast.error(t("fill_all_fields"));
|
||||
}
|
||||
}
|
||||
|
||||
async function loginUserButton(method: string) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Authenticating...");
|
||||
const load = toast.loading(t("authenticating"));
|
||||
|
||||
const res = await signIn(method, {});
|
||||
|
||||
|
|
@ -72,15 +89,14 @@ export default function Login({
|
|||
return (
|
||||
<>
|
||||
<p className="text-3xl text-black dark:text-white text-center font-extralight">
|
||||
Enter your credentials
|
||||
{t("enter_credentials")}
|
||||
</p>
|
||||
<hr className="border-1 border-sky-100 dark:border-neutral-700" />
|
||||
<div>
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Username
|
||||
{availableLogins.emailEnabled === "true"
|
||||
? " or Email"
|
||||
: undefined}
|
||||
? t("username_or_email")
|
||||
: t("username")}
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
|
|
@ -94,7 +110,7 @@ export default function Login({
|
|||
</div>
|
||||
<div className="w-full">
|
||||
<p className="text-sm text-black dark:text-white w-fit font-semibold mb-1">
|
||||
Password
|
||||
{t("password")}
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
|
|
@ -112,23 +128,23 @@ export default function Login({
|
|||
className="text-neutral font-semibold"
|
||||
data-testid="forgot-password-link"
|
||||
>
|
||||
Forgot Password?
|
||||
{t("forgot_password")}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<AccentSubmitButton
|
||||
<Button
|
||||
type="submit"
|
||||
size="full"
|
||||
intent="accent"
|
||||
data-testid="submit-login-button"
|
||||
loading={submitLoader}
|
||||
>
|
||||
Login
|
||||
</AccentSubmitButton>
|
||||
{t("login")}
|
||||
</Button>
|
||||
|
||||
{availableLogins.buttonAuths.length > 0 ? (
|
||||
<div className="divider my-1">Or continue with</div>
|
||||
<div className="divider my-1">{t("or_continue_with")}</div>
|
||||
) : undefined}
|
||||
</>
|
||||
);
|
||||
|
|
@ -137,12 +153,10 @@ export default function Login({
|
|||
|
||||
function displayLoginExternalButton() {
|
||||
const Buttons: any = [];
|
||||
availableLogins.buttonAuths.forEach((value, index) => {
|
||||
availableLogins.buttonAuths.forEach((value: any, index: any) => {
|
||||
Buttons.push(
|
||||
<React.Fragment key={index}>
|
||||
{index !== 0 ? <div className="divider my-1">Or</div> : undefined}
|
||||
|
||||
<AccentSubmitButton
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => loginUserButton(value.method)}
|
||||
size="full"
|
||||
|
|
@ -154,7 +168,7 @@ export default function Login({
|
|||
<i className={"bi-" + value.name.toLowerCase()}></i>
|
||||
) : undefined}
|
||||
{value.name}
|
||||
</AccentSubmitButton>
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
|
@ -165,13 +179,15 @@ export default function Login({
|
|||
if (availableLogins.registrationDisabled !== "true") {
|
||||
return (
|
||||
<div className="flex items-baseline gap-1 justify-center">
|
||||
<p className="w-fit text-gray-500 dark:text-gray-400">New here?</p>
|
||||
<p className="w-fit text-gray-500 dark:text-gray-400">
|
||||
{t("new_here")}
|
||||
</p>
|
||||
<Link
|
||||
href={"/register"}
|
||||
className="font-semibold"
|
||||
data-testid="register-link"
|
||||
>
|
||||
Sign Up
|
||||
{t("sign_up")}
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -179,7 +195,7 @@ export default function Login({
|
|||
}
|
||||
|
||||
return (
|
||||
<CenteredForm text="Sign in to your account">
|
||||
<CenteredForm text={t("sign_in_to_your_account")}>
|
||||
<form onSubmit={loginUser}>
|
||||
<div
|
||||
className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-slate-50 dark:bg-neutral-800 rounded-2xl shadow-md border border-sky-100 dark:border-neutral-700"
|
||||
|
|
@ -194,3 +210,59 @@ export default function Login({
|
|||
</CenteredForm>
|
||||
);
|
||||
}
|
||||
|
||||
const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const availableLogins = getLogins();
|
||||
|
||||
const acceptLanguageHeader = ctx.req.headers["accept-language"];
|
||||
const availableLanguages = i18n.locales;
|
||||
|
||||
const token = await getToken({ req: ctx.req });
|
||||
|
||||
if (token) {
|
||||
const user = await prisma.user.findUnique({
|
||||
where: {
|
||||
id: token.id,
|
||||
},
|
||||
});
|
||||
|
||||
if (user) {
|
||||
return {
|
||||
props: {
|
||||
availableLogins,
|
||||
...(await serverSideTranslations(user.locale ?? "en", ["common"])),
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const acceptedLanguages = acceptLanguageHeader
|
||||
?.split(",")
|
||||
.map((lang) => lang.split(";")[0]);
|
||||
|
||||
let bestMatch = acceptedLanguages?.find((lang) =>
|
||||
availableLanguages.includes(lang)
|
||||
);
|
||||
|
||||
if (!bestMatch) {
|
||||
acceptedLanguages?.some((acceptedLang) => {
|
||||
const partialMatch = availableLanguages.find((lang) =>
|
||||
lang.startsWith(acceptedLang)
|
||||
);
|
||||
if (partialMatch) {
|
||||
bestMatch = partialMatch;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
availableLogins,
|
||||
...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -7,7 +7,6 @@ import {
|
|||
} from "@/types/global";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { motion, Variants } from "framer-motion";
|
||||
import Head from "next/head";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import useLinkStore from "@/store/links";
|
||||
|
|
@ -16,35 +15,25 @@ import ToggleDarkMode from "@/components/ToggleDarkMode";
|
|||
import getPublicUserData from "@/lib/client/getPublicUserData";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import FilterSearchDropdown from "@/components/FilterSearchDropdown";
|
||||
import SortDropdown from "@/components/SortDropdown";
|
||||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
import SearchBar from "@/components/SearchBar";
|
||||
import EditCollectionSharingModal from "@/components/ModalContent/EditCollectionSharingModal";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import CardView from "@/components/LinkViews/Layouts/CardView";
|
||||
import ListView from "@/components/LinkViews/Layouts/ListView";
|
||||
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
|
||||
|
||||
const cardVariants: Variants = {
|
||||
offscreen: {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
},
|
||||
onscreen: {
|
||||
y: 0,
|
||||
opacity: 1,
|
||||
transition: {
|
||||
duration: 0.4,
|
||||
},
|
||||
},
|
||||
};
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import useCollectionStore from "@/store/collections";
|
||||
import LinkListOptions from "@/components/LinkListOptions";
|
||||
|
||||
export default function PublicCollections() {
|
||||
const { t } = useTranslation();
|
||||
const { links } = useLinkStore();
|
||||
|
||||
const { settings } = useLocalSettingsStore();
|
||||
|
||||
const { collections } = useCollectionStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [collectionOwner, setCollectionOwner] = useState({
|
||||
|
|
@ -85,7 +74,7 @@ export default function PublicCollections() {
|
|||
if (router.query.id) {
|
||||
getPublicCollectionData(Number(router.query.id), setCollection);
|
||||
}
|
||||
}, []);
|
||||
}, [collections]);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchOwner = async () => {
|
||||
|
|
@ -147,7 +136,7 @@ export default function PublicCollections() {
|
|||
width={551}
|
||||
height={551}
|
||||
alt="Linkwarden"
|
||||
title="Created with Linkwarden"
|
||||
title={t("list_created_with_linkwarden")}
|
||||
className="h-8 w-fit mx-auto rounded"
|
||||
/>
|
||||
</Link>
|
||||
|
|
@ -189,12 +178,22 @@ export default function PublicCollections() {
|
|||
) : null}
|
||||
</div>
|
||||
|
||||
<p className="text-neutral text-sm font-semibold">
|
||||
By {collectionOwner.name}
|
||||
{collection.members.length > 0
|
||||
? ` and ${collection.members.length} others`
|
||||
: undefined}
|
||||
.
|
||||
<p className="text-neutral text-sm">
|
||||
{collection.members.length > 0 &&
|
||||
collection.members.length === 1
|
||||
? t("by_author_and_other", {
|
||||
author: collectionOwner.name,
|
||||
count: collection.members.length,
|
||||
})
|
||||
: collection.members.length > 0 &&
|
||||
collection.members.length !== 1
|
||||
? t("by_author_and_others", {
|
||||
author: collectionOwner.name,
|
||||
count: collection.members.length,
|
||||
})
|
||||
: t("by_author", {
|
||||
author: collectionOwner.name,
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -205,22 +204,27 @@ export default function PublicCollections() {
|
|||
<div className="divider mt-5 mb-0"></div>
|
||||
|
||||
<div className="flex mb-5 mt-10 flex-col gap-5">
|
||||
<div className="flex justify-between gap-3">
|
||||
<LinkListOptions
|
||||
t={t}
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
sortBy={sortBy}
|
||||
setSortBy={setSortBy}
|
||||
searchFilter={searchFilter}
|
||||
setSearchFilter={setSearchFilter}
|
||||
>
|
||||
<SearchBar
|
||||
placeholder={`Search ${collection._count?.links} Links`}
|
||||
placeholder={
|
||||
collection._count?.links === 1
|
||||
? t("search_count_link", {
|
||||
count: collection._count?.links,
|
||||
})
|
||||
: t("search_count_links", {
|
||||
count: collection._count?.links,
|
||||
})
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="flex gap-2 items-center w-fit">
|
||||
<FilterSearchDropdown
|
||||
searchFilter={searchFilter}
|
||||
setSearchFilter={setSearchFilter}
|
||||
/>
|
||||
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
</LinkListOptions>
|
||||
|
||||
{links[0] ? (
|
||||
<LinkComponent
|
||||
|
|
@ -235,7 +239,7 @@ export default function PublicCollections() {
|
|||
})}
|
||||
/>
|
||||
) : (
|
||||
<p>This collection is empty...</p>
|
||||
<p>{t("collection_is_empty")}</p>
|
||||
)}
|
||||
|
||||
{/* <p className="text-center text-neutral">
|
||||
|
|
@ -254,3 +258,5 @@ export default function PublicCollections() {
|
|||
<></>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -5,9 +5,14 @@ import { signIn } from "next-auth/react";
|
|||
import { useRouter } from "next/router";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import AccentSubmitButton from "@/components/ui/Button";
|
||||
import Button from "@/components/ui/Button";
|
||||
import { getLogins } from "./api/v1/logins";
|
||||
import { InferGetServerSidePropsType } from "next";
|
||||
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
|
||||
import { getToken } from "next-auth/jwt";
|
||||
import { prisma } from "@/lib/api/db";
|
||||
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
||||
import { i18n } from "next-i18next.config";
|
||||
import { Trans, useTranslation } from "next-i18next";
|
||||
|
||||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
|
||||
|
||||
|
|
@ -19,14 +24,10 @@ type FormData = {
|
|||
passwordConfirmation: string;
|
||||
};
|
||||
|
||||
export const getServerSideProps = () => {
|
||||
const availableLogins = getLogins();
|
||||
return { props: { availableLogins } };
|
||||
};
|
||||
|
||||
export default function Register({
|
||||
availableLogins,
|
||||
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
|
||||
const { t } = useTranslation();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -62,14 +63,14 @@ export default function Register({
|
|||
|
||||
if (checkFields()) {
|
||||
if (form.password !== form.passwordConfirmation)
|
||||
return toast.error("Passwords do not match.");
|
||||
return toast.error(t("passwords_mismatch"));
|
||||
else if (form.password.length < 8)
|
||||
return toast.error("Passwords must be at least 8 characters.");
|
||||
return toast.error(t("password_too_short"));
|
||||
const { passwordConfirmation, ...request } = form;
|
||||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Creating Account...");
|
||||
const load = toast.loading(t("creating_account"));
|
||||
|
||||
const response = await fetch("/api/v1/users", {
|
||||
body: JSON.stringify(request),
|
||||
|
|
@ -97,12 +98,12 @@ export default function Register({
|
|||
);
|
||||
} else if (!emailEnabled) router.push("/login");
|
||||
|
||||
toast.success("User Created!");
|
||||
toast.success(t("account_created"));
|
||||
} else {
|
||||
toast.error(data.response);
|
||||
}
|
||||
} else {
|
||||
toast.error("Please fill out all the fields.");
|
||||
toast.error(t("fill_all_fields"));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -110,7 +111,7 @@ export default function Register({
|
|||
async function loginUserButton(method: string) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Authenticating...");
|
||||
const load = toast.loading(t("authenticating"));
|
||||
|
||||
const res = await signIn(method, {});
|
||||
|
||||
|
|
@ -121,12 +122,10 @@ export default function Register({
|
|||
|
||||
function displayLoginExternalButton() {
|
||||
const Buttons: any = [];
|
||||
availableLogins.buttonAuths.forEach((value, index) => {
|
||||
availableLogins.buttonAuths.forEach((value: any, index: any) => {
|
||||
Buttons.push(
|
||||
<React.Fragment key={index}>
|
||||
{index !== 0 ? <div className="divider my-1">Or</div> : undefined}
|
||||
|
||||
<AccentSubmitButton
|
||||
<Button
|
||||
type="button"
|
||||
onClick={() => loginUserButton(value.method)}
|
||||
size="full"
|
||||
|
|
@ -138,7 +137,7 @@ export default function Register({
|
|||
<i className={"bi-" + value.name.toLowerCase()}></i>
|
||||
) : undefined}
|
||||
{value.name}
|
||||
</AccentSubmitButton>
|
||||
</Button>
|
||||
</React.Fragment>
|
||||
);
|
||||
});
|
||||
|
|
@ -149,31 +148,30 @@ export default function Register({
|
|||
<CenteredForm
|
||||
text={
|
||||
process.env.NEXT_PUBLIC_STRIPE
|
||||
? `Unlock ${
|
||||
process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
|
||||
} days of Premium Service at no cost!`
|
||||
: "Create a new account"
|
||||
? t("trial_offer_desc", {
|
||||
count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14),
|
||||
})
|
||||
: t("register_desc")
|
||||
}
|
||||
data-testid="registration-form"
|
||||
>
|
||||
{process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? (
|
||||
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
|
||||
<p>
|
||||
Registration is disabled for this instance, please contact the admin
|
||||
in case of any issues.
|
||||
</p>
|
||||
<p>{t("registration_disabled")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={registerUser}>
|
||||
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-base-200 rounded-2xl shadow-md border border-neutral-content">
|
||||
<p className="text-3xl text-center font-extralight">
|
||||
Enter your details
|
||||
{t("enter_details")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-0"></div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm w-fit font-semibold mb-1">Display Name</p>
|
||||
<p className="text-sm w-fit font-semibold mb-1">
|
||||
{t("display_name")}
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
autoFocus={true}
|
||||
|
|
@ -187,7 +185,9 @@ export default function Register({
|
|||
|
||||
{emailEnabled ? undefined : (
|
||||
<div>
|
||||
<p className="text-sm w-fit font-semibold mb-1">Username</p>
|
||||
<p className="text-sm w-fit font-semibold mb-1">
|
||||
{t("username")}
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
placeholder="john"
|
||||
|
|
@ -203,7 +203,7 @@ export default function Register({
|
|||
|
||||
{emailEnabled ? (
|
||||
<div>
|
||||
<p className="text-sm w-fit font-semibold mb-1">Email</p>
|
||||
<p className="text-sm w-fit font-semibold mb-1">{t("email")}</p>
|
||||
|
||||
<TextInput
|
||||
type="email"
|
||||
|
|
@ -217,7 +217,9 @@ export default function Register({
|
|||
) : undefined}
|
||||
|
||||
<div className="w-full">
|
||||
<p className="text-sm w-fit font-semibold mb-1">Password</p>
|
||||
<p className="text-sm w-fit font-semibold mb-1">
|
||||
{t("password")}
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
type="password"
|
||||
|
|
@ -231,7 +233,7 @@ export default function Register({
|
|||
|
||||
<div className="w-full">
|
||||
<p className="text-sm w-fit font-semibold mb-1">
|
||||
Confirm Password
|
||||
{t("confirm_password")}
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
|
|
@ -247,64 +249,67 @@ export default function Register({
|
|||
</div>
|
||||
|
||||
{process.env.NEXT_PUBLIC_STRIPE ? (
|
||||
<div>
|
||||
<p className="text-xs text-neutral">
|
||||
By signing up, you agree to our{" "}
|
||||
<Link
|
||||
href="https://linkwarden.app/tos"
|
||||
className="font-semibold underline"
|
||||
data-testid="terms-of-service-link"
|
||||
>
|
||||
Terms of Service
|
||||
</Link>{" "}
|
||||
and{" "}
|
||||
<Link
|
||||
href="https://linkwarden.app/privacy-policy"
|
||||
className="font-semibold underline"
|
||||
data-testid="privacy-policy-link"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
<p className="text-xs text-neutral">
|
||||
Need help?{" "}
|
||||
<Link
|
||||
href="mailto:support@linkwarden.app"
|
||||
className="font-semibold underline"
|
||||
data-testid="support-link"
|
||||
>
|
||||
Get in touch
|
||||
</Link>
|
||||
.
|
||||
<div className="text-xs text-neutral mb-3">
|
||||
<p>
|
||||
<Trans
|
||||
i18nKey="sign_up_agreement"
|
||||
components={[
|
||||
<Link
|
||||
href="https://linkwarden.app/tos"
|
||||
className="font-semibold"
|
||||
data-testid="terms-of-service-link"
|
||||
key={0}
|
||||
/>,
|
||||
<Link
|
||||
href="https://linkwarden.app/privacy-policy"
|
||||
className="font-semibold"
|
||||
data-testid="privacy-policy-link"
|
||||
key={1}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
<AccentSubmitButton
|
||||
<Button
|
||||
type="submit"
|
||||
loading={submitLoader}
|
||||
intent="accent"
|
||||
size="full"
|
||||
data-testid="register-button"
|
||||
>
|
||||
Sign Up
|
||||
</AccentSubmitButton>
|
||||
{t("sign_up")}
|
||||
</Button>
|
||||
|
||||
{availableLogins.buttonAuths.length > 0 ? (
|
||||
<div className="divider my-1">Or continue with</div>
|
||||
<div className="divider my-1">{t("or_continue_with")}</div>
|
||||
) : undefined}
|
||||
|
||||
{displayLoginExternalButton()}
|
||||
<div className="flex items-baseline gap-1 justify-center">
|
||||
<p className="w-fit text-neutral">Already have an account?</p>
|
||||
<Link
|
||||
href={"/login"}
|
||||
className="block font-bold"
|
||||
data-testid="login-link"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<div>
|
||||
<div className="text-neutral text-center flex items-baseline gap-1 justify-center">
|
||||
<p className="w-fit text-neutral">{t("already_registered")}</p>
|
||||
<Link
|
||||
href={"/login"}
|
||||
className="font-bold text-base-content"
|
||||
data-testid="login-link"
|
||||
>
|
||||
{t("login")}
|
||||
</Link>
|
||||
</div>
|
||||
{process.env.NEXT_PUBLIC_STRIPE ? (
|
||||
<div className="text-neutral text-center flex items-baseline gap-1 justify-center">
|
||||
<p>{t("need_help")}</p>
|
||||
<Link
|
||||
href="mailto:support@linkwarden.app"
|
||||
className="font-bold text-base-content"
|
||||
data-testid="support-link"
|
||||
>
|
||||
{t("get_in_touch")}
|
||||
</Link>
|
||||
</div>
|
||||
) : undefined}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
@ -312,3 +317,59 @@ export default function Register({
|
|||
</CenteredForm>
|
||||
);
|
||||
}
|
||||
|
||||
const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const availableLogins = getLogins();
|
||||
|
||||
const acceptLanguageHeader = ctx.req.headers["accept-language"];
|
||||
const availableLanguages = i18n.locales;
|
||||
|
||||
const token = await getToken({ req: ctx.req });
|
||||
|
||||
if (token) {
|
||||
const user = await prisma.user.findUnique({
|
||||
where: {
|
||||
id: token.id,
|
||||
},
|
||||
});
|
||||
|
||||
if (user) {
|
||||
return {
|
||||
props: {
|
||||
availableLogins,
|
||||
...(await serverSideTranslations(user.locale ?? "en", ["common"])),
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const acceptedLanguages = acceptLanguageHeader
|
||||
?.split(",")
|
||||
.map((lang) => lang.split(";")[0]);
|
||||
|
||||
let bestMatch = acceptedLanguages?.find((lang) =>
|
||||
availableLanguages.includes(lang)
|
||||
);
|
||||
|
||||
if (!bestMatch) {
|
||||
acceptedLanguages?.some((acceptedLang) => {
|
||||
const partialMatch = availableLanguages.find((lang) =>
|
||||
lang.startsWith(acceptedLang)
|
||||
);
|
||||
if (partialMatch) {
|
||||
bestMatch = partialMatch;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
availableLogins,
|
||||
...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
176
pages/search.tsx
176
pages/search.tsx
|
|
@ -1,25 +1,22 @@
|
|||
import FilterSearchDropdown from "@/components/FilterSearchDropdown";
|
||||
import SortDropdown from "@/components/SortDropdown";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
import useLinkStore from "@/store/links";
|
||||
import { Sort, ViewMode } from "@/types/global";
|
||||
import { useRouter } from "next/router";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import CardView from "@/components/LinkViews/Layouts/CardView";
|
||||
import ListView from "@/components/LinkViews/Layouts/ListView";
|
||||
import PageHeader from "@/components/PageHeader";
|
||||
import { GridLoader } from "react-spinners";
|
||||
import useCollectivePermissions from "@/hooks/useCollectivePermissions";
|
||||
import toast from "react-hot-toast";
|
||||
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
|
||||
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
|
||||
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
|
||||
import LinkListOptions from "@/components/LinkListOptions";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
export default function Search() {
|
||||
const { links, selectedLinks, setSelectedLinks, deleteLinksById } =
|
||||
useLinkStore();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { links } = useLinkStore();
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
|
|
@ -37,47 +34,12 @@ export default function Search() {
|
|||
|
||||
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
|
||||
|
||||
const [bulkDeleteLinksModal, setBulkDeleteLinksModal] = useState(false);
|
||||
const [bulkEditLinksModal, setBulkEditLinksModal] = useState(false);
|
||||
const [editMode, setEditMode] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (editMode) return setEditMode(false);
|
||||
}, [router]);
|
||||
|
||||
const collectivePermissions = useCollectivePermissions(
|
||||
selectedLinks.map((link) => link.collectionId as number)
|
||||
);
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedLinks.length === links.length) {
|
||||
setSelectedLinks([]);
|
||||
} else {
|
||||
setSelectedLinks(links.map((link) => link));
|
||||
}
|
||||
};
|
||||
|
||||
const bulkDeleteLinks = async () => {
|
||||
const load = toast.loading(
|
||||
`Deleting ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}...`
|
||||
);
|
||||
|
||||
const response = await deleteLinksById(
|
||||
selectedLinks.map((link) => link.id as number)
|
||||
);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok &&
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}!`
|
||||
);
|
||||
};
|
||||
|
||||
const { isLoading } = useLinks({
|
||||
sort: sortBy,
|
||||
searchQueryString: decodeURIComponent(router.query.q as string),
|
||||
|
|
@ -88,10 +50,6 @@ export default function Search() {
|
|||
searchByTags: searchFilter.tags,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
console.log("isLoading", isLoading);
|
||||
}, [isLoading]);
|
||||
|
||||
const linkView = {
|
||||
[ViewMode.Card]: CardView,
|
||||
[ViewMode.List]: ListView,
|
||||
|
|
@ -104,102 +62,22 @@ export default function Search() {
|
|||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full h-full">
|
||||
<div className="flex justify-between">
|
||||
<LinkListOptions
|
||||
t={t}
|
||||
searchFilter={searchFilter}
|
||||
setSearchFilter={setSearchFilter}
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
sortBy={sortBy}
|
||||
setSortBy={setSortBy}
|
||||
editMode={editMode}
|
||||
setEditMode={setEditMode}
|
||||
>
|
||||
<PageHeader icon={"bi-search"} title={"Search Results"} />
|
||||
|
||||
<div className="flex gap-3 items-center justify-end">
|
||||
<div className="flex gap-2 items-center mt-2">
|
||||
{links.length > 0 && (
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
)}
|
||||
<FilterSearchDropdown
|
||||
searchFilter={searchFilter}
|
||||
setSearchFilter={setSearchFilter}
|
||||
/>
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{editMode && links.length > 0 && (
|
||||
<div className="w-full flex justify-between items-center min-h-[32px]">
|
||||
{links.length > 0 && (
|
||||
<div className="flex gap-3 ml-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
onChange={() => handleSelectAll()}
|
||||
checked={
|
||||
selectedLinks.length === links.length && links.length > 0
|
||||
}
|
||||
/>
|
||||
{selectedLinks.length > 0 ? (
|
||||
<span>
|
||||
{selectedLinks.length}{" "}
|
||||
{selectedLinks.length === 1 ? "link" : "links"} selected
|
||||
</span>
|
||||
) : (
|
||||
<span>Nothing selected</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(
|
||||
collectivePermissions === true ||
|
||||
collectivePermissions?.canUpdate
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
e.shiftKey
|
||||
? bulkDeleteLinks()
|
||||
: setBulkDeleteLinksModal(true);
|
||||
}}
|
||||
className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(
|
||||
collectivePermissions === true ||
|
||||
collectivePermissions?.canDelete
|
||||
)
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</LinkListOptions>
|
||||
|
||||
{!isLoading && !links[0] ? (
|
||||
<p>
|
||||
Nothing found.{" "}
|
||||
<span className="font-bold text-xl" title="Shruggie">
|
||||
¯\_(ツ)_/¯
|
||||
</span>
|
||||
</p>
|
||||
<p>{t("nothing_found")}</p>
|
||||
) : links[0] ? (
|
||||
<LinkComponent
|
||||
editMode={editMode}
|
||||
|
|
@ -217,20 +95,8 @@ export default function Search() {
|
|||
)
|
||||
)}
|
||||
</div>
|
||||
{bulkDeleteLinksModal && (
|
||||
<BulkDeleteLinksModal
|
||||
onClose={() => {
|
||||
setBulkDeleteLinksModal(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{bulkEditLinksModal && (
|
||||
<BulkEditLinksModal
|
||||
onClose={() => {
|
||||
setBulkEditLinksModal(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -4,11 +4,14 @@ import NewTokenModal from "@/components/ModalContent/NewTokenModal";
|
|||
import RevokeTokenModal from "@/components/ModalContent/RevokeTokenModal";
|
||||
import { AccessToken } from "@prisma/client";
|
||||
import useTokenStore from "@/store/tokens";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
|
||||
export default function AccessTokens() {
|
||||
const [newTokenModal, setNewTokenModal] = useState(false);
|
||||
const [revokeTokenModal, setRevokeTokenModal] = useState(false);
|
||||
const [selectedToken, setSelectedToken] = useState<AccessToken | null>(null);
|
||||
const { t } = useTranslation();
|
||||
|
||||
const openRevokeModal = (token: AccessToken) => {
|
||||
setSelectedToken(token);
|
||||
|
|
@ -27,15 +30,14 @@ export default function AccessTokens() {
|
|||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<p className="capitalize text-3xl font-thin inline">Access Tokens</p>
|
||||
<p className="capitalize text-3xl font-thin inline">
|
||||
{t("access_tokens")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-3"></div>
|
||||
|
||||
<div className="flex flex-col gap-3">
|
||||
<p>
|
||||
Access Tokens can be used to access Linkwarden from other apps and
|
||||
services without giving away your Username and Password.
|
||||
</p>
|
||||
<p>{t("access_tokens_description")}</p>
|
||||
|
||||
<button
|
||||
className={`btn ml-auto btn-accent dark:border-violet-400 text-white tracking-wider w-fit flex items-center gap-2`}
|
||||
|
|
@ -43,7 +45,7 @@ export default function AccessTokens() {
|
|||
setNewTokenModal(true);
|
||||
}}
|
||||
>
|
||||
New Access Token
|
||||
{t("new_token")}
|
||||
</button>
|
||||
|
||||
{tokens.length > 0 ? (
|
||||
|
|
@ -51,13 +53,12 @@ export default function AccessTokens() {
|
|||
<div className="divider my-0"></div>
|
||||
|
||||
<table className="table">
|
||||
{/* head */}
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Name</th>
|
||||
<th>Created</th>
|
||||
<th>Expires</th>
|
||||
<th>{t("name")}</th>
|
||||
<th>{t("created")}</th>
|
||||
<th>{t("expires")}</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
|
@ -105,3 +106,5 @@ export default function AccessTokens() {
|
|||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -14,17 +14,17 @@ import Checkbox from "@/components/Checkbox";
|
|||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import EmailChangeVerificationModal from "@/components/ModalContent/EmailChangeVerificationModal";
|
||||
import Button from "@/components/ui/Button";
|
||||
import { i18n } from "next-i18next.config";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
|
||||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
|
||||
|
||||
export default function Account() {
|
||||
const [emailChangeVerificationModal, setEmailChangeVerificationModal] =
|
||||
useState(false);
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
|
||||
const [user, setUser] = useState<AccountSettings>(
|
||||
!objectIsEmpty(account)
|
||||
? account
|
||||
|
|
@ -44,6 +44,8 @@ export default function Account() {
|
|||
} as unknown as AccountSettings)
|
||||
);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
function objectIsEmpty(obj: object) {
|
||||
return Object.keys(obj).length === 0;
|
||||
}
|
||||
|
|
@ -67,17 +69,16 @@ export default function Account() {
|
|||
};
|
||||
reader.readAsDataURL(resizedFile);
|
||||
} else {
|
||||
toast.error("Please select a PNG or JPEG file thats less than 1MB.");
|
||||
toast.error(t("image_upload_size_error"));
|
||||
}
|
||||
} else {
|
||||
toast.error("Invalid file format.");
|
||||
toast.error(t("image_upload_format_error"));
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async (password?: string) => {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
const load = toast.loading(t("applying_settings"));
|
||||
|
||||
const response = await updateAccount({
|
||||
...user,
|
||||
|
|
@ -90,56 +91,44 @@ export default function Account() {
|
|||
if (response.ok) {
|
||||
const emailChanged = account.email !== user.email;
|
||||
|
||||
toast.success(t("settings_applied"));
|
||||
if (emailChanged) {
|
||||
toast.success("Settings Applied!");
|
||||
toast.success(
|
||||
"Email change request sent. Please verify the new email address."
|
||||
);
|
||||
toast.success(t("email_change_request"));
|
||||
setEmailChangeVerificationModal(false);
|
||||
} else toast.success("Settings Applied!");
|
||||
}
|
||||
} else toast.error(response.data as string);
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
|
||||
const importBookmarks = async (e: any, format: MigrationFormat) => {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const file: File = e.target.files[0];
|
||||
|
||||
if (file) {
|
||||
var reader = new FileReader();
|
||||
reader.readAsText(file, "UTF-8");
|
||||
reader.onload = async function (e) {
|
||||
const load = toast.loading("Importing...");
|
||||
|
||||
const load = toast.loading(t("importing_bookmarks"));
|
||||
const request: string = e.target?.result as string;
|
||||
|
||||
const body: MigrationRequest = {
|
||||
format,
|
||||
data: request,
|
||||
};
|
||||
|
||||
const body: MigrationRequest = { format, data: request };
|
||||
const response = await fetch("/api/v1/migration", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Imported the Bookmarks! Reloading the page...");
|
||||
toast.success(t("import_success"));
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 2000);
|
||||
} else toast.error(data.response as string);
|
||||
} else {
|
||||
toast.error(data.response as string);
|
||||
}
|
||||
};
|
||||
reader.onerror = function (e) {
|
||||
console.log("Error:", e);
|
||||
};
|
||||
}
|
||||
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
|
||||
|
|
@ -157,16 +146,14 @@ export default function Account() {
|
|||
}, [whitelistedUsersTextbox]);
|
||||
|
||||
const stringToArray = (str: string) => {
|
||||
const stringWithoutSpaces = str?.replace(/\s+/g, "");
|
||||
|
||||
const wordsArray = stringWithoutSpaces?.split(",");
|
||||
|
||||
return wordsArray;
|
||||
return str?.replace(/\s+/g, "").split(",");
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<p className="capitalize text-3xl font-thin inline">Account Settings</p>
|
||||
<p className="capitalize text-3xl font-thin inline">
|
||||
{t("accountSettings")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-3"></div>
|
||||
|
||||
|
|
@ -174,7 +161,7 @@ export default function Account() {
|
|||
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<p className="mb-2">Display Name</p>
|
||||
<p className="mb-2">{t("display_name")}</p>
|
||||
<TextInput
|
||||
value={user.name || ""}
|
||||
className="bg-base-200"
|
||||
|
|
@ -182,17 +169,16 @@ export default function Account() {
|
|||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-2">Username</p>
|
||||
<p className="mb-2">{t("username")}</p>
|
||||
<TextInput
|
||||
value={user.username || ""}
|
||||
className="bg-base-200"
|
||||
onChange={(e) => setUser({ ...user, username: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{emailEnabled ? (
|
||||
<div>
|
||||
<p className="mb-2">Email</p>
|
||||
<p className="mb-2">{t("email")}</p>
|
||||
<TextInput
|
||||
value={user.email || ""}
|
||||
className="bg-base-200"
|
||||
|
|
@ -200,10 +186,32 @@ export default function Account() {
|
|||
/>
|
||||
</div>
|
||||
) : undefined}
|
||||
<div>
|
||||
<p className="mb-2">{t("language")}</p>
|
||||
<select
|
||||
onChange={(e) => {
|
||||
setUser({ ...user, locale: e.target.value });
|
||||
}}
|
||||
className="select border border-neutral-content focus:outline-none focus:border-primary duration-100 w-full bg-base-200 rounded-[0.375rem] min-h-0 h-[2.625rem] leading-4 p-2"
|
||||
>
|
||||
{i18n.locales.map((locale) => (
|
||||
<option
|
||||
key={locale}
|
||||
value={locale}
|
||||
selected={user.locale === locale}
|
||||
>
|
||||
{new Intl.DisplayNames(locale, { type: "language" }).of(
|
||||
locale
|
||||
) || ""}
|
||||
</option>
|
||||
))}
|
||||
<option disabled>{t("more_coming_soon")}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sm:row-span-2 sm:justify-self-center my-3">
|
||||
<p className="mb-2 sm:text-center">Profile Photo</p>
|
||||
<p className="mb-2 sm:text-center">{t("profile_photo")}</p>
|
||||
<div className="w-28 h-28 flex gap-3 sm:flex-col items-center">
|
||||
<ProfilePhoto
|
||||
priority={true}
|
||||
|
|
@ -221,12 +229,12 @@ export default function Account() {
|
|||
className="text-sm"
|
||||
>
|
||||
<i className="bi-pencil-square text-md duration-100"></i>
|
||||
Edit
|
||||
{t("edit")}
|
||||
</Button>
|
||||
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
|
||||
<li>
|
||||
<label tabIndex={0} role="button">
|
||||
Upload a new photo...
|
||||
{t("upload_new_photo")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
|
|
@ -249,7 +257,7 @@ export default function Account() {
|
|||
})
|
||||
}
|
||||
>
|
||||
Remove Photo
|
||||
{t("remove_photo")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
|
|
@ -261,25 +269,22 @@ export default function Account() {
|
|||
|
||||
<div className="sm:-mt-3">
|
||||
<Checkbox
|
||||
label="Make profile private"
|
||||
label={t("make_profile_private")}
|
||||
state={user.isPrivate}
|
||||
onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
|
||||
/>
|
||||
|
||||
<p className="text-neutral text-sm">
|
||||
This will limit who can find and add you to new Collections.
|
||||
</p>
|
||||
<p className="text-neutral text-sm">{t("profile_privacy_info")}</p>
|
||||
|
||||
{user.isPrivate && (
|
||||
<div className="pl-5">
|
||||
<p className="mt-2">Whitelisted Users</p>
|
||||
<p className="mt-2">{t("whitelisted_users")}</p>
|
||||
<p className="text-neutral text-sm mb-3">
|
||||
Please provide the Username of the users you wish to grant
|
||||
visibility to your profile. Separated by comma.
|
||||
{t("whitelisted_users_info")}
|
||||
</p>
|
||||
<textarea
|
||||
className="w-full resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
|
||||
placeholder="Your profile is hidden from everyone right now..."
|
||||
placeholder={t("whitelisted_users_placeholder")}
|
||||
value={whitelistedUsersTextbox}
|
||||
onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
|
||||
/>
|
||||
|
|
@ -296,14 +301,14 @@ export default function Account() {
|
|||
}
|
||||
}}
|
||||
loading={submitLoader}
|
||||
label="Save Changes"
|
||||
label={t("save_changes")}
|
||||
className="mt-2 w-full sm:w-fit"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-2 w-full rounded-md h-8">
|
||||
<p className="truncate w-full pr-7 text-3xl font-thin">
|
||||
Import & Export
|
||||
{t("import_export")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -311,7 +316,7 @@ export default function Account() {
|
|||
|
||||
<div className="flex gap-3 flex-col">
|
||||
<div>
|
||||
<p className="mb-2">Import your data from other platforms.</p>
|
||||
<p className="mb-2">{t("import_data")}</p>
|
||||
<div className="dropdown dropdown-bottom">
|
||||
<Button
|
||||
tabIndex={0}
|
||||
|
|
@ -322,7 +327,7 @@ export default function Account() {
|
|||
id="import-dropdown"
|
||||
>
|
||||
<i className="bi-cloud-upload text-xl duration-100"></i>
|
||||
Import From
|
||||
{t("import_links")}
|
||||
</Button>
|
||||
|
||||
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
|
||||
|
|
@ -331,9 +336,9 @@ export default function Account() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
htmlFor="import-linkwarden-file"
|
||||
title="JSON File"
|
||||
title={t("from_linkwarden")}
|
||||
>
|
||||
From Linkwarden
|
||||
{t("from_linkwarden")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
|
|
@ -351,9 +356,9 @@ export default function Account() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
htmlFor="import-html-file"
|
||||
title="HTML File"
|
||||
title={t("from_html")}
|
||||
>
|
||||
From Bookmarks HTML file
|
||||
{t("from_html")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
|
|
@ -371,9 +376,9 @@ export default function Account() {
|
|||
tabIndex={0}
|
||||
role="button"
|
||||
htmlFor="import-wallabag-file"
|
||||
title="Wallabag File"
|
||||
title={t("from_wallabag")}
|
||||
>
|
||||
From Wallabag (JSON file)
|
||||
{t("from_wallabag")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
|
|
@ -391,11 +396,11 @@ export default function Account() {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Download your data instantly.</p>
|
||||
<p className="mb-2">{t("download_data")}</p>
|
||||
<Link className="w-fit" href="/api/v1/migration">
|
||||
<div className="select-none relative duration-200 rounded-lg text-sm text-center w-fit flex justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-50 bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30 h-10 px-4 py-2">
|
||||
<i className="bi-cloud-download text-xl duration-100"></i>
|
||||
<p>Export Data</p>
|
||||
<p>{t("export_data")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
@ -405,23 +410,22 @@ export default function Account() {
|
|||
<div>
|
||||
<div className="flex items-center gap-2 w-full rounded-md h-8">
|
||||
<p className="text-red-500 dark:text-red-500 truncate w-full pr-7 text-3xl font-thin">
|
||||
Delete Account
|
||||
{t("delete_account")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="divider my-3"></div>
|
||||
|
||||
<p>
|
||||
This will permanently delete ALL the Links, Collections, Tags, and
|
||||
archived data you own.{" "}
|
||||
{t("delete_account_warning")}
|
||||
{process.env.NEXT_PUBLIC_STRIPE
|
||||
? "It will also cancel your subscription. "
|
||||
? " " + t("cancel_subscription_notice")
|
||||
: undefined}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link href="/settings/delete" className="underline">
|
||||
Account deletion page
|
||||
{t("account_deletion_page")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
|
|
@ -436,3 +440,5 @@ export default function Account() {
|
|||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -1,9 +1,12 @@
|
|||
import SettingsLayout from "@/layouts/SettingsLayout";
|
||||
import { useRouter } from "next/router";
|
||||
import { useEffect } from "react";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
|
||||
export default function Billing() {
|
||||
const router = useRouter();
|
||||
const { t } = useTranslation();
|
||||
|
||||
useEffect(() => {
|
||||
if (!process.env.NEXT_PUBLIC_STRIPE) router.push("/settings/profile");
|
||||
|
|
@ -11,26 +14,27 @@ export default function Billing() {
|
|||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<p className="capitalize text-3xl font-thin inline">Billing Settings</p>
|
||||
<p className="capitalize text-3xl font-thin inline">
|
||||
{t("billing_settings")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-3"></div>
|
||||
|
||||
<div className="w-full mx-auto flex flex-col gap-3 justify-between">
|
||||
<p className="text-md">
|
||||
To manage/cancel your subscription, visit the{" "}
|
||||
{t("manage_subscription_intro")}{" "}
|
||||
<a
|
||||
href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
|
||||
className="underline"
|
||||
target="_blank"
|
||||
>
|
||||
Billing Portal
|
||||
{t("billing_portal")}
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
|
||||
<p className="text-md">
|
||||
If you still need help or encountered any issues, feel free to reach
|
||||
out to us at:{" "}
|
||||
{t("help_contact_intro")}{" "}
|
||||
<a className="font-semibold" href="mailto:support@linkwarden.app">
|
||||
support@linkwarden.app
|
||||
</a>
|
||||
|
|
@ -39,3 +43,5 @@ export default function Billing() {
|
|||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -5,18 +5,16 @@ import CenteredForm from "@/layouts/CenteredForm";
|
|||
import { signOut, useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
import Button from "@/components/ui/Button";
|
||||
|
||||
const keycloakEnabled = process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED === "true";
|
||||
const authentikEnabled = process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
|
||||
export default function Delete() {
|
||||
const [password, setPassword] = useState("");
|
||||
const [comment, setComment] = useState<string>();
|
||||
const [feedback, setFeedback] = useState<string>();
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const { data } = useSession();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const submit = async () => {
|
||||
const body = {
|
||||
|
|
@ -27,13 +25,12 @@ export default function Delete() {
|
|||
},
|
||||
};
|
||||
|
||||
if (!keycloakEnabled && !authentikEnabled && password == "") {
|
||||
return toast.error("Please fill the required fields.");
|
||||
if (password === "") {
|
||||
return toast.error(t("fill_required_fields"));
|
||||
}
|
||||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Deleting everything, please wait...");
|
||||
const load = toast.loading(t("deleting_message"));
|
||||
|
||||
const response = await fetch(`/api/v1/users/${data?.user.id}`, {
|
||||
method: "DELETE",
|
||||
|
|
@ -49,7 +46,9 @@ export default function Delete() {
|
|||
|
||||
if (response.ok) {
|
||||
signOut();
|
||||
} else toast.error(message);
|
||||
} else {
|
||||
toast.error(message);
|
||||
}
|
||||
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
|
|
@ -61,75 +60,65 @@ export default function Delete() {
|
|||
href="/settings/account"
|
||||
className="absolute top-4 left-4 btn btn-ghost btn-square btn-sm"
|
||||
>
|
||||
<i className="bi-chevron-left text-neutral text-xl"></i>
|
||||
<i className="bi-chevron-left text-neutral text-xl"></i>
|
||||
</Link>
|
||||
<div className="flex items-center gap-2 w-full rounded-md h-8">
|
||||
<p className="text-red-500 dark:text-red-500 truncate w-full text-3xl text-center">
|
||||
Delete Account
|
||||
{t("delete_account")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="divider my-0"></div>
|
||||
|
||||
<p>
|
||||
This will permanently delete all the Links, Collections, Tags, and
|
||||
archived data you own. It will also log you out
|
||||
{process.env.NEXT_PUBLIC_STRIPE
|
||||
? " and cancel your subscription"
|
||||
: undefined}
|
||||
. This action is irreversible!
|
||||
</p>
|
||||
<p>{t("delete_warning")}</p>
|
||||
|
||||
{process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED !== "true" ? (
|
||||
<div>
|
||||
<p className="mb-2">Confirm Your Password</p>
|
||||
|
||||
<TextInput
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••••••••"
|
||||
className="bg-base-100"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
) : undefined}
|
||||
<div>
|
||||
<p className="mb-2">{t("confirm_password")}</p>
|
||||
<TextInput
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
placeholder="••••••••••••••"
|
||||
className="bg-base-100"
|
||||
type="password"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{process.env.NEXT_PUBLIC_STRIPE ? (
|
||||
<fieldset className="border rounded-md p-2 border-primary">
|
||||
<legend className="px-3 py-1 text-sm sm:text-base border rounded-md border-primary">
|
||||
<b>Optional</b>{" "}
|
||||
<i className="min-[390px]:text-sm text-xs">
|
||||
(but it really helps us improve!)
|
||||
</i>
|
||||
<b>{t("optional")}</b> <i>{t("feedback_help")}</i>
|
||||
</legend>
|
||||
<label className="w-full flex min-[430px]:items-center items-start gap-2 mb-3 min-[430px]:flex-row flex-col">
|
||||
<p className="text-sm">Reason for cancellation:</p>
|
||||
<p className="text-sm">{t("reason_for_cancellation")}:</p>
|
||||
<select
|
||||
className="rounded-md p-1 outline-none"
|
||||
value={feedback}
|
||||
onChange={(e) => setFeedback(e.target.value)}
|
||||
>
|
||||
<option value={undefined}>Please specify</option>
|
||||
<option value="customer_service">Customer Service</option>
|
||||
<option value="low_quality">Low Quality</option>
|
||||
<option value="missing_features">Missing Features</option>
|
||||
<option value="switched_service">Switched Service</option>
|
||||
<option value="too_complex">Too Complex</option>
|
||||
<option value="too_expensive">Too Expensive</option>
|
||||
<option value="unused">Unused</option>
|
||||
<option value="other">Other</option>
|
||||
<option value={undefined}>{t("please_specify")}</option>
|
||||
<option value="customer_service">
|
||||
{t("customer_service")}
|
||||
</option>
|
||||
<option value="low_quality">{t("low_quality")}</option>
|
||||
<option value="missing_features">
|
||||
{t("missing_features")}
|
||||
</option>
|
||||
<option value="switched_service">
|
||||
{t("switched_service")}
|
||||
</option>
|
||||
<option value="too_complex">{t("too_complex")}</option>
|
||||
<option value="too_expensive">{t("too_expensive")}</option>
|
||||
<option value="unused">{t("unused")}</option>
|
||||
<option value="other">{t("other")}</option>
|
||||
</select>
|
||||
</label>
|
||||
<div>
|
||||
<p className="text-sm mb-2">
|
||||
More information (the more details, the more helpful it'd
|
||||
be)
|
||||
</p>
|
||||
<p className="text-sm mb-2">{t("more_information")}</p>
|
||||
|
||||
<textarea
|
||||
value={comment}
|
||||
onChange={(e) => setComment(e.target.value)}
|
||||
placeholder="e.g. I needed a feature that..."
|
||||
placeholder={t("feedback_placeholder")}
|
||||
className="resize-none w-full rounded-md p-2 border-neutral-content bg-base-100 focus:border-sky-300 dark:focus:border-sky-600 border-solid border outline-none duration-100"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -142,9 +131,11 @@ export default function Delete() {
|
|||
loading={submitLoader}
|
||||
onClick={submit}
|
||||
>
|
||||
<p className="text-center w-full">Delete Your Account</p>
|
||||
<p className="text-center w-full">{t("delete_your_account")}</p>
|
||||
</Button>
|
||||
</div>
|
||||
</CenteredForm>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -4,25 +4,26 @@ import useAccountStore from "@/store/account";
|
|||
import SubmitButton from "@/components/SubmitButton";
|
||||
import { toast } from "react-hot-toast";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
|
||||
export default function Password() {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [oldPassword, setOldPassword] = useState("");
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
|
||||
const submit = async () => {
|
||||
if (newPassword == "" || oldPassword == "") {
|
||||
return toast.error("Please fill all the fields.");
|
||||
if (newPassword === "" || oldPassword === "") {
|
||||
return toast.error(t("fill_all_fields"));
|
||||
}
|
||||
if (newPassword.length < 8)
|
||||
return toast.error("Passwords must be at least 8 characters.");
|
||||
if (newPassword.length < 8) return toast.error(t("password_length_error"));
|
||||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
const load = toast.loading(t("applying_changes"));
|
||||
|
||||
const response = await updateAccount({
|
||||
...account,
|
||||
|
|
@ -33,26 +34,27 @@ export default function Password() {
|
|||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Settings Applied!");
|
||||
toast.success(t("settings_applied"));
|
||||
setNewPassword("");
|
||||
setOldPassword("");
|
||||
} else toast.error(response.data as string);
|
||||
} else {
|
||||
toast.error(response.data as string);
|
||||
}
|
||||
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<p className="capitalize text-3xl font-thin inline">Change Password</p>
|
||||
<p className="capitalize text-3xl font-thin inline">
|
||||
{t("change_password")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-3"></div>
|
||||
|
||||
<p className="mb-3">
|
||||
To change your password, please fill out the following. Your password
|
||||
should be at least 8 characters.
|
||||
</p>
|
||||
<p className="mb-3">{t("password_change_instructions")}</p>
|
||||
<div className="w-full flex flex-col gap-2 justify-between">
|
||||
<p>Old Password</p>
|
||||
<p>{t("old_password")}</p>
|
||||
|
||||
<TextInput
|
||||
value={oldPassword}
|
||||
|
|
@ -62,7 +64,7 @@ export default function Password() {
|
|||
type="password"
|
||||
/>
|
||||
|
||||
<p className="mt-3">New Password</p>
|
||||
<p className="mt-3">{t("new_password")}</p>
|
||||
|
||||
<TextInput
|
||||
value={newPassword}
|
||||
|
|
@ -75,10 +77,12 @@ export default function Password() {
|
|||
<SubmitButton
|
||||
onClick={submit}
|
||||
loading={submitLoader}
|
||||
label="Save Changes"
|
||||
label={t("save_changes")}
|
||||
className="mt-3 w-full sm:w-fit"
|
||||
/>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -1,31 +1,33 @@
|
|||
import SettingsLayout from "@/layouts/SettingsLayout";
|
||||
import { useState, useEffect } from "react";
|
||||
import useAccountStore from "@/store/account";
|
||||
import { AccountSettings } from "@/types/global";
|
||||
import { toast } from "react-hot-toast";
|
||||
import React from "react";
|
||||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
import Checkbox from "@/components/Checkbox";
|
||||
import SubmitButton from "@/components/SubmitButton";
|
||||
import { toast } from "react-hot-toast";
|
||||
import Checkbox from "@/components/Checkbox";
|
||||
import useLocalSettingsStore from "@/store/localSettings";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps"; // Import getServerSideProps for server-side data fetching
|
||||
import { LinksRouteTo } from "@prisma/client";
|
||||
|
||||
export default function Appearance() {
|
||||
const { t } = useTranslation();
|
||||
const { updateSettings } = useLocalSettingsStore();
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
const [user, setUser] = useState<AccountSettings>(account);
|
||||
const [user, setUser] = useState(account);
|
||||
|
||||
const [preventDuplicateLinks, setPreventDuplicateLinks] =
|
||||
useState<boolean>(false);
|
||||
const [archiveAsScreenshot, setArchiveAsScreenshot] =
|
||||
useState<boolean>(false);
|
||||
const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(false);
|
||||
const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
|
||||
useState<boolean>(false);
|
||||
const [linksRouteTo, setLinksRouteTo] = useState<LinksRouteTo>(
|
||||
user.linksRouteTo
|
||||
const [preventDuplicateLinks, setPreventDuplicateLinks] = useState<boolean>(
|
||||
account.preventDuplicateLinks
|
||||
);
|
||||
const [archiveAsScreenshot, setArchiveAsScreenshot] = useState<boolean>(
|
||||
account.archiveAsScreenshot
|
||||
);
|
||||
const [archiveAsPDF, setArchiveAsPDF] = useState<boolean>(
|
||||
account.archiveAsPDF
|
||||
);
|
||||
const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
|
||||
useState<boolean>(account.archiveAsWaybackMachine);
|
||||
const [linksRouteTo, setLinksRouteTo] = useState(account.linksRouteTo);
|
||||
|
||||
useEffect(() => {
|
||||
setUser({
|
||||
|
|
@ -62,29 +64,29 @@ export default function Appearance() {
|
|||
const submit = async () => {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
const load = toast.loading(t("applying_changes"));
|
||||
|
||||
const response = await updateAccount({
|
||||
...user,
|
||||
});
|
||||
const response = await updateAccount({ ...user });
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Settings Applied!");
|
||||
} else toast.error(response.data as string);
|
||||
toast.success(t("settings_applied"));
|
||||
} else {
|
||||
toast.error(response.data as string);
|
||||
}
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<p className="capitalize text-3xl font-thin inline">Preference</p>
|
||||
<p className="capitalize text-3xl font-thin inline">{t("preference")}</p>
|
||||
|
||||
<div className="divider my-3"></div>
|
||||
|
||||
<div className="flex flex-col gap-5">
|
||||
<div>
|
||||
<p className="mb-3">Select Theme</p>
|
||||
<p className="mb-3">{t("select_theme")}</p>
|
||||
<div className="flex gap-3 w-full">
|
||||
<div
|
||||
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-black ${
|
||||
|
|
@ -95,9 +97,7 @@ export default function Appearance() {
|
|||
onClick={() => updateSettings({ theme: "dark" })}
|
||||
>
|
||||
<i className="bi-moon-fill text-6xl"></i>
|
||||
<p className="ml-2 text-2xl">Dark</p>
|
||||
|
||||
{/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
|
||||
<p className="ml-2 text-2xl">{t("dark")}</p>
|
||||
</div>
|
||||
<div
|
||||
className={`w-full text-center outline-solid outline-neutral-content outline dark:outline-neutral-700 h-36 duration-100 rounded-md flex items-center justify-center cursor-pointer select-none bg-white ${
|
||||
|
|
@ -108,35 +108,30 @@ export default function Appearance() {
|
|||
onClick={() => updateSettings({ theme: "light" })}
|
||||
>
|
||||
<i className="bi-sun-fill text-6xl"></i>
|
||||
<p className="ml-2 text-2xl">Light</p>
|
||||
{/* <hr className="my-3 outline-1 outline-neutral-content dark:outline-neutral-700" /> */}
|
||||
<p className="ml-2 text-2xl">{t("light")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="capitalize text-3xl font-thin inline">
|
||||
Archive Settings
|
||||
{t("archive_settings")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-3"></div>
|
||||
|
||||
<p>Formats to Archive/Preserve webpages:</p>
|
||||
<p>{t("formats_to_archive")}</p>
|
||||
<div className="p-3">
|
||||
<Checkbox
|
||||
label="Screenshot"
|
||||
label={t("screenshot")}
|
||||
state={archiveAsScreenshot}
|
||||
onClick={() => setArchiveAsScreenshot(!archiveAsScreenshot)}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
label="PDF"
|
||||
label={t("pdf")}
|
||||
state={archiveAsPDF}
|
||||
onClick={() => setArchiveAsPDF(!archiveAsPDF)}
|
||||
/>
|
||||
|
||||
<Checkbox
|
||||
label="Archive.org Snapshot"
|
||||
label={t("archive_org_snapshot")}
|
||||
state={archiveAsWaybackMachine}
|
||||
onClick={() =>
|
||||
setArchiveAsWaybackMachine(!archiveAsWaybackMachine)
|
||||
|
|
@ -146,18 +141,18 @@ export default function Appearance() {
|
|||
</div>
|
||||
|
||||
<div>
|
||||
<p className="capitalize text-3xl font-thin inline">Link Settings</p>
|
||||
|
||||
<p className="capitalize text-3xl font-thin inline">
|
||||
{t("link_settings")}
|
||||
</p>
|
||||
<div className="divider my-3"></div>
|
||||
<div className="mb-3">
|
||||
<Checkbox
|
||||
label="Prevent duplicate links"
|
||||
label={t("prevent_duplicate_links")}
|
||||
state={preventDuplicateLinks}
|
||||
onClick={() => setPreventDuplicateLinks(!preventDuplicateLinks)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p>Clicking on Links should:</p>
|
||||
<p>{t("clicking_on_links_should")}</p>
|
||||
<div className="p-3">
|
||||
<label
|
||||
className="label cursor-pointer flex gap-2 justify-start w-fit"
|
||||
|
|
@ -172,7 +167,7 @@ export default function Appearance() {
|
|||
checked={linksRouteTo === LinksRouteTo.ORIGINAL}
|
||||
onChange={() => setLinksRouteTo(LinksRouteTo.ORIGINAL)}
|
||||
/>
|
||||
<span className="label-text">Open the original content</span>
|
||||
<span className="label-text">{t("open_original_content")}</span>
|
||||
</label>
|
||||
|
||||
<label
|
||||
|
|
@ -188,7 +183,7 @@ export default function Appearance() {
|
|||
checked={linksRouteTo === LinksRouteTo.PDF}
|
||||
onChange={() => setLinksRouteTo(LinksRouteTo.PDF)}
|
||||
/>
|
||||
<span className="label-text">Open PDF, if available</span>
|
||||
<span className="label-text">{t("open_pdf_if_available")}</span>
|
||||
</label>
|
||||
|
||||
<label
|
||||
|
|
@ -204,7 +199,9 @@ export default function Appearance() {
|
|||
checked={linksRouteTo === LinksRouteTo.READABLE}
|
||||
onChange={() => setLinksRouteTo(LinksRouteTo.READABLE)}
|
||||
/>
|
||||
<span className="label-text">Open Readable, if available</span>
|
||||
<span className="label-text">
|
||||
{t("open_readable_if_available")}
|
||||
</span>
|
||||
</label>
|
||||
|
||||
<label
|
||||
|
|
@ -220,7 +217,9 @@ export default function Appearance() {
|
|||
checked={linksRouteTo === LinksRouteTo.SCREENSHOT}
|
||||
onChange={() => setLinksRouteTo(LinksRouteTo.SCREENSHOT)}
|
||||
/>
|
||||
<span className="label-text">Open Screenshot, if available</span>
|
||||
<span className="label-text">
|
||||
{t("open_screenshot_if_available")}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -228,10 +227,12 @@ export default function Appearance() {
|
|||
<SubmitButton
|
||||
onClick={submit}
|
||||
loading={submitLoader}
|
||||
label="Save Changes"
|
||||
label={t("save_changes")}
|
||||
className="mt-2 w-full sm:w-fit"
|
||||
/>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -1,12 +1,18 @@
|
|||
import { signOut, useSession } from "next-auth/react";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useRouter } from "next/router";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import { Plan } from "@/types/global";
|
||||
import AccentSubmitButton from "@/components/ui/Button";
|
||||
import Button from "@/components/ui/Button";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import { Trans, useTranslation } from "next-i18next";
|
||||
import useAccountStore from "@/store/account";
|
||||
|
||||
const stripeEnabled = process.env.NEXT_PUBLIC_STRIPE === "true";
|
||||
|
||||
export default function Subscribe() {
|
||||
const { t } = useTranslation();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
const session = useSession();
|
||||
|
||||
|
|
@ -14,10 +20,21 @@ export default function Subscribe() {
|
|||
|
||||
const router = useRouter();
|
||||
|
||||
const { account } = useAccountStore();
|
||||
|
||||
useEffect(() => {
|
||||
const hasInactiveSubscription =
|
||||
account.id && !account.subscription?.active && stripeEnabled;
|
||||
|
||||
if (session.status === "authenticated" && !hasInactiveSubscription) {
|
||||
router.push("/dashboard");
|
||||
}
|
||||
}, [session.status]);
|
||||
|
||||
async function submit() {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const redirectionToast = toast.loading("Redirecting to Stripe...");
|
||||
const redirectionToast = toast.loading(t("redirecting_to_stripe"));
|
||||
|
||||
const res = await fetch("/api/v1/payment?plan=" + plan);
|
||||
const data = await res.json();
|
||||
|
|
@ -33,18 +50,23 @@ export default function Subscribe() {
|
|||
>
|
||||
<div className="p-4 mx-auto flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
|
||||
<p className="sm:text-3xl text-2xl text-center font-extralight">
|
||||
Subscribe to Linkwarden!
|
||||
{t("subscribe_title")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-0"></div>
|
||||
|
||||
<div>
|
||||
<p>
|
||||
You will be redirected to Stripe, feel free to reach out to us at{" "}
|
||||
<a className="font-semibold" href="mailto:support@linkwarden.app">
|
||||
support@linkwarden.app
|
||||
</a>{" "}
|
||||
in case of any issue.
|
||||
<Trans
|
||||
i18nKey="subscribe_desc"
|
||||
components={[
|
||||
<a
|
||||
className="font-semibold"
|
||||
href="mailto:support@linkwarden.app"
|
||||
key={0}
|
||||
/>,
|
||||
]}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -57,7 +79,7 @@ export default function Subscribe() {
|
|||
: "hover:opacity-80"
|
||||
}`}
|
||||
>
|
||||
<p>Monthly</p>
|
||||
<p>{t("monthly")}</p>
|
||||
</button>
|
||||
|
||||
<button
|
||||
|
|
@ -68,10 +90,12 @@ export default function Subscribe() {
|
|||
: "hover:opacity-80"
|
||||
}`}
|
||||
>
|
||||
<p>Yearly</p>
|
||||
<p>{t("yearly")}</p>
|
||||
</button>
|
||||
<div className="absolute -top-3 -right-4 px-1 bg-red-600 text-sm text-white rounded-md rotate-[22deg]">
|
||||
25% Off
|
||||
{t("discount_percent", {
|
||||
percent: 25,
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -81,38 +105,47 @@ export default function Subscribe() {
|
|||
<span className="text-base text-neutral">/mo</span>
|
||||
</p>
|
||||
<p className="font-semibold">
|
||||
Billed {plan === Plan.monthly ? "Monthly" : "Yearly"}
|
||||
{plan === Plan.monthly ? t("billed_monthly") : t("billed_yearly")}
|
||||
</p>
|
||||
<fieldset className="w-full flex-col flex justify-evenly px-4 pb-4 pt-1 rounded-md border border-neutral-content">
|
||||
<legend className="w-fit font-extralight px-2 border border-neutral-content rounded-md text-xl">
|
||||
Total
|
||||
{t("total")}
|
||||
</legend>
|
||||
|
||||
<p className="text-sm">
|
||||
{process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS}-day free trial, then $
|
||||
{plan === Plan.monthly ? "4 per month" : "36 annually"}
|
||||
{plan === Plan.monthly
|
||||
? t("total_monthly_desc", {
|
||||
count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS),
|
||||
monthlyPrice: "4",
|
||||
})
|
||||
: t("total_annual_desc", {
|
||||
count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS),
|
||||
annualPrice: "36",
|
||||
})}
|
||||
</p>
|
||||
<p className="text-sm">+ VAT if applicable</p>
|
||||
<p className="text-sm">{t("plus_tax")}</p>
|
||||
</fieldset>
|
||||
</div>
|
||||
|
||||
<AccentSubmitButton
|
||||
<Button
|
||||
type="button"
|
||||
intent="accent"
|
||||
size="full"
|
||||
onClick={submit}
|
||||
loading={submitLoader}
|
||||
>
|
||||
Complete Subscription!
|
||||
</AccentSubmitButton>
|
||||
{t("complete_subscription")}
|
||||
</Button>
|
||||
|
||||
<div
|
||||
onClick={() => signOut()}
|
||||
className="w-fit mx-auto cursor-pointer text-neutral font-semibold "
|
||||
>
|
||||
Sign Out
|
||||
{t("sign_out")}
|
||||
</div>
|
||||
</div>
|
||||
</CenteredForm>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
import useLinkStore from "@/store/links";
|
||||
import { useRouter } from "next/router";
|
||||
import { FormEvent, use, useEffect, useState } from "react";
|
||||
import { FormEvent, useEffect, useState } from "react";
|
||||
import MainLayout from "@/layouts/MainLayout";
|
||||
import useTagStore from "@/store/tags";
|
||||
import SortDropdown from "@/components/SortDropdown";
|
||||
import { Sort, TagIncludingLinkCount, ViewMode } from "@/types/global";
|
||||
import useLinks from "@/hooks/useLinks";
|
||||
import { toast } from "react-hot-toast";
|
||||
import ViewDropdown from "@/components/ViewDropdown";
|
||||
import CardView from "@/components/LinkViews/Layouts/CardView";
|
||||
import ListView from "@/components/LinkViews/Layouts/ListView";
|
||||
import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import BulkDeleteLinksModal from "@/components/ModalContent/BulkDeleteLinksModal";
|
||||
import BulkEditLinksModal from "@/components/ModalContent/BulkEditLinksModal";
|
||||
import useCollectivePermissions from "@/hooks/useCollectivePermissions";
|
||||
import MasonryView from "@/components/LinkViews/Layouts/MasonryView";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
import LinkListOptions from "@/components/LinkListOptions";
|
||||
|
||||
export default function Index() {
|
||||
const { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
|
||||
const { links, selectedLinks, deleteLinksById, setSelectedLinks } =
|
||||
useLinkStore();
|
||||
const { links } = useLinkStore();
|
||||
const { tags, updateTag, removeTag } = useTagStore();
|
||||
|
||||
const [sortBy, setSortBy] = useState<Sort>(Sort.DateNewestFirst);
|
||||
|
|
@ -38,10 +38,6 @@ export default function Index() {
|
|||
if (editMode) return setEditMode(false);
|
||||
}, [router]);
|
||||
|
||||
const collectivePermissions = useCollectivePermissions(
|
||||
selectedLinks.map((link) => link.collectionId as number)
|
||||
);
|
||||
|
||||
useLinks({ tagId: Number(router.query.id), sort: sortBy });
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -76,7 +72,7 @@ export default function Index() {
|
|||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
const load = toast.loading(t("applying_changes"));
|
||||
|
||||
let response;
|
||||
|
||||
|
|
@ -89,7 +85,7 @@ export default function Index() {
|
|||
toast.dismiss(load);
|
||||
|
||||
if (response?.ok) {
|
||||
toast.success("Tag Renamed!");
|
||||
toast.success(t("tag_renamed"));
|
||||
} else toast.error(response?.data as string);
|
||||
setSubmitLoader(false);
|
||||
setRenameTag(false);
|
||||
|
|
@ -98,7 +94,7 @@ export default function Index() {
|
|||
const remove = async () => {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
const load = toast.loading(t("applying_changes"));
|
||||
|
||||
let response;
|
||||
|
||||
|
|
@ -107,42 +103,13 @@ export default function Index() {
|
|||
toast.dismiss(load);
|
||||
|
||||
if (response?.ok) {
|
||||
toast.success("Tag Removed.");
|
||||
toast.success(t("tag_deleted"));
|
||||
router.push("/links");
|
||||
} else toast.error(response?.data as string);
|
||||
setSubmitLoader(false);
|
||||
setRenameTag(false);
|
||||
};
|
||||
|
||||
const handleSelectAll = () => {
|
||||
if (selectedLinks.length === links.length) {
|
||||
setSelectedLinks([]);
|
||||
} else {
|
||||
setSelectedLinks(links.map((link) => link));
|
||||
}
|
||||
};
|
||||
|
||||
const bulkDeleteLinks = async () => {
|
||||
const load = toast.loading(
|
||||
`Deleting ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}...`
|
||||
);
|
||||
|
||||
const response = await deleteLinksById(
|
||||
selectedLinks.map((link) => link.id as number)
|
||||
);
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
response.ok &&
|
||||
toast.success(
|
||||
`Deleted ${selectedLinks.length} Link${
|
||||
selectedLinks.length > 1 ? "s" : ""
|
||||
}!`
|
||||
);
|
||||
};
|
||||
|
||||
const [viewMode, setViewMode] = useState<string>(
|
||||
localStorage.getItem("viewMode") || ViewMode.Card
|
||||
);
|
||||
|
|
@ -159,7 +126,15 @@ export default function Index() {
|
|||
return (
|
||||
<MainLayout>
|
||||
<div className="p-5 flex flex-col gap-5 w-full">
|
||||
<div className="flex gap-3 items-center justify-between">
|
||||
<LinkListOptions
|
||||
t={t}
|
||||
viewMode={viewMode}
|
||||
setViewMode={setViewMode}
|
||||
sortBy={sortBy}
|
||||
setSortBy={setSortBy}
|
||||
editMode={editMode}
|
||||
setEditMode={setEditMode}
|
||||
>
|
||||
<div className="flex gap-3 items-center">
|
||||
<div className="flex gap-2 items-center font-thin">
|
||||
<i className={"bi-hash text-primary text-3xl"} />
|
||||
|
|
@ -223,7 +198,7 @@ export default function Index() {
|
|||
setRenameTag(true);
|
||||
}}
|
||||
>
|
||||
Rename Tag
|
||||
{t("rename_tag")}
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -235,7 +210,7 @@ export default function Index() {
|
|||
remove();
|
||||
}}
|
||||
>
|
||||
Remove Tag
|
||||
{t("delete_tag")}
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -245,83 +220,8 @@ export default function Index() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</LinkListOptions>
|
||||
|
||||
<div className="flex gap-2 items-center mt-2">
|
||||
<div
|
||||
role="button"
|
||||
onClick={() => {
|
||||
setEditMode(!editMode);
|
||||
setSelectedLinks([]);
|
||||
}}
|
||||
className={`btn btn-square btn-sm btn-ghost ${
|
||||
editMode
|
||||
? "bg-primary/20 hover:bg-primary/20"
|
||||
: "hover:bg-neutral/20"
|
||||
}`}
|
||||
>
|
||||
<i className="bi-pencil-fill text-neutral text-xl"></i>
|
||||
</div>
|
||||
<SortDropdown sortBy={sortBy} setSort={setSortBy} />
|
||||
<ViewDropdown viewMode={viewMode} setViewMode={setViewMode} />
|
||||
</div>
|
||||
</div>
|
||||
{editMode && links.length > 0 && (
|
||||
<div className="w-full flex justify-between items-center min-h-[32px]">
|
||||
{links.length > 0 && (
|
||||
<div className="flex gap-3 ml-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
className="checkbox checkbox-primary"
|
||||
onChange={() => handleSelectAll()}
|
||||
checked={
|
||||
selectedLinks.length === links.length && links.length > 0
|
||||
}
|
||||
/>
|
||||
{selectedLinks.length > 0 ? (
|
||||
<span>
|
||||
{selectedLinks.length}{" "}
|
||||
{selectedLinks.length === 1 ? "link" : "links"} selected
|
||||
</span>
|
||||
) : (
|
||||
<span>Nothing selected</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<div className="flex gap-3">
|
||||
<button
|
||||
onClick={() => setBulkEditLinksModal(true)}
|
||||
className="btn btn-sm btn-accent text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(
|
||||
collectivePermissions === true ||
|
||||
collectivePermissions?.canUpdate
|
||||
)
|
||||
}
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
(document?.activeElement as HTMLElement)?.blur();
|
||||
e.shiftKey
|
||||
? bulkDeleteLinks()
|
||||
: setBulkDeleteLinksModal(true);
|
||||
}}
|
||||
className="btn btn-sm bg-red-500 hover:bg-red-400 text-white w-fit ml-auto"
|
||||
disabled={
|
||||
selectedLinks.length === 0 ||
|
||||
!(
|
||||
collectivePermissions === true ||
|
||||
collectivePermissions?.canDelete
|
||||
)
|
||||
}
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<LinkComponent
|
||||
editMode={editMode}
|
||||
links={links.filter((e) =>
|
||||
|
|
@ -346,3 +246,5 @@ export default function Index() {
|
|||
</MainLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
-- AlterTable
|
||||
ALTER TABLE "User" ADD COLUMN "locale" TEXT NOT NULL DEFAULT 'en';
|
||||
|
|
@ -33,13 +33,14 @@ model User {
|
|||
emailVerified DateTime?
|
||||
unverifiedNewEmail String?
|
||||
image String?
|
||||
accounts Account[]
|
||||
password String?
|
||||
locale String @default("en")
|
||||
accounts Account[]
|
||||
collections Collection[]
|
||||
tags Tag[]
|
||||
pinnedLinks Link[]
|
||||
collectionsJoined UsersAndCollections[]
|
||||
collectionOrder Int[] @default([])
|
||||
collectionOrder Int[] @default([])
|
||||
whitelistedUsers WhitelistedUser[]
|
||||
accessTokens AccessToken[]
|
||||
subscriptions Subscription?
|
||||
|
|
|
|||
|
|
@ -0,0 +1,363 @@
|
|||
{
|
||||
"user_administration": "User Administration",
|
||||
"search_users": "Search for Users",
|
||||
"no_users_found": "No users found.",
|
||||
"no_user_found_in_search": "No users found with the given search query.",
|
||||
"username": "Username",
|
||||
"email": "Email",
|
||||
"subscribed": "Subscribed",
|
||||
"created_at": "Created At",
|
||||
"not_available": "N/A",
|
||||
"check_your_email": "Please check your Email",
|
||||
"authenticating": "Authenticating...",
|
||||
"verification_email_sent": "Verification email sent.",
|
||||
"verification_email_sent_desc": "A sign in link has been sent to your email address. If you don't see the email, check your spam folder.",
|
||||
"resend_email": "Resend Email",
|
||||
"invalid_credentials": "Invalid credentials.",
|
||||
"fill_all_fields": "Please fill out all the fields.",
|
||||
"enter_credentials": "Enter your credentials",
|
||||
"username_or_email": "Username or Email",
|
||||
"password": "Password",
|
||||
"confirm_password": "Confirm Password",
|
||||
"forgot_password": "Forgot Password?",
|
||||
"login": "Login",
|
||||
"or_continue_with": "Or continue with",
|
||||
"new_here": "New here?",
|
||||
"sign_up": "Sign Up",
|
||||
"sign_in_to_your_account": "Sign in to your account",
|
||||
"dashboard_desc": "A brief overview of your data",
|
||||
"link": "Link",
|
||||
"links": "Links",
|
||||
"collection": "Collection",
|
||||
"collections": "Collections",
|
||||
"tag": "Tag",
|
||||
"tags": "Tags",
|
||||
"recent": "Recent",
|
||||
"recent_links_desc": "Recently added Links",
|
||||
"view_all": "View All",
|
||||
"view_added_links_here": "View Your Recently Added Links Here!",
|
||||
"view_added_links_here_desc": "This section will view your latest added Links across every Collections you have access to.",
|
||||
"add_link": "Add New Link",
|
||||
"import_links": "Import Links",
|
||||
"from_linkwarden": "From Linkwarden",
|
||||
"from_html": "From Bookmarks HTML file",
|
||||
"from_wallabag": "From Wallabag (JSON file)",
|
||||
"pinned": "Pinned",
|
||||
"pinned_links_desc": "Your pinned Links",
|
||||
"pin_favorite_links_here": "Pin Your Favorite Links Here!",
|
||||
"pin_favorite_links_here_desc": "You can Pin your favorite Links by clicking on the three dots on each Link and clicking Pin to Dashboard.",
|
||||
"sending_password_link": "Sending password recovery link...",
|
||||
"password_email_prompt": "Enter your email so we can send you a link to create a new password.",
|
||||
"send_reset_link": "Send Reset Link",
|
||||
"reset_email_sent_desc": "Check your email for a link to reset your password. If it doesn’t appear within a few minutes, check your spam folder.",
|
||||
"back_to_login": "Back to Login",
|
||||
"email_sent": "Email Sent!",
|
||||
"passwords_mismatch": "Passwords do not match.",
|
||||
"password_too_short": "Passwords must be at least 8 characters.",
|
||||
"creating_account": "Creating Account...",
|
||||
"account_created": "Account Created!",
|
||||
"trial_offer_desc": "Unlock {{count}} days of Premium Service at no cost!",
|
||||
"register_desc": "Create a new account",
|
||||
"registration_disabled_desc": "Registration is disabled for this instance, please contact the admin in case of any issues.",
|
||||
"enter_details": "Enter your details",
|
||||
"display_name": "Display Name",
|
||||
"sign_up_agreement": "By signing up, you agree to our <0>Terms of Service</0> and <1>Privacy Policy</1>.",
|
||||
"need_help": "Need help?",
|
||||
"get_in_touch": "Get in touch",
|
||||
"already_registered": "Already have an account?",
|
||||
"deleting_selections": "Deleting selections...",
|
||||
"links_deleted": "{{count}} Links deleted.",
|
||||
"link_deleted": "1 Link deleted.",
|
||||
"links_selected": "{{count}} Links selected",
|
||||
"link_selected": "1 Link selected",
|
||||
"nothing_selected": "Nothing selected",
|
||||
"edit": "Edit",
|
||||
"delete": "Delete",
|
||||
"nothing_found": "Nothing found.",
|
||||
"redirecting_to_stripe": "Redirecting to Stripe...",
|
||||
"subscribe_title": "Subscribe to Linkwarden!",
|
||||
"subscribe_desc": "You will be redirected to Stripe, feel free to reach out to us at <0>support@linkwarden.app</0> in case of any issue.",
|
||||
"monthly": "Monthly",
|
||||
"yearly": "Yearly",
|
||||
"discount_percent": "{{percent}}% Off",
|
||||
"billed_monthly": "Billed Monthly",
|
||||
"billed_yearly": "Billed Yearly",
|
||||
"total": "Total",
|
||||
"total_annual_desc": "{{count}}-day free trial, then ${{annualPrice}} annually",
|
||||
"total_monthly_desc": "{{count}}-day free trial, then ${{monthlyPrice}} per month",
|
||||
"plus_tax": "+ VAT if applicable",
|
||||
"complete_subscription": "Complete Subscription",
|
||||
"sign_out": "Sign Out",
|
||||
"access_tokens": "Access Tokens",
|
||||
"access_tokens_description": "Access Tokens can be used to access Linkwarden from other apps and services without giving away your Username and Password.",
|
||||
"new_token": "New Access Token",
|
||||
"name": "Name",
|
||||
"created": "Created!",
|
||||
"expires": "Expires",
|
||||
"accountSettings": "Account Settings",
|
||||
"language": "Language",
|
||||
"profile_photo": "Profile Photo",
|
||||
"upload_new_photo": "Upload a new photo...",
|
||||
"remove_photo": "Remove Photo",
|
||||
"make_profile_private": "Make profile private",
|
||||
"profile_privacy_info": "This will limit who can find and add you to new Collections.",
|
||||
"whitelisted_users": "Whitelisted Users",
|
||||
"whitelisted_users_info": "Please provide the Username of the users you wish to grant visibility to your profile. Separated by comma.",
|
||||
"whitelisted_users_placeholder": "Your profile is hidden from everyone right now...",
|
||||
"save_changes": "Save Changes",
|
||||
"import_export": "Import & Export",
|
||||
"import_data": "Import your data from other platforms.",
|
||||
"download_data": "Download your data instantly.",
|
||||
"export_data": "Export Data",
|
||||
"delete_account": "Delete Account",
|
||||
"delete_account_warning": "This will permanently delete ALL the Links, Collections, Tags, and archived data you own.",
|
||||
"cancel_subscription_notice": "It will also cancel your subscription.",
|
||||
"account_deletion_page": "Account deletion page",
|
||||
"applying_settings": "Applying settings...",
|
||||
"settings_applied": "Settings Applied!",
|
||||
"email_change_request": "Email change request sent. Please verify the new email address.",
|
||||
"image_upload_size_error": "Please select a PNG or JPEG file that's less than 1MB.",
|
||||
"image_upload_format_error": "Invalid file format.",
|
||||
"importing_bookmarks": "Importing bookmarks...",
|
||||
"import_success": "Imported the bookmarks! Reloading the page...",
|
||||
"more_coming_soon": "More coming soon!",
|
||||
"billing_settings": "Billing Settings",
|
||||
"manage_subscription_intro": "To manage/cancel your subscription, visit the",
|
||||
"billing_portal": "Billing Portal",
|
||||
"help_contact_intro": "If you still need help or encountered any issues, feel free to reach out to us at:",
|
||||
"fill_required_fields": "Please fill the required fields.",
|
||||
"deleting_message": "Deleting everything, please wait...",
|
||||
"delete_warning": "This will permanently delete all the Links, Collections, Tags, and archived data you own. It will also log you out. This action is irreversible!",
|
||||
"optional": "Optional",
|
||||
"feedback_help": "(but it really helps us improve!)",
|
||||
"reason_for_cancellation": "Reason for cancellation",
|
||||
"please_specify": "Please specify",
|
||||
"customer_service": "Customer Service",
|
||||
"low_quality": "Low Quality",
|
||||
"missing_features": "Missing Features",
|
||||
"switched_service": "Switched Service",
|
||||
"too_complex": "Too Complex",
|
||||
"too_expensive": "Too Expensive",
|
||||
"unused": "Unused",
|
||||
"other": "Other",
|
||||
"more_information": "More information (the more details, the more helpful it'd be)",
|
||||
"feedback_placeholder": "e.g. I needed a feature that...",
|
||||
"delete_your_account": "Delete Your Account",
|
||||
"change_password": "Change Password",
|
||||
"password_length_error": "Passwords must be at least 8 characters.",
|
||||
"applying_changes": "Applying...",
|
||||
"password_change_instructions": "To change your password, please fill out the following. Your password should be at least 8 characters.",
|
||||
"old_password": "Old Password",
|
||||
"new_password": "New Password",
|
||||
"preference": "Preference",
|
||||
"select_theme": "Select Theme",
|
||||
"dark": "Dark",
|
||||
"light": "Light",
|
||||
"archive_settings": "Archive Settings",
|
||||
"formats_to_archive": "Formats to Archive/Preserve webpages:",
|
||||
"screenshot": "Screenshot",
|
||||
"pdf": "PDF",
|
||||
"archive_org_snapshot": "Archive.org Snapshot",
|
||||
"link_settings": "Link Settings",
|
||||
"prevent_duplicate_links": "Prevent duplicate links",
|
||||
"clicking_on_links_should": "Clicking on Links should:",
|
||||
"open_original_content": "Open the original content",
|
||||
"open_pdf_if_available": "Open PDF, if available",
|
||||
"open_readable_if_available": "Open Readable, if available",
|
||||
"open_screenshot_if_available": "Open Screenshot, if available",
|
||||
"tag_renamed": "Tag renamed!",
|
||||
"tag_deleted": "Tag deleted!",
|
||||
"rename_tag": "Rename Tag",
|
||||
"delete_tag": "Delete Tag",
|
||||
"list_created_with_linkwarden": "List created with Linkwarden",
|
||||
"by_author": "By {{author}}.",
|
||||
"by_author_and_other": "By {{author}} and {{count}} other.",
|
||||
"by_author_and_others": "By {{author}} and {{count}} others.",
|
||||
"search_count_link": "Search {{count}} Link",
|
||||
"search_count_links": "Search {{count}} Links",
|
||||
"collection_is_empty": "This Collection is empty...",
|
||||
"all_links": "All Links",
|
||||
"all_links_desc": "Links from every Collection",
|
||||
"you_have_not_added_any_links": "You Haven't Created Any Links Yet",
|
||||
"collections_you_own": "Collections you own",
|
||||
"new_collection": "New Collection",
|
||||
"other_collections": "Other Collections",
|
||||
"other_collections_desc": "Shared collections you're a member of",
|
||||
"showing_count_results": "Showing {{count}} results",
|
||||
"showing_count_result": "Showing {{count}} result",
|
||||
"edit_collection_info": "Edit Collection Info",
|
||||
"share_and_collaborate": "Share and Collaborate",
|
||||
"view_team": "View Team",
|
||||
"team": "Team",
|
||||
"create_subcollection": "Create Sub-Collection",
|
||||
"delete_collection": "Delete Collection",
|
||||
"leave_collection": "Leave Collection",
|
||||
"email_verified_signing_out": "Email verified. Signing out...",
|
||||
"invalid_token": "Invalid token.",
|
||||
"sending_password_recovery_link": "Sending password recovery link...",
|
||||
"please_fill_all_fields": "Please fill out all the fields.",
|
||||
"password_updated": "Password Updated!",
|
||||
"reset_password": "Reset Password",
|
||||
"enter_email_for_new_password": "Enter your email so we can send you a link to create a new password.",
|
||||
"update_password": "Update Password",
|
||||
"password_successfully_updated": "Your password has been successfully updated.",
|
||||
"user_already_member": "User already exists.",
|
||||
"you_are_already_collection_owner": "You are already the collection owner.",
|
||||
"date_newest_first": "Date (Newest First)",
|
||||
"date_oldest_first": "Date (Oldest First)",
|
||||
"name_az": "Name (A-Z)",
|
||||
"name_za": "Name (Z-A)",
|
||||
"description_az": "Description (A-Z)",
|
||||
"description_za": "Description (Z-A)",
|
||||
"all_rights_reserved": "© {{date}} <0>Linkwarden</0>. All rights reserved.",
|
||||
"you_have_no_collections": "You have no Collections...",
|
||||
"you_have_no_tags": "You have no Tags...",
|
||||
"cant_change_collection_you_dont_own": "You can't make changes to a collection you don't own.",
|
||||
"account": "Account",
|
||||
"billing": "Billing",
|
||||
"linkwarden_version": "Linkwarden {{version}}",
|
||||
"help": "Help",
|
||||
"github": "GitHub",
|
||||
"twitter": "Twitter",
|
||||
"mastodon": "Mastodon",
|
||||
"link_preservation_in_queue": "LThe Link preservation is currently in the queue",
|
||||
"check_back_later": "Please check back later to see the result",
|
||||
"settings": "Settings",
|
||||
"switch_to": "Switch to {{theme}}",
|
||||
"logout": "Logout",
|
||||
"start_journey": "Start your journey by creating a new Link!",
|
||||
"create_new_link": "Create New Link",
|
||||
"new_link": "New Link",
|
||||
"create_new": "Create New...",
|
||||
"pwa_install_prompt": "Install Linkwarden to your home screen for a faster access and enhanced experience. <0>Learn more</0>",
|
||||
"full_content": "Full Content",
|
||||
"slower": "Slower",
|
||||
"new_version_announcement": "See what's new in <0>Linkwarden {{version}}!</0>",
|
||||
"creating": "Creating...",
|
||||
"upload_file": "Upload File",
|
||||
"file": "File",
|
||||
"file_types": "PDF, PNG, JPG (Up to {{size}} MB)",
|
||||
"description": "Description",
|
||||
"auto_generated": "Will be auto generated if nothing is provided.",
|
||||
"example_link": "e.g. Example Link",
|
||||
"hide": "Hide",
|
||||
"more": "More",
|
||||
"options": "Options",
|
||||
"description_placeholder": "Notes, thoughts, etc.",
|
||||
"deleting": "Deleting...",
|
||||
"token_revoked": "Token Revoked.",
|
||||
"revoke_token": "Revoke Token",
|
||||
"revoke_confirmation": "Are you sure you want to revoke this Access Token? Any apps or services using this token will no longer be able to access Linkwarden using it.",
|
||||
"revoke": "Revoke",
|
||||
"sending_request": "Sending request...",
|
||||
"link_being_archived": "Link is being archived...",
|
||||
"preserved_formats": "Preserved Formats",
|
||||
"available_formats": "The following formats are available for this link:",
|
||||
"readable": "Readable",
|
||||
"preservation_in_queue": "Link preservation is in the queue",
|
||||
"view_latest_snapshot": "View latest snapshot on archive.org",
|
||||
"refresh_preserved_formats": "Refresh Preserved Formats",
|
||||
"this_deletes_current_preservations": "This deletes the current preservations",
|
||||
"create_new_user": "Create New User",
|
||||
"placeholder_johnny": "Johnny",
|
||||
"placeholder_email": "johnny@example.com",
|
||||
"placeholder_john": "john",
|
||||
"user_created": "User Created!",
|
||||
"fill_all_fields_error": "Please fill out all the fields.",
|
||||
"password_change_note": "<0>Note:</0> Please make sure you inform the user that they need to change their password.",
|
||||
"create_user": "Create User",
|
||||
"creating_token": "Creating Token...",
|
||||
"token_created": "Token Created!",
|
||||
"access_token_created": "Access Token Created",
|
||||
"token_creation_notice": "Your new token has been created. Please copy it and store it somewhere safe. You will not be able to see it again.",
|
||||
"copied_to_clipboard": "Copied to clipboard!",
|
||||
"copy_to_clipboard": "Copy to Clipboard",
|
||||
"create_access_token": "Create an Access Token",
|
||||
"expires_in": "Expires in",
|
||||
"token_name_placeholder": "e.g. For the iOS shortcut",
|
||||
"create_token": "Create Access Token",
|
||||
"7_days": "7 Days",
|
||||
"30_days": "30 Days",
|
||||
"60_days": "60 Days",
|
||||
"90_days": "90 Days",
|
||||
"no_expiration": "No Expiration",
|
||||
"creating_link": "Creating link...",
|
||||
"link_created": "Link created!",
|
||||
"link_name_placeholder": "Will be auto generated if left empty.",
|
||||
"link_url_placeholder": "e.g. http://example.com/",
|
||||
"link_description_placeholder": "Notes, thoughts, etc.",
|
||||
"more_options": "More Options",
|
||||
"hide_options": "Hide Options",
|
||||
"create_link": "Create Link",
|
||||
"new_sub_collection": "New Sub-Collection",
|
||||
"for_collection": "For {{name}}",
|
||||
"create_new_collection": "Create a New Collection",
|
||||
"color": "Color",
|
||||
"reset": "Reset",
|
||||
"collection_name_placeholder": "e.g. Example Collection",
|
||||
"collection_description_placeholder": "The purpose of this Collection...",
|
||||
"create_collection_button": "Create Collection",
|
||||
"password_change_warning": "Please confirm your password before changing your email address.",
|
||||
"stripe_update_note": " Updating this field will change your billing email on Stripe as well.",
|
||||
"sso_will_be_removed_warning": "If you change your email address, any existing {{service}} SSO connections will be removed.",
|
||||
"old_email": "Old Email",
|
||||
"new_email": "New Email",
|
||||
"confirm": "Confirm",
|
||||
"edit_link": "Edit Link",
|
||||
"updating": "Updating...",
|
||||
"updated": "Updated!",
|
||||
"placeholder_example_link": "e.g. Example Link",
|
||||
"make_collection_public": "Make Collection Public",
|
||||
"make_collection_public_checkbox": "Make this a public collection",
|
||||
"make_collection_public_desc": "This will allow anyone to view this collection and it's users.",
|
||||
"sharable_link_guide": "Sharable Link (Click to copy)",
|
||||
"copied": "Copied!",
|
||||
"members": "Members",
|
||||
"members_username_placeholder": "Username (without the '@')",
|
||||
"owner": "Owner",
|
||||
"admin": "Admin",
|
||||
"contributor": "Contributor",
|
||||
"viewer": "Viewer",
|
||||
"viewer_desc": "Read-only access",
|
||||
"contributor_desc": "Can view and create Links",
|
||||
"admin_desc": "Full access to all Links",
|
||||
"remove_member": "Remove Member",
|
||||
"placeholder_example_collection": "e.g. Example Collection",
|
||||
"placeholder_collection_purpose": "The purpose of this Collection...",
|
||||
"deleting_user": "Deleting...",
|
||||
"user_deleted": "User Deleted.",
|
||||
"delete_user": "Delete User",
|
||||
"confirm_user_deletion": "Are you sure you want to remove this user?",
|
||||
"irreversible_action_warning": "This action is irreversible!",
|
||||
"delete_confirmation": "Delete, I know what I'm doing",
|
||||
"delete_link": "Delete Link",
|
||||
"deleted": "Deleted.",
|
||||
"link_deletion_confirmation_message": "Are you sure you want to delete this Link?",
|
||||
"warning": "Warning",
|
||||
"irreversible_warning": "This action is irreversible!",
|
||||
"shift_key_tip": "Hold the Shift key while clicking 'Delete' to bypass this confirmation in the future.",
|
||||
"deleting_collection": "Deleting...",
|
||||
"collection_deleted": "Collection Deleted.",
|
||||
"confirm_deletion_prompt": "To confirm, type \"{{name}}\" in the box below:",
|
||||
"type_name_placeholder": "Type \"{{name}}\" Here.",
|
||||
"deletion_warning": "Deleting this collection will permanently erase all its contents, and it will become inaccessible to everyone, including members with previous access.",
|
||||
"leave_prompt": "Click the button below to leave the current collection.",
|
||||
"leave": "Leave",
|
||||
"edit_links": "Edit {{count}} Links",
|
||||
"move_to_collection": "Move to Collection",
|
||||
"add_tags": "Add Tags",
|
||||
"remove_previous_tags": "Remove previous tags",
|
||||
"delete_links": "Delete {{count}} Links",
|
||||
"links_deletion_confirmation_message": "Are you sure you want to delete {{count}} Links? ",
|
||||
"warning_irreversible": "Warning: This action is irreversible!",
|
||||
"shift_key_instruction": "Hold the 'Shift' key while clicking 'Delete' to bypass this confirmation in the future.",
|
||||
"link_selection_error": "You don't have permission to edit or delete this item.",
|
||||
"no_description": "No description provided.",
|
||||
"applying": "Applying...",
|
||||
"unpin": "Unpin",
|
||||
"pin_to_dashboard": "Pin to Dashboard",
|
||||
"show_link_details": "Show Link Details",
|
||||
"hide_link_details": "Hide Link Details",
|
||||
"link_pinned": "Link Pinned!",
|
||||
"link_unpinned": "Link Unpinned!"
|
||||
}
|
||||
57
yarn.lock
57
yarn.lock
|
|
@ -666,6 +666,13 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.14.0"
|
||||
|
||||
"@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9":
|
||||
version "7.24.6"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.6.tgz#5b76eb89ad45e2e4a0a8db54c456251469a3358e"
|
||||
integrity sha512-Ja18XcETdEl5mzzACGd+DKgaGJzPTCow7EglgwTmHdwokzDFYh/MHua6lU6DV/hjF2IaOJ4oX2nqnjG7RElKOw==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.14.0"
|
||||
|
||||
"@babel/runtime@^7.24.1":
|
||||
version "7.24.5"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.5.tgz#230946857c053a36ccc66e1dd03b17dd0c4ed02c"
|
||||
|
|
@ -1960,7 +1967,7 @@
|
|||
"@types/minimatch" "*"
|
||||
"@types/node" "*"
|
||||
|
||||
"@types/hoist-non-react-statics@^3.3.0":
|
||||
"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.4":
|
||||
version "3.3.5"
|
||||
resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz#dab7867ef789d87e2b4b0003c9d65c49cc44a494"
|
||||
integrity sha512-SbcrWzkKBw2cdwRTwQAswfpB9g9LJWfjtUeW/jvNwbhC8cpmmNYVePa+ncbUe0rGTQ7G3Ff6mYUN2VMfLVr+Sg==
|
||||
|
|
@ -2683,6 +2690,11 @@ core-js@^2.6.12:
|
|||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.12.tgz#d9333dfa7b065e347cc5682219d6f690859cc2ec"
|
||||
integrity sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==
|
||||
|
||||
core-js@^3:
|
||||
version "3.37.1"
|
||||
resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.37.1.tgz#d21751ddb756518ac5a00e4d66499df981a62db9"
|
||||
integrity sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==
|
||||
|
||||
core-util-is@1.0.2:
|
||||
version "1.0.2"
|
||||
resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
|
||||
|
|
@ -3833,6 +3845,13 @@ html-encoding-sniffer@^3.0.0:
|
|||
dependencies:
|
||||
whatwg-encoding "^2.0.0"
|
||||
|
||||
html-parse-stringify@^3.0.1:
|
||||
version "3.0.1"
|
||||
resolved "https://registry.yarnpkg.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz#dfc1017347ce9f77c8141a507f233040c59c55d2"
|
||||
integrity sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==
|
||||
dependencies:
|
||||
void-elements "3.1.0"
|
||||
|
||||
http-errors@1.7.3:
|
||||
version "1.7.3"
|
||||
resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
|
||||
|
|
@ -3870,6 +3889,18 @@ https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
|
|||
agent-base "6"
|
||||
debug "4"
|
||||
|
||||
i18next-fs-backend@^2.3.1:
|
||||
version "2.3.1"
|
||||
resolved "https://registry.yarnpkg.com/i18next-fs-backend/-/i18next-fs-backend-2.3.1.tgz#0c7d2459ff4a039e2b3228131809fbc0e74ff1a8"
|
||||
integrity sha512-tvfXskmG/9o+TJ5Fxu54sSO5OkY6d+uMn+K6JiUGLJrwxAVfer+8V3nU8jq3ts9Pe5lXJv4b1N7foIjJ8Iy2Gg==
|
||||
|
||||
i18next@^23.11.5:
|
||||
version "23.11.5"
|
||||
resolved "https://registry.yarnpkg.com/i18next/-/i18next-23.11.5.tgz#d71eb717a7e65498d87d0594f2664237f9e361ef"
|
||||
integrity sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.23.2"
|
||||
|
||||
iconv-lite@0.4.24:
|
||||
version "0.4.24"
|
||||
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
|
||||
|
|
@ -4569,6 +4600,17 @@ next-auth@^4.22.1:
|
|||
preact-render-to-string "^5.1.19"
|
||||
uuid "^8.3.2"
|
||||
|
||||
next-i18next@^15.3.0:
|
||||
version "15.3.0"
|
||||
resolved "https://registry.yarnpkg.com/next-i18next/-/next-i18next-15.3.0.tgz#b4530c80573854d00f95229af405e1e5beedbf18"
|
||||
integrity sha512-bq7Cc9XJFcmGOCLnyEtHaeJ3+JJNsI/8Pkj9BaHAnhm4sZ9vNNC4ZsaqYnlRZ7VH5ypSo73fEqLK935jLsmCvQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.23.2"
|
||||
"@types/hoist-non-react-statics" "^3.3.4"
|
||||
core-js "^3"
|
||||
hoist-non-react-statics "^3.3.2"
|
||||
i18next-fs-backend "^2.3.1"
|
||||
|
||||
next@13.4.12:
|
||||
version "13.4.12"
|
||||
resolved "https://registry.yarnpkg.com/next/-/next-13.4.12.tgz#809b21ea0aabbe88ced53252c88c4a5bd5af95df"
|
||||
|
|
@ -5195,6 +5237,14 @@ react-hot-toast@^2.4.1:
|
|||
dependencies:
|
||||
goober "^2.1.10"
|
||||
|
||||
react-i18next@^14.1.2:
|
||||
version "14.1.2"
|
||||
resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-14.1.2.tgz#cd57a755f25a32a5fcc3dbe546cf3cc62b4f3ebd"
|
||||
integrity sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.23.9"
|
||||
html-parse-stringify "^3.0.1"
|
||||
|
||||
react-image-file-resizer@^0.4.8:
|
||||
version "0.4.8"
|
||||
resolved "https://registry.yarnpkg.com/react-image-file-resizer/-/react-image-file-resizer-0.4.8.tgz#85f4ae4469fd2867d961568af660ef403d7a79af"
|
||||
|
|
@ -6176,6 +6226,11 @@ verror@1.10.0:
|
|||
core-util-is "1.0.2"
|
||||
extsprintf "^1.2.0"
|
||||
|
||||
void-elements@3.1.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-3.1.0.tgz#614f7fbf8d801f0bb5f0661f5b2f5785750e4f09"
|
||||
integrity sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==
|
||||
|
||||
w3c-xmlserializer@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz#aebdc84920d806222936e3cdce408e32488a3073"
|
||||
|
|
|
|||
Ŝarĝante…
Reference in New Issue