692f32a350
Users were unable to retry login attempts after a failed authentication because the Turnstile CAPTCHA widget was not properly resetting. This forced users to refresh the entire page to attempt login again, creating a terrible user experience. Root Cause: The useTurnstile hook had several critical issues: - The reset() function only cleared state when shouldRender was true and widget existed - Widget ID tracking was unreliable due to intercepting window.turnstile.render - Token wasn't being cleared on verification failures - State wasn't being reset consistently across error scenarios Changes 🏗️ <!-- Concisely describe all of the changes made in this pull request: --> - Fixed useTurnstile hook reset logic: Modified the reset() function to always clear all state (token, verified, verifying, error) regardless of shouldRender condition - Improved widget ID synchronization: Added setWidgetId prop to the Turnstile component interface and hook for reliable widget tracking between component and hook - Enhanced error handling: Updated handleVerify, handleExpire, and handleError to properly reset tokens on failures - Updated all auth components: Added setWidgetId prop to all Turnstile component usages in login, signup, and password reset pages - Removed unreliable widget tracking: Eliminated the window.turnstile.render interception approach in favor of explicit prop-based communication Checklist 📋 For code changes: - [x] I have clearly listed my changes in the PR description - [x] I have made a test plan - [x] I have tested my changes according to the test plan: - <!-- Put your test plan here: --> - [x] Test failed login attempt - CAPTCHA resets properly without page refresh - [x] Test failed signup attempt - CAPTCHA resets properly without page refresh - [x] Test successful login flow - CAPTCHA works normally - [x] Test CAPTCHA expiration - State resets correctly - [x] Test CAPTCHA error scenarios - Error handling works properly
This is the frontend for AutoGPT's next generation
Getting Started
Run the following installation once.
npm install
# or
yarn install
# or
pnpm install
# or
bun install
Next, run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
Open http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
For subsequent runs, you do not have to npm install again. Simply do npm run dev.
If the project is updated via git, you will need to npm install after each update.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
Deploy
TODO
Storybook
Storybook is a powerful development environment for UI components. It allows you to build UI components in isolation, making it easier to develop, test, and document your components independently from your main application.
Purpose in the Development Process
- Component Development: Develop and test UI components in isolation.
- Visual Testing: Easily spot visual regressions.
- Documentation: Automatically document components and their props.
- Collaboration: Share components with your team or stakeholders for feedback.
How to Use Storybook
-
Start Storybook: Run the following command to start the Storybook development server:
npm run storybookThis will start Storybook on port 6006. Open http://localhost:6006 in your browser to view your component library.
-
Build Storybook: To build a static version of Storybook for deployment, use:
npm run build-storybook -
Running Storybook Tests: Storybook tests can be run using:
npm run test-storybookFor CI environments, use:
npm run test-storybook:ci -
Writing Stories: Create
.stories.tsxfiles alongside your components to define different states and variations of your components.
By integrating Storybook into our development workflow, we can streamline UI development, improve component reusability, and maintain a consistent design system across the project.