cleared up old code
This commit is contained in:
daniel31x13
parent
42e16cbf04
commit
146b8576f4
|
|
@ -1,46 +0,0 @@
|
||||||
import { useState } from "react";
|
|
||||||
import SubmitButton from "@/components/SubmitButton";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
import { useRouter } from "next/router";
|
|
||||||
import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
|
|
||||||
export default function PaymentPortal() {
|
|
||||||
const [submitLoader, setSubmitLoader] = useState(false);
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const submit = () => {
|
|
||||||
setSubmitLoader(true);
|
|
||||||
const load = toast.loading("Redirecting to billing portal...");
|
|
||||||
|
|
||||||
router.push(process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL as string);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx-auto sm:w-[35rem] w-80">
|
|
||||||
<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 billing portal.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<SubmitButton
|
|
||||||
onClick={submit}
|
|
||||||
loading={submitLoader}
|
|
||||||
label="Go to Billing Portal"
|
|
||||||
icon={faArrowUpRightFromSquare}
|
|
||||||
className="mx-auto mt-2"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,115 +0,0 @@
|
||||||
import { Dispatch, SetStateAction, useEffect, useState } from "react";
|
|
||||||
import { AccountSettings } from "@/types/global";
|
|
||||||
import useAccountStore from "@/store/account";
|
|
||||||
import { signOut, useSession } from "next-auth/react";
|
|
||||||
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
|
|
||||||
import SubmitButton from "@/components/SubmitButton";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
import TextInput from "@/components/TextInput";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
togglePasswordFormModal: Function;
|
|
||||||
setUser: Dispatch<SetStateAction<AccountSettings>>;
|
|
||||||
user: AccountSettings;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function ChangePassword({
|
|
||||||
togglePasswordFormModal,
|
|
||||||
setUser,
|
|
||||||
user,
|
|
||||||
}: Props) {
|
|
||||||
const [newPassword, setNewPassword1] = useState("");
|
|
||||||
const [newPassword2, setNewPassword2] = useState("");
|
|
||||||
|
|
||||||
const [submitLoader, setSubmitLoader] = useState(false);
|
|
||||||
|
|
||||||
const { account, updateAccount } = useAccountStore();
|
|
||||||
const { update, data } = useSession();
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (
|
|
||||||
!(newPassword == "" || newPassword2 == "") &&
|
|
||||||
newPassword === newPassword2
|
|
||||||
) {
|
|
||||||
setUser({ ...user, newPassword });
|
|
||||||
}
|
|
||||||
}, [newPassword, newPassword2]);
|
|
||||||
|
|
||||||
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({
|
|
||||||
...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 });
|
|
||||||
togglePasswordFormModal();
|
|
||||||
} else toast.error(response.data as string);
|
|
||||||
|
|
||||||
setSubmitLoader(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="mx-auto sm:w-[35rem] w-80">
|
|
||||||
<div className="max-w-[25rem] w-full mx-auto 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="Apply Settings"
|
|
||||||
icon={faPenToSquare}
|
|
||||||
className="mx-auto mt-2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,248 +0,0 @@
|
||||||
import { Dispatch, SetStateAction, useEffect, useState } from "react";
|
|
||||||
import Checkbox from "../../Checkbox";
|
|
||||||
import useAccountStore from "@/store/account";
|
|
||||||
import {
|
|
||||||
AccountSettings,
|
|
||||||
MigrationFormat,
|
|
||||||
MigrationRequest,
|
|
||||||
} from "@/types/global";
|
|
||||||
import { signOut, useSession } from "next-auth/react";
|
|
||||||
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
|
|
||||||
import SubmitButton from "../../SubmitButton";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
import Link from "next/link";
|
|
||||||
import ClickAwayHandler from "@/components/ClickAwayHandler";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
toggleSettingsModal: Function;
|
|
||||||
setUser: Dispatch<SetStateAction<AccountSettings>>;
|
|
||||||
user: AccountSettings;
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function PrivacySettings({
|
|
||||||
toggleSettingsModal,
|
|
||||||
setUser,
|
|
||||||
user,
|
|
||||||
}: Props) {
|
|
||||||
const { update, data } = useSession();
|
|
||||||
const { account, updateAccount } = useAccountStore();
|
|
||||||
|
|
||||||
const [importDropdown, setImportDropdown] = useState(false);
|
|
||||||
const [submitLoader, setSubmitLoader] = useState(false);
|
|
||||||
|
|
||||||
const [whitelistedUsersTextbox, setWhiteListedUsersTextbox] = useState(
|
|
||||||
user.whitelistedUsers.join(", ")
|
|
||||||
);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setUser({
|
|
||||||
...user,
|
|
||||||
whitelistedUsers: stringToArray(whitelistedUsersTextbox),
|
|
||||||
});
|
|
||||||
}, [whitelistedUsersTextbox]);
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setUser({ ...user, newPassword: undefined });
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
const stringToArray = (str: string) => {
|
|
||||||
const stringWithoutSpaces = str.replace(/\s+/g, "");
|
|
||||||
|
|
||||||
const wordsArray = stringWithoutSpaces.split(",");
|
|
||||||
|
|
||||||
return wordsArray;
|
|
||||||
};
|
|
||||||
|
|
||||||
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 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 });
|
|
||||||
toggleSettingsModal();
|
|
||||||
} else toast.error(response.data as string);
|
|
||||||
setSubmitLoader(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
|
|
||||||
<div>
|
|
||||||
<p className="text-sm text-black dark:text-white mb-2">
|
|
||||||
Profile Visibility
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<div className="mt-5">
|
|
||||||
<p className="text-sm text-black dark:text-white mb-2">Import Data</p>
|
|
||||||
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<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-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>
|
|
||||||
<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>
|
|
||||||
</div>
|
|
||||||
</ClickAwayHandler>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<Link className="w-fit" href="/api/migration">
|
|
||||||
<div 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">
|
|
||||||
Export Data
|
|
||||||
</div>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<SubmitButton
|
|
||||||
onClick={submit}
|
|
||||||
loading={submitLoader}
|
|
||||||
label="Apply Settings"
|
|
||||||
icon={faPenToSquare}
|
|
||||||
className="mx-auto mt-2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,195 +0,0 @@
|
||||||
import { Dispatch, SetStateAction, useEffect, useState } from "react";
|
|
||||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
||||||
import { faClose } from "@fortawesome/free-solid-svg-icons";
|
|
||||||
import useAccountStore from "@/store/account";
|
|
||||||
import { AccountSettings } from "@/types/global";
|
|
||||||
import { signOut, useSession } from "next-auth/react";
|
|
||||||
import { resizeImage } from "@/lib/client/resizeImage";
|
|
||||||
import { faPenToSquare } from "@fortawesome/free-regular-svg-icons";
|
|
||||||
import SubmitButton from "../../SubmitButton";
|
|
||||||
import ProfilePhoto from "../../ProfilePhoto";
|
|
||||||
import { toast } from "react-hot-toast";
|
|
||||||
import TextInput from "@/components/TextInput";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
toggleSettingsModal: Function;
|
|
||||||
setUser: Dispatch<SetStateAction<AccountSettings>>;
|
|
||||||
user: AccountSettings;
|
|
||||||
};
|
|
||||||
|
|
||||||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
|
|
||||||
|
|
||||||
export default function ProfileSettings({
|
|
||||||
toggleSettingsModal,
|
|
||||||
setUser,
|
|
||||||
user,
|
|
||||||
}: Props) {
|
|
||||||
const { update, data } = useSession();
|
|
||||||
const { account, updateAccount } = useAccountStore();
|
|
||||||
const [profileStatus, setProfileStatus] = useState(true);
|
|
||||||
|
|
||||||
const [submitLoader, setSubmitLoader] = useState(false);
|
|
||||||
|
|
||||||
const handleProfileStatus = (e: boolean) => {
|
|
||||||
setProfileStatus(!e);
|
|
||||||
};
|
|
||||||
|
|
||||||
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.");
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setUser({ ...user, newPassword: undefined });
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
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 });
|
|
||||||
toggleSettingsModal();
|
|
||||||
} else toast.error(response.data as string);
|
|
||||||
setSubmitLoader(false);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col gap-3 justify-between sm:w-[35rem] w-80">
|
|
||||||
<div className="grid sm:grid-cols-2 gap-3 auto-rows-auto">
|
|
||||||
<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
|
|
||||||
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
|
|
||||||
htmlFor="upload-photo"
|
|
||||||
title="PNG or JPG (Max: 3MB)"
|
|
||||||
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 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>
|
|
||||||
|
|
||||||
<SubmitButton
|
|
||||||
onClick={submit}
|
|
||||||
loading={submitLoader}
|
|
||||||
label="Apply Settings"
|
|
||||||
icon={faPenToSquare}
|
|
||||||
className="mx-auto mt-2"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -1,107 +0,0 @@
|
||||||
import { Tab } from "@headlessui/react";
|
|
||||||
import { AccountSettings } from "@/types/global";
|
|
||||||
import { useState } from "react";
|
|
||||||
import ChangePassword from "./ChangePassword";
|
|
||||||
import ProfileSettings from "./ProfileSettings";
|
|
||||||
import PrivacySettings from "./PrivacySettings";
|
|
||||||
import BillingPortal from "./BillingPortal";
|
|
||||||
|
|
||||||
type Props = {
|
|
||||||
toggleSettingsModal: Function;
|
|
||||||
activeUser: AccountSettings;
|
|
||||||
className?: string;
|
|
||||||
defaultIndex?: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
const STRIPE_BILLING_PORTAL_URL =
|
|
||||||
process.env.NEXT_PUBLIC_STRIPE_BILLING_PORTAL_URL;
|
|
||||||
|
|
||||||
export default function UserModal({
|
|
||||||
className,
|
|
||||||
defaultIndex,
|
|
||||||
toggleSettingsModal,
|
|
||||||
activeUser,
|
|
||||||
}: Props) {
|
|
||||||
const [user, setUser] = useState<AccountSettings>(activeUser);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={className}>
|
|
||||||
<Tab.Group defaultIndex={defaultIndex}>
|
|
||||||
<Tab.List className="flex justify-center flex-col max-w-[15rem] sm:max-w-[30rem] mx-auto sm:flex-row gap-2 sm:gap-3 mb-5 text-black dark:text-white">
|
|
||||||
<Tab
|
|
||||||
className={({ selected }) =>
|
|
||||||
selected
|
|
||||||
? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
|
|
||||||
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Profile Settings
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab
|
|
||||||
className={({ selected }) =>
|
|
||||||
selected
|
|
||||||
? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
|
|
||||||
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Privacy Settings
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
<Tab
|
|
||||||
className={({ selected }) =>
|
|
||||||
selected
|
|
||||||
? "px-2 py-1 bg-sky-200 dark:bg-sky-800 dark:text-white duration-100 rounded-md outline-none"
|
|
||||||
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Password
|
|
||||||
</Tab>
|
|
||||||
|
|
||||||
{STRIPE_BILLING_PORTAL_URL ? (
|
|
||||||
<Tab
|
|
||||||
className={({ selected }) =>
|
|
||||||
selected
|
|
||||||
? "px-2 py-1 bg-sky-200 dark:bg-sky-800 duration-100 rounded-md outline-none"
|
|
||||||
: "px-2 py-1 hover:bg-slate-200 hover:dark:bg-neutral-700 rounded-md duration-100 outline-none"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Billing
|
|
||||||
</Tab>
|
|
||||||
) : undefined}
|
|
||||||
</Tab.List>
|
|
||||||
<Tab.Panels>
|
|
||||||
<Tab.Panel>
|
|
||||||
<ProfileSettings
|
|
||||||
toggleSettingsModal={toggleSettingsModal}
|
|
||||||
setUser={setUser}
|
|
||||||
user={user}
|
|
||||||
/>
|
|
||||||
</Tab.Panel>
|
|
||||||
|
|
||||||
<Tab.Panel>
|
|
||||||
<PrivacySettings
|
|
||||||
toggleSettingsModal={toggleSettingsModal}
|
|
||||||
setUser={setUser}
|
|
||||||
user={user}
|
|
||||||
/>
|
|
||||||
</Tab.Panel>
|
|
||||||
|
|
||||||
<Tab.Panel>
|
|
||||||
<ChangePassword
|
|
||||||
togglePasswordFormModal={toggleSettingsModal}
|
|
||||||
setUser={setUser}
|
|
||||||
user={user}
|
|
||||||
/>
|
|
||||||
</Tab.Panel>
|
|
||||||
|
|
||||||
{STRIPE_BILLING_PORTAL_URL ? (
|
|
||||||
<Tab.Panel>
|
|
||||||
<BillingPortal />
|
|
||||||
</Tab.Panel>
|
|
||||||
) : undefined}
|
|
||||||
</Tab.Panels>
|
|
||||||
</Tab.Group>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -2,12 +2,10 @@ import useModalStore from "@/store/modals";
|
||||||
import Modal from "./Modal";
|
import Modal from "./Modal";
|
||||||
import LinkModal from "./Modal/Link";
|
import LinkModal from "./Modal/Link";
|
||||||
import {
|
import {
|
||||||
AccountSettings,
|
|
||||||
CollectionIncludingMembersAndLinkCount,
|
CollectionIncludingMembersAndLinkCount,
|
||||||
LinkIncludingShortenedCollectionAndTags,
|
LinkIncludingShortenedCollectionAndTags,
|
||||||
} from "@/types/global";
|
} from "@/types/global";
|
||||||
import CollectionModal from "./Modal/Collection";
|
import CollectionModal from "./Modal/Collection";
|
||||||
import UserModal from "./Modal/User";
|
|
||||||
import { useEffect } from "react";
|
import { useEffect } from "react";
|
||||||
import { useRouter } from "next/router";
|
import { useRouter } from "next/router";
|
||||||
|
|
||||||
|
|
@ -49,15 +47,5 @@ export default function ModalManagement() {
|
||||||
/>
|
/>
|
||||||
</Modal>
|
</Modal>
|
||||||
);
|
);
|
||||||
else if (modal && modal.modal === "ACCOUNT")
|
|
||||||
return (
|
|
||||||
<Modal toggleModal={toggleModal}>
|
|
||||||
<UserModal
|
|
||||||
toggleSettingsModal={toggleModal}
|
|
||||||
defaultIndex={modal.defaultIndex}
|
|
||||||
activeUser={modal.active as AccountSettings}
|
|
||||||
/>
|
|
||||||
</Modal>
|
|
||||||
);
|
|
||||||
else return <></>;
|
else return <></>;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import { prisma } from "@/lib/api/db";
|
||||||
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
|
||||||
import getTitle from "@/lib/api/getTitle";
|
import getTitle from "@/lib/api/getTitle";
|
||||||
import archive from "@/lib/api/archive";
|
import archive from "@/lib/api/archive";
|
||||||
import { Collection, Link, UsersAndCollections } from "@prisma/client";
|
import { Collection, UsersAndCollections } from "@prisma/client";
|
||||||
import getPermission from "@/lib/api/getPermission";
|
import getPermission from "@/lib/api/getPermission";
|
||||||
import createFolder from "@/lib/api/storage/createFolder";
|
import createFolder from "@/lib/api/storage/createFolder";
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,17 +1,10 @@
|
||||||
import {
|
import {
|
||||||
AccountSettings,
|
|
||||||
CollectionIncludingMembersAndLinkCount,
|
CollectionIncludingMembersAndLinkCount,
|
||||||
LinkIncludingShortenedCollectionAndTags,
|
LinkIncludingShortenedCollectionAndTags,
|
||||||
} from "@/types/global";
|
} from "@/types/global";
|
||||||
import { create } from "zustand";
|
import { create } from "zustand";
|
||||||
|
|
||||||
type Modal =
|
type Modal =
|
||||||
| {
|
|
||||||
modal: "ACCOUNT";
|
|
||||||
state: boolean;
|
|
||||||
active: AccountSettings;
|
|
||||||
defaultIndex?: number;
|
|
||||||
}
|
|
||||||
| {
|
| {
|
||||||
modal: "LINK";
|
modal: "LINK";
|
||||||
state: boolean;
|
state: boolean;
|
||||||
|
|
|
||||||
Ŝarĝante…
Reference in New Issue