@pradip1995/segment-login-template 0.2.5 → 0.3.0

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>
+  )
+}

package/src/segment.tsx

@@ -1,10 +1,11 @@
 "use client"
 
-import { useActionState, useState } from "react"
-import { login, requestPasswordReset, signout, signup } from "@pradip1995/commerce-core/client/actions/customer"
-import LocalizedLink from "@pradip1995/segment-primitives/localized-link"
-import { formatPrice } from "@pradip1995/segment-primitives/format-price"
+import { useState } from "react"
 import type { HttpTypes } from "@medusajs/types"
+import LoginForm from "./login-form"
+import RegisterForm from "./register-form"
+import ForgotPasswordForm from "./forgot-password-form"
+import AccountOverview from "./account-overview"
 
 type AccountProps = {
   countryCode?: string
@@ -29,22 +30,27 @@ export default function LoginTemplate({
 
   return (
     <div className="w-full max-w-md mx-auto">
-      <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 !== "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}
           onForgot={() => setView("forgot")}
+          onRegister={() => setView("register")}
         />
       )}
-      {view === "register" && <RegisterForm countryCode={countryCode} />}
+      {view === "register" && (
+        <RegisterForm countryCode={countryCode} onLogin={() => setView("login")} />
+      )}
       {view === "forgot" && <ForgotPasswordForm onBack={() => setView("login")} />}
     </div>
   )
@@ -73,186 +79,3 @@ function TabButton({
     </button>
   )
 }
-
-function LoginForm({
-  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="countryCode" 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" && (
-        <p className="text-sm text-brand-sale">{state}</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 RegisterForm({ countryCode }: { countryCode: string }) {
-  const [state, formAction, pending] = useActionState(signup, null)
-
-  return (
-    <form action={formAction} className="space-y-4">
-      <input type="hidden" name="countryCode" value={countryCode} />
-      <div className="grid grid-cols-2 gap-3">
-        <Field label="First name" name="first_name" type="text" autoComplete="given-name" />
-        <Field label="Last name" name="last_name" type="text" autoComplete="family-name" />
-      </div>
-      <Field label="Email" name="email" type="email" autoComplete="email" />
-      <Field label="Phone" name="phone" type="tel" autoComplete="tel" />
-      <Field label="Password" name="password" type="password" autoComplete="new-password" />
-      {state && typeof state === "string" && (
-        <p className="text-sm text-brand-sale">{state}</p>
-      )}
-      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
-        {pending ? "Creating account…" : "Create account"}
-      </button>
-    </form>
-  )
-}
-
-function ForgotPasswordForm({ onBack }: { onBack: () => void }) {
-  const [email, setEmail] = useState("")
-  const [message, setMessage] = useState<string | null>(null)
-  const [pending, setPending] = useState(false)
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault()
-    setPending(true)
-    setMessage(null)
-    const result = await requestPasswordReset(email)
-    setMessage(result.success ? result.message : result.error || "Something went wrong")
-    setPending(false)
-  }
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4">
-      <p className="text-sm text-muted">Enter your email and we&apos;ll send a reset link.</p>
-      <Field
-        label="Email"
-        name="email"
-        type="email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-      />
-      {message && <p className="text-sm text-body">{message}</p>}
-      <button type="submit" disabled={pending} className="btn-primary w-full disabled:opacity-60">
-        {pending ? "Sending…" : "Send reset link"}
-      </button>
-      <button type="button" onClick={onBack} className="text-sm text-muted hover:text-brand-accent w-full text-center">
-        Back to sign in
-      </button>
-    </form>
-  )
-}
-
-function AccountOverview({
-  customer,
-  orders,
-  countryCode,
-}: {
-  customer: HttpTypes.StoreCustomer
-  orders: HttpTypes.StoreOrder[]
-  countryCode: string
-}) {
-  const name = [customer.first_name, customer.last_name].filter(Boolean).join(" ") || customer.email
-
-  return (
-    <div className="space-y-8">
-      <div className="card-surface rounded-lg p-6">
-        <p className="text-xs uppercase tracking-[var(--letter-spacing-nav)] text-muted mb-2">My account</p>
-        <h1 className="section-heading text-xl mb-1">{name}</h1>
-        <p className="text-sm text-muted">{customer.email}</p>
-        {customer.phone && <p className="text-sm text-muted mt-1">{customer.phone}</p>}
-        <form action={signout.bind(null, countryCode)} className="mt-6">
-          <button type="submit" className="btn-outline text-xs">
-            Sign out
-          </button>
-        </form>
-      </div>
-
-      <div>
-        <h2 className="text-sm font-semibold uppercase tracking-[var(--letter-spacing-nav)] text-heading mb-4">
-          Recent orders
-        </h2>
-        {orders.length === 0 ? (
-          <div className="card-surface rounded-lg p-8 text-center">
-            <p className="text-muted text-sm mb-4">No orders yet.</p>
-            <LocalizedLink href="/store" className="btn-primary inline-block">
-              Start shopping
-            </LocalizedLink>
-          </div>
-        ) : (
-          <ul className="space-y-3">
-            {orders.map((order) => (
-              <li key={order.id}>
-                <LocalizedLink
-                  href={`/orders/${order.id}`}
-                  className="card-surface rounded-lg p-4 flex items-center justify-between gap-4 hover:border-brand-accent transition-colors block"
-                >
-                  <div>
-                    <p className="font-medium text-heading text-sm">
-                      Order #{order.display_id}
-                    </p>
-                    <p className="text-xs text-muted mt-1 capitalize">
-                      {order.status?.replace(/_/g, " ")}
-                    </p>
-                  </div>
-                  <p className="text-sm font-semibold text-brand-accent shrink-0">
-                    {formatPrice(order.total, order.currency_code)}
-                  </p>
-                </LocalizedLink>
-              </li>
-            ))}
-          </ul>
-        )}
-      </div>
-    </div>
-  )
-}
-
-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>
-  )
-}