added internationalization to pages [WIP]
This commit is contained in:
daniel31x13
+133
-70
@@ -7,7 +7,12 @@ import CenteredForm from "@/layouts/CenteredForm";
|
||||
import TextInput from "@/components/TextInput";
|
||||
import AccentSubmitButton from "@/components/ui/Button";
|
||||
import { getLogins } from "./api/v1/logins";
|
||||
import { InferGetServerSidePropsType } from "next";
|
||||
import { GetServerSideProps, InferGetServerSidePropsType } from "next";
|
||||
import { getToken } from "next-auth/jwt";
|
||||
import { prisma } from "@/lib/api/db";
|
||||
import { serverSideTranslations } from "next-i18next/serverSideTranslations";
|
||||
import { i18n } from "next-i18next.config";
|
||||
import { Trans, useTranslation } from "next-i18next";
|
||||
|
||||
const emailEnabled = process.env.NEXT_PUBLIC_EMAIL_PROVIDER === "true";
|
||||
|
||||
@@ -19,14 +24,10 @@ type FormData = {
|
||||
passwordConfirmation: string;
|
||||
};
|
||||
|
||||
export const getServerSideProps = () => {
|
||||
const availableLogins = getLogins();
|
||||
return { props: { availableLogins } };
|
||||
};
|
||||
|
||||
export default function Register({
|
||||
availableLogins,
|
||||
}: InferGetServerSidePropsType<typeof getServerSideProps>) {
|
||||
const { t } = useTranslation();
|
||||
const [submitLoader, setSubmitLoader] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
@@ -62,14 +63,14 @@ export default function Register({
|
||||
|
||||
if (checkFields()) {
|
||||
if (form.password !== form.passwordConfirmation)
|
||||
return toast.error("Passwords do not match.");
|
||||
return toast.error(t("passwords_mismatch"));
|
||||
else if (form.password.length < 8)
|
||||
return toast.error("Passwords must be at least 8 characters.");
|
||||
return toast.error(t("password_too_short"));
|
||||
const { passwordConfirmation, ...request } = form;
|
||||
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Creating Account...");
|
||||
const load = toast.loading(t("creating_account"));
|
||||
|
||||
const response = await fetch("/api/v1/users", {
|
||||
body: JSON.stringify(request),
|
||||
@@ -97,12 +98,12 @@ export default function Register({
|
||||
);
|
||||
} else if (!emailEnabled) router.push("/login");
|
||||
|
||||
toast.success("User Created!");
|
||||
toast.success(t("account_created"));
|
||||
} else {
|
||||
toast.error(data.response);
|
||||
}
|
||||
} else {
|
||||
toast.error("Please fill out all the fields.");
|
||||
toast.error(t("fill_all_fields"));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -110,7 +111,7 @@ export default function Register({
|
||||
async function loginUserButton(method: string) {
|
||||
setSubmitLoader(true);
|
||||
|
||||
const load = toast.loading("Authenticating...");
|
||||
const load = toast.loading(t("authenticating"));
|
||||
|
||||
const res = await signIn(method, {});
|
||||
|
||||
@@ -121,11 +122,9 @@ export default function Register({
|
||||
|
||||
function displayLoginExternalButton() {
|
||||
const Buttons: any = [];
|
||||
availableLogins.buttonAuths.forEach((value, index) => {
|
||||
availableLogins.buttonAuths.forEach((value: any, index: any) => {
|
||||
Buttons.push(
|
||||
<React.Fragment key={index}>
|
||||
{index !== 0 ? <div className="divider my-1">Or</div> : undefined}
|
||||
|
||||
<AccentSubmitButton
|
||||
type="button"
|
||||
onClick={() => loginUserButton(value.method)}
|
||||
@@ -149,31 +148,30 @@ export default function Register({
|
||||
<CenteredForm
|
||||
text={
|
||||
process.env.NEXT_PUBLIC_STRIPE
|
||||
? `Unlock ${
|
||||
process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14
|
||||
} days of Premium Service at no cost!`
|
||||
: "Create a new account"
|
||||
? t("trial_offer_desc", {
|
||||
count: Number(process.env.NEXT_PUBLIC_TRIAL_PERIOD_DAYS || 14),
|
||||
})
|
||||
: t("register_desc")
|
||||
}
|
||||
data-testid="registration-form"
|
||||
>
|
||||
{process.env.NEXT_PUBLIC_DISABLE_REGISTRATION === "true" ? (
|
||||
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full bg-base-200 rounded-2xl shadow-md border border-neutral-content">
|
||||
<p>
|
||||
Registration is disabled for this instance, please contact the admin
|
||||
in case of any issues.
|
||||
</p>
|
||||
<p>{t("registration_disabled")}</p>
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={registerUser}>
|
||||
<div className="p-4 flex flex-col gap-3 justify-between max-w-[30rem] min-w-80 w-full mx-auto bg-base-200 rounded-2xl shadow-md border border-neutral-content">
|
||||
<p className="text-3xl text-center font-extralight">
|
||||
Enter your details
|
||||
{t("enter_details")}
|
||||
</p>
|
||||
|
||||
<div className="divider my-0"></div>
|
||||
|
||||
<div>
|
||||
<p className="text-sm w-fit font-semibold mb-1">Display Name</p>
|
||||
<p className="text-sm w-fit font-semibold mb-1">
|
||||
{t("display_name")}
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
autoFocus={true}
|
||||
@@ -187,7 +185,9 @@ export default function Register({
|
||||
|
||||
{emailEnabled ? undefined : (
|
||||
<div>
|
||||
<p className="text-sm w-fit font-semibold mb-1">Username</p>
|
||||
<p className="text-sm w-fit font-semibold mb-1">
|
||||
{t("username")}
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
placeholder="john"
|
||||
@@ -203,7 +203,7 @@ export default function Register({
|
||||
|
||||
{emailEnabled ? (
|
||||
<div>
|
||||
<p className="text-sm w-fit font-semibold mb-1">Email</p>
|
||||
<p className="text-sm w-fit font-semibold mb-1">{t("email")}</p>
|
||||
|
||||
<TextInput
|
||||
type="email"
|
||||
@@ -217,7 +217,9 @@ export default function Register({
|
||||
) : undefined}
|
||||
|
||||
<div className="w-full">
|
||||
<p className="text-sm w-fit font-semibold mb-1">Password</p>
|
||||
<p className="text-sm w-fit font-semibold mb-1">
|
||||
{t("password")}
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
type="password"
|
||||
@@ -231,7 +233,7 @@ export default function Register({
|
||||
|
||||
<div className="w-full">
|
||||
<p className="text-sm w-fit font-semibold mb-1">
|
||||
Confirm Password
|
||||
{t("confirm_password")}
|
||||
</p>
|
||||
|
||||
<TextInput
|
||||
@@ -247,36 +249,27 @@ export default function Register({
|
||||
</div>
|
||||
|
||||
{process.env.NEXT_PUBLIC_STRIPE ? (
|
||||
<div>
|
||||
<p className="text-xs text-neutral">
|
||||
By signing up, you agree to our{" "}
|
||||
<Link
|
||||
href="https://linkwarden.app/tos"
|
||||
className="font-semibold underline"
|
||||
data-testid="terms-of-service-link"
|
||||
>
|
||||
Terms of Service
|
||||
</Link>{" "}
|
||||
and{" "}
|
||||
<Link
|
||||
href="https://linkwarden.app/privacy-policy"
|
||||
className="font-semibold underline"
|
||||
data-testid="privacy-policy-link"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>
|
||||
.
|
||||
</p>
|
||||
<p className="text-xs text-neutral">
|
||||
Need help?{" "}
|
||||
<Link
|
||||
href="mailto:support@linkwarden.app"
|
||||
className="font-semibold underline"
|
||||
data-testid="support-link"
|
||||
>
|
||||
Get in touch
|
||||
</Link>
|
||||
.
|
||||
<div className="text-xs text-neutral mb-3">
|
||||
<p>
|
||||
<Trans
|
||||
i18nKey="sign_up_agreement"
|
||||
components={[
|
||||
<Link
|
||||
href="https://linkwarden.app/tos"
|
||||
className="font-semibold"
|
||||
data-testid="terms-of-service-link"
|
||||
>
|
||||
Terms of Services
|
||||
</Link>,
|
||||
<Link
|
||||
href="https://linkwarden.app/privacy-policy"
|
||||
className="font-semibold"
|
||||
data-testid="privacy-policy-link"
|
||||
>
|
||||
Privacy Policy
|
||||
</Link>,
|
||||
]}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
) : undefined}
|
||||
@@ -288,23 +281,37 @@ export default function Register({
|
||||
size="full"
|
||||
data-testid="register-button"
|
||||
>
|
||||
Sign Up
|
||||
{t("sign_up")}
|
||||
</AccentSubmitButton>
|
||||
|
||||
{availableLogins.buttonAuths.length > 0 ? (
|
||||
<div className="divider my-1">Or continue with</div>
|
||||
<div className="divider my-1">{t("or_continue_with")}</div>
|
||||
) : undefined}
|
||||
|
||||
{displayLoginExternalButton()}
|
||||
<div className="flex items-baseline gap-1 justify-center">
|
||||
<p className="w-fit text-neutral">Already have an account?</p>
|
||||
<Link
|
||||
href={"/login"}
|
||||
className="block font-bold"
|
||||
data-testid="login-link"
|
||||
>
|
||||
Login
|
||||
</Link>
|
||||
<div>
|
||||
<div className="text-neutral text-center flex items-baseline gap-1 justify-center">
|
||||
<p className="w-fit text-neutral">{t("already_registered")}</p>
|
||||
<Link
|
||||
href={"/login"}
|
||||
className="font-bold text-base-content"
|
||||
data-testid="login-link"
|
||||
>
|
||||
{t("login")}
|
||||
</Link>
|
||||
</div>
|
||||
{process.env.NEXT_PUBLIC_STRIPE ? (
|
||||
<div className="text-neutral text-center flex items-baseline gap-1 justify-center">
|
||||
<p>{t("need_help")}</p>
|
||||
<Link
|
||||
href="mailto:support@linkwarden.app"
|
||||
className="font-bold text-base-content"
|
||||
data-testid="support-link"
|
||||
>
|
||||
{t("get_in_touch")}
|
||||
</Link>
|
||||
</div>
|
||||
) : undefined}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -312,3 +319,59 @@ export default function Register({
|
||||
</CenteredForm>
|
||||
);
|
||||
}
|
||||
|
||||
const getServerSideProps: GetServerSideProps = async (ctx) => {
|
||||
const availableLogins = getLogins();
|
||||
|
||||
const acceptLanguageHeader = ctx.req.headers["accept-language"];
|
||||
const availableLanguages = i18n.locales;
|
||||
|
||||
const token = await getToken({ req: ctx.req });
|
||||
|
||||
if (token) {
|
||||
const user = await prisma.user.findUnique({
|
||||
where: {
|
||||
id: token.id,
|
||||
},
|
||||
});
|
||||
|
||||
if (user) {
|
||||
return {
|
||||
props: {
|
||||
availableLogins,
|
||||
...(await serverSideTranslations(user.locale ?? "en", ["common"])),
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
const acceptedLanguages = acceptLanguageHeader
|
||||
?.split(",")
|
||||
.map((lang) => lang.split(";")[0]);
|
||||
|
||||
let bestMatch = acceptedLanguages?.find((lang) =>
|
||||
availableLanguages.includes(lang)
|
||||
);
|
||||
|
||||
if (!bestMatch) {
|
||||
acceptedLanguages?.some((acceptedLang) => {
|
||||
const partialMatch = availableLanguages.find((lang) =>
|
||||
lang.startsWith(acceptedLang)
|
||||
);
|
||||
if (partialMatch) {
|
||||
bestMatch = partialMatch;
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
props: {
|
||||
availableLogins,
|
||||
...(await serverSideTranslations(bestMatch ?? "en", ["common"])),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
export { getServerSideProps };
|
||||
|
||||
Reference in New Issue
Block a user