mod2/ui/src/app/app.component.ts

   1 /*
   2  *  # ============LICENSE_START=======================================================
   3  *  # Copyright (c) 2020 AT&T Intellectual Property. All rights reserved.
   4  *  # ================================================================================
   5  *  # Licensed under the Apache License, Version 2.0 (the "License");
   6  *  # you may not use this file except in compliance with the License.
   7  *  # You may obtain a copy of the License at
   8  *  #
   9  *  #      http://www.apache.org/licenses/LICENSE-2.0
  10  *  #
  11  *  # Unless required by applicable law or agreed to in writing, software
  12  *  # distributed under the License is distributed on an "AS IS" BASIS,
  13  *  # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  14  *  # See the License for the specific language governing permissions and
  15  *  # limitations under the License.
  16  *  # ============LICENSE_END=========================================================
  17  */
  18
  19 import { Component, HostBinding, OnInit } from '@angular/core';
  20 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
  21 import { Observable } from 'rxjs';
  22 import { map, shareReplay } from 'rxjs/operators';
  23 import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
  24 import { FlatTreeControl } from '@angular/cdk/tree';
  25 import { Event, Router, RouterOutlet, NavigationStart, NavigationEnd, RouterEvent } from '@angular/router';
  26 import { AuthService } from './services/auth.service';
  27 import { BreadcrumbService } from './services/breadcrumb.service';
  28 import { environment } from '../environments/environment';
  29 import { FormGroup, FormBuilder, Validators } from '@angular/forms';
  30 import { UserService } from './services/user.service';
  31 import { User } from './models/User';
  32 import { Authority } from './models/Authority.enum';
  33
  34 interface TreeNode {
  35   name: string;
  36   children?: TreeNode[];
  37 }
  38
  39 const TREE_DATA: TreeNode[] = [
  40   {
  41     name: 'Microservices',
  42     children: [
  43       { name: 'Microservices' },
  44       { name: 'MS Instances' },
  45       { name: 'Blueprints' },
  46       { name: 'MOD APIs' }
  47     ]
  48   }
  49 ];
  50
  51 interface ExampleFlatNode {
  52   expandable: boolean;
  53   name: string;
  54   level: number;
  55 }
  56
  57 @Component({
  58   selector: 'app-root',
  59   templateUrl: './app.component.html',
  60   styleUrls: ['./app.component.css']
  61 })
  62 export class AppComponent implements OnInit{
  63
  64   @HostBinding('@.disabled')
  65   public animationsDisabled = true;
  66   activeNode: any;
  67   resetPasswordFlag: boolean = false;
  68   resetPasswordForm: FormGroup;
  69   hidePassword: boolean = true;
  70   hideConfirmPassword: boolean = true;
  71   breadcrumbs: any[] = [];
  72
  73   prepareRoute(outlet: RouterOutlet) {
  74     return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
  75   }
  76
  77   title = 'mod-fe';
  78   right: boolean = true;
  79   down: boolean = false;
  80
  81   menu_tree(){
  82     this.right = !this.right;
  83     this.down = !this.down;
  84   }
  85
  86   isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
  87     .pipe(
  88       map(result => result.matches),
  89       shareReplay()
  90     );
  91
  92   redirectTo(link){
  93     window.open(link, "_blank");
  94   }
  95
  96   redirectToAPIs() {
  97     window.open(`http://${environment.api_baseURL}:31001/swagger-ui.html#/`, "_blank");
  98   }
  99
 100   constructor(private breakpointObserver: BreakpointObserver, private router: Router, public authService: AuthService,
 101               private bread: BreadcrumbService, private fb: FormBuilder, private userService: UserService) {
 102     this.dataSource.data = TREE_DATA;
 103   }
 104
 105   ngOnInit() {
 106     this.resetPasswordForm = this.fb.group(
 107         {
 108           password: ['', [Validators.minLength(6)]],
 109           confirm_password: ''
 110         },
 111         {validators: [this.passwordValidator]}
 112       );
 113
 114       //  Subscribe to breadcrumb changes
 115       this.bread.breadcrumbs$.subscribe( (crumbArray) => {this.breadcrumbs = crumbArray});
 116   }
 117
 118   setCrumbs(component, action) {
 119     this.bread.setBreadcrumbs(component, action)
 120   }
 121
 122   passwordValidator(group: FormGroup) {
 123     if(group.value.password === group.value.confirm_password){
 124       return null;
 125     } else {
 126       return {errMsg: 'Passwords do not match!'};
 127     }
 128   }
 129
 130   private _transformer = (node: TreeNode, level: number) => {
 131     return {
 132       expandable: !!node.children && node.children.length > 0,
 133       name: node.name,
 134       level: level,
 135     };
 136   }
 137
 138   tree_handler(name, treenode) {
 139     if (name == "MOD APIs") {
 140       window.open(`http://${environment.api_baseURL}:31001/swagger-ui.html#/`, "_blank");
 141     } else if (name == "MS Instances") {
 142       this.router.navigate(["ms-instances"]);
 143       this.activeNode = treenode;
 144     } else if(name == "Microservices") {
 145       this.router.navigate(["base-microservices"]);
 146       this.activeNode = treenode;
 147     } else if(name == "Blueprints") {
 148       this.router.navigate(["blueprints"]);
 149       this.activeNode = treenode;
 150     }
 151
 152   }
 153
 154   treeControl = new FlatTreeControl<ExampleFlatNode>(
 155     node => node.level, node => node.expandable);
 156
 157   treeFlattener = new MatTreeFlattener(
 158     this._transformer, node => node.level, node => node.expandable, node => node.children);
 159
 160   dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
 161
 162   hasChild = (_: number, node: ExampleFlatNode) => node.expandable;
 163
 164   showMsMenu = false;
 165   msMenuIconRight = true;
 166   msMenu() {
 167     this.showMsMenu = !this.showMsMenu
 168     this.msMenuIconRight = !this.msMenuIconRight
 169   }
 170
 171   showUtilitiesMenu = false;
 172   utilitiesMenuIconRight = true;
 173   utilitiesMenu(){
 174     this.showUtilitiesMenu = !this.showUtilitiesMenu
 175     this.utilitiesMenuIconRight = !this.utilitiesMenuIconRight
 176   }
 177
 178   onConfirm() {
 179     this.authService.reLoginMsg = false;
 180   }
 181
 182   handleLogout() {
 183     this.showMsMenu = false
 184     this.authService.logout()
 185   }
 186
 187   handleProfile() {
 188     console.log(this.authService.getUser().roles);
 189     this.resetPasswordFlag = true;
 190   }
 191
 192   closeResetDialog() {
 193     this.resetPasswordForm.reset();
 194     this.resetPasswordFlag = false;
 195   }
 196
 197   submitReset() {
 198     if(this.authService.getUser().roles.includes(Authority.ADMIN)){
 199       this.userService.editUser(this.authService.getUser().username, this.resetPasswordForm.value as User).subscribe(res=>{
 200         alert("Password reset successful. Please login in using the new credentials.");
 201         this.authService.logout();
 202     }, (err)=>{
 203       alert(err.error.message);
 204
 205     });
 206     } else {
 207       this.userService.editProfile(this.authService.getUser().username, this.resetPasswordForm.value as User).subscribe(res=>{
 208         alert("Password reset successful. Please login in using the new credentials.");
 209         this.authService.logout();
 210       }, (err)=>{
 211         alert(err.error.message);
 212       });
 213     }
 214      this.resetPasswordForm.reset();
 215      this.resetPasswordFlag = false;
 216   }
 217
 218 }