From 3866f1a02f73665541468fbadcc3cd2cc459aef2 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 10 Jan 2019 09:58:08 +0100 Subject: Add contact form checkbox in admin form --- .../edit-custom-config.component.html | 495 +++++++++++---------- .../edit-custom-config.component.ts | 203 +++------ client/src/app/core/server/server.service.ts | 3 + client/src/app/shared/forms/form-reactive.ts | 46 +- .../form-validators/form-validator.service.ts | 33 +- client/src/app/shared/misc/help.component.scss | 2 +- .../remote-subscribe.component.ts | 2 +- .../comment/video-comment-add.component.ts | 2 +- 8 files changed, 387 insertions(+), 399 deletions(-) (limited to 'client/src') diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html index 6ece7e8bc..52eb00d93 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.html @@ -7,169 +7,169 @@
Instance
-
- - -
- {{ formErrors.instanceName }} + +
+ + +
{{ formErrors.instance.name }}
-
-
- - -
- {{ formErrors.instanceShortDescription }} +
+ + +
{{ formErrors.instance.shortDescription }}
-
-
- - -
- {{ formErrors.instanceDescription }} +
+ + +
{{ formErrors.instance.description }}
-
-
- - -
- {{ formErrors.instanceTerms }} +
+ + +
{{ formErrors.instance.terms }}
-
-
- -
- +
+ +
+ +
+
{{ formErrors.instance.defaultClientRoute }}
-
- {{ formErrors.instanceDefaultClientRoute }} + +
+ + + +
+ +
+
{{ formErrors.instance.defaultNSFWPolicy }}
-
+ -
- - +
Signup
-
- + +
+
-
- {{ formErrors.instanceDefaultNSFWPolicy }} + +
+
-
-
Signup
+
+ + +
{{ formErrors.signup.limit }}
+
+ -
- -
+
Users
-
- -
+ +
+ +
+ +
+
{{ formErrors.user.videoQuota }}
+
-
- - -
- {{ formErrors.signupLimit }} +
+ +
+ +
+
{{ formErrors.user.videoQuotaDaily }}
-
+
Import
-
- -
+ + -
- -
+
+ +
+ +
+ +
+ + +
Administrator
-
+
-
- {{ formErrors.adminEmail }} -
+
{{ formErrors.admin.email }}
-
Users
- -
- -
- -
-
- {{ formErrors.userVideoQuota }} -
+
+
-
- -
- -
-
- {{ formErrors.userVideoQuotaDaily }} -
-
@@ -177,30 +177,35 @@
Twitter
-
- - - -
- {{ formErrors.servicesTwitterUsername }} -
-
+ + + +
+ + + +
{{ formErrors.services.twitter.username }}
+
+ +
+ +
+ + + -
- -
@@ -209,45 +214,48 @@
Transcoding
-
- -
- - - +
-
- -
- + + +
+
-
- {{ formErrors.transcodingThreads }} + +
+ +
+ +
+
{{ formErrors.transcoding.threads }}
-
-
- -
- + +
+ +
+ + + +
Cache @@ -258,74 +266,73 @@ >
-
- - -
- {{ formErrors.cachePreviewsSize }} + +
+ + +
{{ formErrors.cache.previews.size }}
-
-
- - -
- {{ formErrors.cacheCaptionsSize }} +
+ + +
{{ formErrors.cache.captions.size }}
-
+
Customizations
-
- - - -
- {{ formErrors.customizationJavascript }} -
-
+ + +
+ + + +
{{ formErrors.instance.customizations.javascript }}
+
+ +
+ + + +
{{ formErrors.instance.customizations.css }}
+
+ + -
- - - -
- {{ formErrors.customizationCSS }} -
-
diff --git a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts index ee877ee31..654a076b0 100644 --- a/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts +++ b/client/src/app/+admin/config/edit-custom-config/edit-custom-config.component.ts @@ -18,9 +18,6 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { resolutions: string[] = [] transcodingThreadOptions: { label: string, value: number }[] = [] - private oldCustomJavascript: string - private oldCustomCSS: string - constructor ( protected formValidatorService: FormValidatorService, private customConfigValidatorsService: CustomConfigValidatorsService, @@ -58,41 +55,78 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { } getResolutionKey (resolution: string) { - return 'transcodingResolution' + resolution + return 'transcoding.resolutions.' + resolution } ngOnInit () { - const formGroupData: { [key: string]: any } = { - instanceName: this.customConfigValidatorsService.INSTANCE_NAME, - instanceShortDescription: this.customConfigValidatorsService.INSTANCE_SHORT_DESCRIPTION, - instanceDescription: null, - instanceTerms: null, - instanceDefaultClientRoute: null, - instanceDefaultNSFWPolicy: null, - servicesTwitterUsername: this.customConfigValidatorsService.SERVICES_TWITTER_USERNAME, - servicesTwitterWhitelisted: null, - cachePreviewsSize: this.customConfigValidatorsService.CACHE_PREVIEWS_SIZE, - cacheCaptionsSize: this.customConfigValidatorsService.CACHE_CAPTIONS_SIZE, - signupEnabled: null, - signupLimit: this.customConfigValidatorsService.SIGNUP_LIMIT, - signupRequiresEmailVerification: null, - importVideosHttpEnabled: null, - importVideosTorrentEnabled: null, - adminEmail: this.customConfigValidatorsService.ADMIN_EMAIL, - userVideoQuota: this.userValidatorsService.USER_VIDEO_QUOTA, - userVideoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY, - transcodingThreads: this.customConfigValidatorsService.TRANSCODING_THREADS, - transcodingAllowAdditionalExtensions: null, - transcodingEnabled: null, - customizationJavascript: null, - customizationCSS: null + const formGroupData: { [key in keyof CustomConfig ]: any } = { + instance: { + name: this.customConfigValidatorsService.INSTANCE_NAME, + shortDescription: this.customConfigValidatorsService.INSTANCE_SHORT_DESCRIPTION, + description: null, + terms: null, + defaultClientRoute: null, + defaultNSFWPolicy: null, + customizations: { + javascript: null, + css: null + } + }, + services: { + twitter: { + username: this.customConfigValidatorsService.SERVICES_TWITTER_USERNAME, + whitelisted: null + } + }, + cache: { + previews: { + size: this.customConfigValidatorsService.CACHE_PREVIEWS_SIZE + }, + captions: { + size: this.customConfigValidatorsService.CACHE_CAPTIONS_SIZE + } + }, + signup: { + enabled: null, + limit: this.customConfigValidatorsService.SIGNUP_LIMIT, + requiresEmailVerification: null + }, + import: { + videos: { + http: { + enabled: null + }, + torrent: { + enabled: null + } + } + }, + admin: { + email: this.customConfigValidatorsService.ADMIN_EMAIL + }, + contactForm: { + enabled: null + }, + user: { + videoQuota: this.userValidatorsService.USER_VIDEO_QUOTA, + videoQuotaDaily: this.userValidatorsService.USER_VIDEO_QUOTA_DAILY + }, + transcoding: { + enabled: null, + threads: this.customConfigValidatorsService.TRANSCODING_THREADS, + allowAdditionalExtensions: null, + resolutions: {} + } } - const defaultValues: BuildFormDefaultValues = {} + const defaultValues = { + transcoding: { + resolutions: {} + } + } for (const resolution of this.resolutions) { - const key = this.getResolutionKey(resolution) - defaultValues[key] = 'false' - formGroupData[key] = null + defaultValues.transcoding.resolutions[resolution] = 'false' + formGroupData.transcoding.resolutions[resolution] = null } this.buildForm(formGroupData) @@ -102,9 +136,6 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { res => { this.customConfig = res - this.oldCustomCSS = this.customConfig.instance.customizations.css - this.oldCustomJavascript = this.customConfig.instance.customizations.javascript - this.updateForm() // Force form validation this.forceCheck() @@ -115,78 +146,15 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { } isTranscodingEnabled () { - return this.form.value['transcodingEnabled'] === true + return this.form.value['transcoding']['enabled'] === true } isSignupEnabled () { - return this.form.value['signupEnabled'] === true + return this.form.value['signup']['enabled'] === true } async formValidated () { - const data: CustomConfig = { - instance: { - name: this.form.value['instanceName'], - shortDescription: this.form.value['instanceShortDescription'], - description: this.form.value['instanceDescription'], - terms: this.form.value['instanceTerms'], - defaultClientRoute: this.form.value['instanceDefaultClientRoute'], - defaultNSFWPolicy: this.form.value['instanceDefaultNSFWPolicy'], - customizations: { - javascript: this.form.value['customizationJavascript'], - css: this.form.value['customizationCSS'] - } - }, - services: { - twitter: { - username: this.form.value['servicesTwitterUsername'], - whitelisted: this.form.value['servicesTwitterWhitelisted'] - } - }, - cache: { - previews: { - size: this.form.value['cachePreviewsSize'] - }, - captions: { - size: this.form.value['cacheCaptionsSize'] - } - }, - signup: { - enabled: this.form.value['signupEnabled'], - limit: this.form.value['signupLimit'], - requiresEmailVerification: this.form.value['signupRequiresEmailVerification'] - }, - admin: { - email: this.form.value['adminEmail'] - }, - user: { - videoQuota: this.form.value['userVideoQuota'], - videoQuotaDaily: this.form.value['userVideoQuotaDaily'] - }, - transcoding: { - enabled: this.form.value['transcodingEnabled'], - allowAdditionalExtensions: this.form.value['transcodingAllowAdditionalExtensions'], - threads: this.form.value['transcodingThreads'], - resolutions: { - '240p': this.form.value[this.getResolutionKey('240p')], - '360p': this.form.value[this.getResolutionKey('360p')], - '480p': this.form.value[this.getResolutionKey('480p')], - '720p': this.form.value[this.getResolutionKey('720p')], - '1080p': this.form.value[this.getResolutionKey('1080p')] - } - }, - import: { - videos: { - http: { - enabled: this.form.value['importVideosHttpEnabled'] - }, - torrent: { - enabled: this.form.value['importVideosTorrentEnabled'] - } - } - } - } - - this.configService.updateCustomConfig(data) + this.configService.updateCustomConfig(this.form.value) .subscribe( res => { this.customConfig = res @@ -204,38 +172,7 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { } private updateForm () { - const data: { [key: string]: any } = { - instanceName: this.customConfig.instance.name, - instanceShortDescription: this.customConfig.instance.shortDescription, - instanceDescription: this.customConfig.instance.description, - instanceTerms: this.customConfig.instance.terms, - instanceDefaultClientRoute: this.customConfig.instance.defaultClientRoute, - instanceDefaultNSFWPolicy: this.customConfig.instance.defaultNSFWPolicy, - servicesTwitterUsername: this.customConfig.services.twitter.username, - servicesTwitterWhitelisted: this.customConfig.services.twitter.whitelisted, - cachePreviewsSize: this.customConfig.cache.previews.size, - cacheCaptionsSize: this.customConfig.cache.captions.size, - signupEnabled: this.customConfig.signup.enabled, - signupLimit: this.customConfig.signup.limit, - signupRequiresEmailVerification: this.customConfig.signup.requiresEmailVerification, - adminEmail: this.customConfig.admin.email, - userVideoQuota: this.customConfig.user.videoQuota, - userVideoQuotaDaily: this.customConfig.user.videoQuotaDaily, - transcodingThreads: this.customConfig.transcoding.threads, - transcodingEnabled: this.customConfig.transcoding.enabled, - transcodingAllowAdditionalExtensions: this.customConfig.transcoding.allowAdditionalExtensions, - customizationJavascript: this.customConfig.instance.customizations.javascript, - customizationCSS: this.customConfig.instance.customizations.css, - importVideosHttpEnabled: this.customConfig.import.videos.http.enabled, - importVideosTorrentEnabled: this.customConfig.import.videos.torrent.enabled - } - - for (const resolution of this.resolutions) { - const key = this.getResolutionKey(resolution) - data[key] = this.customConfig.transcoding.resolutions[resolution] - } - - this.form.patchValue(data) + this.form.patchValue(this.customConfig) } } diff --git a/client/src/app/core/server/server.service.ts b/client/src/app/core/server/server.service.ts index 6eccb8336..5351f18d5 100644 --- a/client/src/app/core/server/server.service.ts +++ b/client/src/app/core/server/server.service.ts @@ -40,6 +40,9 @@ export class ServerService { email: { enabled: false }, + contactForm: { + enabled: false + }, serverVersion: 'Unknown', signup: { allowed: false, diff --git a/client/src/app/shared/forms/form-reactive.ts b/client/src/app/shared/forms/form-reactive.ts index 0bb7d25e6..2d0e8359f 100644 --- a/client/src/app/shared/forms/form-reactive.ts +++ b/client/src/app/shared/forms/form-reactive.ts @@ -1,11 +1,9 @@ import { FormGroup } from '@angular/forms' import { BuildFormArgument, BuildFormDefaultValues, FormValidatorService } from '@app/shared/forms/form-validators/form-validator.service' -export type FormReactiveErrors = { [ id: string ]: string } +export type FormReactiveErrors = { [ id: string ]: string | FormReactiveErrors } export type FormReactiveValidationMessages = { - [ id: string ]: { - [ name: string ]: string - } + [ id: string ]: { [ name: string ]: string } | FormReactiveValidationMessages } export abstract class FormReactive { @@ -23,29 +21,49 @@ export abstract class FormReactive { this.formErrors = formErrors this.validationMessages = validationMessages - this.form.valueChanges.subscribe(() => this.onValueChanged(false)) + this.form.valueChanges.subscribe(() => this.onValueChanged(this.form, this.formErrors, this.validationMessages, false)) + } + + protected forceCheck () { + return this.onValueChanged(this.form, this.formErrors, this.validationMessages, true) + } + + protected check () { + return this.onValueChanged(this.form, this.formErrors, this.validationMessages, false) } - protected onValueChanged (forceCheck = false) { - for (const field in this.formErrors) { + private onValueChanged ( + form: FormGroup, + formErrors: FormReactiveErrors, + validationMessages: FormReactiveValidationMessages, + forceCheck = false + ) { + for (const field of Object.keys(formErrors)) { + if (formErrors[field] && typeof formErrors[field] === 'object') { + this.onValueChanged( + form.controls[field] as FormGroup, + formErrors[field] as FormReactiveErrors, + validationMessages[field] as FormReactiveValidationMessages, + forceCheck + ) + continue + } + // clear previous error message (if any) - this.formErrors[ field ] = '' - const control = this.form.get(field) + formErrors[ field ] = '' + const control = form.get(field) if (control.dirty) this.formChanged = true // Don't care if dirty on force check const isDirty = control.dirty || forceCheck === true if (control && isDirty && !control.valid) { - const messages = this.validationMessages[ field ] + const messages = validationMessages[ field ] for (const key in control.errors) { - this.formErrors[ field ] += messages[ key ] + ' ' + formErrors[ field ] += messages[ key ] + ' ' } } } } - protected forceCheck () { - return this.onValueChanged(true) - } } diff --git a/client/src/app/shared/forms/form-validators/form-validator.service.ts b/client/src/app/shared/forms/form-validators/form-validator.service.ts index 19a8bef25..249fdf119 100644 --- a/client/src/app/shared/forms/form-validators/form-validator.service.ts +++ b/client/src/app/shared/forms/form-validators/form-validator.service.ts @@ -7,10 +7,10 @@ export type BuildFormValidator = { MESSAGES: { [ name: string ]: string } } export type BuildFormArgument = { - [ id: string ]: BuildFormValidator + [ id: string ]: BuildFormValidator | BuildFormArgument } export type BuildFormDefaultValues = { - [ name: string ]: string | string[] + [ name: string ]: string | string[] | BuildFormDefaultValues } @Injectable() @@ -29,7 +29,16 @@ export class FormValidatorService { formErrors[name] = '' const field = obj[name] - if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES + if (this.isRecursiveField(field)) { + const result = this.buildForm(field as BuildFormArgument, defaultValues[name] as BuildFormDefaultValues) + group[name] = result.form + formErrors[name] = result.formErrors + validationMessages[name] = result.validationMessages + + continue + } + + if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string } const defaultValue = defaultValues[name] || '' @@ -52,13 +61,27 @@ export class FormValidatorService { formErrors[name] = '' const field = obj[name] - if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES + if (this.isRecursiveField(field)) { + this.updateForm( + form[name], + formErrors[name] as FormReactiveErrors, + validationMessages[name] as FormReactiveValidationMessages, + obj[name] as BuildFormArgument, + defaultValues[name] as BuildFormDefaultValues + ) + continue + } + + if (field && field.MESSAGES) validationMessages[name] = field.MESSAGES as { [ name: string ]: string } const defaultValue = defaultValues[name] || '' - if (field && field.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS)) + if (field && field.VALIDATORS) form.addControl(name, new FormControl(defaultValue, field.VALIDATORS as ValidatorFn[])) else form.addControl(name, new FormControl(defaultValue)) } } + private isRecursiveField (field: any) { + return field && typeof field === 'object' && !field.MESSAGES && !field.VALIDATORS + } } diff --git a/client/src/app/shared/misc/help.component.scss b/client/src/app/shared/misc/help.component.scss index 6a5c3b1fa..047e53fab 100644 --- a/client/src/app/shared/misc/help.component.scss +++ b/client/src/app/shared/misc/help.component.scss @@ -12,7 +12,7 @@ } /deep/ { - .popover-help.popover { + .help-popover { max-width: 300px; .popover-body { diff --git a/client/src/app/shared/user-subscription/remote-subscribe.component.ts b/client/src/app/shared/user-subscription/remote-subscribe.component.ts index 49722ce40..ba2a45df1 100644 --- a/client/src/app/shared/user-subscription/remote-subscribe.component.ts +++ b/client/src/app/shared/user-subscription/remote-subscribe.component.ts @@ -29,7 +29,7 @@ export class RemoteSubscribeComponent extends FormReactive implements OnInit { } onValidKey () { - this.onValueChanged() + this.check() if (!this.form.valid) return this.formValidated() diff --git a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts index 6b7e62042..fd85c28f2 100644 --- a/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comment-add.component.ts @@ -70,7 +70,7 @@ export class VideoCommentAddComponent extends FormReactive implements OnInit { } onValidKey () { - this.onValueChanged() + this.check() if (!this.form.valid) return this.formValidated() -- cgit v1.2.3