From 8c650503398770d8fd8641e550f1e524f78dff9d Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Tue, 15 Oct 2024 14:24:50 +0800
Subject: [PATCH 1/2] fix: validate password before login

---
 .../signin/components/mail-and-password-auth.tsx    | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index 2a8599cfcffa9..5a77fcbd3dbb7 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -14,6 +14,8 @@ type MailAndPasswordAuthProps = {
   isInvite: boolean
 }
 
+const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
+
 export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthProps) {
   const { t } = useTranslation()
   const { locale } = useContext(I18NContext)
@@ -37,6 +39,17 @@ export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthPro
       })
       return
     }
+    if (!password?.trim()) {
+      Toast.notify({ type: 'error', message: t('login.error.passwordEmpty') })
+      return
+    }
+    if (!passwordRegex.test(password)) {
+      Toast.notify({
+        type: 'error',
+        message: t('login.error.passwordInValid'),
+      })
+      return
+    }
     try {
       setIsLoading(true)
       const loginData: Record<string, any> = {

From 5473efaf9f8a1fc4506d59b3a657016403de4b19 Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Tue, 15 Oct 2024 14:36:40 +0800
Subject: [PATCH 2/2] fix: add show/hide control for password inputs at sign-in
 and set-password page

---
 web/app/reset-password/set-password/page.tsx  | 54 +++++++++++++------
 .../components/mail-and-password-auth.tsx     |  2 +-
 2 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index 68710e2025e35..7948c59a9aeff 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -21,6 +21,8 @@ const ChangePasswordForm = () => {
   const [password, setPassword] = useState('')
   const [confirmPassword, setConfirmPassword] = useState('')
   const [showSuccess, setShowSuccess] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false)
 
   const showErrorMessage = useCallback((message: string) => {
     Toast.notify({
@@ -109,14 +111,24 @@ const ChangePasswordForm = () => {
                 <label htmlFor="password" className="my-2 system-md-semibold text-text-secondary">
                   {t('common.account.newPassword')}
                 </label>
-                <Input
-                  id="password"
-                  type='password'
-                  value={password}
-                  onChange={e => setPassword(e.target.value)}
-                  placeholder={t('login.passwordPlaceholder') || ''}
-                  className='mt-1'
-                />
+                <div className='relative mt-1'>
+                  <Input
+                    id="password" type={showPassword ? 'text' : 'password'}
+                    value={password}
+                    onChange={e => setPassword(e.target.value)}
+                    placeholder={t('login.passwordPlaceholder') || ''}
+                  />
+
+                  <div className="absolute inset-y-0 right-0 flex items-center">
+                    <Button
+                      type="button"
+                      variant='ghost'
+                      onClick={() => setShowPassword(!showPassword)}
+                    >
+                      {showPassword ? '👀' : '😝'}
+                    </Button>
+                  </div>
+                </div>
                 <div className='mt-1 body-xs-regular text-text-secondary'>{t('login.error.passwordInvalid')}</div>
               </div>
               {/* Confirm Password */}
@@ -124,14 +136,24 @@ const ChangePasswordForm = () => {
                 <label htmlFor="confirmPassword" className="my-2 system-md-semibold text-text-secondary">
                   {t('common.account.confirmPassword')}
                 </label>
-                <Input
-                  id="confirmPassword"
-                  type='password'
-                  value={confirmPassword}
-                  onChange={e => setConfirmPassword(e.target.value)}
-                  placeholder={t('login.confirmPasswordPlaceholder') || ''}
-                  className='mt-1'
-                />
+                <div className='relative mt-1'>
+                  <Input
+                    id="confirmPassword"
+                    type={showConfirmPassword ? 'text' : 'password'}
+                    value={confirmPassword}
+                    onChange={e => setConfirmPassword(e.target.value)}
+                    placeholder={t('login.confirmPasswordPlaceholder') || ''}
+                  />
+                  <div className="absolute inset-y-0 right-0 flex items-center">
+                    <Button
+                      type="button"
+                      variant='ghost'
+                      onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    >
+                      {showConfirmPassword ? '👀' : '😝'}
+                    </Button>
+                  </div>
+                </div>
               </div>
               <div>
                 <Button
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index 5a77fcbd3dbb7..a190615408052 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -133,7 +133,7 @@ export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthPro
           placeholder={t('login.passwordPlaceholder') || ''}
           tabIndex={2}
         />
-        <div className="absolute inset-y-0 right-0 flex items-center pr-3">
+        <div className="absolute inset-y-0 right-0 flex items-center">
           <Button
             type="button"
             variant='ghost'