### File

`src/app/app.component.ts`

### Implements

`OnInit`

### Metadata

providers | `UserService`
selector | `hi-root`
styleUrls | `./app.component.scss`
templateUrl | `./app.component.html`

### Index

###### Properties
currentUser footerEnabled headerEnabled isLoading
###### Methods
login ngOnInit

### Constructor

`constructor(route: ActivatedRoute, router: Router, dialog: MatDialog, service: UserService, helper: HelperService)`
Defined in src/app/app.component.ts:28
Parameters :
Name | Type | Optional
route | `ActivatedRoute` | No
router | `Router` | No
dialog | `MatDialog` | No
service | `UserService` | No
helper | `HelperService` | No

### Methods

login
`login()`
Defined in src/app/app.component.ts:65
Returns : `void`

ngOnInit
`ngOnInit()`
Defined in src/app/app.component.ts:55
Returns : `void`

### Properties

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>&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 ""