diff options
author | Chocobozzz <me@florianbigard.com> | 2022-06-14 13:54:54 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2022-06-15 13:31:53 +0200 |
commit | 6f03f944c34f78b38a68128413b55186e0676949 (patch) | |
tree | 81a0c79184cb5ac800c31f1d5334471ee506ac19 /client/src/app/+signup/+register/steps/register-step-channel.component.ts | |
parent | 936ce6e5635f3a52acbc799e1fcba9a948a7e390 (diff) | |
download | PeerTube-6f03f944c34f78b38a68128413b55186e0676949.tar.gz PeerTube-6f03f944c34f78b38a68128413b55186e0676949.tar.zst PeerTube-6f03f944c34f78b38a68128413b55186e0676949.zip |
Redesign register steps
Diffstat (limited to 'client/src/app/+signup/+register/steps/register-step-channel.component.ts')
-rw-r--r-- | client/src/app/+signup/+register/steps/register-step-channel.component.ts | 57 |
1 files changed, 57 insertions, 0 deletions
diff --git a/client/src/app/+signup/+register/steps/register-step-channel.component.ts b/client/src/app/+signup/+register/steps/register-step-channel.component.ts new file mode 100644 index 000000000..c10b568ba --- /dev/null +++ b/client/src/app/+signup/+register/steps/register-step-channel.component.ts | |||
@@ -0,0 +1,57 @@ | |||
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 { VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR, VIDEO_CHANNEL_NAME_VALIDATOR } from '@app/shared/form-validators/video-channel-validators' | ||
6 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' | ||
7 | import { UserSignupService } from '@app/shared/shared-users' | ||
8 | |||
9 | @Component({ | ||
10 | selector: 'my-register-step-channel', | ||
11 | templateUrl: './register-step-channel.component.html', | ||
12 | styleUrls: [ './step.component.scss' ] | ||
13 | }) | ||
14 | export class RegisterStepChannelComponent extends FormReactive implements OnInit { | ||
15 | @Input() username: string | ||
16 | @Input() instanceName: string | ||
17 | @Input() videoQuota: number | ||
18 | |||
19 | @Output() formBuilt = new EventEmitter<FormGroup>() | ||
20 | |||
21 | constructor ( | ||
22 | protected formValidatorService: FormValidatorService, | ||
23 | private userSignupService: UserSignupService | ||
24 | ) { | ||
25 | super() | ||
26 | } | ||
27 | |||
28 | get instanceHost () { | ||
29 | return window.location.host | ||
30 | } | ||
31 | |||
32 | ngOnInit () { | ||
33 | this.buildForm({ | ||
34 | displayName: VIDEO_CHANNEL_DISPLAY_NAME_VALIDATOR, | ||
35 | name: VIDEO_CHANNEL_NAME_VALIDATOR | ||
36 | }) | ||
37 | |||
38 | setTimeout(() => this.formBuilt.emit(this.form)) | ||
39 | |||
40 | concat( | ||
41 | of(''), | ||
42 | this.form.get('displayName').valueChanges | ||
43 | ).pipe(pairwise()) | ||
44 | .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue)) | ||
45 | } | ||
46 | |||
47 | isSameThanUsername () { | ||
48 | return this.username && this.username === this.form.value['name'] | ||
49 | } | ||
50 | |||
51 | private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) { | ||
52 | const name = this.form.value['name'] || '' | ||
53 | |||
54 | const newName = this.userSignupService.getNewUsername(oldDisplayName, newDisplayName, name) | ||
55 | this.form.patchValue({ name: newName }) | ||
56 | } | ||
57 | } | ||