client/src/app/login/login.component.ts

   1 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'
   2 import { FormBuilder, FormGroup, Validators } from '@angular/forms'
   3 import { Router } from '@angular/router'
   4 import { RedirectService, ServerService } from '@app/core'
   5 import { UserService } from '@app/shared'
   6 import { NotificationsService } from 'angular2-notifications'
   7 import { ModalDirective } from 'ngx-bootstrap/modal'
   8 import { AuthService } from '../core'
   9 import { FormReactive } from '../shared'
  10
  11 @Component({
  12   selector: 'my-login',
  13   templateUrl: './login.component.html',
  14   styleUrls: [ './login.component.scss' ]
  15 })
  16
  17 export class LoginComponent extends FormReactive implements OnInit {
  18   @ViewChild('forgotPasswordModal') forgotPasswordModal: ModalDirective
  19   @ViewChild('forgotPasswordEmailInput') forgotPasswordEmailInput: ElementRef
  20
  21   error: string = null
  22
  23   form: FormGroup
  24   formErrors = {
  25     'username': '',
  26     'password': ''
  27   }
  28   validationMessages = {
  29     'username': {
  30       'required': 'Username is required.'
  31     },
  32     'password': {
  33       'required': 'Password is required.'
  34     }
  35   }
  36   forgotPasswordEmail = ''
  37
  38   constructor (private authService: AuthService,
  39                private userService: UserService,
  40                private serverService: ServerService,
  41                private redirectService: RedirectService,
  42                private notificationsService: NotificationsService,
  43                private formBuilder: FormBuilder) {
  44     super()
  45   }
  46
  47   get signupAllowed () {
  48     return this.serverService.getConfig().signup.allowed === true
  49   }
  50
  51   buildForm () {
  52     this.form = this.formBuilder.group({
  53       username: [ '', Validators.required ],
  54       password: [ '', Validators.required ]
  55     })
  56
  57     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  58   }
  59
  60   ngOnInit () {
  61     this.buildForm()
  62   }
  63
  64   login () {
  65     this.error = null
  66
  67     const { username, password } = this.form.value
  68
  69     this.authService.login(username, password)
  70       .subscribe(
  71         () => this.redirectService.redirectToHomepage(),
  72
  73         err => this.error = err.message
  74       )
  75   }
  76
  77   askResetPassword () {
  78     this.userService.askResetPassword(this.forgotPasswordEmail)
  79       .subscribe(
  80         res => {
  81           const message = `An email with the reset password instructions will be sent to ${this.forgotPasswordEmail}.`
  82           this.notificationsService.success('Success', message)
  83           this.hideForgotPasswordModal()
  84         },
  85
  86         err => this.notificationsService.error('Error', err.message)
  87       )
  88   }
  89
  90   onForgotPasswordModalShown () {
  91     this.forgotPasswordEmailInput.nativeElement.focus()
  92   }
  93
  94   openForgotPasswordModal () {
  95     this.forgotPasswordModal.show()
  96   }
  97
  98   hideForgotPasswordModal () {
  99     this.forgotPasswordModal.hide()
 100   }
 101 }