diff --git a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte index 5b1298c262..8f687f3b66 100644 --- a/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte +++ b/web/src/lib/components/admin-page/delete-confirm-dialoge.svelte @@ -1,7 +1,7 @@ -
-
-

- Confirm User Deletion -

-
-
-

- {user.firstName} - {user.lastName} account and assets along will be marked to delete completely after 7 days. are - you sure you want to proceed ? -

- -
- + + +
+

+ {user.firstName} {user.lastName}'s account and assets will be permanently deleted + after 7 days. +

+

Are you sure you want to continue?

-
-
+ + diff --git a/web/src/lib/components/admin-page/restore-dialoge.svelte b/web/src/lib/components/admin-page/restore-dialoge.svelte index 6573e04f6a..d780064135 100644 --- a/web/src/lib/components/admin-page/restore-dialoge.svelte +++ b/web/src/lib/components/admin-page/restore-dialoge.svelte @@ -1,7 +1,7 @@ -
-
-

- Restore User -

-
-
-

- {user.firstName} - {user.lastName} account will restored -

- -
- -
-
-
+ +

{user.firstName} {user.lastName}'s account will be restored.

+ + diff --git a/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte b/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte index 1a8d238b4e..37f740d430 100644 --- a/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte +++ b/web/src/lib/components/admin-page/settings/confirm-disable-login.svelte @@ -4,12 +4,9 @@ -
-

- Are you sure you want to disable all login methods? Login will be completely disabled. -

- -

+

+

Are you sure you want to disable all login methods? Login will be completely disabled.

+

To re-enable, use a { - if ( - window.confirm( - `Are you sure you want to delete album ${album.albumName}? If the album is shared, other users will not be able to access it.` - ) - ) { - try { - await api.albumApi.deleteAlbum({ id: album.id }); - goto(backUrl); - } catch (e) { - console.error('Error [userDeleteMenu] ', e); - notificationController.show({ - type: NotificationType.Error, - message: 'Error deleting album, check console for more details' - }); - } + try { + await api.albumApi.deleteAlbum({ id: album.id }); + goto(backUrl); + } catch (e) { + console.error('Error [userDeleteMenu] ', e); + notificationController.show({ + type: NotificationType.Error, + message: 'Error deleting album, check console for more details' + }); + } finally { + isShowDeleteConfirmation = false; } }; @@ -348,7 +346,11 @@ on:click={() => (isShowShareUserSelection = true)} logo={ShareVariantOutline} /> - + (isShowDeleteConfirmation = true)} + logo={DeleteOutline} + /> {/if} {/if} @@ -515,3 +517,17 @@ on:thumbnail-selected={setAlbumThumbnailHandler} /> {/if} + +{#if isShowDeleteConfirmation} + (isShowDeleteConfirmation = false)} + > + +

Are you sure you want to delete the album {album.albumName}?

+

If this album is shared, other users will not be able to access it anymore.

+ + +{/if} diff --git a/web/src/lib/components/asset-viewer/asset-viewer.svelte b/web/src/lib/components/asset-viewer/asset-viewer.svelte index 0a073f63f9..358572001b 100644 --- a/web/src/lib/components/asset-viewer/asset-viewer.svelte +++ b/web/src/lib/components/asset-viewer/asset-viewer.svelte @@ -21,6 +21,7 @@ import DetailPanel from './detail-panel.svelte'; import PhotoViewer from './photo-viewer.svelte'; import VideoViewer from './video-viewer.svelte'; + import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte'; import { assetStore } from '$lib/stores/assets.store'; import { isShowDetail } from '$lib/stores/preferences.store'; @@ -37,6 +38,7 @@ let halfRightHover = false; let appearsInAlbums: AlbumResponseDto[] = []; let isShowAlbumPicker = false; + let isShowDeleteConfirmation = false; let addToSharedAlbum = true; let shouldPlayMotionPhoto = false; let shouldShowDownloadButton = sharedLink ? sharedLink.allowDownload : true; @@ -77,7 +79,7 @@ closeViewer(); return; case 'Delete': - deleteAsset(); + isShowDeleteConfirmation = true; return; case 'i': $isShowDetail = !$isShowDetail; @@ -116,23 +118,17 @@ const deleteAsset = async () => { try { - if ( - window.confirm( - `Caution! Are you sure you want to delete this asset? This step also deletes this asset in the album(s) to which it belongs. You can not undo this action!` - ) - ) { - const { data: deletedAssets } = await api.assetApi.deleteAsset({ - deleteAssetDto: { - ids: [asset.id] - } - }); + const { data: deletedAssets } = await api.assetApi.deleteAsset({ + deleteAssetDto: { + ids: [asset.id] + } + }); - navigateAssetForward(); + navigateAssetForward(); - for (const asset of deletedAssets) { - if (asset.status == 'SUCCESS') { - assetStore.removeAsset(asset.id); - } + for (const asset of deletedAssets) { + if (asset.status == 'SUCCESS') { + assetStore.removeAsset(asset.id); } } } catch (e) { @@ -140,7 +136,9 @@ type: NotificationType.Error, message: 'Error deleting this asset, check console for more details' }); - console.error('Error deleteSelectedAssetHandler', e); + console.error('Error deleteAsset', e); + } finally { + isShowDeleteConfirmation = false; } }; @@ -227,6 +225,17 @@ }); } }; + + const getAssetType = () => { + switch (asset.type) { + case 'IMAGE': + return 'Photo'; + case 'VIDEO': + return 'Video'; + default: + return 'Asset'; + } + };
downloadFile(asset, publicSharedKey)} - on:delete={deleteAsset} + on:delete={() => (isShowDeleteConfirmation = true)} on:favorite={toggleFavorite} on:addToAlbum={() => openAlbumPicker(false)} on:addToSharedAlbum={() => openAlbumPicker(true)} @@ -358,6 +367,23 @@ on:close={() => (isShowAlbumPicker = false)} /> {/if} + + {#if isShowDeleteConfirmation} + (isShowDeleteConfirmation = false)} + > + +

+ Are you sure you want to delete this {getAssetType().toLowerCase()}? This will also remove + it from its album(s). +

+

You cannot undo this action!

+ + + {/if}