register

src/app/auth/login/login.component.ts

@@ -31,8 +31,8 @@ export class LoginComponent implements OnInit {
     if (this.loginForm.valid) {
       this.authService.Login(
         this.loginForm.get('username')!.value,
-        this.loginForm.get('password')!.value)
+        this.loginForm.get('password')!.value
-        .subscribe({
+      ).subscribe({
         next: result => {
           if (result.error) {
             this.toastrService.error(result.error, "Error", {

src/app/auth/register/register.component.html

@@ -1,20 +1,20 @@
 <mat-card class="card">
 
-  <form>
+  <form [formGroup]="registerForm" (ngSubmit)="register()">
 
     <mat-form-field>
       <mat-label>Username</mat-label>
-      <input matInput required>
+      <input required matInput formControlName="username">
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>Password</mat-label>
-      <input matInput required type="password">
+      <input required type="password" matInput formControlName="password">
     </mat-form-field>
 
     <mat-form-field>
       <mat-label>Repeat Password</mat-label>
-      <input matInput required type="password">
+      <input required type="password" matInput formControlName="repeatPassword">
     </mat-form-field>
 
     <button mat-button>Register</button>

src/app/auth/register/register.component.ts

@@ -1,4 +1,8 @@
 import { Component } from '@angular/core';
+import { AuthService } from '../../services/auth.service';
+import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ToastrService } from 'ngx-toastr';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-register',
@@ -7,5 +11,63 @@ import { Component } from '@angular/core';
   styleUrls: ['../auth.module.scss', './register.component.scss']
 })
 export class RegisterComponent {
+  registerForm!: FormGroup;
 
+  constructor(
+    private authService: AuthService,
+    private formBuilder: FormBuilder,
+    private toastrService: ToastrService,
+    private router: Router
+  ) { }
+
+  ngOnInit(): void {
+    this.registerForm = this.formBuilder.group({
+      username: new FormControl('', [
+        Validators.required,
+        Validators.minLength(3),
+        Validators.maxLength(32)
+      ]),
+      password: new FormControl('', [
+        Validators.required,
+        Validators.minLength(6),
+        Validators.maxLength(32)
+      ]),
+      repeatPassword: new FormControl('', [
+        Validators.required,
+        Validators.minLength(6),
+        Validators.maxLength(32),
+      ])
+    })
+  }
+
+  register(): void {
+    if (this.registerForm.valid) {
+      this.authService.Register(
+        this.registerForm.get('username')!.value,
+        this.registerForm.get('password')!.value,
+        this.registerForm.get('repeatPassword')!.value
+      ).subscribe({
+        next: result => {
+          if (result.error) {
+            this.toastrService.error(result.error, "Error", {
+              timeOut: 3000,
+              closeButton: true
+            });
+          } else {
+            this.toastrService.info(result.message, "Success", {
+              timeOut: 3000,
+              closeButton: true
+            });
+            this.router.navigateByUrl('/auth/login');
+          }
+        },
+        error: _ => {
+          this.toastrService.error("API error", "Error", {
+            timeOut: 3000,
+            closeButton: true
+          });
+        }
+      })
+    }
+  }
 }