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/+login/login.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/+login/login.component.ts')
-rw-r--r-- | client/src/app/+login/login.component.ts | 25 |
1 files changed, 24 insertions, 1 deletions
diff --git a/client/src/app/+login/login.component.ts b/client/src/app/+login/login.component.ts index 351750453..2567f21f1 100644 --- a/client/src/app/+login/login.component.ts +++ b/client/src/app/+login/login.component.ts | |||
@@ -3,9 +3,10 @@ import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angula | |||
3 | import { ActivatedRoute } from '@angular/router' | 3 | import { ActivatedRoute } from '@angular/router' |
4 | import { AuthService, Notifier, RedirectService, UserService } from '@app/core' | 4 | import { AuthService, Notifier, RedirectService, UserService } from '@app/core' |
5 | import { HooksService } from '@app/core/plugins/hooks.service' | 5 | import { HooksService } from '@app/core/plugins/hooks.service' |
6 | import { InstanceAboutAccordionComponent } from '@app/shared/shared-instance' | ||
6 | import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/form-validators/login-validators' | 7 | import { LOGIN_PASSWORD_VALIDATOR, LOGIN_USERNAME_VALIDATOR } from '@app/shared/form-validators/login-validators' |
7 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' | 8 | import { FormReactive, FormValidatorService } from '@app/shared/shared-forms' |
8 | import { NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap' | 9 | import { NgbAccordion, NgbModal, NgbModalRef } from '@ng-bootstrap/ng-bootstrap' |
9 | import { RegisteredExternalAuthConfig, ServerConfig } from '@shared/models' | 10 | import { RegisteredExternalAuthConfig, ServerConfig } from '@shared/models' |
10 | 11 | ||
11 | @Component({ | 12 | @Component({ |
@@ -18,6 +19,7 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni | |||
18 | @ViewChild('usernameInput', { static: false }) usernameInput: ElementRef | 19 | @ViewChild('usernameInput', { static: false }) usernameInput: ElementRef |
19 | @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef | 20 | @ViewChild('forgotPasswordModal', { static: true }) forgotPasswordModal: ElementRef |
20 | 21 | ||
22 | accordion: NgbAccordion | ||
21 | error: string = null | 23 | error: string = null |
22 | forgotPasswordEmail = '' | 24 | forgotPasswordEmail = '' |
23 | 25 | ||
@@ -25,6 +27,14 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni | |||
25 | externalAuthError = false | 27 | externalAuthError = false |
26 | externalLogins: string[] = [] | 28 | externalLogins: string[] = [] |
27 | 29 | ||
30 | instanceInformationPanels = { | ||
31 | terms: true, | ||
32 | administrators: false, | ||
33 | features: false, | ||
34 | moderation: false, | ||
35 | codeOfConduct: false | ||
36 | } | ||
37 | |||
28 | private openedForgotPasswordModal: NgbModalRef | 38 | private openedForgotPasswordModal: NgbModalRef |
29 | private serverConfig: ServerConfig | 39 | private serverConfig: ServerConfig |
30 | 40 | ||
@@ -45,6 +55,15 @@ export class LoginComponent extends FormReactive implements OnInit, AfterViewIni | |||
45 | return this.serverConfig.signup.allowed === true | 55 | return this.serverConfig.signup.allowed === true |
46 | } | 56 | } |
47 | 57 | ||
58 | onTermsClick (event: Event, instanceInformation: HTMLElement) { | ||
59 | event.preventDefault() | ||
60 | |||
61 | if (this.accordion) { | ||
62 | this.accordion.expand('terms') | ||
63 | instanceInformation.scrollIntoView({ behavior: 'smooth' }) | ||
64 | } | ||
65 | } | ||
66 | |||
48 | isEmailDisabled () { | 67 | isEmailDisabled () { |
49 | return this.serverConfig.email.enabled === false | 68 | return this.serverConfig.email.enabled === false |
50 | } | 69 | } |
@@ -122,6 +141,10 @@ The link will expire within 1 hour.` | |||
122 | this.openedForgotPasswordModal.close() | 141 | this.openedForgotPasswordModal.close() |
123 | } | 142 | } |
124 | 143 | ||
144 | onInstanceAboutAccordionInit (instanceAboutAccordion: InstanceAboutAccordionComponent) { | ||
145 | this.accordion = instanceAboutAccordion.accordion | ||
146 | } | ||
147 | |||
125 | private loadExternalAuthToken (username: string, token: string) { | 148 | private loadExternalAuthToken (username: string, token: string) { |
126 | this.isAuthenticatedWithExternalAuth = true | 149 | this.isAuthenticatedWithExternalAuth = true |
127 | 150 | ||