feat: different signup error message (#9704)

<!-- Clearly explain the need for these changes: -->

We keep showing local users error messages that are just not relevant

### Changes 🏗️
Swaps the error messaging logic to be dependent on the behavior of the
specific platform they are on
<!-- Concisely describe all of the changes made in this pull request:
-->

### 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 with auth container down (simulates incorrect setup) and
validate that error message is shown
  - [x] Try normal path

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

@@ -11,7 +11,7 @@ import {
 } from "@/components/ui/form";
 import { useForm } from "react-hook-form";
 import { Input } from "@/components/ui/input";
-import { z } from "zod";
+import type { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useCallback, useState } from "react";
 import { useRouter } from "next/navigation";
@@ -23,11 +23,12 @@ import {
   AuthCard,
   AuthHeader,
   AuthButton,
-  AuthFeedback,
   AuthBottomText,
   PasswordInput,
 } from "@/components/auth";
+import AuthFeedback from "@/components/auth/AuthFeedback";
 import { signupFormSchema } from "@/types/auth";
+import { getBehaveAs } from "@/lib/utils";
 
 export default function SignupPage() {
   const { supabase, user, isUserLoading } = useSupabase();
@@ -35,7 +36,7 @@ export default function SignupPage() {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   //TODO: Remove after closed beta
-  const [showWaitlistPrompt, setShowWaitlistPrompt] = useState(false);
+  const [showErrorPrompt, setShowErrorPrompt] = useState(false);
 
   const form = useForm<z.infer<typeof signupFormSchema>>({
     resolver: zodResolver(signupFormSchema),
@@ -63,12 +64,13 @@ export default function SignupPage() {
           setFeedback("User with this email already exists");
           return;
         } else {
-          setShowWaitlistPrompt(true);
+          setShowErrorPrompt(true);
+          setFeedback(error);
         }
         return;
       }
       setFeedback(null);
-      setShowWaitlistPrompt(false);
+      setShowErrorPrompt(false);
     },
     [form],
   );
@@ -187,40 +189,14 @@ export default function SignupPage() {
             )}
           />
         </form>
-        <AuthFeedback message={feedback} isError={true} />
       </Form>
-      {showWaitlistPrompt && (
-        <div>
-          <span className="mr-1 text-sm font-normal leading-normal text-red-500">
-            The provided email may not be allowed to sign up.
-          </span>
-          <br />
-          <span className="mx-1 text-sm font-normal leading-normal text-slate-950">
-            - AutoGPT Platform is currently in closed beta. You can join
-          </span>
-          <Link
-            href="https://agpt.co/waitlist"
-            className="text-sm font-normal leading-normal text-slate-950 underline"
-          >
-            the waitlist here.
-          </Link>
-          <br />
-          <span className="mx-1 text-sm font-normal leading-normal text-slate-950">
-            - Make sure you use the same email address you used to sign up for
-            the waitlist.
-          </span>
-          <br />
-          <span className="mx-1 text-sm font-normal leading-normal text-slate-950">
-            - You can self host the platform, visit our
-          </span>
-          <Link
-            href="https://agpt.co/waitlist"
-            className="text-sm font-normal leading-normal text-slate-950 underline"
-          >
-            GitHub repository.
-          </Link>
-        </div>
-      )}
+      <AuthFeedback
+        message={feedback}
+        isError={!!feedback}
+        showErrorPrompt={showErrorPrompt}
+        behaveAs={getBehaveAs()}
+      />
+
       <AuthBottomText
         text="Already a member?"
         linkText="Log in"

autogpt_platform/frontend/src/components/auth/AuthFeedback.tsx

@@ -1,15 +1,117 @@
+import { AlertCircle, CheckCircle } from "lucide-react";
+import { Card, CardContent } from "@/components/ui/card";
+import { HelpItem } from "@/components/auth/help-item";
+import Link from "next/link";
+import { BehaveAs } from "@/lib/utils";
+
 interface Props {
   message?: string | null;
   isError?: boolean;
+  showErrorPrompt?: boolean;
+  behaveAs?: BehaveAs;
 }
 
-export default function AuthFeedback({ message = "", isError = false }: Props) {
+export default function AuthFeedback({
+  message = "",
+  isError = false,
+  showErrorPrompt = false,
+  behaveAs = BehaveAs.CLOUD,
+}: Props) {
+  // If there's no message but isError is true, show a default error message
+  const displayMessage =
+    message || (isError ? "Something went wrong. Please try again." : "");
+
   return (
-    <div className="mt-4 text-center text-sm font-medium leading-normal">
-      {isError ? (
-        <div className="text-red-500">{message}</div>
-      ) : (
-        <div className="text-slate-950">{message}</div>
+    <div className="mt-4 space-y-4">
+      {/* Message feedback */}
+      {displayMessage && (
+        <div className="text-center text-sm font-medium leading-normal">
+          {isError ? (
+            <div className="flex items-center justify-center space-x-2 text-red-500">
+              <AlertCircle className="h-4 w-4" />
+              <span>{displayMessage}</span>
+            </div>
+          ) : (
+            <div className="flex items-center justify-center space-x-2 text-green-600">
+              <CheckCircle className="h-4 w-4" />
+              <span>{displayMessage}</span>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Cloud-specific help */}
+      {showErrorPrompt && behaveAs === BehaveAs.CLOUD && (
+        <div className="mt-2 space-y-2 text-sm">
+          <span className="block text-center font-medium text-red-500">
+            The provided email may not be allowed to sign up.
+          </span>
+          <ul className="space-y-2 text-slate-700">
+            <li className="flex items-start">
+              <span className="mr-2">-</span>
+              <span>
+                AutoGPT Platform is currently in closed beta. You can join{" "}
+                <Link
+                  href="https://agpt.co/waitlist"
+                  className="font-medium text-slate-950 underline hover:text-slate-700"
+                >
+                  the waitlist here
+                </Link>
+                .
+              </span>
+            </li>
+            <li className="flex items-start">
+              <span className="mr-2">-</span>
+              <span>
+                Make sure you use the same email address you used to sign up for
+                the waitlist.
+              </span>
+            </li>
+            <li className="flex items-start">
+              <span className="mr-2">-</span>
+              <span>
+                You can self host the platform, visit our{" "}
+                <Link
+                  href="https://github.com/Significant-Gravitas/AutoGPT"
+                  className="font-medium text-slate-950 underline hover:text-slate-700"
+                >
+                  GitHub repository
+                </Link>
+                .
+              </span>
+            </li>
+          </ul>
+        </div>
+      )}
+
+      {/* Local-specific help */}
+      {showErrorPrompt && behaveAs === BehaveAs.LOCAL && (
+        <Card className="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
+          <CardContent className="p-0">
+            <div className="space-y-4 divide-y divide-slate-100">
+              <HelpItem
+                title="Having trouble getting AutoGPT running locally?"
+                description="Ask for help on our"
+                linkText="Discord"
+                href="https://discord.gg/autogpt"
+              />
+
+              <HelpItem
+                title="Think you've found a bug?"
+                description="Open an issue on our"
+                linkText="GitHub"
+                href="https://github.com/Significant-Gravitas/AutoGPT"
+              />
+
+              <HelpItem
+                title="Interested in the cloud-hosted version?"
+                description="Join our"
+                linkText="waitlist here"
+                href="https://agpt.co/waitlist"
+              />
+            </div>
+          </CardContent>
+        </Card>
       )}
     </div>
   );

autogpt_platform/frontend/src/components/auth/help-item.tsx

@@ -0,0 +1,32 @@
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
+
+interface HelpItemProps {
+  title: string;
+  description: string;
+  linkText: string;
+  href: string;
+}
+
+export function HelpItem({
+  title,
+  description,
+  linkText,
+  href,
+}: HelpItemProps) {
+  return (
+    <div className="p-4">
+      <h3 className="mb-1 text-sm font-medium text-slate-950">{title}</h3>
+      <p className="text-sm text-slate-600">
+        {description}{" "}
+        <Link
+          href={href}
+          className="inline-flex items-center font-medium text-slate-950 hover:text-slate-700"
+        >
+          {linkText}
+          <ExternalLink className="ml-1 h-3 w-3" />
+        </Link>
+      </p>
+    </div>
+  );
+}