From 1f30a1853e38c20a45722dbd6d38aaaec63839e8 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 22 Feb 2018 15:29:32 +0100 Subject: [PATCH 1/1] Add confirm when admin use custom js/css --- client/.angular-cli.json | 7 +- client/src/app/+admin/config/config.routes.ts | 2 +- .../edit-custom-config.component.ts | 32 +++++++- .../following-add/following-add.component.ts | 21 +++-- .../following-list.component.ts | 21 +++-- .../users/user-list/user-list.component.ts | 25 +++--- .../video-blacklist-list.component.ts | 21 +++-- .../account-videos.component.ts | 80 +++++++++---------- .../app/core/confirm/confirm.component.html | 7 +- .../app/core/confirm/confirm.component.scss | 17 ++++ .../src/app/core/confirm/confirm.component.ts | 23 ++++-- .../src/app/core/confirm/confirm.service.ts | 13 ++- client/src/app/core/core.module.ts | 2 + .../guards/can-deactivate-guard.service.ts | 2 +- .../comment/video-comments.component.ts | 55 ++++++------- .../+video-watch/video-watch.component.ts | 51 +++++------- server/controllers/client.ts | 2 +- 17 files changed, 208 insertions(+), 173 deletions(-) create mode 100644 client/src/app/core/confirm/confirm.component.scss diff --git a/client/.angular-cli.json b/client/.angular-cli.json index 643e1b319..cb387db0a 100644 --- a/client/.angular-cli.json +++ b/client/.angular-cli.json @@ -8,12 +8,7 @@ "root": "src", "outDir": "dist", "assets": [ - { - "glob": "**/*", - "input": "./assets/images", - "output": "./client/assets/images", - "allowOutsideOutDir": false - }, + "./assets/images", "./manifest.json" ], "deployUrl": "client/", diff --git a/client/src/app/+admin/config/config.routes.ts b/client/src/app/+admin/config/config.routes.ts index a46b0ddfd..2ca2f8fde 100644 --- a/client/src/app/+admin/config/config.routes.ts +++ b/client/src/app/+admin/config/config.routes.ts @@ -23,7 +23,7 @@ export const ConfigRoutes: Routes = [ component: EditCustomConfigComponent, data: { meta: { - title: 'Following list' + title: 'Edit custom configuration' } } } 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 027268536..ccec89a8e 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 @@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core' import { FormBuilder, FormGroup } from '@angular/forms' import { Router } from '@angular/router' import { ConfigService } from '@app/+admin/config/shared/config.service' +import { ConfirmService } from '@app/core' import { ServerService } from '@app/core/server/server.service' import { FormReactive, USER_VIDEO_QUOTA } from '@app/shared' import { @@ -61,12 +62,16 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { userVideoQuota: USER_VIDEO_QUOTA.MESSAGES } + private oldCustomJavascript: string + private oldCustomCSS: string + constructor ( private formBuilder: FormBuilder, private router: Router, private notificationsService: NotificationsService, private configService: ConfigService, - private serverService: ServerService + private serverService: ServerService, + private confirmService: ConfirmService ) { super() } @@ -109,6 +114,9 @@ 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() }, @@ -124,7 +132,27 @@ export class EditCustomConfigComponent extends FormReactive implements OnInit { return this.form.value['signupEnabled'] === true } - formValidated () { + async formValidated () { + const newCustomizationJavascript = this.form.value['customizationJavascript'] + const newCustomizationCSS = this.form.value['customizationCSS'] + + const customizations = [] + if (newCustomizationJavascript && newCustomizationJavascript !== this.oldCustomJavascript) customizations.push('JavaScript') + if (newCustomizationCSS && newCustomizationCSS !== this.oldCustomCSS) customizations.push('CSS') + + if (customizations.length !== 0) { + const customizationsText = customizations.join('/') + + const message = `You set custom ${customizationsText}. ` + + 'This could lead to security issues or bugs if you do not understand it. ' + + 'Are you sure you want to update the configuration?' + const label = `Please type "I understand the ${customizationsText} I set" to confirm.` + const expectedInputValue = `I understand the ${customizationsText} I set` + + const confirmRes = await this.confirmService.confirmWithInput(message, label, expectedInputValue) + if (confirmRes === false) return + } + const data = { instance: { name: this.form.value['instanceName'], diff --git a/client/src/app/+admin/follows/following-add/following-add.component.ts b/client/src/app/+admin/follows/following-add/following-add.component.ts index bf842129d..c296c8852 100644 --- a/client/src/app/+admin/follows/following-add/following-add.component.ts +++ b/client/src/app/+admin/follows/following-add/following-add.component.ts @@ -43,7 +43,7 @@ export class FollowingAddComponent { } } - addFollowing () { + async addFollowing () { this.error = '' const hosts = this.getNotEmptyHosts() @@ -57,20 +57,17 @@ export class FollowingAddComponent { } const confirmMessage = 'If you confirm, you will send a follow request to:
- ' + hosts.join('
- ') - this.confirmService.confirm(confirmMessage, 'Follow new server(s)').subscribe( - res => { - if (res === false) return + const res = await this.confirmService.confirm(confirmMessage, 'Follow new server(s)') + if (res === false) return - this.followService.follow(hosts).subscribe( - status => { - this.notificationsService.success('Success', 'Follow request(s) sent!') + this.followService.follow(hosts).subscribe( + () => { + this.notificationsService.success('Success', 'Follow request(s) sent!') - setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500) - }, + setTimeout(() => this.router.navigate([ '/admin/follows/following-list' ]), 500) + }, - err => this.notificationsService.error('Error', err.message) - ) - } + err => this.notificationsService.error('Error', err.message) ) } diff --git a/client/src/app/+admin/follows/following-list/following-list.component.ts b/client/src/app/+admin/follows/following-list/following-list.component.ts index d4f8d0309..ad1bd4536 100644 --- a/client/src/app/+admin/follows/following-list/following-list.component.ts +++ b/client/src/app/+admin/follows/following-list/following-list.component.ts @@ -25,20 +25,17 @@ export class FollowingListComponent extends RestTable { super() } - removeFollowing (follow: AccountFollow) { - this.confirmService.confirm(`Do you really want to unfollow ${follow.following.host}?`, 'Unfollow').subscribe( - res => { - if (res === false) return + async removeFollowing (follow: AccountFollow) { + const res = await this.confirmService.confirm(`Do you really want to unfollow ${follow.following.host}?`, 'Unfollow') + if (res === false) return - this.followService.unfollow(follow).subscribe( - () => { - this.notificationsService.success('Success', `You are not following ${follow.following.host} anymore.`) - this.loadData() - }, + this.followService.unfollow(follow).subscribe( + () => { + this.notificationsService.success('Success', `You are not following ${follow.following.host} anymore.`) + this.loadData() + }, - err => this.notificationsService.error('Error', err.message) - ) - } + err => this.notificationsService.error('Error', err.message) ) } diff --git a/client/src/app/+admin/users/user-list/user-list.component.ts b/client/src/app/+admin/users/user-list/user-list.component.ts index 1e8e1af49..512152808 100644 --- a/client/src/app/+admin/users/user-list/user-list.component.ts +++ b/client/src/app/+admin/users/user-list/user-list.component.ts @@ -1,10 +1,10 @@ import { Component } from '@angular/core' -import { SortMeta } from 'primeng/components/common/sortmeta' import { NotificationsService } from 'angular2-notifications' +import { SortMeta } from 'primeng/components/common/sortmeta' import { ConfirmService } from '../../../core' -import { RestTable, RestPagination, User } from '../../../shared' +import { RestPagination, RestTable, User } from '../../../shared' import { UserService } from '../shared' @Component({ @@ -27,25 +27,22 @@ export class UserListComponent extends RestTable { super() } - removeUser (user: User) { + async removeUser (user: User) { if (user.username === 'root') { this.notificationsService.error('Error', 'You cannot delete root.') return } - this.confirmService.confirm('Do you really want to delete this user?', 'Delete').subscribe( - res => { - if (res === false) return + const res = await this.confirmService.confirm('Do you really want to delete this user?', 'Delete') + if (res === false) return - this.userService.removeUser(user).subscribe( - () => { - this.notificationsService.success('Success', `User ${user.username} deleted.`) - this.loadData() - }, + this.userService.removeUser(user).subscribe( + () => { + this.notificationsService.success('Success', `User ${user.username} deleted.`) + this.loadData() + }, - err => this.notificationsService.error('Error', err.message) - ) - } + err => this.notificationsService.error('Error', err.message) ) } diff --git a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts index 56024b247..f4cf21259 100644 --- a/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts +++ b/client/src/app/+admin/video-blacklist/video-blacklist-list/video-blacklist-list.component.ts @@ -31,22 +31,19 @@ export class VideoBlacklistListComponent extends RestTable implements OnInit { this.loadData() } - removeVideoFromBlacklist (entry: BlacklistedVideo) { + async removeVideoFromBlacklist (entry: BlacklistedVideo) { const confirmMessage = 'Do you really want to remove this video from the blacklist ? It will be available again in the video list.' - this.confirmService.confirm(confirmMessage, 'Remove').subscribe( - res => { - if (res === false) return + const res = await this.confirmService.confirm(confirmMessage, 'Remove') + if (res === false) return - this.videoBlacklistService.removeVideoFromBlacklist(entry.videoId).subscribe( - status => { - this.notificationsService.success('Success', `Video ${entry.name} removed from the blacklist.`) - this.loadData() - }, + this.videoBlacklistService.removeVideoFromBlacklist(entry.videoId).subscribe( + () => { + this.notificationsService.success('Success', `Video ${entry.name} removed from the blacklist.`) + this.loadData() + }, - err => this.notificationsService.error('Error', err.message) - ) - } + err => this.notificationsService.error('Error', err.message) ) } diff --git a/client/src/app/account/account-videos/account-videos.component.ts b/client/src/app/account/account-videos/account-videos.component.ts index e9d044dbf..a286bad1c 100644 --- a/client/src/app/account/account-videos/account-videos.component.ts +++ b/client/src/app/account/account-videos/account-videos.component.ts @@ -56,55 +56,49 @@ export class AccountVideosComponent extends AbstractVideoList implements OnInit return this.videoService.getMyVideos(newPagination, this.sort) } - deleteSelectedVideos () { + async deleteSelectedVideos () { const toDeleteVideosIds = Object.keys(this.checkedVideos) .filter(k => this.checkedVideos[k] === true) .map(k => parseInt(k, 10)) - this.confirmService.confirm(`Do you really want to delete ${toDeleteVideosIds.length} videos?`, 'Delete').subscribe( - res => { - if (res === false) return - - const observables: Observable[] = [] - for (const videoId of toDeleteVideosIds) { - const o = this.videoService - .removeVideo(videoId) - .do(() => this.spliceVideosById(videoId)) - - observables.push(o) - } - - Observable.from(observables) - .concatAll() - .subscribe( - res => { - this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`) - this.buildVideoPages() - }, - - err => this.notificationsService.error('Error', err.message) - ) - } - ) + const res = await this.confirmService.confirm(`Do you really want to delete ${toDeleteVideosIds.length} videos?`, 'Delete') + if (res === false) return + + const observables: Observable[] = [] + for (const videoId of toDeleteVideosIds) { + const o = this.videoService + .removeVideo(videoId) + .do(() => this.spliceVideosById(videoId)) + + observables.push(o) + } + + Observable.from(observables) + .concatAll() + .subscribe( + res => { + this.notificationsService.success('Success', `${toDeleteVideosIds.length} videos deleted.`) + this.buildVideoPages() + }, + + err => this.notificationsService.error('Error', err.message) + ) } - deleteVideo (video: Video) { - this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete').subscribe( - res => { - if (res === false) return - - this.videoService.removeVideo(video.id) - .subscribe( - status => { - this.notificationsService.success('Success', `Video ${video.name} deleted.`) - this.spliceVideosById(video.id) - this.buildVideoPages() - }, - - error => this.notificationsService.error('Error', error.message) - ) - } - ) + async deleteVideo (video: Video) { + const res = await this.confirmService.confirm(`Do you really want to delete ${video.name}?`, 'Delete') + if (res === false) return + + this.videoService.removeVideo(video.id) + .subscribe( + status => { + this.notificationsService.success('Success', `Video ${video.name} deleted.`) + this.spliceVideosById(video.id) + this.buildVideoPages() + }, + + error => this.notificationsService.error('Error', error.message) + ) } private spliceVideosById (id: number) { diff --git a/client/src/app/core/confirm/confirm.component.html b/client/src/app/core/confirm/confirm.component.html index cc2c28de2..90274b248 100644 --- a/client/src/app/core/confirm/confirm.component.html +++ b/client/src/app/core/confirm/confirm.component.html @@ -10,13 +10,18 @@
+
+ + +
+
Cancel
diff --git a/client/src/app/core/confirm/confirm.component.scss b/client/src/app/core/confirm/confirm.component.scss new file mode 100644 index 000000000..93dd7926b --- /dev/null +++ b/client/src/app/core/confirm/confirm.component.scss @@ -0,0 +1,17 @@ +@import '_variables'; +@import '_mixins'; + +.button { + padding: 0 13px; +} + +input[type=text] { + @include peertube-input-text(100%); + display: block; +} + +.form-group { + margin: 20px 0; +} + + diff --git a/client/src/app/core/confirm/confirm.component.ts b/client/src/app/core/confirm/confirm.component.ts index 0515d969a..8f81b7a98 100644 --- a/client/src/app/core/confirm/confirm.component.ts +++ b/client/src/app/core/confirm/confirm.component.ts @@ -4,21 +4,20 @@ import { ModalDirective } from 'ngx-bootstrap/modal' import { ConfirmService } from './confirm.service' -export interface ConfigChangedEvent { - columns: { [id: string]: { isDisplayed: boolean } } - config: { resultsPerPage: number } -} - @Component({ selector: 'my-confirm', templateUrl: './confirm.component.html', - styles: [ '.button { padding: 0 13px; }' ] + styleUrls: [ './confirm.component.scss' ] }) export class ConfirmComponent implements OnInit { @ViewChild('confirmModal') confirmModal: ModalDirective title = '' message = '' + expectedInputValue = '' + inputLabel = '' + + inputValue = '' constructor (private confirmService: ConfirmService) { // Empty @@ -31,10 +30,13 @@ export class ConfirmComponent implements OnInit { } this.confirmService.showConfirm.subscribe( - ({ title, message }) => { + ({ title, message, expectedInputValue, inputLabel }) => { this.title = title this.message = message + this.inputLabel = inputLabel + this.expectedInputValue = expectedInputValue + this.showModal() } ) @@ -52,6 +54,13 @@ export class ConfirmComponent implements OnInit { this.hideModal() } + isConfirmationDisabled () { + // No input validation + if (!this.inputLabel || !this.expectedInputValue) return false + + return this.expectedInputValue !== this.inputValue + } + showModal () { this.confirmModal.show() } diff --git a/client/src/app/core/confirm/confirm.service.ts b/client/src/app/core/confirm/confirm.service.ts index f12ff1848..f30feb9d0 100644 --- a/client/src/app/core/confirm/confirm.service.ts +++ b/client/src/app/core/confirm/confirm.service.ts @@ -1,15 +1,22 @@ import { Injectable } from '@angular/core' import { Subject } from 'rxjs/Subject' import 'rxjs/add/operator/first' +import 'rxjs/add/operator/toPromise' @Injectable() export class ConfirmService { - showConfirm = new Subject<{ title, message }>() + showConfirm = new Subject<{ title: string, message: string, inputLabel?: string, expectedInputValue?: string }>() confirmResponse = new Subject() - confirm (message = '', title = '') { + confirm (message: string, title = '') { this.showConfirm.next({ title, message }) - return this.confirmResponse.asObservable().first() + return this.confirmResponse.asObservable().first().toPromise() + } + + confirmWithInput (message: string, inputLabel: string, expectedInputValue: string, title = '') { + this.showConfirm.next({ title, message, inputLabel, expectedInputValue }) + + return this.confirmResponse.asObservable().first().toPromise() } } diff --git a/client/src/app/core/core.module.ts b/client/src/app/core/core.module.ts index eea6f340b..36dbe8b5c 100644 --- a/client/src/app/core/core.module.ts +++ b/client/src/app/core/core.module.ts @@ -1,5 +1,6 @@ import { CommonModule } from '@angular/common' import { NgModule, Optional, SkipSelf } from '@angular/core' +import { FormsModule } from '@angular/forms' import { BrowserAnimationsModule } from '@angular/platform-browser/animations' import { RouterModule } from '@angular/router' import { LoadingBarModule } from '@ngx-loading-bar/core' @@ -18,6 +19,7 @@ import { ServerService } from './server' imports: [ CommonModule, RouterModule, + FormsModule, BrowserAnimationsModule, ModalModule, diff --git a/client/src/app/shared/guards/can-deactivate-guard.service.ts b/client/src/app/shared/guards/can-deactivate-guard.service.ts index 15618f699..c3b5f37f8 100644 --- a/client/src/app/shared/guards/can-deactivate-guard.service.ts +++ b/client/src/app/shared/guards/can-deactivate-guard.service.ts @@ -15,7 +15,7 @@ export class CanDeactivateGuard implements CanDeactivate currentRoute: ActivatedRouteSnapshot, currentState: RouterStateSnapshot, nextState: RouterStateSnapshot - ): Observable | boolean { + ) { const result = component.canDeactivate() const text = result.text || 'All unsaved data will be lost, are you sure you want to leave this page?' diff --git a/client/src/app/videos/+video-watch/comment/video-comments.component.ts b/client/src/app/videos/+video-watch/comment/video-comments.component.ts index 16f1a0643..711a01ba0 100644 --- a/client/src/app/videos/+video-watch/comment/video-comments.component.ts +++ b/client/src/app/videos/+video-watch/comment/video-comments.component.ts @@ -109,38 +109,35 @@ export class VideoCommentsComponent implements OnInit, OnChanges, OnDestroy { this.viewReplies(commentTree.comment.id) } - onWantedToDelete (commentToDelete: VideoComment) { + async onWantedToDelete (commentToDelete: VideoComment) { let message = 'Do you really want to delete this comment?' if (commentToDelete.totalReplies !== 0) message += `${commentToDelete.totalReplies} would be deleted too.` - this.confirmService.confirm(message, 'Delete').subscribe( - res => { - if (res === false) return - - this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id) - .subscribe( - () => { - // Delete the comment in the tree - if (commentToDelete.inReplyToCommentId) { - const thread = this.threadComments[commentToDelete.threadId] - if (!thread) { - console.error(`Cannot find thread ${commentToDelete.threadId} of the comment to delete ${commentToDelete.id}`) - return - } - - this.deleteLocalCommentThread(thread, commentToDelete) - return - } - - // Delete the thread - this.comments = this.comments.filter(c => c.id !== commentToDelete.id) - this.componentPagination.totalItems-- - }, - - err => this.notificationsService.error('Error', err.message) - ) - } - ) + const res = await this.confirmService.confirm(message, 'Delete') + if (res === false) return + + this.videoCommentService.deleteVideoComment(commentToDelete.videoId, commentToDelete.id) + .subscribe( + () => { + // Delete the comment in the tree + if (commentToDelete.inReplyToCommentId) { + const thread = this.threadComments[commentToDelete.threadId] + if (!thread) { + console.error(`Cannot find thread ${commentToDelete.threadId} of the comment to delete ${commentToDelete.id}`) + return + } + + this.deleteLocalCommentThread(thread, commentToDelete) + return + } + + // Delete the thread + this.comments = this.comments.filter(c => c.id !== commentToDelete.id) + this.componentPagination.totalItems-- + }, + + err => this.notificationsService.error('Error', err.message) + ) } isUserLoggedIn () { diff --git a/client/src/app/videos/+video-watch/video-watch.component.ts b/client/src/app/videos/+video-watch/video-watch.component.ts index 6b118b1de..d04d50310 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts @@ -130,24 +130,21 @@ export class VideoWatchComponent implements OnInit, OnDestroy { } } - blacklistVideo (event: Event) { + async blacklistVideo (event: Event) { event.preventDefault() - this.confirmService.confirm('Do you really want to blacklist this video?', 'Blacklist').subscribe( - res => { - if (res === false) return + const res = await this.confirmService.confirm('Do you really want to blacklist this video?', 'Blacklist') + if (res === false) return - this.videoBlacklistService.blacklistVideo(this.video.id) - .subscribe( - status => { - this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`) - this.router.navigate(['/videos/list']) - }, + this.videoBlacklistService.blacklistVideo(this.video.id) + .subscribe( + status => { + this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`) + this.router.navigate(['/videos/list']) + }, - error => this.notificationsService.error('Error', error.message) - ) - } - ) + error => this.notificationsService.error('Error', error.message) + ) } showMoreDescription () { @@ -236,26 +233,22 @@ export class VideoWatchComponent implements OnInit, OnDestroy { return this.video.isRemovableBy(this.authService.getUser()) } - removeVideo (event: Event) { + async removeVideo (event: Event) { event.preventDefault() - this.confirmService.confirm('Do you really want to delete this video?', 'Delete') - .subscribe( - res => { - if (res === false) return + const res = await this.confirmService.confirm('Do you really want to delete this video?', 'Delete') + if (res === false) return - this.videoService.removeVideo(this.video.id) - .subscribe( - status => { - this.notificationsService.success('Success', `Video ${this.video.name} deleted.`) + this.videoService.removeVideo(this.video.id) + .subscribe( + status => { + this.notificationsService.success('Success', `Video ${this.video.name} deleted.`) - // Go back to the video-list. - this.router.navigate([ '/videos/list' ]) - }, + // Go back to the video-list. + this.router.navigate([ '/videos/list' ]) + }, - error => this.notificationsService.error('Error', error.message) - ) - } + error => this.notificationsService.error('Error', error.message) ) } diff --git a/server/controllers/client.ts b/server/controllers/client.ts index 2fcca6f76..df2eee9c9 100644 --- a/server/controllers/client.ts +++ b/server/controllers/client.ts @@ -10,7 +10,7 @@ import { VideoModel } from '../models/video/video' const clientsRouter = express.Router() const distPath = join(root(), 'client', 'dist') -const assetsImagesPath = join(root(), 'client', 'dist', 'client', 'assets', 'images') +const assetsImagesPath = join(root(), 'client', 'dist', 'assets', 'images') const embedPath = join(distPath, 'standalone', 'videos', 'embed.html') const indexPath = join(distPath, 'index.html') -- 2.41.0