redesigned settings page [still WIP]
This commit is contained in:
daniel31x13
parent
f5eaee8dc0
commit
19467f243f
|
|
@ -12,7 +12,6 @@ import SubmitButton from "../../SubmitButton";
|
|||
import { toast } from "react-hot-toast";
|
||||
import Link from "next/link";
|
||||
import ClickAwayHandler from "@/components/ClickAwayHandler";
|
||||
import useInitialData from "@/hooks/useInitialData";
|
||||
|
||||
type Props = {
|
||||
toggleSettingsModal: Function;
|
||||
|
|
|
|||
|
|
@ -34,13 +34,13 @@ export default function SettingsSidebar({ className }: { className?: string }) {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`dark:bg-neutral-900 bg-white h-full w-64 xl:w-80 overflow-y-auto border-solid border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
|
||||
className={`dark:bg-neutral-900 bg-white h-full w-64 overflow-y-auto border-solid border-white border dark:border-neutral-900 border-r-sky-100 dark:border-r-neutral-700 p-5 z-20 flex flex-col gap-5 justify-between ${className}`}
|
||||
>
|
||||
<div className="flex flex-col gap-1">
|
||||
<Link href="/settings/profile">
|
||||
<Link href="/settings/account">
|
||||
<div
|
||||
className={`${
|
||||
active === `/settings/profile`
|
||||
active === `/settings/account`
|
||||
? "bg-sky-200 dark:bg-sky-800"
|
||||
: "hover:bg-slate-200 hover:dark:bg-neutral-700"
|
||||
} duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
|
|
@ -51,7 +51,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
|
|||
/>
|
||||
|
||||
<p className="text-black dark:text-white truncate w-full pr-7">
|
||||
Profile
|
||||
Account
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
|
@ -94,7 +94,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
|
|||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="/settings/migration">
|
||||
{/* <Link href="/settings/migration">
|
||||
<div
|
||||
className={`${
|
||||
active === `/settings/migration`
|
||||
|
|
@ -111,9 +111,9 @@ export default function SettingsSidebar({ className }: { className?: string }) {
|
|||
Import & Export
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</Link> */}
|
||||
|
||||
<Link href="/settings/privacy">
|
||||
{/* <Link href="/settings/privacy">
|
||||
<div
|
||||
className={`${
|
||||
active === `/settings/privacy`
|
||||
|
|
@ -130,7 +130,7 @@ export default function SettingsSidebar({ className }: { className?: string }) {
|
|||
Privacy
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</Link> */}
|
||||
|
||||
<Link href="/settings/password">
|
||||
<div
|
||||
|
|
@ -174,6 +174,36 @@ export default function SettingsSidebar({ className }: { className?: string }) {
|
|||
</div>
|
||||
|
||||
<div className="flex flex-col gap-1">
|
||||
<Link href="https://docs.linkwarden.app" target="_blank">
|
||||
<div
|
||||
className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faCircleQuestion as any}
|
||||
className="w-6 h-6 text-sky-500 dark:text-sky-500"
|
||||
/>
|
||||
|
||||
<p className="text-black dark:text-white truncate w-full pr-7">
|
||||
Help
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="https://github.com/linkwarden/linkwarden" target="_blank">
|
||||
<div
|
||||
className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faGithub as any}
|
||||
className="w-6 h-6 text-sky-500 dark:text-sky-500"
|
||||
/>
|
||||
|
||||
<p className="text-black dark:text-white truncate w-full pr-7">
|
||||
GitHub
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="https://twitter.com/linkwarden_app" target="_blank">
|
||||
<div
|
||||
className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
|
|
@ -203,36 +233,6 @@ export default function SettingsSidebar({ className }: { className?: string }) {
|
|||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="https://github.com/linkwarden/linkwarden" target="_blank">
|
||||
<div
|
||||
className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faGithub as any}
|
||||
className="w-6 h-6 text-sky-500 dark:text-sky-500"
|
||||
/>
|
||||
|
||||
<p className="text-black dark:text-white truncate w-full pr-7">
|
||||
GitHub
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
<Link href="https://docs.linkwarden.app" target="_blank">
|
||||
<div
|
||||
className={`hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 py-2 px-2 cursor-pointer flex items-center gap-2 w-full rounded-md h-8`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
icon={faCircleQuestion as any}
|
||||
className="w-6 h-6 text-sky-500 dark:text-sky-500"
|
||||
/>
|
||||
|
||||
<p className="text-black dark:text-white truncate w-full pr-7">
|
||||
Help
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@ export default function SettingsLayout({ children }: Props) {
|
|||
<>
|
||||
<ModalManagement />
|
||||
|
||||
<div className="flex max-w-screen-lg mx-auto">
|
||||
<div className="flex max-w-screen-md mx-auto">
|
||||
<div className="hidden lg:block">
|
||||
<SettingsSidebar />
|
||||
</div>
|
||||
|
|
@ -60,11 +60,13 @@ export default function SettingsLayout({ children }: Props) {
|
|||
<FontAwesomeIcon icon={faChevronLeft} className="w-5 h-5" />
|
||||
</Link>
|
||||
|
||||
<p className="capitalize text-3xl">
|
||||
<p className="capitalize text-3xl font-thin">
|
||||
{router.asPath.split("/").pop()} Settings
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
|
||||
|
||||
{children}
|
||||
|
||||
{sidebar ? (
|
||||
|
|
|
|||
|
|
@ -0,0 +1,393 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faClose, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
|
||||
import useAccountStore from "@/store/account";
|
||||
import { AccountSettings } from "@/types/global";
|
||||
import { toast } from "react-hot-toast";
|
||||
import SettingsLayout from "@/layouts/SettingsLayout";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import { resizeImage } from "@/lib/client/resizeImage";
|
||||
import ProfilePhoto from "@/components/ProfilePhoto";
|
||||
import SubmitButton from "@/components/SubmitButton";
|
||||
import { useSession, signOut } from "next-auth/react";
|
||||
import React from "react";
|
||||
import { MigrationFormat, MigrationRequest } from "@/types/global";
|
||||
import Link from "next/link";
|
||||
import ClickAwayHandler from "@/components/ClickAwayHandler";
|
||||
import Checkbox from "@/components/Checkbox";
|
||||
|
||||
export default function account() {
|
||||
const { update, data } = useSession();
|
||||
|
||||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
|
||||
|
||||
const [profileStatus, setProfileStatus] = useState(true);
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const handleProfileStatus = (e: boolean) => {
|
||||
setProfileStatus(!e);
|
||||
};
|
||||
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
|
||||
const [user, setUser] = useState<AccountSettings>(
|
||||
!objectIsEmpty(account)
|
||||
? account
|
||||
: ({
|
||||
// @ts-ignore
|
||||
id: null,
|
||||
name: "",
|
||||
username: "",
|
||||
email: "",
|
||||
emailVerified: null,
|
||||
image: null,
|
||||
isPrivate: true,
|
||||
// @ts-ignore
|
||||
createdAt: null,
|
||||
whitelistedUsers: [],
|
||||
profilePic: "",
|
||||
} as unknown as AccountSettings)
|
||||
);
|
||||
|
||||
function objectIsEmpty(obj: object) {
|
||||
return Object.keys(obj).length === 0;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (!objectIsEmpty(account)) setUser({ ...account });
|
||||
}, [account]);
|
||||
|
||||
const handleImageUpload = async (e: any) => {
|
||||
const file: File = e.target.files[0];
|
||||
const fileExtension = file.name.split(".").pop()?.toLowerCase();
|
||||
const allowedExtensions = ["png", "jpeg", "jpg"];
|
||||
if (allowedExtensions.includes(fileExtension as string)) {
|
||||
const resizedFile = await resizeImage(file);
|
||||
if (
|
||||
resizedFile.size < 1048576 // 1048576 Bytes == 1MB
|
||||
) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setUser({ ...user, profilePic: reader.result as string });
|
||||
};
|
||||
reader.readAsDataURL(resizedFile);
|
||||
} else {
|
||||
toast.error("Please select a PNG or JPEG file thats less than 1MB.");
|
||||
}
|
||||
} else {
|
||||
toast.error("Invalid file format.");
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
|
||||
const response = await updateAccount({
|
||||
...user,
|
||||
});
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Settings Applied!");
|
||||
|
||||
if (user.email !== account.email) {
|
||||
update({
|
||||
id: data?.user.id,
|
||||
});
|
||||
|
||||
signOut();
|
||||
} else if (
|
||||
user.username !== account.username ||
|
||||
user.name !== account.name
|
||||
)
|
||||
update({
|
||||
id: data?.user.id,
|
||||
});
|
||||
} else toast.error(response.data as string);
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
|
||||
const [importDropdown, setImportDropdown] = useState(false);
|
||||
|
||||
const importBookmarks = async (e: any, format: MigrationFormat) => {
|
||||
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 request: string = e.target?.result as string;
|
||||
|
||||
const body: MigrationRequest = {
|
||||
format,
|
||||
data: request,
|
||||
};
|
||||
|
||||
const response = await fetch("/api/migration", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
toast.success("Imported the Bookmarks! Reloading the page...");
|
||||
|
||||
setImportDropdown(false);
|
||||
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 2000);
|
||||
};
|
||||
reader.onerror = function (e) {
|
||||
console.log("Error:", e);
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
setWhiteListedUsersTextbox(account?.whitelistedUsers?.join(", "));
|
||||
}, [account]);
|
||||
|
||||
useEffect(() => {
|
||||
setUser({
|
||||
...user,
|
||||
whitelistedUsers: stringToArray(whitelistedUsersTextbox),
|
||||
});
|
||||
}, [whitelistedUsersTextbox]);
|
||||
|
||||
const stringToArray = (str: string) => {
|
||||
const stringWithoutSpaces = str?.replace(/\s+/g, "");
|
||||
|
||||
const wordsArray = stringWithoutSpaces?.split(",");
|
||||
|
||||
return wordsArray;
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<div className="flex flex-col gap-10 justify-between sm:w-[35rem] w-80 mx-auto lg:mx-0">
|
||||
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<p className="text-sm text-black dark:text-white mb-2">
|
||||
Display Name
|
||||
</p>
|
||||
<TextInput
|
||||
value={user.name || ""}
|
||||
onChange={(e) => setUser({ ...user, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-black dark:text-white mb-2">
|
||||
Username
|
||||
</p>
|
||||
<TextInput
|
||||
value={user.username || ""}
|
||||
onChange={(e) => setUser({ ...user, username: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{emailEnabled ? (
|
||||
<div>
|
||||
<p className="text-sm text-black dark:text-white mb-2">Email</p>
|
||||
<TextInput
|
||||
value={user.email || ""}
|
||||
onChange={(e) => setUser({ ...user, email: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{user.email !== account.email ? (
|
||||
<p className="text-gray-500">
|
||||
You will need to log back in after you apply this Email.
|
||||
</p>
|
||||
) : undefined}
|
||||
</div>
|
||||
|
||||
<div className="sm:row-span-2 sm:justify-self-center mx-auto my-3">
|
||||
<p className="text-sm text-black dark:text-white mb-2 text-center">
|
||||
Profile Photo
|
||||
</p>
|
||||
<div className="w-28 h-28 flex items-center justify-center rounded-full relative">
|
||||
<ProfilePhoto
|
||||
priority={true}
|
||||
src={user.profilePic}
|
||||
className="h-auto border-none w-28"
|
||||
status={handleProfileStatus}
|
||||
/>
|
||||
{profileStatus && (
|
||||
<div
|
||||
onClick={() =>
|
||||
setUser({
|
||||
...user,
|
||||
profilePic: "",
|
||||
})
|
||||
}
|
||||
className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 dark:border-neutral-700 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
|
||||
>
|
||||
<FontAwesomeIcon icon={faClose} className="w-3 h-3" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
|
||||
<label className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
|
||||
Browse...
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
id="upload-photo"
|
||||
accept=".png, .jpeg, .jpg"
|
||||
className="hidden"
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-2 w-full rounded-md h-8">
|
||||
<p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin">
|
||||
Import & Export
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
|
||||
|
||||
<div className="flex gap-3 flex-col">
|
||||
<div>
|
||||
<p className="text-sm text-black dark:text-white mb-2">
|
||||
Import your data from other platforms.
|
||||
</p>
|
||||
<div
|
||||
onClick={() => setImportDropdown(true)}
|
||||
className="w-fit relative"
|
||||
id="import-dropdown"
|
||||
>
|
||||
<div
|
||||
id="import-dropdown"
|
||||
className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600"
|
||||
>
|
||||
Import From
|
||||
</div>
|
||||
{importDropdown ? (
|
||||
<ClickAwayHandler
|
||||
onClickOutside={(e: Event) => {
|
||||
const target = e.target as HTMLInputElement;
|
||||
if (target.id !== "import-dropdown")
|
||||
setImportDropdown(false);
|
||||
}}
|
||||
className={`absolute top-7 left-0 w-48 py-1 shadow-md border border-sky-100 dark:border-neutral-700 bg-gray-50 dark:bg-neutral-800 rounded-md flex flex-col z-20`}
|
||||
>
|
||||
<div className="cursor-pointer rounded-md">
|
||||
<label
|
||||
htmlFor="import-linkwarden-file"
|
||||
title="JSON File"
|
||||
className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 cursor-pointer"
|
||||
>
|
||||
Linkwarden...
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
id="import-linkwarden-file"
|
||||
accept=".json"
|
||||
className="hidden"
|
||||
onChange={(e) =>
|
||||
importBookmarks(e, MigrationFormat.linkwarden)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
<label
|
||||
htmlFor="import-html-file"
|
||||
title="HTML File"
|
||||
className="flex items-center gap-2 py-1 px-2 hover:bg-slate-200 hover:dark:bg-neutral-700 duration-100 cursor-pointer"
|
||||
>
|
||||
Bookmarks HTML file...
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
id="import-html-file"
|
||||
accept=".html"
|
||||
className="hidden"
|
||||
onChange={(e) =>
|
||||
importBookmarks(e, MigrationFormat.htmlFile)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</ClickAwayHandler>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm text-black dark:text-white mb-2">
|
||||
Download your data instantly.
|
||||
</p>
|
||||
<Link className="w-fit" href="/api/migration">
|
||||
<div className="border w-fit border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
|
||||
Export Data
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-2 w-full rounded-md h-8">
|
||||
<p className="text-black dark:text-white truncate w-full pr-7 text-3xl font-thin">
|
||||
Profile Visibility
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" />
|
||||
|
||||
<Checkbox
|
||||
label="Make profile private"
|
||||
state={user.isPrivate}
|
||||
className="text-sm sm:text-base"
|
||||
onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
|
||||
/>
|
||||
|
||||
<p className="text-gray-500 dark:text-gray-300 text-sm">
|
||||
This will limit who can find and add you to other Collections.
|
||||
</p>
|
||||
|
||||
{user.isPrivate && (
|
||||
<div>
|
||||
<p className="text-sm text-black dark:text-white mt-2">
|
||||
Whitelisted Users
|
||||
</p>
|
||||
<p className="text-gray-500 dark:text-gray-300 text-sm mb-3">
|
||||
Please provide the Username of the users you wish to grant
|
||||
visibility to your profile. Separated by comma.
|
||||
</p>
|
||||
<textarea
|
||||
className="w-full resize-none border rounded-md duration-100 bg-gray-50 dark:bg-neutral-950 p-2 outline-none border-sky-100 dark:border-neutral-700 focus:border-sky-300 dark:focus:border-sky-600"
|
||||
placeholder="Your profile is hidden from everyone right now..."
|
||||
value={whitelistedUsersTextbox}
|
||||
onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SubmitButton
|
||||
onClick={submit}
|
||||
loading={submitLoader}
|
||||
label="Save"
|
||||
className="mt-2 mx-auto lg:mx-0"
|
||||
/>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +1,36 @@
|
|||
import SettingsLayout from "@/layouts/SettingsLayout";
|
||||
import React from "react";
|
||||
import { useTheme } from "next-themes";
|
||||
|
||||
export default function appearance() {
|
||||
const { theme, setTheme } = useTheme();
|
||||
|
||||
const handleToggle = () => {
|
||||
if (theme === "dark") {
|
||||
setTheme("light");
|
||||
} else {
|
||||
setTheme("dark");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<div>appearance</div>
|
||||
<div className="flex gap-3 w-full">
|
||||
<div
|
||||
className="w-full text-center border-solid border-sky-100 border dark:border-neutral-700 h-40 rounded-md flex items-center justify-center cursor-pointer select-none bg-black text-white"
|
||||
onClick={() => setTheme("dark")}
|
||||
>
|
||||
<p>Dark Theme</p>
|
||||
|
||||
{/* <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> */}
|
||||
</div>
|
||||
<div
|
||||
className="w-full text-center border-solid border-sky-100 border dark:border-neutral-700 h-40 rounded-md flex items-center justify-center cursor-pointer select-none bg-white text-black"
|
||||
onClick={() => setTheme("light")}
|
||||
>
|
||||
<p>Light Theme</p>
|
||||
{/* <hr className="my-3 border-1 border-sky-100 dark:border-neutral-700" /> */}
|
||||
</div>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,29 @@ export default function billing() {
|
|||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<div>Billing</div>
|
||||
<div className=" w-full mx-auto flex flex-col gap-3 justify-between">
|
||||
<p className="text-md text-black dark:text-white">
|
||||
To manage/cancel your subsciption, visit the{" "}
|
||||
<a
|
||||
href={process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL}
|
||||
className="underline"
|
||||
>
|
||||
Billing Portal
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
|
||||
<p className="text-md text-black dark:text-white">
|
||||
If you still need help or encountered any issues, feel free to reach
|
||||
out to us at:{" "}
|
||||
<a
|
||||
className="font-semibold underline"
|
||||
href="mailto:support@linkwarden.app"
|
||||
>
|
||||
support@linkwarden.app
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import SettingsLayout from "@/layouts/SettingsLayout";
|
||||
import React from "react";
|
||||
|
||||
export default function appearance() {
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<div>Migration</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,10 +1,83 @@
|
|||
import SettingsLayout from "@/layouts/SettingsLayout";
|
||||
import React from "react";
|
||||
import { useState } from "react";
|
||||
import useAccountStore from "@/store/account";
|
||||
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
|
||||
import SubmitButton from "@/components/SubmitButton";
|
||||
import { toast } from "react-hot-toast";
|
||||
import TextInput from "@/components/TextInput";
|
||||
|
||||
export default function password() {
|
||||
const [newPassword, setNewPassword1] = useState("");
|
||||
const [newPassword2, setNewPassword2] = useState("");
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
|
||||
const submit = async () => {
|
||||
if (newPassword == "" || newPassword2 == "") {
|
||||
toast.error("Please fill all the fields.");
|
||||
}
|
||||
|
||||
if (newPassword !== newPassword2)
|
||||
return toast.error("Passwords do not match.");
|
||||
else if (newPassword.length < 8)
|
||||
return toast.error("Passwords must be at least 8 characters.");
|
||||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
|
||||
const response = await updateAccount({
|
||||
...account,
|
||||
newPassword,
|
||||
});
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Settings Applied!");
|
||||
setNewPassword1("");
|
||||
setNewPassword2("");
|
||||
} else toast.error(response.data as string);
|
||||
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<div>password</div>
|
||||
<p className="mb-3">
|
||||
To change your password, please fill out the following. Your password
|
||||
should be at least 8 characters.
|
||||
</p>
|
||||
<div className="w-full flex flex-col gap-2 justify-between">
|
||||
<p className="text-sm text-black dark:text-white">New Password</p>
|
||||
|
||||
<TextInput
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword1(e.target.value)}
|
||||
placeholder="••••••••••••••"
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<p className="text-sm text-black dark:text-white">
|
||||
Confirm New Password
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
value={newPassword2}
|
||||
onChange={(e) => setNewPassword2(e.target.value)}
|
||||
placeholder="••••••••••••••"
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<SubmitButton
|
||||
onClick={submit}
|
||||
loading={submitLoader}
|
||||
label="Save"
|
||||
className="mt-2 mx-auto lg:mx-0"
|
||||
/>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
import SettingsLayout from "@/layouts/SettingsLayout";
|
||||
import React from "react";
|
||||
|
||||
export default function privacy() {
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<div>privacy</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,183 +0,0 @@
|
|||
import { useState, useEffect } from "react";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import { faClose, faPenToSquare } from "@fortawesome/free-solid-svg-icons";
|
||||
import useAccountStore from "@/store/account";
|
||||
import { AccountSettings } from "@/types/global";
|
||||
import { toast } from "react-hot-toast";
|
||||
import SettingsLayout from "@/layouts/SettingsLayout";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import { resizeImage } from "@/lib/client/resizeImage";
|
||||
import ProfilePhoto from "@/components/ProfilePhoto";
|
||||
import SubmitButton from "@/components/SubmitButton";
|
||||
import { useSession, signOut } from "next-auth/react";
|
||||
|
||||
export default function profile() {
|
||||
const { update, data } = useSession();
|
||||
|
||||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
|
||||
|
||||
const [profileStatus, setProfileStatus] = useState(true);
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const handleProfileStatus = (e: boolean) => {
|
||||
setProfileStatus(!e);
|
||||
};
|
||||
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
|
||||
const [user, setUser] = useState<AccountSettings>({
|
||||
...account,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
setUser({ ...account });
|
||||
}, [account]);
|
||||
|
||||
const handleImageUpload = async (e: any) => {
|
||||
const file: File = e.target.files[0];
|
||||
const fileExtension = file.name.split(".").pop()?.toLowerCase();
|
||||
const allowedExtensions = ["png", "jpeg", "jpg"];
|
||||
if (allowedExtensions.includes(fileExtension as string)) {
|
||||
const resizedFile = await resizeImage(file);
|
||||
if (
|
||||
resizedFile.size < 1048576 // 1048576 Bytes == 1MB
|
||||
) {
|
||||
const reader = new FileReader();
|
||||
reader.onload = () => {
|
||||
setUser({ ...user, profilePic: reader.result as string });
|
||||
};
|
||||
reader.readAsDataURL(resizedFile);
|
||||
} else {
|
||||
toast.error("Please select a PNG or JPEG file thats less than 1MB.");
|
||||
}
|
||||
} else {
|
||||
toast.error("Invalid file format.");
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async () => {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
|
||||
const response = await updateAccount({
|
||||
...user,
|
||||
});
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Settings Applied!");
|
||||
|
||||
if (user.email !== account.email) {
|
||||
update({
|
||||
id: data?.user.id,
|
||||
});
|
||||
|
||||
signOut();
|
||||
} else if (
|
||||
user.username !== account.username ||
|
||||
user.name !== account.name
|
||||
)
|
||||
update({
|
||||
id: data?.user.id,
|
||||
});
|
||||
|
||||
setUser({ ...user, newPassword: undefined });
|
||||
} else toast.error(response.data as string);
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<SettingsLayout>
|
||||
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80 mx-auto">
|
||||
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
|
||||
<div className="flex flex-col gap-3">
|
||||
<div>
|
||||
<p className="text-sm text-black dark:text-white mb-2">
|
||||
Display Name
|
||||
</p>
|
||||
<TextInput
|
||||
value={user.name || ""}
|
||||
onChange={(e) => setUser({ ...user, name: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-sm text-black dark:text-white mb-2">
|
||||
Username
|
||||
</p>
|
||||
<TextInput
|
||||
value={user.username || ""}
|
||||
onChange={(e) => setUser({ ...user, username: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{emailEnabled ? (
|
||||
<div>
|
||||
<p className="text-sm text-black dark:text-white mb-2">Email</p>
|
||||
<TextInput
|
||||
value={user.email || ""}
|
||||
onChange={(e) => setUser({ ...user, email: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
{user.email !== account.email ? (
|
||||
<p className="text-gray-500">
|
||||
You will need to log back in after you apply this Email.
|
||||
</p>
|
||||
) : undefined}
|
||||
</div>
|
||||
|
||||
<div className="sm:row-span-2 sm:justify-self-center mx-auto mb-3">
|
||||
<p className="text-sm text-black dark:text-white mb-2 text-center">
|
||||
Profile Photo
|
||||
</p>
|
||||
<div className="w-28 h-28 flex items-center justify-center rounded-full relative">
|
||||
<ProfilePhoto
|
||||
priority={true}
|
||||
src={user.profilePic}
|
||||
className="h-auto border-none w-28"
|
||||
status={handleProfileStatus}
|
||||
/>
|
||||
{profileStatus && (
|
||||
<div
|
||||
onClick={() =>
|
||||
setUser({
|
||||
...user,
|
||||
profilePic: "",
|
||||
})
|
||||
}
|
||||
className="absolute top-1 left-1 w-5 h-5 flex items-center justify-center border p-1 border-slate-200 dark:border-neutral-700 rounded-full bg-white dark:bg-neutral-800 text-center select-none cursor-pointer duration-100 hover:text-red-500"
|
||||
>
|
||||
<FontAwesomeIcon icon={faClose} className="w-3 h-3" />
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
|
||||
<label className="border border-slate-200 dark:border-neutral-700 rounded-md bg-white dark:bg-neutral-800 px-2 text-center select-none cursor-pointer duration-100 hover:border-sky-300 hover:dark:border-sky-600">
|
||||
Browse...
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
id="upload-photo"
|
||||
accept=".png, .jpeg, .jpg"
|
||||
className="hidden"
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<SubmitButton
|
||||
onClick={submit}
|
||||
loading={submitLoader}
|
||||
label="Apply Settings"
|
||||
icon={faPenToSquare}
|
||||
className="mt-2 mx-auto lg:mx-0"
|
||||
/>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
Ŝarĝante…
Reference in New Issue