Write HTML for app, admin, login, and register

project/frontend-angular/src/app/admin/admin.html

@@ -1,4 +1,26 @@
-<h4>Content from Server</h4>
-{{board}}
-{{errorMessage}}
-
+<div>
+  <div>
+    <h4>Student accounts</h4>
+    <ul>
+      <li *ngFor="let student of studentList">
+        <div>
+          <span>ID: {{student.id}}</span>
+          <p>{{student.firstname}} {{student.lastname}}</p>
+        </div>
+        <button (click)="deleteStudent(student)">Delete</button>
+      </li>
+    </ul>
+  </div>
+  <div>
+    <h4>Teacher accounts</h4>
+    <ul>
+      <li *ngFor="let teacher of teacherList">
+        <div>
+          <span>ID: {{teacher.id}}</span>
+          <p>{{teacher.firstname}} {{teacher.lastname}}</p>
+        </div>
+        <button (click)="deleteTeacher(teacher)">Delete</button>
+      </li>
+    </ul>
+  </div>
+</div>

project/frontend-angular/src/app/admin/admin.ts

@@ -1,16 +1,48 @@
-import {Component, inject, OnInit} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {Teacher} from "../models/teacher";
+import {Student} from "../models/student";
+import {TeacherService} from "../services/teacher";
+import {StudentService} from "../services/student";
+import {NgForOf} from '@angular/common';
 
 @Component({
   selector: 'app-admin',
   templateUrl: './admin.html',
-  standalone: true,
+  imports: [
+    NgForOf
+  ],
   styleUrls: ['./admin.css']
 })
-export class Admin implements OnInit {
-  board?: string;
-  errorMessage?: string;
+export class Admin implements OnInit{
+  teacherList?: Teacher[];
+  studentList?: Student[];
+
+  constructor(private teacherService: TeacherService, private studentService: StudentService) { }
 
   ngOnInit() {
+    this.getTeachers();
+    this.getStudents();
+  }
+
+  getTeachers(): void{
+    this.teacherService.getTeachers()
+      .subscribe(teacherList => this.teacherList = teacherList);
+  }
+
+  getStudents(): void {
+    this.studentService.getStudents()
+      .subscribe(studentList => this.studentList = studentList);
+  }
+
+  deleteTeacher(teacher: Teacher): void {
+    this.teacherService.deleteTeacher(teacher).subscribe(
+      () => this.getTeachers()
+    );
   }
-}
 
+  deleteStudent(student: Student): void {
+    this.studentService.deleteStudent(student).subscribe(
+      () => this.getStudents()
+    );
+  }
+}

project/frontend-angular/src/app/app.html

@@ -4,6 +4,39 @@
       <li>
         <a routerLink="/">Home</a>
       </li>
+      @if (authority === 'student') {
+        <li>
+          <a>Grades</a>
+        </li>
+      }
+      @if (authority === 'teacher') {
+        <li>
+          <a routerLink="subjects">Subjects</a>
+        </li>
+      }
+      @if (authority === 'admin') {
+        <li>
+          <a routerLink="admin">Manage Accounts</a>
+        </li>
+        <li>
+          <a routerLink="auth/signup">Add Accounts</a>
+        </li>
+      }
+      @if (!authority) {
+        <li>
+          <a routerLink="auth/signin">Login</a>
+        </li>
+      }
+      @if (authority) {
+        <li>
+          <a (click)="logout()">Logout</a>
+        </li>
+      }
+      @if (authority && loggedUser) {
+        <li>
+          Logged in as: {{ loggedUser }}
+        </li>
+      }
     </ul>
   </div>
 </nav>

project/frontend-angular/src/app/app.routes.ts

@@ -1,8 +1,14 @@
 import { Routes } from '@angular/router';
-import { Student } from './student/student';
-import { Teacher } from './teacher/teacher';
+import {Register} from './register/register';
+import {Login} from './login/login';
+import {authGuard} from './guards/auth.guard';
+import {Admin} from './admin/admin';
+import {Home} from './home/home';
 
 export const routes: Routes = [
-    { path: 'student', component: Student },
-    { path: 'teacher', component: Teacher }
+    {path: 'home', component: Home},
+    { path: 'auth/signin', component: Login },
+    { path: 'auth/signup', component: Register, canActivate: [authGuard], data: { roles: ['ROLE_ADMIN'] },},
+    { path: 'admin', component: Admin, canActivate: [authGuard], data: { roles: ['ROLE_ADMIN'] },},
+    { path: '', redirectTo: 'home', pathMatch: 'full' }
 ];

project/frontend-angular/src/app/app.ts

@@ -1,12 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterLink, RouterOutlet } from '@angular/router';
-import {Student} from './student/student';
-import {Teacher} from './teacher/teacher';
 import {TokenStorageService} from './auth/token-storage.service';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, Student, RouterLink, Teacher],
+  imports: [RouterOutlet, RouterLink],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })

project/frontend-angular/src/app/login/login.html

@@ -1 +1,51 @@
-<p>login works!</p>
+<div>
+  @if (isLoggedIn) {
+    <div>
+      Logged in as {{roles}}.
+    </div>
+  } @else {
+    <ng-container *ngTemplateOutlet="loggedOut"></ng-container>
+  }
+
+  <ng-template #loggedOut>
+    <div>
+      <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
+        <div>
+          <label for="username" id="username">Username</label>
+          <input type="text" name="username" [(ngModel)]="form.username" #username="ngModel" required>
+          @if (f.submitted && username.invalid) {
+            <div>
+              @if (username.errors?.['required']) {
+                Username is required
+              }
+            </div>
+          }
+        </div>
+        <div>
+          <label for="password" id="password">Password</label>
+          <input type="password" name="password" [(ngModel)]="form.password" #password="ngModel"
+                 required minlength="6">
+          @if (f.submitted && password.invalid) {
+            <div>
+              @if (password.errors?.['required']) {
+                Password is required
+              }
+              @if (password.errors?.['minlength']) {
+                Password must be at least 6 characters
+              }
+            </div>
+          }
+        </div>
+        <div>
+          <button>Login</button>
+          @if (f.submitted && isLoginFailed) {
+            <div>
+              Login failed. Please try again.
+            </div>
+          }
+        </div>
+      </form>
+      <hr>
+    </div>
+  </ng-template>
+</div>

project/frontend-angular/src/app/login/login.ts

@@ -3,11 +3,12 @@ import {LoginInfo} from '../auth/login-info';
 import {AuthService} from '../auth/auth.service';
 import {TokenStorageService} from '../auth/token-storage.service';
 import {FormsModule} from '@angular/forms';
+import {NgTemplateOutlet} from '@angular/common';
 
 @Component({
   selector: 'app-login',
   templateUrl: './login.html',
-  imports: [FormsModule],
+  imports: [FormsModule, NgTemplateOutlet],
   standalone: true,
   styleUrls: ['./login.css']
 })

project/frontend-angular/src/app/register/register.html

@@ -1 +1,75 @@
-<p>register works!</p>
+<div>
+  <div>
+    <form name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
+      <div>
+        <label for="firstname" id="firstname">Firstname</label>
+        <input type="text" name="firstname" [(ngModel)]="form.firstname" #firstname="ngModel" required />
+        @if (f.submitted && firstname.invalid) {
+          <div>
+            @if (firstname.errors?.['required']) {
+              <div>Firstname is required</div>
+            }
+          </div>
+        }
+      </div>
+      <div>
+        <label for="lastname" id="lastname">Lastname</label>
+        <input type="text" name="lastname" [(ngModel)]="form.lastname" #lastname="ngModel" required />
+        @if (f.submitted && lastname.invalid) {
+          <div>
+            @if (lastname.errors?.['required']) {
+              <div>Lastname is required</div>
+            }
+          </div>
+        }
+      </div>
+      <div>
+        <label for="username" id="username">Username</label>
+        <input type="text" name="username" [(ngModel)]="form.username" #username="ngModel" required />
+        @if (f.submitted && username.invalid) {
+          <div>
+            @if (username.errors?.['required']) {
+              <div>Username is required</div>
+            }
+          </div>
+        }
+      </div>
+      <div>
+        <label for="password" id="password">Password</label>
+        <input type="password" name="password" [(ngModel)]="form.password" #password="ngModel" required minlength="6" />
+        @if (f.submitted && password.invalid) {
+          <div>
+            @if (password.errors?.['required']) {
+              <div>Password is required</div>
+            }
+            @if (password.errors?.['minlength']) {
+              <div>Password must be at least 8 characters</div>
+            }
+          </div>
+        }
+      </div>
+      <div>
+        <label for="role" id="role">Role</label>
+        <select name="role" [(ngModel)]="form.role" #role="ngModel" required>
+          <option value="teacher">Teacher</option>
+          <option value="student">Student</option>
+        </select>
+        @if (f.submitted && role.invalid) {
+          <div>
+            @if (role.errors?.['required']) {
+              <div>Role is required</div>
+            }
+          </div>
+        }
+      </div>
+      <div>
+        <button>Register</button>
+        @if (f.submitted && isSignUpFailed) {
+          <div>
+            Registration failed: {{ errorMessage }}
+          </div>
+        }
+      </div>
+    </form>
+  </div>
+</div>