File
Implements
Index
Properties
|
|
Methods
|
|
Outputs
|
|
Methods
ngOnDestroy
|
ngOnDestroy()
|
|
|
redirectToAccountPreferences
|
redirectToAccountPreferences()
|
|
|
redirectToLogin
|
redirectToLogin()
|
|
|
cobbler_server
|
Type : String
|
Default value : 'localhost'
|
|
cobbler_version
|
Type : String
|
Default value : 'Unknown'
|
|
islogged
|
Type : boolean
|
Default value : false
|
|
Private
ngUnsubscribe
|
Default value : new Subject<void>()
|
|
Public
router
|
Type : Router
|
|
subscription
|
Type : Subscription
|
|
import { Component, EventEmitter, OnDestroy, Output } from '@angular/core';
import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatSnackBar } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { DomSanitizer } from '@angular/platform-browser';
import { Router, RouterLink } from '@angular/router';
import { CobblerApiService, ExtendedVersion } from 'cobbler-api';
import { Subject, Subscription } from 'rxjs';
import { AuthGuardService } from '../services/auth-guard.service';
import { UserService } from '../services/user.service';
import { MatToolbarModule } from '@angular/material/toolbar';
import { CommonModule } from '@angular/common';
import { MatButtonModule } from '@angular/material/button';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'cobbler-navbar',
templateUrl: './navbar.component.html',
styleUrls: ['./navbar.component.css'],
standalone: true,
imports: [
RouterLink,
MatToolbarModule,
MatIconModule,
CommonModule,
MatButtonModule,
MatMenuModule,
MatTooltipModule,
],
})
export class NavbarComponent implements OnDestroy {
// Unsubscribe
private ngUnsubscribe = new Subject<void>();
// Navbar
@Output() toggleSidenav = new EventEmitter<void>();
cobbler_version: String = 'Unknown';
cobbler_server: String = 'localhost';
islogged: boolean = false;
subscription: Subscription;
constructor(
iconRegistry: MatIconRegistry,
sanitizer: DomSanitizer,
public authO: UserService,
public router: Router,
private guard: AuthGuardService,
private _snackBar: MatSnackBar,
private cobblerApiService: CobblerApiService,
) {
iconRegistry.addSvgIcon(
'cobbler-logo',
sanitizer.bypassSecurityTrustResourceUrl(
'https://cobbler.github.io/images/logo-cobbler-new.svg',
),
);
if (authO.server) {
this.cobbler_server = authO.server.match('http[s]*://([^/]*)').pop();
}
this.subscription = this.authO.authorized
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe((value) => {
if (value) {
this.islogged = value;
} else {
this.islogged = false;
}
});
// should not call version unless user has authenticated
// as it could try to hit an invalid / incorrect URL
if (this.islogged) {
this.cobblerApiService
.extended_version()
.pipe(takeUntil(this.ngUnsubscribe))
.subscribe({
next: (value: ExtendedVersion) => {
this.cobbler_version = value.version;
},
error: (error) => {
this.cobbler_version = 'Error';
this._snackBar.open(error.message, 'Close');
},
});
}
}
ngOnDestroy(): void {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
redirectToLogin() {
this.router.navigate(['/login']);
}
redirectToAccountPreferences() {
this.router.navigate(['/user', this.authO.username, 'preferences']);
}
logout(): void {
this.authO.changeAuthorizedState(false);
this.authO.username = 'username';
this.authO.token = '';
}
}
<mat-toolbar color="primary">
<button
mat-icon-button
(click)="toggleSidenav.emit()"
class="example-icon"
aria-label="Example icon-button with menu icon"
>
<mat-icon>menu</mat-icon>
</button>
<div>
<a [routerLink]="['/manage']" title="Back to Welcome Screen.">
<mat-icon
class="align-center"
svgIcon="cobbler-logo"
aria-hidden="false"
aria-label="Cobbler Logo"
></mat-icon>
<span>Cobbler</span>
</a>
</div>
<span class="navbar-spacer"></span>
<div>
@if (islogged) {
<button mat-button [matMenuTriggerFor]="profileMenu">
<mat-icon>account_circle</mat-icon> {{ authO.username }}
</button>
} @else {
<button mat-icon-button [matMenuTriggerFor]="profileMenu">
<mat-icon>account_circle</mat-icon>
</button>
}
<mat-menu #profileMenu="matMenu">
<button mat-menu-item matTooltip="{{ authO.server }}">
<mat-icon>dns</mat-icon>
{{ cobbler_server }}
</button>
<button mat-menu-item>
<mat-icon>info</mat-icon>
{{ cobbler_version }}
</button>
@if (islogged) {
<button mat-menu-item (click)="redirectToAccountPreferences()">
<mat-icon>manage_accounts</mat-icon>
Preferences
</button>
<button mat-menu-item (click)="logout()">
<mat-icon aria-hidden="false" aria-label="Login"> logout </mat-icon>
Logout
</button>
} @else {
<button mat-menu-item (click)="redirectToLogin()">
<mat-icon aria-hidden="false" aria-label="Login"> login </mat-icon>
Login
</button>
}
</mat-menu>
</div>
</mat-toolbar>
.navbar-spacer {
flex: 1 1 auto;
}
.pad {
padding-left: 5px;
padding-right: 5px;
}
.align-center {
vertical-align: middle;
}
a {
color: inherit;
text-decoration: inherit;
}
Legend
Html element with directive