Enhanced Signup Form with Advanced Validation & Invite Improvements #1303

New Issue

MrUnknownDE · 2026-04-05T18:49:56+02:00

MrUnknownDE commented

2026-04-05 18:49:56 +02:00

Originally created by @adrianeastles on 6/28/2025

Community Contribution License Agreement

By creating this pull request, I grant the project maintainers an unlimited,
perpetual license to use, modify, and redistribute these contributions under any terms they
choose, including both the AGPLv3 and the Fossorial Commercial license terms. I
represent that I have the right to grant this license for all contributed content.

Description

This PR enhances the user signup experience with modern password validation, improved invite handling, and better accessibility. The changes focus on providing real-time feedback, eliminating confusion, and creating a more professional onboarding flow.

Key Features Added

Advanced Password Validation

Real-time strength meter with color-coded progress bar (Weak/Medium/Strong)
Interactive requirements checklist with green checkmarks and red X indicators
Stylish validation container with organised layout and clear typography
Password visibility toggles with eye icons for both password fields

Email autofill from invite links with readonly styling and visual indicators
Fixed redirect flow after account creation to properly return to member portal.
Improved invite messaging - cleaner text specific to signup context
Auto login for invited users to reduce confusion after signup to auto login

Accessibility & UX Improvements

Optimised keyboard navigation with sequential tab indexes (1→2→3→4→5)
Proper autoComplete attributes for better browser integration
Dynamic border colors that change based on validation state

How to Test?

Generate an Invite Link: As an administrator, navigate to the user management section and create a new invite link for a user. Copy this link.
Access the Invite Link: Open an incognito/private browser window and paste the copied invite link into the address bar.
Observe Auto-fill and Messaging:
- Verify that the email field is autofilled from the invite link and appears with a read-only style.
- Confirm the improved invite messaging is clear and relevant to the signup process.
Test Password Validation: As you type into the password field:
- Observe the real-time strength meter displaying "Weak," "Medium," or "Strong" with corresponding color changes.
- Check that the interactive requirements checklist dynamically updates with green checkmarks and red X indicators.
- Test the password visibility toggles (eye icons) to ensure they correctly show/hide the password.
Complete Signup: Fill in the required details and successfully create the account.
Verify Auto Login & Redirect: Confirm that the user is automatically logged in after successful signup and is correctly redirected to the member portal.
Test Expired/Regenerated Link (Negative Case):
- If possible, invalidate or regenerate the invite link after copying it but before using it.
- Access the invalidated link and confirm a friendly message indicating the link is expired or invalid is displayed.

Visual Improvements

Invite expired or already used

*Originally created by @adrianeastles on 6/28/2025* ## Community Contribution License Agreement By creating this pull request, I grant the project maintainers an unlimited, perpetual license to use, modify, and redistribute these contributions under any terms they choose, including both the AGPLv3 and the Fossorial Commercial license terms. I represent that I have the right to grant this license for all contributed content. ## Description This PR enhances the user signup experience with modern password validation, improved invite handling, and better accessibility. The changes focus on providing real-time feedback, eliminating confusion, and creating a more professional onboarding flow. ## Key Features Added ### Advanced Password Validation - **Real-time strength meter** with color-coded progress bar (Weak/Medium/Strong) - **Interactive requirements checklist** with green checkmarks and red X indicators - **Stylish validation container** with organised layout and clear typography - **Password visibility toggles** with eye icons for both password fields ### Enhanced Invite Signup Flow - **Email autofill** from invite links with readonly styling and visual indicators - **Fixed redirect flow** after account creation to properly return to member portal. - **Improved invite messaging** - cleaner text specific to signup context - **Auto login** for invited users to reduce confusion after signup to auto login ### Accessibility & UX Improvements - **Optimised keyboard navigation** with sequential tab indexes (1→2→3→4→5) - **Proper autoComplete attributes** for better browser integration - **Dynamic border colors** that change based on validation state ## How to Test? ### Enhanced User Signup via Invite Link 1. **Generate an Invite Link:** As an administrator, navigate to the user management section and create a new invite link for a user. Copy this link. 2. **Access the Invite Link:** Open an incognito/private browser window and paste the copied invite link into the address bar. 3. **Observe Auto-fill and Messaging:** * Verify that the **email field is autofilled** from the invite link and appears with a read-only style. * Confirm the **improved invite messaging** is clear and relevant to the signup process. 4. **Test Password Validation:** As you type into the password field: * Observe the **real-time strength meter** displaying "Weak," "Medium," or "Strong" with corresponding color changes. * Check that the **interactive requirements checklist** dynamically updates with green checkmarks and red X indicators. * Test the **password visibility toggles** (eye icons) to ensure they correctly show/hide the password. 5. **Complete Signup:** Fill in the required details and successfully create the account. 6. **Verify Auto Login & Redirect:** Confirm that the user is **automatically logged in** after successful signup and is correctly redirected to the member portal. 7. **Test Expired/Regenerated Link (Negative Case):** * If possible, invalidate or regenerate the invite link *after* copying it but *before* using it. * Access the invalidated link and confirm a **friendly message** indicating the link is expired or invalid is displayed. ## Visual Improvements ### Sign up page via invite. <img width="467" alt="Screenshot 2025-07-05 at 4 06 27 pm" src="https://github.com/user-attachments/assets/5904fbc7-4d62-4d8f-a598-8e800b539833" /> ### Sign up form password validation. <img width="459" alt="Screenshot 2025-07-05 at 4 06 59 pm" src="https://github.com/user-attachments/assets/21a1d9bb-ba4c-4765-ba17-8b021053cac6" /> <img width="459" alt="Screenshot 2025-07-05 at 4 06 51 pm" src="https://github.com/user-attachments/assets/dd20548c-553f-4eee-ab2b-57e6fe4e4aad" /> <img width="449" alt="Screenshot 2025-07-05 at 4 07 07 pm" src="https://github.com/user-attachments/assets/486978fb-8180-488f-b7f4-fd1fb8755d6a" /> ### Invite expired or already used <img width="468" alt="Screenshot 2025-07-05 at 4 07 39 pm" src="https://github.com/user-attachments/assets/374ed26e-fed1-4b14-a015-518af105da0f" />

MrUnknownDE closed this issue

2026-04-05 18:49:56 +02:00

Sign in to join this conversation.

Branches Tags

main

dev

dependabot/npm_and_yarn/dev-minor-updates-b4e5d6b9c5

revert-2766-feature/systemd-install-instructions

dependabot/npm_and_yarn/prod-patch-updates-05702d39f2

dependabot/npm_and_yarn/next-16.2.1

dependabot/npm_and_yarn/recharts-3.8.1

alerting-rules

private-site-ha

dependabot/docker/docker/library/node-25-slim

ssh

delete-account

msg-delivery

org-only-idp

cicd

patch

site-targets-auto-login

No Label

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github/pangolin#1303