improve set password dialog

- add field to verify old password
- add password strength requirements

web/src/components/overlay/SetPasswordDialog.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import { Button } from "../ui/button";
 import { Input } from "../ui/input";
 import { useState, useEffect } from "react";
@@ -13,13 +11,16 @@ import {
 } from "../ui/dialog";
 
 import { Label } from "../ui/label";
-import { LuCheck, LuX } from "react-icons/lu";
+import { LuCheck, LuX, LuEye, LuEyeOff } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
+import ActivityIndicator from "../indicators/activity-indicator";
 
 type SetPasswordProps = {
   show: boolean;
-  onSave: (password: string) => void;
+  onSave: (password: string, oldPassword?: string) => void;
   onCancel: () => void;
+  onVerifyOldPassword?: (oldPassword: string) => Promise<boolean>;
+  initialError?: string | null;
   username?: string;
 };
 
@@ -27,24 +28,48 @@ export default function SetPasswordDialog({
   show,
   onSave,
   onCancel,
+  onVerifyOldPassword,
+  initialError,
   username,
 }: SetPasswordProps) {
   const { t } = useTranslation(["views/settings"]);
+  const [oldPassword, setOldPassword] = useState<string>("");
   const [password, setPassword] = useState<string>("");
   const [confirmPassword, setConfirmPassword] = useState<string>("");
   const [passwordStrength, setPasswordStrength] = useState<number>(0);
   const [error, setError] = useState<string | null>(null);
+  const [isValidatingOldPassword, setIsValidatingOldPassword] =
+    useState<boolean>(false);
+
+  // visibility toggles for password fields
+  const [showOldPassword, setShowOldPassword] = useState<boolean>(false);
+  const [showPasswordVisible, setShowPasswordVisible] =
+    useState<boolean>(false);
+  const [showConfirmPassword, setShowConfirmPassword] =
+    useState<boolean>(false);
+
+  // Password strength requirements
+
+  const requirements = {
+    length: password.length >= 8,
+    uppercase: /[A-Z]/.test(password),
+    digit: /\d/.test(password),
+    special: /[!@#$%^&*(),.?":{}|<>]/.test(password),
+  };
 
   // Reset state when dialog opens/closes
+
   useEffect(() => {
     if (show) {
+      setOldPassword("");
       setPassword("");
       setConfirmPassword("");
-      setError(null);
+      setError(initialError || null);
     }
-  }, [show]);
+  }, [show, initialError]);
+
+  // Password strength calculation
 
-  // Simple password strength calculation
   useEffect(() => {
     if (!password) {
       setPasswordStrength(0);
@@ -52,30 +77,70 @@ export default function SetPasswordDialog({
     }
 
     let strength = 0;
-    // Length check
+    if (requirements.length) strength += 1;
-    if (password.length >= 8) strength += 1;
+    if (requirements.digit) strength += 1;
-    // Contains number
+    if (requirements.special) strength += 1;
-    if (/\d/.test(password)) strength += 1;
+    if (requirements.uppercase) strength += 1;
-    // Contains special char
-    if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) strength += 1;
-    // Contains uppercase
-    if (/[A-Z]/.test(password)) strength += 1;
 
     setPasswordStrength(strength);
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [password]);
 
-  const handleSave = () => {
+  const handleSave = async () => {
     if (!password) {
       setError(t("users.dialog.passwordSetting.cannotBeEmpty"));
       return;
     }
 
+    // Validate all requirements
+    if (!requirements.length) {
+      setError(t("users.dialog.form.password.requirements.length"));
+      return;
+    }
+    if (!requirements.uppercase) {
+      setError(t("users.dialog.form.password.requirements.uppercase"));
+      return;
+    }
+    if (!requirements.digit) {
+      setError(t("users.dialog.form.password.requirements.digit"));
+      return;
+    }
+    if (!requirements.special) {
+      setError(t("users.dialog.form.password.requirements.special"));
+      return;
+    }
+
     if (password !== confirmPassword) {
       setError(t("users.dialog.passwordSetting.doNotMatch"));
       return;
     }
 
-    onSave(password);
+    // Require old password when changing own password (username is provided)
+    if (username && !oldPassword) {
+      setError(t("users.dialog.passwordSetting.currentPasswordRequired"));
+      return;
+    }
+
+    // Verify old password if callback is provided and old password is provided
+    if (username && oldPassword && onVerifyOldPassword) {
+      setIsValidatingOldPassword(true);
+      try {
+        const isValid = await onVerifyOldPassword(oldPassword);
+        if (!isValid) {
+          setError(t("users.dialog.passwordSetting.incorrectCurrentPassword"));
+          setIsValidatingOldPassword(false);
+          return;
+        }
+      } catch (err) {
+        setError(t("users.dialog.passwordSetting.passwordVerificationFailed"));
+        setIsValidatingOldPassword(false);
+        return;
+      }
+      setIsValidatingOldPassword(false);
+    }
+
+    onSave(password, oldPassword || undefined);
   };
 
   const getStrengthLabel = () => {
@@ -115,14 +180,61 @@ export default function SetPasswordDialog({
         </DialogHeader>
 
         <div className="space-y-4 pt-4">
+          {username && (
+            <div className="space-y-2">
+              <Label htmlFor="old-password">
+                {t("users.dialog.form.currentPassword.title")}
+              </Label>
+              <div className="relative">
+                <Input
+                  id="old-password"
+                  className="h-10 pr-10"
+                  type={showOldPassword ? "text" : "password"}
+                  value={oldPassword}
+                  onChange={(event) => {
+                    setOldPassword(event.target.value);
+                    setError(null);
+                  }}
+                  placeholder={t(
+                    "users.dialog.form.currentPassword.placeholder",
+                  )}
+                />
+                <Button
+                  type="button"
+                  variant="ghost"
+                  size="sm"
+                  tabIndex={-1}
+                  aria-label={
+                    showOldPassword
+                      ? t("users.dialog.form.password.hide", {
+                          ns: "views/settings",
+                        })
+                      : t("users.dialog.form.password.show", {
+                          ns: "views/settings",
+                        })
+                  }
+                  className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                  onClick={() => setShowOldPassword(!showOldPassword)}
+                >
+                  {showOldPassword ? (
+                    <LuEyeOff className="size-4" />
+                  ) : (
+                    <LuEye className="size-4" />
+                  )}
+                </Button>
+              </div>
+            </div>
+          )}
+
           <div className="space-y-2">
             <Label htmlFor="password">
               {t("users.dialog.form.newPassword.title")}
             </Label>
+            <div className="relative">
               <Input
                 id="password"
-              className="h-10"
+                className="h-10 pr-10"
-              type="password"
+                type={showPasswordVisible ? "text" : "password"}
                 value={password}
                 onChange={(event) => {
                   setPassword(event.target.value);
@@ -131,20 +243,113 @@ export default function SetPasswordDialog({
                 placeholder={t("users.dialog.form.newPassword.placeholder")}
                 autoFocus
               />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                tabIndex={-1}
+                aria-label={
+                  showPasswordVisible
+                    ? t("users.dialog.form.password.hide", {
+                        ns: "views/settings",
+                      })
+                    : t("users.dialog.form.password.show", {
+                        ns: "views/settings",
+                      })
+                }
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                onClick={() => setShowPasswordVisible(!showPasswordVisible)}
+              >
+                {showPasswordVisible ? (
+                  <LuEyeOff className="size-4" />
+                ) : (
+                  <LuEye className="size-4" />
+                )}
+              </Button>
+            </div>
 
-            {/* Password strength indicator */}
             {password && (
-              <div className="mt-2 space-y-1">
+              <div className="mt-2 space-y-2">
                 <div className="flex h-1.5 w-full overflow-hidden rounded-full bg-secondary-foreground">
                   <div
                     className={`${getStrengthColor()} transition-all duration-300`}
-                    style={{ width: `${(passwordStrength / 3) * 100}%` }}
+                    style={{ width: `${(passwordStrength / 4) * 100}%` }}
                   />
                 </div>
                 <p className="text-xs text-muted-foreground">
                   {t("users.dialog.form.password.strength.title")}
                   <span className="font-medium">{getStrengthLabel()}</span>
                 </p>
+
+                <div className="space-y-1 rounded-md bg-muted/50 p-2">
+                  <p className="text-xs font-medium text-muted-foreground">
+                    {t("users.dialog.form.password.requirements.title")}
+                  </p>
+                  <ul className="space-y-1">
+                    <li className="flex items-center gap-2 text-xs">
+                      {requirements.length ? (
+                        <LuCheck className="size-3.5 text-green-500" />
+                      ) : (
+                        <LuX className="size-3.5 text-red-500" />
+                      )}
+                      <span
+                        className={
+                          requirements.length
+                            ? "text-green-600"
+                            : "text-red-600"
+                        }
+                      >
+                        {t("users.dialog.form.password.requirements.length")}
+                      </span>
+                    </li>
+                    <li className="flex items-center gap-2 text-xs">
+                      {requirements.uppercase ? (
+                        <LuCheck className="size-3.5 text-green-500" />
+                      ) : (
+                        <LuX className="size-3.5 text-red-500" />
+                      )}
+                      <span
+                        className={
+                          requirements.uppercase
+                            ? "text-green-600"
+                            : "text-red-600"
+                        }
+                      >
+                        {t("users.dialog.form.password.requirements.uppercase")}
+                      </span>
+                    </li>
+                    <li className="flex items-center gap-2 text-xs">
+                      {requirements.digit ? (
+                        <LuCheck className="size-3.5 text-green-500" />
+                      ) : (
+                        <LuX className="size-3.5 text-red-500" />
+                      )}
+                      <span
+                        className={
+                          requirements.digit ? "text-green-600" : "text-red-600"
+                        }
+                      >
+                        {t("users.dialog.form.password.requirements.digit")}
+                      </span>
+                    </li>
+                    <li className="flex items-center gap-2 text-xs">
+                      {requirements.special ? (
+                        <LuCheck className="size-3.5 text-green-500" />
+                      ) : (
+                        <LuX className="size-3.5 text-red-500" />
+                      )}
+                      <span
+                        className={
+                          requirements.special
+                            ? "text-green-600"
+                            : "text-red-600"
+                        }
+                      >
+                        {t("users.dialog.form.password.requirements.special")}
+                      </span>
+                    </li>
+                  </ul>
+                </div>
               </div>
             )}
           </div>
@@ -153,10 +358,11 @@ export default function SetPasswordDialog({
             <Label htmlFor="confirm-password">
               {t("users.dialog.form.password.confirm.title")}
             </Label>
+            <div className="relative">
               <Input
                 id="confirm-password"
-              className="h-10"
+                className="h-10 pr-10"
-              type="password"
+                type={showConfirmPassword ? "text" : "password"}
                 value={confirmPassword}
                 onChange={(event) => {
                   setConfirmPassword(event.target.value);
@@ -166,6 +372,30 @@ export default function SetPasswordDialog({
                   "users.dialog.form.newPassword.confirm.placeholder",
                 )}
               />
+              <Button
+                type="button"
+                variant="ghost"
+                size="sm"
+                tabIndex={-1}
+                aria-label={
+                  showConfirmPassword
+                    ? t("users.dialog.form.password.hide", {
+                        ns: "views/settings",
+                      })
+                    : t("users.dialog.form.password.show", {
+                        ns: "views/settings",
+                      })
+                }
+                className="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
+                onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+              >
+                {showConfirmPassword ? (
+                  <LuEyeOff className="size-4" />
+                ) : (
+                  <LuEye className="size-4" />
+                )}
+              </Button>
+            </div>
 
             {/* Password match indicator */}
             {password && confirmPassword && (
@@ -212,9 +442,25 @@ export default function SetPasswordDialog({
                 aria-label={t("button.save", { ns: "common" })}
                 className="flex flex-1"
                 onClick={handleSave}
-                disabled={!password || password !== confirmPassword}
+                disabled={
+                  isValidatingOldPassword ||
+                  !password ||
+                  password !== confirmPassword ||
+                  (username && !oldPassword) ||
+                  !requirements.length ||
+                  !requirements.uppercase ||
+                  !requirements.digit ||
+                  !requirements.special
+                }
               >
-                {t("button.save", { ns: "common" })}
+                {isValidatingOldPassword ? (
+                  <div className="flex flex-row items-center gap-2">
+                    <ActivityIndicator />
+                    <span>{t("button.saving", { ns: "common" })}</span>
+                  </div>
+                ) : (
+                  t("button.save", { ns: "common" })
+                )}
               </Button>
             </div>
           </div>