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.html | |
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.html')
-rw-r--r-- | client/src/app/+signup/+register/register.component.html | 77 |
1 files changed, 16 insertions, 61 deletions
diff --git a/client/src/app/+signup/+register/register.component.html b/client/src/app/+signup/+register/register.component.html index 7e3704124..bebc5d926 100644 --- a/client/src/app/+signup/+register/register.component.html +++ b/client/src/app/+signup/+register/register.component.html | |||
@@ -10,19 +10,26 @@ | |||
10 | <div class="wrapper" [hidden]="signupDone"> | 10 | <div class="wrapper" [hidden]="signupDone"> |
11 | <div class="register-form"> | 11 | <div class="register-form"> |
12 | <my-custom-stepper linear *ngIf="!signupDone"> | 12 | <my-custom-stepper linear *ngIf="!signupDone"> |
13 | <cdk-step [stepControl]="formStepUser" i18n-label label="User"> | 13 | <cdk-step [stepControl]="formStepTerms" i18n-label="Stepper label for the registration page describing terms of service" label="Terms"> |
14 | <my-register-step-user | 14 | <div class="instance-information"> |
15 | <my-instance-about-accordion (init)="onInstanceAboutAccordionInit($event)" [panels]="instanceInformationPanels"></my-instance-about-accordion> | ||
16 | </div> | ||
17 | |||
18 | <my-register-step-terms | ||
15 | [hasCodeOfConduct]="!!aboutHtml.codeOfConduct" | 19 | [hasCodeOfConduct]="!!aboutHtml.codeOfConduct" |
16 | [videoUploadDisabled]="videoUploadDisabled" | 20 | (formBuilt)="onTermsFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()" |
17 | (formBuilt)="onUserFormBuilt($event)" (termsClick)="onTermsClick()" (codeOfConductClick)="onCodeOfConductClick()" | 21 | ></my-register-step-terms> |
18 | > | 22 | |
19 | </my-register-step-user> | 23 | <button cdkStepperNext [disabled]="!formStepTerms || !formStepTerms.valid">{{ defaultNextStepButtonLabel }}</button> |
24 | </cdk-step> | ||
25 | |||
26 | <cdk-step [stepControl]="formStepUser" i18n-label="Stepper label for the registration page asking user informations" label="User"> | ||
27 | <my-register-step-user (formBuilt)="onUserFormBuilt($event)" [videoUploadDisabled]="videoUploadDisabled"></my-register-step-user> | ||
20 | 28 | ||
21 | <button i18n cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid" | 29 | <button cdkStepperNext [disabled]="!formStepUser || !formStepUser.valid" (click)="videoUploadDisabled && signup()">{{ stepUserButtonLabel }}</button> |
22 | (click)="signup()">{{ videoUploadDisabled ? 'Signup' : 'Next' }}</button> | ||
23 | </cdk-step> | 30 | </cdk-step> |
24 | 31 | ||
25 | <cdk-step [stepControl]="formStepChannel" i18n-label label="Channel" *ngIf="!videoUploadDisabled"> | 32 | <cdk-step [stepControl]="formStepChannel" i18n-label="Stepper label for the registration page asking information about the default channel" label="Channel" *ngIf="!videoUploadDisabled"> |
26 | <my-register-step-channel (formBuilt)="onChannelFormBuilt($event)" [username]="getUsername()"></my-register-step-channel> | 33 | <my-register-step-channel (formBuilt)="onChannelFormBuilt($event)" [username]="getUsername()"></my-register-step-channel> |
27 | 34 | ||
28 | <button i18n cdkStepperNext (click)="signup()" | 35 | <button i18n cdkStepperNext (click)="signup()" |
@@ -43,58 +50,6 @@ | |||
43 | </cdk-step> | 50 | </cdk-step> |
44 | </my-custom-stepper> | 51 | </my-custom-stepper> |
45 | </div> | 52 | </div> |
46 | |||
47 | <div class="instance-information"> | ||
48 | <ngb-accordion [closeOthers]="true" #accordion="ngbAccordion"> | ||
49 | <ngb-panel id="instance-features" i18n-title title="Features found on this instance"> | ||
50 | <ng-template ngbPanelContent> | ||
51 | <my-instance-features-table></my-instance-features-table> | ||
52 | </ng-template> | ||
53 | </ngb-panel> | ||
54 | |||
55 | <ng-container *ngIf="about"> | ||
56 | <ngb-panel | ||
57 | *ngIf="aboutHtml.administrator || about.instance.maintenanceLifetime || about.instance.businessModel" | ||
58 | id="admin-sustainability" i18n-title title="Administrators & Sustainability" | ||
59 | > | ||
60 | <ng-template ngbPanelContent> | ||
61 | <div class="block"> | ||
62 | <strong i18n>Who are we?</strong> | ||
63 | <div [innerHTML]="aboutHtml.administrator"></div> | ||
64 | </div> | ||
65 | |||
66 | <div class="block"> | ||
67 | <strong i18n>How long do we plan to maintain this instance?</strong> | ||
68 | <div [innerHTML]="about.instance.maintenanceLifetime"></div> | ||
69 | </div> | ||
70 | |||
71 | <div class="block"> | ||
72 | <strong i18n>How will we finance this instance?</strong> | ||
73 | <div [innerHTML]="about.instance.businessModel"></div> | ||
74 | </div> | ||
75 | </ng-template> | ||
76 | </ngb-panel> | ||
77 | |||
78 | <ngb-panel *ngIf="aboutHtml.moderationInformation" id="moderation-information" i18n-title title="Moderation information"> | ||
79 | <ng-template ngbPanelContent> | ||
80 | <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div> | ||
81 | </ng-template> | ||
82 | </ngb-panel> | ||
83 | |||
84 | <ngb-panel *ngIf="aboutHtml.codeOfConduct" id="code-of-conduct" i18n-title title="Code of conduct"> | ||
85 | <ng-template ngbPanelContent> | ||
86 | <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div> | ||
87 | </ng-template> | ||
88 | </ngb-panel> | ||
89 | |||
90 | <ngb-panel *ngIf="aboutHtml.terms" id="terms" i18n-title title="Terms"> | ||
91 | <ng-template ngbPanelContent> | ||
92 | <div class="block" [innerHTML]="aboutHtml.terms"></div> | ||
93 | </ng-template> | ||
94 | </ngb-panel> | ||
95 | </ng-container> | ||
96 | </ngb-accordion> | ||
97 | </div> | ||
98 | </div> | 53 | </div> |
99 | 54 | ||
100 | </div> | 55 | </div> |