From 5641348428e95890ffe7b1dd526bdff79fb8af31 Mon Sep 17 00:00:00 2001
From: NFish <douxc512@gmail.com>
Date: Wed, 11 Sep 2024 11:10:02 +0800
Subject: [PATCH] chore: use base component Input instead native html input

---
 .../forgot-password/ChangePasswordForm.tsx    | 41 +++++++++----------
 .../forgot-password/ForgotPasswordForm.tsx    |  6 +--
 web/app/reset-password/check-code/page.tsx    |  2 +-
 web/app/reset-password/page.tsx               |  2 +-
 web/app/reset-password/set-password/page.tsx  | 41 +++++++++----------
 web/app/signin/check-code/page.tsx            |  2 +-
 .../signin/components/mail-and-code-auth.tsx  |  2 +-
 .../components/mail-and-password-auth.tsx     |  2 -
 web/app/signin/components/social-auth.tsx     |  8 ++--
 web/app/signin/invite-settings/page.tsx       |  1 -
 web/app/signin/oneMoreStep.tsx                |  4 +-
 11 files changed, 51 insertions(+), 60 deletions(-)

diff --git a/web/app/forgot-password/ChangePasswordForm.tsx b/web/app/forgot-password/ChangePasswordForm.tsx
index d878660416..2f64cd83ac 100644
--- a/web/app/forgot-password/ChangePasswordForm.tsx
+++ b/web/app/forgot-password/ChangePasswordForm.tsx
@@ -5,6 +5,7 @@ import useSWR from 'swr'
 import { useSearchParams } from 'next/navigation'
 import cn from 'classnames'
 import { CheckCircleIcon } from '@heroicons/react/24/solid'
+import Input from '../components/base/input'
 import Button from '@/app/components/base/button'
 import { changePasswordWithToken, verifyForgotPasswordToken } from '@/service/common'
 import Toast from '@/app/components/base/toast'
@@ -113,33 +114,29 @@ const ChangePasswordForm = () => {
                 <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
                   {t('common.account.newPassword')}
                 </label>
-                <div className="mt-1 relative rounded-md shadow-sm">
-                  <input
-                    id="password"
-                    type='password'
-                    value={password}
-                    onChange={e => setPassword(e.target.value)}
-                    placeholder={t('login.passwordPlaceholder') || ''}
-                    className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
-                  />
-                </div>
-                <div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>
+                <Input
+                  id="password"
+                  type='password'
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  placeholder={t('login.passwordPlaceholder') || ''}
+                  className='mt-1'
+                />
+                <div className='mt-1 text-xs text-text-secondary'>{t('login.error.passwordInvalid')}</div>
               </div>
               {/* Confirm Password */}
               <div className='mb-5'>
                 <label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
                   {t('common.account.confirmPassword')}
                 </label>
-                <div className="mt-1 relative rounded-md shadow-sm">
-                  <input
-                    id="confirmPassword"
-                    type='password'
-                    value={confirmPassword}
-                    onChange={e => setConfirmPassword(e.target.value)}
-                    placeholder={t('login.confirmPasswordPlaceholder') || ''}
-                    className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
-                  />
-                </div>
+                <Input
+                  id="confirmPassword"
+                  type='password'
+                  value={confirmPassword}
+                  onChange={e => setConfirmPassword(e.target.value)}
+                  placeholder={t('login.confirmPasswordPlaceholder') || ''}
+                  className='mt-1'
+                />
               </div>
               <div>
                 <Button
@@ -165,7 +162,7 @@ const ChangePasswordForm = () => {
             </h2>
           </div>
           <div className="w-full mx-auto mt-6">
-            <Button variant='primary' className='w-full !text-sm'>
+            <Button variant='primary' className='w-full'>
               <a href="/signin">{t('login.passwordChanged')}</a>
             </Button>
           </div>
diff --git a/web/app/forgot-password/ForgotPasswordForm.tsx b/web/app/forgot-password/ForgotPasswordForm.tsx
index 6fd69a3638..df744924da 100644
--- a/web/app/forgot-password/ForgotPasswordForm.tsx
+++ b/web/app/forgot-password/ForgotPasswordForm.tsx
@@ -8,6 +8,7 @@ import { useForm } from 'react-hook-form'
 import { z } from 'zod'
 import { zodResolver } from '@hookform/resolvers/zod'
 import Loading from '../components/base/loading'
+import Input from '../components/base/input'
 import Button from '@/app/components/base/button'
 
 import {
@@ -78,7 +79,7 @@ const ForgotPasswordForm = () => {
 
   return (
     loading
-      ? <Loading/>
+      ? <Loading />
       : <>
         <div className="sm:mx-auto sm:w-full sm:max-w-md">
           <h2 className="text-[32px] font-bold text-gray-900">
@@ -98,10 +99,9 @@ const ForgotPasswordForm = () => {
                     {t('login.email')}
                   </label>
                   <div className="mt-1">
-                    <input
+                    <Input
                       {...register('email')}
                       placeholder={t('login.emailPlaceholder') || ''}
-                      className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm'}
                     />
                     {errors.email && <span className='text-red-400 text-sm'>{t(`${errors.email?.message}`)}</span>}
                   </div>
diff --git a/web/app/reset-password/check-code/page.tsx b/web/app/reset-password/check-code/page.tsx
index 1bb8772f53..909dfba0f9 100644
--- a/web/app/reset-password/check-code/page.tsx
+++ b/web/app/reset-password/check-code/page.tsx
@@ -72,7 +72,7 @@ export default function CheckCode() {
 
     <form action="">
       <label htmlFor="code" className='text-text-secondary text-sm font-semibold mb-1'>{t('login.checkCode.verificationCode')}</label>
-      <Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='px-3 mt-1 leading-5 h-9 appearance-none' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
+      <Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
       <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
       <Countdown onResend={resendCode} />
     </form>
diff --git a/web/app/reset-password/page.tsx b/web/app/reset-password/page.tsx
index 5ac687b439..939629551c 100644
--- a/web/app/reset-password/page.tsx
+++ b/web/app/reset-password/page.tsx
@@ -64,7 +64,7 @@ export default function CheckCode() {
       <div className='mb-2'>
         <label htmlFor="email" className='my-2 block text-sm font-medium text-text-secondary'>{t('login.email')}</label>
         <div className='mt-1'>
-          <Input id='email' type="email" disabled={loading} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} className="px-3 h-9" />
+          <Input id='email' type="email" disabled={loading} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
         </div>
         <div className='mt-3'>
           <Button loading={loading} disabled={loading} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.continueWithCode')}</Button>
diff --git a/web/app/reset-password/set-password/page.tsx b/web/app/reset-password/set-password/page.tsx
index f27d6adf03..cea9495c55 100644
--- a/web/app/reset-password/set-password/page.tsx
+++ b/web/app/reset-password/set-password/page.tsx
@@ -7,6 +7,7 @@ import { RiCheckboxCircleFill } from '@remixicon/react'
 import Button from '@/app/components/base/button'
 import { changePasswordWithToken } from '@/service/common'
 import Toast from '@/app/components/base/toast'
+import Input from '@/app/components/base/input'
 
 const validPassword = /^(?=.*[a-zA-Z])(?=.*\d).{8,}$/
 
@@ -93,38 +94,34 @@ const ChangePasswordForm = () => {
                 <label htmlFor="password" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
                   {t('common.account.newPassword')}
                 </label>
-                <div className="mt-1 relative rounded-md shadow-sm">
-                  <input
-                    id="password"
-                    type='password'
-                    value={password}
-                    onChange={e => setPassword(e.target.value)}
-                    placeholder={t('login.passwordPlaceholder') || ''}
-                    className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
-                  />
-                </div>
-                <div className='mt-1 text-xs text-gray-500'>{t('login.error.passwordInvalid')}</div>
+                <Input
+                  id="password"
+                  type='password'
+                  value={password}
+                  onChange={e => setPassword(e.target.value)}
+                  placeholder={t('login.passwordPlaceholder') || ''}
+                  className='mt-1'
+                />
+                <div className='mt-1 text-xs text-text-secondary'>{t('login.error.passwordInvalid')}</div>
               </div>
               {/* Confirm Password */}
               <div className='mb-5'>
                 <label htmlFor="confirmPassword" className="my-2 flex items-center justify-between text-sm font-medium text-gray-900">
                   {t('common.account.confirmPassword')}
                 </label>
-                <div className="mt-1 relative rounded-md shadow-sm">
-                  <input
-                    id="confirmPassword"
-                    type='password'
-                    value={confirmPassword}
-                    onChange={e => setConfirmPassword(e.target.value)}
-                    placeholder={t('login.confirmPasswordPlaceholder') || ''}
-                    className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
-                  />
-                </div>
+                <Input
+                  id="confirmPassword"
+                  type='password'
+                  value={confirmPassword}
+                  onChange={e => setConfirmPassword(e.target.value)}
+                  placeholder={t('login.confirmPasswordPlaceholder') || ''}
+                  className='mt-1'
+                />
               </div>
               <div>
                 <Button
                   variant='primary'
-                  className='w-full !text-sm'
+                  className='w-full'
                   onClick={handleChangePassword}
                 >
                   {t('common.operation.reset')}
diff --git a/web/app/signin/check-code/page.tsx b/web/app/signin/check-code/page.tsx
index f8cb56167d..a68e9086ae 100644
--- a/web/app/signin/check-code/page.tsx
+++ b/web/app/signin/check-code/page.tsx
@@ -72,7 +72,7 @@ export default function CheckCode() {
 
     <form action="">
       <label htmlFor="code" className='text-text-secondary text-sm font-semibold mb-1'>{t('login.checkCode.verificationCode')}</label>
-      <Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='px-3 mt-1 leading-5 h-9 appearance-none' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
+      <Input value={code} onChange={e => setVerifyCode(e.target.value)} max-length={6} className='mt-1' placeholder={t('login.checkCode.verificationCodePlaceholder') as string} />
       <Button loading={loading} disabled={loading} className='my-3 w-full' variant='primary' onClick={verify}>{t('login.checkCode.verify')}</Button>
       <Countdown onResend={resendCode} />
     </form>
diff --git a/web/app/signin/components/mail-and-code-auth.tsx b/web/app/signin/components/mail-and-code-auth.tsx
index 2dafcbf268..a5308e18f9 100644
--- a/web/app/signin/components/mail-and-code-auth.tsx
+++ b/web/app/signin/components/mail-and-code-auth.tsx
@@ -56,7 +56,7 @@ export default function MailAndCodeAuth({ isInvite }: MailAndCodeAuthProps) {
     <div className='mb-2'>
       <label htmlFor="email" className='my-2 block text-sm font-medium text-text-secondary'>{t('login.email')}</label>
       <div className='mt-1'>
-        <Input id='email' type="email" disabled={isInvite} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} className="px-3 h-9" />
+        <Input id='email' type="email" disabled={isInvite} value={email} placeholder={t('login.emailPlaceholder') as string} onChange={e => setEmail(e.target.value)} />
       </div>
       <div className='mt-3'>
         <Button loading={loading} disabled={loading} variant='primary' className='w-full' onClick={handleGetEMailVerificationCode}>{t('login.continueWithCode')}</Button>
diff --git a/web/app/signin/components/mail-and-password-auth.tsx b/web/app/signin/components/mail-and-password-auth.tsx
index 8ea14241b4..71d312dafa 100644
--- a/web/app/signin/components/mail-and-password-auth.tsx
+++ b/web/app/signin/components/mail-and-password-auth.tsx
@@ -81,7 +81,6 @@ export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthPro
           type="email"
           autoComplete="email"
           placeholder={t('login.emailPlaceholder') || ''}
-          className='px-3 h-9'
         />
       </div>
     </div>
@@ -105,7 +104,6 @@ export default function MailAndPasswordAuth({ isInvite }: MailAndPasswordAuthPro
           type={showPassword ? 'text' : 'password'}
           autoComplete="current-password"
           placeholder={t('login.passwordPlaceholder') || ''}
-          className='px-3 h-9'
         />
         <div className="absolute inset-y-0 right-0 flex items-center pr-3">
           <button
diff --git a/web/app/signin/components/social-auth.tsx b/web/app/signin/components/social-auth.tsx
index 9a54145b7d..39d7ceaa40 100644
--- a/web/app/signin/components/social-auth.tsx
+++ b/web/app/signin/components/social-auth.tsx
@@ -26,7 +26,7 @@ export default function SocialAuth(props: SocialAuthProps) {
       <a href={getOAuthLink('/oauth/login/github')}>
         <Button
           disabled={props.disabled}
-          className='w-full hover:!bg-gray-50'
+          className='w-full'
         >
           <>
             <span className={
@@ -35,7 +35,7 @@ export default function SocialAuth(props: SocialAuthProps) {
                 'w-5 h-5 mr-2',
               )
             } />
-            <span className="truncate text-gray-800">{t('login.withGitHub')}</span>
+            <span className="truncate">{t('login.withGitHub')}</span>
           </>
         </Button>
       </a>
@@ -44,7 +44,7 @@ export default function SocialAuth(props: SocialAuthProps) {
       <a href={getOAuthLink('/oauth/login/google')}>
         <Button
           disabled={props.disabled}
-          className='w-full hover:!bg-gray-50'
+          className='w-full'
         >
           <>
             <span className={
@@ -53,7 +53,7 @@ export default function SocialAuth(props: SocialAuthProps) {
                 'w-5 h-5 mr-2',
               )
             } />
-            <span className="truncate text-gray-800">{t('login.withGoogle')}</span>
+            <span className="truncate">{t('login.withGoogle')}</span>
           </>
         </Button>
       </a>
diff --git a/web/app/signin/invite-settings/page.tsx b/web/app/signin/invite-settings/page.tsx
index 2bf7ceaffd..96670d59b2 100644
--- a/web/app/signin/invite-settings/page.tsx
+++ b/web/app/signin/invite-settings/page.tsx
@@ -98,7 +98,6 @@ export default function InviteSettingsPage() {
             value={name}
             onChange={e => setName(e.target.value)}
             placeholder={t('login.namePlaceholder') || ''}
-            className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm pr-10'}
           />
         </div>
       </div>
diff --git a/web/app/signin/oneMoreStep.tsx b/web/app/signin/oneMoreStep.tsx
index f95d426796..b425b1e76e 100644
--- a/web/app/signin/oneMoreStep.tsx
+++ b/web/app/signin/oneMoreStep.tsx
@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next'
 import Link from 'next/link'
 import useSWR from 'swr'
 import { useRouter, useSearchParams } from 'next/navigation'
+import Input from '../components/base/input'
 import Button from '@/app/components/base/button'
 import Tooltip from '@/app/components/base/tooltip'
 import { SimpleSelect } from '@/app/components/base/select'
@@ -99,12 +100,11 @@ const OneMoreStep = () => {
               </Tooltip>
             </label>
             <div className="mt-1">
-              <input
+              <Input
                 id="invitation_code"
                 value={state.invitation_code}
                 type="text"
                 placeholder={t('login.invitationCodePlaceholder') || ''}
-                className={'appearance-none block w-full rounded-lg pl-[14px] px-3 py-2 border border-gray-200 hover:border-gray-300 hover:shadow-sm focus:outline-none focus:ring-primary-500 focus:border-primary-500 placeholder-gray-400 caret-primary-600 sm:text-sm'}
                 onChange={(e) => {
                   dispatch({ type: 'invitation_code', value: e.target.value.trim() })
                 }}