chore: wip

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

@@ -1,5 +1,6 @@
 "use client";
-import AuthButton from "@/components/auth/AuthButton";
+import { Button } from "@/components/atoms/Button/Button";
+import { Input } from "@/components/atoms/Input/Input";
 import { AuthCard } from "@/components/auth/AuthCard";
 import AuthFeedback from "@/components/auth/AuthFeedback";
 import { PasswordInput } from "@/components/auth/PasswordInput";
@@ -13,7 +14,6 @@ import {
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import LoadingBox from "@/components/ui/loading";
 import { useTurnstile } from "@/hooks/useTurnstile";
 import { useSupabase } from "@/lib/supabase/hooks/useSupabase";
@@ -204,13 +204,15 @@ export default function ResetPasswordPage() {
                 shouldRender={changePasswordTurnstile.shouldRender}
               />
 
-              <AuthButton
-                onClick={() => onChangePassword(changePasswordForm.getValues())}
-                isLoading={isLoading}
+              <Button
+                variant="primary"
+                loading={isLoading}
                 type="submit"
+                className="mt-6 w-full"
+                onClick={() => onChangePassword(changePasswordForm.getValues())}
               >
                 Update password
-              </AuthButton>
+              </Button>
               <AuthFeedback
                 type="login"
                 message={feedback}
@@ -227,11 +229,15 @@ export default function ResetPasswordPage() {
                 name="email"
                 render={({ field }) => (
                   <FormItem className="mb-6">
-                    <FormLabel>Email</FormLabel>
                     <FormControl>
-                      <Input placeholder="m@example.com" {...field} />
+                      <Input
+                        label="Email"
+                        placeholder="m@example.com"
+                        type="email"
+                        error={sendEmailForm.formState.errors.email?.message}
+                        {...field}
+                      />
                     </FormControl>
-                    <FormMessage />
                   </FormItem>
                 )}
               />
@@ -248,14 +254,16 @@ export default function ResetPasswordPage() {
                 shouldRender={sendEmailTurnstile.shouldRender}
               />
 
-              <AuthButton
-                onClick={() => onSendEmail(sendEmailForm.getValues())}
-                isLoading={isLoading}
+              <Button
+                variant="primary"
+                loading={isLoading}
                 disabled={disabled}
                 type="submit"
+                className="mt-6 w-full"
+                onClick={() => onSendEmail(sendEmailForm.getValues())}
               >
                 Send reset email
-              </AuthButton>
+              </Button>
               <AuthFeedback
                 type="login"
                 message={feedback}

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

@@ -1,24 +1,22 @@
 "use client";
 
-import AuthButton from "@/components/auth/AuthButton";
+import { Button } from "@/components/atoms/Button/Button";
+import { Input } from "@/components/atoms/Input/Input";
 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,
   FormControl,
-  FormDescription,
   FormField,
   FormItem,
   FormLabel,
   FormMessage,
 } from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
 import LoadingBox from "@/components/ui/loading";
 import { getBehaveAs } from "@/lib/utils";
 import Link from "next/link";
@@ -75,52 +73,52 @@ export default function SignupPage() {
         ) : null}
 
         <Form {...form}>
-          <form onSubmit={handleSubmit} className="w-full">
+          <form onSubmit={handleSubmit} className="flex w-full flex-col gap-6">
             <FormField
               control={form.control}
               name="email"
               render={({ field }) => (
-                <FormItem className="mb-6">
-                  <FormLabel>Email</FormLabel>
-                  <FormControl>
-                    <Input
-                      placeholder="m@example.com"
-                      {...field}
-                      type="email"
-                      autoComplete="email"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
+                <Input
+                  label="Email"
+                  placeholder="m@example.com"
+                  type="email"
+                  autoComplete="email"
+                  error={form.formState.errors.email?.message}
+                  {...field}
+                />
               )}
             />
             <FormField
               control={form.control}
               name="password"
               render={({ field }) => (
-                <FormItem className="mb-6">
-                  <FormLabel>Password</FormLabel>
-                  <FormControl>
-                    <PasswordInput {...field} autoComplete="new-password" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
+                <Input
+                  label="Password"
+                  placeholder="********"
+                  type="password"
+                  autoComplete="new-password"
+                  error={form.formState.errors.password?.message}
+                  {...field}
+                />
               )}
             />
             <FormField
               control={form.control}
               name="confirmPassword"
               render={({ field }) => (
-                <FormItem className="mb-4">
-                  <FormLabel>Confirm Password</FormLabel>
-                  <FormControl>
-                    <PasswordInput {...field} autoComplete="new-password" />
-                  </FormControl>
-                  <FormDescription className="text-sm font-normal leading-tight text-slate-500">
+                <div className="space-y-2">
+                  <Input
+                    label="Confirm Password"
+                    placeholder="********"
+                    type="password"
+                    autoComplete="new-password"
+                    error={form.formState.errors.confirmPassword?.message}
+                    {...field}
+                  />
+                  <p className="text-sm font-normal leading-tight text-slate-500">
                     Password needs to be at least 12 characters long
-                  </FormDescription>
-                  <FormMessage />
-                </FormItem>
+                  </p>
+                </div>
               )}
             />
 
@@ -136,9 +134,14 @@ export default function SignupPage() {
               shouldRender={turnstile.shouldRender}
             />
 
-            <AuthButton isLoading={isLoading} type="submit">
+            <Button
+              variant="primary"
+              loading={isLoading}
+              type="submit"
+              className="mt-6 w-full"
+            >
               Sign up
-            </AuthButton>
+            </Button>
             <FormField
               control={form.control}
               name="agreeToTerms"

autogpt_platform/frontend/src/components/atoms/Text/Text.stories.tsx

@@ -94,8 +94,6 @@ export function AllVariants() {
         code={`<Text variant="small">Small</Text>
 <Text variant="small-medium">Small Medium</Text>`}
       />
-      <Text variant="subtle">Subtle</Text>
-      <StoryCode code={`<Text variant="subtle">Subtle</Text>`} />
     </div>
   );
 }
@@ -128,7 +126,6 @@ export function BodyText() {
       <Text variant="body-medium">Body Medium</Text>
       <Text variant="small">Small</Text>
       <Text variant="small-medium">Small Medium</Text>
-      <Text variant="subtle">Subtle</Text>
     </div>
   );
 }

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

@@ -33,7 +33,7 @@ export default function AuthFeedback({
   }
 
   return (
-    <div className="mt-4 space-y-4">
+    <div className="mt-4 w-full space-y-4">
       {/* Message feedback */}
       {displayMessage && (
         <div className="text-center text-sm font-medium leading-normal">
@@ -93,31 +93,29 @@ export default function AuthFeedback({
 
       {/* Local-specific help */}
       {showLocalHelp && (
-        <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"
-              />
+        <Card className="w-full overflow-hidden rounded-lg border border-slate-200 bg-white shadow-sm">
+          <div className="w-full 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="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>
+            <HelpItem
+              title="Interested in the cloud-hosted version?"
+              description="Join our"
+              linkText="waitlist here"
+              href="https://agpt.co/waitlist"
+            />
+          </div>
         </Card>
       )}
     </div>