[PR #979] [CLOSED] Enhanced Signup Form with Advanced Validation & Invite Improvements #908

Closed
opened 2025-11-13 12:13:42 -06:00 by GiteaMirror · 0 comments
Owner

📋 Pull Request Information

Original PR: https://github.com/fosrl/pangolin/pull/979
Author: @adrianeastles
Created: 6/28/2025
Status: Closed

Base: devHead: feat/signup-improvements


📝 Commits (10+)

  • fd933e3 Implemented a resouce landing page for members and Implemented basic user details (full name) and password reset via that is sent via SMTP or if SMTP is disabled will be shown to the admin to copy.
  • 5fce0bb feat: add email autofill for invite signup with redirect fix
  • 8979102 feat: enhance signup form with advanced password validation and invite improvements
  • 058d0ef improve invalid invite handling in signup flow.
  • 590e73e Fixed invalid invite card showing after successful signup.
  • 07567b3 refactor: remove security dashboard and sync translations
  • e99f9f5 Cleaned up all translations based on the English (en-US.json) source file.
  • badb118 Fix orgId not in queries
  • ad73c3e refactor: rename passkeyChallenge to webauthnChallenge
  • 0695545 Cleaned up passkey code, fixed some translations.

📊 Changes

57 files changed (+3339 additions, -465 deletions)

View changed files

📝 messages/de-DE.json (+45 -3)
📝 messages/en-US.json (+70 -28)
📝 messages/es-ES.json (+45 -3)
📝 messages/fr-FR.json (+46 -4)
📝 messages/it-IT.json (+45 -3)
📝 messages/nl-NL.json (+45 -3)
📝 messages/pl-PL.json (+45 -3)
📝 messages/pt-PT.json (+45 -3)
📝 messages/tr-TR.json (+45 -3)
📝 messages/zh-CN.json (+63 -24)
📝 package-lock.json (+217 -19)
📝 package.json (+5 -2)
📝 server/db/pg/schema.ts (+4 -1)
📝 server/db/sqlite/driver.ts (+2 -0)
📝 server/db/sqlite/migrate.ts (+8 -0)
📝 server/db/sqlite/schema.ts (+4 -1)
📝 server/index.ts (+1 -1)
📝 server/lib/consts.ts (+2 -2)
📝 server/routers/auth/signup.ts (+4 -2)
📝 server/routers/external.ts (+28 -1)

...and 37 more files

📄 Description

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.

Screenshot 2025-07-05 at 4 06 27 pm

Sign up form password validation.

Screenshot 2025-07-05 at 4 06 59 pm Screenshot 2025-07-05 at 4 06 51 pm Screenshot 2025-07-05 at 4 07 07 pm

Invite expired or already used

Screenshot 2025-07-05 at 4 07 39 pm

🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.

## 📋 Pull Request Information **Original PR:** https://github.com/fosrl/pangolin/pull/979 **Author:** [@adrianeastles](https://github.com/adrianeastles) **Created:** 6/28/2025 **Status:** ❌ Closed **Base:** `dev` ← **Head:** `feat/signup-improvements` --- ### 📝 Commits (10+) - [`fd933e3`](https://github.com/fosrl/pangolin/commit/fd933e3dece0c187bcbfe71b04c86a9d81051510) Implemented a resouce landing page for members and Implemented basic user details (full name) and password reset via that is sent via SMTP or if SMTP is disabled will be shown to the admin to copy. - [`5fce0bb`](https://github.com/fosrl/pangolin/commit/5fce0bb31652ef7d0fc7db174ce0ab98745f492a) feat: add email autofill for invite signup with redirect fix - [`8979102`](https://github.com/fosrl/pangolin/commit/89791028efcf2b49dceee35e7d8f14b5238cf58d) feat: enhance signup form with advanced password validation and invite improvements - [`058d0ef`](https://github.com/fosrl/pangolin/commit/058d0ef158c8afe2d48a08474dbde8a24c75b465) improve invalid invite handling in signup flow. - [`590e73e`](https://github.com/fosrl/pangolin/commit/590e73ee6721890c9cc9d9f963a2140b58920095) Fixed invalid invite card showing after successful signup. - [`07567b3`](https://github.com/fosrl/pangolin/commit/07567b3054c83f0e5aee24fbfd55c95feb20b9f2) refactor: remove security dashboard and sync translations - [`e99f9f5`](https://github.com/fosrl/pangolin/commit/e99f9f5e035435c443982c658f2d21ca2a039f02) Cleaned up all translations based on the English (en-US.json) source file. - [`badb118`](https://github.com/fosrl/pangolin/commit/badb118c866640437cc332c4970592a7e427f7bd) Fix orgId not in queries - [`ad73c3e`](https://github.com/fosrl/pangolin/commit/ad73c3ec34e293d5735ee4301bb53e694dcddc1a) refactor: rename passkeyChallenge to webauthnChallenge - [`0695545`](https://github.com/fosrl/pangolin/commit/0695545b3797556f7da865a0cc2d1b68975b25b8) Cleaned up passkey code, fixed some translations. ### 📊 Changes **57 files changed** (+3339 additions, -465 deletions) <details> <summary>View changed files</summary> 📝 `messages/de-DE.json` (+45 -3) 📝 `messages/en-US.json` (+70 -28) 📝 `messages/es-ES.json` (+45 -3) 📝 `messages/fr-FR.json` (+46 -4) 📝 `messages/it-IT.json` (+45 -3) 📝 `messages/nl-NL.json` (+45 -3) 📝 `messages/pl-PL.json` (+45 -3) 📝 `messages/pt-PT.json` (+45 -3) 📝 `messages/tr-TR.json` (+45 -3) 📝 `messages/zh-CN.json` (+63 -24) 📝 `package-lock.json` (+217 -19) 📝 `package.json` (+5 -2) 📝 `server/db/pg/schema.ts` (+4 -1) 📝 `server/db/sqlite/driver.ts` (+2 -0) 📝 `server/db/sqlite/migrate.ts` (+8 -0) 📝 `server/db/sqlite/schema.ts` (+4 -1) 📝 `server/index.ts` (+1 -1) 📝 `server/lib/consts.ts` (+2 -2) 📝 `server/routers/auth/signup.ts` (+4 -2) 📝 `server/routers/external.ts` (+28 -1) _...and 37 more files_ </details> ### 📄 Description ## 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" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>
GiteaMirror added the pull-request label 2025-11-13 12:13:42 -06:00
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/pangolin#908