aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/modal
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2019-08-28 15:46:56 +0200
committerChocobozzz <chocobozzz@cpy.re>2019-09-05 10:17:02 +0200
commit589d9f55f6f3f0d069d4bbb207d3d20769cc4ded (patch)
tree0826bda439beb523e458513672a3d06c924e1760 /client/src/app/modal
parent43d0ea7f4b88d52097172cc0c1831edd7e492503 (diff)
downloadPeerTube-589d9f55f6f3f0d069d4bbb207d3d20769cc4ded.tar.gz
PeerTube-589d9f55f6f3f0d069d4bbb207d3d20769cc4ded.tar.zst
PeerTube-589d9f55f6f3f0d069d4bbb207d3d20769cc4ded.zip
Add config instance warning modal
Diffstat (limited to 'client/src/app/modal')
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.html29
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.scss14
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.ts29
-rw-r--r--client/src/app/modal/welcome-modal.component.html26
-rw-r--r--client/src/app/modal/welcome-modal.component.scss4
-rw-r--r--client/src/app/modal/welcome-modal.component.ts2
6 files changed, 80 insertions, 24 deletions
diff --git a/client/src/app/modal/instance-config-warning-modal.component.html b/client/src/app/modal/instance-config-warning-modal.component.html
index 595afb103..f9e07333a 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.html
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -1,14 +1,41 @@
1<ng-template #modal let-hide="close"> 1<ng-template #modal let-hide="close">
2 <div class="modal-header"> 2 <div class="modal-header">
3 <h4 i18n class="modal-title">Warning!</h4> 3 <h4 i18n class="modal-title">Configuration warning!</h4>
4 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon> 4 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
5 </div> 5 </div>
6 6
7 <div class="modal-body"> 7 <div class="modal-body">
8 8
9 <p i18n>Hello dear administrator. You enabled user registration on your instance but you did not configure the following fields:</p>
10
11 <ul>
12 <li i18n *ngIf="about.instance.name.toLowerCase() === 'peertube'">Instance name</li>
13 <li i18n *ngIf="about.instance.shortDescription">Instance short description</li>
14
15 <li i18n *ngIf="!about.instance.administrator">Who you are</li>
16 <li i18n *ngIf="!about.instance.maintenanceLifetime">How long you plan to maintain your instance</li>
17 <li i18n *ngIf="!about.instance.businessModel">How you plan to pay your instance</li>
18
19 <li i18n *ngIf="!about.instance.moderationInformation">How you will moderate your instance</li>
20 <li i18n *ngIf="!about.instance.terms">Instance terms</li>
21 </ul>
22
23 <p>Please consider to configure these fields to help people to choose <strong>the appropriate instance</strong>.</p>
24
25 <div class="configure-instance">
26 <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure these fields</a>
27 </div>
28
9 </div> 29 </div>
10 30
11 <div class="modal-footer inputs"> 31 <div class="modal-footer inputs">
32 <my-peertube-checkbox
33 inputName="stopDisplayModal" [(ngModel)]="stopDisplayModal"
34 i18n-labelText labelText="Don't show me this warning anymore"
35 >
36
37 </my-peertube-checkbox>
38
12 <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span> 39 <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
13 </div> 40 </div>
14 41
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
index 51834c649..5888736c1 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.scss
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -4,3 +4,17 @@
4.action-button-cancel { 4.action-button-cancel {
5 margin-right: 0 !important; 5 margin-right: 0 !important;
6} 6}
7
8.modal-body {
9 font-size: 15px;
10}
11
12li {
13 margin-bottom: 10px;
14}
15
16.configure-instance {
17 text-align: center;
18 font-weight: 600;
19 font-size: 18px;
20}
diff --git a/client/src/app/modal/instance-config-warning-modal.component.ts b/client/src/app/modal/instance-config-warning-modal.component.ts
index 5cc9207cd..08d83f383 100644
--- a/client/src/app/modal/instance-config-warning-modal.component.ts
+++ b/client/src/app/modal/instance-config-warning-modal.component.ts
@@ -1,7 +1,8 @@
1import { Component, ElementRef, ViewChild } from '@angular/core' 1import { Component, ElementRef, ViewChild } from '@angular/core'
2import { Notifier } from '@app/core' 2import { Notifier } from '@app/core'
3import { I18n } from '@ngx-translate/i18n-polyfill'
4import { NgbModal } from '@ng-bootstrap/ng-bootstrap' 3import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
4import { About } from '@shared/models/server'
5import { UserService } from '@app/shared'
5 6
6@Component({ 7@Component({
7 selector: 'my-instance-config-warning-modal', 8 selector: 'my-instance-config-warning-modal',
@@ -11,13 +12,31 @@ import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
11export class InstanceConfigWarningModalComponent { 12export class InstanceConfigWarningModalComponent {
12 @ViewChild('modal', { static: true }) modal: ElementRef 13 @ViewChild('modal', { static: true }) modal: ElementRef
13 14
15 stopDisplayModal = false
16 about: About
17
14 constructor ( 18 constructor (
19 private userService: UserService,
15 private modalService: NgbModal, 20 private modalService: NgbModal,
16 private notifier: Notifier, 21 private notifier: Notifier
17 private i18n: I18n
18 ) { } 22 ) { }
19 23
20 show () { 24 show (about: About) {
21 this.modalService.open(this.modal) 25 this.about = about
26
27 const ref = this.modalService.open(this.modal)
28
29 ref.result.finally(() => {
30 if (this.stopDisplayModal === true) this.doNotOpenAgain()
31 })
32 }
33
34 private doNotOpenAgain () {
35 this.userService.updateMyProfile({ noInstanceConfigWarningModal: true })
36 .subscribe(
37 () => console.log('We will not open the instance config warning modal again.'),
38
39 err => this.notifier.error(err.message)
40 )
22 } 41 }
23} 42}
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
index c83b53c2c..79e6d4667 100644
--- a/client/src/app/modal/welcome-modal.component.html
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -7,24 +7,24 @@
7 <div class="modal-body"> 7 <div class="modal-body">
8 8
9 <div class="block-links"> 9 <div class="block-links">
10 <div class="subtitle">Useful links</div> 10 <div i18n class="subtitle">Useful links</div>
11 11
12 <ul> 12 <ul>
13 <li> 13 <li i18n>
14 Official PeerTube website: <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a> 14 Official PeerTube website: <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a>
15 </li> 15 </li>
16 16
17 <li> 17 <li i18n>
18 Discover CLI PeerTube tools (to upload or import videos, parse logs, prune storage directories, reset user password...): 18 Discover CLI PeerTube tools (to upload or import videos, parse logs, prune storage directories, reset user password...):
19 <a href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/maintain-tools</a> 19 <a href="https://docs.joinpeertube.org/#/maintain-tools" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/maintain-tools</a>
20 </li> 20 </li>
21 21
22 <li> 22 <li i18n>
23 Understand how to administer your instance (managing users, following other instances, dealing with spammers...): 23 Understand how to administer your instance (managing users, following other instances, dealing with spammers...):
24 <a href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/admin-following-instances</a> 24 <a href="https://docs.joinpeertube.org/#/admin-following-instances" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/admin-following-instances</a>
25 </li> 25 </li>
26 26
27 <li> 27 <li i18n>
28 Learn how to use PeerTube (setup your account, managing video playlists, discover third-party applications...): 28 Learn how to use PeerTube (setup your account, managing video playlists, discover third-party applications...):
29 <a href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/use-setup-account</a> 29 <a href="https://docs.joinpeertube.org/#/use-setup-account" target="_blank" rel="noopener noreferrer">https://docs.joinpeertube.org/#/use-setup-account</a>
30 </li> 30 </li>
@@ -32,30 +32,32 @@
32 </div> 32 </div>
33 33
34 <div class="block-configuration"> 34 <div class="block-configuration">
35 <div class="subtitle">Configure your instance</div> 35 <div i18n class="subtitle">Configure your instance</div>
36 36
37 <p> 37 <p i18n>
38 Now it's time to configure your instance! Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>, 38 Now it's time to configure your instance! Choosing your <strong>instance name</strong>, <strong>setting up a description</strong>,
39 specifying <strong>who you are</strong> and <strong>how long</strong> you plan to <strong>maintain your instance</strong> 39 specifying <strong>who you are</strong> and <strong>how long</strong> you plan to <strong>maintain your instance</strong>
40 is very important for visitors to understand on what type of instance they are. 40 is very important for visitors to understand on what type of instance they are.
41 </p> 41 </p>
42 42
43 <p> 43 <p i18n>
44 If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance terms</strong> 44 If you want to open registrations, please decide what are <strong>your moderation rules</strong>, fill your <strong>instance terms</strong>
45 and specify the categories and languages you speak. This way, users that are looking for a PeerTube instance on which they can register 45 and specify the categories and languages you speak. This way, users that are looking for a PeerTube instance on which they can register
46 will be able to choose <strong>the right one</strong>. 46 will be able to choose <strong>the right one</strong>.
47 </p> 47 </p>
48 48
49 <div class="configure-instance"> 49 <div class="configure-instance">
50 <a href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure your instance</a> 50 <a i18n href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure your instance</a>
51 </div> 51 </div>
52 </div> 52 </div>
53 53
54 <div class="block-instance"> 54 <div class="block-instance">
55 <div class="subtitle">Index your instance</div> 55 <div i18n class="subtitle">Index your instance</div>
56 56
57 If you want, you can index your PeerTube instance on the public PeerTube instances list: 57 <ng-container i18n>
58 <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a> 58 If you want, you can index your PeerTube instance on the public PeerTube instances list:
59 <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
60 </ng-container>
59 </div> 61 </div>
60 </div> 62 </div>
61 63
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
index ab57bb993..a59c5b7a9 100644
--- a/client/src/app/modal/welcome-modal.component.scss
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -5,10 +5,6 @@
5 font-size: 15px; 5 font-size: 15px;
6} 6}
7 7
8.action-button-cancel {
9 margin-right: 0 !important;
10}
11
12.subtitle { 8.subtitle {
13 font-weight: $font-semibold; 9 font-weight: $font-semibold;
14 margin-bottom: 10px; 10 margin-bottom: 10px;
diff --git a/client/src/app/modal/welcome-modal.component.ts b/client/src/app/modal/welcome-modal.component.ts
index bff2968d4..05412a4cd 100644
--- a/client/src/app/modal/welcome-modal.component.ts
+++ b/client/src/app/modal/welcome-modal.component.ts
@@ -34,7 +34,5 @@ export class WelcomeModalComponent {
34 34
35 err => this.notifier.error(err.message) 35 err => this.notifier.error(err.message)
36 ) 36 )
37
38 return true
39 } 37 }
40} 38}