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