added internationalization to pages [WIP]
This commit is contained in:
daniel31x13
+52
-69
@@ -15,17 +15,16 @@ import { dropdownTriggerer } from "@/lib/client/utils";
|
||||
import EmailChangeVerificationModal from "@/components/ModalContent/EmailChangeVerificationModal";
|
||||
import Button from "@/components/ui/Button";
|
||||
import { i18n } from "next-i18next.config";
|
||||
import { useTranslation } from "next-i18next";
|
||||
import getServerSideProps from "@/lib/client/getServerSideProps";
|
||||
|
||||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER;
|
||||
|
||||
export default function Account() {
|
||||
const [emailChangeVerificationModal, setEmailChangeVerificationModal] =
|
||||
useState(false);
|
||||
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
|
||||
const { account, updateAccount } = useAccountStore();
|
||||
|
||||
const [user, setUser] = useState<AccountSettings>(
|
||||
!objectIsEmpty(account)
|
||||
? account
|
||||
@@ -45,6 +44,8 @@ export default function Account() {
|
||||
} as unknown as AccountSettings)
|
||||
);
|
||||
|
||||
const { t } = useTranslation();
|
||||
|
||||
function objectIsEmpty(obj: object) {
|
||||
return Object.keys(obj).length === 0;
|
||||
}
|
||||
@@ -68,17 +69,16 @@ export default function Account() {
|
||||
};
|
||||
reader.readAsDataURL(resizedFile);
|
||||
} else {
|
||||
toast.error("Please select a PNG or JPEG file thats less than 1MB.");
|
||||
toast.error(t("image_upload_size_error"));
|
||||
}
|
||||
} else {
|
||||
toast.error("Invalid file format.");
|
||||
toast.error(t("image_upload_format_error"));
|
||||
}
|
||||
};
|
||||
|
||||
const submit = async (password?: string) => {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Applying...");
|
||||
const load = toast.loading(t("applying_settings"));
|
||||
|
||||
const response = await updateAccount({
|
||||
...user,
|
||||
@@ -91,56 +91,44 @@ export default function Account() {
|
||||
if (response.ok) {
|
||||
const emailChanged = account.email !== user.email;
|
||||
|
||||
toast.success(t("settings_applied"));
|
||||
if (emailChanged) {
|
||||
toast.success("Settings Applied!");
|
||||
toast.success(
|
||||
"Email change request sent. Please verify the new email address."
|
||||
);
|
||||
toast.success(t("email_change_request"));
|
||||
setEmailChangeVerificationModal(false);
|
||||
} else toast.success("Settings Applied!");
|
||||
}
|
||||
} else toast.error(response.data as string);
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
|
||||
const importBookmarks = async (e: any, format: MigrationFormat) => {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const file: File = e.target.files[0];
|
||||
|
||||
if (file) {
|
||||
var reader = new FileReader();
|
||||
reader.readAsText(file, "UTF-8");
|
||||
reader.onload = async function (e) {
|
||||
const load = toast.loading("Importing...");
|
||||
|
||||
const load = toast.loading(t("importing_bookmarks"));
|
||||
const request: string = e.target?.result as string;
|
||||
|
||||
const body: MigrationRequest = {
|
||||
format,
|
||||
data: request,
|
||||
};
|
||||
|
||||
const body: MigrationRequest = { format, data: request };
|
||||
const response = await fetch("/api/v1/migration", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
toast.dismiss(load);
|
||||
|
||||
if (response.ok) {
|
||||
toast.success("Imported the Bookmarks! Reloading the page...");
|
||||
toast.success(t("import_success"));
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 2000);
|
||||
} else toast.error(data.response as string);
|
||||
} else {
|
||||
toast.error(data.response as string);
|
||||
}
|
||||
};
|
||||
reader.onerror = function (e) {
|
||||
console.log("Error:", e);
|
||||
};
|
||||
}
|
||||
|
||||
setSubmitLoader(false);
|
||||
};
|
||||
|
||||
@@ -158,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>
|
||||
|
||||
@@ -175,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"
|
||||
@@ -183,17 +169,16 @@ export default function Account() {
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p className="mb-2">Username</p>
|
||||
<p className="mb-2">{t("username")}</p>
|
||||
<TextInput
|
||||
value={user.username || ""}
|
||||
className="bg-base-200"
|
||||
onChange={(e) => setUser({ ...user, username: e.target.value })}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{emailEnabled ? (
|
||||
<div>
|
||||
<p className="mb-2">Email</p>
|
||||
<p className="mb-2">{t("email")}</p>
|
||||
<TextInput
|
||||
value={user.email || ""}
|
||||
className="bg-base-200"
|
||||
@@ -201,9 +186,8 @@ export default function Account() {
|
||||
/>
|
||||
</div>
|
||||
) : undefined}
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Language</p>
|
||||
<p className="mb-2">{t("language")}</p>
|
||||
<select
|
||||
onChange={(e) => {
|
||||
setUser({ ...user, locale: e.target.value });
|
||||
@@ -221,12 +205,13 @@ export default function Account() {
|
||||
) || ""}
|
||||
</option>
|
||||
))}
|
||||
<option disabled>{t("more_coming_soon")}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sm:row-span-2 sm:justify-self-center my-3">
|
||||
<p className="mb-2 sm:text-center">Profile Photo</p>
|
||||
<p className="mb-2 sm:text-center">{t("profile_photo")}</p>
|
||||
<div className="w-28 h-28 flex gap-3 sm:flex-col items-center">
|
||||
<ProfilePhoto
|
||||
priority={true}
|
||||
@@ -244,12 +229,12 @@ export default function Account() {
|
||||
className="text-sm"
|
||||
>
|
||||
<i className="bi-pencil-square text-md duration-100"></i>
|
||||
Edit
|
||||
{t("edit")}
|
||||
</Button>
|
||||
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
|
||||
<li>
|
||||
<label tabIndex={0} role="button">
|
||||
Upload a new photo...
|
||||
{t("upload_new_photo")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
@@ -272,7 +257,7 @@ export default function Account() {
|
||||
})
|
||||
}
|
||||
>
|
||||
Remove Photo
|
||||
{t("remove_photo")}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
@@ -284,25 +269,22 @@ export default function Account() {
|
||||
|
||||
<div className="sm:-mt-3">
|
||||
<Checkbox
|
||||
label="Make profile private"
|
||||
label={t("make_profile_private")}
|
||||
state={user.isPrivate}
|
||||
onClick={() => setUser({ ...user, isPrivate: !user.isPrivate })}
|
||||
/>
|
||||
|
||||
<p className="text-neutral text-sm">
|
||||
This will limit who can find and add you to new Collections.
|
||||
</p>
|
||||
<p className="text-neutral text-sm">{t("profile_privacy_info")}</p>
|
||||
|
||||
{user.isPrivate && (
|
||||
<div className="pl-5">
|
||||
<p className="mt-2">Whitelisted Users</p>
|
||||
<p className="mt-2">{t("whitelisted_users")}</p>
|
||||
<p className="text-neutral text-sm mb-3">
|
||||
Please provide the Username of the users you wish to grant
|
||||
visibility to your profile. Separated by comma.
|
||||
{t("whitelisted_users_info")}
|
||||
</p>
|
||||
<textarea
|
||||
className="w-full resize-none border rounded-md duration-100 bg-base-200 p-2 outline-none border-neutral-content focus:border-primary"
|
||||
placeholder="Your profile is hidden from everyone right now..."
|
||||
placeholder={t("whitelisted_users_placeholder")}
|
||||
value={whitelistedUsersTextbox}
|
||||
onChange={(e) => setWhiteListedUsersTextbox(e.target.value)}
|
||||
/>
|
||||
@@ -319,14 +301,14 @@ export default function Account() {
|
||||
}
|
||||
}}
|
||||
loading={submitLoader}
|
||||
label="Save Changes"
|
||||
label={t("save_changes")}
|
||||
className="mt-2 w-full sm:w-fit"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<div className="flex items-center gap-2 w-full rounded-md h-8">
|
||||
<p className="truncate w-full pr-7 text-3xl font-thin">
|
||||
Import & Export
|
||||
{t("import_export")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -334,7 +316,7 @@ export default function Account() {
|
||||
|
||||
<div className="flex gap-3 flex-col">
|
||||
<div>
|
||||
<p className="mb-2">Import your data from other platforms.</p>
|
||||
<p className="mb-2">{t("import_data")}</p>
|
||||
<div className="dropdown dropdown-bottom">
|
||||
<Button
|
||||
tabIndex={0}
|
||||
@@ -345,7 +327,7 @@ export default function Account() {
|
||||
id="import-dropdown"
|
||||
>
|
||||
<i className="bi-cloud-upload text-xl duration-100"></i>
|
||||
Import From
|
||||
{t("import_links")}
|
||||
</Button>
|
||||
|
||||
<ul className="shadow menu dropdown-content z-[1] bg-base-200 border border-neutral-content rounded-box mt-1 w-60">
|
||||
@@ -354,9 +336,9 @@ export default function Account() {
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
htmlFor="import-linkwarden-file"
|
||||
title="JSON File"
|
||||
title={t("from_linkwarden")}
|
||||
>
|
||||
From Linkwarden
|
||||
{t("from_linkwarden")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
@@ -374,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"
|
||||
@@ -394,9 +376,9 @@ export default function Account() {
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
htmlFor="import-wallabag-file"
|
||||
title="Wallabag File"
|
||||
title={t("from_wallabag")}
|
||||
>
|
||||
From Wallabag (JSON file)
|
||||
{t("from_wallabag")}
|
||||
<input
|
||||
type="file"
|
||||
name="photo"
|
||||
@@ -414,11 +396,11 @@ export default function Account() {
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="mb-2">Download your data instantly.</p>
|
||||
<p className="mb-2">{t("download_data")}</p>
|
||||
<Link className="w-fit" href="/api/v1/migration">
|
||||
<div className="select-none relative duration-200 rounded-lg text-sm text-center w-fit flex justify-center items-center gap-2 disabled:pointer-events-none disabled:opacity-50 bg-neutral-content text-secondary-foreground hover:bg-neutral-content/80 border border-neutral/30 h-10 px-4 py-2">
|
||||
<i className="bi-cloud-download text-xl duration-100"></i>
|
||||
<p>Export Data</p>
|
||||
<p>{t("export_data")}</p>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
@@ -428,23 +410,22 @@ export default function Account() {
|
||||
<div>
|
||||
<div className="flex items-center gap-2 w-full rounded-md h-8">
|
||||
<p className="text-red-500 dark:text-red-500 truncate w-full pr-7 text-3xl font-thin">
|
||||
Delete Account
|
||||
{t("delete_account")}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="divider my-3"></div>
|
||||
|
||||
<p>
|
||||
This will permanently delete ALL the Links, Collections, Tags, and
|
||||
archived data you own.{" "}
|
||||
{t("delete_account_warning")}
|
||||
{process.env.NEXT_PUBLIC_STRIPE
|
||||
? "It will also cancel your subscription. "
|
||||
? " " + t("cancel_subscription_notice")
|
||||
: undefined}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Link href="/settings/delete" className="underline">
|
||||
Account deletion page
|
||||
{t("account_deletion_page")}
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@@ -459,3 +440,5 @@ export default function Account() {
|
||||
</SettingsLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { getServerSideProps };
|
||||
|
||||
Reference in New Issue
Block a user