[frontend] Add register component logic

kibicara-frontend/src/app/auth/login/login.component.html

@@ -1,4 +1,5 @@
 <div *ngIf="error" class="error">{{ error }}</div>
+<div *ngIf="info" class="success">{{ info }}</div>
 <h2>Login</h2>
 <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
   <div class="form-group">

kibicara-frontend/src/app/auth/login/login.component.ts

@@ -1,5 +1,5 @@
 import { Component, OnInit } from '@angular/core';
-import { LoginService } from '../core/auth/login.service';
+import { LoginService } from '../../core/auth/login.service';
 import { Router, ActivatedRoute } from '@angular/router';
 import { Validators, FormGroup, FormBuilder } from '@angular/forms';
 import { first } from 'rxjs/operators';
@@ -15,6 +15,7 @@ export class LoginComponent implements OnInit {
   error: string;
   loading = false;
   submitted = false;
+  info: string;
 
   constructor(
     private loginService: LoginService,
@@ -32,7 +33,12 @@ export class LoginComponent implements OnInit {
       email: ['', Validators.required],
       password: ['', Validators.required],
     });
-    this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/dashboard';
+    this.returnUrl =
+      this.route.snapshot.queryParams['returnUrl'] || '/dashboard';
+
+    if (this.route.snapshot.queryParams['registered'] === true) {
+      this.info = 'Registration infoful';
+    }
   }
 
   onSubmit() {

kibicara-frontend/src/app/auth/register/register.component.html

@@ -0,0 +1,56 @@
+<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+<div *ngIf="info" class="alert alert-danger">{{ info }}</div>
+<h2>Register</h2>
+<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+  <div class="form-group">
+    <label for="email">E-Mail</label>
+    <input
+      type="text"
+      formControlName="email"
+      class="form-control"
+      [ngClass]="{
+        'is-invalid': submitted && registerForm.controls.email.errors
+      }"
+    />
+    <div
+      *ngIf="submitted && registerForm.controls.email.errors"
+      class="invalid-feedback"
+    >
+      <div *ngIf="registerForm.controls.email.errors.required">
+        E-Mail is required
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input
+      type="password"
+      formControlName="password"
+      class="form-control"
+      [ngClass]="{
+        'is-invalid': submitted && registerForm.controls.password.errors
+      }"
+    />
+    <div
+      *ngIf="submitted && registerForm.controls.password.errors"
+      class="invalid-feedback"
+    >
+      <div *ngIf="registerForm.controls.password.errors.required">
+        Password is required
+      </div>
+      <div *ngIf="registerForm.controls.password.errors.minlength">
+        Password must be at least 6 characters
+      </div>
+    </div>
+  </div>
+  <div class="form-group">
+    <button [disabled]="loading" class="btn btn-primary">
+      <span
+        *ngIf="loading"
+        class="spinner-border spinner-border-sm mr-1"
+      ></span>
+      Register
+    </button>
+    <a routerLink="/login" class="btn btn-link">Cancel</a>
+  </div>
+</form>

kibicara-frontend/src/app/auth/register/register.component.ts

@@ -0,0 +1,57 @@
+import { Component, OnInit } from '@angular/core';
+import { AdminService } from '../../core/api';
+import { Validators, FormBuilder, FormGroup } from '@angular/forms';
+import { first } from 'rxjs/operators';
+import { Router, ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.component.html',
+  styleUrls: ['./register.component.scss'],
+})
+export class RegisterComponent implements OnInit {
+  registerForm: FormGroup;
+  loading = false;
+  submitted = false;
+  error: string;
+  info: string;
+
+  constructor(
+    private readonly adminService: AdminService,
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute
+  ) {}
+
+  ngOnInit(): void {
+    this.registerForm = this.formBuilder.group({
+      email: ['', Validators.required],
+      password: ['', [Validators.required, Validators.minLength(6)]],
+    });
+
+    if (this.route.snapshot.queryParams['error']) {
+      this.error = 'Invalid confirmation link. Try registering again';
+    }
+  }
+
+  onSubmit() {
+    this.submitted = true;
+    if (this.registerForm.invalid) {
+      return;
+    }
+    this.loading = true;
+    this.adminService
+      .register(this.registerForm.value)
+      .pipe(first())
+      .subscribe(
+        (data) => {
+          this.info =
+            'Registration E-Mail has been sent. Please check your inbox.';
+          this.loading = false;
+        },
+        (error) => {
+          this.error = 'Registration failed! E-Mail exists or is not valid.';
+          this.loading = false;
+        }
+      );
+  }
+}

kibicara-frontend/src/app/register/register.component.html

@@ -1 +0,0 @@
-<p>register works!</p>

kibicara-frontend/src/app/register/register.component.ts

@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-register',
-  templateUrl: './register.component.html',
-  styleUrls: ['./register.component.scss']
-})
-export class RegisterComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit(): void {
-  }
-
-}