mirror of
https://github.com/BookStackApp/BookStack.git
synced 2026-10-12 02:01:37 +00:00
Review of #6213, to hide image upload options when lacking permission
- Updated element control to add/remove content instead of using CSS display.
This commit is contained in:
@@ -18,11 +18,11 @@ export class ImageManager extends Component {
|
||||
this.listContainer = this.$refs.listContainer;
|
||||
this.filterTabs = this.$manyRefs.filterTabs;
|
||||
this.selectButton = this.$refs.selectButton;
|
||||
this.uploadButton = this.$refs.uploadButton;
|
||||
this.uploadButton = this.$refs.uploadButton || null;
|
||||
this.uploadHint = this.$refs.uploadHint;
|
||||
this.formContainer = this.$refs.formContainer;
|
||||
this.formContainerPlaceholder = this.$refs.formContainerPlaceholder;
|
||||
this.dropzoneContainer = this.$refs.dropzoneContainer;
|
||||
this.dropzoneContainer = this.$refs.dropzoneContainer || null;
|
||||
this.loadMore = this.$refs.loadMore;
|
||||
|
||||
// Instance data
|
||||
@@ -139,13 +139,15 @@ export class ImageManager extends Component {
|
||||
this.getPopup().show();
|
||||
|
||||
const hideUploads = type !== 'gallery';
|
||||
this.dropzoneContainer.classList.toggle('hidden', hideUploads);
|
||||
this.uploadButton.classList.toggle('hidden', hideUploads);
|
||||
this.uploadHint.classList.toggle('hidden', hideUploads);
|
||||
this.dropzoneContainer?.toggleAttribute('hidden', hideUploads);
|
||||
this.uploadButton?.toggleAttribute('hidden', hideUploads);
|
||||
this.uploadHint.toggleAttribute('hidden', hideUploads);
|
||||
|
||||
/** @var {Dropzone} * */
|
||||
/** @var {Dropzone|null} * */
|
||||
const dropzone = window.$components.firstOnElement(this.container, 'dropzone');
|
||||
dropzone.toggleActive(!hideUploads);
|
||||
if (dropzone) {
|
||||
dropzone.toggleActive(!hideUploads);
|
||||
}
|
||||
|
||||
if (!this.hasData) {
|
||||
this.loadGallery();
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
&& userCan(\BookStack\Permissions\Permission::ImageCreateAll)
|
||||
&& userCan(\BookStack\Permissions\Permission::PageUpdate, $page);
|
||||
@endphp
|
||||
<div components="image-manager dropzone"
|
||||
<div components="image-manager {{ $canUploadImages ? 'dropzone' : '' }}"
|
||||
option:dropzone:url="{{ url('/images/gallery?' . http_build_query(['uploaded_to' => $uploaded_to ?? 0])) }}"
|
||||
option:dropzone:success-message="{{ trans('components.image_upload_success') }}"
|
||||
option:dropzone:error-message="{{ trans('errors.image_upload_error') }}"
|
||||
@@ -21,16 +21,17 @@
|
||||
<div class="popup-body" tabindex="-1">
|
||||
<div class="popup-header primary-background">
|
||||
<div class="popup-title">{{ trans('components.image_select') }}</div>
|
||||
<button refs="dropzone@selectButton image-manager@uploadButton" type="button"
|
||||
@if(!$canUploadImages) style="display: none;" @endif>
|
||||
<span>@icon('upload')</span>
|
||||
<span>{{ trans('components.image_upload') }}</span>
|
||||
</button>
|
||||
<button refs="popup@hide"
|
||||
type="button"
|
||||
title="{{ trans('common.close') }}"
|
||||
class="popup-header-close">@icon('close')
|
||||
@if($canUploadImages)
|
||||
<button refs="dropzone@selectButton image-manager@uploadButton" type="button">
|
||||
<span>@icon('upload')</span>
|
||||
<span>{{ trans('components.image_upload') }}</span>
|
||||
</button>
|
||||
@endif
|
||||
<button refs="popup@hide"
|
||||
type="button"
|
||||
title="{{ trans('common.close') }}"
|
||||
class="popup-header-close">@icon('close')
|
||||
</button>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -107,16 +108,19 @@
|
||||
aria-labelledby="image-manager-info-tab"
|
||||
class="image-manager-sidebar flex-container-column">
|
||||
|
||||
<div refs="image-manager@dropzoneContainer">
|
||||
<div refs="dropzone@status-area"></div>
|
||||
</div>
|
||||
@if($canUploadImages)
|
||||
<div refs="image-manager@dropzoneContainer">
|
||||
<div refs="dropzone@status-area"></div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<div refs="image-manager@form-container-placeholder" class="p-m text-small text-muted">
|
||||
<p @if(!$canUploadImages) style="display: none;" @endif>{{ trans('components.image_intro') }}</p>
|
||||
<p refs="image-manager@upload-hint" @if(!$canUploadImages) style="display: none;" @endif>{{ trans('components.image_intro_upload') }}</p>
|
||||
@unless($canUploadImages)
|
||||
<p>{{ trans('components.image_no_upload_permission') }}</p>
|
||||
@endunless
|
||||
<p>{{ trans('components.image_intro') }}</p>
|
||||
@if($canUploadImages)
|
||||
<p refs="image-manager@upload-hint">{{ trans('components.image_intro_upload') }}</p>
|
||||
@else
|
||||
<p refs="image-manager@upload-hint">{{ trans('components.image_no_upload_permission') }}</p>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<div refs="image-manager@formContainer" class="inner flex">
|
||||
|
||||
@@ -695,7 +695,8 @@ class ImageTest extends TestCase
|
||||
$editor = $this->users->editor();
|
||||
|
||||
$resp = $this->actingAs($editor)->get($page->getUrl('/edit'));
|
||||
$this->withHtml($resp)->assertElementNotExists('[refs~="image-manager@uploadButton"]', ['style' => 'display: none;']);
|
||||
$this->withHtml($resp)->assertElementExists('[refs~="image-manager@uploadButton"]');
|
||||
$this->withHtml($resp)->assertElementExists('[refs="image-manager@dropzoneContainer"]');
|
||||
$resp->assertDontSee('You do not have permission to upload new images.');
|
||||
|
||||
// Viewer with page-update permission but no image-create-all permission
|
||||
@@ -703,14 +704,16 @@ class ImageTest extends TestCase
|
||||
$this->permissions->setEntityPermissionsForRole($page, ['view', 'update'], $viewer->roles()->first());
|
||||
|
||||
$resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
|
||||
$this->withHtml($resp)->assertElementExists('[refs~="image-manager@uploadButton"]', ['style' => 'display: none;']);
|
||||
$this->withHtml($resp)->assertElementNotExists('[refs~="image-manager@uploadButton"]');
|
||||
$this->withHtml($resp)->assertElementNotExists('[refs="image-manager@dropzoneContainer"]');
|
||||
$resp->assertSee('You do not have permission to upload new images.');
|
||||
|
||||
// Grant image-create-all, upload options should now be enabled
|
||||
$this->permissions->grantUserRolePermissions($viewer, ['image-create-all']);
|
||||
|
||||
$resp = $this->actingAs($viewer)->get($page->getUrl('/edit'));
|
||||
$this->withHtml($resp)->assertElementNotExists('[refs~="image-manager@uploadButton"]', ['style' => 'display: none;']);
|
||||
$this->withHtml($resp)->assertElementExists('[refs~="image-manager@uploadButton"]');
|
||||
$this->withHtml($resp)->assertElementExists('[refs="image-manager@dropzoneContainer"]');
|
||||
$resp->assertDontSee('You do not have permission to upload new images.');
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user