mirror of
https://github.com/Significant-Gravitas/Auto-GPT.git
synced 2025-01-07 03:17:23 +08:00
feat(frontend): Reset password page (#8987)
Currently, users have no way to reset their password. ### Changes 🏗️ Add `reset_password` page that displays either form to send reset password email or lets logged in user change their password. Login page now shows clickable "Forgot your password?" link. After updating password user is logged out and redirected to login page. Note: Link provided in the email just logs user in and redirects to reset password form but password update isn't enforced. <img width="279" alt="Screenshot 2024-12-14 at 1 28 39 PM" src="https://github.com/user-attachments/assets/c7ada10c-74e5-4be3-8033-0912eb5b38f2" /> ### Checklist 📋 #### For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - [x] Email is sent - [x] Link in the email logs user in and redirects to reset password form - [x] Reset password form works <details> <summary>Example test plan</summary> - [ ] Create from scratch and execute an agent with at least 3 blocks - [ ] Import an agent from file upload, and confirm it executes correctly - [ ] Upload agent to marketplace - [ ] Import an agent from marketplace and confirm it executes correctly - [ ] Edit an agent from monitor, and confirm it executes correctly </details> #### For configuration changes: - [ ] `.env.example` is updated or already compatible with my changes - [ ] `docker-compose.yml` is updated or already compatible with my changes - [ ] I have included a list of my configuration changes in the PR description (under **Changes**) <details> <summary>Examples of configuration changes</summary> - Changing ports - Adding new services that need to communicate with each other - Secrets or environment variable changes - New or infrastructure changes such as databases </details>
This commit is contained in:
Krzysztof Czerwinski
GitHub
parent
4d19bcdc5e
commit
0e10e62bfa
@ -235,6 +235,9 @@ export default function LoginPage() {
|
||||
</form>
|
||||
<p className="text-sm text-red-500">{feedback}</p>
|
||||
</Form>
|
||||
<Link href="/reset_password" className="text-sm">
|
||||
Forgot your password?
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
216
autogpt_platform/frontend/src/app/reset_password/page.tsx
Normal file
216
autogpt_platform/frontend/src/app/reset_password/page.tsx
Normal file
@ -0,0 +1,216 @@
|
||||
"use client";
|
||||
import { useSupabase } from "@/components/providers/SupabaseProvider";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import useUser from "@/hooks/useUser";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { FaSpinner } from "react-icons/fa";
|
||||
import { z } from "zod";
|
||||
|
||||
const emailFormSchema = z.object({
|
||||
email: z.string().email().min(2).max(64),
|
||||
});
|
||||
|
||||
const resetPasswordFormSchema = z
|
||||
.object({
|
||||
password: z.string().min(6).max(64),
|
||||
confirmPassword: z.string().min(6).max(64),
|
||||
})
|
||||
.refine((data) => data.password === data.confirmPassword, {
|
||||
message: "Passwords don't match",
|
||||
path: ["confirmPassword"],
|
||||
});
|
||||
|
||||
export default function ResetPasswordPage() {
|
||||
const { supabase, isLoading: isSupabaseLoading } = useSupabase();
|
||||
const { user, isLoading: isUserLoading } = useUser();
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [feedback, setFeedback] = useState<string | null>(null);
|
||||
|
||||
const emailForm = useForm<z.infer<typeof emailFormSchema>>({
|
||||
resolver: zodResolver(emailFormSchema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
},
|
||||
});
|
||||
|
||||
const resetPasswordForm = useForm<z.infer<typeof resetPasswordFormSchema>>({
|
||||
resolver: zodResolver(resetPasswordFormSchema),
|
||||
defaultValues: {
|
||||
password: "",
|
||||
confirmPassword: "",
|
||||
},
|
||||
});
|
||||
|
||||
if (isUserLoading || isSupabaseLoading) {
|
||||
return (
|
||||
<div className="flex h-[80vh] items-center justify-center">
|
||||
<FaSpinner className="mr-2 h-16 w-16 animate-spin" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!supabase) {
|
||||
return (
|
||||
<div>
|
||||
User accounts are disabled because Supabase client is unavailable
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
async function onSendEmail(d: z.infer<typeof emailFormSchema>) {
|
||||
setIsLoading(true);
|
||||
setFeedback(null);
|
||||
|
||||
if (!(await emailForm.trigger())) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, error } = await supabase!.auth.resetPasswordForEmail(
|
||||
d.email,
|
||||
{
|
||||
redirectTo: `${window.location.origin}/reset_password`,
|
||||
},
|
||||
);
|
||||
|
||||
if (error) {
|
||||
setFeedback(error.message);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
setFeedback("Password reset email sent. Please check your email.");
|
||||
setIsLoading(false);
|
||||
}
|
||||
|
||||
async function onResetPassword(d: z.infer<typeof resetPasswordFormSchema>) {
|
||||
setIsLoading(true);
|
||||
setFeedback(null);
|
||||
|
||||
if (!(await resetPasswordForm.trigger())) {
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const { data, error } = await supabase!.auth.updateUser({
|
||||
password: d.password,
|
||||
});
|
||||
|
||||
if (error) {
|
||||
setFeedback(error.message);
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
await supabase!.auth.signOut();
|
||||
router.push("/login");
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-full flex-col items-center justify-center">
|
||||
<div className="w-full max-w-md">
|
||||
<h1 className="text-center text-3xl font-bold">Reset Password</h1>
|
||||
{user ? (
|
||||
<form
|
||||
onSubmit={resetPasswordForm.handleSubmit(onResetPassword)}
|
||||
className="mt-6 space-y-6"
|
||||
>
|
||||
<Form {...resetPasswordForm}>
|
||||
<FormField
|
||||
control={resetPasswordForm.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-4">
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<FormField
|
||||
control={resetPasswordForm.control}
|
||||
name="confirmPassword"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb">
|
||||
<FormLabel>Confirm Password</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
type="password"
|
||||
placeholder="password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={isLoading}
|
||||
onClick={() => onResetPassword(resetPasswordForm.getValues())}
|
||||
>
|
||||
{isLoading ? <FaSpinner className="mr-2 animate-spin" /> : null}
|
||||
Reset Password
|
||||
</Button>
|
||||
</Form>
|
||||
</form>
|
||||
) : (
|
||||
<form
|
||||
onSubmit={emailForm.handleSubmit(onSendEmail)}
|
||||
className="mt-6 space-y-6"
|
||||
>
|
||||
<Form {...emailForm}>
|
||||
<FormField
|
||||
control={emailForm.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem className="mb-4">
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="user@email.com" {...field} />
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full"
|
||||
disabled={isLoading}
|
||||
onClick={() => onSendEmail(emailForm.getValues())}
|
||||
>
|
||||
{isLoading ? <FaSpinner className="mr-2 animate-spin" /> : null}
|
||||
Send Reset Email
|
||||
</Button>
|
||||
{feedback ? (
|
||||
<div className="text-center text-sm text-red-500">
|
||||
{feedback}
|
||||
</div>
|
||||
) : null}
|
||||
</Form>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user