mirror/fosrl.pangolin
1
0
Fork 0
mirror of https://github.com/fosrl/pangolin.git synced 2025-07-01 01:24:51 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

disable 2fa and end email notifications

Browse source
This commit is contained in:
Milo Schwartz 2024-12-24 15:36:55 -05:00
parent ccc2e3358c
commit cf75be5a6c
No known key found for this signature in database
14 changed files with 555 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

227
src/components/Disable2FaForm.tsx Normal file
View file

@ -0,0 +1,227 @@
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { createApiClient } from "@app/api";
import { useEnvContext } from "@app/hooks/useEnvContext";
import { AxiosResponse } from "axios";
import { Disable2faBody, Disable2faResponse } from "@server/routers/auth";
import { z } from "zod";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage
} from "@app/components/ui/form";
import {
Credenza,
CredenzaBody,
CredenzaClose,
CredenzaContent,
CredenzaDescription,
CredenzaFooter,
CredenzaHeader,
CredenzaTitle
} from "@app/components/Credenza";
import { useToast } from "@app/hooks/useToast";
import { formatAxiosError } from "@app/lib/utils";
import { useUserContext } from "@app/hooks/useUserContext";
import { InputOTP, InputOTPGroup, InputOTPSlot } from "./ui/input-otp";
import { REGEXP_ONLY_DIGITS_AND_CHARS } from "input-otp";
import { CheckCircle2 } from "lucide-react";
const disableSchema = z.object({
password: z.string().min(1, { message: "Password is required" }),
code: z.string().min(1, { message: "Code is required" })
});
type Disable2FaProps = {
open: boolean;
setOpen: (val: boolean) => void;
};
export default function Disable2FaForm({ open, setOpen }: Disable2FaProps) {
const [loading, setLoading] = useState(false);
const [step, setStep] = useState<"password" | "success">("password");
const { toast } = useToast();
const { user, updateUser } = useUserContext();
const api = createApiClient(useEnvContext());
const disableForm = useForm<z.infer<typeof disableSchema>>({
resolver: zodResolver(disableSchema),
defaultValues: {
password: "",
code: ""
}
});
const request2fa = async (values: z.infer<typeof disableSchema>) => {
setLoading(true);
const res = await api
.post<AxiosResponse<Disable2faResponse>>(`/auth/2fa/disable`, {
password: values.password,
code: values.code
} as Disable2faBody)
.catch((e) => {
toast({
title: "Unable to disable 2FA",
description: formatAxiosError(
e,
"An error occurred while disabling 2FA"
),
variant: "destructive"
});
});
if (res) {
// toast({
// title: "Two-factor disabled",
// description:
// "Two-factor authentication has been disabled for your account"
// });
updateUser({ twoFactorEnabled: false });
setStep("success");
}
setLoading(false);
};
return (
<Credenza
open={open}
onOpenChange={(val) => {
setOpen(val);
setLoading(false);
}}
>
<CredenzaContent>
<CredenzaHeader>
<CredenzaTitle>
Disable Two-factor Authentication
</CredenzaTitle>
<CredenzaDescription>
Disable two-factor authentication for your account
</CredenzaDescription>
</CredenzaHeader>
<CredenzaBody>
{step === "password" && (
<Form {...disableForm}>
<form
onSubmit={disableForm.handleSubmit(request2fa)}
className="space-y-4"
id="form"
>
<div className="space-y-4">
<FormField
control={disableForm.control}
name="password"
render={({ field }) => (
<FormItem>
<FormLabel>Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="Enter your password"
{...field}
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={disableForm.control}
name="code"
render={({ field }) => (
<FormItem>
<FormLabel>
Authenticator Code
</FormLabel>
<FormControl>
<InputOTP
maxLength={6}
{...field}
pattern={
REGEXP_ONLY_DIGITS_AND_CHARS
}
>
<InputOTPGroup>
<InputOTPSlot
index={0}
/>
<InputOTPSlot
index={1}
/>
<InputOTPSlot
index={2}
/>
</InputOTPGroup>
<InputOTPGroup>
<InputOTPSlot
index={3}
/>
<InputOTPSlot
index={4}
/>
<InputOTPSlot
index={5}
/>
</InputOTPGroup>
</InputOTP>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
</div>
</form>
</Form>
)}
{step === "success" && (
<div className="space-y-4 text-center">
<CheckCircle2
className="mx-auto text-green-500"
size={48}
/>
<p className="font-semibold text-lg">
Two-Factor Authentication Disabled
</p>
<p>
Two-factor authentication has been disabled for
your account. You can enable it again at any
time.
</p>
</div>
)}
</CredenzaBody>
<CredenzaFooter>
{step === "password" && (
<Button
type="submit"
form="form"
loading={loading}
disabled={loading}
>
Disable 2FA
</Button>
)}
<CredenzaClose asChild>
<Button variant="outline">Close</Button>
</CredenzaClose>
</CredenzaFooter>
</CredenzaContent>
</Credenza>
);
}