hopefully finished

frontend/src/app/auth/signup-info.ts

@@ -3,14 +3,14 @@ export class SignupInfo {
   username: string;
   role: string[];
   password: string;
-  name: string;
-  surname: string;
+  firstname: string;
+  lastname: string;
 
-  constructor(username: string, password: string, role: string[], name: string, surname: string) {
+  constructor(username: string, password: string, role: string[], firstname: string, lastname: string) {
     this.username = username;
     this.role = role;
     this.password = password;
-    this.name = name;
-    this.surname = surname;
+    this.firstname = firstname
+    this.lastname = lastname;
   }
 }

frontend/src/app/grademanager/grademanager.component.html

@@ -40,7 +40,7 @@
             <thead>
             <tr>
               <th class="table-header">Name</th>
-              <th class="table-header">Surname</th>
+              <th class="table-header">lastname</th>
               <th class="table-header">Grades</th>
             </tr>
             </thead>

frontend/src/app/login/login.component.css

@@ -0,0 +1,84 @@
+.container {
+  max-width: 24rem;
+  margin: 0 auto;
+}
+
+.message {
+  margin-bottom: 1.5rem;
+  font-size: 1.5rem;
+  font-weight: bold;
+  color: #111827;
+}
+
+.card {
+  width: 100%;
+  background-color: #F3F4F6;
+  border-radius: 0.375rem;
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
+}
+
+.form {
+  padding: 1.25rem;
+}
+
+.form-group {
+  margin-bottom: 1.5rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #111827;
+}
+
+.form-control {
+  width: 100%;
+  padding: 0.625rem;
+  font-size: 0.875rem;
+  border: 1px solid #D1D5DB;
+  border-radius: 0.375rem;
+  outline: none;
+  transition: border-color 0.2s ease-in-out;
+}
+
+.form-control:focus {
+  border-color: #2563EB;
+}
+
+.form-message {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: #9CA3AF;
+}
+
+.submit-button {
+  width: 100%;
+  padding: 0.625rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #FFFFFF;
+  background-color: #111827;
+  border: none;
+  border-radius: 0.375rem;
+  outline: none;
+  cursor: pointer;
+  transition: background-color 0.2s ease-in-out;
+}
+
+.submit-button:hover {
+  background-color: #1F2937;
+}
+
+.error-message {
+  margin-top: 0.5rem;
+  font-size: 0.75rem;
+  color: #EF4444;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: none;
+  border-top: 1px solid #D1D5DB;
+}

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

@@ -1,37 +1,35 @@
-<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0">
-  <div class="mb-6 text-2xl font-semibold text-gray-900" *ngIf="isLoggedIn; else loggedOut">
+<div class="container">
+  <div *ngIf="isLoggedIn; else loggedOut" class="message">
     Logged in as {{roles}}.
   </div>
 
   <ng-template #loggedOut>
-    <div class="w-full bg-gray-200 rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 ">
-      <form class="space-y-4 md:space-y-6 p-5" name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
+    <div class="card">
+      <form class="form" name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
         <div class="form-group">
-          <label for="username" id="username" class="block mb-2 text-sm font-medium text-gray-900">Username</label>
-          <input type="text" class="form-control bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" name="username" [(ngModel)]="form.username" #username="ngModel"
-                 required />
-          <div *ngIf="f.submitted && username.invalid">
-            <div class="mt-2 text-sm font-light text-gray-500" *ngIf="['username.errors?.required']">Username is required</div>
+          <label for="username" id="username">Username</label>
+          <input type="text" class="form-control" name="username" [(ngModel)]="form.username" #username="ngModel" required>
+          <div *ngIf="f.submitted && username.invalid" class="form-message">
+            <div *ngIf="username.errors?.['required']">Username is required</div>
           </div>
         </div>
         <div class="form-group">
-          <label for="password" id="password" class="block mb-2 text-sm font-medium text-gray-900">Password</label>
-          <input type="password" class="form-control bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" name="password" [(ngModel)]="form.password" #password="ngModel"
-                 required minlength="6" />
-          <div *ngIf="f.submitted && password.invalid">
-            <div class="mt-2 text-sm font-light text-gray-500" *ngIf="['password.errors?.required']">Password is required</div>
-            <div class="mt-2 text-sm font-light text-gray-500" *ngIf="['password.errors?.minlength']">Password must be at least 6 characters</div>
+          <label for="password" id="password">Password</label>
+          <input type="password" class="form-control" name="password" [(ngModel)]="form.password" #password="ngModel"
+                 required minlength="6">
+          <div *ngIf="f.submitted && password.invalid" class="form-message">
+            <div *ngIf="password.errors?.['required']">Password is required</div>
+            <div *ngIf="password.errors?.['minlength']">Password must be at least 6 characters</div>
           </div>
         </div>
         <div class="form-group">
-          <button class="w-full text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-gray-900 hover:bg-gray-950 focus:ring-primary-800">Login</button>
-          <div *ngIf="f.submitted && isLoginFailed" class="mt-2 text-sm font-light text-gray-500" >
+          <button class="submit-button">Login</button>
+          <div *ngIf="f.submitted && isLoginFailed" class="error-message">
             Login failed. Please try again.
           </div>
         </div>
       </form>
-      <hr />
+      <hr>
     </div>
   </ng-template>
 </div>
-

frontend/src/app/register/register.component.css

@@ -0,0 +1,73 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 6px;
+}
+
+.card {
+  width: 100%;
+  max-width: 400px; /* Added max-width */
+  background-color: #eee;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  padding: 0;
+}
+
+/* Rest of the CSS code remains the same */
+
+
+.form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 20px;
+}
+
+.form-group {
+  display: flex;
+  flex-direction: column;
+}
+
+label {
+  margin-bottom: 8px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+}
+
+.input {
+  background-color: #f8f8f8;
+  border: 1px solid #ccc;
+  color: #333;
+  font-size: 14px;
+  padding: 8px;
+  border-radius: 4px;
+  outline: none;
+}
+
+.form-message {
+  margin-top: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #888;
+}
+
+.submit-button {
+  background-color: #333;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  border: none;
+  border-radius: 4px;
+  padding: 10px 16px;
+  cursor: pointer;
+}
+
+.error-message {
+  margin-top: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  color: #f00;
+}

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

@@ -1,53 +1,49 @@
-<div class="flex flex-col items-center justify-center px-6 py-8 mx-auto lg:py-0">
-  <div class="w-full bg-gray-200 rounded-lg shadow md:mt-0 sm:max-w-md xl:p-0 ">
-    <form class="space-y-4 md:space-y-6 p-5" name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
+<div class="container">
+  <div class="card">
+    <form class="form" name="form" (ngSubmit)="f.form.valid && onSubmit()" #f="ngForm" novalidate>
       <div class="form-group">
-        <label for="name" id="name" class="block mb-2 text-sm font-medium text-gray-900">Name</label>
-        <input type="text" class="form-control bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" name="name" [(ngModel)]="form.name" #name="ngModel"
-               required />
-        <div *ngIf="f.submitted && name.invalid">
-          <div class="mt-2 text-sm font-light text-gray-500" *ngIf="['name.errors?.required']">Name is required</div>
+        <label for="firstname" id="firstname">Firstname</label>
+        <input type="text" class="input" name="firstname" [(ngModel)]="form.firstname" #firstname="ngModel" required />
+        <div *ngIf="f.submitted && firstname.invalid" class="form-message">
+          <div *ngIf="firstname.errors?.['required']">Firstname is required</div>
         </div>
       </div>
       <div class="form-group">
-        <label for="surname" id="surname" class="block mb-2 text-sm font-medium text-gray-900">Surname</label>
-        <input type="email" class="form-control bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" name="surname" [(ngModel)]="form.surname" #surname="ngModel"
-               required />
-        <div *ngIf="f.submitted && surname.invalid">
-          <div class="mt-2 text-sm font-light text-gray-500" *ngIf="['surname.errors?.required']">Surname is required</div>
+        <label for="lastname" id="lastname">Lastname</label>
+        <input type="text" class="input" name="lastname" [(ngModel)]="form.lastname" #lastname="ngModel" required />
+        <div *ngIf="f.submitted && lastname.invalid" class="form-message">
+          <div *ngIf="lastname.errors?.['required']">Lastname is required</div>
         </div>
       </div>
       <div class="form-group">
-        <label for="username" id="username" class="block mb-2 text-sm font-medium text-gray-900">Username</label>
-        <input type="text" class="form-control bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" name="username" [(ngModel)]="form.username" #username="ngModel"
-               required />
-        <div *ngIf="f.submitted && username.invalid">
-          <div class="mt-2 text-sm font-light text-gray-500" *ngIf="['username.errors?.required']">Username is required</div>
+        <label for="username" id="username">Username</label>
+        <input type="text" class="input" name="username" [(ngModel)]="form.username" #username="ngModel" required />
+        <div *ngIf="f.submitted && username.invalid" class="form-message">
+          <div *ngIf="username.errors?.['required']">Username is required</div>
         </div>
       </div>
       <div class="form-group">
-        <label for="password" id="password" class="block mb-2 text-sm font-medium text-gray-900">Password</label>
-        <input type="password" class="form-control bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" name="password" [(ngModel)]="form.password" #password="ngModel"
-               required minlength="6" />
-        <div *ngIf="f.submitted && password.invalid">
-          <div class="mt-2 text-sm font-light text-gray-500" *ngIf="['password.errors?.required']">Password is required</div>
-          <div class="mt-2 text-sm font-light text-gray-500" *ngIf="['password.errors?.minlength']">Password must be at least 6 characters</div>
+        <label for="password" id="password">Password</label>
+        <input type="password" class="input" name="password" [(ngModel)]="form.password" #password="ngModel" required minlength="6" />
+        <div *ngIf="f.submitted && password.invalid" class="form-message">
+          <div *ngIf="password.errors?.['required']">Password is required</div>
+          <div *ngIf="password.errors?.['minlength']">Password must be at least 6 characters</div>
         </div>
       </div>
       <div class="form-group">
-        <label for="role" id="role" class="block mb-2 text-sm font-medium text-gray-900">Role</label>
-        <select class="form-control bg-gray-50 border border-gray-300 text-gray-900 sm:text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5" name="role" [(ngModel)]="form.role" #role="ngModel" required>
+        <label for="role" id="role">Role</label>
+        <select class="input" name="role" [(ngModel)]="form.role" #role="ngModel" required>
           <option value="teacher">Teacher</option>
           <option value="student">Student</option>
         </select>
-        <div *ngIf="f.submitted && role.invalid">
-          <div class="mt-2 text-sm font-light text-gray-500" *ngIf="['role.errors?.required']">Role is required</div>
+        <div *ngIf="f.submitted && role.invalid" class="form-message">
+          <div *ngIf="role.errors?.['required']">Role is required</div>
         </div>
       </div>
       <div class="form-group">
-        <button class="w-full text-white focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center bg-gray-900 hover:bg-gray-950 focus:ring-primary-800">Register</button>
-        <div *ngIf="f.submitted && isSignUpFailed" class="mt-2 text-sm font-light text-gray-500" >
-          Registration failed: {{errorMessage}}
+        <button class="submit-button">Register</button>
+        <div *ngIf="f.submitted && isSignUpFailed" class="error-message">
+          Registration failed: {{ errorMessage }}
         </div>
       </div>
     </form>

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

@@ -24,8 +24,8 @@ export class RegisterComponent implements OnInit {
       this.form.username,
       this.form.password,
       [this.form.role],
-      this.form.name,
-      this.form.surname);
+      this.form.firstname,
+      this.form.lastname);
 
     this.authService.signUp(this.signupInfo).subscribe(
       data => {