Fix login, sign-up, password lost forms

Author: Zefling

src/app/content/user/user-login.component.html

@@ -12,10 +12,13 @@ <h1>{{ 'user.login.title' | transloco }}</h1>
     </mg-input>
   </div>
 
-  @if (showError) {
-    <div class="list-error">
-      {{ showError }}
-    </div>
+  @let error = showError();
+  @if (error) {
+    <mg-message type="error">
+      <mg-message-block>
+        {{ error }}
+      </mg-message-block>
+    </mg-message>
   }
 
   <div class="buttons">

src/app/content/user/user-login.component.scss

@@ -29,13 +29,6 @@
     }
 }
 
-.error {
-    padding-top: 15px;
-    color: var(--alert-color);
-    text-align: center;
-}
-
-:host .list-error {
-    margin: 30px;
-    padding: 15px 40px;
+mg-message {
+    margin-top: 15px;
 }

src/app/content/user/user-login.component.ts

@@ -1,14 +1,16 @@
-import { Component, OnDestroy, OnInit, booleanAttribute, inject, input } from '@angular/core';
+import { Component, OnDestroy, OnInit, booleanAttribute, inject, input, signal } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 
 import {
     FormBuilderExtended,
+    MagmaBlockMessage,
     MagmaInput,
     MagmaInputElement,
     MagmaInputPassword,
     MagmaInputText,
     MagmaLoader,
+    MagmaMessage,
     MagmaSpinner,
 } from '@ikilote/magma';
 import { TranslocoPipe, TranslocoService } from '@jsverse/transloco';
@@ -32,6 +34,8 @@ import { environment } from 'src/environments/environment';
         MagmaInputText,
         MagmaLoader,
         MagmaSpinner,
+        MagmaMessage,
+        MagmaBlockMessage,
     ],
 })
 export class UserLoginComponent implements OnInit, OnDestroy {
@@ -43,7 +47,7 @@ export class UserLoginComponent implements OnInit, OnDestroy {
 
     private listener = Subscriptions.instance();
 
-    showError = '';
+    showError = signal('');
     loader = false;
 
     readonly popup = input<boolean, any>(false, { transform: booleanAttribute });
@@ -111,7 +115,7 @@ export class UserLoginComponent implements OnInit, OnDestroy {
                     }
                 })
                 .catch(e => {
-                    this.showError = e;
+                    this.showError.set(this.translate.translate('error.username.or.email'));
                 })
                 .finally(() => {
                     this.loader = false;

src/app/content/user/user-profile.errors.scss

@@ -19,9 +19,6 @@
     }
 }
 
-.alert {
-    margin: auto;
-    border: 1px solid var(--alert-color);
-    width: 80%;
-    color: var(--alert-color);
+mg-message {
+    margin-top: 15px;
 }

src/app/content/user/user-pw-lost.component.html

@@ -12,18 +12,22 @@ <h1>{{ 'user.password.lost.title' | transloco }}</h1>
     </div>
 
     @if (showError) {
-      <div class="list-error">
-        {{ showError }}
-      </div>
+      <mg-message type="error">
+        <mg-message-block>
+          {{ showError }}
+        </mg-message-block>
+      </mg-message>
     }
     <div class="button">
       <button (click)="submit()">{{ 'user.password.lost.action' | transloco }}</button>
     </div>
   </form>
 } @else {
-  <div>
-    {{ 'user.password.lost.send' | transloco }}
-  </div>
+  <mg-message type="success">
+    <mg-message-block>
+      {{ 'user.password.lost.send' | transloco }}
+    </mg-message-block>
+  </mg-message>
 }
 
 <div class="links">

src/app/content/user/user-pw-lost.component.scss

@@ -23,8 +23,6 @@
     text-align: center;
 }
 
-.error {
-    padding-top: 15px;
-    color: var(--alert-color);
-    text-align: center;
+mg-message {
+    margin-top: 15px;
 }

src/app/content/user/user-pw-lost.component.ts

@@ -2,7 +2,15 @@ import { Component, OnDestroy, inject } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { Router, RouterLink } from '@angular/router';
 
-import { FormBuilderExtended, MagmaInput, MagmaInputElement, MagmaInputText, testEmail } from '@ikilote/magma';
+import {
+    FormBuilderExtended,
+    MagmaBlockMessage,
+    MagmaInput,
+    MagmaInputElement,
+    MagmaInputText,
+    MagmaMessage,
+    testEmail,
+} from '@ikilote/magma';
 import { TranslocoPipe, TranslocoService } from '@jsverse/transloco';
 
 import { APIUserService } from 'src/app/services/api.user.service';
@@ -13,7 +21,16 @@ import { Subscriptions } from 'src/app/tools/subscriptions';
     selector: 'user-pw-lost',
     templateUrl: './user-pw-lost.component.html',
     styleUrls: ['./user-pw-lost.component.scss'],
-    imports: [RouterLink, TranslocoPipe, ReactiveFormsModule, MagmaInput, MagmaInputElement, MagmaInputText],
+    imports: [
+        RouterLink,
+        TranslocoPipe,
+        ReactiveFormsModule,
+        MagmaInput,
+        MagmaInputElement,
+        MagmaInputText,
+        MagmaMessage,
+        MagmaBlockMessage,
+    ],
 })
 export class UserPwLostComponent implements OnDestroy {
     private readonly router = inject(Router);
@@ -22,7 +39,6 @@ export class UserPwLostComponent implements OnDestroy {
     private readonly global = inject(GlobalService);
     private readonly fbe = inject(FormBuilderExtended);
 
-    email = '';
     showError = '';
     valide = false;
 
@@ -70,15 +86,16 @@ export class UserPwLostComponent implements OnDestroy {
 
         this.fbe.validateForm(this.form);
         if (this.form.valid) {
-            if (this.email.trim() === '') {
+            const email = this.form.value.email;
+            if (!email || email?.trim() === '') {
                 this.showError = this.translate.translate('error.api-code.1020');
-            } else if (!testEmail(this.email)) {
+            } else if (!testEmail(email)) {
                 this.showError = this.translate.translate('error.email.invalid');
             }
 
             if (!this.showError.length) {
                 this.userService
-                    .passwordLost(this.email)
+                    .passwordLost(email!)
                     .then(() => {
                         this.valide = true;
                     })

src/app/content/user/user-signup.component.html

@@ -48,11 +48,13 @@ <h1>{{ 'user.signup.title' | transloco }}</h1>
   </div>
 
   @if (showError.length) {
-    <ul class="list-error">
-      @for (error of showError; track error) {
-        <li>{{ error }}</li>
-      }
-    </ul>
+    <mg-message type="error">
+      <ul>
+        @for (error of showError; track error) {
+          <li>{{ error }}</li>
+        }
+      </ul>
+    </mg-message>
   }
 
   <div class="button">

src/app/content/user/user-signup.component.ts

@@ -7,6 +7,7 @@ import {
     MagmaInputElement,
     MagmaInputPassword,
     MagmaInputText,
+    MagmaMessage,
     MagmaMessages,
     testEmail,
 } from '@ikilote/magma';
@@ -32,6 +33,7 @@ import { environment } from 'src/environments/environment';
         MagmaInputElement,
         MagmaInputText,
         MagmaInputPassword,
+        MagmaMessage,
     ],
 })
 export class UserSignupComponent implements OnDestroy {

src/assets/i18n/en.json

@@ -1114,8 +1114,11 @@
       "category.empty": "Category cannot be empty.",
       "banner.empty": "Banner cannot be empty."
     },
-    "username.exist": "This username already exists.",
-    "username.yours": "This username is already yours.",
+    "username": {
+      "or.email": "Username or email is invalid.",
+      "exist": "This username already exists.",
+      "yours": "This username is already yours."
+    },
     "email": {
       "exist": "This email has already been used.",
       "invalid": "The email is invalid.",