Merge pull request #990 from objectstack-ai/copilot/optimize-login-page-visuals

Author: hotlong

apps/console/src/components/AuthPageLayout.tsx

@@ -0,0 +1,45 @@
+/**
+ * Shared layout for authentication pages (login, register, forgot password).
+ * Provides a widescreen-optimized split-panel design with branding on the left
+ * and form content on the right, inspired by enterprise platforms like Airtable and Salesforce.
+ */
+
+import type React from 'react';
+
+export function AuthPageLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex min-h-screen">
+      {/* Left branding panel - hidden on mobile, shown on lg+ */}
+      <div className="hidden lg:flex lg:w-1/2 items-center justify-center bg-primary p-12">
+        <div className="max-w-md space-y-6 text-primary-foreground">
+          <div className="flex items-center gap-3">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="h-10 w-10"
+            >
+              <path d="M15 6v12a3 3 0 1 0 3-3H6a3 3 0 1 0 3 3V6a3 3 0 1 0-3 3h12a3 3 0 1 0-3-3" />
+            </svg>
+            <span className="text-2xl font-bold">ObjectStack</span>
+          </div>
+          <h2 className="text-3xl font-bold leading-tight">
+            Build powerful business applications, faster.
+          </h2>
+          <p className="text-lg opacity-90">
+            The universal platform for enterprise data management, workflows, and analytics.
+          </p>
+        </div>
+      </div>
+
+      {/* Right form panel */}
+      <div className="flex w-full lg:w-1/2 items-center justify-center bg-background px-6 py-12">
+        {children}
+      </div>
+    </div>
+  );
+}

apps/console/src/pages/ForgotPasswordPage.tsx

@@ -2,12 +2,37 @@
  * Forgot Password Page for ObjectStack Console
  */
 
-import { ForgotPasswordForm } from '@object-ui/auth';
+import { Link } from 'react-router-dom';
+import { ForgotPasswordForm, type AuthLinkComponentProps } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { AuthPageLayout } from '../components/AuthPageLayout';
+
+const RouterLink = ({ href, className, children }: AuthLinkComponentProps) => (
+  <Link to={href} className={className}>{children}</Link>
+);
 
 export function ForgotPasswordPage() {
+  const { t } = useObjectTranslation();
+
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
-      <ForgotPasswordForm loginUrl="/login" />
-    </div>
+    <AuthPageLayout>
+      <ForgotPasswordForm
+        loginUrl="/login"
+        title={t('auth.forgotPassword.title')}
+        description={t('auth.forgotPassword.description')}
+        linkComponent={RouterLink}
+        labels={{
+          emailLabel: t('auth.forgotPassword.emailLabel'),
+          emailPlaceholder: t('auth.forgotPassword.emailPlaceholder'),
+          submitButton: t('auth.forgotPassword.submitButton'),
+          submittingButton: t('auth.forgotPassword.submittingButton'),
+          successTitle: t('auth.forgotPassword.successTitle'),
+          successDescription: t('auth.forgotPassword.successDescription'),
+          backToSignInText: t('auth.forgotPassword.backToSignInText'),
+          rememberPasswordText: t('auth.forgotPassword.rememberPasswordText'),
+          signInText: t('auth.forgotPassword.signInText'),
+        }}
+      />
+    </AuthPageLayout>
   );
 }

apps/console/src/pages/LoginPage.tsx

@@ -2,19 +2,40 @@
  * Login Page for ObjectStack Console
  */
 
-import { useNavigate } from 'react-router-dom';
-import { LoginForm } from '@object-ui/auth';
+import { useNavigate, Link } from 'react-router-dom';
+import { LoginForm, type AuthLinkComponentProps } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { AuthPageLayout } from '../components/AuthPageLayout';
+
+const RouterLink = ({ href, className, children }: AuthLinkComponentProps) => (
+  <Link to={href} className={className}>{children}</Link>
+);
 
 export function LoginPage() {
   const navigate = useNavigate();
+  const { t } = useObjectTranslation();
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
+    <AuthPageLayout>
       <LoginForm
         onSuccess={() => navigate('/')}
         registerUrl="/register"
         forgotPasswordUrl="/forgot-password"
+        title={t('auth.login.title')}
+        description={t('auth.login.description')}
+        linkComponent={RouterLink}
+        labels={{
+          emailLabel: t('auth.login.emailLabel'),
+          emailPlaceholder: t('auth.login.emailPlaceholder'),
+          passwordLabel: t('auth.login.passwordLabel'),
+          passwordPlaceholder: t('auth.login.passwordPlaceholder'),
+          forgotPasswordText: t('auth.login.forgotPasswordText'),
+          submitButton: t('auth.login.submitButton'),
+          submittingButton: t('auth.login.submittingButton'),
+          noAccountText: t('auth.login.noAccountText'),
+          signUpText: t('auth.login.signUpText'),
+        }}
       />
-    </div>
+    </AuthPageLayout>
   );
 }

apps/console/src/pages/RegisterPage.tsx

@@ -2,18 +2,44 @@
  * Register Page for ObjectStack Console
  */
 
-import { useNavigate } from 'react-router-dom';
-import { RegisterForm } from '@object-ui/auth';
+import { useNavigate, Link } from 'react-router-dom';
+import { RegisterForm, type AuthLinkComponentProps } from '@object-ui/auth';
+import { useObjectTranslation } from '@object-ui/i18n';
+import { AuthPageLayout } from '../components/AuthPageLayout';
+
+const RouterLink = ({ href, className, children }: AuthLinkComponentProps) => (
+  <Link to={href} className={className}>{children}</Link>
+);
 
 export function RegisterPage() {
   const navigate = useNavigate();
+  const { t } = useObjectTranslation();
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-background px-4 py-8">
+    <AuthPageLayout>
       <RegisterForm
         onSuccess={() => navigate('/')}
         loginUrl="/login"
+        title={t('auth.register.title')}
+        description={t('auth.register.description')}
+        linkComponent={RouterLink}
+        labels={{
+          nameLabel: t('auth.register.nameLabel'),
+          namePlaceholder: t('auth.register.namePlaceholder'),
+          emailLabel: t('auth.register.emailLabel'),
+          emailPlaceholder: t('auth.register.emailPlaceholder'),
+          passwordLabel: t('auth.register.passwordLabel'),
+          passwordPlaceholder: t('auth.register.passwordPlaceholder'),
+          confirmPasswordLabel: t('auth.register.confirmPasswordLabel'),
+          confirmPasswordPlaceholder: t('auth.register.confirmPasswordPlaceholder'),
+          passwordMismatchError: t('auth.register.passwordMismatchError'),
+          passwordTooShortError: t('auth.register.passwordTooShortError'),
+          submitButton: t('auth.register.submitButton'),
+          submittingButton: t('auth.register.submittingButton'),
+          hasAccountText: t('auth.register.hasAccountText'),
+          signInText: t('auth.register.signInText'),
+        }}
       />
-    </div>
+    </AuthPageLayout>
   );
 }

packages/auth/src/ForgotPasswordForm.tsx

@@ -8,6 +8,20 @@
 
 import React, { useState } from 'react';
 import { useAuth } from './useAuth';
+import type { AuthLinkComponentProps } from './types';
+
+/** Translatable labels for the ForgotPasswordForm */
+export interface ForgotPasswordFormLabels {
+  emailLabel?: string;
+  emailPlaceholder?: string;
+  submitButton?: string;
+  submittingButton?: string;
+  successTitle?: string;
+  successDescription?: string;
+  backToSignInText?: string;
+  rememberPasswordText?: string;
+  signInText?: string;
+}
 
 export interface ForgotPasswordFormProps {
   /** Callback on successful submission */
@@ -20,8 +34,16 @@ export interface ForgotPasswordFormProps {
   title?: string;
   /** Custom description */
   description?: string;
+  /** Custom link component for SPA navigation (e.g. React Router's Link) */
+  linkComponent?: React.ComponentType<AuthLinkComponentProps>;
+  /** Override default labels for i18n */
+  labels?: ForgotPasswordFormLabels;
 }
 
+const DefaultLink = ({ href, className, children }: AuthLinkComponentProps) => (
+  <a href={href} className={className}>{children}</a>
+);
+
 /**
  * Forgot password form component.
  * Sends a password reset email to the user.
@@ -40,12 +62,26 @@ export function ForgotPasswordForm({
   loginUrl = '/login',
   title = 'Reset your password',
   description = 'Enter your email address and we\'ll send you a link to reset your password',
+  linkComponent: LinkComp = DefaultLink,
+  labels = {},
 }: ForgotPasswordFormProps) {
   const { forgotPassword, isLoading } = useAuth();
   const [email, setEmail] = useState('');
   const [error, setError] = useState<string | null>(null);
   const [submitted, setSubmitted] = useState(false);
 
+  const l = {
+    emailLabel: labels.emailLabel ?? 'Email',
+    emailPlaceholder: labels.emailPlaceholder ?? 'name@example.com',
+    submitButton: labels.submitButton ?? 'Send Reset Link',
+    submittingButton: labels.submittingButton ?? 'Sending...',
+    successTitle: labels.successTitle ?? 'Check your email',
+    successDescription: labels.successDescription ?? "We've sent a password reset link to {{email}}. Please check your inbox.",
+    backToSignInText: labels.backToSignInText ?? 'Back to sign in',
+    rememberPasswordText: labels.rememberPasswordText ?? 'Remember your password?',
+    signInText: labels.signInText ?? 'Sign in',
+  };
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError(null);
@@ -62,28 +98,28 @@ export function ForgotPasswordForm({
   };
 
   if (submitted) {
+    const successMsg = l.successDescription.includes('{{email}}')
+      ? l.successDescription.replace('{{email}}', email)
+      : `${l.successDescription} ${email}`;
     return (
-      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+      <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[380px]">
         <div className="flex flex-col space-y-2 text-center">
-          <h1 className="text-2xl font-semibold tracking-tight">Check your email</h1>
-          <p className="text-sm text-muted-foreground">
-            We&apos;ve sent a password reset link to <strong>{email}</strong>.
-            Please check your inbox and follow the instructions.
-          </p>
+          <h1 className="text-2xl font-semibold tracking-tight">{l.successTitle}</h1>
+          <p className="text-sm text-muted-foreground">{successMsg}</p>
         </div>
         {loginUrl && (
           <p className="px-8 text-center text-sm text-muted-foreground">
-            <a href={loginUrl} className="text-primary underline-offset-4 hover:underline">
-              Back to sign in
-            </a>
+            <LinkComp href={loginUrl} className="text-primary underline-offset-4 hover:underline">
+              {l.backToSignInText}
+            </LinkComp>
           </p>
         )}
       </div>
     );
   }
 
   return (
-    <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+    <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[380px]">
       <div className="flex flex-col space-y-2 text-center">
         <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
         <p className="text-sm text-muted-foreground">{description}</p>
@@ -98,12 +134,12 @@ export function ForgotPasswordForm({
 
         <div className="space-y-2">
           <label htmlFor="forgot-email" className="text-sm font-medium leading-none">
-            Email
+            {l.emailLabel}
           </label>
           <input
             id="forgot-email"
             type="email"
-            placeholder="name@example.com"
+            placeholder={l.emailPlaceholder}
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             required
@@ -118,16 +154,16 @@ export function ForgotPasswordForm({
           disabled={isLoading}
           className="inline-flex h-10 w-full items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground ring-offset-background transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
         >
-          {isLoading ? 'Sending...' : 'Send Reset Link'}
+          {isLoading ? l.submittingButton : l.submitButton}
         </button>
       </form>
 
       {loginUrl && (
         <p className="px-8 text-center text-sm text-muted-foreground">
-          Remember your password?{' '}
-          <a href={loginUrl} className="text-primary underline-offset-4 hover:underline">
-            Sign in
-          </a>
+          {l.rememberPasswordText}{' '}
+          <LinkComp href={loginUrl} className="text-primary underline-offset-4 hover:underline">
+            {l.signInText}
+          </LinkComp>
         </p>
       )}
     </div>