From 16f1431ebfd192f4f8532eb3220924aa586d3339 Mon Sep 17 00:00:00 2001
From: Yoan VALLET <ext.sopra.yvallet@grandlyon.com>
Date: Wed, 3 Jun 2020 19:18:08 +0200
Subject: [PATCH] feat: change error display on login form

---
 .../Konnector/KonnectorLoginForm.tsx             | 16 +++++++++-------
 src/locales/en.json                              |  4 +++-
 src/styles/components/_form.scss                 |  5 +++++
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
index 77affd21d..6726c6af3 100644
--- a/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
+++ b/src/components/ContentComponents/Konnector/KonnectorLoginForm.tsx
@@ -48,8 +48,7 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
       setError('')
       setLoading(true)
       if (!login || !password) {
-        // TODO - translation
-        setError('Please enter a login and password')
+        setError(t('KONNECTORCONFIG.ERROR_NO_LOGIN_PASSWORD'))
         setLoading(false)
         return null
       }
@@ -61,8 +60,7 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
       )
       const { account, trigger } = await connectionService.connectNewUser()
       if (!trigger) {
-        // TODO - translation
-        setError('Error during account creation')
+        setError(t('KONNECTORCONFIG.ERROR_ACCOUNT_CREATION'))
         setLoading(false)
         return null
       }
@@ -79,7 +77,6 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
     >
       {t('KONNECTORCONFIG.LABEL_FILLIN')} {konnectorName}
       <div className="form-group">
-        <div className="form-message">{error}</div>
         <input
           id={'idFieldLogin' + konnectorType}
           type="text"
@@ -94,7 +91,6 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
         ></input>
       </div>
       <div className="form-group">
-        <div className="form-message">{error}</div>
         <input
           id={'idFieldPassword' + konnectorType}
           type="password"
@@ -115,8 +111,14 @@ const KonnectorLoginForm: React.FC<KonnectorLoginFormProps> = ({
             onClick={() => revealPassword('idFieldPassword' + konnectorType)}
           />
         </span>
+        <div className="form-message">{error}</div>
       </div>
-      <StyledButton type="submit" color="primary" disabled={loading}>
+      <StyledButton
+        className="form-button"
+        type="submit"
+        color="primary"
+        disabled={loading}
+      >
         {t('KONNECTORCONFIG.BTN_CONNECTION')}
       </StyledButton>
       <StyledButton
diff --git a/src/locales/en.json b/src/locales/en.json
index 003f6eebb..b70be2362 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -122,7 +122,9 @@
     "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...",
-    "NOT_INSTALLED": "Le connecteur n'est pas installé. Veuillez l'installer en cliquant sur le bouton ci-dessous."
+    "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"
   },
   "INDICATOR": {
     "DISPLAY_OTHER_FLUID": "Voir",
diff --git a/src/styles/components/_form.scss b/src/styles/components/_form.scss
index b783811df..09c504861 100644
--- a/src/styles/components/_form.scss
+++ b/src/styles/components/_form.scss
@@ -23,6 +23,7 @@
   .form-group {
     display: flex;
     flex-direction: column;
+    margin: 1.5rem 0 0 0;
     .form-trailing-icon {
       float: right;
       position: relative;
@@ -39,6 +40,10 @@
   .form-message {
     color: $red-error;
     min-height: 1.25rem;
+    margin-top: 0.125rem;
+  }
+  .form-button {
+    margin-top: 0.125rem;
   }
   ::placeholder {
     color: $google-text-1;
-- 
GitLab