aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/app/components/navbar/navbar.component.html17
-rw-r--r--src/app/components/navbar/navbar.component.ts17
-rw-r--r--src/assets/icons/tabler-icon-login.svg69
3 files changed, 94 insertions, 9 deletions
diff --git a/src/app/components/navbar/navbar.component.html b/src/app/components/navbar/navbar.component.html
index 2d386aa..6bd3e66 100644
--- a/src/app/components/navbar/navbar.component.html
+++ b/src/app/components/navbar/navbar.component.html
@@ -1,9 +1,12 @@
<nav id="navbar">
<div id="nav-contents" class="flex-row padding-smaller flex-center-align-items">
- <div id="nav-profile-picture" class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToProfile()">
+ <div class="flexible" *ngIf="!loggedIn">
+ <!-- This element serves as a spacer -->
+ </div>
+ <div id="nav-profile-picture" class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToProfile()" *ngIf="loggedIn">
<img class="round-image" [src]="user.profilePictureURL">
</div>
- <div id="nav-username" class="font-size-dot9 nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToProfile()">
+ <div id="nav-username" class="font-size-dot9 nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToProfile()" *ngIf="loggedIn">
<div class="padding-small">
Konstantin
</div>
@@ -26,11 +29,17 @@
<div class="flexible">
<!-- This element serves as a spacer -->
</div>
- <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToSettings()">
+ <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToSettings()" *ngIf="loggedIn">
<img src="/assets/icons/tabler-icon-settings.svg">
</div>
- <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="logout()">
+ <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="logout()" *ngIf="loggedIn">
<img src="/assets/icons/tabler-icon-logout.svg">
</div>
+ <div class="nav-item flex-col border-radius-small light-hover hover-half-opacity click-effect" (click)="goToLogin()" *ngIf="!loggedIn">
+ <img src="/assets/icons/tabler-icon-login.svg">
+ </div>
+ <div class="flexible" *ngIf="!loggedIn">
+ <!-- This element serves as a spacer -->
+ </div>
</div>
</nav>
diff --git a/src/app/components/navbar/navbar.component.ts b/src/app/components/navbar/navbar.component.ts
index 4af7a8a..d10a49d 100644
--- a/src/app/components/navbar/navbar.component.ts
+++ b/src/app/components/navbar/navbar.component.ts
@@ -11,15 +11,13 @@ import { User } from 'src/models/identity/user.model';
})
export class NavbarComponent implements OnInit {
public user: User;
+ public loggedIn: Boolean;
constructor(private _router: Router, private _userService: UserService, private _tokenService: TokenService)
{ }
ngOnInit(): void {
- if (!this._tokenService.getTokenFromSessionStorage()) {
- this._router.navigate(['/login']);
- return;
- }
+ this.loggedIn = this._tokenService.getTokenFromSessionStorage() !== '';
this.user = this._userService.getDefaultUser();
@@ -35,7 +33,12 @@ export class NavbarComponent implements OnInit {
}
goToFeed(): void {
- this._router.navigate(['/']);
+ if (this.loggedIn) {
+ this._router.navigate(['/']);
+ }
+ else {
+ this.goToLogin();
+ }
}
goToSettings(): void {
@@ -44,6 +47,10 @@ export class NavbarComponent implements OnInit {
logout(): void {
this._tokenService.logoutUserFromSessionStorage();
+ this.goToLogin();
+ }
+
+ goToLogin(): void {
this._router.navigate(['/login']);
}
}
diff --git a/src/assets/icons/tabler-icon-login.svg b/src/assets/icons/tabler-icon-login.svg
new file mode 100644
index 0000000..4f62892
--- /dev/null
+++ b/src/assets/icons/tabler-icon-login.svg
@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ class="icon icon-tabler icon-tabler-login"
+ width="24"
+ height="24"
+ viewBox="0 0 24 24"
+ stroke-width="2"
+ stroke="currentColor"
+ fill="none"
+ stroke-linecap="round"
+ stroke-linejoin="round"
+ version="1.1"
+ id="svg8"
+ sodipodi:docname="tabler-icon-login.svg"
+ inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+ <metadata
+ id="metadata14">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs12" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="1920"
+ inkscape:window-height="1053"
+ id="namedview10"
+ showgrid="false"
+ inkscape:zoom="37.541667"
+ inkscape:cx="12"
+ inkscape:cy="12"
+ inkscape:window-x="0"
+ inkscape:window-y="0"
+ inkscape:window-maximized="1"
+ inkscape:current-layer="svg8" />
+ <path
+ stroke="none"
+ d="M0 0h24v24H0z"
+ fill="none"
+ id="path2" />
+ <path
+ d="M 14,8 V 6 A 2,2 0 0 0 12,4 H 5 A 2,2 0 0 0 3,6 v 12 a 2,2 0 0 0 2,2 h 7 a 2,2 0 0 0 2,-2 v -2"
+ id="path4"
+ style="stroke:#ffeede" />
+ <path
+ d="M 20,12 H 7 l 3,-3 m 0,6 -3,-3"
+ id="path6"
+ style="stroke:#ffeede" />
+</svg>
generated by cgit v1.2.3 (git 2.46.0) at 2026-04-14 18:57:01 +0000