File

src/app/app.component.ts

Implements

OnInit

Metadata

Index

Properties
Methods

Constructor

constructor(route: ActivatedRoute, router: Router, dialog: MatDialog, service: UserService, helper: HelperService)
Parameters :
Name Type Optional
route ActivatedRoute No
router Router No
dialog MatDialog No
service UserService No
helper HelperService No

Methods

login
login()
Returns : void
ngOnInit
ngOnInit()
Returns : void

Properties

currentUser
Type : any
footerEnabled
Default value : true
headerEnabled
Default value : true
isLoading
Default value : true
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>&copy; 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;
  }
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""