feat: initial commit

components/dashboard/settings/profile/enable-2fa.tsx

@@ -0,0 +1,161 @@
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+	Form,
+	FormControl,
+	FormDescription,
+	FormField,
+	FormItem,
+	FormLabel,
+	FormMessage,
+} from "@/components/ui/form";
+import { api } from "@/utils/api";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { AlertTriangle, Fingerprint } from "lucide-react";
+import { useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { z } from "zod";
+import {
+	InputOTP,
+	InputOTPGroup,
+	InputOTPSlot,
+} from "@/components/ui/input-otp";
+
+const Enable2FASchema = z.object({
+	pin: z.string().min(6, {
+		message: "Pin is required",
+	}),
+});
+
+type Enable2FA = z.infer<typeof Enable2FASchema>;
+
+export const Enable2FA = () => {
+	const utils = api.useUtils();
+
+	const { data } = api.auth.generate2FASecret.useQuery(undefined, {
+		refetchOnWindowFocus: false,
+	});
+
+	const { mutateAsync, isLoading, error, isError } =
+		api.auth.verify2FASetup.useMutation();
+
+	const form = useForm<Enable2FA>({
+		defaultValues: {
+			pin: "",
+		},
+		resolver: zodResolver(Enable2FASchema),
+	});
+
+	useEffect(() => {
+		form.reset({
+			pin: "",
+		});
+	}, [form, form.reset, form.formState.isSubmitSuccessful]);
+
+	const onSubmit = async (formData: Enable2FA) => {
+		await mutateAsync({
+			pin: formData.pin,
+			secret: data?.secret || "",
+		})
+			.then(async () => {
+				toast.success("2FA Verified");
+				utils.auth.get.invalidate();
+			})
+			.catch(() => {
+				toast.error("Error to verify the 2FA");
+			});
+	};
+	return (
+		<Dialog>
+			<DialogTrigger asChild>
+				<Button variant="ghost">
+					<Fingerprint className="size-4 text-muted-foreground" />
+					Enable 2FA
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="max-h-screen max-sm:overflow-y-auto sm:max-w-xl ">
+				<DialogHeader>
+					<DialogTitle>2FA Setup</DialogTitle>
+					<DialogDescription>Add a 2FA to your account</DialogDescription>
+				</DialogHeader>
+				{isError && (
+					<div className="flex flex-row gap-4 rounded-lg items-center bg-red-50 p-2 dark:bg-red-950">
+						<AlertTriangle className="text-red-600 dark:text-red-400" />
+						<span className="text-sm text-red-600 dark:text-red-400">
+							{error?.message}
+						</span>
+					</div>
+				)}
+				<Form {...form}>
+					<form
+						id="hook-form-add-2FA"
+						onSubmit={form.handleSubmit(onSubmit)}
+						className="grid sm:grid-cols-2 w-full gap-4"
+					>
+						<div className="flex flex-col gap-4 justify-center items-center">
+							<span className="text-sm text-muted-foreground">
+								{data?.qrCodeUrl ? "Scan the QR code to add 2FA" : ""}
+							</span>
+							<img
+								src={data?.qrCodeUrl}
+								alt="qrCode"
+								className="rounded-lg w-fit"
+							/>
+							<div className="flex flex-col gap-2">
+								<span className="text-sm text-muted-foreground text-center">
+									{data?.secret ? `Secret: ${data?.secret}` : ""}
+								</span>
+							</div>
+						</div>
+
+						<FormField
+							control={form.control}
+							name="pin"
+							render={({ field }) => (
+								<FormItem className="flex flex-col justify-center max-sm:items-center">
+									<FormLabel>Pin</FormLabel>
+									<FormControl>
+										<InputOTP maxLength={6} {...field}>
+											<InputOTPGroup>
+												<InputOTPSlot index={0} />
+												<InputOTPSlot index={1} />
+												<InputOTPSlot index={2} />
+												<InputOTPSlot index={3} />
+												<InputOTPSlot index={4} />
+												<InputOTPSlot index={5} />
+											</InputOTPGroup>
+										</InputOTP>
+									</FormControl>
+									<FormDescription className="max-md:text-center">
+										Please enter the 6 digits code provided by your
+										authenticator app.
+									</FormDescription>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+					</form>
+
+					<DialogFooter>
+						<Button
+							isLoading={isLoading}
+							form="hook-form-add-2FA"
+							type="submit"
+						>
+							Submit 2FA
+						</Button>
+					</DialogFooter>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+};