Add /about/instance/contact contact-form route with prefilled queryParams subject&body

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 @@
     <div class="about-instance-title">
       <h1 i18n class="title">About {{ instanceName }}</h1>
 
-      <button i18n *ngIf="isContactFormEnabled" (click)="openContactModal()" (keydown.enter)="openContactModal()" class="contact-admin">Contact administrator</button>
+      <a routerLink="contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact administrator</a>
     </div>
 
     <div class="instance-badges" *ngIf="categories.length !== 0 || languages.length !== 0">
@@ -218,4 +218,4 @@
   </div>
 </div>
 
-<my-contact-admin-modal #contactAdminModal></my-contact-admin-modal>
+<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'
 })
 export class AboutInstanceComponent implements OnInit, AfterViewChecked {
   @ViewChild('descriptionWrapper') descriptionWrapper: ElementRef<HTMLInputElement>
-  @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<any>()
+
+  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',