aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/+about
diff options
context:
space:
mode:
authorKimsible <kimsible@users.noreply.github.com>2021-06-04 14:42:05 +0200
committerChocobozzz <chocobozzz@cpy.re>2021-06-15 14:15:10 +0200
commitdfca0f5fc232a1476d4b7296404fb91dbd60b96b (patch)
tree3037c66a66acae4c27880dc6a73468f82680b3fe /client/src/app/+about
parenteae0365b5c5468e51e9795b0e894815ebda86b4a (diff)
downloadPeerTube-dfca0f5fc232a1476d4b7296404fb91dbd60b96b.tar.gz
PeerTube-dfca0f5fc232a1476d4b7296404fb91dbd60b96b.tar.zst
PeerTube-dfca0f5fc232a1476d4b7296404fb91dbd60b96b.zip
Add /about/instance/contact contact-form route with prefilled queryParams subject&body
Diffstat (limited to 'client/src/app/+about')
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.html4
-rw-r--r--client/src/app/+about/about-instance/about-instance.component.ts5
-rw-r--r--client/src/app/+about/about-instance/contact-admin-modal.component.ts68
-rw-r--r--client/src/app/+about/about-routing.module.ts9
4 files changed, 74 insertions, 12 deletions
diff --git a/client/src/app/+about/about-instance/about-instance.component.html b/client/src/app/+about/about-instance/about-instance.component.html
index 29dfd89fb..a42bda845 100644
--- a/client/src/app/+about/about-instance/about-instance.component.html
+++ b/client/src/app/+about/about-instance/about-instance.component.html
@@ -4,7 +4,7 @@
4 <div class="about-instance-title"> 4 <div class="about-instance-title">
5 <h1 i18n class="title">About {{ instanceName }}</h1> 5 <h1 i18n class="title">About {{ instanceName }}</h1>
6 6
7 <button i18n *ngIf="isContactFormEnabled" (click)="openContactModal()" (keydown.enter)="openContactModal()" class="contact-admin">Contact administrator</button> 7 <a routerLink="contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact administrator</a>
8 </div> 8 </div>
9 9
10 <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0"> 10 <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
@@ -218,4 +218,4 @@
218 </div> 218 </div>
219</div> 219</div>
220 220
221<my-contact-admin-modal #contactAdminModal></my-contact-admin-modal> 221<my-contact-admin-modal></my-contact-admin-modal>
diff --git a/client/src/app/+about/about-instance/about-instance.component.ts b/client/src/app/+about/about-instance/about-instance.component.ts
index f02048f39..ffb4294ab 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -16,7 +16,6 @@ import { ResolverData } from './about-instance.resolver'
16}) 16})
17export class AboutInstanceComponent implements OnInit, AfterViewChecked { 17export class AboutInstanceComponent implements OnInit, AfterViewChecked {
18 @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef<HTMLInputElement> 18 @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef<HTMLInputElement>
19 @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent
20 19
21 shortDescription = '' 20 shortDescription = ''
22 descriptionContent: string 21 descriptionContent: string
@@ -85,10 +84,6 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
85 } 84 }
86 } 85 }
87 86
88 openContactModal () {
89 return this.contactAdminModal.show()
90 }
91
92 onClickCopyLink (anchor: HTMLAnchorElement) { 87 onClickCopyLink (anchor: HTMLAnchorElement) {
93 const link = anchor.href 88 const link = anchor.href
94 copyToClipboard(link) 89 copyToClipboard(link)
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.ts b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
index adbe7fe9a..32812d9e0 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.ts
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.ts
@@ -1,4 +1,7 @@
1import { Component, OnInit, ViewChild } from '@angular/core' 1import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'
2import { ActivatedRoute, Router, NavigationEnd } from '@angular/router'
3import { Subject } from 'rxjs'
4import { takeUntil, filter } from 'rxjs/operators'
2import { Notifier, ServerService } from '@app/core' 5import { Notifier, ServerService } from '@app/core'
3import { 6import {
4 BODY_VALIDATOR, 7 BODY_VALIDATOR,
@@ -18,10 +21,13 @@ import { HTMLServerConfig } from '@shared/models'
18 templateUrl: './contact-admin-modal.component.html', 21 templateUrl: './contact-admin-modal.component.html',
19 styleUrls: [ './contact-admin-modal.component.scss' ] 22 styleUrls: [ './contact-admin-modal.component.scss' ]
20}) 23})
21export class ContactAdminModalComponent extends FormReactive implements OnInit { 24export class ContactAdminModalComponent extends FormReactive implements OnInit, OnDestroy {
22 @ViewChild('modal', { static: true }) modal: NgbModal 25 @ViewChild('modal', { static: true }) modal: NgbModal
23 26
24 error: string 27 error: string
28 destroy = new Subject<any>()
29
30 subject: string
25 31
26 private openedModal: NgbModalRef 32 private openedModal: NgbModalRef
27 private serverConfig: HTMLServerConfig 33 private serverConfig: HTMLServerConfig
@@ -31,7 +37,9 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
31 private modalService: NgbModal, 37 private modalService: NgbModal,
32 private instanceService: InstanceService, 38 private instanceService: InstanceService,
33 private serverService: ServerService, 39 private serverService: ServerService,
34 private notifier: Notifier 40 private notifier: Notifier,
41 private route: ActivatedRoute,
42 private router: Router
35 ) { 43 ) {
36 super() 44 super()
37 } 45 }
@@ -40,6 +48,10 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
40 return this.serverConfig.instance.name 48 return this.serverConfig.instance.name
41 } 49 }
42 50
51 get isContactFormEnabled () {
52 return this.serverConfig.email.enabled && this.serverConfig.contactForm.enabled
53 }
54
43 ngOnInit () { 55 ngOnInit () {
44 this.serverConfig = this.serverService.getHTMLConfig() 56 this.serverConfig = this.serverService.getHTMLConfig()
45 57
@@ -49,10 +61,46 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
49 subject: SUBJECT_VALIDATOR, 61 subject: SUBJECT_VALIDATOR,
50 body: BODY_VALIDATOR 62 body: BODY_VALIDATOR
51 }) 63 })
64
65 // Direct access
66 if (/^\/about\/instance\/contact/.test(this.router.url)) {
67 this.show()
68 this.prefillForm()
69 }
70
71 // Router access
72 this.router.events
73 .pipe(
74 takeUntil(this.destroy),
75 filter(event => event instanceof NavigationEnd)
76 )
77 .subscribe((event: NavigationEnd) => {
78 if (/^\/about\/instance\/contact/.test(event.url)) {
79 this.show()
80 this.prefillForm()
81 }
82 })
83 }
84
85 ngOnDestroy () {
86 this.destroy.next()
52 } 87 }
53 88
54 show () { 89 show () {
90 // If contactForm not enabled redirect to 404
91 if (!this.isContactFormEnabled) {
92 return this.router.navigate([ '/404' ], { state: { type: 'other', obj: { status: 404 } }, skipLocationChange: true })
93 }
94
95 // Open modal
55 this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false }) 96 this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false })
97
98 // Go back to /about/instance after the modal is closed
99 this.openedModal.result.then(() => {
100 this.router.navigateByUrl('/about/instance')
101 }, () => {
102 this.router.navigateByUrl('/about/instance')
103 })
56 } 104 }
57 105
58 hide () { 106 hide () {
@@ -64,7 +112,7 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
64 } 112 }
65 113
66 sendForm () { 114 sendForm () {
67 const fromName = this.form.value['fromName'] 115 const fromName = this.form.value[ 'fromName' ]
68 const fromEmail = this.form.value[ 'fromEmail' ] 116 const fromEmail = this.form.value[ 'fromEmail' ]
69 const subject = this.form.value[ 'subject' ] 117 const subject = this.form.value[ 'subject' ]
70 const body = this.form.value[ 'body' ] 118 const body = this.form.value[ 'body' ]
@@ -83,4 +131,16 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit {
83 } 131 }
84 ) 132 )
85 } 133 }
134
135 private prefillForm () {
136 const { subject, body } = this.route.snapshot.queryParams
137
138 if (subject) {
139 this.form.get('subject').setValue(subject)
140 }
141
142 if (body) {
143 this.form.get('body').setValue(body)
144 }
145 }
86} 146}
diff --git a/client/src/app/+about/about-routing.module.ts b/client/src/app/+about/about-routing.module.ts
index 880bf4a39..c810ca272 100644
--- a/client/src/app/+about/about-routing.module.ts
+++ b/client/src/app/+about/about-routing.module.ts
@@ -3,6 +3,7 @@ import { RouterModule, Routes } from '@angular/router'
3import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component' 3import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component'
4import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component' 4import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component'
5import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver' 5import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver'
6import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
6import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component' 7import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component'
7import { AboutComponent } from './about.component' 8import { AboutComponent } from './about.component'
8 9
@@ -26,7 +27,13 @@ const aboutRoutes: Routes = [
26 }, 27 },
27 resolve: { 28 resolve: {
28 instanceData: AboutInstanceResolver 29 instanceData: AboutInstanceResolver
29 } 30 },
31 children: [
32 {
33 path: 'contact',
34 component: ContactAdminModalComponent
35 }
36 ]
30 }, 37 },
31 { 38 {
32 path: 'peertube', 39 path: 'peertube',