Refactor HeaderComponent to organize inputs, inject dependencies, and improve HTML formatting. Add logout method for authentication management.
This commit is contained in:
parent
c2b9a8a574
commit
0b952e07f7
|
|
@ -1,6 +1,6 @@
|
|||
<ng-container>
|
||||
<header id="top"
|
||||
[ngStyle]="{ 'background-image': getBackgroundImage(),'height': height, 'background-position': getBackgroundPosition() }">
|
||||
[ngStyle]="{ 'background-image': getBackgroundImage(),'height': height, 'background-position': getBackgroundPosition() }">
|
||||
<nav id="nav" [ngClass]="active">
|
||||
<div class="container">
|
||||
<div id="mobile_nav">
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<li><a [routerLink]="['/customfeatures']">Custom Features</a></li>
|
||||
<li><a
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestion
|
||||
Board</a></li>
|
||||
Board</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
|
@ -73,95 +73,101 @@
|
|||
</div>
|
||||
</div>
|
||||
<a href="/"><img ngSrc="/public/img/logos/logo.png" priority alt="Altitude Server Logo" height="319"
|
||||
width="550"></a>
|
||||
width="550"></a>
|
||||
<ul id="nav_list">
|
||||
<li class="nav_li"><a [id]="getCurrentPageId(['home'])" class="nav_link" href="/" [ngClass]="active">Home</a>
|
||||
</li>
|
||||
<li class="nav_li">
|
||||
</li>
|
||||
<li class="nav_li">
|
||||
<span [id]="getCurrentPageId(['map', 'customfeatures', 'economy', 'events', 'mypet', 'warps',
|
||||
'skyblock', 'claiming'])" class="nav_link fake_link" [ngClass]="active">Features</span>
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/map']">Map</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/economy']">Economy</a></li>
|
||||
<!-- <li class="navli"><a class="nav_link2" [routerLink]="['/events']">Events</a></li> -->
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/claiming']">Land Claiming</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/mypet']">MyPet</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/warps']">Warps</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/skyblock']">Skyblock</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/customfeatures']">Custom Features</a></li>
|
||||
<li class="nav_li"><a class="nav_link2"
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestion
|
||||
Board</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav_li">
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/map']">Map</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/economy']">Economy</a></li>
|
||||
<!-- <li class="navli"><a class="nav_link2" [routerLink]="['/events']">Events</a></li> -->
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/claiming']">Land Claiming</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/mypet']">MyPet</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/warps']">Warps</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/skyblock']">Skyblock</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/customfeatures']">Custom Features</a></li>
|
||||
<li class="nav_li"><a class="nav_link2"
|
||||
href="https://kanboard.alttd.com/public/board/ef0c28f3d022f7e98801bbc97278e9a523c7c6dc2a3b0c58c47e2ebdbd1e">Suggestion
|
||||
Board</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav_li">
|
||||
<span
|
||||
[id]="getCurrentPageId(['guide', 'faq', 'ranks', 'rules', 'commandlist', 'mapart', 'lag', 'staffpowers',
|
||||
'nicknames', 'bans', 'discord-bans'])" class="nav_link fake_link" [ngClass]="active">Reference</span>
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/guide']">Guide Book</a></li>
|
||||
<!-- <li class="navli"><a class="nav_link2" [routerLink]="['/faq']">FAQ</a></li> -->
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/ranks']">Ranks</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/rules']">Rules</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/commandlist']">Command List</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/mapart']">Mapart</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/lag']">Reducing Lag</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/staffpowers']">Staff Powers</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/nicknames']">Nicknames</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/bans']">Minecraft Bans</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/discord-bans']">Discord Bans</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav_li"><a class="nav_link" target="_blank" rel="noopener"
|
||||
href="https://discordapp.com/invite/TGqpzCJ" [ngClass]="active">Discord</a></li>
|
||||
<li class="nav_li"><a [id]="getCurrentPageId(['vote'])" class="nav_link" [routerLink]="['/vote']"
|
||||
[ngClass]="active">Vote</a>
|
||||
</li>
|
||||
<li class="nav_li">
|
||||
<a class="nav_link" target="_blank" rel="noopener" href="https://store.alttd.com"
|
||||
[ngClass]="active">Store</a>
|
||||
</li>
|
||||
<li class="nav_li">
|
||||
<a [id]="getCurrentPageId(['about', 'team', 'community', 'birthdays'])"
|
||||
class="nav_link fake_link" [ngClass]="active">Altitude</a>
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/about']">About Us</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/socials']">Socials</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/team']">Team</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/birthdays']">Famous Birthdays</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/community']">Community</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener" [routerLink]="['/contact']">Contact
|
||||
Us</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener" href="https://alttd.com/appeal">Ban
|
||||
Appeal</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" href="https://alttd.com/blog/">Blog</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@if (isAuthenticated) {
|
||||
<li class="nav_li">
|
||||
<a [id]="getCurrentPageId(['particles'])"
|
||||
class="nav_link fake_link" [ngClass]="active">Special</a>
|
||||
@if (hasAccess(['HEAD_MOD'])) {
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/particles']">Particles</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/guide']">Guide Book</a></li>
|
||||
<!-- <li class="navli"><a class="nav_link2" [routerLink]="['/faq']">FAQ</a></li> -->
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/ranks']">Ranks</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/rules']">Rules</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/commandlist']">Command List</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/mapart']">Mapart</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/lag']">Reducing Lag</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/staffpowers']">Staff Powers</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/nicknames']">Nicknames</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/bans']">Minecraft Bans</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/discord-bans']">Discord Bans</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="nav_li"><a class="nav_link" target="_blank" rel="noopener"
|
||||
href="https://discordapp.com/invite/TGqpzCJ" [ngClass]="active">Discord</a></li>
|
||||
<li class="nav_li"><a [id]="getCurrentPageId(['vote'])" class="nav_link" [routerLink]="['/vote']"
|
||||
[ngClass]="active">Vote</a>
|
||||
</li>
|
||||
<li class="nav_li">
|
||||
<a class="nav_link" target="_blank" rel="noopener" href="https://store.alttd.com"
|
||||
[ngClass]="active">Store</a>
|
||||
</li>
|
||||
<li class="nav_li">
|
||||
<a [id]="getCurrentPageId(['about', 'team', 'community', 'birthdays'])"
|
||||
class="nav_link fake_link" [ngClass]="active">Altitude</a>
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/about']">About Us</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/socials']">Socials</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/team']">Team</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/birthdays']">Famous Birthdays</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/community']">Community</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener" [routerLink]="['/contact']">Contact
|
||||
Us</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" rel="noopener" href="https://alttd.com/appeal">Ban
|
||||
Appeal</a></li>
|
||||
<li class="nav_li"><a class="nav_link2" target="_blank" href="https://alttd.com/blog/">Blog</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
@if (isAuthenticated) {
|
||||
<li class="nav_li">
|
||||
<a [id]="getCurrentPageId(['particles'])"
|
||||
class="nav_link fake_link" [ngClass]="active">Special</a>
|
||||
@if (hasAccess(['HEAD_MOD'])) {
|
||||
<ul class="dropdown">
|
||||
<li class="nav_li"><a class="nav_link2" [routerLink]="['/particles']">Particles</a></li>
|
||||
</ul>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
</li>
|
||||
}
|
||||
@if (!isAuthenticated) {
|
||||
<li class="nav_li login-button">
|
||||
<a class="nav_link fake_link" (click)="openLoginDialog()">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
@if (!isAuthenticated) {
|
||||
<li class="nav_li login-button">
|
||||
<a class="nav_link fake_link" (click)="openLoginDialog()">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
} @else {
|
||||
<li class="nav_li login-button">
|
||||
<a class="nav_link fake_link" (click)="logout()">
|
||||
Login
|
||||
</a>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<app-theme></app-theme>
|
||||
</div>
|
||||
</nav>
|
||||
<app-theme></app-theme>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<ng-content select="[header-content]"></ng-content>
|
||||
<ng-content select="[header-content]"></ng-content>
|
||||
|
||||
</header>
|
||||
</header>
|
||||
</ng-container>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {Component, HostListener, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import {Component, HostListener, inject, Input, OnDestroy, OnInit} from '@angular/core';
|
||||
import {CommonModule, NgOptimizedImage} from '@angular/common';
|
||||
import {ThemeComponent} from '@shared-components/theme/theme.component';
|
||||
import {RouterLink} from '@angular/router';
|
||||
|
|
@ -20,6 +20,10 @@ import {MatDialog} from '@angular/material/dialog';
|
|||
styleUrls: ['./header.component.scss']
|
||||
})
|
||||
export class HeaderComponent implements OnInit, OnDestroy {
|
||||
|
||||
private authService: AuthService = inject(AuthService)
|
||||
private dialog: MatDialog = inject(MatDialog)
|
||||
|
||||
@Input() current_page: string = '';
|
||||
@Input() background_image: string = '';
|
||||
@Input() height: string = '';
|
||||
|
|
@ -30,11 +34,6 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
private subscription: Subscription | undefined;
|
||||
public isAuthenticated: boolean = false;
|
||||
|
||||
constructor(protected authService: AuthService,
|
||||
private dialog: MatDialog) {
|
||||
|
||||
}
|
||||
|
||||
ngOnInit(): void {
|
||||
this.subscription = this.authService.isAuthenticated$.subscribe(isAuthenticated => {
|
||||
this.isAuthenticated = isAuthenticated;
|
||||
|
|
@ -94,4 +93,8 @@ export class HeaderComponent implements OnInit, OnDestroy {
|
|||
public hasAccess(claims: string[]): boolean {
|
||||
return this.authService.hasAccess(claims)
|
||||
}
|
||||
|
||||
protected logout() {
|
||||
this.authService.logout()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user