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/models/grade.spec.ts

@@ -0,0 +1,7 @@
+import { Grade } from './grade';
+
+describe('Grade', () => {
+  it('should create an instance', () => {
+    expect(new Grade()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,15 @@
+import { Student } from "./student";
+import { Subject } from "./subject";
+
+export class Grade {
+  id?: number;
+  grade: number;
+  subject: Subject;
+  student: Student;
+
+  constructor(grade: number, subject: Subject, student: Student) {
+    this.grade = grade;
+    this.subject = subject;
+    this.student = student;
+  }
+}

project/frontend-angular/src/app/models/student.spec.ts

@@ -0,0 +1,7 @@
+import { Student } from './student';
+
+describe('Student', () => {
+  it('should create an instance', () => {
+    expect(new Student()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,14 @@
+import {Grade} from "./grade";
+
+export class Student {
+  id?: number;
+  firstname: string;
+  lastname: string;
+  grades: Grade[];
+
+  constructor(firstname: string, lastname: string) {
+    this.firstname = firstname;
+    this.lastname = lastname;
+    this.grades = [];
+  }
+}

project/frontend-angular/src/app/models/subject.spec.ts

@@ -0,0 +1,7 @@
+import { Subject } from './subject';
+
+describe('Subject', () => {
+  it('should create an instance', () => {
+    expect(new Subject()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import {Teacher} from "./teacher";
+
+export class Subject {
+  id?: number;
+  name: string;
+  teacher: Teacher | undefined;
+
+  constructor(name: string) {
+    this.name = name;
+  }
+}

project/frontend-angular/src/app/models/teacher.spec.ts

@@ -0,0 +1,7 @@
+import { Teacher } from './teacher';
+
+describe('Teacher', () => {
+  it('should create an instance', () => {
+    expect(new Teacher()).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,14 @@
+import {Subject} from "./subject";
+
+export class Teacher {
+  id?: number;
+  firstname: string;
+  lastname: string;
+  subjects: Subject[];
+
+  constructor(firstname: string, lastname: string) {
+    this.firstname = firstname;
+    this.lastname = lastname;
+    this.subjects = [];
+  }
+}

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>

project/frontend-angular/src/app/services/grade.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { GradeService } from './grade';
+
+describe('Grade', () => {
+  let service: GradeService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(GradeService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,56 @@
+import {inject, Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {catchError, Observable, of} from "rxjs";
+import {Grade} from "../models/grade";
+
+const httpOptions = {
+  headers: new HttpHeaders({'Content-Type': 'application/json'})
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class GradeService {
+  private gradesUrl = 'http://localhost:8080/grades';
+  
+  private http = inject(HttpClient);
+
+  addGrade(grade: Grade): Observable<Grade> {
+    return this.http.post<Grade>(this.gradesUrl, grade, httpOptions).pipe(
+      catchError(this.handleError<Grade>('addGrade', 'Error while adding the grade!'))
+    );
+  }
+
+  getGradesFromSubject(subjectId: number): Observable<Grade[]> {
+    return this.http.get<Grade[]>(`${this.gradesUrl}/subject/${subjectId}`).pipe(
+      catchError(this.handleError<Grade[]>('getGradesFromSubject', 'Error while getting grades', []))
+    );
+  }
+
+  getStudentGrades(): Observable<Grade[]> {
+    return this.http.get<Grade[]>(`${this.gradesUrl}/student`).pipe(
+      catchError(this.handleError<Grade[]>('getStudentGrades', 'Error while getting grades!',[]))
+    );
+  }
+
+  editGrade(grade: Grade): Observable<Grade> {
+    return this.http.patch<Grade>(`${this.gradesUrl}/edit/${grade.id}`, grade.grade, httpOptions).pipe(
+      catchError(this.handleError<Grade>('editGrade', 'Editing grade failed!'))
+    );
+  }
+
+  deleteGrade(id: number): Observable<void> {
+    const url = `${this.gradesUrl}/${id}`;
+    return this.http.delete<void>(url, httpOptions).pipe(
+      catchError(this.handleError<void>('deleteGrade', 'Error while deleting the grade!'))
+    );
+  }
+
+  private handleError<T>(operation = 'operation', communicate: string, result?: T) {
+    return (error: any): Observable<T> => {
+      console.log(`GradeService: ${operation} failed: ${error.message}`);
+      alert(`${communicate}`);
+      return of(result as T);
+    };
+  }
+}

project/frontend-angular/src/app/services/student.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { StudentService } from './student';
+
+describe('Student', () => {
+  let service: StudentService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(StudentService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,40 @@
+import {inject, Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {catchError, Observable, of, tap} from "rxjs";
+import {Student} from "../models/student";
+
+const httpOptions = {
+  headers: new HttpHeaders({'Content-Type': 'application/json'})
+};
+
+@Injectable({
+  providedIn: 'root'
+})
+export class StudentService {
+  private studentsUrl = 'http://localhost:8080/students';
+
+  private http = inject(HttpClient);
+
+  getStudents(): Observable<Student[]> {
+    return this.http.get<Student[]>(this.studentsUrl).pipe(
+      catchError(this.handleError<Student[]>('getStudents', 'Error while getting students'))
+    );
+  }
+
+  deleteStudent(student: Student | number): Observable<Student> {
+    const id = typeof student === 'number' ? student : student.id;
+    const url = `${this.studentsUrl}/${id}`;
+    return this.http.delete<Student>(url, httpOptions).pipe(
+      tap(_ => console.log(`StudentService: deleted student id=${id}`)),
+      catchError(this.handleError<Student>('deleteStudent', 'Error while deleting student'))
+    );
+  }
+
+  private handleError<T>(operation = 'operation', communicate: string, result?: T) {
+    return (error: any): Observable<T> => {
+      console.log(`StudentService: ${operation} failed: ${error.message}`);
+      alert(`${communicate}`);
+      return of(result as T);
+    };
+  }
+}

project/frontend-angular/src/app/services/subject.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { SubjectService } from './subject';
+
+describe('Subject', () => {
+  let service: SubjectService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(SubjectService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,48 @@
+import {inject, Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {catchError, Observable, of} from "rxjs";
+import { Subject } from '../models/subject';
+
+const httpOptions = {
+  headers: new HttpHeaders({'Content-Type': 'application/json'})
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SubjectService {
+  private subjectsUrl = 'http://localhost:8080/subjects';
+
+  private http = inject(HttpClient);
+
+  getSubject(id: number): Observable<Subject> {
+    const url = `${this.subjectsUrl}/${id}`;
+    return this.http.get<Subject>(url);
+  }
+
+  getTeachersSubjects(): Observable<Subject[]> {
+    return this.http.get<Subject[]>(`${this.subjectsUrl}/teacher`).pipe(
+      catchError(this.handleError<Subject[]>('getTeachersSubjects', 'Error while getting teachers subjects')),
+    );
+  }
+
+  getSubjects(): Observable<Subject[]> {
+    return this.http.get<Subject[]>(this.subjectsUrl).pipe(
+      catchError(this.handleError<Subject[]>('getSubjects', 'Error while getting subjects')),
+    );
+  }
+
+  addSubject(subject: Subject): Observable<Subject> {
+    return this.http.post<Subject>(this.subjectsUrl, subject, httpOptions).pipe(
+      catchError(this.handleError<Subject>('addSubject', 'Subject already exists!')),
+    );
+  }
+
+  private handleError<T>(operation = 'operation', communicate: string, result?: T) {
+    return (error: any): Observable<T> => {
+      console.log('SubjectService: ' + `${operation} failed: ${error.message}`);
+      alert(`${communicate}`);
+      return of(result as T);
+    };
+  }
+}

project/frontend-angular/src/app/services/teacher.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { TeacherService } from './teacher';
+
+describe('Teacher', () => {
+  let service: TeacherService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(TeacherService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,40 @@
+import {inject, Injectable} from '@angular/core';
+import {HttpClient, HttpHeaders} from "@angular/common/http";
+import {catchError, Observable, of, tap} from "rxjs";
+import { Teacher } from '../models/teacher';
+
+const httpOptions = {
+  headers: new HttpHeaders({'Content-Type': 'application/json'})
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TeacherService {
+  private teachersUrl = 'http://localhost:8080/teachers';
+
+  private http = inject(HttpClient);
+
+  getTeachers(): Observable<Teacher[]> {
+    return this.http.get<Teacher[]>(this.teachersUrl).pipe(
+      catchError(this.handleError<Teacher[]>('getTeachers', 'Error while getting teachers'))
+    );
+  }
+
+  deleteTeacher(teacher: Teacher | number): Observable<Teacher> {
+    const id = typeof teacher === 'number' ? teacher : teacher.id;
+    const url = `${this.teachersUrl}/${id}`;
+    return this.http.delete<Teacher>(url, httpOptions).pipe(
+      tap(_ => alert(`Successfully deleted teacher with id=${id}`)),
+      catchError(this.handleError<Teacher>('deleteStudent', 'Error while deleting student'))
+    );
+  }
+
+  private handleError<T>(operation = 'operation', communicate: string, result?: T) {
+    return (error: any): Observable<T> => {
+      console.log(`TeacherService: ${operation} failed: ${error.message}`);
+      alert(`${communicate}`);
+      return of(result as T);
+    };
+  }
+}

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

@@ -1 +0,0 @@
-<p>student works!</p>

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

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Student } from './student';
-
-describe('Student', () => {
-  let component: Student;
-  let fixture: ComponentFixture<Student>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Student]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Student);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-student',
-  imports: [],
-  templateUrl: './student.html',
-  styleUrl: './student.css'
-})
-export class Student {
-
-}

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

@@ -1 +0,0 @@
-<p>teacher works!</p>

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

@@ -1,23 +0,0 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { Teacher } from './teacher';
-
-describe('Teacher', () => {
-  let component: Teacher;
-  let fixture: ComponentFixture<Teacher>;
-
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      imports: [Teacher]
-    })
-    .compileComponents();
-
-    fixture = TestBed.createComponent(Teacher);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

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

@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-teacher',
-  imports: [],
-  templateUrl: './teacher.html',
-  styleUrl: './teacher.css'
-})
-export class Teacher {
-
-}