@pradip1995/segment-login-template 0.4.2 → 0.4.3

package/src/register-form.tsx

@@ -9,6 +9,8 @@ import {
 import GoogleAuthSection from "./google-auth-section"
 import OtpVerificationModal from "./otp-verification-modal"
 import type { OtpVerificationComponent } from "./otp-component"
+import { auth } from "./account-theme"
+import { AuthDivider, AuthField, Ornament } from "./login-form"
 
 type VerificationMethod = "email_verification" | "phone_verification"
 type RegistrationStep = "form" | "otp" | "success"
@@ -37,6 +39,7 @@ export default function RegisterForm({
   const [error, setError] = useState<string | null>(null)
   const [pending, setPending] = useState(false)
   const [showOtpModal, setShowOtpModal] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
 
   function updateField(key: keyof typeof form, value: string) {
     setForm((prev) => ({ ...prev, [key]: value }))
@@ -143,21 +146,22 @@ export default function RegisterForm({
     verificationMethod === "email_verification" ? form.email : form.phone
 
   return (
-    <div className="space-y-6">
+    <div className="space-y-6" data-testid="register-page">
+      <div className="text-center lg:hidden">
+        <Ornament />
+        <h2 className={auth.mobileTitle}>Create account</h2>
+        <p className="mt-2 text-[10px] text-muted uppercase tracking-[0.24em]">
+          Join our collection
+        </p>
+      </div>
+
       <GoogleAuthSection countryCode={countryCode} />
 
-      <div className="relative">
-        <div className="absolute inset-0 flex items-center">
-          <div className="w-full border-t border-cart-border" />
-        </div>
-        <div className="relative flex justify-center text-xs uppercase tracking-[var(--letter-spacing-nav)]">
-          <span className="bg-page-bg px-3 text-muted">Or register with email</span>
-        </div>
-      </div>
+      <AuthDivider label="Or register with email" />
 
       {step === "form" && (
         <>
-          <div className="flex gap-2 p-1 bg-surface-muted rounded-lg">
+          <div className="flex gap-2 p-1 bg-surface-muted/80">
             <VerificationToggle
               active={verificationMethod === "email_verification"}
               onClick={() => setVerificationMethod("email_verification")}
@@ -179,39 +183,67 @@ export default function RegisterForm({
           </p>
 
           <form onSubmit={handleRegister} className="space-y-4">
-            <Field
+            <AuthField
               label="Full name"
               value={form.full_name}
               onChange={(e) => updateField("full_name", e.target.value)}
               autoComplete="name"
+              placeholder="Your full name"
             />
-            <Field
+            <AuthField
               label="Email"
               type="email"
               value={form.email}
               onChange={(e) => updateField("email", e.target.value)}
               autoComplete="email"
+              placeholder="you@example.com"
             />
-            <Field
+            <AuthField
               label="Phone"
               type="tel"
               value={form.phone}
               onChange={(e) => updateField("phone", e.target.value)}
               autoComplete="tel"
               required={verificationMethod === "phone_verification"}
+              placeholder="Phone number"
             />
-            <Field
-              label="Password"
-              type="password"
-              value={form.password}
-              onChange={(e) => updateField("password", e.target.value)}
-              autoComplete="new-password"
-            />
-
-            {error && <p className="text-sm text-brand-sale">{error}</p>}
-
-            <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
-              {pending ? "Creating account…" : "Create account"}
+            <div>
+              <span className={`${auth.fieldLabel} mb-1.5 block`}>Password</span>
+              <div className="relative">
+                <input
+                  type={showPassword ? "text" : "password"}
+                  value={form.password}
+                  onChange={(e) => updateField("password", e.target.value)}
+                  autoComplete="new-password"
+                  required
+                  placeholder="Create a password"
+                  className={`${auth.input} pr-10`}
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword((v) => !v)}
+                  className="absolute inset-y-0 right-0 flex items-center text-muted hover:text-heading transition-colors"
+                  aria-label={showPassword ? "Hide password" : "Show password"}
+                >
+                  {showPassword ? <EyeOffIcon /> : <EyeIcon />}
+                </button>
+              </div>
+            </div>
+
+            {error && (
+              <p className="text-sm text-brand-sale" role="alert">
+                {error}
+              </p>
+            )}
+
+            <button
+              type="submit"
+              disabled={pending}
+              className={`${auth.btnPrimary} ${auth.btnShine}`}
+            >
+              <span className="relative z-[1]">
+                {pending ? "Creating account…" : "Create account"}
+              </span>
             </button>
           </form>
         </>
@@ -225,7 +257,11 @@ export default function RegisterForm({
 
       <p className="text-sm text-center text-muted">
         Already have an account?{" "}
-        <button type="button" onClick={onLogin} className="text-brand-accent font-semibold hover:underline">
+        <button
+          type="button"
+          onClick={onLogin}
+          className="text-heading font-semibold hover:text-brand-accent transition-colors underline underline-offset-2"
+        >
           Sign in
         </button>
       </p>
@@ -282,43 +318,27 @@ function VerificationToggle({
     <button
       type="button"
       onClick={onClick}
-      className={`flex-1 py-2 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] rounded-md transition-colors ${
-        active ? "bg-page-bg text-heading shadow-sm" : "text-muted hover:text-heading"
-      }`}
+      className={active ? auth.modeActive : auth.modeIdle}
     >
       {children}
     </button>
   )
 }
 
-function Field({
-  label,
-  type = "text",
-  value,
-  onChange,
-  autoComplete,
-  required = true,
-}: {
-  label: string
-  type?: string
-  value: string
-  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void
-  autoComplete?: string
-  required?: boolean
-}) {
+function EyeIcon() {
   return (
-    <label className="block">
-      <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
-        {label}
-      </span>
-      <input
-        type={type}
-        value={value}
-        onChange={onChange}
-        autoComplete={autoComplete}
-        required={required}
-        className="w-full border border-cart-border rounded px-3 py-2.5 text-sm bg-surface focus:outline-none focus:border-brand-accent"
-      />
-    </label>
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  )
+}
+
+function EyeOffIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden>
+      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+      <line x1="1" y1="1" x2="23" y2="23" />
+    </svg>
   )
 }

package/src/segment.tsx

@@ -1,6 +1,7 @@
 "use client"
 
-import { useState } from "react"
+import { useEffect, useState } from "react"
+import { useSearchParams } from "next/navigation"
 import type { HttpTypes } from "@medusajs/types"
 import LoginForm from "./login-form"
 import RegisterForm from "./register-form"
@@ -11,8 +12,12 @@ import AccountAddresses from "./account-addresses"
 import AccountOrders from "./account-orders"
 import AccountPaymentMethods from "./account-payment-methods"
 import AccountGuestOrders from "./account-guest-orders"
+import LoginBrandPanel from "./login-brand-panel"
+import GuestOrderModal from "./guest-order-modal"
 import { resolveOtpComponent, type OtpVerificationComponent } from "./otp-component"
 import { accountSectionPath } from "./account-utils"
+import { auth, type BrandPanelConfig } from "./account-theme"
+import { listGuestOrders } from "@pradip1995/commerce-core/data/guest"
 
 type AccountProps = {
   countryCode?: string
@@ -23,6 +28,10 @@ type AccountProps = {
   guestOrders?: HttpTypes.StoreOrder[] | { orders?: HttpTypes.StoreOrder[] } | null
   title?: string
   subtitle?: string
+  registerTitle?: string
+  registerSubtitle?: string
+  brandPanel?: BrandPanelConfig | null
+  guestTrackLabel?: string
   otpComponent?: OtpVerificationComponent
 }
 
@@ -33,12 +42,53 @@ export default function LoginTemplate({
   orders = [],
   paymentDetails = [],
   guestOrders = [],
-  title,
-  subtitle,
+  title = "Sign in",
+  subtitle = "Access your exclusive collection",
+  registerTitle = "Create account",
+  registerSubtitle = "Join our exclusive collection",
+  brandPanel,
+  guestTrackLabel = "Track guest order",
   otpComponent,
 }: AccountProps) {
   const OtpComponent = resolveOtpComponent(otpComponent)
   const section = accountSectionPath(path)
+  const searchParams = useSearchParams()
+
+  const [view, setView] = useState<"login" | "register" | "forgot">(
+    path === "register" ? "register" : path === "forgot-password" ? "forgot" : "login"
+  )
+  const [showGuestModal, setShowGuestModal] = useState(false)
+  const [checkingGuest, setCheckingGuest] = useState(false)
+  const [guestEmail, setGuestEmail] = useState("")
+  const [guestAutoStart, setGuestAutoStart] = useState(false)
+
+  useEffect(() => {
+    const guestView = searchParams.get("view")
+    const email = searchParams.get("email")
+    if (guestView === "guest") {
+      setGuestEmail(email && email !== "undefined" ? email : "")
+      setGuestAutoStart(Boolean(email && email !== "undefined"))
+      setShowGuestModal(true)
+    }
+  }, [searchParams])
+
+  async function handleTrackGuestOrder() {
+    // Guest JWT is httpOnly (_medusa_guest_jwt); probe via server action (empty token → cookie).
+    setCheckingGuest(true)
+    try {
+      await listGuestOrders("")
+      window.location.href = `/${countryCode}/account/guest-orders`
+      return
+    } catch {
+      // No valid guest session — open OTP modal
+    } finally {
+      setCheckingGuest(false)
+    }
+
+    setGuestEmail(searchParams.get("email") || "")
+    setGuestAutoStart(false)
+    setShowGuestModal(true)
+  }
 
   if (section === "guest-orders") {
     return <AccountGuestOrders orders={guestOrders} countryCode={countryCode} />
@@ -61,56 +111,104 @@ export default function LoginTemplate({
       case "payment-methods":
         return (
           <AccountPaymentMethods
-            paymentDetails={paymentDetails as Parameters<typeof AccountPaymentMethods>[0]["paymentDetails"]}
+            paymentDetails={
+              paymentDetails as Parameters<typeof AccountPaymentMethods>[0]["paymentDetails"]
+            }
           />
         )
       case "overview":
       default:
-        return <AccountOverview customer={customer} orders={orders} countryCode={countryCode} />
+        return (
+          <AccountOverview customer={customer} orders={orders} countryCode={countryCode} />
+        )
     }
   }
 
-  const [view, setView] = useState<"login" | "register" | "forgot">(
-    path === "register" ? "register" : path === "forgot-password" ? "forgot" : "login"
-  )
+  const isSignIn = view === "login"
+  const isRegister = view === "register"
+  const heading = isSignIn ? title : isRegister ? registerTitle : "Reset password"
+  const subheading = isSignIn ? subtitle : isRegister ? registerSubtitle : undefined
 
   return (
-    <div className="w-full max-w-md mx-auto">
-      {(title || subtitle) && view !== "forgot" && (
-        <div className="mb-8 text-center">
-          {title && <h1 className="section-heading text-2xl mb-2">{title}</h1>}
-          {subtitle && <p className="text-sm text-muted">{subtitle}</p>}
-        </div>
-      )}
-
-      {view !== "forgot" && (
-        <div className="flex gap-6 mb-8 border-b border-cart-border">
-          <TabButton active={view === "login"} onClick={() => setView("login")}>
-            Sign in
-          </TabButton>
-          <TabButton active={view === "register"} onClick={() => setView("register")}>
-            Register
-          </TabButton>
+    <>
+      <div data-login-viewport className={auth.viewport}>
+        <LoginBrandPanel panel={brandPanel} variant="mobile" />
+        <LoginBrandPanel panel={brandPanel} variant="desktop" />
+
+        <div className={auth.formColumn}>
+          <div className={auth.formWash} aria-hidden />
+          <div className={auth.formGlow} aria-hidden />
+
+          <div className={auth.formInner}>
+            {(isSignIn || isRegister) && (
+              <header className={auth.desktopHeader}>
+                <div className="flex items-center gap-3 mb-3">
+                  <span className="h-px flex-1 max-w-[48px] bg-gradient-to-r from-brand-accent to-brand-primary" />
+                  <span className="text-brand-accent text-[8px] leading-none">◆</span>
+                  <span className="h-px flex-1 max-w-[48px] bg-gradient-to-l from-brand-accent to-brand-primary" />
+                </div>
+                <h1 className={auth.title}>{heading}</h1>
+                {subheading && <p className={auth.subtitle}>{subheading}</p>}
+              </header>
+            )}
+
+            <div className={auth.formCard}>
+              {view !== "forgot" && (
+                <div className="flex gap-6 mb-8 border-b border-cart-border">
+                  <TabButton active={view === "login"} onClick={() => setView("login")}>
+                    Sign in
+                  </TabButton>
+                  <TabButton active={view === "register"} onClick={() => setView("register")}>
+                    Register
+                  </TabButton>
+                </div>
+              )}
+
+              {view === "login" && (
+                <LoginForm
+                  countryCode={countryCode}
+                  OtpComponent={OtpComponent}
+                  onForgot={() => setView("forgot")}
+                  onRegister={() => setView("register")}
+                  onTrackGuest={() => {
+                    if (checkingGuest) return
+                    void handleTrackGuestOrder()
+                  }}
+                />
+              )}
+              {view === "register" && (
+                <RegisterForm
+                  countryCode={countryCode}
+                  OtpComponent={OtpComponent}
+                  onLogin={() => setView("login")}
+                />
+              )}
+              {view === "forgot" && (
+                <ForgotPasswordForm onBack={() => setView("login")} />
+              )}
+            </div>
+
+            {checkingGuest && (
+              <p className="mt-4 text-xs text-muted uppercase tracking-[0.2em]">
+                {guestTrackLabel}…
+              </p>
+            )}
+          </div>
         </div>
-      )}
-
-      {view === "login" && (
-        <LoginForm
-          countryCode={countryCode}
-          OtpComponent={OtpComponent}
-          onForgot={() => setView("forgot")}
-          onRegister={() => setView("register")}
-        />
-      )}
-      {view === "register" && (
-        <RegisterForm
-          countryCode={countryCode}
-          OtpComponent={OtpComponent}
-          onLogin={() => setView("login")}
-        />
-      )}
-      {view === "forgot" && <ForgotPasswordForm onBack={() => setView("login")} />}
-    </div>
+      </div>
+
+      <GuestOrderModal
+        open={showGuestModal}
+        onClose={() => {
+          setShowGuestModal(false)
+          setGuestAutoStart(false)
+        }}
+        countryCode={countryCode}
+        initialEmail={guestEmail}
+        autoStart={guestAutoStart}
+        OtpComponent={OtpComponent}
+      />
+    </>
   )
 }
 
@@ -127,11 +225,7 @@ function TabButton({
     <button
       type="button"
       onClick={onClick}
-      className={`pb-3 text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] border-b-2 -mb-px transition-colors ${
-        active
-          ? "border-brand-accent text-brand-accent"
-          : "border-transparent text-muted hover:text-heading"
-      }`}
+      className={active ? auth.tabActive : auth.tabIdle}
     >
       {children}
     </button>