[#6] create first login page design

CLIENT/CLIENT.FileSharing/src/app/identity/login/login.component.html

@@ -1,3 +1,80 @@
-<p>
-  login works!
-</p>
+<div class="panel">
+  <!-- <img class="fs-logo" src="" alt="File Sharing Logo" /> -->
+  <div class="header">
+    <mat-icon>lock</mat-icon>
+    <span class="title">Login</span>
+  </div>
+
+  <form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm, $event)">
+    <mat-form-field>
+      <mat-label>Username</mat-label>
+      <input
+        matInput
+        type="text"
+        name="username"
+        [(ngModel)]="username"
+        required
+        #usernameInput="ngModel"
+        minlength="3"
+        maxlength="50"
+      />
+      @if (usernameInput.invalid && usernameInput.touched) {
+        <mat-error>Username is required.</mat-error>
+      }
+    </mat-form-field>
+    <mat-form-field id="password-field">
+      <mat-label>Password</mat-label>
+      <input
+        matInput
+        type="password"
+        name="password"
+        [(ngModel)]="password"
+        required
+        #passwordInput="ngModel"
+        minlength="6"
+        maxlength="50"
+      />
+      @if (passwordInput.invalid && passwordInput.touched) {
+        <mat-error>Password is required.</mat-error>
+      }
+    </mat-form-field>
+    <div class="selections-container">
+      <mat-checkbox
+        class="keep-signed-in"
+        [(ngModel)]="keepSignedIn"
+        name="keepSignedIn"
+        labelPosition="after"
+        >Keep me signed in</mat-checkbox
+      >
+      <mat-form-field class="selection">
+        <mat-label>Language</mat-label>
+        <mat-select [(ngModel)]="selectedLanguage" name="selectedLanguage">
+          @for (language of languages; track language) {
+            <mat-option [value]="language">{{ language.label }}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </div>
+    @if (loginErrorMessage) {
+      <span class="error-message ng-touched ng-invalid">{{
+        loginErrorMessage
+      }}</span>
+    }
+    <div class="buttons">
+      <button mat-button color="primary">Forgot Password</button>
+      <button
+        id="login-button"
+        mat-flat-button
+        color="primary"
+        type="submit"
+        [disabled]="loginForm.invalid"
+      >
+        Login
+      </button>
+    </div>
+  </form>
+</div>
+<div id="register-section">
+  <span>No account yet?</span>
+  <button mat-button color="primary">Register here</button>
+</div>

CLIENT/CLIENT.FileSharing/src/app/identity/login/login.component.scss

@@ -0,0 +1,83 @@
+$panel-width: 390px;
+
+:host {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: #f6f6f6;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 44px 56px 48px;
+  border-radius: 4px;
+  box-shadow: 0 2px 4px #727685;
+  width: $panel-width;
+  margin: 32px 16px 8px;
+
+  .header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .title {
+      margin-left: 8px;
+      font-size: 24px;
+      line-height: 24px;
+    }
+  }
+
+  form {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin-top: 44px;
+  }
+
+  #password-field {
+    margin-top: 4px;
+  }
+
+  .selections-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 16px;
+
+    .selection {
+      width: 50%;
+    }
+
+    .keep-signed-in {
+      padding-bottom: 20px;
+    }
+  }
+
+  .error-message {
+    text-align: center;
+    margin-top: 4px;
+  }
+
+  .buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 24px;
+
+    #login-button {
+      padding-inline: 48px;
+    }
+  }
+}
+
+#register-section {
+  width: $panel-width;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}

CLIENT/CLIENT.FileSharing/src/app/identity/login/login.component.ts

@@ -1,15 +1,49 @@
 import { Component, OnInit } from '@angular/core';
+import { FormsModule, NgForm, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
 
 @Component({
-  selector: 'app-login',
+  selector: 'fs-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
+  styleUrl: './login.component.scss',
+  standalone: true,
+  imports: [
+    MatIconModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatCheckboxModule,
+  ],
 })
 export class LoginComponent implements OnInit {
+  public loginErrorMessage?: string;
+  public showLanguageSelection = true;
 
-  constructor() { }
+  public languages = [
+    { value: 'en', label: 'English' },
+    { value: 'de', label: 'Deutsch' },
+    { value: 'fr', label: 'Français' },
+  ];
+  public selectedLanguage = 'en';
 
-  ngOnInit() {
-  }
+  protected username?: string;
+  protected password?: string;
+  public keepSignedIn: boolean = false;
+
+  constructor() {}
 
+  ngOnInit() {}
+
+  onSubmit(form: NgForm, event: Event) {
+    event.preventDefault();
+    console.log('Form submitted', form.value);
+  }
 }