client/src/app/signup/signup.component.ts

   1 import { Component, OnInit } from '@angular/core'
   2 import { FormBuilder, FormGroup, Validators } from '@angular/forms'
   3 import { Router } from '@angular/router'
   4
   5 import { NotificationsService } from 'angular2-notifications'
   6
   7 import { AuthService } from '../core'
   8 import {
   9   FormReactive,
  10   UserService,
  11   USER_USERNAME,
  12   USER_EMAIL,
  13   USER_PASSWORD
  14 } from '../shared'
  15 import { UserCreate } from '../../../../shared'
  16
  17 @Component({
  18   selector: 'my-signup',
  19   templateUrl: './signup.component.html',
  20   styleUrls: [ './signup.component.scss' ]
  21 })
  22 export class SignupComponent extends FormReactive implements OnInit {
  23   error: string = null
  24
  25   form: FormGroup
  26   formErrors = {
  27     'username': '',
  28     'email': '',
  29     'password': ''
  30   }
  31   validationMessages = {
  32     'username': USER_USERNAME.MESSAGES,
  33     'email': USER_EMAIL.MESSAGES,
  34     'password': USER_PASSWORD.MESSAGES
  35   }
  36
  37   constructor (
  38     private formBuilder: FormBuilder,
  39     private router: Router,
  40     private notificationsService: NotificationsService,
  41     private userService: UserService
  42   ) {
  43     super()
  44   }
  45
  46   buildForm () {
  47     this.form = this.formBuilder.group({
  48       username: [ '', USER_USERNAME.VALIDATORS ],
  49       email:    [ '', USER_EMAIL.VALIDATORS ],
  50       password: [ '', USER_PASSWORD.VALIDATORS ]
  51     })
  52
  53     this.form.valueChanges.subscribe(data => this.onValueChanged(data))
  54   }
  55
  56   ngOnInit () {
  57     this.buildForm()
  58   }
  59
  60   signup () {
  61     this.error = null
  62
  63     const userCreate: UserCreate = this.form.value
  64
  65     this.userService.signup(userCreate).subscribe(
  66       () => {
  67         this.notificationsService.success('Success', `Registration for ${userCreate.username} complete.`)
  68         this.router.navigate([ '/videos/list' ])
  69       },
  70
  71       err => this.error = err.message
  72     )
  73   }
  74 }