@open-mercato/core 0.6.1-develop.3276.1.1fcd145078 → 0.6.1-develop.3287.1.450f4ffb56

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/components/StatusBadgeSection.tsx

@@ -0,0 +1,56 @@
+"use client"
+
+import * as React from 'react'
+import { StatusBadge } from '@open-mercato/ui/primitives/status-badge'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { domainStatusMap } from './domainStatusMap'
+import type { DomainMappingRow } from './types'
+
+export type StatusBadgeSectionProps = {
+  mapping: DomainMappingRow
+}
+
+function formatTime(value: string | null, fallback: string): string {
+  if (!value) return fallback
+  const date = new Date(value)
+  if (Number.isNaN(date.getTime())) return fallback
+  return date.toLocaleString()
+}
+
+export function DefaultStatusBadge({ mapping }: StatusBadgeSectionProps) {
+  const t = useT()
+  const variant = domainStatusMap[mapping.status]
+  const label = t(
+    `customer_accounts.domainMapping.status.${mapping.status}`,
+    mapping.status,
+  )
+  const lastChecked = formatTime(
+    mapping.lastDnsCheckAt,
+    t('customer_accounts.domainMapping.autoVerify.checking', 'Automatically checking every 5 minutes'),
+  )
+  const showAutoCheck = mapping.status === 'pending' || mapping.status === 'dns_failed'
+
+  return (
+    <div className="flex flex-wrap items-center gap-3">
+      <StatusBadge variant={variant} dot>
+        {label}
+      </StatusBadge>
+      {mapping.lastDnsCheckAt ? (
+        <span className="text-xs text-muted-foreground">
+          {t('customer_accounts.domainMapping.autoVerify.lastChecked', 'Last checked: {time}', {
+            time: lastChecked,
+          })}
+        </span>
+      ) : null}
+      {showAutoCheck ? (
+        <span className="text-xs text-muted-foreground">
+          {t('customer_accounts.domainMapping.autoVerify.nextCheck', 'Next check in ~{minutes} minutes', {
+            minutes: '5',
+          })}
+        </span>
+      ) : null}
+    </div>
+  )
+}
+
+export default DefaultStatusBadge

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/components/Stepper.tsx

@@ -0,0 +1,69 @@
+"use client"
+
+import * as React from 'react'
+import { Check } from 'lucide-react'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import type { DomainStatus } from '@open-mercato/core/modules/customer_accounts/data/entities'
+
+export type StepperProps = {
+  status: DomainStatus | null
+}
+
+function activeStep(status: DomainStatus | null): number {
+  if (!status) return 1
+  if (status === 'pending' || status === 'dns_failed') return 2
+  if (status === 'verified' || status === 'tls_failed') return 3
+  if (status === 'active') return 4
+  return 1
+}
+
+export function DefaultStepper({ status }: StepperProps) {
+  const t = useT()
+  const current = activeStep(status)
+  const steps: Array<{ idx: number; label: string }> = [
+    { idx: 1, label: t('customer_accounts.domainMapping.stepper.step1', 'Register Domain') },
+    { idx: 2, label: t('customer_accounts.domainMapping.stepper.step2', 'Configure DNS') },
+    { idx: 3, label: t('customer_accounts.domainMapping.stepper.step3', 'SSL Certificate') },
+    { idx: 4, label: t('customer_accounts.domainMapping.stepper.step4', 'Live') },
+  ]
+
+  return (
+    <ol className="flex flex-wrap items-center gap-3 text-sm">
+      {steps.map((step, index) => {
+        const isDone = step.idx < current
+        const isCurrent = step.idx === current
+        return (
+          <li key={step.idx} className="flex items-center gap-3">
+            <div className="flex items-center gap-2">
+              <span
+                className={cn(
+                  'flex h-7 w-7 items-center justify-center rounded-full border text-xs font-medium',
+                  isDone && 'border-status-success-icon bg-status-success-icon text-status-success-foreground',
+                  isCurrent && 'border-primary bg-primary/10 text-primary',
+                  !isDone && !isCurrent && 'border-border bg-background text-muted-foreground',
+                )}
+                aria-current={isCurrent ? 'step' : undefined}
+              >
+                {isDone ? <Check className="h-4 w-4" aria-hidden /> : step.idx}
+              </span>
+              <span
+                className={cn(
+                  'whitespace-nowrap',
+                  isCurrent ? 'font-medium text-foreground' : 'text-muted-foreground',
+                )}
+              >
+                {step.label}
+              </span>
+            </div>
+            {index < steps.length - 1 ? (
+              <span className="hidden h-px w-8 bg-border sm:block" aria-hidden />
+            ) : null}
+          </li>
+        )
+      })}
+    </ol>
+  )
+}
+
+export default DefaultStepper

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/components/domainStatusMap.ts

@@ -0,0 +1,10 @@
+import type { StatusMap } from '@open-mercato/ui/primitives/status-badge'
+import type { DomainStatus } from '@open-mercato/core/modules/customer_accounts/data/entities'
+
+export const domainStatusMap: StatusMap<DomainStatus> = {
+  pending: 'info',
+  verified: 'info',
+  active: 'success',
+  dns_failed: 'error',
+  tls_failed: 'warning',
+}

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/components/types.ts

@@ -0,0 +1,31 @@
+import type { DomainStatus } from '@open-mercato/core/modules/customer_accounts/data/entities'
+
+export type DomainMappingRow = {
+  id: string
+  hostname: string
+  organizationId: string
+  tenantId: string
+  provider: string
+  status: DomainStatus
+  verifiedAt: string | null
+  lastDnsCheckAt: string | null
+  dnsFailureReason: string | null
+  tlsFailureReason: string | null
+  tlsRetryCount: number
+  cnameTarget: string | null
+  aRecordTarget: string | null
+  createdAt: string
+  updatedAt: string | null
+}
+
+export type DomainConfig = {
+  cnameTarget: string | null
+  aRecordTarget: string | null
+}
+
+export type DomainListResponse = {
+  ok: boolean
+  domainMappings?: DomainMappingRow[]
+  config?: DomainConfig
+  error?: string
+}

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/page.meta.ts

@@ -0,0 +1,26 @@
+import React from 'react'
+
+const globeIcon = React.createElement(
+  'svg',
+  { width: 16, height: 16, viewBox: '0 0 24 24', fill: 'none', stroke: 'currentColor', strokeWidth: 2, strokeLinecap: 'round', strokeLinejoin: 'round' },
+  React.createElement('circle', { cx: 12, cy: 12, r: 10 }),
+  React.createElement('path', { d: 'M2 12h20' }),
+  React.createElement('path', { d: 'M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z' }),
+)
+
+export const metadata = {
+  requireAuth: true,
+  requireFeatures: ['customer_accounts.domain.manage'],
+  pageTitle: 'Custom Domain',
+  pageTitleKey: 'customer_accounts.domainMapping.title',
+  pageGroup: 'Module Configs',
+  pageGroupKey: 'settings.sections.moduleConfigs',
+  pageOrder: 60,
+  icon: globeIcon,
+  pageContext: 'settings' as const,
+  breadcrumb: [
+    { label: 'Custom Domain', labelKey: 'customer_accounts.domainMapping.title' },
+  ],
+}
+
+export default metadata

package/src/modules/customer_accounts/backend/customer_accounts/settings/domain/page.tsx

@@ -0,0 +1,411 @@
+"use client"
+
+import * as React from 'react'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { Globe } from 'lucide-react'
+import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import { FormHeader } from '@open-mercato/ui/backend/forms'
+import { EmptyState } from '@open-mercato/ui/backend/EmptyState'
+import { LoadingMessage, ErrorMessage } from '@open-mercato/ui/backend/detail'
+import { Button } from '@open-mercato/ui/primitives/button'
+import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { flash } from '@open-mercato/ui/backend/FlashMessages'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { useConfirmDialog } from '@open-mercato/ui/backend/confirm-dialog'
+import { useGuardedMutation } from '@open-mercato/ui/backend/injection/useGuardedMutation'
+import { useAppEvent } from '@open-mercato/ui/backend/injection/useAppEvent'
+import { OrgSwitcher, type OrgOption } from './components/OrgSwitcher'
+import { DomainPanel } from './components/DomainPanel'
+import { RegisterDialog } from './components/RegisterDialog'
+import type { DomainListResponse, DomainMappingRow, DomainConfig } from './components/types'
+
+const STATE_LOADING = 'loading'
+const STATE_LOADED = 'loaded'
+const STATE_ERROR = 'error'
+type LoadState = typeof STATE_LOADING | typeof STATE_LOADED | typeof STATE_ERROR
+
+type OrgSwitcherNode = {
+  id: string
+  name: string
+  depth: number
+  selectable: boolean
+  children: OrgSwitcherNode[]
+}
+
+type OrgSwitcherResponse = {
+  items?: OrgSwitcherNode[]
+  selectedId?: string | null
+}
+
+function flattenOrgNodes(nodes: OrgSwitcherNode[] | undefined, acc: OrgOption[] = [], depth = 0): OrgOption[] {
+  if (!nodes) return acc
+  for (const node of nodes) {
+    if (node.selectable) {
+      acc.push({ id: node.id, label: node.name, depth })
+    }
+    flattenOrgNodes(node.children, acc, depth + 1)
+  }
+  return acc
+}
+
+export default function CustomerDomainSettingsPage() {
+  const t = useT()
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  const [orgOptions, setOrgOptions] = React.useState<OrgOption[]>([])
+  const [defaultOrgId, setDefaultOrgId] = React.useState<string | null>(null)
+  const [orgsLoaded, setOrgsLoaded] = React.useState(false)
+
+  const urlOrgId = searchParams?.get('org') ?? null
+  const selectedOrgId = urlOrgId ?? defaultOrgId
+
+  const [mappings, setMappings] = React.useState<DomainMappingRow[]>([])
+  const [config, setConfig] = React.useState<DomainConfig>({ cnameTarget: null, aRecordTarget: null })
+  const [loadState, setLoadState] = React.useState<LoadState>(STATE_LOADING)
+  const [reloadToken, setReloadToken] = React.useState(0)
+  const [registerOpen, setRegisterOpen] = React.useState(false)
+  const [registerMode, setRegisterMode] = React.useState<'register' | 'change'>('register')
+  const [replaceTargetId, setReplaceTargetId] = React.useState<string | null>(null)
+  const [isMutating, setIsMutating] = React.useState(false)
+
+  const { confirm, ConfirmDialogElement } = useConfirmDialog()
+  const { runMutation } = useGuardedMutation<{ entityType: string; entityId?: string }>({
+    contextId: 'customer_accounts:domain-settings',
+  })
+
+  const runMutationWithContext = React.useCallback(
+    async <T,>(operation: () => Promise<T>, mutationPayload?: Record<string, unknown>): Promise<T> => {
+      return runMutation({
+        operation,
+        mutationPayload,
+        context: { entityType: 'customer_accounts:domain_mapping' },
+      })
+    },
+    [runMutation],
+  )
+
+  const refresh = React.useCallback(() => {
+    setReloadToken((token) => token + 1)
+  }, [])
+
+  React.useEffect(() => {
+    let cancelled = false
+    async function loadOrgs() {
+      try {
+        const call = await apiCall<OrgSwitcherResponse>('/api/directory/organization-switcher')
+        if (cancelled) return
+        if (!call.ok || !call.result) {
+          setOrgOptions([])
+          setDefaultOrgId(null)
+          return
+        }
+        const flat = flattenOrgNodes(call.result.items, [], 0)
+        setOrgOptions(flat)
+        const fallback = call.result.selectedId ?? (flat[0]?.id ?? null)
+        setDefaultOrgId(fallback)
+      } catch {
+        if (!cancelled) {
+          setOrgOptions([])
+          setDefaultOrgId(null)
+        }
+      } finally {
+        if (!cancelled) setOrgsLoaded(true)
+      }
+    }
+    loadOrgs()
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  React.useEffect(() => {
+    if (!orgsLoaded) return
+    if (!selectedOrgId) {
+      setMappings([])
+      setConfig({ cnameTarget: null, aRecordTarget: null })
+      setLoadState(STATE_LOADED)
+      return
+    }
+    let cancelled = false
+    async function load() {
+      setLoadState(STATE_LOADING)
+      try {
+        const call = await apiCall<DomainListResponse>(
+          `/api/customer_accounts/admin/domain-mappings?organizationId=${encodeURIComponent(selectedOrgId!)}`,
+        )
+        if (cancelled) return
+        if (!call.ok || !call.result?.ok) {
+          setLoadState(STATE_ERROR)
+          return
+        }
+        setMappings(Array.isArray(call.result.domainMappings) ? call.result.domainMappings : [])
+        setConfig(call.result.config ?? { cnameTarget: null, aRecordTarget: null })
+        setLoadState(STATE_LOADED)
+      } catch {
+        if (!cancelled) setLoadState(STATE_ERROR)
+      }
+    }
+    load()
+    return () => {
+      cancelled = true
+    }
+  }, [orgsLoaded, selectedOrgId, reloadToken])
+
+  useAppEvent('customer_accounts.domain_mapping.*', () => {
+    refresh()
+  }, [refresh])
+
+  const orderedMappings = React.useMemo(() => {
+    if (mappings.length === 0) return []
+    const sorted = [...mappings].sort((a, b) => {
+      const aActive = a.status === 'active' ? 0 : 1
+      const bActive = b.status === 'active' ? 0 : 1
+      if (aActive !== bActive) return aActive - bActive
+      return new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime()
+    })
+    return sorted
+  }, [mappings])
+
+  const primaryActiveId = React.useMemo(() => {
+    const active = orderedMappings.find((m) => m.status === 'active')
+    if (active) return active.id
+    return orderedMappings[0]?.id ?? null
+  }, [orderedMappings])
+
+  const handleOrgChange = React.useCallback(
+    (next: string) => {
+      const params = new URLSearchParams(searchParams?.toString() ?? '')
+      if (next) params.set('org', next)
+      else params.delete('org')
+      const qs = params.toString()
+      router.replace(qs ? `?${qs}` : '?', { scroll: false })
+    },
+    [router, searchParams],
+  )
+
+  const handleOpenRegister = React.useCallback(() => {
+    setRegisterMode('register')
+    setReplaceTargetId(null)
+    setRegisterOpen(true)
+  }, [])
+
+  const handleOpenChange = React.useCallback((mappingId: string) => {
+    setRegisterMode('change')
+    setReplaceTargetId(mappingId)
+    setRegisterOpen(true)
+  }, [])
+
+  const handleSubmitRegister = React.useCallback(
+    async (hostname: string) => {
+      if (!selectedOrgId) {
+        throw new Error(t('customer_accounts.domainMapping.error.load', 'Could not load custom-domain configuration'))
+      }
+      setIsMutating(true)
+      try {
+        await runMutationWithContext(async () => {
+          const body: Record<string, unknown> = {
+            hostname,
+            organizationId: selectedOrgId,
+          }
+          if (registerMode === 'change' && replaceTargetId) {
+            body.replacesDomainId = replaceTargetId
+          }
+          const call = await apiCall<{ ok: boolean; error?: string; domainMapping?: DomainMappingRow }>(
+            '/api/customer_accounts/admin/domain-mappings',
+            {
+              method: 'POST',
+              headers: { 'content-type': 'application/json' },
+              body: JSON.stringify(body),
+            },
+          )
+          if (!call.ok || !call.result?.ok) {
+            const message = call.result?.error
+              || t('customer_accounts.domainMapping.alreadyClaimed', 'This domain is not available. Please choose a different hostname.')
+            throw new Error(message)
+          }
+          flash(t('customer_accounts.domainMapping.registered', 'Domain registered successfully'), 'success')
+          setRegisterOpen(false)
+          refresh()
+        })
+      } finally {
+        setIsMutating(false)
+      }
+    },
+    [refresh, registerMode, replaceTargetId, runMutationWithContext, selectedOrgId, t],
+  )
+
+  const handleCheckNow = React.useCallback(
+    async (mapping: DomainMappingRow) => {
+      setIsMutating(true)
+      try {
+        await runMutationWithContext(async () => {
+          const call = await apiCall<{ ok: boolean; error?: string }>(
+            `/api/customer_accounts/admin/domain-mappings/${encodeURIComponent(mapping.id)}/verify`,
+            { method: 'POST' },
+          )
+          if (!call.ok || !call.result?.ok) {
+            const message = call.result?.error || t('customer_accounts.domainMapping.error.load', 'Could not load custom-domain configuration')
+            flash(message, 'error')
+            return
+          }
+          refresh()
+        })
+      } finally {
+        setIsMutating(false)
+      }
+    },
+    [refresh, runMutationWithContext, t],
+  )
+
+  const handleRetryTls = React.useCallback(
+    async (mapping: DomainMappingRow) => {
+      setIsMutating(true)
+      try {
+        await runMutationWithContext(async () => {
+          const call = await apiCall<{ ok: boolean; error?: string }>(
+            `/api/customer_accounts/admin/domain-mappings/${encodeURIComponent(mapping.id)}/health-check`,
+            { method: 'POST' },
+          )
+          if (!call.ok || !call.result?.ok) {
+            const message = call.result?.error || t('customer_accounts.domainMapping.error.load', 'Could not load custom-domain configuration')
+            flash(message, 'error')
+            return
+          }
+          refresh()
+        })
+      } finally {
+        setIsMutating(false)
+      }
+    },
+    [refresh, runMutationWithContext, t],
+  )
+
+  const handleRemove = React.useCallback(
+    async (mapping: DomainMappingRow) => {
+      const replacement = orderedMappings.find(
+        (m) => m.id !== mapping.id && m.status !== 'active',
+      )
+      const text = replacement
+        ? t('customer_accounts.domainMapping.removeConfirm.hasReplacement', 'This will also cancel the pending replacement domain ({hostname}).', { hostname: replacement.hostname })
+        : t('customer_accounts.domainMapping.removeConfirm', 'Are you sure? Customers using this domain will no longer be able to reach your portal.')
+      const confirmed = await confirm({
+        title: t('customer_accounts.domainMapping.removeConfirm.title', 'Remove custom domain?'),
+        text,
+        variant: 'destructive',
+        confirmText: t('customer_accounts.domainMapping.removeDomain', 'Remove Domain'),
+      })
+      if (!confirmed) return
+      setIsMutating(true)
+      try {
+        await runMutationWithContext(async () => {
+          const call = await apiCall<{ ok: boolean; error?: string }>(
+            `/api/customer_accounts/admin/domain-mappings?id=${encodeURIComponent(mapping.id)}`,
+            { method: 'DELETE' },
+          )
+          if (!call.ok || !call.result?.ok) {
+            const message = call.result?.error || t('customer_accounts.domainMapping.error.load', 'Could not load custom-domain configuration')
+            flash(message, 'error')
+            return
+          }
+          flash(t('customer_accounts.domainMapping.removed', 'Domain removed'), 'success')
+          refresh()
+        })
+      } finally {
+        setIsMutating(false)
+      }
+    },
+    [confirm, orderedMappings, refresh, runMutationWithContext, t],
+  )
+
+  const replaceTargetHostname = React.useMemo(() => {
+    if (registerMode !== 'change' || !replaceTargetId) return null
+    return orderedMappings.find((m) => m.id === replaceTargetId)?.hostname ?? null
+  }, [orderedMappings, registerMode, replaceTargetId])
+
+  return (
+    <Page>
+      <div className="px-3 py-3 md:px-6 md:py-4">
+        <FormHeader
+          mode="detail"
+          title={t('customer_accounts.domainMapping.title', 'Custom Domain')}
+          subtitle={t('customer_accounts.domainMapping.description', 'Map your own domain to the customer portal')}
+          backHref="/backend/customer_accounts/settings"
+          backLabel={t('customer_accounts.settings.title', 'Portal Settings')}
+        />
+      </div>
+
+      <PageBody className="space-y-6">
+        {orgOptions.length > 1 ? (
+          <div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border bg-card px-4 py-3">
+            <OrgSwitcher
+              options={orgOptions}
+              selectedId={selectedOrgId}
+              onChange={handleOrgChange}
+            />
+          </div>
+        ) : null}
+
+        {loadState === STATE_LOADING ? (
+          <LoadingMessage label={t('customer_accounts.domainMapping.loading', 'Loading domain configuration…')} />
+        ) : null}
+
+        {loadState === STATE_ERROR ? (
+          <ErrorMessage
+            label={t('customer_accounts.domainMapping.error.load', 'Could not load custom-domain configuration')}
+            action={
+              <Button type="button" variant="outline" size="sm" onClick={refresh}>
+                {t('customer_accounts.domainMapping.verifyNow', 'Check Now')}
+              </Button>
+            }
+          />
+        ) : null}
+
+        {loadState === STATE_LOADED && orderedMappings.length === 0 && selectedOrgId ? (
+          <EmptyState
+            icon={<Globe className="h-8 w-8" aria-hidden />}
+            title={t('customer_accounts.domainMapping.empty.title', 'No custom domain yet')}
+            description={t('customer_accounts.domainMapping.empty.description', 'Connect your own domain so customers can reach the portal at a branded URL.')}
+            action={{
+              label: t('customer_accounts.domainMapping.empty.cta', 'Register Domain'),
+              onClick: handleOpenRegister,
+              icon: <Globe className="h-4 w-4" aria-hidden />,
+            }}
+          />
+        ) : null}
+
+        {loadState === STATE_LOADED && orderedMappings.length > 0 ? (
+          <div className="space-y-4">
+            {orderedMappings.map((mapping) => {
+              const isReplacement = mapping.id !== primaryActiveId && mapping.status !== 'active'
+              return (
+                <DomainPanel
+                  key={mapping.id}
+                  mapping={mapping}
+                  isReplacement={isReplacement}
+                  cnameTarget={config.cnameTarget}
+                  aRecordTarget={config.aRecordTarget}
+                  busy={isMutating}
+                  onCheckNow={() => handleCheckNow(mapping)}
+                  onRetryTls={() => handleRetryTls(mapping)}
+                  onChangeDomain={() => handleOpenChange(mapping.id)}
+                  onRemove={() => handleRemove(mapping)}
+                />
+              )
+            })}
+          </div>
+        ) : null}
+      </PageBody>
+
+      <RegisterDialog
+        open={registerOpen}
+        onOpenChange={setRegisterOpen}
+        mode={registerMode}
+        currentHostname={replaceTargetHostname}
+        onSubmit={handleSubmitRegister}
+      />
+
+      {ConfirmDialogElement}
+    </Page>
+  )
+}

package/src/modules/customer_accounts/backend/customer_accounts/users/[id]/page.tsx

@@ -7,6 +7,7 @@ import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { FormHeader } from '@open-mercato/ui/backend/forms'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
@@ -112,14 +113,14 @@ function ResetPasswordDialog({
             <label className="text-sm font-medium" htmlFor="reset-password">
               {t('customer_accounts.admin.detail.resetPassword.fields.newPassword', 'New Password')}
             </label>
-            <Input
+            <PasswordInput
               id="reset-password"
-              type="password"
               required
               minLength={8}
               value={newPassword}
               onChange={(event) => setNewPassword(event.target.value)}
               placeholder={t('customer_accounts.admin.detail.resetPassword.fields.placeholder', 'Min. 8 characters')}
+              autoComplete="new-password"
             />
           </div>
           <div className="flex justify-end gap-2 pt-2">

package/src/modules/customer_accounts/backend/customer_accounts/users/page.tsx

@@ -10,6 +10,8 @@ import type { ColumnDef } from '@tanstack/react-table'
 import { RowActions } from '@open-mercato/ui/backend/RowActions'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -144,9 +146,8 @@ function CreateUserDialog({
             <label className="text-sm font-medium" htmlFor="create-email">
               {t('customer_accounts.admin.createUser.fields.email', 'Email')}
             </label>
-            <Input
+            <EmailInput
               id="create-email"
-              type="email"
               required
               value={email}
               onChange={(event) => setEmail(event.target.value)}
@@ -170,14 +171,14 @@ function CreateUserDialog({
             <label className="text-sm font-medium" htmlFor="create-password">
               {t('customer_accounts.admin.createUser.fields.password', 'Password')}
             </label>
-            <Input
+            <PasswordInput
               id="create-password"
-              type="password"
               required
               minLength={8}
               value={password}
               onChange={(event) => setPassword(event.target.value)}
               placeholder={t('customer_accounts.admin.createUser.fields.passwordPlaceholder', 'Min. 8 characters')}
+              autoComplete="new-password"
             />
           </div>
           {roleOptions.length > 0 && (