added real-time password validation to signup form.

messages/en-US.json

@@ -834,6 +834,24 @@
     "pincodeRequirementsLength": "PIN must be exactly 6 digits",
     "pincodeRequirementsChars": "PIN must only contain numbers",
     "passwordRequirementsLength": "Password must be at least 1 character long",
+    "passwordRequirementsTitle": "Password requirements:",
+    "passwordRequirementLength": "At least 8 characters long",
+    "passwordRequirementUppercase": "At least one uppercase letter",
+    "passwordRequirementLowercase": "At least one lowercase letter",
+    "passwordRequirementNumber": "At least one number",
+    "passwordRequirementSpecial": "At least one special character",
+    "passwordRequirementsMet": "✓ Password meets all requirements",
+    "passwordStrength": "Password strength",
+    "passwordStrengthWeak": "Weak",
+    "passwordStrengthMedium": "Medium",
+    "passwordStrengthStrong": "Strong",
+    "passwordRequirements": "Requirements:",
+    "passwordRequirementLengthText": "8+ characters",
+    "passwordRequirementUppercaseText": "Uppercase letter (A-Z)",
+    "passwordRequirementLowercaseText": "Lowercase letter (a-z)",
+    "passwordRequirementNumberText": "Number (0-9)",
+    "passwordRequirementSpecialText": "Special character (!@#$%...)",
+    "passwordsDoNotMatch": "Passwords do not match",
     "otpEmailRequirementsLength": "OTP must be at least 1 character long",
     "otpEmailSent": "OTP Sent",
     "otpEmailSentDescription": "An OTP has been sent to your email",

src/app/auth/signup/SignupForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
@@ -23,6 +23,7 @@ import {
     CardTitle
 } from "@/components/ui/card";
 import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Progress } from "@/components/ui/progress";
 import { SignUpResponse } from "@server/routers/auth";
 import { useRouter } from "next/navigation";
 import { passwordSchema } from "@server/auth/passwordSchema";
@@ -35,6 +36,40 @@ import { cleanRedirect } from "@app/lib/cleanRedirect";
 import { useTranslations } from "next-intl";
 import BrandingLogo from "@app/components/BrandingLogo";
 import { build } from "@server/build";
+import { Check, X } from "lucide-react";
+import { cn } from "@app/lib/cn";
+
+// Password strength calculation
+const calculatePasswordStrength = (password: string) => {
+    const requirements = {
+        length: password.length >= 8,
+        uppercase: /[A-Z]/.test(password),
+        lowercase: /[a-z]/.test(password),
+        number: /[0-9]/.test(password),
+        special: /[~!`@#$%^&*()_\-+={}[\]|\\:;"'<>,.\/?]/.test(password)
+    };
+
+    const score = Object.values(requirements).filter(Boolean).length;
+    let strength: "weak" | "medium" | "strong" = "weak";
+    let color = "bg-red-500";
+    let percentage = 0;
+
+    if (score >= 5) {
+        strength = "strong";
+        color = "bg-green-500";
+        percentage = 100;
+    } else if (score >= 3) {
+        strength = "medium";
+        color = "bg-yellow-500";
+        percentage = 60;
+    } else if (score >= 1) {
+        strength = "weak";
+        color = "bg-red-500";
+        percentage = 30;
+    }
+
+    return { requirements, strength, color, percentage, score };
+};
 
 type SignupFormProps = {
     redirect?: string;
@@ -71,14 +106,14 @@ export default function SignupForm({
     inviteToken
 }: SignupFormProps) {
     const router = useRouter();
-
+    const api = createApiClient(useEnvContext());
-    const { env } = useEnvContext();
+    const t = useTranslations();
-
-    const api = createApiClient({ env });
 
     const [loading, setLoading] = useState(false);
     const [error, setError] = useState<string | null>(null);
     const [termsAgreedAt, setTermsAgreedAt] = useState<string | null>(null);
+    const [passwordValue, setPasswordValue] = useState("");
+    const [confirmPasswordValue, setConfirmPasswordValue] = useState("");
 
     const form = useForm<z.infer<typeof formSchema>>({
         resolver: zodResolver(formSchema),
@@ -87,10 +122,12 @@ export default function SignupForm({
             password: "",
             confirmPassword: "",
             agreeToTerms: false
-        }
+        },
+        mode: "onChange" // Enable real-time validation
     });
 
-    const t = useTranslations();
+    const passwordStrength = calculatePasswordStrength(passwordValue);
+    const doPasswordsMatch = passwordValue.length > 0 && confirmPasswordValue.length > 0 && passwordValue === confirmPasswordValue;
 
     async function onSubmit(values: z.infer<typeof formSchema>) {
         const { email, password } = values;
@@ -183,11 +220,128 @@ export default function SignupForm({
                             name="password"
                             render={({ field }) => (
                                 <FormItem>
+                                    <div className="flex items-center gap-2">
                                         <FormLabel>{t("password")}</FormLabel>
+                                        {passwordStrength.strength === "strong" && (
+                                            <Check className="h-4 w-4 text-green-500" />
+                                        )}
+                                    </div>
                                     <FormControl>
-                                        <Input type="password" {...field} />
+                                        <div className="relative">
+                                            <Input
+                                                type="password"
+                                                {...field}
+                                                onChange={(e) => {
+                                                    field.onChange(e);
+                                                    setPasswordValue(e.target.value);
+                                                }}
+                                                className={cn(
+                                                    passwordStrength.strength === "strong" && "border-green-500 focus-visible:ring-green-500",
+                                                    passwordStrength.strength === "medium" && "border-yellow-500 focus-visible:ring-yellow-500",
+                                                    passwordStrength.strength === "weak" && passwordValue.length > 0 && "border-red-500 focus-visible:ring-red-500"
+                                                )}
+                                                autoComplete="new-password"
+                                            />
+                                        </div>
                                     </FormControl>
-                                    <FormMessage />
+                                    
+                                    {passwordValue.length > 0 && (
+                                        <div className="space-y-3 mt-2">
+                                            {/* Password Strength Meter */}
+                                            <div className="space-y-2">
+                                                <div className="flex justify-between items-center">
+                                                    <span className="text-sm font-medium text-foreground">{t("passwordStrength")}</span>
+                                                    <span className={cn(
+                                                        "text-sm font-semibold",
+                                                        passwordStrength.strength === "strong" && "text-green-600 dark:text-green-400",
+                                                        passwordStrength.strength === "medium" && "text-yellow-600 dark:text-yellow-400",
+                                                        passwordStrength.strength === "weak" && "text-red-600 dark:text-red-400"
+                                                    )}>
+                                                        {t(`passwordStrength${passwordStrength.strength.charAt(0).toUpperCase() + passwordStrength.strength.slice(1)}`)}
+                                                    </span>
+                                                </div>
+                                                <Progress 
+                                                    value={passwordStrength.percentage} 
+                                                    className="h-2"
+                                                />
+                                            </div>
+                                            
+                                            {/* Requirements Checklist */}
+                                            <div className="bg-muted rounded-lg p-3 space-y-2">
+                                                <div className="text-sm font-medium text-foreground mb-2">{t("passwordRequirements")}</div>
+                                                <div className="grid grid-cols-1 gap-1.5">
+                                                    <div className="flex items-center gap-2">
+                                                        {passwordStrength.requirements.length ? (
+                                                            <Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                                        ) : (
+                                                            <X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                        )}
+                                                        <span className={cn(
+                                                            "text-sm",
+                                                            passwordStrength.requirements.length ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
+                                                        )}>
+                                                            {t("passwordRequirementLengthText")}
+                                                        </span>
+                                                    </div>
+                                                    <div className="flex items-center gap-2">
+                                                        {passwordStrength.requirements.uppercase ? (
+                                                            <Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                                        ) : (
+                                                            <X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                        )}
+                                                        <span className={cn(
+                                                            "text-sm",
+                                                            passwordStrength.requirements.uppercase ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
+                                                        )}>
+                                                            {t("passwordRequirementUppercaseText")}
+                                                        </span>
+                                                    </div>
+                                                    <div className="flex items-center gap-2">
+                                                        {passwordStrength.requirements.lowercase ? (
+                                                            <Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                                        ) : (
+                                                            <X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                        )}
+                                                        <span className={cn(
+                                                            "text-sm",
+                                                            passwordStrength.requirements.lowercase ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
+                                                        )}>
+                                                            {t("passwordRequirementLowercaseText")}
+                                                        </span>
+                                                    </div>
+                                                    <div className="flex items-center gap-2">
+                                                        {passwordStrength.requirements.number ? (
+                                                            <Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                                        ) : (
+                                                            <X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                        )}
+                                                        <span className={cn(
+                                                            "text-sm",
+                                                            passwordStrength.requirements.number ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
+                                                        )}>
+                                                            {t("passwordRequirementNumberText")}
+                                                        </span>
+                                                    </div>
+                                                    <div className="flex items-center gap-2">
+                                                        {passwordStrength.requirements.special ? (
+                                                            <Check className="h-3.5 w-3.5 text-green-500 flex-shrink-0" />
+                                                        ) : (
+                                                            <X className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
+                                                        )}
+                                                        <span className={cn(
+                                                            "text-sm",
+                                                            passwordStrength.requirements.special ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
+                                                        )}>
+                                                            {t("passwordRequirementSpecialText")}
+                                                        </span>
+                                                    </div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )}
+                                    
+                                    {/* Only show FormMessage when not showing our custom requirements */}
+                                    {passwordValue.length === 0 && <FormMessage />}
                                 </FormItem>
                             )}
                         />
@@ -196,13 +350,36 @@ export default function SignupForm({
                             name="confirmPassword"
                             render={({ field }) => (
                                 <FormItem>
-                                    <FormLabel>
+                                    <div className="flex items-center gap-2">
-                                        {t("confirmPassword")}
+                                        <FormLabel>{t('confirmPassword')}</FormLabel>
-                                    </FormLabel>
+                                        {doPasswordsMatch && (
+                                            <Check className="h-4 w-4 text-green-500" />
+                                        )}
+                                    </div>
                                     <FormControl>
-                                        <Input type="password" {...field} />
+                                        <div className="relative">
+                                            <Input
+                                                type="password"
+                                                {...field}
+                                                onChange={(e) => {
+                                                    field.onChange(e);
+                                                    setConfirmPasswordValue(e.target.value);
+                                                }}
+                                                className={cn(
+                                                    doPasswordsMatch && "border-green-500 focus-visible:ring-green-500",
+                                                    confirmPasswordValue.length > 0 && !doPasswordsMatch && "border-red-500 focus-visible:ring-red-500"
+                                                )}
+                                                autoComplete="new-password"
+                                            />
+                                        </div>
                                     </FormControl>
-                                    <FormMessage />
+                                    {confirmPasswordValue.length > 0 && !doPasswordsMatch && (
+                                        <p className="text-sm text-red-600 mt-1">
+                                            {t("passwordsDoNotMatch")}
+                                        </p>
+                                    )}
+                                    {/* Only show FormMessage when field is empty */}
+                                    {confirmPasswordValue.length === 0 && <FormMessage />}
                                 </FormItem>
                             )}
                         />