use Angular built-in email validator; display error messages (also in…

… password reset form)
CentreForDigitalHumanities · Oct 2, 2024 · 08f947a · 08f947a
1 parent 1a2914c
commit 08f947a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/frontend/src/app/login/registration/registration.component.html b/frontend/src/app/login/registration/registration.component.html
@@ -24,15 +24,15 @@ <h1 class="title">I-Analyzer sign-up</h1>
                     <div class="field">
                         <label class="label" for="email">Email</label>
                         <p class="control has-icons-left">
-                            <input class="input" type="email" name="email" ngModel #email="ngModel" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
+                            <input class="input" type="email" name="email" ngModel #email="ngModel" required email/>
                             <span class="icon is-left">
                                 <fa-icon [icon]="userIcons.email" aria-hidden="true"></fa-icon>
                             </span>
                         </p>
                         <div class="notification is-warning" *ngIf="email.errors?.required && (email.dirty || email.touched)">
                             Email is required.
                         </div>
-                        <div class="notification is-warning" class="notification is-warning" *ngIf="email.errors?.pattern && email.touched">
+                        <div class="notification is-warning" class="notification is-warning" *ngIf="email.errors && email.touched">
                             Please enter a valid email address.
                         </div>
                         <div class="notification is-danger" *ngIf="errors?.email">

diff --git a/frontend/src/app/login/reset-password/request-reset.component.html b/frontend/src/app/login/reset-password/request-reset.component.html
@@ -17,7 +17,7 @@ <h1 class="title">Reset password</h1>
                             <div class="notification is-warning" *ngIf="email.errors?.required && (email.dirty || email.touched)">
                                 Email is required.
                             </div>
-                            <div class="notification is-warning" class="notification is-warning" *ngIf="email.errors?.pattern && email.touched">
+                            <div class="notification is-warning" class="notification is-warning" *ngIf="email.errors && email.touched">
                                 Please enter a valid email address.
                             </div>
                             <div *ngIf="showMessage && message" class="notification" [ngClass]="{'is-danger': !success, 'is-success': success}">{{message}}</div>