Merge pull request #493 from Dhruwang/Validation-for-Reset-Password

Add validation to password reset page, improve UX

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/IsPasswordValid.tsx

@@ -28,7 +28,7 @@ export default function IsPasswordValid({
 
   useEffect(() => {
     let newValidations = [...DEFAULT_VALIDATIONS];
-    if (password) {
+    if (password !== null) {
       newValidations = checkValidation(newValidations, 0, PASSWORD_REGEX.UPPER_AND_LOWER.test(password));
       newValidations = checkValidation(newValidations, 1, password.length >= 8);
       newValidations = checkValidation(newValidations, 2, PASSWORD_REGEX.NUMBER.test(password));

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

@@ -1,7 +1,8 @@
 "use client";
 
+import IsPasswordValid from "@/components/auth/IsPasswordValid";
 import { resetPassword } from "@/lib/users/users";
-import { Button } from "@formbricks/ui";
+import { Button, PasswordInput } from "@formbricks/ui";
 import { XCircleIcon } from "@heroicons/react/24/solid";
 import { useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
@@ -10,9 +11,13 @@ export const ResetPasswordForm = () => {
   const searchParams = useSearchParams();
   const router = useRouter();
   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");
@@ -21,6 +26,8 @@ export const ResetPasswordForm = () => {
       router.push("/auth/forgot-password/reset/success");
     } catch (e) {
       setError(e.message);
+    } finally {
+      setLoading(false);
     }
   };
 
@@ -47,18 +54,27 @@ export const ResetPasswordForm = () => {
             New password
           </label>
           <div className="mt-1">
-            <input
+            <PasswordInput
               id="password"
               name="password"
-              type="password"
+              value={password ? password : ""}
+              onChange={(e) => setPassword(e.target.value)}
+              autoComplete="current-password"
+              placeholder="*******"
               required
               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} />
           </div>
         </div>
 
         <div>
-          <Button type="submit" className="w-full justify-center">
+          <Button
+            type="submit"
+            variant="darkCTA"
+            disabled={!isValid}
+            className="w-full justify-center"
+            loading={loading}>
             Reset password
           </Button>
         </div>