Finished Login / Register system

Frontend/src/app/sites/register/register.component.ts

@@ -0,0 +1,64 @@
+import {Component, ElementRef, ViewChild} from '@angular/core';
+import {UserApi} from "../../services/users.service";
+import {Router} from "@angular/router";
+import {UserEditor} from "../../entitys/user";
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss']
+})
+export class RegisterComponent {
+  @ViewChild('error') error: ElementRef;
+  public disableRegister: boolean = false;
+
+  constructor(private users: UserApi, private router: Router) { }
+
+  public async register(form: HTMLFormElement, register: UserEditor, pwRepeat: string) {
+    if (!form.reportValidity()) return;
+
+    if (register.password !== pwRepeat) {
+      this.showError("Passwörter stimmen nicht überein!");
+      return;
+    }
+
+    if (!register.email.includes("@") || !register.email.includes(".")) {
+      this.showError("Bitte gebe eine gültige E-Mail Adresse ein!");
+      return;
+    }
+
+    if (register.username.includes("@")) {
+      this.showError("Benutzername enthätlt ungültige Zeichen!");
+      return;
+    }
+
+    if (register.password.length < 8) {
+      this.showError("Dein Passwort muss mindestens 8 Zeichen lang sein!");
+      return;
+    }
+
+    const response = await this.users.register(register);
+
+    if (!response.success) {
+      this.showError(response.errorMessage);
+      return;
+    }
+
+    await this.router.navigate([""]);
+  }
+
+  public showError(error: string) {
+    this.disableRegister = true;
+    this.error.nativeElement.innerText = error;
+
+    this.error.nativeElement.style.opacity = "1";
+    this.error.nativeElement.style.bottom = "150px";
+
+    setTimeout(() => {
+      this.error.nativeElement.style.opacity = "0";
+      this.error.nativeElement.style.bottom = "120px";
+      this.disableRegister = false;
+    }, 5000)
+  }
+
+}