@pradip1995/segment-login-template 0.4.1 → 0.4.3

package/src/login-form.tsx

@@ -2,10 +2,11 @@
 
 import { useActionState, useState } from "react"
 import { login } from "@pradip1995/commerce-core/client/actions/customer"
-import { sendAuthOtp, sendOTP, verifyAuthOtpAndLogin, verifyOTP } from "./auth-server"
+import { sendAuthOtp, verifyAuthOtpAndLogin } from "./auth-server"
 import GoogleAuthSection from "./google-auth-section"
 import OtpVerificationModal from "./otp-verification-modal"
 import type { OtpVerificationComponent } from "./otp-component"
+import { auth } from "./account-theme"
 
 type LoginMode = "password" | "otp"
 
@@ -14,28 +15,31 @@ export default function LoginForm({
   OtpComponent = OtpVerificationModal,
   onForgot,
   onRegister,
+  onTrackGuest,
 }: {
   countryCode: string
   OtpComponent?: OtpVerificationComponent
   onForgot: () => void
   onRegister: () => void
+  onTrackGuest?: () => void
 }) {
   const [mode, setMode] = useState<LoginMode>("password")
 
   return (
-    <div className="space-y-6">
+    <div className="w-full flex flex-col space-y-6" data-testid="login-page">
+      <div className="text-center lg:hidden">
+        <Ornament />
+        <h2 className={auth.mobileTitle}>Sign in</h2>
+        <p className="mt-2 text-[10px] text-muted uppercase tracking-[0.24em]">
+          Access your account
+        </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 continue with</span>
-        </div>
-      </div>
+      <AuthDivider label="Or continue with" />
 
-      <div className="flex gap-2 p-1 bg-surface-muted rounded-lg">
+      <div className="flex gap-2 p-1 bg-surface-muted/80">
         <ModeButton active={mode === "password"} onClick={() => setMode("password")}>
           Password
         </ModeButton>
@@ -52,10 +56,28 @@ export default function LoginForm({
 
       <p className="text-sm text-center text-muted">
         New here?{" "}
-        <button type="button" onClick={onRegister} className="text-brand-accent font-semibold hover:underline">
+        <button
+          type="button"
+          onClick={onRegister}
+          className="text-heading font-semibold hover:text-brand-accent transition-colors underline underline-offset-2"
+        >
           Create an account
         </button>
       </p>
+
+      {onTrackGuest && (
+        <div className="pt-4 border-t border-brand-primary/10">
+          <button
+            type="button"
+            onClick={onTrackGuest}
+            className={auth.guestCta}
+            data-testid="track-guest-order-button"
+          >
+            <GuestPackageIcon />
+            Track guest order
+          </button>
+        </div>
+      )}
     </div>
   )
 }
@@ -70,13 +92,7 @@ function ModeButton({
   children: React.ReactNode
 }) {
   return (
-    <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"
-      }`}
-    >
+    <button type="button" onClick={onClick} className={active ? auth.modeActive : auth.modeIdle}>
       {children}
     </button>
   )
@@ -90,33 +106,72 @@ function PasswordLoginForm({
   onForgot: () => void
 }) {
   const [state, formAction, pending] = useActionState(login, null)
+  const [showPassword, setShowPassword] = useState(false)
 
   return (
-    <form action={formAction} className="space-y-4">
+    <form action={formAction} className="space-y-5">
       <input type="hidden" name="country_code" value={countryCode} />
-      <Field label="Email or phone" name="email_or_phone" type="text" autoComplete="username" />
-      <Field label="Password" name="password" type="password" autoComplete="current-password" />
+
+      <AuthField
+        label="Email or phone"
+        name="email_or_phone"
+        type="text"
+        autoComplete="username"
+        placeholder="Enter email or phone"
+      />
+
+      <div>
+        <div className="flex items-center justify-between mb-1.5">
+          <span className={auth.fieldLabel}>Password</span>
+          <button
+            type="button"
+            onClick={onForgot}
+            className={`${auth.fieldLabel} text-brand-accent hover:text-heading transition-colors`}
+          >
+            Forgot?
+          </button>
+        </div>
+        <div className="relative">
+          <input
+            name="password"
+            type={showPassword ? "text" : "password"}
+            autoComplete="current-password"
+            required
+            placeholder="Enter your password"
+            className={`${auth.input} pr-10`}
+            data-testid="password-input"
+          />
+          <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>
+
       {state && typeof state === "string" && state !== "ACCOUNT_DELETION_PENDING" && (
-        <p className="text-sm text-brand-sale">
+        <p className="text-sm text-brand-sale" role="alert">
           {state === "Email not verified." || state.includes("not verified")
             ? "Your email is not verified yet. Complete OTP verification during registration, or use OTP sign-in below."
             : state}
         </p>
       )}
       {state === "ACCOUNT_DELETION_PENDING" && (
-        <p className="text-sm text-brand-sale">
+        <p className="text-sm text-brand-sale" role="alert">
           This account has a pending deletion request. Check your email to cancel it.
         </p>
       )}
-      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
-        {pending ? "Signing in…" : "Sign in"}
-      </button>
+
       <button
-        type="button"
-        onClick={onForgot}
-        className="text-sm text-muted hover:text-brand-accent w-full text-center"
+        type="submit"
+        disabled={pending}
+        className={`${auth.btnPrimary} ${auth.btnShine}`}
+        data-testid="sign-in-button"
       >
-        Forgot password?
+        <span className="relative z-[1]">{pending ? "Signing in…" : "Sign in"}</span>
       </button>
     </form>
   )
@@ -129,7 +184,7 @@ function OtpLoginForm({
   countryCode: string
   OtpComponent: OtpVerificationComponent
 }) {
-  const [authMethod, setAuthMethod] = useState<"email_auth" | "phone_auth" | "guest">("email_auth")
+  const [authMethod, setAuthMethod] = useState<"email_auth" | "phone_auth">("email_auth")
   const [identifier, setIdentifier] = useState("")
   const [otpToken, setOtpToken] = useState<string | null>(null)
   const [otp, setOtp] = useState("")
@@ -146,17 +201,6 @@ function OtpLoginForm({
     setError(null)
 
     try {
-      if (authMethod === "guest") {
-        const res = await sendOTP(identifier)
-        if (!res.success && (res as { error?: string }).error) {
-          throw new Error((res as { error?: string }).error)
-        }
-        setOtpToken("guest")
-        setOtp("")
-        setShowOtpModal(true)
-        return
-      }
-
       const res = await sendAuthOtp(
         authMethod === "email_auth"
           ? { email: identifier.trim(), type: "email_auth" }
@@ -183,15 +227,6 @@ function OtpLoginForm({
     setError(null)
 
     try {
-      if (authMethod === "guest") {
-        const res = await sendOTP(identifier)
-        if (!res.success && (res as { error?: string }).error) {
-          throw new Error((res as { error?: string }).error)
-        }
-        setOtp("")
-        return
-      }
-
       const res = await sendAuthOtp(
         authMethod === "email_auth"
           ? { email: identifier.trim(), type: "email_auth" }
@@ -218,19 +253,6 @@ function OtpLoginForm({
     setError(null)
 
     try {
-      if (authMethod === "guest") {
-        const res = await verifyOTP(identifier, otpToken || "", otp)
-        if (!res.success) {
-          throw new Error((res as { error?: string }).error || "Invalid code")
-        }
-        const token = (res as { token?: string }).token
-        if (token) {
-          document.cookie = `_medusa_guest_token=${token}; path=/; max-age=86400; SameSite=Lax`
-        }
-        window.location.href = `/${countryCode}/account/guest-orders`
-        return
-      }
-
       if (isNewUser && (!firstName.trim() || !lastName.trim())) {
         throw new Error("Please enter your first and last name to finish registration")
       }
@@ -249,13 +271,6 @@ function OtpLoginForm({
     }
   }
 
-  const otpTitle =
-    authMethod === "guest"
-      ? "Verify guest order access"
-      : authMethod === "phone_auth"
-        ? "Verify your phone"
-        : "Verify your email"
-
   return (
     <>
       <form onSubmit={handleSendOtp} className="space-y-4">
@@ -266,41 +281,45 @@ function OtpLoginForm({
           <Chip active={authMethod === "phone_auth"} onClick={() => setAuthMethod("phone_auth")}>
             Phone OTP
           </Chip>
-          <Chip active={authMethod === "guest"} onClick={() => setAuthMethod("guest")}>
-            Guest orders
-          </Chip>
         </div>
 
-        <Field
+        <AuthField
           label={authMethod === "phone_auth" ? "Phone" : "Email"}
           name="identifier"
           type={authMethod === "phone_auth" ? "tel" : "email"}
           value={identifier}
           onChange={(e) => setIdentifier(e.target.value)}
           autoComplete={authMethod === "phone_auth" ? "tel" : "email"}
+          placeholder={
+            authMethod === "phone_auth" ? "Enter your phone" : "Enter your email"
+          }
         />
 
         <p className="text-xs text-muted">
-          {authMethod === "guest"
-            ? "We will send a one-time code to view your guest orders."
-            : "We will send a one-time code to sign in or create your account."}
+          We will send a one-time code to sign in or create your account.
         </p>
 
-        {error && !showOtpModal && <p className="text-sm text-brand-sale">{error}</p>}
+        {error && !showOtpModal && (
+          <p className="text-sm text-brand-sale" role="alert">
+            {error}
+          </p>
+        )}
 
         <button
           type="submit"
           disabled={pending || !identifier.trim()}
-          className="btn-primary w-full disabled:opacity-60"
+          className={`${auth.btnPrimary} ${auth.btnShine}`}
         >
-          {pending ? "Sending…" : "Send verification code"}
+          <span className="relative z-[1]">
+            {pending ? "Sending…" : "Send verification code"}
+          </span>
         </button>
       </form>
 
       <OtpComponent
         open={showOtpModal}
         preventClose
-        title={otpTitle}
+        title={authMethod === "phone_auth" ? "Verify your phone" : "Verify your email"}
         description={`Enter the 6-digit code sent to ${identifier || "your contact"}.`}
         otp={otp}
         onOtpChange={setOtp}
@@ -310,32 +329,22 @@ function OtpLoginForm({
         onVerify={handleVerifyOtp}
         onResend={handleResendOtp}
         extraContent={
-          isNewUser && authMethod !== "guest" ? (
+          isNewUser ? (
             <div className="grid grid-cols-2 gap-3 mb-6">
-              <label className="block">
-                <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
-                  First name
-                </span>
-                <input
-                  type="text"
-                  value={firstName}
-                  onChange={(e) => setFirstName(e.target.value)}
-                  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>
-              <label className="block">
-                <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
-                  Last name
-                </span>
-                <input
-                  type="text"
-                  value={lastName}
-                  onChange={(e) => setLastName(e.target.value)}
-                  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>
+              <AuthField
+                label="First name"
+                name="first_name"
+                value={firstName}
+                onChange={(e) => setFirstName(e.target.value)}
+                required
+              />
+              <AuthField
+                label="Last name"
+                name="last_name"
+                value={lastName}
+                onChange={(e) => setLastName(e.target.value)}
+                required
+              />
             </div>
           ) : undefined
         }
@@ -344,68 +353,120 @@ function OtpLoginForm({
   )
 }
 
-function isNextRedirect(err: unknown) {
-  return (
-    typeof err === "object" &&
-    err !== null &&
-    "digest" in err &&
-    String((err as { digest?: string }).digest || "").includes("NEXT_REDIRECT")
-  )
-}
-
-function Chip({
-  active,
-  onClick,
-  children,
-}: {
-  active: boolean
-  onClick: () => void
-  children: React.ReactNode
-}) {
+export function AuthDivider({ label }: { label: string }) {
   return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`px-3 py-1.5 text-xs font-medium rounded-full border transition-colors ${
-        active
-          ? "border-brand-accent text-brand-accent bg-brand-accent/5"
-          : "border-cart-border text-muted hover:text-heading"
-      }`}
-    >
-      {children}
-    </button>
+    <div className="relative">
+      <div className="absolute inset-0 flex items-center">
+        <div className="w-full border-t border-brand-primary/10" />
+      </div>
+      <div className="relative flex justify-center items-center gap-2 text-[10px] font-semibold uppercase tracking-[0.28em]">
+        <span className="px-2 bg-surface text-brand-accent">◆</span>
+        <span className="px-1 bg-surface text-muted">{label}</span>
+        <span className="px-2 bg-surface text-brand-accent">◆</span>
+      </div>
+    </div>
   )
 }
 
-function Field({
+export function AuthField({
   label,
   name,
-  type,
+  type = "text",
   autoComplete,
   value,
   onChange,
+  placeholder,
+  required = true,
 }: {
   label: string
-  name: string
-  type: string
+  name?: string
+  type?: string
   autoComplete?: string
   value?: string
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  placeholder?: string
+  required?: boolean
 }) {
   return (
     <label className="block">
-      <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
-        {label}
-      </span>
+      <span className={`${auth.fieldLabel} mb-1.5 block`}>{label}</span>
       <input
         name={name}
         type={type}
         autoComplete={autoComplete}
         value={value}
         onChange={onChange}
-        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"
+        placeholder={placeholder}
+        required={required}
+        className={auth.input}
       />
     </label>
   )
 }
+
+export function Ornament() {
+  return (
+    <div className="flex items-center justify-center gap-2 mb-3" aria-hidden>
+      <span className="h-px w-6 bg-brand-accent/70" />
+      <span className="text-brand-accent text-[7px] leading-none">◆</span>
+      <span className="h-px w-6 bg-brand-accent/70" />
+    </div>
+  )
+}
+
+function Chip({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean
+  onClick: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={active ? auth.chipActive : auth.chipIdle}
+    >
+      {children}
+    </button>
+  )
+}
+
+function isNextRedirect(err: unknown) {
+  return (
+    typeof err === "object" &&
+    err !== null &&
+    "digest" in err &&
+    String((err as { digest?: string }).digest || "").includes("NEXT_REDIRECT")
+  )
+}
+
+function GuestPackageIcon() {
+  return (
+    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" aria-hidden>
+      <path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" strokeLinecap="round" strokeLinejoin="round" />
+      <polyline points="3.27 6.96 12 12.01 20.73 6.96" strokeLinecap="round" strokeLinejoin="round" />
+      <line x1="12" y1="22.08" x2="12" y2="12" strokeLinecap="round" />
+    </svg>
+  )
+}
+
+function EyeIcon() {
+  return (
+    <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>
+  )
+}