@pradip1995/segment-login-template 0.2.5 → 0.4.0

package/src/register-form.tsx

@@ -0,0 +1,324 @@
+"use client"
+
+import { useState } from "react"
+import {
+  registerCustomer,
+  sendRegistrationOtp,
+  verifyRegistrationOtp,
+} from "./auth-server"
+import GoogleAuthSection from "./google-auth-section"
+import OtpVerificationModal from "./otp-verification-modal"
+import type { OtpVerificationComponent } from "./otp-component"
+
+type VerificationMethod = "email_verification" | "phone_verification"
+type RegistrationStep = "form" | "otp" | "success"
+
+export default function RegisterForm({
+  countryCode,
+  OtpComponent = OtpVerificationModal,
+  onLogin,
+}: {
+  countryCode: string
+  OtpComponent?: OtpVerificationComponent
+  onLogin: () => void
+}) {
+  const [step, setStep] = useState<RegistrationStep>("form")
+  const [verificationMethod, setVerificationMethod] =
+    useState<VerificationMethod>("email_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)
+  const [showOtpModal, setShowOtpModal] = 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 sendRegistrationOtp(id, verificationMethod)
+      if (!otpResult.success) {
+        throw new Error(otpResult.error || "Failed to send verification code")
+      }
+
+      setOtpToken(otpResult.token ?? null)
+      setOtp("")
+      setStep("otp")
+      setShowOtpModal(true)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Registration failed")
+    } finally {
+      setPending(false)
+    }
+  }
+
+  async function handleVerifyOtp() {
+    if (!otp || otp.length < 6) return
+
+    setPending(true)
+    setError(null)
+
+    try {
+      const result = await verifyRegistrationOtp({
+        otpToken: otpToken || "",
+        code: otp,
+        countryCode,
+      })
+
+      if (!result.success) {
+        throw new Error(result.error || "Invalid verification code")
+      }
+
+      setStep("success")
+      window.setTimeout(() => {
+        setShowOtpModal(false)
+        onLogin()
+      }, 2000)
+    } catch (err) {
+      if (isNextRedirect(err)) throw 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 sendRegistrationOtp(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)
+    }
+  }
+
+  const verificationTarget =
+    verificationMethod === "email_verification" ? form.email : form.phone
+
+  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>
+
+      {step === "form" && (
+        <>
+          <div className="flex gap-2 p-1 bg-surface-muted rounded-lg">
+            <VerificationToggle
+              active={verificationMethod === "email_verification"}
+              onClick={() => setVerificationMethod("email_verification")}
+            >
+              Email OTP
+            </VerificationToggle>
+            <VerificationToggle
+              active={verificationMethod === "phone_verification"}
+              onClick={() => setVerificationMethod("phone_verification")}
+            >
+              Mobile OTP
+            </VerificationToggle>
+          </div>
+
+          <p className="text-xs text-muted -mt-2">
+            {verificationMethod === "email_verification"
+              ? "We will send a verification code to your email after you register."
+              : "We will send a verification code to your mobile after you register."}
+          </p>
+
+          <form onSubmit={handleRegister} className="space-y-4">
+            <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>
+        </>
+      )}
+
+      {step !== "form" && !showOtpModal && (
+        <p className="text-sm text-muted text-center">
+          Complete verification to activate your account.
+        </p>
+      )}
+
+      <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>
+
+      <OtpComponent
+        open={showOtpModal}
+        preventClose={step === "otp"}
+        title={
+          step === "success"
+            ? "Account verified"
+            : verificationMethod === "email_verification"
+              ? "Verify your email"
+              : "Verify your mobile"
+        }
+        description={
+          step === "success"
+            ? "Your account is ready."
+            : `We've sent a 6-digit verification code to ${verificationTarget || "your contact"}.`
+        }
+        otp={otp}
+        onOtpChange={setOtp}
+        error={error}
+        pending={pending}
+        success={step === "success"}
+        successTitle="Account verified"
+        successMessage="Redirecting you to sign in…"
+        verifyLabel="Verify & continue"
+        onVerify={handleVerifyOtp}
+        onResend={handleResendOtp}
+      />
+    </div>
+  )
+}
+
+function isNextRedirect(err: unknown) {
+  return (
+    typeof err === "object" &&
+    err !== null &&
+    "digest" in err &&
+    String((err as { digest?: string }).digest || "").includes("NEXT_REDIRECT")
+  )
+}
+
+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>
+  )
+}

package/src/reset-password-form.tsx

@@ -0,0 +1,110 @@
+"use client"
+
+import { useState } from "react"
+import { useSearchParams } from "next/navigation"
+import { completePasswordResetAction } from "./auth-server"
+
+export default function ResetPasswordForm({ countryCode }: { countryCode: string }) {
+  const searchParams = useSearchParams()
+  const token = searchParams.get("token") || ""
+  const email = searchParams.get("email") || ""
+
+  const [password, setPassword] = useState("")
+  const [confirmPassword, setConfirmPassword] = useState("")
+  const [error, setError] = useState<string | null>(null)
+  const [pending, setPending] = useState(false)
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault()
+    setError(null)
+
+    if (!token || !email) {
+      setError("This reset link is invalid or expired. Request a new one from the sign-in page.")
+      return
+    }
+
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters.")
+      return
+    }
+
+    if (password !== confirmPassword) {
+      setError("Passwords do not match.")
+      return
+    }
+
+    setPending(true)
+
+    try {
+      const result = await completePasswordResetAction({
+        email,
+        password,
+        token,
+        countryCode,
+      })
+
+      if (result && !result.success) {
+        setError(result.error || "Failed to reset password")
+        setPending(false)
+      }
+    } catch (err) {
+      if (isNextRedirect(err)) throw err
+      setError(err instanceof Error ? err.message : "Failed to reset password")
+      setPending(false)
+    }
+  }
+
+  return (
+    <div className="w-full max-w-md mx-auto space-y-6">
+      <div className="text-center space-y-2">
+        <h1 className="section-heading text-xl">Set a new password</h1>
+        <p className="text-sm text-muted">Choose a strong password for {email || "your account"}.</p>
+      </div>
+
+      <form onSubmit={handleSubmit} className="space-y-4">
+        <label className="block">
+          <span className="text-xs font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-1.5 block">
+            New password
+          </span>
+          <input
+            type="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+            autoComplete="new-password"
+            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">
+            Confirm password
+          </span>
+          <input
+            type="password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            required
+            autoComplete="new-password"
+            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>
+
+        {error && <p className="text-sm text-brand-sale">{error}</p>}
+
+        <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
+          {pending ? "Updating…" : "Update password"}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+function isNextRedirect(err: unknown) {
+  return (
+    typeof err === "object" &&
+    err !== null &&
+    "digest" in err &&
+    String((err as { digest?: string }).digest || "").includes("NEXT_REDIRECT")
+  )
+}

package/src/reset-password-page.tsx

@@ -0,0 +1,12 @@
+"use client"
+
+import { Suspense } from "react"
+import ResetPasswordForm from "./reset-password-form"
+
+export default function ResetPasswordPage({ countryCode = "in" }: { countryCode?: string }) {
+  return (
+    <Suspense fallback={<p className="text-sm text-muted text-center py-8">Loading…</p>}>
+      <ResetPasswordForm countryCode={countryCode} />
+    </Suspense>
+  )
+}