diff --git a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte index 5bf3f0a621..e3f96f59b0 100644 --- a/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte +++ b/web/src/lib/components/shared-components/navigation-bar/account-info-panel.svelte @@ -8,12 +8,14 @@ import { preferences, user } from '$lib/stores/user.store'; import { handleError } from '$lib/utils/handle-error'; import { deleteProfileImage, updateMyPreferences, type UserAvatarColor } from '@immich/sdk'; - import { mdiCog, mdiLogout, mdiPencil, mdiWrench } from '@mdi/js'; + import { mdiCog, mdiLogout, mdiPencil, mdiQrcode, mdiWrench } from '@mdi/js'; import { t } from 'svelte-i18n'; import { fade } from 'svelte/transition'; import { NotificationType, notificationController } from '../notification/notification'; import UserAvatar from '../user-avatar.svelte'; import AvatarSelector from './avatar-selector.svelte'; + import { IconButton } from '@immich/ui'; + import { qrCodeLoginStore } from '$lib/stores/qrcode-login.svelte'; interface Props { onLogout: () => void; @@ -51,6 +53,14 @@ class="absolute right-[25px] top-[75px] z-[100] w-[min(360px,100vw-50px)] rounded-3xl bg-gray-200 shadow-lg dark:border dark:border-immich-dark-gray dark:bg-immich-dark-gray" use:focusTrap > +
+ qrCodeLoginStore.showForm()} + /> +
diff --git a/web/src/lib/components/shared-components/qrcode-login-form.svelte b/web/src/lib/components/shared-components/qrcode-login-form.svelte new file mode 100644 index 0000000000..6379b3eb3a --- /dev/null +++ b/web/src/lib/components/shared-components/qrcode-login-form.svelte @@ -0,0 +1,31 @@ + + +{#if qrCodeLoginStore.shouldShowForm} +
+ {}}> +

Enter your password to show the QR code

+ +
+
+ + +
+ +
+
+
+
+
+{/if} diff --git a/web/src/lib/stores/qrcode-login.svelte.ts b/web/src/lib/stores/qrcode-login.svelte.ts new file mode 100644 index 0000000000..13a36412c4 --- /dev/null +++ b/web/src/lib/stores/qrcode-login.svelte.ts @@ -0,0 +1,13 @@ +class QRCodeLoginStore { + shouldShowForm = $state(false); + + showForm() { + this.shouldShowForm = true; + } + + hideForm() { + this.shouldShowForm = false; + } +} + +export const qrCodeLoginStore = new QRCodeLoginStore(); diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index 2706ead46e..fb36ee499b 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -22,6 +22,7 @@ import { setTranslations } from '@immich/ui'; import '../app.css'; import { t } from 'svelte-i18n'; + import QRCodeLoginForm from '$lib/components/shared-components/qrcode-login-form.svelte'; interface Props { children?: Snippet; @@ -154,6 +155,7 @@ + {#if $user?.isAdmin}