refactor: user page modals (#18147)

web/src/lib/modals/ApiKeySecretModal.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { copyToClipboard } from '$lib/utils';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { mdiKeyVariant } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    secret?: string;
+    onClose: () => void;
+  }
+
+  let { secret = '', onClose }: Props = $props();
+</script>
+
+<Modal title={$t('api_key')} icon={mdiKeyVariant} {onClose} size="small">
+  <ModalBody>
+    <div class="text-immich-primary dark:text-immich-dark-primary">
+      <p class="text-sm dark:text-immich-dark-fg">
+        {$t('api_key_description')}
+      </p>
+    </div>
+
+    <div class="my-4 flex flex-col gap-2">
+      <!-- <label class="immich-form-label" for="secret">{ $t("api_key") }</label> -->
+      <textarea class="immich-form-input" id="secret" name="secret" readonly={true} value={secret}></textarea>
+    </div>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      <Button shape="round" onclick={() => copyToClipboard(secret)} fullWidth>{$t('copy_to_clipboard')}</Button>
+      <Button shape="round" onclick={onClose} fullWidth>{$t('done')}</Button>
+    </div>
+  </ModalFooter>
+</Modal>