From 6223e24313026b2fddbc4b3d88748532676e14ed Mon Sep 17 00:00:00 2001 From: Chocobozzz 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 | 14 +++- .../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 +++-- 7 files changed, 59 insertions(+), 84 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 a42bda845f6f..436d486ab62c 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 + Contact administrator
@@ -218,4 +218,4 @@

STATISTICS

- + 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 2f67675b9af2..0c712b5eaba8 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; - } } } @@ -58,6 +53,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 4d40ddfd9da8..087b27e0b99f 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 } from '@app/core' -import { CustomMarkupService } from '@app/shared/shared-custom-markup' import { InstanceService } from '@app/shared/shared-instance' -import { About, ServerConfig } from '@shared/models' +import { ServerConfig } from '@shared/models' import { copyToClipboard } from '../../../root-helpers/utils' 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 + @ViewChild('contactAdminModal', { static: true }) contactAdminModal: ContactAdminModalComponent shortDescription = '' descriptionContent: string @@ -62,6 +62,14 @@ export class AboutInstanceComponent implements OnInit, AfterViewChecked { async ngOnInit () { const { about, languages, categories, serverConfig }: ResolverData = this.route.snapshot.data.instanceData + this.route.data.subscribe(data => { + if (!data?.isContact) return + + const prefill = this.route.snapshot.queryParams + + this.contactAdminModal.show(prefill) + }) + this.serverConfig = serverConfig this.languages = languages 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 343e5d649f7a..8b6b707af94b 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 @@

Contact {{ instanceName }} administrator

-
+
Contact {{ instanceName }} administrator
+
The contact form is not enabled on this instance.
+
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 cd3cf85ddd33..cc75e8279414 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 7fa664e47d56..0b03d792d33b 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 { ServerConfig } 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() - - subject: string private openedModal: NgbModalRef private serverConfig: ServerConfig 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.getTmpConfig() this.serverService.getConfig() @@ -63,46 +58,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 () { @@ -134,15 +100,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 c810ca27264d..3974231e338e 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',