feat: review of design for login form

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

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}

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": {

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;