[frontend] Finish register design

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

@@ -1,56 +1,67 @@
-<div *ngIf="error" class="alert alert-danger">{{ error }}</div>
+<div class="container">
-<div *ngIf="info" class="alert alert-danger">{{ info }}</div>
+  <div class="banner"></div>
-<h2>Register</h2>
+  <mat-card class="register-form">
-<form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
+    <mat-card-header>
-  <div class="form-group">
+      <h2>Register as a hood admin!</h2>
-    <label for="email">E-Mail</label>
+    </mat-card-header>
-    <input
+    <mat-card-content>
-      type="text"
+      <form [formGroup]="registerForm" (ngSubmit)="onSubmit()">
-      formControlName="email"
+        <div class="input-container">
-      class="form-control"
+          <mat-form-field appearance="fill">
-      [ngClass]="{
+            <mat-label for="email">E-Mail</mat-label>
-        'is-invalid': submitted && registerForm.controls.email.errors
+            <input type="text" formControlName="email" matInput />
-      }"
+            <mat-error
-    />
+              *ngIf="
-    <div
+                registerForm.controls.email.errors &&
-      *ngIf="submitted && registerForm.controls.email.errors"
+                registerForm.controls.email.errors.required
-      class="invalid-feedback"
+              "
             >
-      <div *ngIf="registerForm.controls.email.errors.required">
               E-Mail is required
-      </div>
+            </mat-error>
-    </div>
+          </mat-form-field>
-  </div>
+
-  <div class="form-group">
+          <mat-form-field appearance="fill">
-    <label for="password">Password</label>
+            <mat-label>Password</mat-label>
             <input
               type="password"
               formControlName="password"
-      class="form-control"
+              matInput
-      [ngClass]="{
+              [type]="'password'"
-        'is-invalid': submitted && registerForm.controls.password.errors
-      }"
             />
-    <div
+            <mat-error
-      *ngIf="submitted && registerForm.controls.password.errors"
+              *ngIf="
-      class="invalid-feedback"
+                registerForm.controls.password.errors &&
+                registerForm.controls.password.errors.required
+              "
             >
-      <div *ngIf="registerForm.controls.password.errors.required">
               Password is required
+            </mat-error>
+            <mat-error
+              *ngIf="
+                registerForm.controls.password.errors &&
+                registerForm.controls.password.errors.minlength
+              "
+            >
+              Password requires minimal length 8
+            </mat-error>
+          </mat-form-field>
         </div>
-      <div *ngIf="registerForm.controls.password.errors.minlength">
+        <div class="buttons">
-        Password must be at least 6 characters
+          <button
-      </div>
+            mat-raised-button
-    </div>
+            color="primary"
-  </div>
+            [disabled]="loading"
-  <div class="form-group">
+            class="btn btn-primary"
-    <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>
+          <a mat-button routerLink="/login" class="btn btn-link">Cancel</a>
         </div>
-</form>
+      </form>
+    </mat-card-content>
+  </mat-card>
+</div>

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

@@ -0,0 +1,43 @@
+.input-container {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+  margin-left: 5%;
+  margin-right: 5%;
+  margin-bottom: 5%;
+  margin-top: 3%;
+}
+
+.mat-card:not([class*="mat-elevation-z"]) {
+  box-shadow: none;
+}
+
+.container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  margin-left: 10%;
+  margin-right: 10%;
+  margin-top: 5%;
+  @media (max-width: 600px) {
+    grid-template-columns: 1fr;
+    margin-top: 10%;
+    margin-left: 5%;
+    margin-right: 5%;
+  }
+}
+
+.banner {
+  background: url("../../../assets/hoods1.jpg");
+  background-size: 100%;
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.buttons {
+  margin-left: 20px;
+}
+
+.register-form {
+  margin-top: 10%;
+  margin-bottom: 10%;
+}

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

@@ -3,6 +3,8 @@ import { AdminService } from '../../core/api';
 import { Validators, FormBuilder, FormGroup } from '@angular/forms';
 import { first } from 'rxjs/operators';
 import { Router, ActivatedRoute } from '@angular/router';
+import { LoginService } from 'src/app/core/auth/login.service';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-register',
@@ -13,23 +15,34 @@ 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
+    private route: ActivatedRoute,
-  ) {}
+    private loginService: LoginService,
+    private router: Router,
+    private snackBar: MatSnackBar
+  ) {
+    if (this.loginService.currentHoodAdminValue) {
+      this.router.navigate(['/dashboard']);
+    }
+  }
 
   ngOnInit(): void {
     this.registerForm = this.formBuilder.group({
       email: ['', Validators.required],
-      password: ['', [Validators.required, Validators.minLength(6)]],
+      password: ['', [Validators.required, Validators.minLength(8)]],
     });
 
     if (this.route.snapshot.queryParams['error']) {
-      this.error = 'Invalid confirmation link. Try registering again';
+      this.snackBar.open(
+        'Invalid confirmation link. Try registering again',
+        'Close',
+        {
+          duration: 2000,
+        }
+      );
     }
   }
 
@@ -44,12 +57,23 @@ export class RegisterComponent implements OnInit {
       .pipe(first())
       .subscribe(
         (data) => {
-          this.info =
+          this.snackBar.open(
-            'Registration E-Mail has been sent. Please check your inbox.';
+            'Registration E-Mail has been sent. Please check your inbox.',
+            'Close',
+            {
+              duration: 2000,
+            }
+          );
           this.loading = false;
         },
         (error) => {
-          this.error = 'Registration failed! E-Mail exists or is not valid.';
+          this.snackBar.open(
+            'Registration failed! E-Mail exists or is not valid.',
+            'Close',
+            {
+              duration: 2000,
+            }
+          );
           this.loading = false;
         }
       );