aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+signup
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/+signup')
-rw-r--r--client/src/app/+signup/+register/register-step-channel.component.html34
-rw-r--r--client/src/app/+signup/+register/register-step-channel.component.ts30
-rw-r--r--client/src/app/+signup/+register/register-step-user.component.html19
-rw-r--r--client/src/app/+signup/+register/register-step-user.component.ts19
-rw-r--r--client/src/app/+signup/+register/register.component.html6
-rw-r--r--client/src/app/+signup/+register/register.component.scss23
6 files changed, 108 insertions, 23 deletions
diff --git a/client/src/app/+signup/+register/register-step-channel.component.html b/client/src/app/+signup/+register/register-step-channel.component.html
index 68ea4473a..253374f87 100644
--- a/client/src/app/+signup/+register/register-step-channel.component.html
+++ b/client/src/app/+signup/+register/register-step-channel.component.html
@@ -12,6 +12,21 @@
12 </div> 12 </div>
13 13
14 <div class="form-group"> 14 <div class="form-group">
15 <label for="displayName" i18n>Channel display name</label>
16
17 <div class="input-group">
18 <input
19 type="text" id="displayName"
20 formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
21 >
22 </div>
23
24 <div *ngIf="formErrors.displayName" class="form-error">
25 {{ formErrors.displayName }}
26 </div>
27 </div>
28
29 <div class="form-group">
15 <label for="name" i18n>Channel name</label> 30 <label for="name" i18n>Channel name</label>
16 31
17 <div class="input-group"> 32 <div class="input-group">
@@ -24,6 +39,10 @@
24 </div> 39 </div>
25 </div> 40 </div>
26 41
42 <div class="name-information" i18n>
43 The channel name is a unique identifier of your channel on this instance. It's like an address mail, so other people can find your channel.
44 </div>
45
27 <div *ngIf="formErrors.name" class="form-error"> 46 <div *ngIf="formErrors.name" class="form-error">
28 {{ formErrors.name }} 47 {{ formErrors.name }}
29 </div> 48 </div>
@@ -32,19 +51,4 @@
32 Channel name cannot be the same than your account name. You can click on the first step to update your account name. 51 Channel name cannot be the same than your account name. You can click on the first step to update your account name.
33 </div> 52 </div>
34 </div> 53 </div>
35
36 <div class="form-group">
37 <label for="displayName" i18n>Channel display name</label>
38
39 <div class="input-group">
40 <input
41 type="text" id="displayName"
42 formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
43 >
44 </div>
45
46 <div *ngIf="formErrors.displayName" class="form-error">
47 {{ formErrors.displayName }}
48 </div>
49 </div>
50</form> 54</form>
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 @@
1import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core' 1import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
2import { AuthService } from '@app/core' 2import { AuthService } from '@app/core'
3import { FormReactive, VideoChannelValidatorsService } from '@app/shared' 3import { FormReactive, UserService, VideoChannelValidatorsService } from '@app/shared'
4import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' 4import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
5import { FormGroup } from '@angular/forms' 5import { FormGroup } from '@angular/forms'
6import { pairwise } from 'rxjs/operators'
7import { 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}
diff --git a/client/src/app/+signup/+register/register-step-user.component.html b/client/src/app/+signup/+register/register-step-user.component.html
index cd0c78bfa..47b3be8cc 100644
--- a/client/src/app/+signup/+register/register-step-user.component.html
+++ b/client/src/app/+signup/+register/register-step-user.component.html
@@ -1,6 +1,21 @@
1<form role="form" [formGroup]="form"> 1<form role="form" [formGroup]="form">
2 2
3 <div class="form-group"> 3 <div class="form-group">
4 <label for="displayName" i18n>Display name</label>
5
6 <div class="input-group">
7 <input
8 type="text" id="displayName" placeholder="John Doe"
9 formControlName="displayName" [ngClass]="{ 'input-error': formErrors['displayName'] }"
10 >
11 </div>
12
13 <div *ngIf="formErrors.displayName" class="form-error">
14 {{ formErrors.displayName }}
15 </div>
16 </div>
17
18 <div class="form-group">
4 <label for="username" i18n>Username</label> 19 <label for="username" i18n>Username</label>
5 20
6 <div class="input-group"> 21 <div class="input-group">
@@ -13,6 +28,10 @@
13 </div> 28 </div>
14 </div> 29 </div>
15 30
31 <div class="name-information" i18n>
32 The username is a unique identifier of your account on this instance. It's like an address mail, so other people can find you.
33 </div>
34
16 <div *ngIf="formErrors.username" class="form-error"> 35 <div *ngIf="formErrors.username" class="form-error">
17 {{ formErrors.username }} 36 {{ formErrors.username }}
18 </div> 37 </div>
diff --git a/client/src/app/+signup/+register/register-step-user.component.ts b/client/src/app/+signup/+register/register-step-user.component.ts
index 3825ae371..3b71fd3c4 100644
--- a/client/src/app/+signup/+register/register-step-user.component.ts
+++ b/client/src/app/+signup/+register/register-step-user.component.ts
@@ -1,8 +1,10 @@
1import { Component, EventEmitter, OnInit, Output } from '@angular/core' 1import { Component, EventEmitter, OnInit, Output } from '@angular/core'
2import { AuthService } from '@app/core' 2import { AuthService } from '@app/core'
3import { FormReactive, UserValidatorsService } from '@app/shared' 3import { FormReactive, UserService, UserValidatorsService } from '@app/shared'
4import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' 4import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service'
5import { FormGroup } from '@angular/forms' 5import { FormGroup } from '@angular/forms'
6import { pairwise } from 'rxjs/operators'
7import { concat, of } from 'rxjs'
6 8
7@Component({ 9@Component({
8 selector: 'my-register-step-user', 10 selector: 'my-register-step-user',
@@ -15,6 +17,7 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
15 constructor ( 17 constructor (
16 protected formValidatorService: FormValidatorService, 18 protected formValidatorService: FormValidatorService,
17 private authService: AuthService, 19 private authService: AuthService,
20 private userService: UserService,
18 private userValidatorsService: UserValidatorsService 21 private userValidatorsService: UserValidatorsService
19 ) { 22 ) {
20 super() 23 super()
@@ -26,6 +29,7 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
26 29
27 ngOnInit () { 30 ngOnInit () {
28 this.buildForm({ 31 this.buildForm({
32 displayName: this.userValidatorsService.USER_DISPLAY_NAME_REQUIRED,
29 username: this.userValidatorsService.USER_USERNAME, 33 username: this.userValidatorsService.USER_USERNAME,
30 password: this.userValidatorsService.USER_PASSWORD, 34 password: this.userValidatorsService.USER_PASSWORD,
31 email: this.userValidatorsService.USER_EMAIL, 35 email: this.userValidatorsService.USER_EMAIL,
@@ -33,5 +37,18 @@ export class RegisterStepUserComponent extends FormReactive implements OnInit {
33 }) 37 })
34 38
35 setTimeout(() => this.formBuilt.emit(this.form)) 39 setTimeout(() => this.formBuilt.emit(this.form))
40
41 concat(
42 of(''),
43 this.form.get('displayName').valueChanges
44 ).pipe(pairwise())
45 .subscribe(([ oldValue, newValue ]) => this.onDisplayNameChange(oldValue, newValue))
46 }
47
48 private onDisplayNameChange (oldDisplayName: string, newDisplayName: string) {
49 const username = this.form.value['username'] || ''
50
51 const newUsername = this.userService.getNewUsername(oldDisplayName, newDisplayName, username)
52 this.form.patchValue({ username: newUsername })
36 } 53 }
37} 54}
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html
index 24def68c1..d7e47c1a8 100644
--- a/client/src/app/+signup/+register/register.component.html
+++ b/client/src/app/+signup/+register/register.component.html
@@ -27,6 +27,12 @@
27 </cdk-step> 27 </cdk-step>
28 28
29 <cdk-step i18n-label label="Done" editable="false"> 29 <cdk-step i18n-label label="Done" editable="false">
30 <div *ngIf="!signupDone && !error" class="done-loader">
31 <my-loader [loading]="true"></my-loader>
32
33 <div i18n>PeerTube is creating your account...</div>
34 </div>
35
30 <div *ngIf="error" class="alert alert-danger">{{ error }}</div> 36 <div *ngIf="error" class="alert alert-danger">{{ error }}</div>
31 </cdk-step> 37 </cdk-step>
32 </my-custom-stepper> 38 </my-custom-stepper>
diff --git a/client/src/app/+signup/+register/register.component.scss b/client/src/app/+signup/+register/register.component.scss
index 6f61b78f7..8d14992e7 100644
--- a/client/src/app/+signup/+register/register.component.scss
+++ b/client/src/app/+signup/+register/register.component.scss
@@ -56,3 +56,26 @@ button {
56 @include peertube-button; 56 @include peertube-button;
57 @include orange-button; 57 @include orange-button;
58} 58}
59
60.name-information {
61 margin-top: 10px;
62}
63
64.done-loader {
65 display: flex;
66 justify-content: center;
67 flex-direction: column;
68 align-items: center;
69
70 my-loader {
71 margin-bottom: 20px;
72
73 /deep/ .loader div {
74 border-color: var(--mainColor) transparent transparent transparent;
75 }
76
77 & + div {
78 font-size: 15px;
79 }
80 }
81}