updated logic

web/src/app/auth/forgot-password/page.tsx

@@ -26,8 +26,6 @@ const ForgotPasswordPage: React.FC = () => {
   return (
     <AuthFlowContainer>
       <div className="flex flex-col w-full justify-center">
-        <CardSection className="mt-4 w-full">
-          {" "}
         <div className="flex">
           <Title className="mb-2 mx-auto font-bold">Forgot Password</Title>
         </div>
@@ -46,8 +44,7 @@ const ForgotPasswordPage: React.FC = () => {
               await forgotPassword(values.email);
               setPopup({
                 type: "success",
-                  message:
+                message: "Password reset email sent. Please check your inbox.",
-                    "Password reset email sent. Please check your inbox.",
               });
             } catch (error) {
               const errorMessage =
@@ -91,7 +88,6 @@ const ForgotPasswordPage: React.FC = () => {
             </Link>
           </Text>
         </div>
-        </CardSection>
       </div>
     </AuthFlowContainer>
   );

web/src/app/auth/login/EmailPasswordForm.tsx

@@ -12,6 +12,7 @@ import { Spinner } from "@/components/Spinner";
 import { set } from "lodash";
 import { NEXT_PUBLIC_FORGOT_PASSWORD_ENABLED } from "@/lib/constants";
 import Link from "next/link";
+import { useUser } from "@/components/user/UserProvider";
 
 export function EmailPasswordForm({
   isSignup = false,
@@ -24,6 +25,7 @@ export function EmailPasswordForm({
   referralSource?: string;
   nextUrl?: string | null;
 }) {
+  const { user } = useUser();
   const { popup, setPopup } = usePopup();
   const [isWorking, setIsWorking] = useState(false);
   return (
@@ -116,24 +118,29 @@ export function EmailPasswordForm({
               name="password"
               label="Password"
               type="password"
+              includeForgotPassword={
+                NEXT_PUBLIC_FORGOT_PASSWORD_ENABLED && !isSignup
+              }
               placeholder="**************"
             />
 
-            {NEXT_PUBLIC_FORGOT_PASSWORD_ENABLED && !isSignup && (
-              <Link
-                href="/auth/forgot-password"
-                className="text-sm text-link font-medium whitespace-nowrap"
-              >
-                Forgot Password?
-              </Link>
-            )}
             <Button
               type="submit"
               disabled={isSubmitting}
-              className="mx-auto w-full"
+              className="mx-auto  !py-4 w-full"
             >
               {isSignup ? "Sign Up" : "Log In"}
             </Button>
+            {user?.is_anonymous_user && (
+              <Link
+                href="/chat"
+                className="text-xs text-blue-500  cursor-pointer text-center w-full text-link font-medium mx-auto"
+              >
+                <span className="hover:border-b hover:border-dotted hover:border-blue-500">
+                  or continue as guest
+                </span>
+              </Link>
+            )}
           </Form>
         )}
       </Formik>

web/src/app/auth/login/page.tsx

@@ -77,7 +77,8 @@ const Page = async (props: {
   }
 
   return (
-    <AuthFlowContainer>
+    <div className="flex flex-col ">
+      <AuthFlowContainer authState="login">
         <div className="absolute top-10x w-full">
           <HealthCheckBanner />
         </div>
@@ -128,14 +129,18 @@ const Page = async (props: {
           )}
 
           {authTypeMetadata?.authType === "basic" && (
-          <CardSection className="mt-4 w-96">
+            <>
               <div className="flex">
-              <Title className="mb-2 mx-auto font-bold">
+                <Title className="mb-2 mx-auto text-xl text-strong font-bold">
                   <LoginText />
                 </Title>
               </div>
               <EmailPasswordForm nextUrl={nextUrl} />
-            <div className="flex flex-col gap-y-2 items-center">
+              <div className="flex flex-col gap-y-2 items-center"></div>
+            </>
+          )}
+        </div>
+      </AuthFlowContainer>
       <Text className="mt-4 ">
         Don&apos;t have an account?{" "}
         <Link
@@ -148,27 +153,6 @@ const Page = async (props: {
         </Link>
       </Text>
     </div>
-          </CardSection>
-        )}
-        {currentUser?.is_anonymous_user && (
-          <div className="mt-4 w-full justify-center">
-            <Text className="mt-4 mx-auto">
-              You are currently logged in as an anonymous user. You can access
-              the chat experience{" "}
-              <Link
-                href={`/auth/login${
-                  searchParams?.next ? `?next=${searchParams.next}` : ""
-                }`}
-                className="text-link font-medium"
-              >
-                here
-              </Link>
-              .
-            </Text>
-          </div>
-        )}
-      </div>
-    </AuthFlowContainer>
   );
 };
 

web/src/app/auth/reset-password/page.tsx

@@ -28,7 +28,6 @@ const ResetPasswordPage: React.FC = () => {
   return (
     <AuthFlowContainer>
       <div className="flex flex-col w-full justify-center">
-        <CardSection className="mt-4 w-full">
         <div className="flex">
           <Title className="mb-2 mx-auto font-bold">Reset Password</Title>
         </div>
@@ -58,8 +57,7 @@ const ResetPasswordPage: React.FC = () => {
               await resetPassword(token, values.password);
               setPopup({
                 type: "success",
-                  message:
+                message: "Password reset successfully. Redirecting to login...",
-                    "Password reset successfully. Redirecting to login...",
               });
               setTimeout(() => {
                 redirect("/auth/login");
@@ -108,7 +106,6 @@ const ResetPasswordPage: React.FC = () => {
             </Link>
           </Text>
         </div>
-        </CardSection>
       </div>
     </AuthFlowContainer>
   );

web/src/app/auth/signup/page.tsx

@@ -61,7 +61,7 @@ const Page = async (props: {
   }
 
   return (
-    <AuthFlowContainer>
+    <AuthFlowContainer authState="signup">
       <HealthCheckBanner />
 
       <>
@@ -94,21 +94,6 @@ const Page = async (props: {
             shouldVerify={authTypeMetadata?.requiresVerification}
             nextUrl={nextUrl}
           />
-
-          <div className="flex">
-            <Text className="mt-4 mx-auto">
-              Already have an account?{" "}
-              <Link
-                href={{
-                  pathname: "/auth/login",
-                  query: { ...searchParams },
-                }}
-                className="text-link font-medium"
-              >
-                Log In
-              </Link>
-            </Text>
-          </div>
         </div>
       </>
     </AuthFlowContainer>

web/src/components/admin/connectors/Field.tsx

@@ -29,6 +29,7 @@ import { useRef, useState } from "react";
 import remarkGfm from "remark-gfm";
 import { EditIcon } from "@/components/icons/icons";
 import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 export function SectionHeader({
   children,
@@ -143,6 +144,7 @@ export function TextFormField({
   small,
   removeLabel,
   min,
+  includeForgotPassword,
   onChange,
   width,
   vertical,
@@ -169,6 +171,7 @@ export function TextFormField({
   explanationLink?: string;
   small?: boolean;
   min?: number;
+  includeForgotPassword?: boolean;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   width?: string;
   vertical?: boolean;
@@ -238,7 +241,7 @@ export function TextFormField({
         )}
       </div>
       {subtext && <SubLabel>{subtext}</SubLabel>}
-      <div className={`w-full flex ${includeRevert && "gap-x-2"}`}>
+      <div className={`w-full flex ${includeRevert && "gap-x-2"} relative`}>
         <Field
           onChange={handleChange}
           min={min}
@@ -269,6 +272,14 @@ export function TextFormField({
           placeholder={placeholder}
           autoComplete={autoCompleteDisabled ? "off" : undefined}
         />
+        {includeForgotPassword && (
+          <Link
+            href="/auth/forgot-password"
+            className="absolute right-3 top-1/2 mt-[3px] transform -translate-y-1/2 text-xs text-blue-500 cursor-pointer"
+          >
+            Forgot password?
+          </Link>
+        )}
       </div>
 
       {explanationText && (

web/src/components/auth/AuthFlowContainer.tsx

@@ -1,16 +1,41 @@
+import Link from "next/link";
 import { Logo } from "../logo/Logo";
 
 export default function AuthFlowContainer({
   children,
+  authState,
 }: {
   children: React.ReactNode;
+  authState?: "signup" | "login";
 }) {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-background">
+    <div className="p-4 flex flex-col items-center justify-center min-h-screen bg-background">
-      <div className="w-full max-w-md bg-black pt-8 pb-4 px-8 mx-4 gap-y-4 bg-white flex items-center flex-col rounded-xl shadow-lg border border-bacgkround-100">
+      <div className="w-full max-w-md bg-black pt-8 pb-6 px-8 mx-4 gap-y-4 bg-white flex items-center flex-col rounded-xl shadow-lg border border-bacgkround-100">
         <Logo width={70} height={70} />
         {children}
       </div>
+      {authState === "login" && (
+        <div className="text-sm mt-4 text-center w-full text-neutral-900 font-medium mx-auto">
+          Don&apos;t have an account?{" "}
+          <Link
+            href="/auth/signup"
+            className=" underline transition-colors duration-200"
+          >
+            Create one
+          </Link>
+        </div>
+      )}
+      {authState === "signup" && (
+        <div className="text-sm mt-4 text-center w-full text-neutral-900 font-medium mx-auto">
+          Already have an account?{" "}
+          <Link
+            href="/auth/login"
+            className=" underline transition-colors duration-200"
+          >
+            Log In
+          </Link>
+        </div>
+      )}
     </div>
   );
 }