12eb495b2c
**Clearly explain the need for these changes:** The changes were made to enhance the usability and accessibility of the login and signup forms. By adding appropriate `autocomplete` attributes, the forms are now more compatible with browsers and password managers, improving the user experience by supporting autofill, password generation, and accessibility. Additionally, the `yarn.lock` file was updated to reflect dependency changes made during this work, ensuring consistent dependency resolution across all environments. This PR also resolves **issue #9312**, which addresses missing `autocomplete` attributes on login and signup forms. --- ### **Changes 🏗️** - Added `autocomplete="username"` to the email input field in both login and signup forms. - Added `autocomplete="current-password"` to the password input field in the login form. - Added `autocomplete="new-password"` to the password and confirm password input fields in the signup form. - Updated `yarn.lock` to reflect dependency updates. - Improved browser compatibility and user accessibility. - Enhanced support for autofill and password generation for better form usability. --- ### **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] Verified the `autocomplete` attributes are present in the rendered HTML using browser DevTools. - [x] Tested the login form for autofill compatibility with email and password. - [x] Tested the signup form with password generation using a password manager. - [x] Ensured no functionality or styling was affected by the changes. <details> <summary>Example test plan</summary> - [x] Open the login form and verify that email (`autocomplete="username"`) and password (`autocomplete="current-password"`) inputs work with browser autofill. - [x] Open the signup form and confirm that the password manager suggests generating a strong password for `autocomplete="new-password"`. - [x] Verify that form submissions work as expected with no errors. </details> --- #### For configuration changes: - [x] `.env.example` is updated or already compatible with my changes. - [x] `docker-compose.yml` is updated or already compatible with my changes. - [x] I have included a list of my configuration changes in the PR description (under **Changes**). <details> <summary>Examples of configuration changes</summary> No configuration changes were required for this PR. </details> --- ### **Issue Resolved:** This pull request resolves **issue #9312** by adding the necessary `autocomplete` attributes to the login and signup forms to improve accessibility and compatibility with password managers. --------- Co-authored-by: Nicholas Tindle <nicktindle@outlook.com> Co-authored-by: Nicholas Tindle <nicholas.tindle@agpt.co>
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.