wip

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
 >
+  <div class="absolute right-8 top-8">
+    <IconButton
+      icon={mdiQrcode}
+      shape="round"
+      aria-label="Signin With QR Code"
+      onclick={() => qrCodeLoginStore.showForm()}
+    />
+  </div>
   <div
     class="mx-4 mt-4 flex flex-col items-center justify-center gap-4 rounded-3xl bg-white p-4 dark:bg-immich-dark-primary/10"
   >

web/src/lib/components/shared-components/qrcode-login-form.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
+  import { qrCodeLoginStore } from '$lib/stores/qrcode-login.svelte';
+  import { Button, Input } from '@immich/ui';
+
+  let password = $state('');
+
+  const submitPassword = (event: Event) => {
+    event.preventDefault();
+
+    console.log('Password submitted:', password);
+  };
+</script>
+
+{#if qrCodeLoginStore.shouldShowForm}
+  <div id="instance-qr-login">
+    <FullScreenModal title={'Login QR Code'} onClose={() => {}}>
+      <p class="text-xs">Enter your password to show the QR code</p>
+
+      <div class="mt-4">
+        <form onsubmit={submitPassword}>
+          <Input size="small" placeholder="Password" type="password" bind:value={password} required />
+
+          <div class="mt-6">
+            <Button type="submit" size="small" shape="round" fullWidth>Confirm</Button>
+          </div>
+        </form>
+      </div>
+    </FullScreenModal>
+  </div>
+{/if}

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();

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 @@
 <UploadPanel />
 <NotificationList />
 <DialogWrapper />
+<QRCodeLoginForm />
 
 {#if $user?.isAdmin}
   <VersionAnnouncementBox />