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>

autogpt_platform/frontend/src/app/login/page.tsx

@@ -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>
   );

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<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="[email protected]" {...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>
+  );
+}