Andreas Reinhold / reiniandClaude Opus 5
504971ad7f
Uploaders no longer have to make up a share password. With "Password protect" on, the upload page has Generate and Copy under the field, and the page the upload leads to offers the password once more beside the link: masked, with the same copy button at the end of the field as the link's. The password also derives the share's encryption key and only its hash is stored, so a lost one means files nobody can open. - PasswordGeneratorService draws from Random\Randomizer's secure engine. Characters are drawn uniformly and redrawn until every chosen set appears; passphrases come from EFF's large word list (CC BY 3.0 US, credited in the README), without its four hyphenated words. - Admin settings gain a "Share Passwords" card: mode (off, on request, prefilled as protection is switched on), kind (characters: length 12–64, the sets, look-alikes left out; passphrase: 4–10 words and a separator), and an example with its estimated entropy that follows the form before saving. Fields the chosen mode or kind hides are excluded from validation and keep their saved value. The default is on request, 20 letters and numbers without look-alikes. - FileUploader flashes the password encrypted with the share's token; ShareCreated shows it only when the token matches, so a reload or any other visitor sees nothing. Crypt covers installs without SESSION_ENCRYPT, which the Docker setup does not set. - The symbol set leaves out what chat apps turn into formatting and what breaks inside quotes, so a pasted password arrives unchanged. - app.css imports group.css for <x-group>; .ai/rules/views.md records that <x-group> drops data-test and other attributes. - Tests cover the generator, the admin card's saving, validation and example, prefill and generate on the upload page, the flash, and in Chromium Generate and Copy on the upload page and the masked copy on the share page. The admin settings page now has six headed sections. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
228 lines
12 KiB
PHP
228 lines
12 KiB
PHP
<x-pane class="upload-column">
|
|
<x-stack gap="space400">
|
|
<x-stack align="center" gap="space200">
|
|
@if ($siteLogo)
|
|
<img src="{{ Storage::disk('public')->url($siteLogo) }}" alt="{{ $siteTitle ?: config('app.name', 'SealShare') }}" class="upload-site-logo" />
|
|
@endif
|
|
|
|
<x-stack align="center" gap="space100">
|
|
<h1 class="md-type-headline-lg md-text-center">{{ $siteTitle ?: config('app.name', 'SealShare') }}</h1>
|
|
|
|
<p class="md-type-body-lg md-ink-variant md-text-center">{{ $siteDescription ?: __('Share your files safely and securely') }}</p>
|
|
</x-stack>
|
|
</x-stack>
|
|
|
|
@if ($isStorageFull)
|
|
<x-alert color="warning" :title="__('Storage is full. Uploads are temporarily disabled.')" />
|
|
@else
|
|
<x-form
|
|
wire:submit="createShare"
|
|
x-data="{
|
|
uploading: false,
|
|
progress: 0,
|
|
dragging: false,
|
|
handleDrop(e) {
|
|
this.dragging = false;
|
|
const items = e.dataTransfer.items;
|
|
const files = [];
|
|
|
|
for (let i = 0; i < items.length; i++) {
|
|
const entry = items[i].webkitGetAsEntry?.();
|
|
if (entry) {
|
|
this.traverseEntry(entry, '', files);
|
|
} else if (items[i].kind === 'file') {
|
|
files.push({ file: items[i].getAsFile(), path: null });
|
|
}
|
|
}
|
|
|
|
setTimeout(() => {
|
|
if (! files.length) {
|
|
return;
|
|
}
|
|
|
|
const dt = new DataTransfer();
|
|
const paths = [];
|
|
files.forEach(f => {
|
|
dt.items.add(f.file);
|
|
paths.push(f.path);
|
|
});
|
|
|
|
$wire.relativePaths = [...($wire.relativePaths ?? []), ...paths];
|
|
|
|
this.uploading = true;
|
|
this.progress = 0;
|
|
|
|
$wire.uploadMultiple(
|
|
'files',
|
|
dt.files,
|
|
() => this.progress = 100,
|
|
() => this.resetUpload(),
|
|
(event) => this.progress = event.detail.progress,
|
|
() => this.resetUpload(),
|
|
);
|
|
}, 500);
|
|
},
|
|
resetUpload() {
|
|
this.uploading = false;
|
|
this.progress = 0;
|
|
},
|
|
traverseEntry(entry, path, files) {
|
|
if (entry.isFile) {
|
|
entry.file(file => {
|
|
files.push({ file, path: path ? path + '/' + file.name : null });
|
|
});
|
|
} else if (entry.isDirectory) {
|
|
const reader = entry.createReader();
|
|
reader.readEntries(entries => {
|
|
entries.forEach(e => this.traverseEntry(e, path ? path + '/' + entry.name : entry.name, files));
|
|
});
|
|
}
|
|
}
|
|
}"
|
|
x-init="$wire.$on('files-processed', () => resetUpload())"
|
|
x-on:livewire-upload-start="uploading = true; progress = 0"
|
|
x-on:livewire-upload-finish="progress = 100"
|
|
x-on:livewire-upload-cancel="resetUpload()"
|
|
x-on:livewire-upload-error="resetUpload()"
|
|
x-on:livewire-upload-progress="progress = $event.detail.progress"
|
|
>
|
|
{{-- Drop zone: the shape behind the icon turns into a burst while files are over it. --}}
|
|
<div
|
|
class="upload-drop-zone"
|
|
x-bind:data-dragging="dragging ? 'true' : 'false'"
|
|
x-bind:aria-disabled="uploading ? 'true' : 'false'"
|
|
x-on:dragover.prevent="dragging = true"
|
|
x-on:dragleave.prevent="dragging = false"
|
|
x-on:drop.prevent="handleDrop($event)"
|
|
data-test="drop-zone"
|
|
>
|
|
<x-stack align="center" gap="space200">
|
|
<div class="upload-drop-shapes">
|
|
<x-shape name="cookie-9" class="upload-drop-shape upload-drop-shape--idle" />
|
|
<x-shape name="soft-burst" class="upload-drop-shape upload-drop-shape--burst" data-test="drop-zone-burst" />
|
|
<x-icon name="upload" size="48" class="upload-drop-icon" />
|
|
</div>
|
|
|
|
<x-stack align="center" gap="space50">
|
|
<p class="md-type-title-md md-text-center">{{ __('Drag & drop files or folders here') }}</p>
|
|
<p class="md-type-body-md md-ink-variant md-text-center">{{ __('or click to browse') }}</p>
|
|
</x-stack>
|
|
|
|
{{-- The button is the tab stop and opens the browser's own picker; the input only carries the upload. --}}
|
|
<x-button :label="__('Browse Files')" icon="folder_open" variant="outlined" x-on:click="$refs.picker.click()" x-bind:disabled="uploading" />
|
|
<input type="file" wire:model="files" multiple hidden x-ref="picker" x-bind:disabled="uploading" />
|
|
</x-stack>
|
|
</div>
|
|
|
|
{{-- Upload progress --}}
|
|
<div x-show="uploading" x-cloak data-test="upload-progress">
|
|
<x-stack x-show="progress < 100" gap="space100">
|
|
<x-row justify="between">
|
|
<span class="md-type-label-lg">{{ __('Uploading...') }} <span x-text="Math.round(progress)"></span>%</span>
|
|
<x-button :label="__('Cancel')" size="xs" x-on:click="$wire.cancelUpload('files')" />
|
|
</x-row>
|
|
<x-progress bind="progress" wavy :label="__('Uploading')" />
|
|
</x-stack>
|
|
<x-row x-show="progress >= 100" gap="space100">
|
|
<x-loading class="upload-processing-indicator" :label="false" />
|
|
<span class="md-type-label-lg">{{ __('Processing files...') }}</span>
|
|
</x-row>
|
|
</div>
|
|
|
|
@error('files')
|
|
<x-alert color="error">{{ $message }}</x-alert>
|
|
@enderror
|
|
|
|
{{-- Selected files --}}
|
|
@if (count($files))
|
|
<x-stack gap="space100">
|
|
<h2 class="md-type-title-lg">{{ __('Selected Files') }} ({{ count($files) }})</h2>
|
|
|
|
<div class="upload-file-list">
|
|
<x-list segmented :label="__('Selected Files')">
|
|
@foreach ($files as $index => $file)
|
|
<x-list-item
|
|
:title="$relativePaths[$index] ?? $file->getClientOriginalName()"
|
|
icon="description"
|
|
wire:key="selected-file-{{ $index }}"
|
|
>
|
|
<x-slot:description><span class="md-tabular">{{ Number::fileSize($file->getSize()) }}</span></x-slot:description>
|
|
<x-slot:end>
|
|
<x-button icon="close" :aria-label="__('Remove')" wire:click="removeFile({{ $index }})" />
|
|
</x-slot:end>
|
|
</x-list-item>
|
|
@endforeach
|
|
</x-list>
|
|
</div>
|
|
</x-stack>
|
|
@endif
|
|
|
|
{{-- Options --}}
|
|
<x-card :title="__('Share Options')" heading="h2" variant="outlined">
|
|
<x-stack gap="space200">
|
|
<x-toggle wire:model.live="usePassword" :label="__('Password protect')" right />
|
|
|
|
@if ($usePassword)
|
|
<x-stack gap="space100">
|
|
<x-password full wire:model="password" :label="__('Password')" autocomplete="new-password" />
|
|
|
|
{{-- Generate draws one as Admin settings say (App\Services\PasswordGeneratorService); Copy takes
|
|
whatever is in the field, typed or generated, with the snackbar a copyable field shows. --}}
|
|
<x-row gap="space100" wrap>
|
|
@if ($passwordGeneratorMode !== 'off')
|
|
<x-button :label="__('Generate')" icon="password" variant="tonal" wire:click="generatePassword" spinner="generatePassword" data-test="generate-password" />
|
|
@endif
|
|
|
|
<x-button
|
|
:label="__('Copy')"
|
|
icon="content_copy"
|
|
variant="tonal"
|
|
x-on:click="navigator.clipboard.writeText($wire.password).then(() => window.materialToast({{ \Illuminate\Support\Js::from(__('Copied to the clipboard')) }}, { type: 'success' }))"
|
|
x-bind:disabled="! $wire.password"
|
|
data-test="copy-password"
|
|
/>
|
|
</x-row>
|
|
</x-stack>
|
|
@endif
|
|
|
|
<x-select full
|
|
wire:model="expiration"
|
|
:label="__('Expiration')"
|
|
:placeholder="$allowNeverExpire ? __('Never') : null"
|
|
:options="[
|
|
['id' => '1h', 'name' => __('1 Hour')],
|
|
['id' => '24h', 'name' => __('24 Hours')],
|
|
['id' => '48h', 'name' => __('48 Hours')],
|
|
['id' => '7d', 'name' => __('7 Days')],
|
|
['id' => '14d', 'name' => __('14 Days')],
|
|
['id' => '30d', 'name' => __('30 Days')],
|
|
]"
|
|
/>
|
|
|
|
<x-input full
|
|
wire:model="maxDownloads"
|
|
:label="__('Max downloads')"
|
|
type="number"
|
|
min="1"
|
|
:placeholder="__('Unlimited')"
|
|
/>
|
|
</x-stack>
|
|
</x-card>
|
|
|
|
<x-slot:actions>
|
|
<x-button
|
|
type="submit"
|
|
:label="__('Create Share Link')"
|
|
variant="filled"
|
|
size="md"
|
|
icon="link"
|
|
spinner="createShare"
|
|
x-bind:disabled="uploading || {{ count($files) === 0 ? 'true' : 'false' }}"
|
|
data-test="create-share"
|
|
/>
|
|
</x-slot:actions>
|
|
</x-form>
|
|
@endif
|
|
</x-stack>
|
|
</x-pane>
|