client/src/app/+signup/+register/register-step-user.component.ts

   1 import { concat, of } from 'rxjs'
   2 import { pairwise } from 'rxjs/operators'
   3 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
   4 import { FormGroup } from '@angular/forms'
   5 import { UserService } from '@app/core'
   6 import { FormReactive, FormValidatorService, UserValidatorsService } from '@app/shared/shared-forms'
   7
   8 @Component({
   9   selector: 'my-register-step-user',
  10   templateUrl: './register-step-user.component.html',
  11   styleUrls: [ './register.component.scss' ]
  12 })
  13 export class RegisterStepUserComponent extends FormReactive implements OnInit {
  14   @Input() hasCodeOfConduct = false
  15
  16   @Output() formBuilt = new EventEmitter<FormGroup>()
  17   @Output() termsClick = new EventEmitter<void>()
  18   @Output() codeOfConductClick = new EventEmitter<void>()
  19
  20   constructor (
  21     protected formValidatorService: FormValidatorService,
  22     private userService: UserService,
  23     private userValidatorsService: UserValidatorsService
  24   ) {
  25     super()
  26   }
  27
  28   get instanceHost () {
  29     return window.location.host
  30   }
  31
  32   ngOnInit () {
  33     this.buildForm({
  34       displayName: this.userValidatorsService.USER_DISPLAY_NAME_REQUIRED,
  35       username: this.userValidatorsService.USER_USERNAME,
  36       password: this.userValidatorsService.USER_PASSWORD,
  37       email: this.userValidatorsService.USER_EMAIL,
  38       terms: this.userValidatorsService.USER_TERMS
  39     })
  40
  41     setTimeout(() => this.formBuilt.emit(this.form))
  42
  43     concat(
  44       of(''),
  45       this.form.get('displayName').valueChanges
  46     ).pipe(pairwise())
  47      .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
  48   }
  49
  50   onTermsClick (event: Event) {
  51     event.preventDefault()
  52     this.termsClick.emit()
  53   }
  54
  55   onCodeOfConductClick (event: Event) {
  56     event.preventDefault()
  57     this.codeOfConductClick.emit()
  58   }
  59
  60   private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
  61     const username = this.form.value['username'] || ''
  62
  63     const newUsername = this.userService.getNewUsername(oldDisplayName, newDisplayName, username)
  64     this.form.patchValue({ username: newUsername })
  65   }
  66 }