@pradip1995/segment-login-template 0.2.4 → 0.3.0

package/src/login-form.tsx

@@ -0,0 +1,355 @@
+"use client"
+
+import { useActionState, useState } from "react"
+import { useRouter } from "next/navigation"
+import { login } from "@pradip1995/commerce-core/client/actions/customer"
+import { sendAuthOtp, sendOTP, verifyAuthOtpAndLogin, verifyOTP } from "./auth-server"
+import OtpInput from "./otp-input"
+import GoogleAuthSection from "./google-auth-section"
+
+type LoginMode = "password" | "otp"
+
+export default function LoginForm({
+  countryCode,
+  onForgot,
+  onRegister,
+}: {
+  countryCode: string
+  onForgot: () => void
+  onRegister: () => void
+}) {
+  const [mode, setMode] = useState<LoginMode>("password")
+
+  return (
+    <div className="space-y-6">
+      <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>
+
+      <div className="flex gap-2 p-1 bg-surface-muted rounded-lg">
+        <ModeButton active={mode === "password"} onClick={() => setMode("password")}>
+          Password
+        </ModeButton>
+        <ModeButton active={mode === "otp"} onClick={() => setMode("otp")}>
+          OTP
+        </ModeButton>
+      </div>
+
+      {mode === "password" ? (
+        <PasswordLoginForm countryCode={countryCode} onForgot={onForgot} />
+      ) : (
+        <OtpLoginForm countryCode={countryCode} />
+      )}
+
+      <p className="text-sm text-center text-muted">
+        New here?{" "}
+        <button type="button" onClick={onRegister} className="text-brand-accent font-semibold hover:underline">
+          Create an account
+        </button>
+      </p>
+    </div>
+  )
+}
+
+function ModeButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean
+  onClick: () => void
+  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"
+      }`}
+    >
+      {children}
+    </button>
+  )
+}
+
+function PasswordLoginForm({
+  countryCode,
+  onForgot,
+}: {
+  countryCode: string
+  onForgot: () => void
+}) {
+  const [state, formAction, pending] = useActionState(login, null)
+
+  return (
+    <form action={formAction} className="space-y-4">
+      <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" />
+      {state && typeof state === "string" && state !== "ACCOUNT_DELETION_PENDING" && (
+        <p className="text-sm text-brand-sale">{state}</p>
+      )}
+      {state === "ACCOUNT_DELETION_PENDING" && (
+        <p className="text-sm text-brand-sale">
+          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"
+      >
+        Forgot password?
+      </button>
+    </form>
+  )
+}
+
+function OtpLoginForm({ countryCode }: { countryCode: string }) {
+  const router = useRouter()
+  const [authMethod, setAuthMethod] = useState<"email_auth" | "phone_auth" | "guest">("email_auth")
+  const [identifier, setIdentifier] = useState("")
+  const [otpToken, setOtpToken] = useState<string | null>(null)
+  const [otp, setOtp] = useState("")
+  const [step, setStep] = useState<"identifier" | "otp">("identifier")
+  const [error, setError] = useState<string | null>(null)
+  const [pending, setPending] = useState(false)
+  const [isNewUser, setIsNewUser] = useState(false)
+  const [firstName, setFirstName] = useState("")
+  const [lastName, setLastName] = useState("")
+
+  async function handleSendOtp(e: React.FormEvent) {
+    e.preventDefault()
+    setPending(true)
+    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")
+        setStep("otp")
+        return
+      }
+
+      const res = await sendAuthOtp(
+        authMethod === "email_auth"
+          ? { email: identifier, type: "email_auth" }
+          : { phone: identifier, type: "phone_auth" }
+      )
+
+      if (!res.success) {
+        throw new Error(res.error)
+      }
+
+      setOtpToken(res.token ?? null)
+      setIsNewUser(res.isNewUser ?? false)
+      setStep("otp")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to send code")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  async function handleVerifyOtp(e: React.FormEvent) {
+    e.preventDefault()
+    if (!otp || otp.length < 6) return
+
+    setPending(true)
+    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`
+        }
+        router.push(`/${countryCode}/account/guest-orders`)
+        return
+      }
+
+      if (isNewUser && (!firstName.trim() || !lastName.trim())) {
+        throw new Error("Please enter your first and last name to finish registration")
+      }
+
+      await verifyAuthOtpAndLogin({
+        token: otpToken || "",
+        code: otp,
+        countryCode,
+        first_name: isNewUser ? firstName.trim() : undefined,
+        last_name: isNewUser ? lastName.trim() : undefined,
+      })
+    } catch (err) {
+      if (isNextRedirect(err)) throw err
+      setError(err instanceof Error ? err.message : "Verification failed")
+      setPending(false)
+    }
+  }
+
+  if (step === "otp") {
+    return (
+      <form onSubmit={handleVerifyOtp} className="space-y-4">
+        <p className="text-sm text-muted text-center">
+          Enter the 6-digit code sent to <span className="font-medium text-heading">{identifier}</span>
+        </p>
+
+        {isNewUser && authMethod !== "guest" && (
+          <div className="grid grid-cols-2 gap-3">
+            <Field
+              label="First name"
+              name="first_name"
+              type="text"
+              value={firstName}
+              onChange={(e) => setFirstName(e.target.value)}
+            />
+            <Field
+              label="Last name"
+              name="last_name"
+              type="text"
+              value={lastName}
+              onChange={(e) => setLastName(e.target.value)}
+            />
+          </div>
+        )}
+
+        <OtpInput value={otp} onChange={setOtp} autoFocus />
+        {error && <p className="text-sm text-brand-sale text-center">{error}</p>}
+        <button type="submit" disabled={pending || otp.length < 6} className="btn-primary w-full disabled:opacity-60">
+          {pending ? "Verifying…" : "Verify & continue"}
+        </button>
+        <button
+          type="button"
+          className="text-sm text-muted hover:text-brand-accent w-full text-center"
+          onClick={() => {
+            setStep("identifier")
+            setOtp("")
+            setError(null)
+          }}
+        >
+          Use a different {authMethod === "phone_auth" ? "phone" : "email"}
+        </button>
+      </form>
+    )
+  }
+
+  return (
+    <form onSubmit={handleSendOtp} className="space-y-4">
+      <div className="flex flex-wrap gap-2">
+        <Chip active={authMethod === "email_auth"} onClick={() => setAuthMethod("email_auth")}>
+          Email OTP
+        </Chip>
+        <Chip active={authMethod === "phone_auth"} onClick={() => setAuthMethod("phone_auth")}>
+          Phone OTP
+        </Chip>
+        <Chip active={authMethod === "guest"} onClick={() => setAuthMethod("guest")}>
+          Guest orders
+        </Chip>
+      </div>
+
+      <Field
+        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"}
+      />
+
+      <p className="text-xs text-muted">
+        {authMethod === "guest"
+          ? "Track a guest order with a one-time code — no account required."
+          : "We will send a one-time code to sign in or create your account."}
+      </p>
+
+      {error && <p className="text-sm text-brand-sale">{error}</p>}
+
+      <button type="submit" disabled={pending || !identifier.trim()} className="btn-primary w-full disabled:opacity-60">
+        {pending ? "Sending…" : "Send code"}
+      </button>
+    </form>
+  )
+}
+
+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
+}) {
+  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>
+  )
+}
+
+function Field({
+  label,
+  name,
+  type,
+  autoComplete,
+  value,
+  onChange,
+}: {
+  label: string
+  name: string
+  type: string
+  autoComplete?: string
+  value?: string
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+}) {
+  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
+        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"
+      />
+    </label>
+  )
+}

package/src/otp-input.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+type OtpInputProps = {
+  value: string
+  onChange: (value: string) => void
+  length?: number
+  autoFocus?: boolean
+}
+
+export default function OtpInput({
+  value,
+  onChange,
+  length = 6,
+  autoFocus = false,
+}: OtpInputProps) {
+  return (
+    <div className="relative flex justify-center gap-x-2.5">
+      {Array.from({ length }, (_, index) => (
+        <div
+          key={index}
+          className={`w-10 h-12 flex items-center justify-center border-2 rounded-lg text-xl font-bold transition-all duration-200 ${
+            value.length === index
+              ? "border-brand-accent ring-2 ring-brand-accent/10 bg-page-bg"
+              : value.length > index
+                ? "border-cart-border bg-page-bg shadow-sm"
+                : "border-cart-border bg-surface-muted/50"
+          }`}
+        >
+          {value[index] || ""}
+        </div>
+      ))}
+      <input
+        type="text"
+        inputMode="numeric"
+        maxLength={length}
+        className="absolute inset-0 opacity-0 cursor-pointer"
+        value={value}
+        onChange={(event) =>
+          onChange(event.target.value.replace(/\D/g, "").slice(0, length))
+        }
+        autoFocus={autoFocus}
+        aria-label="One-time password"
+      />
+    </div>
+  )
+}

package/src/register-form.tsx

@@ -0,0 +1,298 @@
+"use client"
+
+import { useState } from "react"
+import {
+  registerCustomer,
+  sendCustomerOTP,
+  verifyCustomerOTP,
+} from "./auth-server"
+import OtpInput from "./otp-input"
+import GoogleAuthSection from "./google-auth-section"
+
+type VerificationMethod = "email_verification" | "phone_verification"
+
+export default function RegisterForm({
+  countryCode,
+  onLogin,
+}: {
+  countryCode: string
+  onLogin: () => void
+}) {
+  const [step, setStep] = useState<"form" | "otp" | "success">("form")
+  const [verificationMethod, setVerificationMethod] =
+    useState<VerificationMethod>("phone_verification")
+  const [form, setForm] = useState({
+    full_name: "",
+    email: "",
+    phone: "",
+    password: "",
+  })
+  const [customerId, setCustomerId] = useState<string | null>(null)
+  const [otpToken, setOtpToken] = useState<string | null>(null)
+  const [otp, setOtp] = useState("")
+  const [error, setError] = useState<string | null>(null)
+  const [pending, setPending] = useState(false)
+
+  function updateField(key: keyof typeof form, value: string) {
+    setForm((prev) => ({ ...prev, [key]: value }))
+  }
+
+  async function handleRegister(e: React.FormEvent) {
+    e.preventDefault()
+    setPending(true)
+    setError(null)
+
+    try {
+      if (verificationMethod === "phone_verification" && !form.phone.trim()) {
+        throw new Error("Phone number is required for mobile verification")
+      }
+
+      const [first_name, ...rest] = form.full_name.trim().split(/\s+/)
+      const last_name = rest.join(" ") || "."
+
+      const result = await registerCustomer({
+        email: form.email.trim(),
+        first_name: first_name || "",
+        last_name,
+        phone: form.phone || undefined,
+        password: form.password,
+      })
+
+      if (!result.success) {
+        throw new Error(result.error || "Registration failed")
+      }
+
+      const id = result.customer?.id
+      if (!id) {
+        throw new Error("Account was created but customer id is missing")
+      }
+
+      setCustomerId(id)
+
+      const otpResult = await sendCustomerOTP(id, verificationMethod)
+      if (!otpResult.success) {
+        throw new Error(otpResult.error || "Failed to send verification code")
+      }
+
+      setOtpToken(otpResult.token ?? null)
+      setStep("otp")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  async function handleVerifyOtp(e: React.FormEvent) {
+    e.preventDefault()
+    if (!otp || otp.length < 6) return
+
+    setPending(true)
+    setError(null)
+
+    try {
+      const result = await verifyCustomerOTP(otpToken || "", otp)
+      if (!result.success) {
+        throw new Error(result.error || "Invalid verification code")
+      }
+
+      setStep("success")
+      window.setTimeout(() => onLogin(), 2000)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Verification failed")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  async function handleResendOtp() {
+    if (!customerId) return
+    setPending(true)
+    setError(null)
+
+    try {
+      const result = await sendCustomerOTP(customerId, verificationMethod)
+      if (!result.success) {
+        throw new Error(result.error || "Failed to resend code")
+      }
+      setOtpToken(result.token ?? null)
+      setOtp("")
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to resend code")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  if (step === "success") {
+    return (
+      <div className="text-center space-y-4 py-6">
+        <div className="w-14 h-14 mx-auto rounded-full bg-green-100 flex items-center justify-center text-2xl">
+          ✓
+        </div>
+        <h2 className="section-heading text-lg">Account verified</h2>
+        <p className="text-sm text-muted">
+          Your account is ready. Redirecting you to sign in…
+        </p>
+      </div>
+    )
+  }
+
+  if (step === "otp") {
+    return (
+      <form onSubmit={handleVerifyOtp} className="space-y-5">
+        <div className="text-center space-y-2">
+          <h2 className="section-heading text-lg">Verify your account</h2>
+          <p className="text-sm text-muted">
+            Enter the 6-digit code sent to your{" "}
+            {verificationMethod === "phone_verification" ? "phone" : "email"}.
+          </p>
+        </div>
+
+        <OtpInput value={otp} onChange={setOtp} autoFocus />
+        {error && <p className="text-sm text-brand-sale text-center">{error}</p>}
+
+        <button type="submit" disabled={pending || otp.length < 6} className="btn-primary w-full disabled:opacity-60">
+          {pending ? "Verifying…" : "Verify account"}
+        </button>
+
+        <button
+          type="button"
+          disabled={pending}
+          onClick={handleResendOtp}
+          className="text-sm text-muted hover:text-brand-accent w-full text-center disabled:opacity-60"
+        >
+          Resend code
+        </button>
+      </form>
+    )
+  }
+
+  return (
+    <div className="space-y-6">
+      <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>
+
+      <form onSubmit={handleRegister} className="space-y-4">
+        <div className="flex gap-2 p-1 bg-surface-muted rounded-lg">
+          <VerificationToggle
+            active={verificationMethod === "phone_verification"}
+            onClick={() => setVerificationMethod("phone_verification")}
+          >
+            Mobile
+          </VerificationToggle>
+          <VerificationToggle
+            active={verificationMethod === "email_verification"}
+            onClick={() => setVerificationMethod("email_verification")}
+          >
+            Email OTP
+          </VerificationToggle>
+        </div>
+
+        <Field
+          label="Full name"
+          value={form.full_name}
+          onChange={(e) => updateField("full_name", e.target.value)}
+          autoComplete="name"
+        />
+        <Field
+          label="Email"
+          type="email"
+          value={form.email}
+          onChange={(e) => updateField("email", e.target.value)}
+          autoComplete="email"
+        />
+        <Field
+          label="Phone"
+          type="tel"
+          value={form.phone}
+          onChange={(e) => updateField("phone", e.target.value)}
+          autoComplete="tel"
+          required={verificationMethod === "phone_verification"}
+        />
+        <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"}
+        </button>
+      </form>
+
+      <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">
+          Sign in
+        </button>
+      </p>
+    </div>
+  )
+}
+
+function VerificationToggle({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean
+  onClick: () => void
+  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"
+      }`}
+    >
+      {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
+}) {
+  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>
+  )
+}