added user infos dropdown

frontend/src/app/app.component.html

@@ -12,12 +12,17 @@
             <button class="mr-4 border-2 border-transparent hover:border-solid hover:border-white hover:border-2 hover:rounded-lg px-2" *ngIf="auth.isLoggedIn()" (click)="auth.logout()">Logout</button>
             <button class="mr-4 border-2 border-transparent hover:border-solid hover:border-white hover:border-2 hover:rounded-lg px-2" *ngIf="!auth.isLoggedIn()" (click)="router.navigateByUrl('/signup')">Sign Up</button>
     
-            <div class="border-2 border-transparent bg-violet-950 h-8 w-8 rounded-full flex justify-center items-center">{{auth.getUsername().split('')[0].toUpperCase()}}</div>
+            <div class="border-2 border-transparent bg-violet-950 h-8 w-8 rounded-full flex justify-center items-center hover:cursor-pointer" (click)="userDropdown()">{{auth.getUsername().split('')[0].toUpperCase()}}</div>
         </div>
     </nav>
 
+    <div *ngIf="userDropdownModal">
+        <app-user-dropdown [username]="auth.getUsername()"></app-user-dropdown>
+    </div>
+
     <main class="w-full h-full">
         <router-outlet>
         </router-outlet>
     </main>
 </div>
+

frontend/src/app/app.component.ts

@@ -10,6 +10,8 @@ import { AuthenticationService } from './services/authentication.service';
 export class AppComponent {
   title = 'frontend';
 
+  userDropdownModal: boolean = false
+
   constructor(
     public router: Router,
     public auth: AuthenticationService) {}
@@ -19,4 +21,9 @@ export class AppComponent {
     console.log(this.auth.isAdmin())
     return this.auth.isAdmin();
   }
+
+  userDropdown(): void {
+    this.userDropdownModal = !this.userDropdownModal;
+  }
+
 }

frontend/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { CreateQuestionComponent } from './question-shit/create-question/create-
 import { CreateAnswerComponent } from './question-shit/create-answer/create-answer.component';
 import { UpdateQuestionComponent } from './question-shit/update-question/update-question.component';
 import { UpdateAnswerComponent } from './question-shit/update-answer/update-answer.component';
+import { UserDropdownComponent } from './user-dropdown/user-dropdown.component';
 
 @NgModule({
   declarations: [
@@ -27,7 +28,8 @@ import { UpdateAnswerComponent } from './question-shit/update-answer/update-answ
     CreateQuestionComponent,
     CreateAnswerComponent,
     UpdateQuestionComponent,
-    UpdateAnswerComponent
+    UpdateAnswerComponent,
+    UserDropdownComponent
   ],
   imports: [
     BrowserModule,

frontend/src/app/services/authentication.service.ts

@@ -65,5 +65,4 @@ export class AuthenticationService {
       return "Guest";
     return user.username;
   }
-
 }

frontend/src/app/user-dropdown/user-dropdown.component.html

+<div class="z-10 fixed right-0 flex flex-col items-end">
+    <div class="h-0 w-0 border-x-8 border-x-transparent border-b-8 border-b-gray-300 mr-8"></div>
+    <div class="flex flex-col min-h-full justify-center text-center items-center">
+        <div class="rounded-lg bg-gray-300 p-2">
+            <h1 class="font-bold">User Infos</h1>
+            <h1>{{username}}</h1>
+            <button *ngIf="auth.isLoggedIn()" class="border-2 border-black rounded-lg px-2 bg-gray-400 hover:bg-gray-500">Change Username</button>
+        </div>
+    </div>
+
+</div>
\ No newline at end of file

frontend/src/app/user-dropdown/user-dropdown.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserDropdownComponent } from './user-dropdown.component';
+
+describe('UserDropdownComponent', () => {
+  let component: UserDropdownComponent;
+  let fixture: ComponentFixture<UserDropdownComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UserDropdownComponent]
+    });
+    fixture = TestBed.createComponent(UserDropdownComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/user-dropdown/user-dropdown.component.ts

+import { Component, Input, OnInit } from '@angular/core';
+import { User } from '../Types/types';
+import { AuthenticationService } from '../services/authentication.service';
+
+@Component({
+  selector: 'app-user-dropdown',
+  templateUrl: './user-dropdown.component.html',
+  styleUrls: ['./user-dropdown.component.css']
+})
+export class UserDropdownComponent implements OnInit {
+
+  @Input() username!: string;
+
+  constructor(public auth: AuthenticationService) {}
+
+  ngOnInit(): void {
+      if (this.username === undefined)
+        this.username = "Guest";
+  }
+}