15af2f410b
There are UX and design issues with current auth pages; `login`, `signup` and `reset_password` (including change password). ### Changes 🏗️  *Missing `s` on the login's password error is fixed. Important changes in bold. #### All auth pages - **Split `/login` into `/signup`** - UI Redesign that adheres to Figma designs - General code cleanup and improvements - Fix feedback: it's now shown when needed and clear (e.g. "~~String~~ Password must be...") - All action functions use `Sentry.withServerActionInstrumentation` - `PasswordInput` "eye button" shows password only when mouse button is hold and doesn't capture tab #### Login page - **Removed agree to terms checkbox** (it's only on signup now) - Move provider login function to `actions.ts` #### Signup page - **Requires to type password twice** - Shows waitlist information on *any* database error #### Reset password page - **Password update requires to type password twice** - **When request to send email is processed then the feedback is: Password reset email sent if user exists. Please check your email.** - Email sent feedback is black, error is red - Move send email and update password functions to `actions.ts` - Disable button when email is sent #### Other - Update zod schema objects and move them to `types/auth` - Move `components/PasswordInput.tsx` to `/components/auth` - Make common UI elements separate components in `components/auth` - Update `yarn.lock` (supabase packages) - Remove redundant letter in `client.ts` - Don't log error when user auth is missing in `useSupabase`; user is simply not logged in ### 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: - [x] Form feedback: - [x] Login works - [x] Signup works - [x] Reset email works - [x] Change password works - [x] Login works - [x] Signup works - [x] Reset email is sent - [x] Reset email logs user in and redirects to `/reset_password` - [x] Change password works - [x] Logout works - [x] All links across auth pages work Note: OAuth login providers are disabled and so untested. <details> <summary>Example test plan</summary> - [ ] Create from scratch and execute an agent with at least 3 blocks - [ ] Import an agent from file upload, and confirm it executes correctly - [ ] Upload agent to marketplace - [ ] Import an agent from marketplace and confirm it executes correctly - [ ] Edit an agent from monitor, and confirm it executes correctly </details> #### For configuration changes: - [ ] `.env.example` is updated or already compatible with my changes - [ ] `docker-compose.yml` is updated or already compatible with my changes - [ ] I have included a list of my configuration changes in the PR description (under **Changes**) <details> <summary>Examples of configuration changes</summary> - Changing ports - Adding new services that need to communicate with each other - Secrets or environment variable changes - New or infrastructure changes such as databases </details> --------- Co-authored-by: Zamil Majdy <zamil.majdy@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.