feat(frontend): Update login and signup feedback (#9917)

Currently both login and signup page show the same feedback on error on
cloud (join the waitlist).

### Changes 🏗️
Update login&signup feedback for cloud.

- Use cards for login and signup feedback instead of html list
- Make login page show prompt to redirect user to signup

<img width="474" alt="Screenshot 2025-05-07 at 4 01 07 PM"
src="https://github.com/user-attachments/assets/45f189ea-5fea-45bb-89f9-7323418d69ea"
/>
<img width="476" alt="Screenshot 2025-05-07 at 4 03 29 PM"
src="https://github.com/user-attachments/assets/96f4cd7f-f3e6-44b2-b647-96ee98063572"
/>

### 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] Signup&login works with correct credentials
  - [x] Signup&login shows correct error message on wrong credentials
  - [x] Links work correctly

autogpt_platform/frontend/src/app/(platform)/login/page.tsx

@@ -176,6 +176,7 @@ export default function LoginPage() {
           </AuthButton>
         </form>
         <AuthFeedback
+          type="login"
           message={feedback}
           isError={!!feedback}
           behaveAs={getBehaveAs()}

autogpt_platform/frontend/src/app/(platform)/reset_password/page.tsx

@@ -200,6 +200,7 @@ export default function ResetPasswordPage() {
                 Update password
               </AuthButton>
               <AuthFeedback
+                type="login"
                 message={feedback}
                 isError={isError}
                 behaveAs={getBehaveAs()}
@@ -242,6 +243,7 @@ export default function ResetPasswordPage() {
                 Send reset email
               </AuthButton>
               <AuthFeedback
+                type="login"
                 message={feedback}
                 isError={isError}
                 behaveAs={getBehaveAs()}

autogpt_platform/frontend/src/app/(platform)/signup/page.tsx

@@ -106,7 +106,7 @@ export default function SignupPage() {
   }
 
   return (
-    <AuthCard className="mx-auto">
+    <AuthCard className="mx-auto mt-12">
       <AuthHeader>Create a new account</AuthHeader>
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSignup)}>
@@ -215,6 +215,7 @@ export default function SignupPage() {
         </form>
       </Form>
       <AuthFeedback
+        type="signup"
         message={feedback}
         isError={!!feedback}
         behaveAs={getBehaveAs()}

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

@@ -1,16 +1,17 @@
 import { AlertCircle, CheckCircle } from "lucide-react";
-import { Card, CardContent } from "@/components/ui/card";
+import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { HelpItem } from "@/components/auth/help-item";
-import Link from "next/link";
 import { BehaveAs } from "@/lib/utils";
 
 interface Props {
+  type: "login" | "signup";
   message?: string | null;
   isError?: boolean;
   behaveAs?: BehaveAs;
 }
 
 export default function AuthFeedback({
+  type,
   message = "",
   isError = false,
   behaveAs = BehaveAs.CLOUD,
@@ -39,48 +40,45 @@ export default function AuthFeedback({
       )}
 
       {/* Cloud-specific help */}
-      {isError && 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
+      {isError &&
+        behaveAs === BehaveAs.CLOUD &&
+        (type === "signup" ? (
+          <Card className="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
+            <CardContent className="p-0">
+              <div className="divide-y divide-slate-100">
+                <span className="my-3 block text-center text-sm font-medium text-red-500">
+                  The provided email may not be allowed to sign up.
+                </span>
+                <HelpItem
+                  title="AutoGPT Platform is currently in closed beta. "
+                  description="You can join "
+                  linkText="the waitlist here"
                   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
+                />
+                <HelpItem title="Make sure you use the same email address you used to sign up for the waitlist." />
+                <HelpItem
+                  title="You can self host the platform!"
+                  description="Visit our"
+                  linkText="GitHub repository"
                   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>
-      )}
+                />
+              </div>
+            </CardContent>
+          </Card>
+        ) : (
+          <Card className="overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
+            <CardContent className="p-0">
+              <div className="divide-y divide-slate-100">
+                <HelpItem
+                  title="Having trouble logging in?"
+                  description="Make sure you've already "
+                  linkText="signed up"
+                  href="/signup"
+                />
+              </div>
+            </CardContent>
+          </Card>
+        ))}
 
       {/* Local-specific help */}
       {isError && behaveAs === BehaveAs.LOCAL && (

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

@@ -3,29 +3,33 @@ import Link from "next/link";
 
 interface HelpItemProps {
   title: string;
-  description: string;
-  linkText: string;
-  href: string;
+  description?: string;
+  linkText?: string;
+  href?: string;
 }
 
 export function HelpItem({
   title,
   description,
   linkText,
-  href,
+  href = "",
 }: HelpItemProps) {
+  const external = !href.startsWith("/");
+
   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>
+        {linkText && (
+          <Link
+            href={href}
+            className="inline-flex items-center font-medium text-slate-950 hover:text-slate-700"
+          >
+            {linkText}
+            {external && <ExternalLink className="ml-1 h-3 w-3" />}
+          </Link>
+        )}
       </p>
     </div>
   );