chore: password reg (#310)

Author: cgoinglove

package.json

@@ -153,10 +153,7 @@
     "vitest": "^3.2.4"
   },
   "lint-staged": {
-    "*.{js,json,mjs,ts,yaml,tsx,css}": [
-      "pnpm format",
-      "pnpm lint:fix"
-    ]
+    "*.{js,json,mjs,ts,yaml,tsx,css}": ["pnpm format", "pnpm lint:fix"]
   },
   "packageManager": "[email protected]",
   "engines": {

src/components/auth/email-sign-up.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/card";
 import { useObjectState } from "@/hooks/use-object-state";
 import { cn } from "lib/utils";
-import { ChevronLeft, Loader } from "lucide-react";
+import { ChevronLeft, Loader, Check, X } from "lucide-react";
 import { toast } from "sonner";
 import { safe } from "ts-safe";
 import { UserZodSchema } from "app-types/user";
@@ -42,6 +42,16 @@ export default function EmailSignUp({
     t("Auth.SignUp.step3"),
   ];
 
+  // Password validation checklist
+  const passwordValidation = useMemo(() => {
+    const password = formData.password;
+    return {
+      hasMinLength: password.length >= 8 && password.length <= 20,
+      hasLetter: /[a-zA-Z]/.test(password),
+      hasNumber: /\d/.test(password),
+    };
+  }, [formData.password]);
+
   const safeProcessWithLoading = function <T>(fn: () => Promise<T>) {
     setIsLoading(true);
     return safe(() => fn()).watch(() => setIsLoading(false));
@@ -195,6 +205,58 @@ export default function EmailSignUp({
                 onChange={(e) => setFormData({ password: e.target.value })}
                 required
               />
+              {formData.password && (
+                <div className="space-y-1 mt-2">
+                  <div className="flex items-center gap-2 text-xs">
+                    {passwordValidation.hasMinLength ? (
+                      <Check className="size-3 text-primary" />
+                    ) : (
+                      <X className="size-3 text-destructive" />
+                    )}
+                    <span
+                      className={
+                        passwordValidation.hasMinLength
+                          ? "text-primary"
+                          : "text-muted-foreground"
+                      }
+                    >
+                      8-20 characters
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2 text-xs">
+                    {passwordValidation.hasLetter ? (
+                      <Check className="size-3 text-primary" />
+                    ) : (
+                      <X className="size-3 text-destructive" />
+                    )}
+                    <span
+                      className={
+                        passwordValidation.hasLetter
+                          ? "text-primary"
+                          : "text-muted-foreground"
+                      }
+                    >
+                      At least one letter
+                    </span>
+                  </div>
+                  <div className="flex items-center gap-2 text-xs">
+                    {passwordValidation.hasNumber ? (
+                      <Check className="size-3 text-primary" />
+                    ) : (
+                      <X className="size-3 text-destructive" />
+                    )}
+                    <span
+                      className={
+                        passwordValidation.hasNumber
+                          ? "text-primary"
+                          : "text-muted-foreground"
+                      }
+                    >
+                      At least one number
+                    </span>
+                  </div>
+                </div>
+              )}
             </div>
           )}
           <p className="text-muted-foreground text-xs mb-6">

src/lib/validations/password.ts

@@ -2,11 +2,11 @@ import { z } from "zod";
 
 export const passwordRegexPattern =
   process.env.NEXT_PUBLIC_PASSWORD_REGEX_PATTERN ||
-  "^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[!@#$%^&*()_+\\-=\\[\\]{};':\"\\\\|,.<>\\/?]).{8,20}$";
+  "^(?=.*[a-zA-Z])(?=.*\\d)[a-zA-Z\\d!@#$%^&*()_+\\-=\\[\\]{};':\"\\\\|,.<>\\/?]{8,20}$";
 
 export const passwordRequirementsText =
   process.env.NEXT_PUBLIC_PASSWORD_REQUIREMENTS_TEXT ||
-  "Password must be 8-20 characters and contain at least one uppercase letter, one lowercase letter, one number, and one special character.";
+  "Password must be 8-20 characters and contain at least one letter and one number.";
 
 // Shared password validation schema
 export const passwordSchema = z

tests/auth/signup.spec.ts

@@ -8,7 +8,7 @@ test.describe("User Signup", () => {
       Date.now().toString(36) + Math.random().toString(36).slice(2, 8);
     const testEmail = `playwright.signup.${uniqueSuffix}@example.com`;
     const testName = `Signup Test User ${uniqueSuffix}`;
-    const testPassword = "SignupTest123!";
+    const testPassword = "SignupTest123";
 
     // Navigate to sign-up page
     await page.goto("/sign-up");
@@ -206,8 +206,8 @@ test.describe("User Signup", () => {
     await expect(passwordInput).toBeVisible();
     await expect(page.getByText(/Step 3 of 3/i)).toBeVisible();
 
-    // Try weak password
-    await passwordInput.fill("weak");
+    // Try weak password (no number)
+    await passwordInput.fill("abcdefgh");
 
     const createButton = page.getByRole("button", {
       name: "Create account",
@@ -219,9 +219,9 @@ test.describe("User Signup", () => {
     await expect(passwordInput).toBeVisible();
     await expect(page.getByText(/Step 3 of 3/i)).toBeVisible();
 
-    // Try with strong password
+    // Try with strong password (letter + number, no special char required)
     await passwordInput.clear();
-    await passwordInput.fill("Strong123!");
+    await passwordInput.fill("Test1234");
     await createButton.click();
 
     // Should either succeed or show server validation error