From 6a67d24dca1163cd409b4bd47c2287cf11b1c866 Mon Sep 17 00:00:00 2001
From: Bastien Dumont <bdumont@grandlyon.com>
Date: Thu, 5 Oct 2023 10:20:23 +0200
Subject: [PATCH] chore: update show password method
---
.../EPGLConnect/FormLogin/FormLogin.tsx | 26 +++++--------------
1 file changed, 6 insertions(+), 20 deletions(-)
diff --git a/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx b/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
index f2216ea1d..31a63e9ac 100644
--- a/src/components/Connection/EPGLConnect/FormLogin/FormLogin.tsx
+++ b/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>
--
GitLab