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);
+    }
   }
 }