linting

src/app/modules/user/login/auth-message.pipe.ts

@@ -8,6 +8,14 @@ export class AuthMessagePipe implements PipeTransform {
         return 'Benutzer wurde nicht gefunden';
       case 'auth/wrong-password':
         return 'Passwort ist falsch';
+      case 'auth/email-already-in-use':
+        return 'Die E-Mail-Adresse wird bereits verwendet';
+      case 'auth/invalid-email':
+        return 'Die E-Mail-Adresse ist ungueltig';
+      case 'auth/weak-password':
+        return 'Das Passwort ist zu schwach';
+      case 'unknown_error':
+        return 'Unbekannter Fehler';
       default:
         return code;
     }

src/app/modules/user/login/login.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit, inject} from '@angular/core';
-import {ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {Router, RouterLink} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
 import {faSignInAlt, faUserPlus} from '@fortawesome/free-solid-svg-icons';
@@ -20,9 +20,9 @@ export class LoginComponent implements OnInit {
   private userService = inject(UserService);
   private router = inject(Router);
 
-  public form: UntypedFormGroup = new UntypedFormGroup({
-    user: new UntypedFormControl(null, [Validators.required, Validators.email]),
-    pass: new UntypedFormControl(null, [Validators.required]),
+  public form = new FormGroup({
+    user: new FormControl<string>('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
+    pass: new FormControl<string>('', {nonNullable: true, validators: [Validators.required]}),
   });
   public errorMessage = '';
   public faSignIn = faSignInAlt;
@@ -36,12 +36,19 @@ export class LoginComponent implements OnInit {
     this.form.updateValueAndValidity();
     if (this.form.valid) {
       try {
-        const value = this.form.value as {user: string; pass: string};
-        await this.userService.login(value.user, value.pass);
+        await this.userService.login(this.form.controls.user.value, this.form.controls.pass.value);
         await this.router.navigateByUrl('/');
-      } catch ({code}) {
-        this.errorMessage = code as string;
+      } catch (error) {
+        this.errorMessage = this.errorCode(error);
       }
     }
   }
+
+  private errorCode(error: unknown): string {
+    if (typeof error === 'object' && error !== null && 'code' in error && typeof error.code === 'string') {
+      return error.code;
+    }
+
+    return 'unknown_error';
+  }
 }

src/app/modules/user/new/new.component.html

@@ -11,6 +11,9 @@
     <mat-label>Passwort</mat-label>
     <input formControlName="password" matInput type="password" />
   </mat-form-field>
+  @if (errorMessage) {
+    <p class="error">{{ errorMessage | authMessage }}</p>
+  }
 
   <app-button-row>
     <app-button (click)="onCreate()" [icon]="faNewUser"

src/app/modules/user/new/new.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit, inject} from '@angular/core';
-import {ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {FormBuilder, ReactiveFormsModule, Validators} from '@angular/forms';
 import {UserService} from '../../../services/user/user.service';
 import {faUserPlus} from '@fortawesome/free-solid-svg-icons';
 import {CardComponent} from '../../../widget-modules/components/card/card.component';
@@ -7,23 +7,25 @@ import {MatFormField, MatLabel} from '@angular/material/form-field';
 import {MatInput} from '@angular/material/input';
 import {ButtonRowComponent} from '../../../widget-modules/components/button-row/button-row.component';
 import {ButtonComponent} from '../../../widget-modules/components/button/button.component';
+import {AuthMessagePipe} from '../login/auth-message.pipe';
 
 @Component({
   selector: 'app-new',
   templateUrl: './new.component.html',
   styleUrls: ['./new.component.less'],
-  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent],
+  imports: [CardComponent, ReactiveFormsModule, MatFormField, MatLabel, MatInput, ButtonRowComponent, ButtonComponent, AuthMessagePipe],
 })
 export class NewComponent implements OnInit {
-  private fb = inject(UntypedFormBuilder);
+  private fb = inject(FormBuilder);
   private userService = inject(UserService);
 
-  public form: UntypedFormGroup = this.fb.group({
-    email: new UntypedFormControl(null, [Validators.required, Validators.email]),
-    name: new UntypedFormControl(null, [Validators.required]),
-    password: new UntypedFormControl(null, [Validators.required, Validators.minLength(6)]),
+  public form = this.fb.nonNullable.group({
+    email: ['', [Validators.required, Validators.email]],
+    name: ['', [Validators.required]],
+    password: ['', [Validators.required, Validators.minLength(6)]],
   });
   public faNewUser = faUserPlus;
+  public errorMessage = '';
 
   public ngOnInit(): void {
     this.form.reset();
@@ -33,15 +35,20 @@ export class NewComponent implements OnInit {
     this.form.updateValueAndValidity();
     if (this.form.valid) {
       try {
-        const value = this.form.value as {
-          email: string;
-          name: string;
-          password: string;
-        };
-        await this.userService.createNewUser(value.email, value.name, value.password);
+        this.errorMessage = '';
+        const {email, name, password} = this.form.getRawValue();
+        await this.userService.createNewUser(email, name, password);
       } catch (ex) {
-        console.error(ex);
+        this.errorMessage = this.errorCode(ex);
       }
     }
   }
+
+  private errorCode(ex: unknown): string {
+    if (typeof ex === 'object' && ex !== null && 'code' in ex && typeof ex.code === 'string') {
+      return ex.code;
+    }
+
+    return 'unknown_error';
+  }
 }

src/app/modules/user/password/password.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit, inject} from '@angular/core';
-import {ReactiveFormsModule, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
 import {Router} from '@angular/router';
 import {UserService} from '../../../services/user/user.service';
 import {faWindowRestore} from '@fortawesome/free-solid-svg-icons';
@@ -21,8 +21,8 @@ export class PasswordComponent implements OnInit {
   public userService = inject(UserService);
   private router = inject(Router);
 
-  public form: UntypedFormGroup = new UntypedFormGroup({
-    user: new UntypedFormControl(null, [Validators.required, Validators.email]),
+  public form = new FormGroup({
+    user: new FormControl<string>('', {nonNullable: true, validators: [Validators.required, Validators.email]}),
   });
 
   public errorMessage = '';
@@ -36,12 +36,19 @@ export class PasswordComponent implements OnInit {
     this.form.updateValueAndValidity();
     if (this.form.valid) {
       try {
-        const value = this.form.value as {user: string};
-        await this.userService.changePassword(value.user);
+        await this.userService.changePassword(this.form.controls.user.value);
         await this.router.navigateByUrl('/user/password-send');
-      } catch ({code}) {
-        this.errorMessage = code as string;
+      } catch (error) {
+        this.errorMessage = this.errorCode(error);
       }
     }
   }
+
+  private errorCode(error: unknown): string {
+    if (typeof error === 'object' && error !== null && 'code' in error && typeof error.code === 'string') {
+      return error.code;
+    }
+
+    return 'unknown_error';
+  }
 }