diff --git a/frontend/src/app/app.component.html b/frontend/src/app/app.component.html
index 7acbaf104a60a108a93c6f5a3e4435fdc3ee25b2..f70ebd70fd09e2dc40a8b9b9b2afef1764b82859 100644
--- a/frontend/src/app/app.component.html
+++ b/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>
\ No newline at end of file
+</div>
+
diff --git a/frontend/src/app/app.component.ts b/frontend/src/app/app.component.ts
index 312da32390f5447fd50408407356a37910604a54..76b9dad6d91396b55735bd506639dd96a43908e4 100644
--- a/frontend/src/app/app.component.ts
+++ b/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;
+ }
+
}
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
index a0b83ffad67d066ec281453da3f1d69d0d914b36..338f77e6e2d8ed9ed7c3255519a77cd86c62ca65 100644
--- a/frontend/src/app/app.module.ts
+++ b/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,
diff --git a/frontend/src/app/services/authentication.service.ts b/frontend/src/app/services/authentication.service.ts
index e58e3f7c79f6cf65ce8938300c3558f04ae2d872..dbe901dd65ba1e960eef2a51a2668fadea0546e3 100644
--- a/frontend/src/app/services/authentication.service.ts
+++ b/frontend/src/app/services/authentication.service.ts
@@ -65,5 +65,4 @@ export class AuthenticationService {
return "Guest";
return user.username;
}
-
}
diff --git a/frontend/src/app/user-dropdown/user-dropdown.component.css b/frontend/src/app/user-dropdown/user-dropdown.component.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/frontend/src/app/user-dropdown/user-dropdown.component.html b/frontend/src/app/user-dropdown/user-dropdown.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..acdc5d25e93b6905c10a52de676f4b2db9220426
--- /dev/null
+++ b/frontend/src/app/user-dropdown/user-dropdown.component.html
@@ -0,0 +1,11 @@
+<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
diff --git a/frontend/src/app/user-dropdown/user-dropdown.component.spec.ts b/frontend/src/app/user-dropdown/user-dropdown.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..81af5a4c5738b4679d7097aaeb95451028216e87
--- /dev/null
+++ b/frontend/src/app/user-dropdown/user-dropdown.component.spec.ts
@@ -0,0 +1,21 @@
+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();
+ });
+});
diff --git a/frontend/src/app/user-dropdown/user-dropdown.component.ts b/frontend/src/app/user-dropdown/user-dropdown.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5eb79caec2799f65ea5625815fe34c3d30993d94
--- /dev/null
+++ b/frontend/src/app/user-dropdown/user-dropdown.component.ts
@@ -0,0 +1,20 @@
+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";
+ }
+}