src/app/app.component.ts
providers |
UserService
|
selector | hi-root |
styleUrls | ./app.component.scss |
templateUrl | ./app.component.html |
Properties |
Methods |
constructor(route: ActivatedRoute, router: Router, dialog: MatDialog, service: UserService, helper: HelperService)
|
||||||||||||||||||
Defined in src/app/app.component.ts:28
|
||||||||||||||||||
Parameters :
|
login |
login()
|
Defined in src/app/app.component.ts:65
|
Returns :
void
|
ngOnInit |
ngOnInit()
|
Defined in src/app/app.component.ts:55
|
Returns :
void
|
currentUser |
Type : any
|
Defined in src/app/app.component.ts:28
|
footerEnabled |
Default value : true
|
Defined in src/app/app.component.ts:26
|
headerEnabled |
Default value : true
|
Defined in src/app/app.component.ts:25
|
isLoading |
Default value : true
|
Defined in src/app/app.component.ts:27
|
import { Component, OnInit } from '@angular/core';
import {
Router,
ActivatedRoute,
NavigationStart,
NavigationEnd,
NavigationCancel,
NavigationError,
} from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
// import { Angulartics2Piwik } from 'angulartics2/piwik';
import { UserService } from './core/user.service';
import { InputDialogComponent } from './shared/dialog/input-dialog/input-dialog.component';
import { HelperService } from './shared/helper.service';
@Component({
selector: 'hi-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
providers: [UserService /*, Angulartics2Piwik */],
})
export class AppComponent implements OnInit {
headerEnabled = true;
footerEnabled = true;
isLoading = true;
currentUser: any;
constructor(
// protected angulartics2Piwik: Angulartics2Piwik,
protected route: ActivatedRoute,
protected router: Router,
protected dialog: MatDialog,
protected service: UserService,
protected helper: HelperService
) {
router.events.subscribe((event) => {
if (event instanceof NavigationStart) {
this.isLoading = true;
}
if (event instanceof NavigationEnd) {
this.isLoading = false;
}
if (event instanceof NavigationError) {
this.isLoading = false;
}
if (event instanceof NavigationCancel) {
this.isLoading = false;
}
});
// angulartics2Piwik.startTracking();
}
ngOnInit() {
this.currentUser = this.service.getCurrentUser();
this.route.queryParams.subscribe((params) => {
if (params['embed'] == 'true') {
this.headerEnabled = this.footerEnabled = false;
}
});
}
login() {
this.dialog
.open(InputDialogComponent, {
data: {
title: 'Sign In',
message: 'Please enter your LDAP username and password to continue:',
values: {
username: {
label: 'Username',
},
password: {
label: 'Password',
type: 'password',
},
},
},
})
.afterClosed()
.subscribe(
(result) => {
if (result && result.username.value && result.password.value) {
this.service
.login(result.username.value, result.password.value)
.subscribe(
(loginResponse) => {
if (!loginResponse) {
this.helper.showError(
`${loginResponse.status}: Either You are not part of helix-admin LDAP group or your password is incorrect.`
);
}
this.currentUser = this.service.getCurrentUser();
},
(error) => {
// since rest API simply throws 404 instead of empty config when config is not initialized yet
// frontend has to treat 404 as normal result
if (error != 'Not Found') {
this.helper.showError(error);
}
this.isLoading = false;
}
);
}
},
(error) => {
// since rest API simply throws 404 instead of empty config when config is not initialized yet
// frontend has to treat 404 as normal result
if (error != 'Not Found') {
this.helper.showError(error);
}
this.isLoading = false;
}
);
}
}
<!--
~ Licensed to the Apache Software Foundation (ASF) under one
~ or more contributor license agreements. See the NOTICE file
~ distributed with this work for additional information
~ regarding copyright ownership. The ASF licenses this file
~ to you under the Apache License, Version 2.0 (the
~ "License"); you may not use this file except in compliance
~ with the License. You may obtain a copy of the License at
~
~ http://www.apache.org/licenses/LICENSE-2.0
~
~ Unless required by applicable law or agreed to in writing,
~ software distributed under the License is distributed on an
~ "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
~ KIND, either express or implied. See the License for the
~ specific language governing permissions and limitations
~ under the License.
-->
<section class="app" fxLayout="column" fxFill>
<mat-toolbar
*ngIf="headerEnabled"
class="header mat-elevation-z7"
color="primary"
>
<a mat-button routerLink="/">
<img class="helix-logo" src="assets/logo.png" />
<span class="helix-title">Helix</span>
</a>
<span fxFlex="1 1 auto"></span>
<a mat-button (click)="login()">
<mat-icon>person</mat-icon>
{{ currentUser | async }}
</a>
</mat-toolbar>
<mat-progress-bar
*ngIf="isLoading"
mode="indeterminate"
[ngClass]="{ 'no-header': !headerEnabled }"
></mat-progress-bar>
<section class="main-container" [ngClass]="{ 'no-header': !headerEnabled }">
<router-outlet></router-outlet>
</section>
<section
*ngIf="footerEnabled"
class="footer mat-elevation-z7"
fxLayout="row"
fxLayoutAlign="center center"
>
<span>© 2022 Helix. All rights reserved.</span>
</section>
</section>
./app.component.scss
.header,
.footer {
z-index: 7;
}
.helix-logo {
width: 30px;
height: 30px;
padding-right: 10px;
}
.helix-title {
font-size: 30px;
text-transform: uppercase;
}
.mat-progress-bar {
position: fixed;
top: 64px;
z-index: 5;
&.no-header {
top: 0;
}
}
.footer {
background-color: #f5f5f5;
height: 50px;
span {
font-weight: normal;
font-size: 14px;
color: #666;
}
}
.main-container {
height: calc(100vh - 64px - 50px);
overflow-y: scroll;
&.no-header {
height: 100vh;
}
}