Add login and home components in angular app.

sportshub-gui/src/app/components/home/home.component.html

@@ -0,0 +1 @@
+<h1>Hello world!</h1>

sportshub-gui/src/app/components/home/home.component.ts

@@ -0,0 +1,10 @@
+import {Component} from "@angular/core";
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent {
+
+}

sportshub-gui/src/app/components/home/home.module.ts

@@ -0,0 +1,25 @@
+import {NgModule} from "@angular/core";
+import {HomeComponent} from "./home.component";
+import {RouterModule} from "@angular/router";
+
+const routes = [
+  {
+    path: '',
+    component: HomeComponent
+  }
+]
+
+@NgModule({
+  declarations: [
+    HomeComponent
+  ],
+  imports: [
+    RouterModule.forChild(routes),
+  ],
+  exports: [
+    HomeComponent
+  ]
+})
+export class HomeModule {
+
+}

sportshub-gui/src/app/components/login/login.component.html

@@ -0,0 +1,13 @@
+<form (ngSubmit)="onSubmit()" [formGroup]="loginForm" ngNativeValidate>
+  <div>
+    <label for="id">Identifier</label>
+    <input id="id" name="id" formControlName="id"/>
+  </div>
+  <div>
+    <label for="password">Password</label>
+    <input id="password" name="password" type="password" formControlName="password"/>
+  </div>
+  <div>
+    <button type="submit">Validate</button>
+  </div>
+</form>

sportshub-gui/src/app/components/login/login.component.ts

@@ -0,0 +1,38 @@
+import {Component, OnInit} from "@angular/core";
+import {FormBuilder, FormControl, FormGroup, Validators} from "@angular/forms";
+import {UserRestService} from "../../core/rest-services/user.rest-service";
+import {LoginRequest} from "../../core/model/login-request";
+import {MatSnackBar} from "@angular/material/snack-bar";
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent {
+  loginForm: FormGroup;
+  isLoginPending: boolean = false;
+
+  constructor(
+    private formBuilder: FormBuilder,
+    private matSnackBar: MatSnackBar,
+    private userRestService: UserRestService
+  ) {
+    this.loginForm = this.formBuilder.group({
+      id: new FormControl(undefined, [Validators.required]),
+      password: new FormControl(undefined, [Validators.required])
+    });
+  }
+
+  onSubmit(): void {
+    this.isLoginPending = true;
+    const loginRequest: LoginRequest = this.loginForm.value;
+    this.userRestService.login(loginRequest)
+      .then(loginResponse => {
+        this.matSnackBar.open('Login success!', 'Close', { duration: 5000 });
+      })
+      .catch(error => {
+        this.matSnackBar.open('An error occured while login.', 'Close', { duration: 5000 });
+      });
+  }
+}

sportshub-gui/src/app/components/login/login.module.ts

@@ -0,0 +1,30 @@
+import {NgModule} from "@angular/core";
+import {LoginComponent} from "./login.component";
+import {CoreModule} from "../../core/core.module";
+import {MatSnackBarModule} from "@angular/material/snack-bar";
+import {RouterModule} from "@angular/router";
+import {HttpClientModule} from "@angular/common/http";
+
+const routes = [
+  {
+    path: '',
+    component: LoginComponent
+  }
+]
+
+@NgModule({
+  declarations: [
+    LoginComponent
+  ],
+  imports: [
+    CoreModule,
+    RouterModule.forChild(routes),
+    MatSnackBarModule
+  ],
+  exports: [
+    LoginComponent
+  ]
+})
+export class LoginModule {
+
+}