chore: update show password method

src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx

@@ -28,6 +28,7 @@ const FormLogin = () => {
   const [password, setPassword] = useState<string>('')
   const [error, setError] = useState<string>('')
   const [loading, setLoading] = useState<boolean>(false)
+  const [showPassword, setShowPassword] = useState(false)
 
   const icon = getPartnerPicto(konnectorSlug)
   const [connect, update, connectError] = useKonnectorAuth(
@@ -48,17 +49,6 @@ const FormLogin = () => {
     setPassword(value)
   }
 
-  const revealPassword = (idInput: string) => {
-    const input = document.getElementById(idInput)
-    if (input) {
-      if (input.getAttribute('type') === 'password') {
-        input.setAttribute('type', 'text')
-      } else {
-        input.setAttribute('type', 'password')
-      }
-    }
-  }
-
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault()
     try {
@@ -116,9 +106,7 @@ const FormLogin = () => {
           aria-label={t(`auth.${konnectorSlug}.connect_form.login`)}
           placeholder={t(`auth.${konnectorSlug}.connect_form.login`)}
           name="login"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            changeLogin(e.target.value)
-          }
+          onChange={e => changeLogin(e.target.value)}
           value={login}
           inputMode="numeric"
         />
@@ -126,7 +114,8 @@ const FormLogin = () => {
       <div className="form-group">
         <input
           id={'idFieldPassword' + fluidName}
-          type="password"
+          name="password"
+          type={showPassword ? 'text' : 'password'}
           className={
             error === ''
               ? 'form-control form-input'
@@ -134,10 +123,7 @@ const FormLogin = () => {
           }
           aria-label={t(`auth.${konnectorSlug}.connect_form.password`)}
           placeholder={t(`auth.${konnectorSlug}.connect_form.password`)}
-          name="password"
-          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-            changePassword(e.target.value)
-          }
+          onChange={e => changePassword(e.target.value)}
           value={password}
         />
         <span>
@@ -146,7 +132,7 @@ const FormLogin = () => {
             aria-label={t('auth.accessibility.button_reveal_password')}
             className="form-trailing-icon"
             sized={22}
-            onClick={() => revealPassword('idFieldPassword' + fluidName)}
+            onClick={() => setShowPassword(prev => !prev)}
           />
         </span>
       </div>