add loading states, clarify naming

apps/web/app/auth/forgot-password/page.tsx

@@ -1,4 +1,4 @@
-import { PasswordResetForm } from "../../../components/auth/PasswordResetForm";
+import { PasswordResetForm } from "../../../components/auth/RequestPasswordResetForm";
 import FormWrapper from "@/components/auth/FormWrapper";
 
 const ForgotPasswordPage: React.FC = () => {

apps/web/app/auth/forgot-password/reset/success/page.tsx

@@ -5,7 +5,7 @@ export default function ResetPasswordSuccessPage() {
   return (
     <FormWrapper>
       <div>
-        <h1 className="leading-2 mb-4 text-center font-bold">Password successfully reset</h1>
+        <h1 className="leading-2 mb-4 text-center font-bold">Password successfully reset.</h1>
         <p className="text-center">You can now log in with your new password</p>
         <div className="mt-3 text-center">
           <BackToLoginButton />

apps/web/components/auth/RequestPasswordResetForm.tsx

@@ -9,14 +9,18 @@ import { useState } from "react";
 export const PasswordResetForm = ({}) => {
   const router = useRouter();
   const [error, setError] = useState<string>("");
+  const [loading, setLoading] = useState<boolean>(false);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
+    setLoading(true);
     try {
       await forgotPassword(e.target.elements.email.value);
-
       router.push("/auth/forgot-password/email-sent");
     } catch (e) {
       setError(e.message);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -55,7 +59,7 @@ export const PasswordResetForm = ({}) => {
         </div>
 
         <div>
-          <Button type="submit" className="w-full justify-center">
+          <Button type="submit" variant="darkCTA" className="w-full justify-center" loading={loading}>
             Reset password
           </Button>
           <div className="mt-3 text-center">

apps/web/components/auth/ResetPasswordForm.tsx

@@ -13,9 +13,11 @@ export const ResetPasswordForm = () => {
   const [error, setError] = useState<string>("");
   const [password, setPassword] = useState<string | null>(null);
   const [isValid, setIsValid] = useState(false);
+  const [loading, setLoading] = useState<boolean>(false);
 
   const handleSubmit = async (e) => {
     e.preventDefault();
+    setLoading(true);
     const token = searchParams?.get("token");
     try {
       if (!token) throw new Error("No token provided");
@@ -24,6 +26,8 @@ export const ResetPasswordForm = () => {
       router.push("/auth/forgot-password/reset/success");
     } catch (e) {
       setError(e.message);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -58,14 +62,19 @@ export const ResetPasswordForm = () => {
               autoComplete="current-password"
               placeholder="*******"
               required
-              className="focus:border-brand focus:ring-brand block w-full rounded-md shadow-sm border-slate-300 sm:text-sm"
+              className="focus:border-brand focus:ring-brand block w-full rounded-md border-slate-300 shadow-sm sm:text-sm"
             />
-             <IsPasswordValid password={password} setIsValid={setIsValid} />
+            <IsPasswordValid password={password} setIsValid={setIsValid} />
           </div>
         </div>
 
         <div>
-          <Button type="submit" variant="darkCTA" disabled={!isValid} className="w-full justify-center">
+          <Button
+            type="submit"
+            variant="darkCTA"
+            disabled={!isValid}
+            className="w-full justify-center"
+            loading={loading}>
             Reset password
           </Button>
         </div>