Merge branch 'dev' of https://github.com/linkwarden/linkwarden into feat/single-file
This commit is contained in:
daniel31x13
@@ -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 };
|
||||
|
||||
+195
-136
@@ -12,14 +12,19 @@ import { MigrationFormat, MigrationRequest } from "@/types/global";
|
||||
import Link from "next/link";
|
||||
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 emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
|
||||
|
||||
const [emailChangeVerificationModal, setEmailChangeVerificationModal] =
|
||||
useState(false);
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
|
||||
const [user, setUser] = useState<AccountSettings>(
|
||||
!objectIsEmpty(account)
|
||||
? account
|
||||
@@ -30,6 +35,7 @@ export default function Account() {
|
||||
username: "",
|
||||
email: "",
|
||||
emailVerified: null,
|
||||
password: undefined,
|
||||
image: "",
|
||||
isPrivate: true,
|
||||
// @ts-ignore
|
||||
@@ -38,6 +44,8 @@ export default function Account() {
|
||||
} as unknown as AccountSettings)
|
||||
);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
function objectIsEmpty(obj: object) {
|
||||
return Object.keys(obj).length === 0;
|
||||
}
|
||||
@@ -61,69 +69,66 @@ 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 () => {
|
||||
const submit = async (password?: string) => {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
const load = toast.loading(t("applying_settings"));
|
||||
|
||||
const response = await updateAccount({
|
||||
...user,
|
||||
// @ts-ignore
|
||||
password: password ? password : undefined,
|
||||
});
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Settings Applied!");
|
||||
const emailChanged = account.email !== user.email;
|
||||
|
||||
toast.success(t("settings_applied"));
|
||||
if (emailChanged) {
|
||||
toast.success(t("email_change_request"));
|
||||
setEmailChangeVerificationModal(false);
|
||||
}
|
||||
} 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);
|
||||
};
|
||||
|
||||
@@ -141,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>
|
||||
|
||||
@@ -158,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"
|
||||
@@ -166,23 +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>
|
||||
{user.email !== account.email &&
|
||||
process.env.NEXT_PUBLIC_STRIPE === "true" ? (
|
||||
<p className="text-neutral mb-2 text-sm">
|
||||
Updating this field will change your billing email as well
|
||||
</p>
|
||||
) : undefined}
|
||||
<p className="mb-2">{t("email")}</p>
|
||||
<TextInput
|
||||
value={user.email || ""}
|
||||
className="bg-base-200"
|
||||
@@ -190,50 +186,129 @@ 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>
|
||||
<div className="w-28 h-28 flex items-center justify-center rounded-full relative">
|
||||
<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}
|
||||
src={user.image ? user.image : undefined}
|
||||
large={true}
|
||||
/>
|
||||
{user.image && (
|
||||
<div
|
||||
onClick={() =>
|
||||
setUser({
|
||||
...user,
|
||||
image: "",
|
||||
})
|
||||
}
|
||||
className="absolute top-1 left-1 btn btn-xs btn-circle btn-neutral btn-outline bg-base-100"
|
||||
|
||||
<div className="dropdown dropdown-bottom">
|
||||
<Button
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
size="small"
|
||||
intent="secondary"
|
||||
onMouseDown={dropdownTriggerer}
|
||||
className="text-sm"
|
||||
>
|
||||
<i className="bi-x"></i>
|
||||
</div>
|
||||
)}
|
||||
<div className="absolute -bottom-3 left-0 right-0 mx-auto w-fit text-center">
|
||||
<label className="btn btn-xs btn-neutral btn-outline bg-base-100">
|
||||
Browse...
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
id="upload-photo"
|
||||
accept=".png, .jpeg, .jpg"
|
||||
className="hidden"
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
</label>
|
||||
<i className="bi-pencil-square text-md duration-100"></i>
|
||||
{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">
|
||||
{t("upload_new_photo")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
id="upload-photo"
|
||||
accept=".png, .jpeg, .jpg"
|
||||
className="hidden"
|
||||
onChange={handleImageUpload}
|
||||
/>
|
||||
</label>
|
||||
</li>
|
||||
{user.image && (
|
||||
<li>
|
||||
<div
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
onClick={() =>
|
||||
setUser({
|
||||
...user,
|
||||
image: "",
|
||||
})
|
||||
}
|
||||
>
|
||||
{t("remove_photo")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sm:-mt-3">
|
||||
<Checkbox
|
||||
label={t("make_profile_private")}
|
||||
state={user.isPrivate}
|
||||
onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
|
||||
/>
|
||||
|
||||
<p className="text-neutral text-sm">{t("profile_privacy_info")}</p>
|
||||
|
||||
{user.isPrivate && (
|
||||
<div className="pl-5">
|
||||
<p className="mt-2">{t("whitelisted_users")}</p>
|
||||
<p className="text-neutral text-sm mb-3">
|
||||
{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={t("whitelisted_users_placeholder")}
|
||||
value={whitelistedUsersTextbox}
|
||||
onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SubmitButton
|
||||
onClick={() => {
|
||||
if (account.email !== user.email) {
|
||||
setEmailChangeVerificationModal(true);
|
||||
} else {
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
loading={submitLoader}
|
||||
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>
|
||||
|
||||
@@ -241,27 +316,29 @@ 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">
|
||||
<div
|
||||
<Button
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
intent="secondary"
|
||||
onMouseDown={dropdownTriggerer}
|
||||
className="flex gap-2 text-sm btn btn-outline btn-neutral group"
|
||||
className="text-sm"
|
||||
id="import-dropdown"
|
||||
>
|
||||
<i className="bi-cloud-upload text-xl duration-100"></i>
|
||||
<p>Import From</p>
|
||||
</div>
|
||||
{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">
|
||||
<li>
|
||||
<label
|
||||
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"
|
||||
@@ -279,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"
|
||||
@@ -294,92 +371,74 @@ export default function Account() {
|
||||
/>
|
||||
</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>
|
||||
|
||||
<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="flex w-fit gap-2 text-sm btn btn-outline btn-neutral group">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Profile Visibility
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="divider my-3"></div>
|
||||
|
||||
<Checkbox
|
||||
label="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>
|
||||
|
||||
{user.isPrivate && (
|
||||
<div className="pl-5">
|
||||
<p className="mt-2">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.
|
||||
</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..."
|
||||
value={whitelistedUsersTextbox}
|
||||
onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<SubmitButton
|
||||
onClick={submit}
|
||||
loading={submitLoader}
|
||||
label="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="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. "
|
||||
: undefined}{" "}
|
||||
You will be prompted to enter your password before the deletion
|
||||
process.
|
||||
? " " + t("cancel_subscription_notice")
|
||||
: undefined}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link
|
||||
href="/settings/delete"
|
||||
className="text-white w-full sm:w-fit flex items-center gap-2 py-2 px-4 rounded-md text-lg tracking-wide select-none font-semibold duration-100 bg-red-500 hover:bg-red-400 cursor-pointer"
|
||||
>
|
||||
<p className="text-center w-full">Delete Your Account</p>
|
||||
<Link href="/settings/delete" className="underline">
|
||||
{t("account_deletion_page")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{emailChangeVerificationModal ? (
|
||||
<EmailChangeVerificationModal
|
||||
onClose={() => setEmailChangeVerificationModal(false)}
|
||||
onSubmit={submit}
|
||||
oldEmail={account.email || ""}
|
||||
newEmail={user.email || ""}
|
||||
/>
|
||||
) : undefined}
|
||||
</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,29 +14,28 @@ 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:{" "}
|
||||
<a
|
||||
className="font-semibold underline"
|
||||
href="mailto:support@linkwarden.app"
|
||||
>
|
||||
{t("help_contact_intro")}{" "}
|
||||
<a className="font-semibold" href="mailto:support@linkwarden.app">
|
||||
support@linkwarden.app
|
||||
</a>
|
||||
</p>
|
||||
@@ -41,3 +43,5 @@ export default function Billing() {
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
||||
+51
-65
@@ -4,18 +4,17 @@ import TextInput from "@/components/TextInput";
|
||||
import CenteredForm from "@/layouts/CenteredForm";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
import Link from "next/link";
|
||||
|
||||
const keycloakEnabled = process.env.NEXT_PUBLIC_KEYCLOAK_ENABLED === "true";
|
||||
const authentikEnabled = process.env.NEXT_PUBLIC_AUTHENTIK_ENABLED === "true";
|
||||
import Button from "@/components/ui/Button";
|
||||
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 = {
|
||||
@@ -26,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",
|
||||
@@ -48,7 +46,9 @@ export default function Delete() {
|
||||
|
||||
if (response.ok) {
|
||||
signOut();
|
||||
} else toast.error(message);
|
||||
} else {
|
||||
toast.error(message);
|
||||
}
|
||||
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
@@ -60,96 +60,82 @@ 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>
|
||||
</fieldset>
|
||||
) : undefined}
|
||||
|
||||
<button
|
||||
className={`mx-auto text-white flex items-center gap-2 py-1 px-3 rounded-md text-lg tracking-wide select-none font-semibold duration-100 w-fit ${
|
||||
submitLoader
|
||||
? "bg-red-400 cursor-auto"
|
||||
: "bg-red-500 hover:bg-red-400 cursor-pointer"
|
||||
}`}
|
||||
onClick={() => {
|
||||
if (!submitLoader) {
|
||||
submit();
|
||||
}
|
||||
}}
|
||||
<Button
|
||||
className="mx-auto"
|
||||
intent="destructive"
|
||||
loading={submitLoader}
|
||||
onClick={submit}
|
||||
>
|
||||
<p className="text-center w-full">Delete Your Account</p>
|
||||
</button>
|
||||
<p className="text-center w-full">{t("delete_your_account")}</p>
|
||||
</Button>
|
||||
</div>
|
||||
</CenteredForm>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
||||
+30
-28
@@ -4,72 +4,72 @@ 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 [newPassword, setNewPassword1] = useState("");
|
||||
const [newPassword2, setNewPassword2] = useState("");
|
||||
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 == "" || newPassword2 == "") {
|
||||
return toast.error("Please fill all the fields.");
|
||||
if (newPassword === "" || oldPassword === "") {
|
||||
return toast.error(t("fill_all_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.");
|
||||
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,
|
||||
newPassword,
|
||||
oldPassword,
|
||||
});
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Settings Applied!");
|
||||
setNewPassword1("");
|
||||
setNewPassword2("");
|
||||
} else toast.error(response.data as string);
|
||||
toast.success(t("settings_applied"));
|
||||
setNewPassword("");
|
||||
setOldPassword("");
|
||||
} 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>New Password</p>
|
||||
<p>{t("old_password")}</p>
|
||||
|
||||
<TextInput
|
||||
value={newPassword}
|
||||
value={oldPassword}
|
||||
className="bg-base-200"
|
||||
onChange={(e) => setNewPassword1(e.target.value)}
|
||||
onChange={(e) => setOldPassword(e.target.value)}
|
||||
placeholder="••••••••••••••"
|
||||
type="password"
|
||||
/>
|
||||
|
||||
<p>Confirm New Password</p>
|
||||
<p className="mt-3">{t("new_password")}</p>
|
||||
|
||||
<TextInput
|
||||
value={newPassword2}
|
||||
value={newPassword}
|
||||
className="bg-base-200"
|
||||
onChange={(e) => setNewPassword2(e.target.value)}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="••••••••••••••"
|
||||
type="password"
|
||||
/>
|
||||
@@ -77,10 +77,12 @@ export default function Password() {
|
||||
<SubmitButton
|
||||
onClick={submit}
|
||||
loading={submitLoader}
|
||||
label="Save Changes"
|
||||
className="mt-2 w-full sm:w-fit"
|
||||
label={t("save_changes")}
|
||||
className="mt-3 w-full sm:w-fit"
|
||||
/>
|
||||
</div>
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
||||
@@ -1,33 +1,39 @@
|
||||
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 [archiveAsSinglefile, setArchiveAsSinglefile] =
|
||||
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 [archiveAsSinglefile, setArchiveAsSinglefile] = useState<boolean>(
|
||||
account.archiveAsSinglefile
|
||||
);
|
||||
|
||||
const [archiveAsWaybackMachine, setArchiveAsWaybackMachine] =
|
||||
useState<boolean>(account.archiveAsWaybackMachine);
|
||||
|
||||
const [linksRouteTo, setLinksRouteTo] = useState(account.linksRouteTo);
|
||||
|
||||
useEffect(() => {
|
||||
setUser({
|
||||
@@ -67,29 +73,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 ${
|
||||
@@ -100,9 +106,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 ${
|
||||
@@ -113,23 +117,20 @@ 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)}
|
||||
/>
|
||||
@@ -141,13 +142,12 @@ export default function Appearance() {
|
||||
/>
|
||||
|
||||
<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)
|
||||
@@ -157,18 +157,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"
|
||||
@@ -183,7 +183,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
|
||||
@@ -199,7 +199,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
|
||||
@@ -215,7 +215,25 @@ 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
|
||||
className="label cursor-pointer flex gap-2 justify-start w-fit"
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
name="link-preference-radio"
|
||||
className="radio checked:bg-primary"
|
||||
value="Singlefile"
|
||||
checked={linksRouteTo === LinksRouteTo.SINGLEFILE}
|
||||
onChange={() => setLinksRouteTo(LinksRouteTo.SINGLEFILE)}
|
||||
/>
|
||||
<span className="label-text">Open Singlefile, if available</span>
|
||||
</label>
|
||||
|
||||
<label
|
||||
@@ -247,7 +265,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>
|
||||
@@ -255,10 +275,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 };
|
||||
|
||||
Reference in New Issue
Block a user