363 lines
9.4 KiB
TypeScript
363 lines
9.4 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
ExternalLink,
|
|
Eye,
|
|
EyeOff,
|
|
Frown,
|
|
MailPlus,
|
|
UserSearch,
|
|
} from "lucide-react";
|
|
import type { GetServerSideProps } from "next";
|
|
import Link from "next/link";
|
|
import { useRouter } from "next/router";
|
|
import { useState } from "react";
|
|
import toast from "react-hot-toast";
|
|
import { z } from "zod";
|
|
import {
|
|
Form,
|
|
FormControl,
|
|
FormField,
|
|
FormItem,
|
|
FormLabel,
|
|
FormMessage,
|
|
} from "~/components/custom_ui/form";
|
|
import LoadingButton from "~/components/custom_ui/loading-button";
|
|
import { PasswordSVG } from "~/components/svgs";
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from "~/components/ui/alert-dialog";
|
|
import { Button } from "~/components/ui/button";
|
|
import Input from "~/components/ui/input";
|
|
import { usePassword } from "~/hooks/usePassword";
|
|
import { cn } from "~/lib/utils";
|
|
import { useZodForm } from "~/lib/zodForm";
|
|
import type { NextPageWithLayout } from "~/pages/_app";
|
|
import { useTranslation } from "~/providers/I18nProvider";
|
|
import { generateSSGHelper } from "~/server/utils/ssgHelper";
|
|
import { api } from "~/utils/api";
|
|
|
|
type InviteTokenProps = {
|
|
token: string;
|
|
verification:
|
|
| {
|
|
status: "valid";
|
|
email: string;
|
|
}
|
|
| {
|
|
status: "invalid";
|
|
reason: "not_found" | "expired";
|
|
}
|
|
| {
|
|
status: "already_user";
|
|
};
|
|
};
|
|
|
|
/**
|
|
* Pagina di accettazione invito: /auth/accetta-invito/[token]
|
|
*/
|
|
const AcceptInvitePage: NextPageWithLayout<InviteTokenProps> = ({
|
|
verification,
|
|
token,
|
|
}: InviteTokenProps) => {
|
|
switch (verification.status) {
|
|
case "valid":
|
|
return <ValidInvitePage email={verification.email} token={token} />;
|
|
case "invalid":
|
|
return <InvalidInvitePage reason={verification.reason} />;
|
|
case "already_user":
|
|
return <AlreadyUserPage />;
|
|
default:
|
|
return <InvalidInvitePage reason="not_found" />;
|
|
}
|
|
};
|
|
const ValidInvitePage = ({
|
|
token,
|
|
email,
|
|
}: {
|
|
token: string;
|
|
email: string;
|
|
}) => {
|
|
const {
|
|
isVisible,
|
|
getStrengthColor,
|
|
passwordRefine,
|
|
getStrengthTxt,
|
|
strengthScore,
|
|
toggleVisibility,
|
|
maxStrength,
|
|
} = usePassword();
|
|
const router = useRouter();
|
|
|
|
const schema = z
|
|
.object({
|
|
newPsw: z.string(),
|
|
})
|
|
.superRefine(({ newPsw }, refinementContext) => {
|
|
passwordRefine({
|
|
password: newPsw,
|
|
path: "newPsw",
|
|
refinementContext,
|
|
});
|
|
});
|
|
|
|
type FormValues = z.infer<typeof schema>;
|
|
|
|
const { locale } = useTranslation();
|
|
|
|
z.config(z.locales[locale]());
|
|
|
|
const form = useZodForm(schema, {
|
|
defaultValues: {
|
|
newPsw: "",
|
|
},
|
|
});
|
|
function onSubmit(fields: FormValues) {
|
|
if (!email || !token) return;
|
|
acceptInvite({
|
|
email,
|
|
password: fields.newPsw,
|
|
token,
|
|
});
|
|
}
|
|
|
|
const { mutate: acceptInvite, isPending } =
|
|
api.invite.acceptInvite.useMutation({
|
|
onSuccess: async () => {
|
|
toast.success("Account creato! Effettua il login.");
|
|
await router.push("/area-riservata/dashboard");
|
|
//await router.push("/login?redirect=/area-riservata/dashboard");
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message);
|
|
},
|
|
});
|
|
return (
|
|
<div className="mx-auto w-full max-w-lg space-y-10 py-6 md:py-10">
|
|
<div className="flex w-full items-center justify-center">
|
|
<PasswordSVG className="size-48" />
|
|
</div>
|
|
|
|
<Form {...form}>
|
|
<form className="space-y-6 px-4" onSubmit={form.handleSubmit(onSubmit)}>
|
|
<h1 className="font-bold text-2xl">Scegli la tua password</h1>
|
|
<FormField
|
|
control={form.control}
|
|
name="newPsw"
|
|
render={({ field }) => (
|
|
<FormItem>
|
|
<div className="flex flex-col gap-x-2">
|
|
<FormLabel htmlFor="newPsw">Scegli una password</FormLabel>
|
|
|
|
<FormMessage
|
|
className={cn(
|
|
"whitespace-pre-wrap",
|
|
getStrengthTxt(strengthScore),
|
|
)}
|
|
/>
|
|
</div>
|
|
|
|
<FormControl>
|
|
<div className="relative">
|
|
<Input
|
|
{...field}
|
|
aria-describedby="password-strength"
|
|
aria-invalid={form.getFieldState("newPsw").invalid}
|
|
autoComplete="new-password"
|
|
className="pe-9"
|
|
id="newPsw"
|
|
onChange={async (e) => {
|
|
field.onChange(e);
|
|
await form.trigger("newPsw");
|
|
}}
|
|
placeholder="Password"
|
|
type={isVisible ? "text" : "password"}
|
|
/>
|
|
<button
|
|
aria-controls="password"
|
|
aria-label={isVisible ? "Hide password" : "Show password"}
|
|
aria-pressed={isVisible}
|
|
className="absolute end-0 top-1 flex size-9 cursor-pointer items-center justify-center rounded-e-lg text-muted-foreground/80 transition-shadow hover:text-foreground focus-visible:border focus-visible:border-ring focus-visible:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50"
|
|
onClick={toggleVisibility}
|
|
type="button"
|
|
>
|
|
{isVisible ? (
|
|
<EyeOff aria-hidden="true" size={16} strokeWidth={2} />
|
|
) : (
|
|
<Eye aria-hidden="true" size={16} strokeWidth={2} />
|
|
)}
|
|
</button>
|
|
<div
|
|
aria-label="Password strength"
|
|
aria-valuemax={maxStrength}
|
|
aria-valuemin={0}
|
|
aria-valuenow={strengthScore}
|
|
className="mt-3 mb-4 h-1 w-full overflow-hidden rounded-full bg-border"
|
|
role="progressbar"
|
|
>
|
|
<div
|
|
className={cn(
|
|
"h-full transition-all duration-500 ease-out",
|
|
getStrengthColor(strengthScore),
|
|
)}
|
|
style={{
|
|
width: `${(strengthScore / maxStrength) * 100}%`,
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</FormControl>
|
|
</FormItem>
|
|
)}
|
|
/>
|
|
<h1>La utilizzerai per accedere al tuo account</h1>
|
|
|
|
<Button disabled={!form.formState.isValid || isPending} type="submit">
|
|
Procedi
|
|
</Button>
|
|
</form>
|
|
</Form>
|
|
</div>
|
|
);
|
|
};
|
|
const AlreadyUserPage = () => {
|
|
return (
|
|
<div className="flex flex-1 flex-col items-center justify-center gap-2 text-center">
|
|
<UserSearch className="mx-auto mb-4 size-28 text-muted-foreground" />
|
|
<h1 className="font-bold text-xl">Utente già registrato</h1>
|
|
<p>L'email associata a questo invito è già registrata.</p>
|
|
<div className="flex flex-col items-center gap-4 pt-4 md:flex-row">
|
|
<Link href="/login">
|
|
<Button size="lg" variant="info">
|
|
<span>Vai al Login</span>
|
|
<ExternalLink />
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const InvalidInvitePage = ({ reason }: { reason: "not_found" | "expired" }) => {
|
|
const message =
|
|
reason === "expired"
|
|
? "L'invito è scaduto, è passato troppo tempo dall'invio."
|
|
: "Non è stato trovato alcun invito valido per questo collegamento.";
|
|
|
|
return (
|
|
<div className="flex flex-1 flex-col items-center justify-center gap-2 text-center">
|
|
<Frown className="mx-auto mb-4 size-28 text-muted-foreground" />
|
|
|
|
<h1 className="font-bold text-xl">Invito non valido</h1>
|
|
<p>{message}</p>
|
|
<div className="flex flex-col items-center gap-4 pt-4 md:flex-row">
|
|
<NewInviteDialog />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const NewInviteDialog = () => {
|
|
const { t } = useTranslation();
|
|
const [email, setEmail] = useState("");
|
|
const [open, setOpen] = useState(false);
|
|
const { mutate, isPending } = api.invite.requestNewInvite.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Email inviata! Controlla la tua casella di posta.", {
|
|
duration: 5000,
|
|
});
|
|
setOpen(false);
|
|
setEmail("");
|
|
},
|
|
onError: (error) => {
|
|
toast.error(error.message);
|
|
setOpen(false);
|
|
setEmail("");
|
|
},
|
|
});
|
|
|
|
return (
|
|
<AlertDialog onOpenChange={setOpen} open={open}>
|
|
<AlertDialogTrigger asChild>
|
|
<Button size="lg">
|
|
<span>Richiedi un nuovo invito</span>
|
|
<MailPlus />
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Inserisci il tuo indirizzo email</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Inserisci l'indirizzo email associato al tuo account per ricevere un
|
|
nuovo invito.
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
|
|
<Input
|
|
autoComplete="off"
|
|
id="email"
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
placeholder="esempio@email.com"
|
|
type="email"
|
|
value={email}
|
|
/>
|
|
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel>{t.cancella}</AlertDialogCancel>
|
|
<AlertDialogAction asChild>
|
|
<LoadingButton
|
|
disabled={!email || email.trim() === "" || !email.includes("@")}
|
|
loading={isPending}
|
|
onClick={() => mutate({ email })}
|
|
variant="default"
|
|
>
|
|
{t.procedi}
|
|
</LoadingButton>
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
);
|
|
};
|
|
export default AcceptInvitePage;
|
|
|
|
export const getServerSideProps = (async (context) => {
|
|
const token = context.params?.token;
|
|
|
|
if (typeof token !== "string") {
|
|
return {
|
|
redirect: {
|
|
destination: "/auth/nonvalid-password-reset-token",
|
|
permanent: false,
|
|
},
|
|
};
|
|
}
|
|
const e = context.query.e;
|
|
let email: string | null = null;
|
|
if (typeof e === "string") {
|
|
try {
|
|
email = atob(e);
|
|
} catch {
|
|
email = null;
|
|
}
|
|
}
|
|
|
|
const helper = generateSSGHelper();
|
|
|
|
const verification = await helper.invite.verifyInvite.fetch({ token, email });
|
|
|
|
return {
|
|
props: {
|
|
verification,
|
|
token,
|
|
},
|
|
};
|
|
}) satisfies GetServerSideProps<InviteTokenProps>;
|