]> git.immae.eu Git - github/Chocobozzz/PeerTube.git/blobdiff - client/src/app/+signup/+register/register-step-user.component.ts
register: hide channel step if upload quota is 0
[github/Chocobozzz/PeerTube.git] / client / src / app / +signup / +register / register-step-user.component.ts
index 3825ae371cfbc70be6004c9f031b1a6f3c95f03a..9193540b4e2e446e360706c84b940361ada2d1bf 100644 (file)
@@ -1,8 +1,16 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core'
-import { AuthService } from '@app/core'
-import { FormReactive, UserValidatorsService } from '@app/shared'
-import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
+import { concat, of } from 'rxjs'
+import { pairwise } from 'rxjs/operators'
+import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
 import { FormGroup } from '@angular/forms'
+import { UserService } from '@app/core'
+import {
+  USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
+  USER_EMAIL_VALIDATOR,
+  USER_PASSWORD_VALIDATOR,
+  USER_TERMS_VALIDATOR,
+  USER_USERNAME_VALIDATOR
+} from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
 
 @Component({
   selector: 'my-register-step-user',
@@ -10,12 +18,16 @@ import { FormGroup } from '@angular/forms'
   styleUrls: [ './register.component.scss' ]
 })
 export class RegisterStepUserComponent extends FormReactive implements OnInit {
+  @Input() hasCodeOfConduct = false
+  @Input() videoUploadDisabled = false
+
   @Output() formBuilt = new EventEmitter<FormGroup>()
+  @Output() termsClick = new EventEmitter<void>()
+  @Output() codeOfConductClick = new EventEmitter<void>()
 
   constructor (
     protected formValidatorService: FormValidatorService,
-    private authService: AuthService,
-    private userValidatorsService: UserValidatorsService
+    private userService: UserService
   ) {
     super()
   }
@@ -26,12 +38,36 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
 
   ngOnInit () {
     this.buildForm({
-      username: this.userValidatorsService.USER_USERNAME,
-      password: this.userValidatorsService.USER_PASSWORD,
-      email: this.userValidatorsService.USER_EMAIL,
-      terms: this.userValidatorsService.USER_TERMS
+      displayName: USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
+      username: USER_USERNAME_VALIDATOR,
+      password: USER_PASSWORD_VALIDATOR,
+      email: USER_EMAIL_VALIDATOR,
+      terms: USER_TERMS_VALIDATOR
     })
 
     setTimeout(() => this.formBuilt.emit(this.form))
+
+    concat(
+      of(''),
+      this.form.get('displayName').valueChanges
+    ).pipe(pairwise())
+     .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
+  }
+
+  onTermsClick (event: Event) {
+    event.preventDefault()
+    this.termsClick.emit()
+  }
+
+  onCodeOfConductClick (event: Event) {
+    event.preventDefault()
+    this.codeOfConductClick.emit()
+  }
+
+  private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
+    const username = this.form.value['username'] || ''
+
+    const newUsername = this.userService.getNewUsername(oldDisplayName, newDisplayName, username)
+    this.form.patchValue({ username: newUsername })
   }
 }