aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/modal
diff options
context:
space:
mode:
Diffstat (limited to 'client/src/app/modal')
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.html15
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.scss6
-rw-r--r--client/src/app/modal/instance-config-warning-modal.component.ts23
-rw-r--r--client/src/app/modal/welcome-modal.component.html66
-rw-r--r--client/src/app/modal/welcome-modal.component.scss31
-rw-r--r--client/src/app/modal/welcome-modal.component.ts40
6 files changed, 181 insertions, 0 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
new file mode 100644
index 000000000..595afb103
--- /dev/null
+++ b/client/src/app/modal/instance-config-warning-modal.component.html
@@ -0,0 +1,15 @@
1<ng-template #modal let-hide="close">
2 <div class="modal-header">
3 <h4 i18n class="modal-title">Warning!</h4>
4 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
5 </div>
6
7 <div class="modal-body">
8
9 </div>
10
11 <div class="modal-footer inputs">
12 <span i18n class="action-button action-button-cancel" (click)="hide()">Close</span>
13 </div>
14
15</ng-template>
diff --git a/client/src/app/modal/instance-config-warning-modal.component.scss b/client/src/app/modal/instance-config-warning-modal.component.scss
new file mode 100644
index 000000000..51834c649
--- /dev/null
+++ b/client/src/app/modal/instance-config-warning-modal.component.scss
@@ -0,0 +1,6 @@
1@import '_mixins';
2@import '_variables';
3
4.action-button-cancel {
5 margin-right: 0 !important;
6}
diff --git a/client/src/app/modal/instance-config-warning-modal.component.ts b/client/src/app/modal/instance-config-warning-modal.component.ts
new file mode 100644
index 000000000..5cc9207cd
--- /dev/null
+++ b/client/src/app/modal/instance-config-warning-modal.component.ts
@@ -0,0 +1,23 @@
1import { Component, ElementRef, ViewChild } from '@angular/core'
2import { Notifier } from '@app/core'
3import { I18n } from '@ngx-translate/i18n-polyfill'
4import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
5
6@Component({
7 selector: 'my-instance-config-warning-modal',
8 templateUrl: './instance-config-warning-modal.component.html',
9 styleUrls: [ './instance-config-warning-modal.component.scss' ]
10})
11export class InstanceConfigWarningModalComponent {
12 @ViewChild('modal', { static: true }) modal: ElementRef
13
14 constructor (
15 private modalService: NgbModal,
16 private notifier: Notifier,
17 private i18n: I18n
18 ) { }
19
20 show () {
21 this.modalService.open(this.modal)
22 }
23}
diff --git a/client/src/app/modal/welcome-modal.component.html b/client/src/app/modal/welcome-modal.component.html
new file mode 100644
index 000000000..c83b53c2c
--- /dev/null
+++ b/client/src/app/modal/welcome-modal.component.html
@@ -0,0 +1,66 @@
1<ng-template #modal let-hide="close">
2 <div class="modal-header">
3 <h4 i18n class="modal-title">Welcome on PeerTube dear administrator!</h4>
4 <my-global-icon iconName="cross" aria-label="Close" role="button" (click)="hide()"></my-global-icon>
5 </div>
6
7 <div class="modal-body">
8
9 <div class="block-links">
10 <div class="subtitle">Useful links</div>
11
12 <ul>
13 <li>
14 Official PeerTube website: <a href="https://joinpeertube.org" target="_blank" rel="noopener noreferrer">https://joinpeertube.org</a>
15 </li>
16
17 <li>
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>
20 </li>
21
22 <li>
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>
25 </li>
26
27 <li>
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>
30 </li>
31 </ul>
32 </div>
33
34 <div class="block-configuration">
35 <div class="subtitle">Configure your instance</div>
36
37 <p>
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>
40 is very important for visitors to understand on what type of instance they are.
41 </p>
42
43 <p>
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
46 will be able to choose <strong>the right one</strong>.
47 </p>
48
49 <div class="configure-instance">
50 <a href="/admin/config/edit-custom" target="_blank" rel="noopener noreferrer">Configure your instance</a>
51 </div>
52 </div>
53
54 <div class="block-instance">
55 <div class="subtitle">Index your instance</div>
56
57 If you want, you can index your PeerTube instance on the public PeerTube instances list:
58 <a href="https://instances.joinpeertube.org/instances">https://instances.joinpeertube.org/instances</a>
59 </div>
60 </div>
61
62 <div class="modal-footer inputs">
63 <span i18n class="action-button action-button-submit" (click)="hide()">Understood!</span>
64 </div>
65
66</ng-template>
diff --git a/client/src/app/modal/welcome-modal.component.scss b/client/src/app/modal/welcome-modal.component.scss
new file mode 100644
index 000000000..ab57bb993
--- /dev/null
+++ b/client/src/app/modal/welcome-modal.component.scss
@@ -0,0 +1,31 @@
1@import '_mixins';
2@import '_variables';
3
4.modal-body {
5 font-size: 15px;
6}
7
8.action-button-cancel {
9 margin-right: 0 !important;
10}
11
12.subtitle {
13 font-weight: $font-semibold;
14 margin-bottom: 10px;
15 font-size: 16px;
16}
17
18.block-configuration,
19.block-instance {
20 margin-top: 30px;
21}
22
23li {
24 margin-bottom: 10px;
25}
26
27.configure-instance {
28 text-align: center;
29 font-weight: 600;
30 font-size: 18px;
31}
diff --git a/client/src/app/modal/welcome-modal.component.ts b/client/src/app/modal/welcome-modal.component.ts
new file mode 100644
index 000000000..bff2968d4
--- /dev/null
+++ b/client/src/app/modal/welcome-modal.component.ts
@@ -0,0 +1,40 @@
1import { Component, ElementRef, ViewChild } from '@angular/core'
2import { Notifier } from '@app/core'
3import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
4import { UserService } from '@app/shared'
5
6@Component({
7 selector: 'my-welcome-modal',
8 templateUrl: './welcome-modal.component.html',
9 styleUrls: [ './welcome-modal.component.scss' ]
10})
11export class WelcomeModalComponent {
12 @ViewChild('modal', { static: true }) modal: ElementRef
13
14 constructor (
15 private userService: UserService,
16 private modalService: NgbModal,
17 private notifier: Notifier
18 ) { }
19
20 show () {
21 const ref = this.modalService.open(this.modal,{
22 backdrop: 'static',
23 keyboard: false,
24 size: 'lg'
25 })
26
27 ref.result.finally(() => this.doNotOpenAgain())
28 }
29
30 private doNotOpenAgain () {
31 this.userService.updateMyProfile({ noWelcomeModal: true })
32 .subscribe(
33 () => console.log('We will not open the welcome modal again.'),
34
35 err => this.notifier.error(err.message)
36 )
37
38 return true
39 }
40}