mirror of
https://github.com/immich-app/immich
synced 2025-06-09 20:38:10 +00:00
796c933fb8
* feat(web,a11y): standardize the FullScreenModal look * consistent header, padding, close button, and radius as BaseModal * vertically stacking ConfirmDialogue CTA buttons in narrow screens * adding aria-modal tags for screen reader * add viewport-specific height limits on modals, to enable scrolling * prevent focus from being hidden under sticky content in modals * standardize FullScreenModal widths using a Prop * wip: consistent padding with header * fix: alignment on "create user" and "edit user" modals * fix: horizontal modal content alignment * fix: create user CTA buttons * chore: remove unnecessary warning --------- Co-authored-by: Jason Rasmussen <jrasm91@gmail.com>
41 lines
1.5 KiB
Svelte
41 lines
1.5 KiB
Svelte
<script lang="ts">
|
|
import { copyToClipboard } from '$lib/utils';
|
|
import { mdiKeyVariant } from '@mdi/js';
|
|
import { createEventDispatcher, onMount } from 'svelte';
|
|
import Button from '../elements/buttons/button.svelte';
|
|
import FullScreenModal from '../shared-components/full-screen-modal.svelte';
|
|
|
|
export let secret = '';
|
|
|
|
const dispatch = createEventDispatcher<{
|
|
done: void;
|
|
}>();
|
|
const handleDone = () => dispatch('done');
|
|
let canCopyImagesToClipboard = true;
|
|
|
|
onMount(async () => {
|
|
const module = await import('copy-image-clipboard');
|
|
canCopyImagesToClipboard = module.canCopyImagesToClipboard();
|
|
});
|
|
</script>
|
|
|
|
<FullScreenModal id="api-key-secret-modal" title="API key" icon={mdiKeyVariant} onClose={() => handleDone()}>
|
|
<div class="text-immich-primary dark:text-immich-dark-primary">
|
|
<p class="text-sm dark:text-immich-dark-fg">
|
|
This value will only be shown once. Please be sure to copy it before closing the window.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="my-4 flex flex-col gap-2">
|
|
<!-- <label class="immich-form-label" for="secret">API Key</label> -->
|
|
<textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret} />
|
|
</div>
|
|
|
|
<div class="mt-8 flex w-full gap-4">
|
|
{#if canCopyImagesToClipboard}
|
|
<Button on:click={() => copyToClipboard(secret)} fullwidth>Copy to Clipboard</Button>
|
|
{/if}
|
|
<Button on:click={() => handleDone()} fullwidth>Done</Button>
|
|
</div>
|
|
</FullScreenModal>
|