From 5c16e6bc9776ce706bafb198c1c14936674794d5 Mon Sep 17 00:00:00 2001
From: Chocobozzz <me@florianbigard.com>
Date: Tue, 15 Jun 2021 11:57:15 +0200
Subject: [PATCH] Cleanup contact form with URL

Parent component still have the responsability to explicitely open the
modal
Rely on data router param to open or not the modal
---
 .../about-instance.component.html             |  4 +-
 .../about-instance.component.scss             | 11 ++-
 .../about-instance.component.ts               | 16 +++-
 .../contact-admin-modal.component.html        |  4 +-
 .../contact-admin-modal.component.scss        | 15 ++--
 .../contact-admin-modal.component.ts          | 76 +++++--------------
 client/src/app/+about/about-routing.module.ts | 19 +++--
 client/src/sass/include/_mixins.scss          |  2 +-
 8 files changed, 61 insertions(+), 86 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 a42bda845..436d486ab 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>
 
-      <a routerLink="contact" i18n *ngIf="isContactFormEnabled" class="contact-admin">Contact administrator</a>
+      <a routerLink="/about/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></my-contact-admin-modal>
+<my-contact-admin-modal #contactAdminModal></my-contact-admin-modal>
diff --git a/client/src/app/+about/about-instance/about-instance.component.scss b/client/src/app/+about/about-instance/about-instance.component.scss
index b7bf10995..6bbb66a58 100644
--- a/client/src/app/+about/about-instance/about-instance.component.scss
+++ b/client/src/app/+about/about-instance/about-instance.component.scss
@@ -11,15 +11,10 @@
   }
 
   .contact-admin {
-    @include peertube-button;
+    @include peertube-button-link;
     @include orange-button;
 
     height: fit-content;
-
-    &:hover,
-    &:active {
-      text-decoration: none;
-    }
   }
 }
 
@@ -59,6 +54,10 @@
   font-size: 15px;
 }
 
+.short-description {
+  margin-top: 10px;
+}
+
 .short-description .dedicated-to-nsfw {
   margin-top: 20px;
   font-weight: $font-semibold;
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 ffb4294ab..f86df5b67 100644
--- a/client/src/app/+about/about-instance/about-instance.component.ts
+++ b/client/src/app/+about/about-instance/about-instance.component.ts
@@ -1,13 +1,12 @@
 import { ViewportScroller } from '@angular/common'
 import { AfterViewChecked, Component, ElementRef, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component'
 import { Notifier, ServerService } from '@app/core'
-import { CustomMarkupService } from '@app/shared/shared-custom-markup'
 import { InstanceService } from '@app/shared/shared-instance'
-import { About, HTMLServerConfig, ServerConfig } from '@shared/models'
-import { copyToClipboard } from '../../../root-helpers/utils'
+import { copyToClipboard } from '@root-helpers/utils'
+import { HTMLServerConfig } from '@shared/models/server'
 import { ResolverData } from './about-instance.resolver'
+import { ContactAdminModalComponent } from './contact-admin-modal.component'
 
 @Component({
   selector: 'my-about-instance',
@@ -16,6 +15,7 @@ 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
@@ -65,6 +65,14 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked {
 
     this.serverConfig = this.serverService.getHTMLConfig()
 
+    this.route.data.subscribe(data => {
+      if (!data?.isContact) return
+
+      const prefill = this.route.snapshot.queryParams
+
+      this.contactAdminModal.show(prefill)
+    })
+
     this.languages = languages
     this.categories = categories
 
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.html b/client/src/app/+about/about-instance/contact-admin-modal.component.html
index 343e5d649..8b6b707af 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.html
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html
@@ -6,7 +6,7 @@
 
   <div class="modal-body">
 
-    <form novalidate [formGroup]="form" (ngSubmit)="sendForm()">
+    <form *ngIf="isContactFormEnabled()" novalidate [formGroup]="form" (ngSubmit)="sendForm()">
       <div class="form-group">
         <label i18n for="fromName">Your name</label>
         <input
@@ -53,5 +53,7 @@
       </div>
     </form>
 
+    <div *ngIf="!isContactFormEnabled()" class="alert alert-error" i18n>The contact form is not enabled on this instance.</div>
+
   </div>
 </ng-template>
diff --git a/client/src/app/+about/about-instance/contact-admin-modal.component.scss b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
index cd3cf85dd..cc75e8279 100644
--- a/client/src/app/+about/about-instance/contact-admin-modal.component.scss
+++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss
@@ -1,21 +1,16 @@
 @import 'variables';
 @import 'mixins';
 
+.modal-body {
+  text-align: left;
+}
+
 input[type=text] {
   @include peertube-input-text(340px);
-  display: block;
 
-  @media screen and (max-width: #{map-get($container-max-widths, sm)}) {
-    width: 100%;
-  }
+  display: block;
 }
 
 textarea {
   @include peertube-textarea(100%, 200px);
 }
-
-@media screen and (max-width: breakpoint(md)) {
-  .modal-body {
-    text-align: left;
-  }
-}
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 32812d9e0..a528faa20 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,7 +1,5 @@
-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 { Component, OnInit, ViewChild } from '@angular/core'
+import { Router } from '@angular/router'
 import { Notifier, ServerService } from '@app/core'
 import {
   BODY_VALIDATOR,
@@ -16,30 +14,31 @@ import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref'
 import { HttpStatusCode } from '@shared/core-utils/miscs/http-error-codes'
 import { HTMLServerConfig } from '@shared/models'
 
+type Prefill = {
+  subject?: string
+  body?: string
+}
+
 @Component({
   selector: 'my-contact-admin-modal',
   templateUrl: './contact-admin-modal.component.html',
   styleUrls: [ './contact-admin-modal.component.scss' ]
 })
-export class ContactAdminModalComponent extends FormReactive implements OnInit, OnDestroy {
+export class ContactAdminModalComponent extends FormReactive implements OnInit {
   @ViewChild('modal', { static: true }) modal: NgbModal
 
   error: string
-  destroy = new Subject<any>()
-
-  subject: string
 
   private openedModal: NgbModalRef
   private serverConfig: HTMLServerConfig
 
   constructor (
     protected formValidatorService: FormValidatorService,
+    private router: Router,
     private modalService: NgbModal,
     private instanceService: InstanceService,
     private serverService: ServerService,
-    private notifier: Notifier,
-    private route: ActivatedRoute,
-    private router: Router
+    private notifier: Notifier
   ) {
     super()
   }
@@ -48,10 +47,6 @@ 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()
 
@@ -61,46 +56,17 @@ 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()
+  isContactFormEnabled () {
+    return this.serverConfig.email.enabled && this.serverConfig.contactForm.enabled
   }
 
-  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
+  show (prefill: Prefill = {}) {
     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')
-    })
+    this.openedModal.shown.subscribe(() => this.prefillForm(prefill))
+    this.openedModal.result.finally(() => this.router.navigateByUrl('/about/instance'))
   }
 
   hide () {
@@ -132,15 +98,13 @@ export class ContactAdminModalComponent extends FormReactive implements OnInit,
         )
   }
 
-  private prefillForm () {
-    const { subject, body } = this.route.snapshot.queryParams
-
-    if (subject) {
-      this.form.get('subject').setValue(subject)
+  private prefillForm (prefill: Prefill) {
+    if (prefill.subject) {
+      this.form.get('subject').setValue(prefill.subject)
     }
 
-    if (body) {
-      this.form.get('body').setValue(body)
+    if (prefill.body) {
+      this.form.get('body').setValue(prefill.body)
     }
   }
 }
diff --git a/client/src/app/+about/about-routing.module.ts b/client/src/app/+about/about-routing.module.ts
index c810ca272..3974231e3 100644
--- a/client/src/app/+about/about-routing.module.ts
+++ b/client/src/app/+about/about-routing.module.ts
@@ -27,13 +27,20 @@ const aboutRoutes: Routes = [
         },
         resolve: {
           instanceData: AboutInstanceResolver
+        }
+      },
+      {
+        path: 'contact',
+        component: AboutInstanceComponent,
+        data: {
+          meta: {
+            title: $localize`Contact`
+          },
+          isContact: true
         },
-        children: [
-          {
-            path: 'contact',
-            component: ContactAdminModalComponent
-          }
-        ]
+        resolve: {
+          instanceData: AboutInstanceResolver
+        }
       },
       {
         path: 'peertube',
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 0822e0ca6..a835381d6 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -102,7 +102,7 @@
     opacity: 0.7;
   }
 
-  @media screen and (max-width: $width) {
+  @media screen and (max-width: calc(#{$width} + 40px)) {
     width: 100%;
   }
 }