Skip to content
Snippets Groups Projects
Commit 69ff553f authored by kbeyro's avatar kbeyro
Browse files

add banner for auto logout

parent 3ecd8338
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/app/app.component.ts
+ 1
− 1
View file @ 69ff553f
...@@ -37,7 +37,7 @@ export class AppComponent { ...@@ -37,7 +37,7 @@ export class AppComponent {
timeout: 900, // 15 min timeout: 900, // 15 min
onTimeout: () => { onTimeout: () => {
this.authService.logout(); this.authService.logout();
this.router.navigate(['/welcome']) this.router.navigate(['/welcome'], {queryParams: {logout: 'TIMEOUT'}});
} }
}); });
} }
......
src/app/shared/navbar/navbar.component.ts
+ 2
− 1
View file @ 69ff553f
import {Component, OnInit, ViewChild} from '@angular/core'; import {Component, OnInit, ViewChild} from '@angular/core';
import {Router} from '@angular/router'; import {ActivatedRoute, Router} from '@angular/router';
import {TranslateService} from '@ngx-translate/core'; import {TranslateService} from '@ngx-translate/core';
import {interval, Subscription} from 'rxjs'; import {interval, Subscription} from 'rxjs';
import {AuthService} from '../../auth/auth.service'; import {AuthService} from '../../auth/auth.service';
...@@ -70,6 +70,7 @@ export class NavbarComponent implements OnInit { ...@@ -70,6 +70,7 @@ export class NavbarComponent implements OnInit {
}, 1000); }, 1000);
} }
public getSupportedLanguages() { public getSupportedLanguages() {
......
src/app/welcome/welcome.component.css
+ 10
− 0
View file @ 69ff553f
...@@ -53,3 +53,13 @@ html, body { ...@@ -53,3 +53,13 @@ html, body {
.features-top-padding{ .features-top-padding{
padding-top: 15px; padding-top: 15px;
} }
.banner{
background-color : #424242;
color: #E8E8E8;
margin-top: -20px;
padding: 12px;
justify-self: center;
display: grid;
width: 100%;
}
src/app/welcome/welcome.component.html
+ 148
− 119
View file @ 69ff553f
<div *ngIf="autoLogout" class="banner flex-center">
<div style="display: grid">
<span class="text-center">{{'WELCOME.TIME_EXPIRED' | translate}}
<a class=""
style="width:3rem; height: 3rem; color: white; cursor: pointer" (click)="autoLogout=false">
<em class="pi pi-times"></em>
</a>
</span>
</div>
</div>
<div class="container-fluid" onresize="this.onResize();"> <div class="container-fluid" onresize="this.onResize();">
<div class="row"> <div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="welcome-container" style="text-align: justify; font-size: large;"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="welcome-container"
<div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12" > style="text-align: justify; font-size: large;">
<div style="display: block;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 panel-body"> <div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-bottom: 20px;"> <div style="display: block;" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 panel-body">
<h2><strong>{{ 'WELCOME.TITLE1' | translate }}</strong> (<a href="https://www.geant.org/NMaaS" target="_blank" rel="noopener noreferrer">NMaaS</a>) <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-bottom: 20px;">
{{ 'WELCOME.TITLE2'| translate }}</h2> <h2><strong>{{ 'WELCOME.TITLE1' | translate }}</strong> (<a href="https://www.geant.org/NMaaS"
</div> target="_blank"
<div style="padding-left: 10px;" class="col-lg-6 col-md-12 col-sm-12 col-xs-12"> rel="noopener noreferrer">NMaaS</a>)
<p> {{ 'WELCOME.TITLE2'| translate }}</h2>
{{ 'WELCOME.INTRO_TEXT' | translate }} </div>
</p> <div style="padding-left: 10px;" class="col-lg-6 col-md-12 col-sm-12 col-xs-12">
</div> <p>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 "> {{ 'WELCOME.INTRO_TEXT' | translate }}
<img src="../../assets/images/landing/nmaas_schema_simple_text.png" class="center-block glyphicon-align-center landing-img-sm" </p>
</div>
<div class="col-lg-6 col-md-12 col-sm-12 col-xs-12 ">
<img src="../../assets/images/landing/nmaas_schema_simple_text.png"
class="center-block glyphicon-align-center landing-img-sm"
style="width: 100%; height: 100%; max-width: 800px; max-height: 600px;" alt="NMaaS Schema"> style="width: 100%; height: 100%; max-width: 800px; max-height: 600px;" alt="NMaaS Schema">
</div> </div>
</div> </div>
<br> <br>
<div style="display: block;" class="col-lg-12 panel-body landing-block-padding"> <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
<div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 "> <div class="col-lg-3 col-md-4 col-sm-12 col-xs-12 ">
<img src="../../assets/images/landing/people_2.png" alt="Users" class="center-block landing-img-sm landing-img-left"> <img src="../../assets/images/landing/people_2.png" alt="Users"
</div> class="center-block landing-img-sm landing-img-left">
<div style="padding-left: 10px;" class="col-lg-9 col-md-8 col-sm-12 col-xs-12"> </div>
<h3>{{ 'WELCOME.TARGET_USERS_HEADER' | translate }}</h3> <div style="padding-left: 10px;" class="col-lg-9 col-md-8 col-sm-12 col-xs-12">
<p> <h3>{{ 'WELCOME.TARGET_USERS_HEADER' | translate }}</h3>
{{ 'WELCOME.TARGET_USERS_TEXT' | translate }} <p>
</p> {{ 'WELCOME.TARGET_USERS_TEXT' | translate }}
</div> </p>
</div> </div>
<br> </div>
<div style="display: block;" class="col-lg-12 panel-body landing-block-padding"> <br>
<div style="padding-left: 10px;" class="col-lg-8 col-md-12 col-sm-12 col-xs-12"> <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
<h3>{{ 'WELCOME.MARKETPLACE_HEADER' | translate }}</h3> <div style="padding-left: 10px;" class="col-lg-8 col-md-12 col-sm-12 col-xs-12">
<p>{{ 'WELCOME.MARKETPLACE_TEXT' | translate }}</p> <h3>{{ 'WELCOME.MARKETPLACE_HEADER' | translate }}</h3>
</div> <p>{{ 'WELCOME.MARKETPLACE_TEXT' | translate }}</p>
<div class="col-lg-3 col-md-12 col-sm-12 col-xs-12"> </div>
<img src="../../assets/images/landing/shop_2.png" alt="Marketplace icon" class="glyphicon-align-center center-block landing-img-sm landing-img-right"> <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
</div> <img src="../../assets/images/landing/shop_2.png" alt="Marketplace icon"
</div> class="glyphicon-align-center center-block landing-img-sm landing-img-right">
<br> </div>
<div style="display: block;" class="col-lg-12 panel-body landing-block-padding"> </div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> <br>
<img src="../../assets/images/landing/costs_3.png" alt="Cost reduction icon" class="center-block landing-img-sm landing-img-left"> <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
</div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div style="padding-left: 10px;" class="col-lg-9 col-md-9 col-sm-12 col-xs-12"> <img src="../../assets/images/landing/costs_3.png" alt="Cost reduction icon"
<h3>{{ 'WELCOME.COST_REDUCTION_HEADER' | translate }}</h3> class="center-block landing-img-sm landing-img-left">
<p>{{ 'WELCOME.COST_REDUCTION_TEXT' | translate }}</p> </div>
</div> <div style="padding-left: 10px;" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
</div> <h3>{{ 'WELCOME.COST_REDUCTION_HEADER' | translate }}</h3>
<div style="display: block;" class="col-lg-12 panel-body landing-block-padding"> <p>{{ 'WELCOME.COST_REDUCTION_TEXT' | translate }}</p>
<div style="padding-left: 10px;" class="col-lg-9 col-md-9 col-sm-12 col-xs-12"> </div>
<h3>{{ 'WELCOME.SECURITY_HEADER' | translate }}</h3> </div>
<p>{{ 'WELCOME.SECURITY_TEXT' | translate }}</p> <div style="display: block;" class="col-lg-12 panel-body landing-block-padding">
</div> <div style="padding-left: 10px;" class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12"> <h3>{{ 'WELCOME.SECURITY_HEADER' | translate }}</h3>
<img src="../../assets/images/landing/security.png" alt="Security icon" class="center-block landing-img-sm landing-img-right" /> <p>{{ 'WELCOME.SECURITY_TEXT' | translate }}</p>
</div> </div>
</div> <div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<br> <img src="../../assets/images/landing/security.png" alt="Security icon"
</div> class="center-block landing-img-sm landing-img-right"/>
<div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12" </div>
</div>
<br>
</div>
<div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12"
style="border-top: solid 1px #6c757d; margin-top: 20px;"> style="border-top: solid 1px #6c757d; margin-top: 20px;">
<div class="col-lg-offset-4 col-lg-4 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10 text-center features-bottom-padding features-top-padding"> <div class="col-lg-offset-4 col-lg-4 col-md-offset-2 col-md-8 col-sm-offset-1 col-sm-10 text-center features-bottom-padding features-top-padding">
<h2>{{ 'WELCOME.NMAAS_FEATURES_HEADER' | translate }}</h2> <h2>{{ 'WELCOME.NMAAS_FEATURES_HEADER' | translate }}</h2>
</div> </div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">
<div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">
<h3>{{ 'WELCOME.APP_MARKET_HEADER' | translate }}</h3>
<p>{{ 'WELCOME.APP_MARKET_TEXT' | translate }}</p>
</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
<h3>{{ 'WELCOME.OWN_APPS_HEADER' | translate }}</h3>
<p>{{ 'WELCOME.OWN_APPS_TEXT' | translate }}</p>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">
<div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12"> <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">
<h3>{{ 'WELCOME.EDUGAIN_SUPPORT_HEADER' | translate }}</h3> <h3>{{ 'WELCOME.APP_MARKET_HEADER' | translate }}</h3>
<p>{{ 'WELCOME.EDUGAIN_SUPPORT_TEXT' | translate }}<p> <p>{{ 'WELCOME.APP_MARKET_TEXT' | translate }}</p>
</div> </div>
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"> <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
<h3>{{ 'WELCOME.FAST_DEPLOYMENT_HEADER' | translate }}</h3> <h3>{{ 'WELCOME.OWN_APPS_HEADER' | translate }}</h3>
<p>{{ 'WELCOME.FAST_DEPLOYMENT_TEXT' | translate }}</p> <p>{{ 'WELCOME.OWN_APPS_TEXT' | translate }}</p>
</div> </div>
</div> </div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding"> <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">
<div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12"> <div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">
<h3>{{ 'WELCOME.WEB_PORTAL_HEADER' | translate }}</h3> <h3>{{ 'WELCOME.EDUGAIN_SUPPORT_HEADER' | translate }}</h3>
<p>{{ 'WELCOME.WEB_PORTAL_TEXT' | translate }}</p> <p>{{ 'WELCOME.EDUGAIN_SUPPORT_TEXT' | translate }}
</div> <p>
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12"> </div>
<h3>{{ 'WELCOME.KUBERNETES_HEADER' | translate }}</h3> <div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
<p>{{ 'WELCOME.KUBERNETES_TEXT' | translate }}</p> <h3>{{ 'WELCOME.FAST_DEPLOYMENT_HEADER' | translate }}</h3>
</div> <p>{{ 'WELCOME.FAST_DEPLOYMENT_TEXT' | translate }}</p>
</div> </div>
</div> </div>
<div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12" <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 features-bottom-padding features-top-padding">
<div class="col-lg-offset-1 col-md-offset-1 col-lg-5 col-md-5 col-sm-6 col-xs-12">
<h3>{{ 'WELCOME.WEB_PORTAL_HEADER' | translate }}</h3>
<p>{{ 'WELCOME.WEB_PORTAL_TEXT' | translate }}</p>
</div>
<div class="col-lg-5 col-md-5 col-sm-6 col-xs-12">
<h3>{{ 'WELCOME.KUBERNETES_HEADER' | translate }}</h3>
<p>{{ 'WELCOME.KUBERNETES_TEXT' | translate }}</p>
</div>
</div>
</div>
<div class="col-lg-offset-2 col-md-offset-2 col-sm-offset-2 col-lg-8 col-md-8 col-sm-8 col-xs-12"
style="border-top: solid 1px #6c757d; margin-top: 20px;"> style="border-top: solid 1px #6c757d; margin-top: 20px;">
<div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-2 col-sm-8 col-xs-12 text-center" style="padding-top: 15px; <div class="col-lg-offset-4 col-lg-4 col-md-offset-4 col-md-4 col-sm-offset-2 col-sm-8 col-xs-12 text-center"
style="padding-top: 15px;
padding-bottom: 10px;"><h2>{{ 'WELCOME.TECHNOLOGIES_USED_HEADER' | translate }}</h2></div> padding-bottom: 10px;"><h2>{{ 'WELCOME.TECHNOLOGIES_USED_HEADER' | translate }}</h2></div>
<div class="center-block col-lg-12 col-md-12 col-sm-12 col-xs-12"> <div class="center-block col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
...@@ -107,49 +127,58 @@ ...@@ -107,49 +127,58 @@
</div> </div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer nofollow"> <a href="https://getbootstrap.com/" target="_blank" rel="noopener noreferrer nofollow">
<img src="../../assets/images/logo/bootstrap.png" alt="Bootstrap logo" class="landing-img-logo"></a> <img src="../../assets/images/logo/bootstrap.png" alt="Bootstrap logo"
class="landing-img-logo"></a>
</div> </div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://spring.io/" target="_blank" rel="noopener noreferrer nofollow"> <a href="https://spring.io/" target="_blank" rel="noopener noreferrer nofollow">
<img src="../../assets/images/logo/spring.png" alt="Spring logo" class="landing-img-logo"></a> <img src="../../assets/images/logo/spring.png" alt="Spring logo"
class="landing-img-logo"></a>
</div> </div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://www.postgresql.org/" target="_blank" rel="noopener noreferrer nofollow"> <a href="https://www.postgresql.org/" target="_blank" rel="noopener noreferrer nofollow">
<img src="../../assets/images/logo/postgres.png" alt="PostgreSQL logo" class="landing-img-logo"></a> <img src="../../assets/images/logo/postgres.png" alt="PostgreSQL logo"
class="landing-img-logo"></a>
</div> </div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer nofollow"> <a href="https://www.docker.com/" target="_blank" rel="noopener noreferrer nofollow">
<img src="../../assets/images/logo/docker.png" alt="Docker logo" class="landing-img-logo"></a> <img src="../../assets/images/logo/docker.png" alt="Docker logo"
class="landing-img-logo"></a>
</div> </div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://kubernetes.io/" target="_blank" rel="noopener noreferrer nofollow"> <a href="https://kubernetes.io/" target="_blank" rel="noopener noreferrer nofollow">
<img src="../../assets/images/logo/kuber.png" alt="Kubernetes logo" class="landing-img-logo"></a> <img src="../../assets/images/logo/kuber.png" alt="Kubernetes logo"
class="landing-img-logo"></a>
</div> </div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://about.gitlab.com/" target="_blank" rel="noopener noreferrer nofollow"> <a href="https://about.gitlab.com/" target="_blank" rel="noopener noreferrer nofollow">
<img src="../../assets/images/logo/gitlab.png" alt="Gitlab logo" class="landing-img-logo"></a> <img src="../../assets/images/logo/gitlab.png" alt="Gitlab logo"
class="landing-img-logo"></a>
</div> </div>
<div class="col-lg-3 col-md-4 col-sm-6 col-xs-6"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-6">
<a href="https://www.ansible.com/" target="_blank" rel="noopener noreferrer nofollow"> <a href="https://www.ansible.com/" target="_blank" rel="noopener noreferrer nofollow">
<img src="../../assets/images/logo/ansible.png" alt="Ansible logo" class="landing-img-logo"></a> <img src="../../assets/images/logo/ansible.png" alt="Ansible logo" class="landing-img-logo"></a>
</div> </div>
</div> </div>
</div> </div>
<div id="login-register-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset" <div id="login-register-panel" class="col-lg-3 col-md-5 col-sm-6 col-xs-12 pull-right login-vertical-offset"
[ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'" [ngClass]="router.url.startsWith('/welcome/login?ssoUserId=') ? '' : 'collapse'"
style="z-index: 800; position: fixed; right: 1px; margin-top: -15px; max-height: 50vh; font-size: 14px;"> style="z-index: 800; position: fixed; right: 1px; margin-top: -15px; max-height: 50vh; font-size: 14px;">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading"> <div class="panel-heading">
</div> </div>
<div class="panel-body" id="login-out" style="overflow-y: auto;"> <div class="panel-body" id="login-out" style="overflow-y: auto;">
<ul class="nav nav-tabs nav-justified"> <ul class="nav nav-tabs nav-justified">
<li role="login" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}"><a [routerLink]="['login']">{{ 'WELCOME.LOGIN' | translate }}</a></li> <li role="login" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:false}">
<li role="registration" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}"><a [routerLink]="['registration']">{{ 'WELCOME.REGISTER' | translate }}</a></li> <a [routerLink]="['login']">{{ 'WELCOME.LOGIN' | translate }}</a></li>
</ul> <li role="registration" [routerLinkActive]="['active']"
<router-outlet></router-outlet> [routerLinkActiveOptions]="{exact:true}"><a
</div> [routerLink]="['registration']">{{ 'WELCOME.REGISTER' | translate }}</a></li>
</div> </ul>
</div> <router-outlet></router-outlet>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div> </div>
src/app/welcome/welcome.component.ts
+ 52
− 48
View file @ 69ff553f
import { AppConfigService } from '../service/appconfig.service'; import {AppConfigService} from '../service/appconfig.service';
import { import {AfterContentChecked, AfterViewChecked, Component, OnInit,} from '@angular/core';
AfterContentChecked, import {ActivatedRoute, Router} from '@angular/router';
AfterViewChecked,
Component,
OnInit,
} from '@angular/core';
import {Router} from '@angular/router';
import {ServiceUnavailableService} from '../service-unavailable/service-unavailable.service'; import {ServiceUnavailableService} from '../service-unavailable/service-unavailable.service';
@Component({ @Component({
selector: 'app-welcome', selector: 'app-welcome',
templateUrl: './welcome.component.html', templateUrl: './welcome.component.html',
styleUrls: ['./welcome.component.css'] styleUrls: ['./welcome.component.css']
}) })
export class WelcomeComponent implements OnInit, AfterViewChecked, AfterContentChecked { export class WelcomeComponent implements OnInit, AfterViewChecked, AfterContentChecked {
private height = 0; private height = 0;
constructor(private appConfig: AppConfigService, public autoLogout = false;
public router: Router,
private serviceHealth: ServiceUnavailableService) {
}
async ngOnInit() { constructor(private appConfig: AppConfigService,
document.getElementById('global-footer').style.display = 'block'; public router: Router,
await this.serviceHealth.validateServicesAvailability(); private serviceHealth: ServiceUnavailableService,
if (!this.serviceHealth.isServiceAvailable) { private readonly route: ActivatedRoute) {
this.router.navigate(['/service-unavailable']); }
async ngOnInit() {
document.getElementById('global-footer').style.display = 'block';
await this.serviceHealth.validateServicesAvailability();
if (!this.serviceHealth.isServiceAvailable) {
this.router.navigate(['/service-unavailable']);
}
this.onResize();
this.route.queryParams.subscribe(params => {
console.log(params)
if (params.logout !== undefined) {
this.autoLogout = true;
}
})
}
ngAfterContentChecked() {
this.onResize();
}
ngAfterViewChecked() {
this.onResize();
}
onResize() {
// TODO
// rewrite this code, use css instead of js for better performance
this.height = document.getElementById('global-footer').offsetHeight;
const navHeight = document.getElementById('navbar').offsetHeight;
// document.getElementById("welcome-container").style.marginBottom = `${this.height}px`;
// document.getElementById("welcome-container").style.marginTop = `${navHeight + 2}px`;
document.getElementById('login-out').style.maxHeight = `calc(95vh - ${this.height + navHeight + 10}px)`;
// document.getElementById('login-out').style.paddingTop = `${navHeight}`;
if (this.height > 90) {
document.getElementById('global-footer').style.textAlign = 'center';
document.getElementById('login-out').style.maxHeight = `calc(94vh - ${this.height + navHeight + 10}px)`;
} else {
document.getElementById('global-footer').style.textAlign = 'right';
}
} }
this.onResize();
}
ngAfterContentChecked() {
this.onResize();
}
ngAfterViewChecked() {
this.onResize();
}
onResize() {
// TODO
// rewrite this code, use css instead of js for better performance
this.height = document.getElementById('global-footer').offsetHeight;
const navHeight = document.getElementById('navbar').offsetHeight;
// document.getElementById("welcome-container").style.marginBottom = `${this.height}px`;
// document.getElementById("welcome-container").style.marginTop = `${navHeight + 2}px`;
document.getElementById('login-out').style.maxHeight = `calc(95vh - ${this.height + navHeight + 10}px)`;
// document.getElementById('login-out').style.paddingTop = `${navHeight}`;
if (this.height > 90) {
document.getElementById('global-footer').style.textAlign = 'center';
document.getElementById('login-out').style.maxHeight = `calc(94vh - ${this.height + navHeight + 10}px)`;
} else {
document.getElementById('global-footer').style.textAlign = 'right';
}
}
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment