self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-06-17 03:47:45 +02:00
Code Issues Releases Activity

fix(web): Improve UI/UX for shared link form (#4685)

Browse Source 
* chore(web): Improve shared link form

* add verification for password

* improve ux
This commit is contained in:
Alex
2023-10-29 13:50:43 -05:00
committed by GitHub
parent daad02504f
commit a6f39bc74f
3 changed files with 35 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
web/src/lib/components/shared-components/create-share-link-modal/create-shared-link-modal.svelte
View File

@ -27,6 +27,8 @@
let password = '';
let shouldChangeExpirationTime = false;
let canCopyImagesToClipboard = true;
let enablePassword = false;
const dispatch = createEventDispatcher();
const expiredDateOption: ImmichDropDownOption = {
@ -50,6 +52,8 @@
albumId = editingLink.album?.id;
assetIds = editingLink.assets.map(({ id }) => id);
enablePassword = !!editingLink.password;
}
const module = await import('copy-image-clipboard');
@ -124,7 +128,7 @@
id: editingLink.id,
sharedLinkEditDto: {
description,
password,
password: enablePassword ? password : '',
expiresAt: shouldChangeExpirationTime ? expirationDate : undefined,
allowUpload,
allowDownload,
@ -184,14 +188,23 @@
<div class="mb-2 mt-4">
<p class="text-xs">LINK OPTIONS</p>
</div>
<div class="rounded-lg bg-gray-100 p-4 dark:bg-black/40 max-h-[330px] overflow-y-scroll">
<div class="rounded-lg bg-gray-100 p-4 dark:bg-black/40 overflow-y-auto">
<div class="flex flex-col">
<div class="mb-2">
<SettingInputField inputType={SettingInputFieldType.TEXT} label="Description" bind:value={description} />
</div>
<div class="mb-2">
<SettingInputField inputType={SettingInputFieldType.TEXT} label="Password" bind:value={password} />
<SettingInputField
inputType={SettingInputFieldType.TEXT}
label="Password"
bind:value={password}
disabled={!enablePassword}
/>
</div>
<div class="my-3">
<SettingSwitch bind:checked={enablePassword} title={'Require password'} />
</div>
<div class="my-3">
@ -227,7 +240,7 @@
<hr />
<section class="m-6">
<section slot="sticky-bottom">
{#if !sharedLink}
{#if editingLink}
<div class="flex justify-end">