Code moving and fix login component style.

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

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

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

@@ -0,0 +1,19 @@
+:host {
+  display: flex;
+  justify-content: center;
+
+  form {
+    display: flex;
+    flex-direction: column;
+    border: solid 1px #e8e8e8;
+    padding: 1em;
+    border-radius: .5em;
+    gap: 1em;
+
+    div {
+      display: flex;
+      flex-direction: column;
+      justify-content: left;
+    }
+  }
+}

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

@@ -27,7 +27,9 @@ export class LoginComponent {
   }
 
   onSubmit(): void {
-    const loginRequest: LoginRequest = this.loginForm.value;
-    this.loginService.login(loginRequest);
+    if (this.loginForm.valid) {
+      const loginRequest: LoginRequest = this.loginForm.value;
+      this.loginService.login(loginRequest);
+    }
   }
 }

sportshub-gui/src/app/header/header.component.html

@@ -1,10 +1,10 @@
 <a class="title" routerLink="/">SportsHub</a>
 <div id="menu">
-  <a routerLink="/login" *ngIf="(isAuthenticated$ | async) === false">
+  <a routerLink="/login" *ngIf="(isAuthenticated$ | async) === false" class="btn">
     <mat-icon>login</mat-icon>
     Login
   </a>
-  <a routerLink="/logout" *ngIf="isAuthenticated$ | async" class="logout">
+  <a routerLink="/logout" *ngIf="isAuthenticated$ | async" class="btn logout">
     <mat-icon>logout</mat-icon>
     Logout
   </a>

sportshub-gui/src/app/header/header.component.scss

@@ -24,14 +24,6 @@
 
     a {
       flex: 0 1;
-      background-color: #008cff;
-      color: white;
-      border-radius: .5em;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: .5em 1em;
-      text-decoration: none;
       gap: .5em;
 
       &.logout {

sportshub-gui/src/styles.scss

@@ -2,3 +2,25 @@
 
 html, body { height: 100%; }
 body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+
+.shadowed {
+  box-shadow: 0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f;
+}
+
+.btn {
+  background-color: #008cff;
+  color: white;
+  border: none;
+  border-radius: .4em;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: .5em 1em;
+  text-decoration: none;
+}
+
+.input {
+  padding: .5em;
+  border-radius: .4em;
+  border: 1px solid #d2d2d2
+}