diff options
author | Kimsible <1877318+kimsible@users.noreply.github.com> | 2020-12-07 16:34:07 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-12-07 16:34:07 +0100 |
commit | 40360c17d82b33accb34ea974c275e17880c37aa (patch) | |
tree | e0ddac1174e54897b4871daa4dca43dce121f590 /client/src/app/+signup/+register/register.component.ts | |
parent | 10f26f4203b8cef32778bf3435d8112eaea3c093 (diff) | |
download | PeerTube-40360c17d82b33accb34ea974c275e17880c37aa.tar.gz PeerTube-40360c17d82b33accb34ea974c275e17880c37aa.tar.zst PeerTube-40360c17d82b33accb34ea974c275e17880c37aa.zip |
improvements to login and sign-up pages (#3357)
* New login form ui
* Move InstanceAboutAccordion to shared components
* Update closed registration alert text
* Add alert for opened registration and move them bellow login form
* Adjust flex block on signup and login views
* Replace toggle accordion with expand on links in signup and login + scrollTo
* Improve display of login alerts
* Fix missing Component suffix
* Define min-width instance-information block sign-up and login for mobile screens
* Add ability to select specific panels in instanceAboutAccorddion
* Add instance title and short-description to common instanceAboutAccordion
* Clarify title alert in login page
* Add step terms for signup
Co-authored-by: kimsible <kimsible@users.noreply.github.com>
Co-authored-by: Rigel Kent <sendmemail@rigelk.eu>
Diffstat (limited to 'client/src/app/+signup/+register/register.component.ts')
-rw-r--r-- | client/src/app/+signup/+register/register.component.ts | 62 |
1 files changed, 34 insertions, 28 deletions
diff --git a/client/src/app/+signup/+register/register.component.ts b/client/src/app/+signup/+register/register.component.ts index 5b6762631..b1f5d8e93 100644 --- a/client/src/app/+signup/+register/register.component.ts +++ b/client/src/app/+signup/+register/register.component.ts | |||
@@ -1,12 +1,12 @@ | |||
1 | import { Component, OnInit, ViewChild } from '@angular/core' | 1 | import { Component, OnInit } from '@angular/core' |
2 | import { FormGroup } from '@angular/forms' | 2 | import { FormGroup } from '@angular/forms' |
3 | import { ActivatedRoute } from '@angular/router' | 3 | import { ActivatedRoute } from '@angular/router' |
4 | import { AuthService, Notifier, UserService } from '@app/core' | 4 | import { AuthService, UserService } from '@app/core' |
5 | import { HooksService } from '@app/core/plugins/hooks.service' | 5 | import { HooksService } from '@app/core/plugins/hooks.service' |
6 | import { InstanceService } from '@app/shared/shared-instance' | ||
7 | import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap' | 6 | import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap' |
8 | import { UserRegister } from '@shared/models' | 7 | import { UserRegister } from '@shared/models' |
9 | import { About, ServerConfig } from '@shared/models/server' | 8 | import { ServerConfig } from '@shared/models/server' |
9 | import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance' | ||
10 | 10 | ||
11 | @Component({ | 11 | @Component({ |
12 | selector: 'my-register', | 12 | selector: 'my-register', |
@@ -14,35 +14,39 @@ import { About, ServerConfig } from '@shared/models/server' | |||
14 | styleUrls: [ './register.component.scss' ] | 14 | styleUrls: [ './register.component.scss' ] |
15 | }) | 15 | }) |
16 | export class RegisterComponent implements OnInit { | 16 | export class RegisterComponent implements OnInit { |
17 | @ViewChild('accordion', { static: true }) accordion: NgbAccordion | 17 | accordion: NgbAccordion |
18 | |||
19 | info: string = null | 18 | info: string = null |
20 | error: string = null | 19 | error: string = null |
21 | success: string = null | 20 | success: string = null |
22 | signupDone = false | 21 | signupDone = false |
23 | 22 | ||
24 | about: About | ||
25 | aboutHtml = { | ||
26 | description: '', | ||
27 | terms: '', | ||
28 | codeOfConduct: '', | ||
29 | moderationInformation: '', | ||
30 | administrator: '' | ||
31 | } | ||
32 | |||
33 | videoUploadDisabled: boolean | 23 | videoUploadDisabled: boolean |
34 | 24 | ||
25 | formStepTerms: FormGroup | ||
35 | formStepUser: FormGroup | 26 | formStepUser: FormGroup |
36 | formStepChannel: FormGroup | 27 | formStepChannel: FormGroup |
37 | 28 | ||
29 | aboutHtml = { | ||
30 | codeOfConduct: '' | ||
31 | } | ||
32 | |||
33 | instanceInformationPanels = { | ||
34 | codeOfConduct: true, | ||
35 | terms: true, | ||
36 | administrators: false, | ||
37 | features: false, | ||
38 | moderation: false | ||
39 | } | ||
40 | |||
41 | defaultNextStepButtonLabel = $localize`Next` | ||
42 | stepUserButtonLabel = this.defaultNextStepButtonLabel | ||
43 | |||
38 | private serverConfig: ServerConfig | 44 | private serverConfig: ServerConfig |
39 | 45 | ||
40 | constructor ( | 46 | constructor ( |
41 | private route: ActivatedRoute, | 47 | private route: ActivatedRoute, |
42 | private authService: AuthService, | 48 | private authService: AuthService, |
43 | private notifier: Notifier, | ||
44 | private userService: UserService, | 49 | private userService: UserService, |
45 | private instanceService: InstanceService, | ||
46 | private hooks: HooksService | 50 | private hooks: HooksService |
47 | ) { | 51 | ) { |
48 | } | 52 | } |
@@ -55,19 +59,12 @@ export class RegisterComponent implements OnInit { | |||
55 | this.serverConfig = this.route.snapshot.data.serverConfig | 59 | this.serverConfig = this.route.snapshot.data.serverConfig |
56 | 60 | ||
57 | this.videoUploadDisabled = this.serverConfig.user.videoQuota === 0 | 61 | this.videoUploadDisabled = this.serverConfig.user.videoQuota === 0 |
58 | 62 | this.stepUserButtonLabel = this.videoUploadDisabled | |
59 | this.instanceService.getAbout() | 63 | ? $localize`Signup` |
60 | .subscribe( | 64 | : this.defaultNextStepButtonLabel |
61 | async about => { | ||
62 | this.about = about | ||
63 | |||
64 | this.aboutHtml = await this.instanceService.buildHtml(about) | ||
65 | }, | ||
66 | |||
67 | err => this.notifier.error(err.message) | ||
68 | ) | ||
69 | 65 | ||
70 | this.hooks.runAction('action:signup.register.init', 'signup') | 66 | this.hooks.runAction('action:signup.register.init', 'signup') |
67 | |||
71 | } | 68 | } |
72 | 69 | ||
73 | hasSameChannelAndAccountNames () { | 70 | hasSameChannelAndAccountNames () { |
@@ -86,6 +83,10 @@ export class RegisterComponent implements OnInit { | |||
86 | return this.formStepChannel.value['name'] | 83 | return this.formStepChannel.value['name'] |
87 | } | 84 | } |
88 | 85 | ||
86 | onTermsFormBuilt (form: FormGroup) { | ||
87 | this.formStepTerms = form | ||
88 | } | ||
89 | |||
89 | onUserFormBuilt (form: FormGroup) { | 90 | onUserFormBuilt (form: FormGroup) { |
90 | this.formStepUser = form | 91 | this.formStepUser = form |
91 | } | 92 | } |
@@ -102,6 +103,11 @@ export class RegisterComponent implements OnInit { | |||
102 | if (this.accordion) this.accordion.toggle('code-of-conduct') | 103 | if (this.accordion) this.accordion.toggle('code-of-conduct') |
103 | } | 104 | } |
104 | 105 | ||
106 | onInstanceAboutAccordionInit (instanceAboutAccordion: InstanceAboutAccordionComponent) { | ||
107 | this.accordion = instanceAboutAccordion.accordion | ||
108 | this.aboutHtml = instanceAboutAccordion.aboutHtml | ||
109 | } | ||
110 | |||
105 | async signup () { | 111 | async signup () { |
106 | this.error = null | 112 | this.error = null |
107 | 113 | ||