From 0c25327e75b0934a7ce80b860bf3b7d94ad83212 Mon Sep 17 00:00:00 2001
From: deveshanim3 <deveshsingh6986@gmail.com>
Date: Sat, 18 Apr 2026 01:01:39 +0530
Subject: [PATCH 1/3] fix: added logic for password requirements on signup

---
 src/app/components/SignUpEmail.svelte | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/components/SignUpEmail.svelte b/src/app/components/SignUpEmail.svelte
index 44668026..824ae7bf 100644
--- a/src/app/components/SignUpEmail.svelte
+++ b/src/app/components/SignUpEmail.svelte
@@ -134,6 +134,9 @@
           <input type="password" bind:value={password} />
         </label>
       {/snippet}
+      {#snippet info()}
+        Must be at least 12 characters long.
+      {/snippet}
     </FieldInline>
   </ModalBody>
   <ModalFooter>
-- 
2.52.0


From 68deffcd65c2c6670ee9b9411d81d3afae574ba5 Mon Sep 17 00:00:00 2001
From: deveshanim3 <deveshsingh6986@gmail.com>
Date: Sat, 18 Apr 2026 17:59:42 +0530
Subject: [PATCH 2/3] feat/ added progress bar for sign-up

---
 src/app/components/KeyDownload.svelte        |  8 +++++++-
 src/app/components/ProgressBar.svelte        | 13 +++++++++++++
 src/app/components/SignUp.svelte             | 14 ++++++++------
 src/app/components/SignUpComplete.svelte     |  8 +++++++-
 src/app/components/SignUpEmail.svelte        | 10 ++++++++--
 src/app/components/SignUpEmailConfirm.svelte |  8 +++++++-
 src/app/components/SignUpKey.svelte          |  6 ++++--
 src/app/components/SignUpProfile.svelte      |  8 +++++++-
 8 files changed, 61 insertions(+), 14 deletions(-)
 create mode 100644 src/app/components/ProgressBar.svelte

diff --git a/src/app/components/KeyDownload.svelte b/src/app/components/KeyDownload.svelte
index b00900a0..48657b39 100644
--- a/src/app/components/KeyDownload.svelte
+++ b/src/app/components/KeyDownload.svelte
@@ -15,6 +15,7 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast} from "@app/util/toast"
   import {PLATFORM_NAME} from "@app/core/state"
 
@@ -22,9 +23,11 @@
     secret: string
     next: () => unknown
     submitText?: string
+    step?: number
+    totalSteps?: number
   }
 
-  const {secret, next, submitText = "Continue"}: Props = $props()
+  const {secret, next, submitText = "Continue", step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 
@@ -109,6 +112,9 @@
 
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
     <ModalHeader>
       <ModalTitle>Your Keys are Ready!</ModalTitle>
     </ModalHeader>
diff --git a/src/app/components/ProgressBar.svelte b/src/app/components/ProgressBar.svelte
new file mode 100644
index 00000000..d7ca6c52
--- /dev/null
+++ b/src/app/components/ProgressBar.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+  const {current, total}: {current: number; total: number} = $props()
+</script>
+
+<div class="flex gap-2 w-full px-4 pt-2">
+  {#each Array(total) as _, i}
+    <div
+      class="h-1 flex-1 rounded-full transition-colors {i < current
+        ? 'bg-primary'
+        : 'bg-base-300'}">
+    </div>
+  {/each}
+</div>
diff --git a/src/app/components/SignUp.svelte b/src/app/components/SignUp.svelte
index f6a395b4..5edf81e0 100644
--- a/src/app/components/SignUp.svelte
+++ b/src/app/components/SignUp.svelte
@@ -62,9 +62,10 @@
 
   const flows = {
     email: {
-      start: () => pushModal(SignUpEmail, {next: flows.email.profile}),
-      profile: () => pushModal(SignUpProfile, {next: flows.email.complete}),
-      complete: () => pushModal(SignUpComplete, {next: flows.email.finalize}),
+      start: () => pushModal(SignUpEmail, {next: flows.email.profile, step: 1, totalSteps: 3}),
+      profile: () => pushModal(SignUpProfile, {next: flows.email.complete, step: 2, totalSteps: 3}),
+      complete: () =>
+        pushModal(SignUpComplete, {next: flows.email.finalize, step: 3, totalSteps: 3}),
       finalize: () => {
         const email = getKey<string>("signup.email")!
         const clientOptions = getKey<ClientOptions>("signup.clientOptions")!
@@ -74,9 +75,10 @@
       },
     },
     nostr: {
-      start: () => pushModal(SignUpProfile, {next: flows.nostr.key}),
-      key: () => pushModal(SignUpKey, {next: flows.nostr.complete}),
-      complete: () => pushModal(SignUpComplete, {next: flows.nostr.finalize}),
+      start: () => pushModal(SignUpProfile, {next: flows.nostr.key, step: 1, totalSteps: 3}),
+      key: () => pushModal(SignUpKey, {next: flows.nostr.complete, step: 2, totalSteps: 3}),
+      complete: () =>
+        pushModal(SignUpComplete, {next: flows.nostr.finalize, step: 3, totalSteps: 3}),
       finalize: () => {
         const secret = getKey<string>("signup.secret")!
 
diff --git a/src/app/components/SignUpComplete.svelte b/src/app/components/SignUpComplete.svelte
index cd600113..312c2342 100644
--- a/src/app/components/SignUpComplete.svelte
+++ b/src/app/components/SignUpComplete.svelte
@@ -9,18 +9,24 @@
   import ModalHeader from "@lib/components/ModalHeader.svelte"
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 </script>
 
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
     <ModalHeader>
       <ModalTitle>You're all set!</ModalTitle>
     </ModalHeader>
diff --git a/src/app/components/SignUpEmail.svelte b/src/app/components/SignUpEmail.svelte
index 824ae7bf..747b4309 100644
--- a/src/app/components/SignUpEmail.svelte
+++ b/src/app/components/SignUpEmail.svelte
@@ -18,14 +18,17 @@
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
   import SignUpEmailConfirm from "@app/components/SignUpEmailConfirm.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
   import {pushToast, popToast} from "@app/util/toast"
   import {pushModal} from "@app/util/modal"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const back = () => history.back()
 
@@ -81,7 +84,7 @@
       setKey("signup.clientOptions", clientOptions)
 
       popToast(toastId)
-      pushModal(SignUpEmailConfirm, {next})
+      pushModal(SignUpEmailConfirm, {next, step, totalSteps})
     } catch (e) {
       console.error(e)
 
@@ -101,6 +104,9 @@
 
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
     <ModalHeader>
       <ModalTitle>Sign up with Email</ModalTitle>
       <ModalSubtitle>Keep your keys safe using multi-signer key sharing</ModalSubtitle>
diff --git a/src/app/components/SignUpEmailConfirm.svelte b/src/app/components/SignUpEmailConfirm.svelte
index b3279179..73b1b65b 100644
--- a/src/app/components/SignUpEmailConfirm.svelte
+++ b/src/app/components/SignUpEmailConfirm.svelte
@@ -15,12 +15,15 @@
   import ModalTitle from "@lib/components/ModalTitle.svelte"
   import ModalSubtitle from "@lib/components/ModalSubtitle.svelte"
   import ModalFooter from "@lib/components/ModalFooter.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const email = getKey<string>("signup.email")
 
@@ -41,6 +44,9 @@
 
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
     <ModalHeader>
       <ModalTitle>Verify your Email Address</ModalTitle>
       <ModalSubtitle>Enter the one-time confirmation code sent to your email</ModalSubtitle>
diff --git a/src/app/components/SignUpKey.svelte b/src/app/components/SignUpKey.svelte
index 177bef2c..f94302bf 100644
--- a/src/app/components/SignUpKey.svelte
+++ b/src/app/components/SignUpKey.svelte
@@ -4,11 +4,13 @@
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const secret = getKey<string>("signup.secret")!
 </script>
 
-<KeyDownload {secret} {next} />
+<KeyDownload {secret} {next} {step} {totalSteps} />
diff --git a/src/app/components/SignUpProfile.svelte b/src/app/components/SignUpProfile.svelte
index 04a3d122..d2e69ea4 100644
--- a/src/app/components/SignUpProfile.svelte
+++ b/src/app/components/SignUpProfile.svelte
@@ -8,12 +8,15 @@
   import Modal from "@lib/components/Modal.svelte"
   import ModalBody from "@lib/components/ModalBody.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
+  import ProgressBar from "@app/components/ProgressBar.svelte"
 
   type Props = {
     next: () => void
+    step?: number
+    totalSteps?: number
   }
 
-  const {next}: Props = $props()
+  const {next, step, totalSteps}: Props = $props()
 
   const profile = getKey<Profile>("signup.profile")!
 
@@ -29,6 +32,9 @@
 
 <Modal>
   <ModalBody>
+    {#if step && totalSteps}
+      <ProgressBar current={step} total={totalSteps} />
+    {/if}
     <ProfileEditForm isSignup {initialValues} {onsubmit}>
       {#snippet footer()}
         <Button class="btn btn-link" onclick={back}>
-- 
2.52.0


From b9d5d74a74e1b59396474269fe8df7f0529ddab0 Mon Sep 17 00:00:00 2001
From: deveshanim3 <deveshsingh6986@gmail.com>
Date: Thu, 23 Apr 2026 17:17:12 +0530
Subject: [PATCH 3/3] fix: changed position of progress bar from top to in b/w
 footer and modal

---
 src/app/components/KeyDownload.svelte        |  6 ++--
 src/app/components/ProfileEditForm.svelte    |  6 +++-
 src/app/components/ProgressBar.svelte        |  8 ++---
 src/app/components/SignUpComplete.svelte     |  6 ++--
 src/app/components/SignUpEmail.svelte        |  6 ++--
 src/app/components/SignUpEmailConfirm.svelte |  6 ++--
 src/app/components/SignUpProfile.svelte      | 32 +++++++++-----------
 7 files changed, 33 insertions(+), 37 deletions(-)

diff --git a/src/app/components/KeyDownload.svelte b/src/app/components/KeyDownload.svelte
index 48657b39..87ce677f 100644
--- a/src/app/components/KeyDownload.svelte
+++ b/src/app/components/KeyDownload.svelte
@@ -112,9 +112,6 @@
 
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
-    {#if step && totalSteps}
-      <ProgressBar current={step} total={totalSteps} />
-    {/if}
     <ModalHeader>
       <ModalTitle>Your Keys are Ready!</ModalTitle>
     </ModalHeader>
@@ -156,6 +153,9 @@
       </Button>
     </div>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
diff --git a/src/app/components/ProfileEditForm.svelte b/src/app/components/ProfileEditForm.svelte
index 7e37ee51..16d88183 100644
--- a/src/app/components/ProfileEditForm.svelte
+++ b/src/app/components/ProfileEditForm.svelte
@@ -23,9 +23,10 @@
     onsubmit: (values: Values) => void
     isSignup?: boolean
     footer: Snippet
+    progressBar?: Snippet
   }
 
-  const {initialValues, isSignup, onsubmit, footer}: Props = $props()
+  const {initialValues, isSignup, onsubmit, footer, progressBar}: Props = $props()
 
   const values = $state(initialValues)
 
@@ -103,6 +104,9 @@
       </Field>
     {/if}
   </ModalBody>
+  {#if progressBar}
+    {@render progressBar()}
+  {/if}
   <ModalFooter>
     {@render footer()}
   </ModalFooter>
diff --git a/src/app/components/ProgressBar.svelte b/src/app/components/ProgressBar.svelte
index d7ca6c52..efccba42 100644
--- a/src/app/components/ProgressBar.svelte
+++ b/src/app/components/ProgressBar.svelte
@@ -2,12 +2,8 @@
   const {current, total}: {current: number; total: number} = $props()
 </script>
 
-<div class="flex gap-2 w-full px-4 pt-2">
+<div class="flex w-full">
   {#each Array(total) as _, i}
-    <div
-      class="h-1 flex-1 rounded-full transition-colors {i < current
-        ? 'bg-primary'
-        : 'bg-base-300'}">
-    </div>
+    <div class="h-1 flex-1 transition-colors {i < current ? 'bg-primary' : 'bg-base-300'}"></div>
   {/each}
 </div>
diff --git a/src/app/components/SignUpComplete.svelte b/src/app/components/SignUpComplete.svelte
index 312c2342..75eca93e 100644
--- a/src/app/components/SignUpComplete.svelte
+++ b/src/app/components/SignUpComplete.svelte
@@ -24,9 +24,6 @@
 
 <Modal tag="form" onsubmit={preventDefault(next)}>
   <ModalBody>
-    {#if step && totalSteps}
-      <ProgressBar current={step} total={totalSteps} />
-    {/if}
     <ModalHeader>
       <ModalTitle>You're all set!</ModalTitle>
     </ModalHeader>
@@ -39,6 +36,9 @@
       on groups you've already joined. Click below to get started!
     </p>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
diff --git a/src/app/components/SignUpEmail.svelte b/src/app/components/SignUpEmail.svelte
index 747b4309..62961820 100644
--- a/src/app/components/SignUpEmail.svelte
+++ b/src/app/components/SignUpEmail.svelte
@@ -104,9 +104,6 @@
 
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
-    {#if step && totalSteps}
-      <ProgressBar current={step} total={totalSteps} />
-    {/if}
     <ModalHeader>
       <ModalTitle>Sign up with Email</ModalTitle>
       <ModalSubtitle>Keep your keys safe using multi-signer key sharing</ModalSubtitle>
@@ -145,6 +142,9 @@
       {/snippet}
     </FieldInline>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back}>
       <Icon icon={AltArrowLeft} />
diff --git a/src/app/components/SignUpEmailConfirm.svelte b/src/app/components/SignUpEmailConfirm.svelte
index 73b1b65b..71951f3c 100644
--- a/src/app/components/SignUpEmailConfirm.svelte
+++ b/src/app/components/SignUpEmailConfirm.svelte
@@ -44,9 +44,6 @@
 
 <Modal tag="form" onsubmit={preventDefault(onSubmit)}>
   <ModalBody>
-    {#if step && totalSteps}
-      <ProgressBar current={step} total={totalSteps} />
-    {/if}
     <ModalHeader>
       <ModalTitle>Verify your Email Address</ModalTitle>
       <ModalSubtitle>Enter the one-time confirmation code sent to your email</ModalSubtitle>
@@ -67,6 +64,9 @@
       above.
     </p>
   </ModalBody>
+  {#if step && totalSteps}
+    <ProgressBar current={step} total={totalSteps} />
+  {/if}
   <ModalFooter>
     <Button class="btn btn-link" onclick={back} disabled={loading}>
       <Icon icon={AltArrowLeft} />
diff --git a/src/app/components/SignUpProfile.svelte b/src/app/components/SignUpProfile.svelte
index d2e69ea4..281c3910 100644
--- a/src/app/components/SignUpProfile.svelte
+++ b/src/app/components/SignUpProfile.svelte
@@ -5,8 +5,6 @@
   import {getKey, setKey} from "@lib/implicit"
   import Icon from "@lib/components/Icon.svelte"
   import Button from "@lib/components/Button.svelte"
-  import Modal from "@lib/components/Modal.svelte"
-  import ModalBody from "@lib/components/ModalBody.svelte"
   import ProfileEditForm from "@app/components/ProfileEditForm.svelte"
   import ProgressBar from "@app/components/ProgressBar.svelte"
 
@@ -30,22 +28,20 @@
   }
 </script>
 
-<Modal>
-  <ModalBody>
+<ProfileEditForm isSignup {initialValues} {onsubmit}>
+  {#snippet footer()}
+    <Button class="btn btn-link" onclick={back}>
+      <Icon icon={AltArrowLeft} />
+      Go back
+    </Button>
+    <Button class="btn btn-primary" type="submit">
+      Create Account
+      <Icon icon={AltArrowRight} />
+    </Button>
+  {/snippet}
+  {#snippet progressBar()}
     {#if step && totalSteps}
       <ProgressBar current={step} total={totalSteps} />
     {/if}
-    <ProfileEditForm isSignup {initialValues} {onsubmit}>
-      {#snippet footer()}
-        <Button class="btn btn-link" onclick={back}>
-          <Icon icon={AltArrowLeft} />
-          Go back
-        </Button>
-        <Button class="btn btn-primary" type="submit">
-          Create Account
-          <Icon icon={AltArrowRight} />
-        </Button>
-      {/snippet}
-    </ProfileEditForm>
-  </ModalBody>
-</Modal>
+  {/snippet}
+</ProfileEditForm>
-- 
2.52.0