diff options
author | Chocobozzz <me@florianbigard.com> | 2019-06-07 16:59:53 +0200 |
---|---|---|
committer | Chocobozzz <me@florianbigard.com> | 2019-06-07 17:05:42 +0200 |
commit | 1f20622f2b087eaf8738d60fae00a44b9c558ca3 (patch) | |
tree | 1c8554623665ca96b8a1e6f2a6bcb8c1b5a83c2e /client/src/app/+signup/+register/register-step-channel.component.ts | |
parent | 1a03bea0c42fa1064ce4770157b4fd2e3edd5565 (diff) | |
download | PeerTube-1f20622f2b087eaf8738d60fae00a44b9c558ca3.tar.gz PeerTube-1f20622f2b087eaf8738d60fae00a44b9c558ca3.tar.zst PeerTube-1f20622f2b087eaf8738d60fae00a44b9c558ca3.zip |
Improve registration
* Add ability to set the user display name
* Use display name to guess the username/channel name
* Add explanations about what is the purpose of a username/channel name
* Add a loader at the "done" step
Diffstat (limited to 'client/src/app/+signup/+register/register-step-channel.component.ts')
-rw-r--r-- | client/src/app/+signup/+register/register-step-channel.component.ts | 30 |
1 files changed, 23 insertions, 7 deletions
diff --git a/client/src/app/+signup/+register/register-step-channel.component.ts b/client/src/app/+signup/+register/register-step-channel.component.ts index 9e13f75b3..e434b91a7 100644 --- a/client/src/app/+signup/+register/register-step-channel.component.ts +++ b/client/src/app/+signup/+register/register-step-channel.component.ts | |||
@@ -1,8 +1,10 @@ | |||
1 | import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' | 1 | import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' |
2 | import { AuthService } from '@app/core' | 2 | import { AuthService } from '@app/core' |
3 | import { FormReactive, VideoChannelValidatorsService } from '@app/shared' | 3 | import { FormReactive, UserService, VideoChannelValidatorsService } from '@app/shared' |
4 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' | 4 | import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' |
5 | import { FormGroup } from '@angular/forms' | 5 | import { FormGroup } from '@angular/forms' |
6 | import { pairwise } from 'rxjs/operators' | ||
7 | import { concat, of } from 'rxjs' | ||
6 | 8 | ||
7 | @Component({ | 9 | @Component({ |
8 | selector: 'my-register-step-channel', | 10 | selector: 'my-register-step-channel', |
@@ -16,6 +18,7 @@ export class RegisterStepChannelComponent extends FormReactive implements OnInit | |||
16 | constructor ( | 18 | constructor ( |
17 | protected formValidatorService: FormValidatorService, | 19 | protected formValidatorService: FormValidatorService, |
18 | private authService: AuthService, | 20 | private authService: AuthService, |
21 | private userService: UserService, | ||
19 | private videoChannelValidatorsService: VideoChannelValidatorsService | 22 | private videoChannelValidatorsService: VideoChannelValidatorsService |
20 | ) { | 23 | ) { |
21 | super() | 24 | super() |
@@ -25,16 +28,29 @@ export class RegisterStepChannelComponent extends FormReactive implements OnInit | |||
25 | return window.location.host | 28 | return window.location.host |
26 | } | 29 | } |
27 | 30 | ||
28 | isSameThanUsername () { | ||
29 | return this.username && this.username === this.form.value['name'] | ||
30 | } | ||
31 | |||
32 | ngOnInit () { | 31 | ngOnInit () { |
33 | this.buildForm({ | 32 | this.buildForm({ |
34 | name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME, | 33 | displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME, |
35 | displayName: this.videoChannelValidatorsService.VIDEO_CHANNEL_DISPLAY_NAME | 34 | name: this.videoChannelValidatorsService.VIDEO_CHANNEL_NAME |
36 | }) | 35 | }) |
37 | 36 | ||
38 | setTimeout(() => this.formBuilt.emit(this.form)) | 37 | setTimeout(() => this.formBuilt.emit(this.form)) |
38 | |||
39 | concat( | ||
40 | of(''), | ||
41 | this.form.get('displayName').valueChanges | ||
42 | ).pipe(pairwise()) | ||
43 | .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue)) | ||
44 | } | ||
45 | |||
46 | isSameThanUsername () { | ||
47 | return this.username && this.username === this.form.value['name'] | ||
48 | } | ||
49 | |||
50 | private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) { | ||
51 | const name = this.form.value['name'] || '' | ||
52 | |||
53 | const newName = this.userService.getNewUsername(oldDisplayName, newDisplayName, name) | ||
54 | this.form.patchValue({ name: newName }) | ||
39 | } | 55 | } |
40 | } | 56 | } |