import { Component , OnDestroy , OnInit , Renderer2 } from '@angular/core' ; import { AuthService } from './services/auth.service' ; import { Router } from '@angular/router' ; import { FormControl , FormGroup , Validators } from '@angular/forms' ; import { first } from 'rxjs/operators' ; import { Subscription } from 'rxjs' ; import { PermissionService } from './services/permission.service' ; import { Group } from '../management/models/group' ; import { LoginResponse } from './models/responses' ; import { UserSettingsDBService } from '../management/user-settings/services/user-settings-db.service' ; @ Component ( { selector : 'cmdb-login' , templateUrl : './login.component.html' , styleUrls : [ './login.component.scss' ] } ) export class LoginComponent implements OnInit , OnDestroy { public static defaultLogoUrl : string = '/assets/img/datagerry_logo.svg' ; public static xmasLogoUrl : string = '/assets/img/datagerry_logo_xmas.svg' ; public static defaultFallItems : string = '/assets/img/nut.svg' ; public static xmasFallItems : string = '/assets/img/snowflake.svg' ; public imageUrl : string = LoginComponent . defaultLogoUrl ; public itemUrl : string = LoginComponent . defaultFallItems ; public loginForm : FormGroup ; public submitted = false ; private loginSubscription : Subscription = new Subscription ( ) ; constructor ( private router , private userSettingsDB , private authenticationService , private permissionService , private render ) { const currentDate = new Date ( ) ; const year = currentDate . getFullYear ( ) ; const dateBefore = new Date ( `${ year }-12-18` ) ; const dateAfter = new Date ( `${ year }-12-31` ) ; if ( ( dateBefore < currentDate ) && ( currentDate < dateAfter ) ) { this . imageUrl = LoginComponent . xmasLogoUrl ; this . itemUrl = LoginComponent . xmasFallItems ; } } public ngOnInit ( ) { this . render . addClass ( document . body , 'embedded' ) ; this . loginForm = new FormGroup ( { username : new FormControl ( '' , [ Validators . required ] ) , password : new FormControl ( '' , [ Validators . required ] ) } ) ; } public ngOnDestroy ( ) { this . render . removeClass ( document . body , 'embedded' ) ; this . loginSubscription . unsubscribe ( ) ; } get controls ( ) { return this . loginForm . controls ; } public async onSubmit ( ) { this . submitted = true ; this . render . addClass ( document . getElementById ( 'login-button' ) , 'button-progress' ) ; this . loginSubscription = this . authenticationService . login ( this . loginForm . controls . username . value , this . loginForm . controls . password . value ) . pipe ( first ( ) ) . subscribe ( ( response ) => { this . userSettingsDB . syncSettings ( ) ; this . permissionService . storeUserRights ( response . user . group_id ) . pipe ( first ( ) ) . subscribe ( ( group ) => { this . router . navigate ( [ '/' ] ) ; } ) ; } , async ( error ) => { this . render . removeClass ( document . getElementById ( 'login-button' ) , 'button-progress' ) ; this . render . addClass ( document . getElementById ( 'login-logo' ) , 'shake' ) ; this . loginForm . reset ( ) ; await this . delay ( 500 ) ; this . render . removeClass ( document . getElementById ( 'login-logo' ) , 'shake' ) ; } ) ; } public delay ( ms ) { return new Promise ( resolve => setTimeout ( resolve , ms ) ) ; } }