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/register.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/register.component.ts')
-rw-r--r-- | client/src/app/+signup/+register/register.component.ts | 53 |
1 files changed, 36 insertions, 17 deletions
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts index b4a7c0d0e..396b27e5a 100644 --- a/client/src/app/+signup/+register/register.component.ts +++ b/client/src/app/+signup/+register/register.component.ts | |||
@@ -1,4 +1,5 @@ | |||
1 | import { Component, OnInit } from '@angular/core' | 1 | import { CdkStep } from '@angular/cdk/stepper' |
2 | import { Component, OnInit, ViewChild } from '@angular/core' | ||
2 | import { FormGroup } from '@angular/forms' | 3 | import { FormGroup } from '@angular/forms' |
3 | import { ActivatedRoute } from '@angular/router' | 4 | import { ActivatedRoute } from '@angular/router' |
4 | import { AuthService } from '@app/core' | 5 | import { AuthService } from '@app/core' |
@@ -15,13 +16,15 @@ import { ServerConfig } from '@shared/models/server' | |||
15 | styleUrls: [ './register.component.scss' ] | 16 | styleUrls: [ './register.component.scss' ] |
16 | }) | 17 | }) |
17 | export class RegisterComponent implements OnInit { | 18 | export class RegisterComponent implements OnInit { |
19 | @ViewChild('lastStep') lastStep: CdkStep | ||
20 | |||
18 | accordion: NgbAccordion | 21 | accordion: NgbAccordion |
19 | info: string = null | 22 | |
20 | error: string = null | 23 | signupError: string |
21 | success: string = null | 24 | signupSuccess = false |
22 | signupDone = false | ||
23 | 25 | ||
24 | videoUploadDisabled: boolean | 26 | videoUploadDisabled: boolean |
27 | videoQuota: number | ||
25 | 28 | ||
26 | formStepTerms: FormGroup | 29 | formStepTerms: FormGroup |
27 | formStepUser: FormGroup | 30 | formStepUser: FormGroup |
@@ -39,8 +42,8 @@ export class RegisterComponent implements OnInit { | |||
39 | moderation: false | 42 | moderation: false |
40 | } | 43 | } |
41 | 44 | ||
42 | defaultPreviousStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Back` | 45 | defaultPreviousStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Go to the previous step` |
43 | defaultNextStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Next` | 46 | defaultNextStepButtonLabel = $localize`:Button on the registration form to go to the previous step:Go to the next step` |
44 | stepUserButtonLabel = this.defaultNextStepButtonLabel | 47 | stepUserButtonLabel = this.defaultNextStepButtonLabel |
45 | 48 | ||
46 | signupDisabled = false | 49 | signupDisabled = false |
@@ -62,7 +65,11 @@ export class RegisterComponent implements OnInit { | |||
62 | return this.serverConfig.signup.minimumAge | 65 | return this.serverConfig.signup.minimumAge |
63 | } | 66 | } |
64 | 67 | ||
65 | ngOnInit (): void { | 68 | get instanceName () { |
69 | return this.serverConfig.instance.name | ||
70 | } | ||
71 | |||
72 | ngOnInit () { | ||
66 | this.serverConfig = this.route.snapshot.data.serverConfig | 73 | this.serverConfig = this.route.snapshot.data.serverConfig |
67 | 74 | ||
68 | if (this.serverConfig.signup.allowed === false || this.serverConfig.signup.allowedForCurrentIP === false) { | 75 | if (this.serverConfig.signup.allowed === false || this.serverConfig.signup.allowedForCurrentIP === false) { |
@@ -70,7 +77,9 @@ export class RegisterComponent implements OnInit { | |||
70 | return | 77 | return |
71 | } | 78 | } |
72 | 79 | ||
73 | this.videoUploadDisabled = this.serverConfig.user.videoQuota === 0 | 80 | this.videoQuota = this.serverConfig.user.videoQuota |
81 | this.videoUploadDisabled = this.videoQuota === 0 | ||
82 | |||
74 | this.stepUserButtonLabel = this.videoUploadDisabled | 83 | this.stepUserButtonLabel = this.videoUploadDisabled |
75 | ? $localize`:Button on the registration form to finalize the account and channel creation:Signup` | 84 | ? $localize`:Button on the registration form to finalize the account and channel creation:Signup` |
76 | : this.defaultNextStepButtonLabel | 85 | : this.defaultNextStepButtonLabel |
@@ -120,21 +129,31 @@ export class RegisterComponent implements OnInit { | |||
120 | this.aboutHtml = instanceAboutAccordion.aboutHtml | 129 | this.aboutHtml = instanceAboutAccordion.aboutHtml |
121 | } | 130 | } |
122 | 131 | ||
132 | skipChannelCreation () { | ||
133 | this.formStepChannel.reset() | ||
134 | this.lastStep.select() | ||
135 | this.signup() | ||
136 | } | ||
137 | |||
123 | async signup () { | 138 | async signup () { |
124 | this.error = null | 139 | this.signupError = undefined |
125 | 140 | ||
126 | const body: UserRegister = await this.hooks.wrapObject( | 141 | const body: UserRegister = await this.hooks.wrapObject( |
127 | Object.assign(this.formStepUser.value, { channel: this.videoUploadDisabled ? undefined : this.formStepChannel.value }), | 142 | { |
143 | ...this.formStepUser.value, | ||
144 | |||
145 | channel: this.formStepChannel?.value?.name | ||
146 | ? this.formStepChannel.value | ||
147 | : undefined | ||
148 | }, | ||
128 | 'signup', | 149 | 'signup', |
129 | 'filter:api.signup.registration.create.params' | 150 | 'filter:api.signup.registration.create.params' |
130 | ) | 151 | ) |
131 | 152 | ||
132 | this.userSignupService.signup(body).subscribe({ | 153 | this.userSignupService.signup(body).subscribe({ |
133 | next: () => { | 154 | next: () => { |
134 | this.signupDone = true | ||
135 | |||
136 | if (this.requiresEmailVerification) { | 155 | if (this.requiresEmailVerification) { |
137 | this.info = $localize`Now please check your emails to verify your account and complete signup.` | 156 | this.signupSuccess = true |
138 | return | 157 | return |
139 | } | 158 | } |
140 | 159 | ||
@@ -142,17 +161,17 @@ export class RegisterComponent implements OnInit { | |||
142 | this.authService.login(body.username, body.password) | 161 | this.authService.login(body.username, body.password) |
143 | .subscribe({ | 162 | .subscribe({ |
144 | next: () => { | 163 | next: () => { |
145 | this.success = $localize`You are now logged in as ${body.username}!` | 164 | this.signupSuccess = true |
146 | }, | 165 | }, |
147 | 166 | ||
148 | error: err => { | 167 | error: err => { |
149 | this.error = err.message | 168 | this.signupError = err.message |
150 | } | 169 | } |
151 | }) | 170 | }) |
152 | }, | 171 | }, |
153 | 172 | ||
154 | error: err => { | 173 | error: err => { |
155 | this.error = err.message | 174 | this.signupError = err.message |
156 | } | 175 | } |
157 | }) | 176 | }) |
158 | } | 177 | } |