[#5] init registration page

CLIENT/CLIENT.FileSharing/src/app/app.routes.ts

@@ -6,6 +6,7 @@ import { UploadsComponent } from './pages/uploads/uploads.component';
 import { ProfileComponent } from './pages/profile/profile.component';
 import { SettingsComponent } from './pages/settings/settings.component';
 import { LoginComponent } from './identity/login/login.component';
+import { RegisterComponent } from './identity/register/register.component';
 
 export const routes: Routes = [
   {
@@ -17,6 +18,10 @@ export const routes: Routes = [
     path: 'auth',
     component: LoginComponent,
   },
+  {
+    path: 'register',
+    component: RegisterComponent,
+  },
   {
     path: 'home',
     component: HomeComponent,

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

@@ -76,5 +76,7 @@
 </div>
 <div id="register-section">
   <span>No account yet?</span>
-  <button mat-button color="primary">Register here</button>
+  <button mat-button color="primary" (click)="onGotoRegister()">
+    Register here
+  </button>
 </div>

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

@@ -49,6 +49,10 @@ export class LoginComponent implements OnInit {
 
   ngOnInit() {}
 
+  onGotoRegister() {
+    this.router.navigateByUrl('/register');
+  }
+
   onSubmit(form: NgForm, event: Event) {
     event.preventDefault();
     let loginCommand = new LoginModel(this.username!, this.password!);

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

@@ -0,0 +1,102 @@
+<div class="panel">
+  <!-- <img class="fs-logo" src="" alt="File Sharing Logo" /> -->
+  <div class="header">
+    <mat-icon>app_registration</mat-icon>
+    <span class="title">Register</span>
+  </div>
+
+  <form #registerForm="ngForm" (ngSubmit)="onSubmit(registerForm, $event)">
+    <mat-form-field>
+      <mat-label>Email</mat-label>
+      <input
+        matInput
+        type="email"
+        name="username"
+        [formControl]="emailFormControl"
+        required
+        #emailInput
+        minlength="3"
+        maxlength="50"
+        [errorStateMatcher]="matcher"
+      />
+      @if (
+        emailFormControl.hasError("email") &&
+        !emailFormControl.hasError("required")
+      ) {
+        <mat-error>Please enter a valid email address</mat-error>
+      }
+      @if (emailFormControl.hasError("required")) {
+        <mat-error>Email is <strong>required</strong></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>
+    <mat-form-field id="confirm-password-field">
+      <mat-label>Confirm Password</mat-label>
+      <input
+        matInput
+        type="password"
+        name="password"
+        [(ngModel)]="confirmPassword"
+        required
+        #confirmPasswordInput="ngModel"
+        minlength="6"
+        maxlength="50"
+      />
+      @if (passwordInput.invalid && passwordInput.touched) {
+        <mat-error>Confirm 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 (registerErrorMessage) {
+      <span class="error-message ng-touched ng-invalid">{{
+        registerErrorMessage
+      }}</span>
+    }
+    <div class="buttons">
+      <button
+        id="register-button"
+        mat-flat-button
+        color="primary"
+        type="submit"
+        [disabled]="registerForm.invalid"
+      >
+        Sign up
+      </button>
+    </div>
+  </form>
+</div>
+<div id="register-section">
+  <span>Already have an account?</span>
+  <button mat-button color="primary" (click)="onGotoLogin()">Login here</button>
+</div>

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

@@ -0,0 +1,84 @@
+$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;
+
+    #register-button {
+      padding-inline: 48px;
+      margin-left: auto;
+    }
+  }
+}
+
+#login-section {
+  width: $panel-width;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}

CLIENT/CLIENT.FileSharing/src/app/identity/register/register.component.spec.ts

@@ -0,0 +1,28 @@
+/* tslint:disable:no-unused-variable */
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { RegisterComponent } from './register.component';
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let fixture: ComponentFixture<RegisterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ RegisterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(RegisterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,84 @@
+import { Component, OnInit } from '@angular/core';
+import {
+  FormControl,
+  FormGroupDirective,
+  FormsModule,
+  NgForm,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { ErrorStateMatcher } from '@angular/material/core';
+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';
+import { Router } from '@angular/router';
+
+/** Error when invalid control is dirty, touched, or submitted. */
+export class MyErrorStateMatcher implements ErrorStateMatcher {
+  isErrorState(
+    control: FormControl | null,
+    form: FormGroupDirective | NgForm | null,
+  ): boolean {
+    const isSubmitted = form && form.submitted;
+    return !!(
+      control &&
+      control.invalid &&
+      (control.dirty || control.touched || isSubmitted)
+    );
+  }
+}
+
+@Component({
+  selector: 'fs-register',
+  templateUrl: './register.component.html',
+  styleUrl: './register.component.scss',
+  standalone: true,
+  imports: [
+    MatIconModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatCheckboxModule,
+  ],
+})
+export class RegisterComponent implements OnInit {
+  public registerErrorMessage?: string;
+  public showLanguageSelection = true;
+
+  public languages = [
+    { value: 'en', label: 'English' },
+    { value: 'de', label: 'Deutsch' },
+    { value: 'fr', label: 'Français' },
+  ];
+  public selectedLanguage = 'en';
+
+  protected email?: string;
+  protected password?: string;
+  protected confirmPassword?: string;
+  public keepSignedIn: boolean = false;
+
+  emailFormControl = new FormControl('', [
+    Validators.required,
+    Validators.email,
+  ]);
+
+  matcher = new MyErrorStateMatcher();
+
+  constructor(private router: Router) {}
+
+  ngOnInit() {}
+
+  onGotoLogin() {
+    this.router.navigateByUrl('/auth');
+  }
+
+  onSubmit(form: NgForm, event: Event) {
+    event.preventDefault();
+  }
+}