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                private router: Router) {
  45     super()
  46   }
  47
  48   get signupAllowed () {
  49     return this.serverService.getConfig().signup.allowed === true
  50   }
  51
  52   buildForm () {
  53     this.form = this.formBuilder.group({
  54       username: [ '', Validators.required ],
  55       password: [ '', Validators.required ]
  56     })
  57
  58     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  59   }
  60
  61   ngOnInit () {
  62     this.buildForm()
  63   }
  64
  65   login () {
  66     this.error = null
  67
  68     const { username, password } = this.form.value
  69
  70     this.authService.login(username, password)
  71       .subscribe(
  72         () => this.redirectService.redirectToHomepage(),
  73
  74         err => this.error = err.message
  75       )
  76   }
  77
  78   askResetPassword () {
  79     this.userService.askResetPassword(this.forgotPasswordEmail)
  80       .subscribe(
  81         res => {
  82           const message = `An email with the reset password instructions will be sent to ${this.forgotPasswordEmail}.`
  83           this.notificationsService.success('Success', message)
  84           this.hideForgotPasswordModal()
  85         },
  86
  87         err => this.notificationsService.error('Error', err.message)
  88       )
  89   }
  90
  91   onForgotPasswordModalShown () {
  92     this.forgotPasswordEmailInput.nativeElement.focus()
  93   }
  94
  95   openForgotPasswordModal () {
  96     this.forgotPasswordModal.show()
  97   }
  98
  99   hideForgotPasswordModal () {
 100     this.forgotPasswordModal.hide()
 101   }
 102 }