Merge branch 'feat/auth-methods' into deploy/dev

langgenius · Oct 15, 2024 · f66dacb · f66dacb
2 parents fb46131 + 5473efa
commit f66dacb
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 17 deletions.
diff --git 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,29 +111,49 @@ 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 */}
               <div className='mb-5'>
                 <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
@@ -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> = {
@@ -120,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'