1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
import { useEffect, useState } from "react";
import { ActionButton } from "@/components/ui/action-button";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogClose,
DialogContent,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { toast } from "@/components/ui/use-toast";
import { api } from "@/lib/trpc"; // Adjust the import path as needed
import { zodResolver } from "@hookform/resolvers/zod";
import { TRPCClientError } from "@trpc/client";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { resetPasswordSchema } from "@hoarder/shared/types/admin";
interface ResetPasswordDialogProps {
userId: string;
children?: React.ReactNode;
}
type ResetPasswordSchema = z.infer<typeof resetPasswordSchema>;
export default function ResetPasswordDialog({
children,
userId,
}: ResetPasswordDialogProps) {
const [isOpen, onOpenChange] = useState(false);
const form = useForm<ResetPasswordSchema>({
resolver: zodResolver(resetPasswordSchema),
defaultValues: {
userId,
newPassword: "",
newPasswordConfirm: "",
},
});
const { mutate, isPending } = api.admin.resetPassword.useMutation({
onSuccess: () => {
toast({
description: "Password reset successfully",
});
onOpenChange(false);
},
onError: (error) => {
if (error instanceof TRPCClientError) {
toast({
variant: "destructive",
description: error.message,
});
} else {
toast({
variant: "destructive",
description: "Failed to reset password",
});
}
},
});
useEffect(() => {
if (isOpen) {
form.reset();
}
}, [isOpen, form]);
return (
<Dialog open={isOpen} onOpenChange={onOpenChange}>
<DialogTrigger asChild>{children}</DialogTrigger>
<DialogContent>
<DialogHeader>
<DialogTitle>Reset Password</DialogTitle>
</DialogHeader>
<Form {...form}>
<form onSubmit={form.handleSubmit((val) => mutate(val))}>
<div className="flex w-full flex-col space-y-2">
<FormField
control={form.control}
name="newPassword"
render={({ field }) => (
<FormItem>
<FormLabel>New Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="New Password"
{...field}
className="w-full rounded border p-2"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="newPasswordConfirm"
render={({ field }) => (
<FormItem>
<FormLabel>Confirm New Password</FormLabel>
<FormControl>
<Input
type="password"
placeholder="Confirm New Password"
{...field}
className="w-full rounded border p-2"
/>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<DialogFooter className="sm:justify-end">
<DialogClose asChild>
<Button type="button" variant="secondary">
Close
</Button>
</DialogClose>
<ActionButton
type="submit"
loading={isPending}
disabled={isPending}
>
Reset
</ActionButton>
</DialogFooter>
</div>
</form>
</Form>
</DialogContent>
</Dialog>
);
}
|
