feat(settings): Rework user settings page with Form, loading skeleton…

[andrewhooker2]

Implemented a fully functional user settings page allowing changes to account details and notification preferences. This change uses a server first approach and adds much needed form validation to this page.
This PR has added loading skeletons for better UX during data fetching. Refactored related components to support these changes and finally implemented server actions to streamline data ingestion.

Note to developers:

At the moment the notification switches set back to default upon save. We will want to pass in this information after the api is implemented.

Changes 🏗️

Rebuilt / Refactored SettingsFormInput to SettingsForm:

• Implemented Form Validation
• Implemented a form schema with Zod to validate user input
• Added toast messaging to properly inform the user if the form has been successfully completed or if there is an error in thrown from the server action.

Added loading.tsx

• Using Skeletons we can deliver a better loading UI for our users causing less screen shifting.

Added actions.ts

• Added a server action for the settings page. This server action will handle the updating of user's settings for this page. It handles the interaction between the application and supabase. After this server action is ran we revalidate the path for our settings page ensuring proper data passed to our components.

There is an additional TODO for @ntindle for the api endpoint getting created. This endpoint will cover the newly added notification switches and it's toggles.

Screenshots 📷

Before Changes:

After Changes:

Form Validation

Checklist 📋

For code changes:

• I have clearly listed my changes in the PR description
• I have made a test plan
• I have tested my changes according to the test plan:

Test Plan

• Goto the route of profile/settings
• Add an invalid email and notice the new validation messaging
• Add invalid passwords that do not match and or is under 8 characters notice the new validation messaging
• Select the cancel button and notice that the form has been set back to the default values
• With the form untouched notice the Save changes button is disabled. Toggle a switch and notice the Save changes button is now enabled.
• Enter in a valid pair of new passwords in the New Password and Confirm New Password input fields and select Save changes
• Enter in the same passwords again and notice that we will now be shown an Error. This error is bubbling up from supabase in our backend and is stating New password should be different from the old password

The base branch was changed.

[github-actions]

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.

[netlify]

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

Name	Link
🔨 Latest commit	71adce3
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs-dev/deploys/67b5ebb38b02ba00089b54a8

[netlify]

✅ Deploy Preview for auto-gpt-docs canceled.

Name	Link
🔨 Latest commit	8e47517
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/67afb524b0b8580008b94166

[netlify]

✅ Deploy Preview for auto-gpt-docs canceled.

Name	Link
🔨 Latest commit	71adce3
🔍 Latest deploy log	https://app.netlify.com/sites/auto-gpt-docs/deploys/67b5ebb38b02ba00089b54a4

[github-actions]

Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly.

[github-actions]

This pull request has conflicts with the base branch, please resolve those so we can evaluate the pull request.

[github-actions]

Conflicts have been resolved! 🎉 A maintainer will review the pull request shortly.