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/shared | |
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/shared')
6 files changed, 178 insertions, 4 deletions
diff --git a/client/src/app/shared/form-validators/user-validators.ts b/client/src/app/shared/form-validators/user-validators.ts index 115930146..a27290035 100644 --- a/client/src/app/shared/form-validators/user-validators.ts +++ b/client/src/app/shared/form-validators/user-validators.ts | |||
@@ -115,9 +115,7 @@ export const USER_DESCRIPTION_VALIDATOR: BuildFormValidator = { | |||
115 | } | 115 | } |
116 | 116 | ||
117 | export const USER_TERMS_VALIDATOR: BuildFormValidator = { | 117 | export const USER_TERMS_VALIDATOR: BuildFormValidator = { |
118 | VALIDATORS: [ | 118 | VALIDATORS: [ Validators.requiredTrue ], |
119 | Validators.requiredTrue | ||
120 | ], | ||
121 | MESSAGES: { | 119 | MESSAGES: { |
122 | 'required': $localize`You must agree with the instance terms in order to register on it.` | 120 | 'required': $localize`You must agree with the instance terms in order to register on it.` |
123 | } | 121 | } |
diff --git a/client/src/app/shared/shared-instance/index.ts b/client/src/app/shared/shared-instance/index.ts index 1aeed357e..d7172f7b6 100644 --- a/client/src/app/shared/shared-instance/index.ts +++ b/client/src/app/shared/shared-instance/index.ts | |||
@@ -1,4 +1,5 @@ | |||
1 | export * from './feature-boolean.component' | 1 | export * from './feature-boolean.component' |
2 | export * from './instance-about-accordion.component' | ||
2 | export * from './instance-features-table.component' | 3 | export * from './instance-features-table.component' |
3 | export * from './instance-follow.service' | 4 | export * from './instance-follow.service' |
4 | export * from './instance-statistics.component' | 5 | export * from './instance-statistics.component' |
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.html b/client/src/app/shared/shared-instance/instance-about-accordion.component.html new file mode 100644 index 000000000..e91e44656 --- /dev/null +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.html | |||
@@ -0,0 +1,53 @@ | |||
1 | <h2 class="instance-name">{{ about?.instance.name }}</h2> | ||
2 | |||
3 | <div class="instance-short-description">{{ about?.instance.shortDescription }}</div> | ||
4 | |||
5 | <ngb-accordion #accordion="ngbAccordion" [closeOthers]="true"> | ||
6 | <ngb-panel *ngIf="panels.features" id="instance-features" i18n-title title="Features found on this instance"> | ||
7 | <ng-template ngbPanelContent> | ||
8 | <my-instance-features-table></my-instance-features-table> | ||
9 | </ng-template> | ||
10 | </ngb-panel> | ||
11 | |||
12 | <ng-container *ngIf="about"> | ||
13 | <ngb-panel | ||
14 | *ngIf="getAdministratorsPanel()" | ||
15 | id="admin-sustainability" i18n-title title="Administrators & Sustainability" | ||
16 | > | ||
17 | <ng-template ngbPanelContent> | ||
18 | <div class="block"> | ||
19 | <strong i18n>Who are we?</strong> | ||
20 | <div [innerHTML]="aboutHtml.administrator"></div> | ||
21 | </div> | ||
22 | |||
23 | <div class="block"> | ||
24 | <strong i18n>How long do we plan to maintain this instance?</strong> | ||
25 | <div [innerHTML]="about.instance.maintenanceLifetime"></div> | ||
26 | </div> | ||
27 | |||
28 | <div class="block"> | ||
29 | <strong i18n>How will we finance this instance?</strong> | ||
30 | <div [innerHTML]="about.instance.businessModel"></div> | ||
31 | </div> | ||
32 | </ng-template> | ||
33 | </ngb-panel> | ||
34 | |||
35 | <ngb-panel *ngIf="termsPanel" id="terms" i18n-title title="Terms"> | ||
36 | <ng-template ngbPanelContent> | ||
37 | <div class="block" [innerHTML]="aboutHtml.terms"></div> | ||
38 | </ng-template> | ||
39 | </ngb-panel> | ||
40 | |||
41 | <ngb-panel *ngIf="moderationPanel" id="moderation-information" i18n-title title="Moderation information"> | ||
42 | <ng-template ngbPanelContent> | ||
43 | <div class="block" [innerHTML]="aboutHtml.moderationInformation"></div> | ||
44 | </ng-template> | ||
45 | </ngb-panel> | ||
46 | |||
47 | <ngb-panel *ngIf="codeOfConductPanel" id="code-of-conduct" i18n-title title="Code of conduct"> | ||
48 | <ng-template ngbPanelContent> | ||
49 | <div class="block" [innerHTML]="aboutHtml.codeOfConduct"></div> | ||
50 | </ng-template> | ||
51 | </ngb-panel> | ||
52 | </ng-container> | ||
53 | </ngb-accordion> | ||
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.scss b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss new file mode 100644 index 000000000..275600d60 --- /dev/null +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.scss | |||
@@ -0,0 +1,46 @@ | |||
1 | @import '_variables'; | ||
2 | @import '_mixins'; | ||
3 | @import "./_bootstrap-variables"; | ||
4 | |||
5 | @import '~bootstrap/scss/functions'; | ||
6 | @import '~bootstrap/scss/variables'; | ||
7 | |||
8 | .instance-name { | ||
9 | line-height: 1.7rem; | ||
10 | } | ||
11 | |||
12 | .instance-short-description { | ||
13 | @include ellipsis-multiline(1rem, 3); | ||
14 | |||
15 | margin-top: 20px; | ||
16 | margin-bottom: 20px; | ||
17 | } | ||
18 | |||
19 | .block { | ||
20 | font-size: 15px; | ||
21 | margin-bottom: 15px; | ||
22 | padding: 0 $btn-padding-x; | ||
23 | } | ||
24 | |||
25 | ngb-accordion ::ng-deep { | ||
26 | .card { | ||
27 | border-color: var(--mainBackgroundColor); | ||
28 | |||
29 | .card-header { | ||
30 | background-color: unset; | ||
31 | padding: 0; | ||
32 | |||
33 | & + .collapse.show { | ||
34 | background-color: var(--submenuColor); | ||
35 | } | ||
36 | } | ||
37 | } | ||
38 | |||
39 | .btn { | ||
40 | @include peertube-button; | ||
41 | @include grey-button; | ||
42 | |||
43 | border-radius: unset; | ||
44 | width: 100%; | ||
45 | } | ||
46 | } | ||
diff --git a/client/src/app/shared/shared-instance/instance-about-accordion.component.ts b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts new file mode 100644 index 000000000..ab75c31ae --- /dev/null +++ b/client/src/app/shared/shared-instance/instance-about-accordion.component.ts | |||
@@ -0,0 +1,71 @@ | |||
1 | import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core' | ||
2 | import { NgbAccordion } from '@ng-bootstrap/ng-bootstrap' | ||
3 | import { InstanceService } from './instance.service' | ||
4 | import { Notifier } from '@app/core' | ||
5 | import { About } from '@shared/models/server' | ||
6 | |||
7 | @Component({ | ||
8 | selector: 'my-instance-about-accordion', | ||
9 | templateUrl: './instance-about-accordion.component.html', | ||
10 | styleUrls: ['./instance-about-accordion.component.scss'] | ||
11 | }) | ||
12 | export class InstanceAboutAccordionComponent implements OnInit { | ||
13 | @ViewChild('accordion', { static: true }) accordion: NgbAccordion | ||
14 | @Output() init: EventEmitter<InstanceAboutAccordionComponent> = new EventEmitter<InstanceAboutAccordionComponent>() | ||
15 | |||
16 | @Input() panels = { | ||
17 | features: true, | ||
18 | administrators: true, | ||
19 | moderation: true, | ||
20 | codeOfConduct: true, | ||
21 | terms: true | ||
22 | } | ||
23 | |||
24 | about: About | ||
25 | aboutHtml = { | ||
26 | description: '', | ||
27 | terms: '', | ||
28 | codeOfConduct: '', | ||
29 | moderationInformation: '', | ||
30 | administrator: '' | ||
31 | } | ||
32 | |||
33 | constructor ( | ||
34 | private instanceService: InstanceService, | ||
35 | private notifier: Notifier | ||
36 | ) { } | ||
37 | |||
38 | ngOnInit (): void { | ||
39 | this.instanceService.getAbout() | ||
40 | .subscribe( | ||
41 | async about => { | ||
42 | this.about = about | ||
43 | |||
44 | this.aboutHtml = await this.instanceService.buildHtml(about) | ||
45 | |||
46 | this.init.emit(this) | ||
47 | }, | ||
48 | |||
49 | err => this.notifier.error(err.message) | ||
50 | ) | ||
51 | } | ||
52 | |||
53 | getAdministratorsPanel () { | ||
54 | if (!this.about) return false | ||
55 | if (!this.panels.administrators) return false | ||
56 | |||
57 | return !!(this.aboutHtml?.administrator || this.about?.instance.maintenanceLifetime || this.about?.instance.businessModel) | ||
58 | } | ||
59 | |||
60 | get moderationPanel () { | ||
61 | return this.panels.moderation && !!this.aboutHtml.moderationInformation | ||
62 | } | ||
63 | |||
64 | get codeOfConductPanel () { | ||
65 | return this.panels.codeOfConduct && !!this.aboutHtml.codeOfConduct | ||
66 | } | ||
67 | |||
68 | get termsPanel () { | ||
69 | return this.panels.terms && !!this.aboutHtml.terms | ||
70 | } | ||
71 | } | ||
diff --git a/client/src/app/shared/shared-instance/shared-instance.module.ts b/client/src/app/shared/shared-instance/shared-instance.module.ts index b75ad1a12..13c681ab8 100644 --- a/client/src/app/shared/shared-instance/shared-instance.module.ts +++ b/client/src/app/shared/shared-instance/shared-instance.module.ts | |||
@@ -1,7 +1,9 @@ | |||
1 | 1 | ||
2 | import { NgModule } from '@angular/core' | 2 | import { NgModule } from '@angular/core' |
3 | import { NgbAccordionModule } from '@ng-bootstrap/ng-bootstrap' | ||
3 | import { SharedMainModule } from '../shared-main/shared-main.module' | 4 | import { SharedMainModule } from '../shared-main/shared-main.module' |
4 | import { FeatureBooleanComponent } from './feature-boolean.component' | 5 | import { FeatureBooleanComponent } from './feature-boolean.component' |
6 | import { InstanceAboutAccordionComponent } from './instance-about-accordion.component' | ||
5 | import { InstanceFeaturesTableComponent } from './instance-features-table.component' | 7 | import { InstanceFeaturesTableComponent } from './instance-features-table.component' |
6 | import { InstanceFollowService } from './instance-follow.service' | 8 | import { InstanceFollowService } from './instance-follow.service' |
7 | import { InstanceStatisticsComponent } from './instance-statistics.component' | 9 | import { InstanceStatisticsComponent } from './instance-statistics.component' |
@@ -9,17 +11,20 @@ import { InstanceService } from './instance.service' | |||
9 | 11 | ||
10 | @NgModule({ | 12 | @NgModule({ |
11 | imports: [ | 13 | imports: [ |
12 | SharedMainModule | 14 | SharedMainModule, |
15 | NgbAccordionModule | ||
13 | ], | 16 | ], |
14 | 17 | ||
15 | declarations: [ | 18 | declarations: [ |
16 | FeatureBooleanComponent, | 19 | FeatureBooleanComponent, |
20 | InstanceAboutAccordionComponent, | ||
17 | InstanceFeaturesTableComponent, | 21 | InstanceFeaturesTableComponent, |
18 | InstanceStatisticsComponent | 22 | InstanceStatisticsComponent |
19 | ], | 23 | ], |
20 | 24 | ||
21 | exports: [ | 25 | exports: [ |
22 | FeatureBooleanComponent, | 26 | FeatureBooleanComponent, |
27 | InstanceAboutAccordionComponent, | ||
23 | InstanceFeaturesTableComponent, | 28 | InstanceFeaturesTableComponent, |
24 | InstanceStatisticsComponent | 29 | InstanceStatisticsComponent |
25 | ], | 30 | ], |