refactor(frontend): Auth pages update #9124

kcze · 2024-12-23T14:02:16Z

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:

Note: OAuth login providers are disabled and so untested.

Example test plan

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

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)

Examples of configuration changes

Changing ports
Adding new services that need to communicate with each other
Secrets or environment variable changes
New or infrastructure changes such as databases

netlify · 2024-12-23T14:02:34Z

✅ Deploy Preview for auto-gpt-docs-dev canceled.

Name	Link
🔨 Latest commit	`3693f79`
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs-dev/deploys/676fc9f9826730000889809c

netlify · 2024-12-23T14:03:00Z

✅ Deploy Preview for auto-gpt-docs ready!

Name	Link
🔨 Latest commit	`3693f79`
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/676fc9f909e7bc000848275d
😎 Deploy Preview	https://deploy-preview-9124--auto-gpt-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

kcze · 2024-12-23T18:02:16Z

autogpt_platform/frontend/src/app/signup/actions.ts

+
+      if (error) {
+        console.error("Error signing up", error);
+        // FIXME: supabase doesn't return the correct error message for this case


I couldn't make supabase return actual error on database trigger, it returns unexpected_failure instead, so any error triggers waitlist prompt in signup/page.tsx.

Shouldn't we propagate the error either way or say something like "Internal/unknown error" ?

I tried fixing it but couldn't, supabase returns a generic database error instead of the custom one from the function (set in the supabase dashboard). This is just to show waitlist information (see screenshot).

majdyz · 2024-12-27T18:40:08Z

autogpt_platform/frontend/src/app/login/page.tsx

    },
  });

+  // const onProviderLogin = useCallback(async (


Remove this?

This is valid code that should be uncommented when we enable social login, I added a TODO.

majdyz · 2024-12-27T18:40:32Z

autogpt_platform/frontend/src/app/login/page.tsx

-        {/* <div className="mb-6 space-y-2">
+    <AuthCard>
+      <AuthHeader>Login to your account</AuthHeader>
+      {/* <div className="mb-6 space-y-2">


I removed this since it's most likely going to look different anyway.

majdyz · 2024-12-27T18:41:04Z

autogpt_platform/frontend/src/app/reset_password/actions.ts

+      const headersList = headers();
+      const host = headersList.get("host");
+      const protocol =
+        process.env.NODE_ENV === "development" ? "http" : "https";


Don't we have a constant value for this ?

We do on the backend, I don't see anything on the frontend but let me know if you have any idea.

majdyz · 2024-12-27T18:42:40Z

autogpt_platform/frontend/src/app/signup/actions.ts

+
+      if (error) {
+        console.error("Error signing up", error);
+        // FIXME: supabase doesn't return the correct error message for this case


Shouldn't we propagate the error either way or say something like "Internal/unknown error" ?

kcze added 7 commits December 22, 2024 13:46

Add auth components

399267a

Add /signup page

c033208

Update supabase packages

716f6d6

Move auth types to types/auth.ts

7a1c05b

Update auth components

9b4c078

Add actions for reset password page

2503585

Update auth pages

ddc696e

github-actions bot added platform/frontend AutoGPT Platform - Front end platform/backend AutoGPT Platform - Back end labels Dec 23, 2024

github-actions bot added the size/xl label Dec 23, 2024

Updates

1e5498c

kcze commented Dec 23, 2024

View reviewed changes

kcze requested review from ntindle, Pwuts and Abhi1992002 December 23, 2024 18:05

kcze marked this pull request as ready for review December 23, 2024 18:05

kcze requested a review from a team as a code owner December 23, 2024 18:05

kcze added 3 commits December 24, 2024 11:14

Fix login test

fa2951c

Remove terms check in login test

d3fdffd

Fix login button in test

70fa8d4

majdyz previously approved these changes Dec 27, 2024

View reviewed changes

Remove commented social login code

3693f79

kcze dismissed majdyz’s stale review via 3693f79 December 28, 2024 09:50

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(frontend): Auth pages update #9124

refactor(frontend): Auth pages update #9124

kcze commented Dec 23, 2024 •

edited

Loading

netlify bot commented Dec 23, 2024 •

edited

Loading

netlify bot commented Dec 23, 2024 •

edited

Loading

kcze Dec 23, 2024

majdyz Dec 27, 2024

kcze Dec 28, 2024

majdyz Dec 27, 2024

kcze Dec 28, 2024

majdyz Dec 27, 2024

kcze Dec 28, 2024

majdyz Dec 27, 2024

kcze Dec 28, 2024

majdyz Dec 27, 2024

refactor(frontend): Auth pages update #9124

Are you sure you want to change the base?

refactor(frontend): Auth pages update #9124

Conversation

kcze commented Dec 23, 2024 • edited Loading

Changes 🏗️

All auth pages

Login page

Signup page

Reset password page

Other

Checklist 📋

For code changes:

For configuration changes:

netlify bot commented Dec 23, 2024 • edited Loading

✅ Deploy Preview for auto-gpt-docs-dev canceled.

netlify bot commented Dec 23, 2024 • edited Loading

✅ Deploy Preview for auto-gpt-docs ready!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kcze commented Dec 23, 2024 •

edited

Loading

netlify bot commented Dec 23, 2024 •

edited

Loading

netlify bot commented Dec 23, 2024 •

edited

Loading