From 083ee0b5fe35ff7296d8099590c6d1620b6c2998 Mon Sep 17 00:00:00 2001
From: Mees Frensel <33722705+meesfrensel@users.noreply.github.com>
Date: Wed, 21 Jan 2026 16:53:15 +0100
Subject: [PATCH] fix(web): allow exiting pin setup flow (#25413)

---
 web/src/routes/auth/pin-prompt/+page.svelte | 20 +++++++++-----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/web/src/routes/auth/pin-prompt/+page.svelte b/web/src/routes/auth/pin-prompt/+page.svelte
index 360966dab5..c14d4cf423 100644
--- a/web/src/routes/auth/pin-prompt/+page.svelte
+++ b/web/src/routes/auth/pin-prompt/+page.svelte
@@ -40,9 +40,9 @@
 </script>
 
 <AuthPageLayout withHeader={false}>
-  {#if hasPinCode}
-    <div class="flex items-center justify-center">
-      <div class="w-96 flex flex-col gap-6 items-center justify-center">
+  <div class="flex items-center justify-center">
+    <div class="w-96 flex flex-col gap-6 items-center justify-center">
+      {#if hasPinCode}
         {#if isVerified}
           <div in:fade={{ duration: 200 }}>
             <Icon icon={mdiLockOpenVariantOutline} size="64" class="text-success/90" />
@@ -64,13 +64,7 @@
           pinLength={6}
           onFilled={handleUnlockSession}
         />
-
-        <Button type="button" color="secondary" onclick={() => goto(Route.photos())}>{$t('cancel')}</Button>
-      </div>
-    </div>
-  {:else}
-    <div class="flex items-center justify-center">
-      <div class="w-96 flex flex-col gap-6 items-center justify-center">
+      {:else}
         <div class="text-primary">
           <Icon icon={mdiLockSmart} size="64" />
         </div>
@@ -78,7 +72,11 @@
           {$t('new_pin_code_subtitle')}
         </p>
         <PinCodeCreateForm showLabel={false} onCreated={() => (hasPinCode = true)} />
+      {/if}
+
+      <div class={hasPinCode ? '' : 'flex w-full items-start'}>
+        <Button type="button" color="secondary" onclick={() => goto(Route.photos())}>{$t('cancel')}</Button>
       </div>
     </div>
-  {/if}
+  </div>
 </AuthPageLayout>