coracle/flotilla
1
6
Fork 23
Code Issues 42 Pull Requests 2 Actions Packages Projects 5 Releases Wiki Activity

feat: add progress bar to signup flow #234

Merged
hodlbod merged 6 commits from DeveshSingh/flotilla:feat/signup-progress-bar into dev 2026-04-23 15:35:59 +00:00
Conversation 4 Commits 6 Files Changed 9
+76 -33
DeveshSingh commented 2026-04-18 12:38:05 +00:00
Contributor
Copy Link
Copy Source

Title

feat: implement consistent modal progress bars across sign-up flows
Closes #223

Description

This PR standardizes the visual progress indicator across the multi-step account creation process by introducing a unified ProgressBar component within all relevant modal steps.

Previously, the sign-up flow lacked a clear visual indicator of the user's progress through the various setup stages. This change ensures a consistent and user-friendly experience by passing step counts from the central controller down to the individual modal components.

Changes Made

  • Added ProgressBar.svelte integration: The progress bar is now conditionally rendered at the top of the ModalBody when step and totalSteps properties are provided.
  • Updated Component Props: Updated the properties of individual sign-up components (e.g., SignUpEmail.svelte, SignUpEmailConfirm.svelte, SignUpProfile.svelte, SignUpKey.svelte) to accept step and totalSteps.
  • Prop Passthrough: Ensured that the central SignUp controller correctly manages and passes the current step and total step counts down to the active modal components.
  • UI Consistency: Positioned the progress bar seamlessly within the existing modal layout using the ProgressBar component.

Testing Instructions

  1. Start the development server and navigate to the Sign Up flow.
  2. Proceed through the multi-step account creation process (e.g., Email -> Email Confirm -> Profile -> Key).
  3. Verify that the progress bar appears at the top of the modal on each step.
  4. Verify that the progress bar accurately reflects the current step relative to the total number of steps.
### Title feat: implement consistent modal progress bars across sign-up flows Closes #223 ### Description This PR standardizes the visual progress indicator across the multi-step account creation process by introducing a unified `ProgressBar` component within all relevant modal steps. Previously, the sign-up flow lacked a clear visual indicator of the user's progress through the various setup stages. This change ensures a consistent and user-friendly experience by passing step counts from the central controller down to the individual modal components. ### Changes Made * **Added `ProgressBar.svelte` integration**: The progress bar is now conditionally rendered at the top of the `ModalBody` when `step` and `totalSteps` properties are provided. * **Updated Component Props**: Updated the properties of individual sign-up components (e.g., `SignUpEmail.svelte`, `SignUpEmailConfirm.svelte`, `SignUpProfile.svelte`, `SignUpKey.svelte`) to accept `step` and `totalSteps`. * **Prop Passthrough**: Ensured that the central `SignUp` controller correctly manages and passes the current step and total step counts down to the active modal components. * **UI Consistency**: Positioned the progress bar seamlessly within the existing modal layout using the `ProgressBar` component. ### Testing Instructions 1. Start the development server and navigate to the Sign Up flow. 2. Proceed through the multi-step account creation process (e.g., Email -> Email Confirm -> Profile -> Key). 3. Verify that the progress bar appears at the top of the modal on each step. 4. Verify that the progress bar accurately reflects the current step relative to the total number of steps.
progress-bar.mp4
32 MiB
DeveshSingh added 4 commits 2026-04-18 12:38:06 +00:00
fix: added logic for password requirements on signup 0c25327e75
Merge branch 'dev' of https://gitea.coracle.social/DeveshSingh/flotilla into feat/signup-progress-bar aef2336797
Merge branch 'dev' of https://gitea.coracle.social/DeveshSingh/flotilla into feat/signup-progress-bar 3d922ea8c2
feat/ added progress bar for sign-up 68deffcd65
userAdityaa commented 2026-04-18 13:06:22 +00:00
Collaborator
Copy Link
Copy Source

Hey @DeveshSingh, thanks for opening this PR. Could you please link the related issue it addresses? Also, it would help to squash the commits (via rebase and force push) to keep the git history clean. Finally, please update the PR title to match the description you’ve provided.

Hey @DeveshSingh, thanks for opening this PR. Could you please link the related issue it addresses? Also, it would help to squash the commits (via rebase and force push) to keep the git history clean. Finally, please update the PR title to match the description you’ve provided.
👍 1
DeveshSingh changed title from feat/signup-progress-bar to feat: add progress bar to signup flow 2026-04-18 13:38:35 +00:00
hodlbod commented 2026-04-22 16:52:29 +00:00
Owner
Copy Link
Copy Source

I'm not sure about how it looks, it feels kind of top-heavy. What about putting the progress at the border between the footer and the modal body? See attached.

I'm not sure about how it looks, it feels kind of top-heavy. What about putting the progress at the border between the footer and the modal body? See attached.
Screenshot 2026-04-22 at 9.51.43 AM.png
148 KiB
Screenshot 2026-04-22 at 9.51.43 AM.png
DeveshSingh commented 2026-04-22 19:57:01 +00:00
Author
Contributor
Copy Link
Copy Source

I'm not sure about how it looks, it feels kind of top-heavy. What about putting the progress at the border between the footer and the modal body? See attached.

sure!

> I'm not sure about how it looks, it feels kind of top-heavy. What about putting the progress at the border between the footer and the modal body? See attached. sure!
DeveshSingh added 1 commit 2026-04-23 11:36:16 +00:00
Merge branch 'dev' of https://gitea.coracle.social/DeveshSingh/flotilla into feat/signup-progress-bar cdaa484df6
DeveshSingh added 1 commit 2026-04-23 11:47:45 +00:00
fix: changed position of progress bar from top to in b/w footer and modal b9d5d74a74
DeveshSingh commented 2026-04-23 11:49:33 +00:00
Author
Contributor
Copy Link
Copy Source

have added the progress bar b/w modal body and the footer

have added the progress bar b/w modal body and the footer
Screenshot 2026-04-23 171426.png
81 KiB
Screenshot 2026-04-23 171432.png
142 KiB
Screenshot 2026-04-23 171426.png Screenshot 2026-04-23 171432.png
hodlbod merged commit 32c1501e9c into dev 2026-04-23 15:35:59 +00:00
hodlbod deleted branch feat/signup-progress-bar 2026-04-23 15:35:59 +00:00
Sign in to join this conversation.
Reviewers
No Reviewers
Labels
Clear labels
design
For issues related to design work. Development should be done in another issue and refer back to this one.
 dev
Issues related to development work
 easy
Issues that can be executed on by new contributors
 idea
For issues that aren't yet actionable
 priority
For issues related to high priority features and bugs
 usability
Issues that have to be validated with real live human beings.
No Label
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
hodlbod (hodlbod) mplorentz (Matt Lorentz) sakshamjain (Saksham Jain) sondreb triesap userAdityaa (Aditya Chaudhary)
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: coracle/flotilla#234
Delete Branch "DeveshSingh/flotilla:feat/signup-progress-bar"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?