[Frontend] - Login & Register Pages

frontend/angular.json

@@ -4,6 +4,12 @@
   "newProjectRoot": "projects",
   "projects": {
     "frontend": {
+      "i18n": {
+        "sourceLocale": "en-US",
+        "locales": {
+          "nl": "src/locale/messages.nl.json"
+        }
+      },
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -17,6 +23,9 @@
         "build": {
           "builder": "@angular-devkit/build-angular:application",
           "options": {
+            "localize": [
+              "en-US"
+            ],
             "outputPath": "dist/frontend",
             "index": "src/index.html",
             "browser": "src/main.ts",
@@ -100,10 +109,16 @@
         "lint": {
           "builder": "@angular-eslint/builder:lint",
           "options": {
-            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
           }
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
-}
+}

frontend/package.json

@@ -36,6 +36,7 @@
     "@angular/cli": "^17.3.0",
     "@angular/compiler-cli": "^17.3.0",
     "@angular/core": "^17.3.0",
+    "@angular/localize": "^17.3.12",
     "@types/jasmine": "~5.1.0",
     "@typescript-eslint/eslint-plugin": "^8.25.0",
     "@typescript-eslint/parser": "^8.25.0",

frontend/src/app/app.component.html

@@ -1 +1,3 @@
-<p>Hello World!</p>
+<main>
+    <router-outlet></router-outlet>
+</main>

frontend/src/app/app.component.less

@@ -0,0 +1,3 @@
+main {
+    height: 100%;
+}

frontend/src/app/app.component.spec.ts

@@ -1,29 +1,26 @@
-import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
+import { TestBed } from "@angular/core/testing";
+import { provideRouter } from "@angular/router";
+import { RouterTestingHarness } from "@angular/router/testing";
+import { AppComponent } from "./app.component";
 
 describe('AppComponent', () => {
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [AppComponent],
-    }).compileComponents();
-  });
+    let component: AppComponent;
+    let harness: RouterTestingHarness;
 
-  it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app).toBeTruthy();
-  });
+    beforeEach(async () => {
+        TestBed.configureTestingModule({
+            imports: [AppComponent],
+            providers: [
+                provideRouter([{ path: "**", component: AppComponent }])
+            ]
+        });
 
-  it(`should have the 'frontend' title`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.componentInstance;
-    expect(app.title).toEqual('frontend');
-  });
+        harness = await RouterTestingHarness.create();
+        component = await harness.navigateByUrl('/', AppComponent);
+        harness.detectChanges();
+    });
 
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    fixture.detectChanges();
-    const compiled = fixture.nativeElement as HTMLElement;
-    expect(compiled.querySelector('p')?.textContent).toContain('Hello World!');
-  });
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
 });

frontend/src/app/app.component.ts

@@ -4,10 +4,11 @@ import { RouterOutlet } from '@angular/router';
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [RouterOutlet],
+  imports: [
+    RouterOutlet
+  ],
   templateUrl: './app.component.html',
   styleUrl: './app.component.less'
 })
 export class AppComponent {
-  title = 'frontend';
 }

frontend/src/app/app.routes.ts

@@ -1,3 +1,14 @@
 import { Routes } from '@angular/router';
+import { LandingPageComponent } from './pages/landing-page/landing-page.component';
+import { LoginPageComponent } from './pages/login-page/login-page.component';
+import { RegisterPageComponent } from './pages/register-page/register-page.component';
 
-export const routes: Routes = [];
+/**
+ * Routing of our frontend.
+ * Based on https://angular.dev/guide/routing/common-router-tasks
+ */
+export const routes: Routes = [
+    { path: '', component: LandingPageComponent },
+    { path: 'login', component: LoginPageComponent },
+    { path: 'register', component: RegisterPageComponent },
+];

frontend/src/app/components/login/login.component.html

@@ -0,0 +1,15 @@
+<form [formGroup]="loginForm" (ngSubmit)="login()">
+    <div class="login-email">
+        <label for="email">Email:</label>
+        <input type="email" id="email" formControlName="email" required>
+    </div>
+
+    <div class="login-password">
+        <label for="password">Password:</label>
+        <input type="password" id="password" formControlName="password" required>
+    </div>
+
+    <div class="login-submit">
+        <button type="submit" [disabled]="loginForm.invalid">Login</button>
+    </div>
+</form>

frontend/src/app/components/login/login.component.less

@@ -0,0 +1,7 @@
+div {
+    width: 96%;
+    margin: 2%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}

frontend/src/app/components/login/login.component.spec.ts

@@ -0,0 +1,41 @@
+import { TestBed } from "@angular/core/testing";
+import { provideRouter } from "@angular/router";
+import { RouterTestingHarness } from "@angular/router/testing";
+import { LoginComponent } from "./login.component";
+
+describe('LoginComponent', () => {
+    let component: LoginComponent;
+    let harness: RouterTestingHarness;
+
+    beforeEach(async () => {
+        TestBed.configureTestingModule({
+            imports: [LoginComponent],
+            providers: [
+                provideRouter([{ path: "**", component: LoginComponent }])
+            ]
+        });
+
+        harness = await RouterTestingHarness.create();
+        component = await harness.navigateByUrl('/', LoginComponent);
+        harness.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('should have a login form', () => {
+        const loginForm = harness.fixture.nativeElement.querySelector('form');
+        expect(loginForm).toBeTruthy();
+    });
+
+    it('should have an email input', () => {
+        const emailInput = harness.fixture.nativeElement.querySelector('input[type="email"]');
+        expect(emailInput).toBeTruthy();
+    });
+
+    it('should have a password input', () => {
+        const passwordInput = harness.fixture.nativeElement.querySelector('input[type="password"]');
+        expect(passwordInput).toBeTruthy();
+    });
+});

frontend/src/app/components/login/login.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { FormGroup, ReactiveFormsModule, FormBuilder, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-login',
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  templateUrl: './login.component.html',
+  styleUrl: './login.component.less'
+})
+export class LoginComponent {
+  loginForm: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.loginForm = this.formBuilder.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', Validators.required]
+    });
+  }
+
+  login() {
+    // TODO: include logic
+    if(this.loginForm.valid) {
+      window.alert(`Login successful!\n${this.loginForm.value.email}`);
+    } else {
+      console.error('Invalid login form');
+    }
+  }
+}

frontend/src/app/components/register/register.component.html

@@ -0,0 +1,30 @@
+<form [formGroup]="registrationForm" (ngSubmit)="register()">
+    <div class="register-email">
+        <label for="email">Email:</label>
+        <input type="email" id="email" formControlName="email" required>
+    </div>
+
+    <div class="register-password">
+        <label for="password">Password:</label>
+        <input name="password" type="password" id="password" formControlName="password" required>
+    </div>
+
+    <div class="register-password">
+        <label for="confirmPassword">Confirm Password:</label>
+        <input 
+            name="confirm-password" 
+            type="password" 
+            id="confirmPassword" 
+            formControlName="confirmPassword" 
+        required>
+    </div>
+
+    <div class="register-teacher">
+        <input type="checkbox" id="teacher" formControlName="teacher">
+        <label for="teacher">Teacher</label>
+    </div>
+
+    <div class="register-submit">
+        <button type="submit" [disabled]="registrationForm.invalid">Register</button>
+    </div>
+</form>

frontend/src/app/components/register/register.component.less

@@ -0,0 +1,10 @@
+div {
+    width: 96%;
+    margin: 2%;
+    display: flex;
+    justify-content: center;
+}
+
+div:not(.register-teacher) {
+    flex-direction: column;
+}

frontend/src/app/components/register/register.component.spec.ts

@@ -0,0 +1,52 @@
+import { TestBed } from "@angular/core/testing";
+import { provideRouter } from "@angular/router";
+import { RouterTestingHarness } from "@angular/router/testing";
+import { RegisterComponent } from "./register.component";
+import { By } from "@angular/platform-browser";
+
+describe('RegisterComponent', () => {
+  let component: RegisterComponent;
+  let harness: RouterTestingHarness;
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      imports: [RegisterComponent],
+      providers: [
+        provideRouter([{ path: "**", component: RegisterComponent }])
+      ]
+    });
+
+    harness = await RouterTestingHarness.create();
+    component = await harness.navigateByUrl('/', RegisterComponent);
+    harness.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have a register form', () => {
+    const registerForm = harness.fixture.nativeElement.querySelector('form');
+    expect(registerForm).toBeTruthy();
+  });
+
+  it('should have an email input', () => {
+    const emailInput = harness.fixture.nativeElement.querySelector('input[type="email"]');
+    expect(emailInput).toBeTruthy();
+  });
+
+  it('should have a password input', () => {
+    const passwordInput = harness.fixture.debugElement.query(By.css('input[name="password"]'));
+    expect(passwordInput).toBeTruthy();
+  });
+
+  it('should have a confirm password input', () => {
+    const confirmPasswordInput = harness.fixture.debugElement.query(By.css('input[name="confirm-password"]'));
+    expect(confirmPasswordInput).toBeTruthy();
+  });
+
+  it('should have a register button', () => {
+    const registerButton = harness.fixture.nativeElement.querySelector('button');
+    expect(registerButton).toBeTruthy();
+  });
+});

frontend/src/app/components/register/register.component.ts

@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+import { FormBuilder, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
+
+@Component({
+  selector: 'app-register',
+  standalone: true,
+  imports: [ReactiveFormsModule],
+  templateUrl: './register.component.html',
+  styleUrl: './register.component.less'
+})
+export class RegisterComponent {
+  registrationForm: FormGroup;
+
+  constructor(private formBuilder: FormBuilder) {
+    this.registrationForm = this.formBuilder.group({
+      email: ['', [Validators.required, Validators.email]],
+      password: ['', [Validators.required, Validators.minLength(8)]],
+      confirmPassword: ['', Validators.required],
+      teacher: [false]
+    });
+  }
+
+  register() {
+    // TODO: include logic
+    if(this.registrationForm.valid) {
+      window.alert(`Registration successful!\n${this.registrationForm.value.email}`);
+    } else {
+      console.error('Invalid register form');
+    }
+  }
+}

frontend/src/app/components/unauthenticated-header/unauthenticated-header.component.html

@@ -0,0 +1,11 @@
+<header>
+    <span class="logo">
+        <img i18n-alt routerLink="/" src="assets/images/logo.svg" alt="Dwengo logo">
+    </span>
+
+    <span class="links">
+        <button i18n class="home-button" routerLink="/">Home</button>
+        <button i18n class="login-button" routerLink="/login">Login</button>
+        <button i18n class="register-button" routerLink="/register">Register</button>
+    </span>
+</header>