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