From d3e56c0c4b307c99e83fbafb7f2c5884cbc20055 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 10 Jan 2019 11:12:41 +0100 Subject: Implement contact form in the client --- .../about-instance/about-instance.component.html | 8 ++- .../about-instance/about-instance.component.scss | 16 ++++- .../about-instance/about-instance.component.ts | 17 ++++- .../contact-admin-modal.component.html | 50 +++++++++++++++ .../contact-admin-modal.component.scss | 11 ++++ .../contact-admin-modal.component.ts | 72 ++++++++++++++++++++++ client/src/app/+about/about.module.ts | 4 +- client/src/app/core/server/server.service.ts | 5 +- .../src/app/shared/forms/form-validators/index.ts | 1 + .../form-validators/instance-validators.service.ts | 48 +++++++++++++++ client/src/app/shared/instance/instance.service.ts | 36 +++++++++++ client/src/app/shared/shared.module.ts | 4 ++ 12 files changed, 260 insertions(+), 12 deletions(-) create mode 100644 client/src/app/+about/about-instance/contact-admin-modal.component.html create mode 100644 client/src/app/+about/about-instance/contact-admin-modal.component.scss create mode 100644 client/src/app/+about/about-instance/contact-admin-modal.component.ts create mode 100644 client/src/app/shared/forms/form-validators/instance-validators.service.ts create mode 100644 client/src/app/shared/instance/instance.service.ts (limited to 'client') 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 37ff795f5..8c700752e 100644 --- a/client/src/app/+about/about-instance/about-instance.component.html +++ b/client/src/app/+about/about-instance/about-instance.component.html @@ -1,7 +1,9 @@
-
- About {{ instanceName }} instance +
+
About {{ instanceName }} instance
+ +
Contact administrator
@@ -46,3 +48,5 @@
+ + 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 b451e85aa..75cf57322 100644 --- a/client/src/app/+about/about-instance/about-instance.component.scss +++ b/client/src/app/+about/about-instance/about-instance.component.scss @@ -2,9 +2,19 @@ @import '_mixins'; .about-instance-title { - font-size: 20px; - font-weight: bold; - margin-bottom: 15px; + display: flex; + justify-content: space-between; + + & > div { + font-size: 20px; + font-weight: bold; + margin-bottom: 15px; + } + + & > .contact-admin { + @include peertube-button; + @include orange-button; + } } .section-title { 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 36e7a8e5b..d3ee8a1e4 100644 --- a/client/src/app/+about/about-instance/about-instance.component.ts +++ b/client/src/app/+about/about-instance/about-instance.component.ts @@ -1,7 +1,9 @@ -import { Component, OnInit } from '@angular/core' +import { Component, OnInit, ViewChild } from '@angular/core' import { Notifier, ServerService } from '@app/core' import { MarkdownService } from '@app/videos/shared' import { I18n } from '@ngx-translate/i18n-polyfill' +import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' +import { InstanceService } from '@app/shared/instance/instance.service' @Component({ selector: 'my-about-instance', @@ -9,6 +11,8 @@ import { I18n } from '@ngx-translate/i18n-polyfill' styleUrls: [ './about-instance.component.scss' ] }) export class AboutInstanceComponent implements OnInit { + @ViewChild('contactAdminModal') contactAdminModal: ContactAdminModalComponent + shortDescription = '' descriptionHTML = '' termsHTML = '' @@ -16,6 +20,7 @@ export class AboutInstanceComponent implements OnInit { constructor ( private notifier: Notifier, private serverService: ServerService, + private instanceService: InstanceService, private markdownService: MarkdownService, private i18n: I18n ) {} @@ -32,8 +37,12 @@ export class AboutInstanceComponent implements OnInit { return this.serverService.getConfig().signup.allowed } + get isContactFormEnabled () { + return this.serverService.getConfig().email.enabled && this.serverService.getConfig().contactForm.enabled + } + ngOnInit () { - this.serverService.getAbout() + this.instanceService.getAbout() .subscribe( res => { this.shortDescription = res.instance.shortDescription @@ -45,4 +54,8 @@ export class AboutInstanceComponent implements OnInit { ) } + openContactModal () { + return this.contactAdminModal.show() + } + } 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 new file mode 100644 index 000000000..2b3fb32f3 --- /dev/null +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.html @@ -0,0 +1,50 @@ + +
+

Contact {{ instanceName }} administrator

+ +
+ +
+ +
+
+ + +
{{ formErrors.fromName }}
+
+ +
+ + +
{{ formErrors.fromEmail }}
+
+ +
+ + +
{{ formErrors.body }}
+
+ +
{{ error }}
+ +
+ + Cancel + + + +
+
+ +
+ 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 new file mode 100644 index 000000000..260d77888 --- /dev/null +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.scss @@ -0,0 +1,11 @@ +@import 'variables'; +@import 'mixins'; + +input[type=text] { + @include peertube-input-text(340px); + display: block; +} + +textarea { + @include peertube-textarea(100%, 200px); +} 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 new file mode 100644 index 000000000..2f707bd53 --- /dev/null +++ b/client/src/app/+about/about-instance/contact-admin-modal.component.ts @@ -0,0 +1,72 @@ +import { Component, OnInit, ViewChild } from '@angular/core' +import { Notifier } from '@app/core' +import { I18n } from '@ngx-translate/i18n-polyfill' +import { FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { NgbModalRef } from '@ng-bootstrap/ng-bootstrap/modal/modal-ref' +import { FormReactive, InstanceValidatorsService } from '@app/shared' +import { InstanceService } from '@app/shared/instance/instance.service' + +@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 { + @ViewChild('modal') modal: NgbModal + + error: string + + private openedModal: NgbModalRef + + constructor ( + protected formValidatorService: FormValidatorService, + private modalService: NgbModal, + private instanceValidatorsService: InstanceValidatorsService, + private instanceService: InstanceService, + private notifier: Notifier, + private i18n: I18n + ) { + super() + } + + ngOnInit () { + this.buildForm({ + fromName: this.instanceValidatorsService.FROM_NAME, + fromEmail: this.instanceValidatorsService.FROM_EMAIL, + body: this.instanceValidatorsService.BODY + }) + } + + show () { + this.openedModal = this.modalService.open(this.modal, { keyboard: false }) + } + + hide () { + this.form.reset() + this.error = undefined + + this.openedModal.close() + this.openedModal = null + } + + sendForm () { + const fromName = this.form.value['fromName'] + const fromEmail = this.form.value[ 'fromEmail' ] + const body = this.form.value[ 'body' ] + + this.instanceService.contactAdministrator(fromEmail, fromName, body) + .subscribe( + () => { + this.notifier.success(this.i18n('Your message has been sent.')) + this.hide() + }, + + err => { + this.error = err.status === 403 + ? this.i18n('You already sent this form recently') + : err.message + } + ) + } +} diff --git a/client/src/app/+about/about.module.ts b/client/src/app/+about/about.module.ts index ff6e8ef41..9c6b29740 100644 --- a/client/src/app/+about/about.module.ts +++ b/client/src/app/+about/about.module.ts @@ -5,6 +5,7 @@ import { AboutComponent } from './about.component' import { SharedModule } from '../shared' import { AboutInstanceComponent } from '@app/+about/about-instance/about-instance.component' import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertube.component' +import { ContactAdminModalComponent } from '@app/+about/about-instance/contact-admin-modal.component' @NgModule({ imports: [ @@ -15,7 +16,8 @@ import { AboutPeertubeComponent } from '@app/+about/about-peertube/about-peertub declarations: [ AboutComponent, AboutInstanceComponent, - AboutPeertubeComponent + AboutPeertubeComponent, + ContactAdminModalComponent ], exports: [ diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts index 5351f18d5..f33e6f20c 100644 --- a/client/src/app/core/server/server.service.ts +++ b/client/src/app/core/server/server.service.ts @@ -13,6 +13,7 @@ import { sortBy } from '@app/shared/misc/utils' @Injectable() export class ServerService { + private static BASE_SERVER_URL = environment.apiUrl + '/api/v1/server/' private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config/' private static BASE_VIDEO_URL = environment.apiUrl + '/api/v1/videos/' private static BASE_LOCALE_URL = environment.apiUrl + '/client/locales/' @@ -147,10 +148,6 @@ export class ServerService { return this.videoPrivacies } - getAbout () { - return this.http.get(ServerService.BASE_CONFIG_URL + '/about') - } - private loadVideoAttributeEnum ( attributeName: 'categories' | 'licences' | 'languages' | 'privacies', hashToPopulate: VideoConstant[], diff --git a/client/src/app/shared/forms/form-validators/index.ts b/client/src/app/shared/forms/form-validators/index.ts index 74e385b3d..fdcbedb71 100644 --- a/client/src/app/shared/forms/form-validators/index.ts +++ b/client/src/app/shared/forms/form-validators/index.ts @@ -1,6 +1,7 @@ export * from './custom-config-validators.service' export * from './form-validator.service' export * from './host' +export * from './instance-validators.service' export * from './login-validators.service' export * from './reset-password-validators.service' export * from './user-validators.service' diff --git a/client/src/app/shared/forms/form-validators/instance-validators.service.ts b/client/src/app/shared/forms/form-validators/instance-validators.service.ts new file mode 100644 index 000000000..5bb852858 --- /dev/null +++ b/client/src/app/shared/forms/form-validators/instance-validators.service.ts @@ -0,0 +1,48 @@ +import { I18n } from '@ngx-translate/i18n-polyfill' +import { Validators } from '@angular/forms' +import { BuildFormValidator } from '@app/shared' +import { Injectable } from '@angular/core' + +@Injectable() +export class InstanceValidatorsService { + readonly FROM_EMAIL: BuildFormValidator + readonly FROM_NAME: BuildFormValidator + readonly BODY: BuildFormValidator + + constructor (private i18n: I18n) { + + this.FROM_EMAIL = { + VALIDATORS: [ Validators.required, Validators.email ], + MESSAGES: { + 'required': this.i18n('Email is required.'), + 'email': this.i18n('Email must be valid.') + } + } + + this.FROM_NAME = { + VALIDATORS: [ + Validators.required, + Validators.minLength(1), + Validators.maxLength(120) + ], + MESSAGES: { + 'required': this.i18n('Your name is required.'), + 'minlength': this.i18n('Your name must be at least 1 character long.'), + 'maxlength': this.i18n('Your name cannot be more than 120 characters long.') + } + } + + this.BODY = { + VALIDATORS: [ + Validators.required, + Validators.minLength(3), + Validators.maxLength(5000) + ], + MESSAGES: { + 'required': this.i18n('A message is required.'), + 'minlength': this.i18n('The message must be at least 3 characters long.'), + 'maxlength': this.i18n('The message cannot be more than 5000 characters long.') + } + } + } +} diff --git a/client/src/app/shared/instance/instance.service.ts b/client/src/app/shared/instance/instance.service.ts new file mode 100644 index 000000000..61321ecce --- /dev/null +++ b/client/src/app/shared/instance/instance.service.ts @@ -0,0 +1,36 @@ +import { catchError } from 'rxjs/operators' +import { HttpClient } from '@angular/common/http' +import { Injectable } from '@angular/core' +import { environment } from '../../../environments/environment' +import { RestExtractor, RestService } from '../rest' +import { About } from '../../../../../shared/models/server' + +@Injectable() +export class InstanceService { + private static BASE_CONFIG_URL = environment.apiUrl + '/api/v1/config' + private static BASE_SERVER_URL = environment.apiUrl + '/api/v1/server' + + constructor ( + private authHttp: HttpClient, + private restService: RestService, + private restExtractor: RestExtractor + ) { + } + + getAbout () { + return this.authHttp.get(InstanceService.BASE_CONFIG_URL + '/about') + .pipe(catchError(res => this.restExtractor.handleError(res))) + } + + contactAdministrator (fromEmail: string, fromName: string, message: string) { + const body = { + fromEmail, + fromName, + body: message + } + + return this.authHttp.post(InstanceService.BASE_SERVER_URL + '/contact', body) + .pipe(catchError(res => this.restExtractor.handleError(res))) + + } +} diff --git a/client/src/app/shared/shared.module.ts b/client/src/app/shared/shared.module.ts index c99c87c00..d1320aeec 100644 --- a/client/src/app/shared/shared.module.ts +++ b/client/src/app/shared/shared.module.ts @@ -37,6 +37,7 @@ import { LoginValidatorsService, ReactiveFileComponent, ResetPasswordValidatorsService, + InstanceValidatorsService, TextareaAutoResizeDirective, UserValidatorsService, VideoAbuseValidatorsService, @@ -65,6 +66,7 @@ import { TopMenuDropdownComponent } from '@app/shared/menu/top-menu-dropdown.com import { UserHistoryService } from '@app/shared/users/user-history.service' import { UserNotificationService } from '@app/shared/users/user-notification.service' import { UserNotificationsComponent } from '@app/shared/users/user-notifications.component' +import { InstanceService } from '@app/shared/instance/instance.service' @NgModule({ imports: [ @@ -185,8 +187,10 @@ import { UserNotificationsComponent } from '@app/shared/users/user-notifications OverviewService, VideoChangeOwnershipValidatorsService, VideoAcceptOwnershipValidatorsService, + InstanceValidatorsService, BlocklistService, UserHistoryService, + InstanceService, I18nPrimengCalendarService, ScreenService, -- cgit v1.2.3