[frontend] Finish login design

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

@@ -1,47 +1,49 @@
-<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">
-    <label for="email">E-Mail</label>
-    <input
-      type="text"
-      formControlName="email"
-      class="form-control"
-      [ngClass]="{ 'is-invalid': submitted && loginForm.controls.email.errors }"
-    />
-    <div
-      *ngIf="submitted && loginForm.controls.email.errors"
-      class="invalid-feedback"
+<div class="container">
+  <mat-card class="login-form">
+    <mat-card-header>
+      <h2>Log in as hood admin!</h2>
+    </mat-card-header>
+    <mat-card-content>
+      <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+        <div class="input-container">
+          <mat-form-field appearance="fill">
+            <mat-label>E-Mail</mat-label>
+            <input type="text" formControlName="email" matInput />
+            <mat-error
+              *ngIf="
+                loginForm.controls.email.errors &&
+                loginForm.controls.email.errors.required
+              "
             >
-      <div *ngIf="loginForm.controls.email.errors.required">
               Email is required
-      </div>
-    </div>
-  </div>
-  <div class="form-group">
-    <label for="password">Password</label>
+            </mat-error>
+          </mat-form-field>
+          <mat-form-field appearance="fill">
+            <mat-label>Password</mat-label>
             <input
               type="password"
               formControlName="password"
-      class="form-control"
-      [ngClass]="{
-        'is-invalid': submitted && loginForm.controls.password.errors
-      }"
+              matInput
+              [type]="'password'"
             />
-    <div
-      *ngIf="submitted && loginForm.controls.password.errors"
-      class="invalid-feedback"
+            <mat-error
+              *ngIf="
+                loginForm.controls.password.errors &&
+                loginForm.controls.password.errors.required
+              "
             >
-      <div *ngIf="loginForm.controls.password.errors.required">
               Password is required
+            </mat-error>
+          </mat-form-field>
         </div>
-    </div>
-  </div>
-  <div class="form-group">
-    <button [disabled]="loading" class="btn btn-primary">
-      Login
+        <div class="buttons">
+          <button mat-raised-button color="primary" [disabled]="loading">
+            Log In
           </button>
-    <a routerLink="/register">Register</a>
+          <a mat-button routerLink="/register">Register</a>
         </div>
-</form>
+      </form>
+    </mat-card-content>
+  </mat-card>
+  <div class="banner"></div>
+</div>

kibicara-frontend/src/app/auth/login/login.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;
+}
+
+.login-form {
+  margin-top: 10%;
+  margin-bottom: 10%;
+}

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

@@ -3,6 +3,7 @@ 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';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 @Component({
   selector: 'app-login',
@@ -12,16 +13,16 @@ import { first } from 'rxjs/operators';
 export class LoginComponent implements OnInit {
   loginForm: FormGroup;
   returnUrl: string;
-  error: string;
   loading = false;
   submitted = false;
-  info: string;
+  hide = true;
 
   constructor(
     private loginService: LoginService,
     private router: Router,
     private route: ActivatedRoute,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private snackBar: MatSnackBar
   ) {
     if (this.loginService.currentHoodAdminValue) {
       this.router.navigate(['/dashboard']);
@@ -37,7 +38,9 @@ export class LoginComponent implements OnInit {
       this.route.snapshot.queryParams['returnUrl'] || '/dashboard';
 
     if (this.route.snapshot.queryParams['registered'] === true) {
-      this.info = 'Registration successful';
+      this.snackBar.open('Registration successful', 'Close', {
+        duration: 2000,
+      });
     }
   }
 
@@ -59,7 +62,9 @@ export class LoginComponent implements OnInit {
           this.router.navigate([this.returnUrl]);
         },
         (error) => {
-          this.error = 'Wrong credentials! Try again.';
+          this.snackBar.open('Wrong credentials! Try again.', 'Close', {
+            duration: 2000,
+          });
           this.loading = false;
         }
       );

kibicara-frontend/src/app/shared/material/material.module.ts

@@ -8,6 +8,8 @@ import { MatCardModule } from '@angular/material/card';
 import { MatExpansionModule } from '@angular/material/expansion';
 import { MatListModule } from '@angular/material/list';
 import { MatInputModule } from '@angular/material/input';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBarModule } from '@angular/material/snack-bar';
 
 @NgModule({
   declarations: [],
@@ -21,6 +23,8 @@ import { MatInputModule } from '@angular/material/input';
     MatExpansionModule,
     MatListModule,
     MatInputModule,
+    MatDialogModule,
+    MatSnackBarModule,
   ],
   exports: [
     MatButtonModule,
@@ -32,6 +36,8 @@ import { MatInputModule } from '@angular/material/input';
     MatExpansionModule,
     MatListModule,
     MatInputModule,
+    MatDialogModule,
+    MatSnackBarModule,
   ],
 })
 export class MaterialModule {}