From 0e10e62bfa1f9eb23f7ba84c632f15d9a2fe63a0 Mon Sep 17 00:00:00 2001 From: Krzysztof Czerwinski <34861343+kcze@users.noreply.github.com> Date: Tue, 17 Dec 2024 18:30:18 +0000 Subject: [PATCH] feat(frontend): Reset password page (#8987) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. Screenshot 2024-12-14 at 1 28 39 PM ### 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
Example test plan - [ ] 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
#### 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**)
Examples of configuration changes - Changing ports - Adding new services that need to communicate with each other - Secrets or environment variable changes - New or infrastructure changes such as databases
--- .../frontend/src/app/login/page.tsx | 3 + .../frontend/src/app/reset_password/page.tsx | 216 ++++++++++++++++++ 2 files changed, 219 insertions(+) create mode 100644 autogpt_platform/frontend/src/app/reset_password/page.tsx diff --git a/autogpt_platform/frontend/src/app/login/page.tsx b/autogpt_platform/frontend/src/app/login/page.tsx index ebb2a550b..dd1fd767c 100644 --- a/autogpt_platform/frontend/src/app/login/page.tsx +++ b/autogpt_platform/frontend/src/app/login/page.tsx @@ -235,6 +235,9 @@ export default function LoginPage() {

{feedback}

+ + Forgot your password? + ); diff --git a/autogpt_platform/frontend/src/app/reset_password/page.tsx b/autogpt_platform/frontend/src/app/reset_password/page.tsx new file mode 100644 index 000000000..45a17cb49 --- /dev/null +++ b/autogpt_platform/frontend/src/app/reset_password/page.tsx @@ -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(null); + + const emailForm = useForm>({ + resolver: zodResolver(emailFormSchema), + defaultValues: { + email: "", + }, + }); + + const resetPasswordForm = useForm>({ + resolver: zodResolver(resetPasswordFormSchema), + defaultValues: { + password: "", + confirmPassword: "", + }, + }); + + if (isUserLoading || isSupabaseLoading) { + return ( +
+ +
+ ); + } + + if (!supabase) { + return ( +
+ User accounts are disabled because Supabase client is unavailable +
+ ); + } + + async function onSendEmail(d: z.infer) { + 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) { + 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 ( +
+
+

Reset Password

+ {user ? ( +
+ + ( + + Password + + + + + + )} + /> + ( + + Confirm Password + + + + + + )} + /> + + + + ) : ( +
+ + ( + + Email + + + + + + )} + /> + + {feedback ? ( +
+ {feedback} +
+ ) : null} + + + )} +
+
+ ); +}