Skip to content
Snippets Groups Projects
Unverified Commit 60138348 authored by Łukasz Łopatowski's avatar Łukasz Łopatowski Committed by GitHub
Browse files

Merge pull request #19 from nmaas-platform/8-notify-user-about-automatic-log-out 

Add banner for auto logout
parents efb4475e 69ff553f
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 @ 60138348
...@@ -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 @ 60138348
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 @ 60138348
...@@ -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 @ 60138348
<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 @ 60138348
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