From 6f03f944c34f78b38a68128413b55186e0676949 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 14 Jun 2022 13:54:54 +0200
Subject: Redesign register steps

---
 .../steps/register-step-user.component.ts          | 63 ++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 client/src/app/+signup/+register/steps/register-step-user.component.ts

(limited to 'client/src/app/+signup/+register/steps/register-step-user.component.ts')

diff --git a/client/src/app/+signup/+register/steps/register-step-user.component.ts b/client/src/app/+signup/+register/steps/register-step-user.component.ts
new file mode 100644
index 000000000..b89e38a28
--- /dev/null
+++ b/client/src/app/+signup/+register/steps/register-step-user.component.ts
@@ -0,0 +1,63 @@
+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 {
+  USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
+  USER_EMAIL_VALIDATOR,
+  USER_PASSWORD_VALIDATOR,
+  USER_USERNAME_VALIDATOR
+} from '@app/shared/form-validators/user-validators'
+import { FormReactive, FormValidatorService } from '@app/shared/shared-forms'
+import { UserSignupService } from '@app/shared/shared-users'
+
+@Component({
+  selector: 'my-register-step-user',
+  templateUrl: './register-step-user.component.html',
+  styleUrls: [ './step.component.scss' ]
+})
+export class RegisterStepUserComponent extends FormReactive implements OnInit {
+  @Input() videoUploadDisabled = false
+  @Input() requiresEmailVerification = false
+
+  @Output() formBuilt = new EventEmitter<FormGroup>()
+
+  constructor (
+    protected formValidatorService: FormValidatorService,
+    private userSignupService: UserSignupService
+  ) {
+    super()
+  }
+
+  get instanceHost () {
+    return window.location.host
+  }
+
+  ngOnInit () {
+    this.buildForm({
+      displayName: USER_DISPLAY_NAME_REQUIRED_VALIDATOR,
+      username: USER_USERNAME_VALIDATOR,
+      password: USER_PASSWORD_VALIDATOR,
+      email: USER_EMAIL_VALIDATOR
+    })
+
+    setTimeout(() => this.formBuilt.emit(this.form))
+
+    concat(
+      of(''),
+      this.form.get('displayName').valueChanges
+    ).pipe(pairwise())
+     .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
+  }
+
+  getMinPasswordLengthMessage () {
+    return USER_PASSWORD_VALIDATOR.MESSAGES.minlength
+  }
+
+  private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
+    const username = this.form.value['username'] || ''
+
+    const newUsername = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, username)
+    this.form.patchValue({ username: newUsername })
+  }
+}
-- 
cgit v1.2.3