chore: wip

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

@@ -1,16 +1,12 @@
 "use client";
-import {
-  AuthBottomText,
-  AuthButton,
-  AuthCard,
-  AuthFeedback,
-  AuthHeader,
-  GoogleOAuthButton,
-  PasswordInput,
-  Turnstile,
-} from "@/components/auth";
+import AuthButton from "@/components/auth/AuthButton";
+import { AuthCard } from "@/components/auth/AuthCard";
+import AuthFeedback from "@/components/auth/AuthFeedback";
 import { EmailNotAllowedModal } from "@/components/auth/EmailNotAllowedModal";
 import { GoogleLoadingModal } from "@/components/auth/GoogleLoadingModal";
+import { GoogleOAuthButton } from "@/components/auth/GoogleOAuthButton";
+import { PasswordInput } from "@/components/auth/PasswordInput";
+import Turnstile from "@/components/auth/Turnstile";
 import {
   Form,
   FormControl,
@@ -56,10 +52,8 @@ export default function LoginPage() {
   }
 
   return (
-    <>
-      <AuthCard className="mx-auto">
-        <AuthHeader>Login to your account</AuthHeader>
-
+    <div className="flex h-full min-h-[85vh] flex-col items-center justify-center">
+      <AuthCard title="Login to your account">
         {isCloudEnv ? (
           <>
             <div className="mb-6">
@@ -76,9 +70,8 @@ export default function LoginPage() {
             </div>
           </>
         ) : null}
-
         <Form {...form}>
-          <form onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit} className="w-full">
             <FormField
               control={form.control}
               name="email"
@@ -145,10 +138,9 @@ export default function LoginPage() {
             behaveAs={getBehaveAs()}
           />
         </Form>
-        <AuthBottomText
+        <AuthCard.BottomText
           text="Don't have an account?"
-          linkText="Sign up"
-          href="/signup"
+          link={{ text: "Sign up", href: "/signup" }}
         />
       </AuthCard>
       <GoogleLoadingModal isOpen={isGoogleLoading} />
@@ -156,6 +148,6 @@ export default function LoginPage() {
         isOpen={showNotAllowedModal}
         onClose={handleCloseNotAllowedModal}
       />
-    </>
+    </div>
   );
 }

autogpt_platform/frontend/src/app/(platform)/reset-password/page.tsx

@@ -1,12 +1,9 @@
 "use client";
-import {
-  AuthButton,
-  AuthCard,
-  AuthFeedback,
-  AuthHeader,
-  PasswordInput,
-  Turnstile,
-} from "@/components/auth";
+import AuthButton from "@/components/auth/AuthButton";
+import { AuthCard } from "@/components/auth/AuthCard";
+import AuthFeedback from "@/components/auth/AuthFeedback";
+import { PasswordInput } from "@/components/auth/PasswordInput";
+import Turnstile from "@/components/auth/Turnstile";
 import {
   Form,
   FormControl,
@@ -160,9 +157,8 @@ export default function ResetPasswordPage() {
   }
 
   return (
-    <div className="flex min-h-screen items-center justify-center">
-      <AuthCard>
-        <AuthHeader>Reset Password</AuthHeader>
+    <div className="flex h-full min-h-[85vh] flex-col items-center justify-center">
+      <AuthCard title="Reset Password">
         {user ? (
           <form onSubmit={changePasswordForm.handleSubmit(onChangePassword)}>
             <Form {...changePasswordForm}>

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

@@ -1,16 +1,13 @@
 "use client";
-import {
-  AuthBottomText,
-  AuthButton,
-  AuthCard,
-  AuthHeader,
-  GoogleOAuthButton,
-  PasswordInput,
-  Turnstile,
-} from "@/components/auth";
+
+import AuthButton from "@/components/auth/AuthButton";
+import { AuthCard } from "@/components/auth/AuthCard";
 import AuthFeedback from "@/components/auth/AuthFeedback";
 import { EmailNotAllowedModal } from "@/components/auth/EmailNotAllowedModal";
 import { GoogleLoadingModal } from "@/components/auth/GoogleLoadingModal";
+import { GoogleOAuthButton } from "@/components/auth/GoogleOAuthButton";
+import { PasswordInput } from "@/components/auth/PasswordInput";
+import Turnstile from "@/components/auth/Turnstile";
 import { Checkbox } from "@/components/ui/checkbox";
 import {
   Form,
@@ -58,10 +55,8 @@ export default function SignupPage() {
   }
 
   return (
-    <>
-      <AuthCard className="mx-auto mt-12">
-        <AuthHeader>Create a new account</AuthHeader>
-
+    <div className="flex h-full min-h-[85vh] flex-col items-center justify-center">
+      <AuthCard title="Create a new account">
         {isCloudEnv ? (
           <>
             <div className="mb-6">
@@ -80,7 +75,7 @@ export default function SignupPage() {
         ) : null}
 
         <Form {...form}>
-          <form onSubmit={handleSubmit}>
+          <form onSubmit={handleSubmit} className="w-full">
             <FormField
               control={form.control}
               name="email"
@@ -190,10 +185,9 @@ export default function SignupPage() {
           behaveAs={getBehaveAs()}
         />
 
-        <AuthBottomText
+        <AuthCard.BottomText
           text="Already a member?"
-          linkText="Log in"
-          href="/login"
+          link={{ text: "Log in", href: "/login" }}
         />
       </AuthCard>
       <GoogleLoadingModal isOpen={isGoogleLoading} />
@@ -201,6 +195,6 @@ export default function SignupPage() {
         isOpen={showNotAllowedModal}
         onClose={handleCloseNotAllowedModal}
       />
-    </>
+    </div>
   );
 }

autogpt_platform/frontend/src/components/atoms/Card/Card.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+import { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+  className?: string;
+}
+
+export function Card({ children, className }: Props) {
+  return (
+    <div className={cn("rounded-lg bg-white p-6 shadow-md", className)}>
+      {children}
+    </div>
+  );
+}

autogpt_platform/frontend/src/components/atoms/Link/Link.tsx

@@ -23,7 +23,7 @@ const Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
 ) {
   const linkClasses = cn(
     // Base styles from Figma
-    "font-['Geist'] text-sm font-medium leading-[22px] text-[var(--AutoGPT-Text-text-black,#141414)]",
+    "font-sans text-sm font-medium leading-[22px] text-[var(--AutoGPT-Text-text-black,#141414)]",
     // Variant-specific underline styles
     variant === "primary" && "hover:underline",
     variant === "secondary" && "underline",

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

@@ -1,37 +0,0 @@
-import { cn } from "@/lib/utils";
-import Link from "next/link";
-
-interface Props {
-  className?: string;
-  text: string;
-  linkText?: string;
-  href?: string;
-}
-
-export default function AuthBottomText({
-  className = "",
-  text,
-  linkText,
-  href = "",
-}: Props) {
-  return (
-    <div
-      className={cn(
-        className,
-        "mt-8 inline-flex w-full items-center justify-center",
-      )}
-    >
-      <span className="text-sm font-medium leading-normal text-slate-950">
-        {text}
-      </span>
-      {linkText && (
-        <Link
-          href={href}
-          className="ml-1 text-sm font-medium leading-normal text-slate-950 underline"
-        >
-          {linkText}
-        </Link>
-      )}
-    </div>
-  );
-}

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

@@ -1,22 +1,55 @@
-import { ReactNode } from "react";
 import { cn } from "@/lib/utils";
+import { ReactNode } from "react";
+import { Card } from "../atoms/Card/Card";
+import { Link } from "../atoms/Link/Link";
+import { Text } from "../atoms/Text/Text";
 
-interface Props {
-  children: ReactNode;
+interface BottomTextProps {
+  text: string;
+  link?: { text: string; href: string };
   className?: string;
 }
 
-export default function AuthCard({ children, className }: Props) {
+AuthCard.BottomText = function BottomText({
+  text,
+  link,
+  className,
+}: BottomTextProps) {
   return (
     <div
       className={cn(
-        "flex h-[80vh] w-[32rem] items-center justify-center",
         className,
+        "mt-8 inline-flex w-full items-center justify-center",
       )}
     >
-      <div className="w-full max-w-md rounded-lg bg-white p-6 shadow-md">
-        {children}
-      </div>
+      <span className="text-sm font-medium leading-normal text-slate-950">
+        {text}
+      </span>
+      {link ? (
+        <Link
+          href={link.href}
+          className="ml-1 text-sm font-medium leading-normal text-slate-950 underline"
+        >
+          {link.text}
+        </Link>
+      ) : null}
     </div>
   );
+};
+
+interface Props {
+  children: ReactNode;
+  title: string;
+  className?: string;
+}
+
+export function AuthCard({ children, title }: Props) {
+  return (
+    <Card className="mx-auto flex min-h-[50vh] w-full max-w-[32rem] flex-col items-center justify-center gap-8">
+      <Text variant="h3" as="h2">
+        {title}
+      </Text>
+      {children}
+    </Card>
+  );
 }

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

@@ -1,13 +0,0 @@
-import { ReactNode } from "react";
-
-interface Props {
-  children: ReactNode;
-}
-
-export default function AuthHeader({ children }: Props) {
-  return (
-    <div className="mb-8 text-2xl font-semibold leading-normal text-slate-950">
-      {children}
-    </div>
-  );
-}

autogpt_platform/frontend/src/components/auth/index.ts

@@ -1,19 +0,0 @@
-import AuthBottomText from "./AuthBottomText";
-import AuthButton from "./AuthButton";
-import AuthCard from "./AuthCard";
-import AuthFeedback from "./AuthFeedback";
-import AuthHeader from "./AuthHeader";
-import GoogleOAuthButton from "./GoogleOAuthButton";
-import { PasswordInput } from "./PasswordInput";
-import Turnstile from "./Turnstile";
-
-export {
-  AuthBottomText,
-  AuthButton,
-  AuthCard,
-  AuthFeedback,
-  AuthHeader,
-  GoogleOAuthButton,
-  PasswordInput,
-  Turnstile,
-};