Implement logout

This commit is contained in:
Willem Dantuma 2020-06-24 13:08:13 +02:00
parent 6f52302875
commit 1187ee9fd6
4 changed files with 56 additions and 5 deletions

View File

@ -1,3 +1,11 @@
<div *ngIf="user">
<span class="rounded-circle menu-button" [title]="user.name">{{getLetter()}}</span>
<div (click)="toggle($event)" class="rounded-circle menu-button" [title]="user.name">
<span>{{getLetter()}}</span>
<div *ngIf="showMenu" class="card">
<div class="card-body">
<div class="username">{{user.name}}</div>
<div><a href="#" (click)="logout($event)" i18n>logout</a></div>
</div>
</div>
</div>
</div>

View File

@ -1,10 +1,34 @@
.menu-button {
background-color: purple;
color:white;
background-color: purple;
display: inline-block;
width: 2.5em;
height: 2.5em;
line-height: 2.5em;
text-align: center;
font-size: 1rem;
position: relative;
display: inline-block;
}
div.menu-button > span {
color:white;
}
.card {
position: absolute;
top: 3rem;
right:0;
padding:0.5rem;
min-width: 10rem;
}
.username {
white-space: nowrap;
font-weight: 500;
font-size: 1.2rem;
line-height: 1.2rem;
}
.card-body {
text-align: left;
}

View File

@ -1,4 +1,5 @@
import { Component, OnInit,Input } from '@angular/core';
import { OAuthService} from 'angular-oauth2-oidc'
import { IUser } from '../../models/user';
@Component({
@ -9,8 +10,9 @@ import { IUser } from '../../models/user';
export class UserMenuComponent implements OnInit {
@Input() user:IUser;
public showMenu:boolean = false
constructor() { }
constructor(private oauthService:OAuthService) { }
ngOnInit(): void {
}
@ -18,4 +20,21 @@ export class UserMenuComponent implements OnInit {
getLetter():string {
return this.user.name ? this.user.name.substr(0,1).toUpperCase():"";
}
logout(event:MouseEvent) {
event.preventDefault();
this.oauthService.logOut();
}
hide(event:MouseEvent) {
this.showMenu = false;
}
show(event:MouseEvent) {
this.showMenu=true;
}
toggle(event:MouseEvent) {
this.showMenu=!this.showMenu;
}
}

View File

@ -17,7 +17,7 @@ export interface State {
fullScreen: boolean,
routeLoading:boolean,
menuVisible: boolean,
userPackages: IPackages
userPackages: IPackages,
}
export const initialState: State = {