Skip to content

Commit

Permalink
update header
Browse files Browse the repository at this point in the history
  • Loading branch information
@huynvn97
huynvn97 committed Sep 24, 2024
1 parent af9aba0 commit af78837
Show file tree
Hide file tree
Showing 5 changed files with 221 additions and 100 deletions.
11 changes: 11 additions & 0 deletions src/app/components/app/app.component.css
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,14 @@
div.img-container{
width: 80%;
}

.navbar-custom {
padding-left: 10%;
padding-right: 10%;
}

.active {
border-bottom: 3px solid #3656DE !important;
color: #3656DE !important;
font-weight: 500;
}
117 changes: 79 additions & 38 deletions src/app/components/app/app.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,84 @@
<nav class="navbar navbar-expand-lg navbar-light bg-light n px-4">
<nav class="navbar navbar-expand-lg navbar-light bg-white navbar-custom">
<a class="navbar-brand" href="./">
<img src="assets/img/logo-vn.svg" height="24px" width="138px" />
</a>

<a class="navbar-brand fa fa-home" href="./"></a>

<button class="navbar-toggler" type="button" (click)="isMenuCollapsed =! isMenuCollapsed">
<button
class="navbar-toggler"
type="button"
(click)="isMenuCollapsed = !isMenuCollapsed"
>
<span class="navbar-toggler-icon"></span>
</button>

<!--Navbar Items-->
<div [ngbCollapse]="isMenuCollapsed" class="collapse navbar-collapse">
<ul class="navbar-nav me-auto">
<li class="nav-item" *ngIf="isAdmin()">
<a class="nav-link" href="./user" (click)="isMenuCollapsed = true">User</a>
</li>
<li class="nav-item" *ngIf="isAdmin()">
<a class="nav-link" href="./client" (click)="isMenuCollapsed = true">Client</a>
</li>
<!-- <li class="nav-item" *ngIf="isAdmin()">
<a class="nav-link" href="./provider" (click)="isMenuCollapsed = true">Extern Providers</a>
</li>-->
<li class="nav-item" *ngIf="isAdmin()">
<a class="nav-link" href="./config" (click)="isMenuCollapsed = true">Config</a>
</li>
<li class="nav-item" *ngIf="isAdmin()">
<a class="nav-link" href="./webfinger" (click)="isMenuCollapsed = true">Webfinger</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./endpoints" (click)="isMenuCollapsed = true">Endpoints</a>
</li>
</ul>
<div
[ngbCollapse]="isMenuCollapsed"
class="collapse navbar-collapse justify-content-center"
>
<div>
<ul class="navbar-nav me-auto">
<li class="nav-item" *ngIf="isAdmin()">
<a class="nav-link {{currentRoute == 'user' ? 'active' : ''}}" href="./user" (click)="isMenuCollapsed = true"
>User</a
>
</li>
<li class="nav-item" *ngIf="isAdmin()">
<a class="nav-link {{currentRoute == 'client' ? 'active' : ''}}" href="./client" (click)="isMenuCollapsed = true"
>Client</a
>
</li>
<li class="nav-item" *ngIf="isAdmin()">
<a class="nav-link {{currentRoute == 'config' ? 'active' : ''}}" href="./config" (click)="isMenuCollapsed = true"
>Config</a
>
</li>
<li class="nav-item" *ngIf="isAdmin()">
<a
class="nav-link {{currentRoute == 'webfinger' ? 'active' : ''}}"
href="./webfinger"
(click)="isMenuCollapsed = true"
>Webfinger</a
>
</li>
<li class="nav-item">
<a
class="nav-link {{currentRoute == 'endpoints' ? 'active' : ''}}"
href="./endpoints"
(click)="isMenuCollapsed = true"
>Endpoints</a
>
</li>
</ul>
</div>
</div>


<div style="float:right">
<button class="btn btn-secondary me-3 justify-content-end" [routerLink]="['/selfservice']" *ngIf="isLoggedIn()">
<div style="float: right">
<button
class="btn btn-secondary me-3 justify-content-end"
[routerLink]="['/selfservice']"
*ngIf="isLoggedIn()"
>
<span class="fa fa-user-circle fa-2x"></span>
{{getId()}}
{{ getId() }}
</button>
<!--Login/Logout Button-->
<button class="btn btn-lg btn-outline-primary justify-content-end" (click)="isLoggedIn() ? logout() : login()">{{ isLoggedIn() ? 'Logout' : 'Login' }}</button>
<button
class="btn btn-lg btn-outline-primary justify-content-end"
(click)="isLoggedIn() ? logout() : login()"
>
{{ isLoggedIn() ? "Logout" : "Login" }}
</button>
</div>
</nav>

<div *ngIf="getRoute() == ''" class="row justify-content-center">
<div class="col-sm-10 col-md-5 center-block">
<img class="img-fluid" alt="Responsive image" src="assets/img/tpisoftware-14y-logo.png">
<img
class="img-fluid"
alt="Responsive image"
src="assets/img/tpisoftware-14y-logo.png"
/>
</div>
</div>

Expand All @@ -53,25 +88,31 @@ <h2>{{ pageTitle }}</h2>

<!--Error Infos-->
<div *ngFor="let err of errorInfos">
<ngb-alert [type]="'danger'" (close)="errorInfos.splice(errorInfos.indexOf(err,0), 1)">
<ngb-alert
[type]="'danger'"
(close)="errorInfos.splice(errorInfos.indexOf(err, 0), 1)"
>
<b>ERROR</b>
<br />
{{err}}
{{ err }}
</ngb-alert>
</div>

<!--Other Infos-->
<div *ngFor="let info of infos">
<ngb-alert [type]="'info'" (close)="infos.splice(infos.indexOf(info,0), 1)">
{{info}}
<ngb-alert
[type]="'info'"
(close)="infos.splice(infos.indexOf(info, 0), 1)"
>
{{ info }}
</ngb-alert>
</div>


<!--Actual Content-->
<div *ngIf="!hasPageAccessRights(pageAccessLevel)">{{ getPageAccessRightError() }}</div>
<div *ngIf="!hasPageAccessRights(pageAccessLevel)">
{{ getPageAccessRightError() }}
</div>
<div *ngIf="hasPageAccessRights(pageAccessLevel)">
<router-outlet class="component mt-4 ml-4"></router-outlet>
</div>

</div>
151 changes: 91 additions & 60 deletions src/app/components/app/app.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,54 +1,71 @@
import { Component } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { SettingsService } from '../../services/settings.service';
import { UserService } from '../../services/user.service';
import { User } from '../../interfaces/user';
import jwt_decode from 'jwt-decode';

import { Component } from "@angular/core";
import { OAuthService } from "angular-oauth2-oidc";
import { Router, NavigationEnd } from "@angular/router";
import { Location } from "@angular/common";
import { SettingsService } from "../../services/settings.service";
import { UserService } from "../../services/user.service";
import { User } from "../../interfaces/user";
import jwt_decode from "jwt-decode";

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"],
})
export class AppComponent {
public isMenuCollapsed = true;
user: User = null;
pageTitle = '';
errorInfos: any [];
infos: any [];
pageAccessLevel = ''; // May be set to 'login' or 'admin' to show error messages
pageTitle = "";
errorInfos: any[];
infos: any[];
pageAccessLevel = ""; // May be set to 'login' or 'admin' to show error messages
currentRoute: string;

constructor(
public oauthService: OAuthService,
private router: Router,
private location: Location,
private settings: SettingsService,
private userService: UserService
) {
// Configure OAuth
this.oauthService.configure({
issuer: this.settings.get().oidcIssuer,
redirectUri: window.location.origin,
postLogoutRedirectUri: window.location.origin,
clientId: this.settings.get().clientId,
responseType: "code",
scope: "openid omejdn:read omejdn:write omejdn:admin",
showDebugInformation: true,
});
this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
if (this.getId() != null) {
this.userService.getSelf().subscribe((user) => {
this.user = user;
// Forward non-Admin users after login
if (
this.user &&
!this.isAdmin() &&
this.getRoute() === "" &&
this.router.url.indexOf("code") !== -1
) {
this.router.navigateByUrl("/selfservice");
}
});
}
});
this.errorInfos = [];
this.infos = [];

this.router.events.subscribe((event) => {
if (event instanceof NavigationEnd) {
this.currentRoute = event.url.split("/")[1];
}
});
}

constructor(public oauthService: OAuthService,
private router: Router,
private location: Location,
private settings: SettingsService,
private userService: UserService) {
// Configure OAuth
this.oauthService.configure({
issuer: this.settings.get().oidcIssuer,
redirectUri: window.location.origin,
postLogoutRedirectUri: window.location.origin,
clientId: this.settings.get().clientId,
responseType: 'code',
scope: 'openid omejdn:read omejdn:write omejdn:admin',
showDebugInformation: true,
});
this.oauthService.loadDiscoveryDocumentAndTryLogin().then(() => {
if (this.getId() != null) {
this.userService.getSelf().subscribe(user => {
this.user = user;
// Forward non-Admin users after login
if (this.user && !this.isAdmin() && this.getRoute() === '' && this.router.url.indexOf('code') !== -1) {
this.router.navigateByUrl('/selfservice');
}
});
}
});
this.errorInfos = [];
this.infos = [];
setActive(route: string) {
this.currentRoute = route;
}

login() {
Expand All @@ -64,20 +81,30 @@ export class AppComponent {
}

isAdmin() {
if (!this.oauthService.hasValidAccessToken()) { return false; }
return jwt_decode(this.oauthService.getAccessToken())['scope'].indexOf('omejdn:admin') > -1;
if (!this.oauthService.hasValidAccessToken()) {
return false;
}
return (
jwt_decode(this.oauthService.getAccessToken())["scope"].indexOf(
"omejdn:admin"
) > -1
);
}

getId(): any {
if (!this.oauthService.hasValidAccessToken()) { return null; }
return jwt_decode(this.oauthService.getAccessToken())['sub'];
if (!this.oauthService.hasValidAccessToken()) {
return null;
}
return jwt_decode(this.oauthService.getAccessToken())["sub"];
}

getRoute() {
let result = this.location.path();
// This should be resolved once the oauth lib implements RFC 9207
result = result.split('?')[0]; // Remove query
if (result.length > 0 && result[result.length - 1] === '/') { result = result.slice(0, -1); }
result = result.split("?")[0]; // Remove query
if (result.length > 0 && result[result.length - 1] === "/") {
result = result.slice(0, -1);
}
return result;
}

Expand All @@ -86,25 +113,29 @@ export class AppComponent {
}

setPageTitle(title) {
setTimeout(() => {this.pageTitle = title; });
setTimeout(() => {
this.pageTitle = title;
});
}
setPageAccessLevel(level) {
setTimeout(() => {this.pageAccessLevel = level; });
setTimeout(() => {
this.pageAccessLevel = level;
});
}

showInfo(message) {
this.infos.push(message);
setTimeout(() => (this.infos.shift()), 2000);
setTimeout(() => this.infos.shift(), 2000);
}
showError(message) {
this.errorInfos.push(message);
}

hasPageAccessRights(level) {
switch (level) {
case 'admin':
case "admin":
return this.isAdmin();
case 'login':
case "login":
return this.isLoggedIn();
default:
return true;
Expand All @@ -113,12 +144,12 @@ export class AppComponent {

getPageAccessRightError() {
switch (this.pageAccessLevel) {
case 'admin':
return 'You have to be logged in as an admin to see this content.';
case 'login':
return 'You have to be logged in to see this content.';
case "admin":
return "You have to be logged in as an admin to see this content.";
case "login":
return "You have to be logged in to see this content.";
default:
return '';
return "";
}
}
}
Loading

0 comments on commit af78837

Please sign in to comment.