diff --git a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx index 49124b24ab96342e3ae8d31758a2535eb1140f6c..f7f6f73d88ea9b5572ca1d27ce8027dd09b9d906 100644 --- a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx +++ b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx @@ -55,6 +55,16 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({ const icon = getIcon(fluidConfig.name) + const changeLogin = (value: string) => { + setError('') + setLogin(value) + } + + const changePassword = (value: string) => { + setError('') + setPassword(value) + } + function revealPassword(idInput: string) { const input = document.getElementById(idInput) if (input) { @@ -132,12 +142,16 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({ <input id={'idFieldLogin' + konnectorType} type="text" - className="form-control form-input" + className={ + error === '' + ? 'form-control form-input' + : 'form-control form-input --error' + } aria-describedby="emailHelp" placeholder="Adresse e-mail" name="login" onChange={(e: React.ChangeEvent<HTMLInputElement>) => - setLogin(e.target.value) + changeLogin(e.target.value) } value={login} ></input> @@ -146,12 +160,16 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({ <input id={'idFieldPassword' + konnectorType} type="password" - className="form-control form-input" + className={ + error === '' + ? 'form-control form-input' + : 'form-control form-input --error' + } aria-describedby="PasswordHelp" placeholder="Mot de passe" name="password" onChange={(e: React.ChangeEvent<HTMLInputElement>) => - setPassword(e.target.value) + changePassword(e.target.value) } value={password} /> @@ -164,7 +182,7 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({ /> </span> </div> - <div className="form-message">{error}</div> + <div className="form-message">{error === '' ? null : error}</div> <div className="kloginauthform"> <div className="kloginauthform-button"> <StyledAuthButton diff --git a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx index 0f40480ba35c2b79571368924a62d3b0eee63dc5..9b5c2dab96d88db2f26a6996a46818b4d23ba62e 100644 --- a/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx +++ b/src/components/ContentComponents/KonnectorViewer/KonnectorViewerCard.tsx @@ -171,7 +171,6 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({ style={{ maxHeight: `${setHeight}` }} className={`accordion-content ${setActive}`} > - {console.log('loginFailed', loginFailed)} {!konnector ? ( <KonnectorNotFound konnectorSlug={fluidConfig.konnectorConfig.slug} diff --git a/src/locales/en.json b/src/locales/en.json index aa587c9f10971a033e9667c8fa79e2d7caa6ce94..a702306e499e938b6c395bee0ed33a2f29e07ac8 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -121,13 +121,15 @@ "BTN_UPDATE": "Mettre à jour", "BTN_DELETE": "Supprimer", "LOADING_DATA": "Vos premières données seront disponibles dans quelques minutes et les prochaines données seront chargées automatiquement.", - "PLZ_WAIT": "Veuillez patienter...", + "PLZ_WAIT": "Veuillez patienter", "NOT_INSTALLED": "Le connecteur n'est pas installé. Veuillez l'installer en cliquant sur le bouton ci-dessous.", "ERROR_NO_LOGIN_PASSWORD": "Identifiant et mot de passe requis", "ERROR_ACCOUNT_CREATION": "Une erreur est survenue, veuillez essayer de nouveau.", "ERROR_LOGIN_FAILED": "Identifiants invalides", - "SUCCESS": "Félicitations, vos premières données sont disponibles et les prochaines seront chargées automatiquement.", - "ERROR_DATA": "Une erreur est survenue pendant le rapatriement des données.", + "SUCCESS_TXT": "Félicitations !", + "SUCCESS_DATA": "Vos données de consommation d'eau sont maintenant conntectées à Ecolyo.", + "ERROR_TXT": "Aïe !", + "ERROR_DATA": "Un problème a empêché vos données de consommation de se connecter à Ecolyo. Merci de réessayer plus tard.", "OK": "Ok" }, "INDICATOR": { diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss index 84d3cff65330d16599687fe1ffd31b829b4fa486..837dd5323a6b8ea99d24e5233e08045ade837ccc 100644 --- a/src/styles/components/_form.scss +++ b/src/styles/components/_form.scss @@ -20,10 +20,13 @@ color: $google-text-1; padding: 0 5%; outline-offset: -1px; + &.--error { + border: 1px solid $red-primary; + } } .form-input:focus{ outline: none; - box-shadow: inset 0px 0px 0px 1px $gold-shadow; + border: 1px solid $gold-shadow; } .form-group { display: flex; @@ -45,10 +48,10 @@ .form-message { color: $red-error; min-height: 1.25rem; - margin-top: 0.125rem; + margin-top: 0.75rem; } .form-button { - margin-top: 0.125rem; + margin-top: 0.75rem; } ::placeholder { color: $google-text-1;