astryx-dracula 0.2.0 → 0.3.0

package/templates/login-sso.tsx

@@ -1,6 +1,24 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   Ctr > C[p=4 mw=400] > V[g=4] > ((V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"Whisper your details to enter the night"[t=body]) + TI"Work email"[t=email] + Lk"Having trouble signing in?" + B.primary"Continue" + D"Or continue with" + B.secondary"Continue with SSO" + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Request access") + (V[g=2 a=center] > Av + Hd"Sign in with Google Workspace"[level=1] + Tx"You will be redirected back after signing in."[t=body]) + (C[p=0] > S[p=4 muted] > (H[g=2 a=center] > Ic + (V[g=0] > Tx"Google Workspace"[t=label] + Tx"vlad@castle.ro"[t=supporting]))) + (V[g=3] > B.primary"Continue with Google Workspace" + B.ghost"Use a different email") + (V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"vlad@castle.ro"[t=body]) + (V[g=4] > (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?") + B.primary"Enter the night" + B.ghost"Use a different email") + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting]))
 
-import {useState, type CSSProperties} from 'react';
+//   Step-conditional h1: the email and SSO-confirm steps each render their own
+//   h1 (email entry vs provider confirm); the password fallback reuses the
+//   family heading, so exactly one h1 shows per step.
+import {useState, useTransition, type CSSProperties} from 'react';
+import {demoLogin} from 'astryx-dracula/shared/login-demo';
+import {
+  AUTH_HEADING,
+  AUTH_PRIMARY_CTA,
+  AUTH_SIGNUP_PROMPT,
+  AUTH_SSO_DIVIDER,
+  AUTH_FORGOT_PASSWORD,
+  AUTH_ERROR_MESSAGE,
+  AUTH_EMAIL_PLACEHOLDER,
+  AUTH_TERMS_PREFIX,
+  AUTH_TERMS_SERVICE,
+  AUTH_TERMS_PRIVACY,
+} from 'astryx-dracula/shared/auth-copy';
 import {VStack, HStack} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Text, Heading} from '@astryxdesign/core/Text';
@@ -16,6 +34,7 @@ import {Avatar} from '@astryxdesign/core/Avatar';
 // ============= ICONS (verified lucide-react exports) =============
 // ShieldCheck ← ShieldCheckIcon.
 import {ShieldCheck} from 'lucide-react';
+import {inputAutoComplete} from 'astryx-dracula/shared/auth-chrome-config';
 
 // ---------------------------------------------------------------------------
 // Styles
@@ -59,16 +78,21 @@ export default function LoginSso() {
   const [step, setStep] = useState<Step>('email');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [loginFailed, setLoginFailed] = useState(false);
-  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, startTransition] = useTransition();
 
   const provider = getProvider(email);
   const emailValid = isValidEmail(email);
 
   const handleContinue = () => {
     if (!emailValid) {
+      // The Continue buttons stay enabled and explain themselves. Disabling
+      // them greyed the buttons out with no stated reason, so a malformed
+      // address produced silence rather than guidance.
+      setError('Enter a valid email address to continue.');
       return;
     }
+    setError(null);
     if (provider) {
       setStep('sso-confirm');
     } else {
@@ -78,88 +102,82 @@ export default function LoginSso() {
 
   const handleBack = () => {
     setStep('email');
-    setLoginFailed(false);
-    setIsLoading(false);
+    setError(null);
   };
 
   const handleSignIn = () => {
     if (!password) {
-      setLoginFailed(true);
+      setError(AUTH_ERROR_MESSAGE);
       return;
     }
-    setIsLoading(true);
-    setLoginFailed(false);
-    setTimeout(() => {
-      setIsLoading(false);
-      setLoginFailed(true);
-    }, 2000);
+    setError(null);
+    startTransition(async () => {
+      await demoLogin();
+      setError(AUTH_ERROR_MESSAGE);
+    });
   };
 
   return (
     <Center axis="both" style={pageStyle}>
-      <Card padding={8} width="100%" maxWidth={400}>
+      <Card padding={4} width="100%" maxWidth={400}>
         <VStack gap={4} hAlign="stretch">
-          {/* ── Step 1: Email entry ── */}
+          {/* ── Step 1: Email entry, route by domain ──
+              The password is collected on the fallback step below, never
+              here: a recognised domain goes straight to SSO. */}
           {step === 'email' && (
             <>
               <VStack gap={1} hAlign="center">
-                <Heading level={2}>Welcome back to the night</Heading>
+                <Heading level={1} type="display-2">
+                  {AUTH_HEADING}
+                </Heading>
                 <Text type="body" color="secondary">
                   Whisper your details to enter the night
                 </Text>
               </VStack>
 
-              <VStack gap={2}>
-                <TextInput
-                  label="Work email"
-                  isLabelHidden
-                  type="email"
-                  placeholder="you@castle.dracula"
-                  value={email}
-                  onChange={setEmail}
-                  size="lg"
-                  onKeyDown={(e: React.KeyboardEvent) => {
-                    if (e.key === 'Enter') {
-                      handleContinue();
-                    }
-                  }}
-                />
-                <TextInput
-                  label="Password"
-                  isLabelHidden
-                  type="password"
-                  placeholder="Whisper your password"
-                  value={password}
-                  onChange={setPassword}
-                  size="lg"
-                />
-              </VStack>
+              <TextInput
+                label="Work email"
+                isLabelHidden
+                type="email"
+                {...inputAutoComplete('email')}
+                placeholder={AUTH_EMAIL_PLACEHOLDER}
+                value={email}
+                onChange={(v: string) => {
+                  setEmail(v);
+                  setError(null);
+                }}
+                size="lg"
+                onKeyDown={(e: React.KeyboardEvent) => {
+                  if (e.key === 'Enter') {
+                    handleContinue();
+                  }
+                }}
+                status={error ? {type: 'error', message: error} : undefined}
+              />
 
-              <Link href="#/templates/login-sso" size="sm" color="secondary" type="supporting">
+              <Link href="#/templates/login-sso">
                 Having trouble signing in?
               </Link>
 
               <Button
-                label="Enter the night"
+                label="Continue"
                 variant="primary"
                 size="lg"
                 onClick={handleContinue}
-                isDisabled={!emailValid}
               />
 
-              <Divider label="Or sign in with" />
+              <Divider label={AUTH_SSO_DIVIDER} />
 
               <Button
                 label="Continue with SSO"
                 variant="secondary"
                 size="lg"
                 onClick={handleContinue}
-                isDisabled={!emailValid}
               />
 
               <VStack hAlign="center">
                 <Text type="supporting" color="secondary">
-                  New to the castle?{' '}
+                  {AUTH_SIGNUP_PROMPT}{' '}
                   <Link href="#/templates/login-sso" type="supporting">
                     Request access
                   </Link>
@@ -173,14 +191,23 @@ export default function LoginSso() {
             <>
               <VStack gap={2} hAlign="center">
                 <Avatar name={provider.name} size={48} />
-                <Heading level={2}>Sign in with {provider.name}</Heading>
+                <Heading level={1} type="display-2">
+                  Sign in with {provider.name}
+                </Heading>
                 <Text type="body" color="secondary">
                   You will be redirected back after signing in.
                 </Text>
               </VStack>
 
-              <Card padding={0}>
-                <Section variant="muted" padding={4}>
+              {/* The gutter lives on the Card, not the Section. A Section
+                  escapes its container's --container-padding-* (Section.tsx:
+                  56-71), but with Card padding={0} that published var is
+                  --spacing-0, so the escape cancelled nothing and the muted
+                  fill painted flush to the card border. 3 + 1 keeps the text
+                  inset at the 16px it already had while giving the fill a
+                  real one. */}
+              <Card padding={3}>
+                <Section variant="muted" padding={1}>
                   <HStack gap={2} vAlign="center">
                     <Icon icon={ShieldCheck} color="secondary" />
                     <VStack gap={0}>
@@ -199,7 +226,11 @@ export default function LoginSso() {
                   variant="primary"
                   size="lg"
                   isLoading={isLoading}
-                  onClick={() => setIsLoading(true)}
+                  onClick={() => {
+                    startTransition(async () => {
+                      await demoLogin();
+                    });
+                  }}
                 />
                 <Button
                   label="Use a different email"
@@ -215,7 +246,9 @@ export default function LoginSso() {
           {step === 'password-fallback' && (
             <>
               <VStack gap={1} hAlign="center">
-                <Heading level={2}>Welcome back to the night</Heading>
+                <Heading level={1} type="display-2">
+                  {AUTH_HEADING}
+                </Heading>
                 <Text type="body" color="secondary">
                   {email}
                 </Text>
@@ -226,36 +259,27 @@ export default function LoginSso() {
                   <TextInput
                     label="Password"
                     type="password"
+                    {...inputAutoComplete('current-password')}
                     value={password}
                     size="lg"
                     onChange={(v: string) => {
                       setPassword(v);
-                      setLoginFailed(false);
+                      setError(null);
                     }}
-                    status={
-                      loginFailed
-                        ? {
-                            type: 'error',
-                            message: 'Wrong incantation. Try again.',
-                          }
-                        : undefined
-                    }
+                    onEnter={handleSignIn}
+                    status={error ? {type: 'error', message: error} : undefined}
                   />
-                  {loginFailed && (
+                  {error && (
                     <VStack hAlign="end">
-                      <Link
-                        href="#/templates/login-sso"
-                        size="sm"
-                        color="secondary"
-                        type="supporting">
-                        Forgot password?
+                      <Link href="#/templates/login-sso">
+                        {AUTH_FORGOT_PASSWORD}
                       </Link>
                     </VStack>
                   )}
                 </VStack>
 
                 <Button
-                  label="Enter the night"
+                  label={AUTH_PRIMARY_CTA}
                   variant="primary"
                   size="lg"
                   isLoading={isLoading}
@@ -270,6 +294,21 @@ export default function LoginSso() {
               </VStack>
             </>
           )}
+
+          {/* Terms — family line, shown on every step */}
+          <VStack hAlign="center" width="100%">
+            <Text type="supporting" color="secondary" justify="center">
+              {AUTH_TERMS_PREFIX}{' '}
+              <Link href="#/templates/login-sso" type="supporting">
+                {AUTH_TERMS_SERVICE}
+              </Link>{' '}
+              and{' '}
+              <Link href="#/templates/login-sso" type="supporting">
+                {AUTH_TERMS_PRIVACY}
+              </Link>
+              .
+            </Text>
+          </VStack>
         </VStack>
       </Card>
     </Center>

package/templates/login.tsx

@@ -1,97 +1,153 @@
 // Copyright (c) Meta Platforms, Inc. and affiliates.
+// XLE (canonical structure, validated with `bunx astryx layout check`):
+//   Ctr > V[g=4 a=center] > (V[g=2 a=center] > Ic + Tx"Castle Dracula"[t=body]) + (C[p=4] > V[g=4] > (V[g=1 a=center] > Hd"Welcome back to the night"[level=1] + Tx"Sign in to your crypt"[t=body]) + TI"Email"[t=email] + (V[g=1] > TI"Password"[t=password] + Lk"Forgot password?") + B.primary"Enter the night" + (V[a=center] > Tx"New to the castle?"[t=supporting] + Lk"Sign up")) + (V[a=center] > Tx"By clicking continue, you agree to our Terms of service and Privacy policy"[t=supporting])
 
-import {useState, type CSSProperties} from 'react';
-import {Moon} from 'lucide-react';
+import {useState, useTransition} from 'react';
+import {demoLogin} from 'astryx-dracula/shared/login-demo';
+import {
+  AUTH_HEADING,
+  AUTH_SUBTITLE,
+  AUTH_PRIMARY_CTA,
+  AUTH_SIGNUP_PROMPT,
+  AUTH_SIGNUP_LINK,
+  AUTH_FORGOT_PASSWORD,
+  AUTH_ERROR_MESSAGE,
+  AUTH_EMAIL_PLACEHOLDER,
+  AUTH_PASSWORD_PLACEHOLDER,
+  AUTH_TERMS_PREFIX,
+  AUTH_TERMS_SERVICE,
+  AUTH_TERMS_PRIVACY,
+} from 'astryx-dracula/shared/auth-copy';
 import {VStack} from '@astryxdesign/core/Layout';
 import {Center} from '@astryxdesign/core/Center';
 import {Text, Heading} from '@astryxdesign/core/Text';
 import {TextInput} from '@astryxdesign/core/TextInput';
 import {Button} from '@astryxdesign/core/Button';
 import {Card} from '@astryxdesign/core/Card';
-import {Icon} from '@astryxdesign/core/Icon';
-import {Banner} from '@astryxdesign/core/Banner';
+import {Link} from '@astryxdesign/core/Link';
 
-// Standalone auth page paints its own body background (no host shell).
-const pageStyle: CSSProperties = {
-  minHeight: '100%',
-  backgroundColor: 'var(--color-background-body)',
-  padding: 'var(--spacing-6)',
-};
-// Cap the column at 400px but let it shrink to fit narrow screens (Stack
-// has no maxWidth prop, so it's set here).
-const contentStyle: CSSProperties = {
-  width: '100%',
-  maxWidth: 400,
-};
+import {authPageStyle as pageStyle, authContentStyle as contentStyle, inputAutoComplete} from 'astryx-dracula/shared/auth-chrome-config';
+import {LoginBrand} from 'astryx-dracula/shared/auth-chrome';
 
 export default function LoginPage() {
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState('');
+  const [isLoading, startTransition] = useTransition();
+  const [error, setError] = useState<string | null>(null);
 
   const handleSignIn = () => {
-    setError('');
+    setError(null);
     if (!email || !password) {
-      setError('Whisper both your email and password to enter the night.');
+      setError(AUTH_ERROR_MESSAGE);
       return;
     }
-    setIsLoading(true);
-    setTimeout(() => setIsLoading(false), 2000);
+    startTransition(async () => {
+      await demoLogin();
+    });
   };
 
   return (
     <Center axis="both" style={pageStyle}>
       <VStack gap={4} hAlign="center" style={contentStyle}>
-        {/* Logo */}
-        <VStack gap={2} hAlign="center">
-          <Icon icon={Moon} size="lg" color="accent" />
-          <Text type="body" weight="bold" size="lg">
-            Castle Dracula
-          </Text>
-        </VStack>
+        <LoginBrand />
 
         {/* Card */}
-        <Card padding={8} width="100%">
+        <Card padding={4} width="100%">
           <VStack gap={4} hAlign="stretch">
             <VStack gap={1} hAlign="center">
-              <Heading level={2} justify="center">
-                Welcome back to the night
+              <Heading level={1} type="display-2" justify="center">
+                {AUTH_HEADING}
               </Heading>
               <Text type="body" color="secondary">
-                Sign in to your crypt
+                {AUTH_SUBTITLE}
               </Text>
             </VStack>
 
-            {error && <Banner status="error" title={error} container="card" />}
+            {/* The field group, as its three siblings carry it
+                (login-card.tsx:76, login-split.tsx:160, login-sso.tsx:192).
+                Without it these two inputs sat 16px apart -- the outer
+                VStack's gap={4} -- where all three twins render 8px, so the
+                gap between the two fields was twice the gap between the
+                fields and the sign-up link below. */}
+            <VStack gap={2}>
+              <TextInput
+                label="Email"
+                isLabelHidden
+                value={email}
+                onChange={v => {
+                  setEmail(v);
+                  setError(null);
+                }}
+                placeholder={AUTH_EMAIL_PLACEHOLDER}
+                type="email"
+                {...inputAutoComplete('email')}
+                size="lg"
+                onEnter={handleSignIn}
+                status={error ? {type: 'error', message: error} : undefined}
+              />
 
-            <TextInput
-              label="Email"
-              value={email}
-              onChange={setEmail}
-              placeholder="you@castle.dracula"
-              type="email"
-              size="lg"
-            />
-
-            <TextInput
-              label="Password"
-              value={password}
-              onChange={setPassword}
-              placeholder="Whisper your password"
-              type="password"
-              size="lg"
-            />
+              <VStack gap={1}>
+              <TextInput
+                label="Password"
+                isLabelHidden
+                value={password}
+                onChange={v => {
+                  setPassword(v);
+                  setError(null);
+                }}
+                placeholder={AUTH_PASSWORD_PLACEHOLDER}
+                type="password"
+                {...inputAutoComplete('current-password')}
+                size="lg"
+                onEnter={handleSignIn}
+                status={error ? {type: 'error', message: error} : undefined}
+              />
+                {error && (
+                  <VStack hAlign="end">
+                    <Link
+                      href="#/templates/login"
+                      color="secondary">
+                      {AUTH_FORGOT_PASSWORD}
+                    </Link>
+                  </VStack>
+                )}
+              </VStack>
+            </VStack>
 
             <Button
-              label="Enter the night"
+              label={AUTH_PRIMARY_CTA}
               variant="primary"
               size="lg"
               isLoading={isLoading}
               onClick={handleSignIn}
             />
+
+            {/* Sign up link */}
+            <VStack hAlign="center">
+              <Text type="supporting" color="secondary">
+                {AUTH_SIGNUP_PROMPT}{' '}
+                <Link href="#/templates/login" type="supporting">
+                  {AUTH_SIGNUP_LINK}
+                </Link>
+              </Text>
+            </VStack>
           </VStack>
         </Card>
+
+        {/* Terms */}
+        <VStack hAlign="center" width="100%">
+          <Text type="supporting" color="secondary" justify="center">
+            {AUTH_TERMS_PREFIX}{' '}
+            <Link href="#/templates/login" type="supporting">
+              {AUTH_TERMS_SERVICE}
+            </Link>{' '}
+            and{' '}
+            <Link href="#/templates/login" type="supporting">
+              {AUTH_TERMS_PRIVACY}
+            </Link>
+            .
+          </Text>
+        </VStack>
       </VStack>
     </Center>
   );