first commit

src/app/auth/login/login.component.html

@@ -0,0 +1,57 @@
+<!-- Flex container -->
+<div class="flex" style="overflow: hidden">
+  <!-- Centered container -->
+  <div class="m-auto kick-motto">
+    <div *ngIf="isLoading" class="loading-spinner-correct">
+      <app-loading-spinner></app-loading-spinner>
+    </div>
+    <div *ngIf="isAuthenticated" style="margin-top: 100%">
+      <app-score-table></app-score-table>
+    </div>
+    <!-- Material card -->
+    <div *ngIf="!isAuthenticated">
+      <mat-card
+        class="mat-mdc-card_noshadow default-background-color"
+        *ngIf="!isLoading"
+      >
+        <!-- Card image -->
+        <header-lsr></header-lsr>
+        <!-- Card content -->
+        <mat-card-content>
+          <!-- Login form -->
+          <form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
+            <!-- Email input field -->
+            <mat-form-field appearance="outline" class="custom-form-field">
+              <mat-label>Email</mat-label>
+              <input
+                type="email"
+                matInput
+                formControlName="email"
+                placeholder="@atos.net | @eviden.com"
+              />
+              <mat-error *ngIf="loginForm.get('email')?.hasError('required')"
+                >Die E-Mail-Adresse wird benötigt.
+              </mat-error>
+              <mat-error *ngIf="loginForm.get('email')?.hasError('pattern')">
+                Bitte gib deine Firmen-E-Mail lautend auf '&#64;atos.net' oder
+                '&#64;eviden.com' an.
+              </mat-error>
+            </mat-form-field>
+
+            <!-- Card actions with login button -->
+            <mat-card-actions>
+              <button
+                class="m-auto blue-buttons disabled-button"
+                mat-button
+                type="submit"
+                [disabled]="!loginForm.valid"
+              >
+                LOGIN | SIGN UP
+              </button>
+            </mat-card-actions>
+          </form>
+        </mat-card-content>
+      </mat-card>
+    </div>
+  </div>
+</div>