feat: change error display on login form

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

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",

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;