Add input validation for email address settings (#6360)

Signed-off-by: Giovanni Ferrari <giovanni.ferrari@soft.it>
opfab · May 14, 2024 · 40c7a8c · 40c7a8c
1 parent 306b4ad
commit 40c7a8c
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 9 deletions.
diff --git a/src/test/cypress/cypress/integration/Settings.spec.js b/src/test/cypress/cypress/integration/Settings.spec.js
@@ -23,12 +23,22 @@ describe('Settings', function () {
 
     it('Should proposed to save settings ', () => {
         opfab.loginWithUser('operator1_fr');
-
+        checkEmailValidation();
         checkCancelNavigation();
         checkExitWithoutSaving();
         checkAcceptSaving();
     });
 
+
+    function checkEmailValidation() {
+        opfab.navigateToSettings();
+        cy.get('#opfab-settings-btn-save').should('be.enabled')
+        cy.get('#opfab-setting-input-email').type('test');
+        cy.get('#opfab-settings-btn-save').should('be.disabled')
+        cy.get('#opfab-setting-input-email').type('@domain');
+        cy.get('#opfab-settings-btn-save').should('be.enabled')
+    }
+
     function checkCancelNavigation() {
         opfab.navigateToSettings();
         settings.clickOnSeverity('alarm');

diff --git a/ui/main/src/app/modules/settings/components/settings/settings.component.html b/ui/main/src/app/modules/settings/components/settings/settings.component.html
@@ -136,7 +136,10 @@
     <div class="opfab-settings-item" *ngIf="settingsView.isSettingVisible('email')">
       <div class="opfab-input">
         <label for="opfab-setting-email" translate>settings.email</label>
-        <input id="opfab-setting-input-email" type="text" formControlName="email" autocomplete="off">
+        <input id="opfab-setting-input-email" type="email" formControlName="email" autocomplete="off">
+      </div>
+      <div *ngIf="email.invalid" class="row alert alert-danger">
+        <div *ngIf="email.errors.email" translate>settings.input.errors.invalidEmail</div>
       </div>
     </div>
     <div class="opfab-settings-item" id="opfab-setting-input-remoteLoggingEnabled"
@@ -153,7 +156,7 @@
 <br />
 
 <div style="text-align: center;width:100%">
-  <button id="opfab-settings-btn-save" type="button" class="opfab-btn"
+  <button id="opfab-settings-btn-save" type="button" class="opfab-btn" [disabled]="!settingsForm.valid"
     (click)='saveSettings()' style="text-align: center;min-width: 243px;"
     translate>shared.confirmSettings</button>
 </div>
diff --git a/ui/main/src/app/modules/settings/components/settings/settings.component.ts b/ui/main/src/app/modules/settings/components/settings/settings.component.ts
@@ -11,7 +11,7 @@
 import {ChangeDetectionStrategy, ChangeDetectorRef, Component, OnDestroy, OnInit} from '@angular/core';
 import {TranslateService} from '@ngx-translate/core';
 import {SettingsView} from 'app/business/view/settings/settings.view';
-import {FormControl, FormGroup} from '@angular/forms';
+import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {MultiSelectConfig} from '@ofModel/multiselect.model';
 import {Subject, takeUntil} from 'rxjs';
 import {ServerResponseStatus} from 'app/business/server/serverResponse';
@@ -76,9 +76,10 @@ export class SettingsComponent implements OnInit, OnDestroy {
 
         const formGroupConfig = {};
         settings.forEach((setting) => {
-            formGroupConfig[setting] = new FormControl(this.settingsView.getSetting(setting));
+            if (setting === 'email')
+                formGroupConfig[setting] = new FormControl(this.settingsView.getSetting(setting), Validators.email);
+            else formGroupConfig[setting] = new FormControl(this.settingsView.getSetting(setting));
         });
-
         this.settingsForm = new FormGroup(formGroupConfig, {updateOn: 'change'});
         this.initLocaleMultiselect();
     }
@@ -143,4 +144,8 @@ export class SettingsComponent implements OnInit, OnDestroy {
         }
         return true;
     }
+
+    get email() {
+        return this.settingsForm.get('email');
+    }
 }
diff --git a/ui/main/src/assets/i18n/en.json b/ui/main/src/assets/i18n/en.json
@@ -326,7 +326,12 @@
     "emailToPlainText": "Send emails in plain text",
     "sendDailyEmail": "Send daily email to recap the cards of the day",
     "email": "Email",
-    "settingsSaved": "Settings saved"
+    "settingsSaved": "Settings saved",
+    "input": {
+      "errors": {
+        "invalidEmail": "Invalid email"
+      }
+    }
   },
   "archive": {
     "cardLoadingInProgress":"Loading card  ...",

diff --git a/ui/main/src/assets/i18n/fr.json b/ui/main/src/assets/i18n/fr.json
@@ -326,7 +326,12 @@
     "emailToPlainText": "Envoi des mails en texte brut",
     "sendDailyEmail": "Envoi un mail quotidien récapitulatif des cartes du jour",
     "email": "Email",
-    "settingsSaved": "Paramètres sauvegardés"
+    "settingsSaved": "Paramètres sauvegardés",
+    "input": {
+      "errors": {
+        "invalidEmail": "Email invalide"
+      }
+    }
   },
   "archive": {
     "cardLoadingInProgress":"Chargement de la carte...",

diff --git a/ui/main/src/assets/i18n/nl.json b/ui/main/src/assets/i18n/nl.json
@@ -326,7 +326,12 @@
     "emailToPlainText": "De e-mails versturen in platte tekst",
     "sendDailyEmail": "Stuur dagelijks een e-mail om de kaarten van de dag samen te vatten",
     "email": "Email",
-    "settingsSaved": "Instellingen bewaard"
+    "settingsSaved": "Instellingen bewaard",
+    "input": {
+      "errors": {
+        "invalidEmail": "Ongeldige e-mail"
+      }
+    }
   },
   "archive": {
     "cardLoadingInProgress":"Bezig met laden van de kaart  ...",