Add password security: default credential warning and strength validation (#386)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: samanhappy <2755122+samanhappy@users.noreply.github.com>

frontend/src/pages/LoginPage.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 import { useAuth } from '../contexts/AuthContext';
 import ThemeSwitch from '@/components/ui/ThemeSwitch';
 import LanguageSwitch from '@/components/ui/LanguageSwitch';
+import DefaultPasswordWarningModal from '@/components/ui/DefaultPasswordWarningModal';
 
 const LoginPage: React.FC = () => {
   const { t } = useTranslation();
@@ -11,6 +12,7 @@ const LoginPage: React.FC = () => {
   const [password, setPassword] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
+  const [showDefaultPasswordWarning, setShowDefaultPasswordWarning] = useState(false);
   const { login } = useAuth();
   const navigate = useNavigate();
 
@@ -26,10 +28,15 @@ const LoginPage: React.FC = () => {
         return;
       }
 
-      const success = await login(username, password);
+      const result = await login(username, password);
 
-      if (success) {
-        navigate('/');
+      if (result.success) {
+        if (result.isUsingDefaultPassword) {
+          // Show warning modal instead of navigating immediately
+          setShowDefaultPasswordWarning(true);
+        } else {
+          navigate('/');
+        }
       } else {
         setError(t('auth.loginFailed'));
       }
@@ -40,6 +47,11 @@ const LoginPage: React.FC = () => {
     }
   };
 
+  const handleCloseWarning = () => {
+    setShowDefaultPasswordWarning(false);
+    navigate('/');
+  };
+
   return (
     <div className="relative min-h-screen w-full overflow-hidden bg-gray-50 dark:bg-gray-950">
       {/* Top-right controls */}
@@ -138,6 +150,12 @@ const LoginPage: React.FC = () => {
           </div>
         </div>
       </div>
+
+      {/* Default Password Warning Modal */}
+      <DefaultPasswordWarningModal
+        isOpen={showDefaultPasswordWarning}
+        onClose={handleCloseWarning}
+      />
     </div>
   );
 };

frontend/src/pages/SettingsPage.tsx

@@ -794,10 +794,11 @@ const SettingsPage: React.FC = () => {
       </PermissionChecker>
 
       {/* Change Password */}
-      <div className="bg-white shadow rounded-lg py-4 px-6 mb-6 dashboard-card">
+      <div className="bg-white shadow rounded-lg py-4 px-6 mb-6 dashboard-card" data-section="password">
         <div
           className="flex justify-between items-center cursor-pointer"
           onClick={() => toggleSection('password')}
+          role="button"
         >
           <h2 className="font-semibold text-gray-800">{t('auth.changePassword')}</h2>
           <span className="text-gray-500">{sectionsVisible.password ? '▼' : '►'}</span>