From dfca0f5fc232a1476d4b7296404fb91dbd60b96b Mon Sep 17 00:00:00 2001 From: Kimsible Date: Fri, 4 Jun 2021 14:42:05 +0200 Subject: Add /about/instance/contact contact-form route with prefilled queryParams subject&body --- .../about-instance/about-instance.component.html | 4 +- .../about-instance/about-instance.component.ts | 5 -- .../contact-admin-modal.component.ts | 68 ++++++++++++++++++++-- client/src/app/+about/about-routing.module.ts | 9 ++- 4 files changed, 74 insertions(+), 12 deletions(-) (limited to 'client/src/app') 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 @@

About {{ instanceName }}

- + Contact administrator
@@ -218,4 +218,4 @@
- + 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' }) export class AboutInstanceComponent implements OnInit, AfterViewChecked { @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef - @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent shortDescription = '' descriptionContent: string @@ -85,10 +84,6 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked { } } - openContactModal () { - return this.contactAdminModal.show() - } - onClickCopyLink (anchor: HTMLAnchorElement) { const link = anchor.href 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 @@ -import { Component, OnInit, ViewChild } from '@angular/core' +import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core' +import { ActivatedRoute, Router, NavigationEnd } from '@angular/router' +import { Subject } from 'rxjs' +import { takeUntil, filter } from 'rxjs/operators' import { Notifier, ServerService } from '@app/core' import { BODY_VALIDATOR, @@ -18,10 +21,13 @@ import { HTMLServerConfig } from '@shared/models' templateUrl: './contact-admin-modal.component.html', styleUrls: [ './contact-admin-modal.component.scss' ] }) -export class ContactAdminModalComponent extends FormReactive implements OnInit { +export class ContactAdminModalComponent extends FormReactive implements OnInit, OnDestroy { @ViewChild('modal', { static: true }) modal: NgbModal error: string + destroy = new Subject() + + subject: string private openedModal: NgbModalRef private serverConfig: HTMLServerConfig @@ -31,7 +37,9 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit { private modalService: NgbModal, private instanceService: InstanceService, private serverService: ServerService, - private notifier: Notifier + private notifier: Notifier, + private route: ActivatedRoute, + private router: Router ) { super() } @@ -40,6 +48,10 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit { return this.serverConfig.instance.name } + get isContactFormEnabled () { + return this.serverConfig.email.enabled && this.serverConfig.contactForm.enabled + } + ngOnInit () { this.serverConfig = this.serverService.getHTMLConfig() @@ -49,10 +61,46 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit { subject: SUBJECT_VALIDATOR, body: BODY_VALIDATOR }) + + // Direct access + if (/^\/about\/instance\/contact/.test(this.router.url)) { + this.show() + this.prefillForm() + } + + // Router access + this.router.events + .pipe( + takeUntil(this.destroy), + filter(event => event instanceof NavigationEnd) + ) + .subscribe((event: NavigationEnd) => { + if (/^\/about\/instance\/contact/.test(event.url)) { + this.show() + this.prefillForm() + } + }) + } + + ngOnDestroy () { + this.destroy.next() } show () { + // If contactForm not enabled redirect to 404 + if (!this.isContactFormEnabled) { + return this.router.navigate([ '/404' ], { state: { type: 'other', obj: { status: 404 } }, skipLocationChange: true }) + } + + // Open modal this.openedModal = this.modalService.open(this.modal, { centered: true, keyboard: false }) + + // Go back to /about/instance after the modal is closed + this.openedModal.result.then(() => { + this.router.navigateByUrl('/about/instance') + }, () => { + this.router.navigateByUrl('/about/instance') + }) } hide () { @@ -64,7 +112,7 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit { } sendForm () { - const fromName = this.form.value['fromName'] + const fromName = this.form.value[ 'fromName' ] const fromEmail = this.form.value[ 'fromEmail' ] const subject = this.form.value[ 'subject' ] const body = this.form.value[ 'body' ] @@ -83,4 +131,16 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit { } ) } + + private prefillForm () { + const { subject, body } = this.route.snapshot.queryParams + + if (subject) { + this.form.get('subject').setValue(subject) + } + + if (body) { + this.form.get('body').setValue(body) + } + } } 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' import { AboutFollowsComponent } from '@app/+about/about-follows/about-follows.component' import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component' import { AboutInstanceResolver } from '@app/+about/about-instance/about-instance.resolver' +import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component' import { AboutComponent } from './about.component' @@ -26,7 +27,13 @@ const aboutRoutes: Routes = [ }, resolve: { instanceData: AboutInstanceResolver - } + }, + children: [ + { + path: 'contact', + component: ContactAdminModalComponent + } + ] }, { path: 'peertube', -- cgit v1.2.3