create-freakpunch 0.0.0-stage → 0.2.0

package/template/src/pages/settings/account/security-page.tsx

@@ -0,0 +1,364 @@
+import { useMemo, useState, type ReactNode } from 'react'
+import { useForm, useWatch } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { useTranslation } from 'react-i18next'
+import { Eye, EyeOff, Monitor, Smartphone } from 'lucide-react'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import { Field, FieldLabel } from '@/components/ui/field'
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from '@/components/ui/input-group'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Spinner } from '@/components/ui/spinner'
+import { Table, TableBody, TableCell, TableHeader, TableRow } from '@/components/ui/table'
+import { TableHeaderCell } from '@/core/components/data-table/table-header-cell'
+import { ApiError } from '@/core/api/http'
+import { useSecurityPolicy } from '@/core/company/hooks'
+import { checkPassword, type PasswordPolicy } from '@/core/company/password-policy'
+import { useConfirm } from '@/core/components/confirm-dialog'
+import { FormFieldError } from '@/core/components/form-error'
+import { FormSection } from '@/core/components/form-page'
+import { Page, Panel } from '@/core/components/page'
+import { ErrorState } from '@/core/components/states'
+import { StatusBadge } from '@/core/components/status-badge'
+import { vmsg } from '@/core/i18n/keys'
+import { useFormat } from '@/core/i18n/use-format'
+import { accountErrors } from './account.service'
+import { PasswordStrength } from './components/password-strength'
+import { TwoFactorDialog } from './components/two-factor-dialog'
+import {
+  useChangePassword,
+  useDisableTwoFactor,
+  useLoginHistory,
+  useRevokeSession,
+  useSecurityOverview,
+  useSessions,
+} from './hooks'
+
+export default function SecurityPage() {
+  const { t } = useTranslation('account')
+  return (
+    <Page title={t('security.title')} description={t('security.description')}>
+      <PasswordCard />
+      <TwoFactorCard />
+      <SessionsCard />
+      <HistoryCard />
+    </Page>
+  )
+}
+
+function createPasswordSchema(policy: PasswordPolicy) {
+  return z
+    .object({
+      current: z.string().min(1, vmsg('validation.required')),
+      next: z.string().min(1, vmsg('validation.required')),
+      confirm: z.string().min(1, vmsg('validation.required')),
+    })
+    .superRefine((v, ctx) => {
+      if (v.next && !checkPassword(policy, v.next).valid) {
+        ctx.addIssue({ code: 'custom', path: ['next'], message: vmsg('account:security.password.notMet') })
+      } else if (v.next && v.next === v.current) {
+        ctx.addIssue({ code: 'custom', path: ['next'], message: vmsg('account:security.password.sameAsCurrent') })
+      }
+      if (v.confirm && v.confirm !== v.next) {
+        ctx.addIssue({ code: 'custom', path: ['confirm'], message: vmsg('account:security.password.mismatch') })
+      }
+    })
+}
+
+type PasswordValues = { current: string; next: string; confirm: string }
+
+function PasswordCard() {
+  const { t } = useTranslation(['account', 'common'])
+  const fmt = useFormat()
+  const policy = useSecurityPolicy().password
+  const overview = useSecurityOverview()
+  const change = useChangePassword()
+  const schema = useMemo(() => createPasswordSchema(policy), [policy])
+  const form = useForm<PasswordValues>({ resolver: zodResolver(schema), defaultValues: { current: '', next: '', confirm: '' } })
+  const { register, handleSubmit, formState, reset, setError, control } = form
+  const next = useWatch({ control, name: 'next' })
+  const { errors } = formState
+
+  const onSubmit = handleSubmit(async (values) => {
+    try {
+      await change.mutateAsync({ current: values.current, next: values.next })
+      reset()
+      toast.success(t('security.password.updated'))
+    } catch (e) {
+      if (e instanceof ApiError && e.message === accountErrors.wrongPassword) {
+        setError('current', { message: vmsg('account:security.password.wrongCurrent') })
+        return
+      }
+      toast.error(e instanceof Error ? e.message : String(e))
+    }
+  })
+
+  return (
+    <form onSubmit={onSubmit} noValidate className="rounded-xl border bg-card shadow-(--shadow-card)">
+      <FormSection
+        title={t('security.password.title')}
+        description={
+          overview.data
+            ? t('security.password.description', { when: fmt.relative(overview.data.passwordChangedAt) })
+            : undefined
+        }
+      >
+        <Field data-invalid={!!errors.current}>
+          <FieldLabel htmlFor="current">{t('security.password.current')}</FieldLabel>
+          <PasswordInput id="current" autoComplete="current-password" invalid={!!errors.current} {...register('current')} />
+          <FormFieldError error={errors.current} />
+        </Field>
+        <Field data-invalid={!!errors.next}>
+          <FieldLabel htmlFor="next">{t('security.password.new')}</FieldLabel>
+          <PasswordInput id="next" autoComplete="new-password" invalid={!!errors.next} {...register('next')} />
+          <PasswordStrength password={next} policy={policy} />
+          <FormFieldError error={errors.next} />
+        </Field>
+        <Field data-invalid={!!errors.confirm}>
+          <FieldLabel htmlFor="confirm">{t('security.password.confirm')}</FieldLabel>
+          <PasswordInput id="confirm" autoComplete="new-password" invalid={!!errors.confirm} {...register('confirm')} />
+          <FormFieldError error={errors.confirm} />
+        </Field>
+      </FormSection>
+      <div className="flex justify-end border-t px-5 py-3 md:px-6">
+        <Button type="submit" disabled={formState.isSubmitting || !formState.isDirty}>
+          {formState.isSubmitting && <Spinner data-icon="inline-start" />}
+          {t('security.password.submit')}
+        </Button>
+      </div>
+    </form>
+  )
+}
+
+function PasswordInput({ invalid, ...props }: React.ComponentProps<'input'> & { invalid?: boolean }) {
+  const { t } = useTranslation('account')
+  const [visible, setVisible] = useState(false)
+  return (
+    <InputGroup>
+      <InputGroupInput type={visible ? 'text' : 'password'} aria-invalid={invalid} {...props} />
+      <InputGroupAddon align="inline-end">
+        <InputGroupButton
+          size="icon-xs"
+          aria-label={visible ? t('security.password.hide') : t('security.password.show')}
+          aria-pressed={visible}
+          onClick={() => setVisible((v) => !v)}
+        >
+          {visible ? <EyeOff /> : <Eye />}
+        </InputGroupButton>
+      </InputGroupAddon>
+    </InputGroup>
+  )
+}
+
+/** A titled row inside a card: text on the left, controls on the right. */
+function SettingRow({ title, description, children }: { title: ReactNode; description?: ReactNode; children: ReactNode }) {
+  return (
+    <div className="flex flex-col gap-4 p-5 sm:flex-row sm:items-center sm:justify-between md:p-6">
+      <div className="min-w-0">
+        <h2 className="flex items-center gap-2 text-sm font-medium">{title}</h2>
+        {description && <p className="mt-1 text-xs text-muted-foreground">{description}</p>}
+      </div>
+      <div className="flex shrink-0 items-center gap-2">{children}</div>
+    </div>
+  )
+}
+
+function TwoFactorCard() {
+  const { t } = useTranslation(['account', 'common'])
+  const fmt = useFormat()
+  const overview = useSecurityOverview()
+  const disable = useDisableTwoFactor()
+  const confirm = useConfirm()
+  const { requireTwoFactor } = useSecurityPolicy()
+  const [open, setOpen] = useState(false)
+  const enabled = overview.data?.twoFactorEnabled ?? false
+
+  async function onDisable() {
+    const ok = await confirm({
+      title: t('security.twoFactor.disableConfirmTitle'),
+      description: t('security.twoFactor.disableConfirmDescription'),
+      confirmLabel: t('security.twoFactor.disable'),
+      destructive: true,
+    })
+    if (!ok) return
+    await disable.mutateAsync()
+    toast.success(t('security.twoFactor.disabledToast'))
+  }
+
+  return (
+    <section className="rounded-xl border bg-card shadow-(--shadow-card)">
+      <SettingRow
+        title={
+          <>
+            {t('security.twoFactor.title')}
+            {overview.data && (
+              <StatusBadge tone={enabled ? 'success' : 'neutral'}>
+                {enabled ? t('security.twoFactor.enabled') : t('security.twoFactor.disabled')}
+              </StatusBadge>
+            )}
+          </>
+        }
+        description={
+          enabled && overview.data?.twoFactorEnabledAt
+            ? t('security.twoFactor.enabledSince', { when: fmt.date(overview.data.twoFactorEnabledAt) })
+            : requireTwoFactor
+              ? t('security.twoFactor.required')
+              : t('security.twoFactor.description')
+        }
+      >
+        {overview.isPending ? (
+          <Skeleton className="h-8 w-20" />
+        ) : enabled ? (
+          <Button
+            variant="destructive"
+            onClick={onDisable}
+            disabled={disable.isPending || requireTwoFactor}
+            title={requireTwoFactor ? t('security.twoFactor.cannotDisable') : undefined}
+          >
+            {t('security.twoFactor.disable')}
+          </Button>
+        ) : (
+          <Button onClick={() => setOpen(true)}>{t('security.twoFactor.enable')}</Button>
+        )}
+      </SettingRow>
+      <TwoFactorDialog open={open} onOpenChange={setOpen} />
+    </section>
+  )
+}
+
+function SessionsCard() {
+  const { t } = useTranslation(['account', 'common'])
+  const fmt = useFormat()
+  const sessions = useSessions()
+  const revoke = useRevokeSession()
+  const confirm = useConfirm()
+  const others = sessions.data?.filter((s) => !s.current) ?? []
+
+  async function revokeOthers() {
+    const ok = await confirm({
+      title: t('security.sessions.signOutOthersConfirmTitle'),
+      description: t('security.sessions.signOutOthersConfirmDescription'),
+      confirmLabel: t('security.sessions.signOutOthers'),
+      destructive: true,
+    })
+    if (!ok) return
+    await revoke.mutateAsync('others')
+    toast.success(t('security.sessions.signedOutOthers'))
+  }
+
+  return (
+    <Panel
+      label={t('security.sessions.title')}
+      actions={
+        others.length > 0 && (
+          <Button variant="ghost" size="sm" onClick={revokeOthers} disabled={revoke.isPending}>
+            {t('security.sessions.signOutOthers')}
+          </Button>
+        )
+      }
+    >
+      {sessions.error ? (
+        <ErrorState error={sessions.error} onRetry={() => sessions.refetch()} />
+      ) : (
+        <ul className="divide-y">
+          {sessions.isPending
+            ? Array.from({ length: 3 }, (_, i) => (
+                <li key={i} className="px-4 py-3">
+                  <Skeleton className="h-9 w-full" />
+                </li>
+              ))
+            : sessions.data.map((s) => {
+                const device = t('security.sessions.device', { browser: s.browser, os: s.os })
+                const Icon = s.kind === 'mobile' ? Smartphone : Monitor
+                return (
+                  <li key={s.id} className="flex items-center gap-3 px-4 py-3">
+                    <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-fill-2 text-muted-foreground">
+                      <Icon className="size-4" />
+                    </span>
+                    <div className="min-w-0 flex-1">
+                      <p className="flex flex-wrap items-center gap-2 text-sm font-medium">
+                        {device}
+                        {s.current && <Badge variant="secondary">{t('security.sessions.current')}</Badge>}
+                      </p>
+                      <p className="truncate text-xs text-muted-foreground">
+                        {s.location} · <span className="tabular-nums">{s.ip}</span> ·{' '}
+                        {t('security.sessions.lastActive', { when: fmt.relative(s.lastActiveAt) })}
+                      </p>
+                    </div>
+                    {!s.current && (
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        aria-label={t('security.sessions.revokeLabel', { device })}
+                        disabled={revoke.isPending}
+                        onClick={async () => {
+                          await revoke.mutateAsync(s.id)
+                          toast.success(t('security.sessions.revoked', { device }))
+                        }}
+                      >
+                        {t('security.sessions.revoke')}
+                      </Button>
+                    )}
+                  </li>
+                )
+              })}
+          {sessions.data && others.length === 0 && (
+            <li className="px-4 py-3 text-xs text-muted-foreground">{t('security.sessions.none')}</li>
+          )}
+        </ul>
+      )}
+    </Panel>
+  )
+}
+
+function HistoryCard() {
+  const { t } = useTranslation('account')
+  const fmt = useFormat()
+  const history = useLoginHistory()
+
+  return (
+    <Panel label={t('security.history.title')}>
+      {history.error ? (
+        <ErrorState error={history.error} onRetry={() => history.refetch()} />
+      ) : (
+        <Table>
+          <TableHeader>
+            <TableRow className="hover:bg-transparent">
+              <TableHeaderCell>{t('security.history.columns.when')}</TableHeaderCell>
+              <TableHeaderCell>{t('security.history.columns.device')}</TableHeaderCell>
+              <TableHeaderCell className="hidden sm:table-cell">{t('security.history.columns.location')}</TableHeaderCell>
+              <TableHeaderCell className="hidden md:table-cell">{t('security.history.columns.ip')}</TableHeaderCell>
+              <TableHeaderCell className="text-right">{t('security.history.columns.result')}</TableHeaderCell>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {history.isPending
+              ? Array.from({ length: 4 }, (_, i) => (
+                  <TableRow key={i} className="hover:bg-transparent">
+                    <TableCell colSpan={5} className="px-4">
+                      <Skeleton className="h-4 w-full" />
+                    </TableCell>
+                  </TableRow>
+                ))
+              : history.data.map((e) => (
+                  <TableRow key={e.id}>
+                    <TableCell className="h-11 pl-4 whitespace-nowrap tabular-nums">{fmt.dateTime(e.at)}</TableCell>
+                    <TableCell>{t('security.sessions.device', { browser: e.browser, os: e.os })}</TableCell>
+                    <TableCell className="hidden text-muted-foreground sm:table-cell">{e.location}</TableCell>
+                    <TableCell className="hidden tabular-nums text-xs text-muted-foreground md:table-cell">{e.ip}</TableCell>
+                    <TableCell className="pr-4 text-right">
+                      <StatusBadge tone={e.success ? 'success' : 'danger'}>
+                        {e.success ? t('security.history.success') : t('security.history.failed')}
+                      </StatusBadge>
+                    </TableCell>
+                  </TableRow>
+                ))}
+          </TableBody>
+        </Table>
+      )}
+    </Panel>
+  )
+}

package/template/src/pages/settings/account/types.ts

@@ -0,0 +1,37 @@
+export type SecurityOverview = {
+  passwordChangedAt: string
+  twoFactorEnabled: boolean
+  twoFactorEnabledAt?: string
+}
+
+export type TwoFactorSetup = {
+  /** Base32 secret shown for manual entry. */
+  secret: string
+  /** otpauth:// URL a real backend encodes into the QR code. */
+  otpauthUrl: string
+}
+
+export type DeviceKind = 'desktop' | 'mobile'
+
+export type ActiveSession = {
+  id: string
+  browser: string
+  os: string
+  kind: DeviceKind
+  location: string
+  ip: string
+  lastActiveAt: string
+  current: boolean
+}
+
+export type LoginEvent = {
+  id: string
+  at: string
+  browser: string
+  os: string
+  location: string
+  ip: string
+  success: boolean
+}
+
+export type PasswordChange = { current: string; next: string }

package/template/src/pages/settings/company/audit-log-page.tsx

@@ -0,0 +1,126 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+import { createColumnHelper } from '@tanstack/react-table'
+
+import { useAuditActors, useAuditLog } from '@/core/audit/hooks'
+import { auditActions, type AuditEntry } from '@/core/audit/audit.service'
+import { isRole } from '@/core/auth/roles'
+import { DataTable } from '@/core/components/data-table/data-table'
+import type { DataTableFeatures } from '@/core/components/data-table/features'
+import { ClearFiltersButton, FilterSelect } from '@/core/components/data-table/toolbar'
+import { useListUrlState } from '@/core/components/data-table/use-list-url-state'
+import { Page } from '@/core/components/page'
+import { EmptyState } from '@/core/components/states'
+import { useFormat } from '@/core/i18n/use-format'
+
+const FILTER_KEYS = ['actor', 'action', 'range'] as const
+const DEFAULT_SORT = { id: 'at', desc: true }
+const ranges = ['24h', '7d', '30d'] as const
+const helper = createColumnHelper<DataTableFeatures, AuditEntry>()
+
+export default function AuditLogPage() {
+  const { t } = useTranslation(['company', 'common'])
+  const fmt = useFormat()
+  const list = useListUrlState({ filterKeys: FILTER_KEYS, defaultSort: DEFAULT_SORT, defaultPageSize: 20 })
+  const query = useAuditLog(list.listParams)
+  const actors = useAuditActors()
+
+  const columns = useMemo(() => {
+    const roleLabel = (r: string | undefined) => (isRole(r) ? t(`common:roles.${r as 'owner'}`) : (r ?? ''))
+    return helper.columns([
+      helper.accessor('at', {
+        header: t('audit.columns.when'),
+        meta: { className: 'whitespace-nowrap tabular-nums text-muted-foreground w-44' },
+        cell: ({ getValue }) => <time dateTime={getValue()}>{fmt.dateTime(getValue())}</time>,
+      }),
+      helper.accessor((e) => e.actor.name, {
+        id: 'actorName',
+        header: t('audit.columns.user'),
+        cell: ({ row: { original: e } }) => (
+          <div className="min-w-0">
+            <div className="truncate font-medium">{e.actor.name}</div>
+            <div className="truncate text-xs text-muted-foreground">{e.actor.email}</div>
+          </div>
+        ),
+      }),
+      helper.accessor('action', {
+        header: t('audit.columns.action'),
+        enableSorting: false,
+        cell: ({ row: { original: e } }) => (
+          <div className="min-w-0">
+            <div>{t(`audit.actions.${e.action}`)}</div>
+            <div className="truncate text-xs text-muted-foreground">
+              {e.target}
+              {e.action === 'roleChanged' && e.detail && (
+                <> · {t('audit.roleChange', { from: roleLabel(e.detail.from), to: roleLabel(e.detail.to) })}</>
+              )}
+              {e.action === 'userInvited' && e.detail?.role && <> · {roleLabel(e.detail.role)}</>}
+            </div>
+          </div>
+        ),
+      }),
+      helper.accessor('ip', {
+        header: t('audit.columns.ip'),
+        enableSorting: false,
+        meta: { hideOnMobile: true, className: 'tabular-nums text-xs text-muted-foreground' },
+      }),
+    ])
+  }, [t, fmt])
+
+  const actorOptions = (actors.data ?? []).map((a) => ({ value: a.id, label: a.name }))
+  const actionOptions = auditActions.map((a) => ({ value: a, label: t(`audit.actions.${a}`) }))
+  const rangeOptions = ranges.map((r) => ({ value: r, label: t(`audit.filters.last${r}`) }))
+
+  return (
+    <Page title={t('audit.title')} description={t('audit.description')}>
+      <DataTable
+        columns={columns}
+        data={query.data?.items}
+        total={query.data?.total ?? 0}
+        getRowId={(e) => e.id}
+        pagination={list.pagination}
+        onPaginationChange={list.onPaginationChange}
+        sorting={list.sorting}
+        onSortingChange={list.onSortingChange}
+        isLoading={query.isPending}
+        isFetching={query.isFetching}
+        error={query.error}
+        onRetry={() => query.refetch()}
+        noun={t('audit.noun')}
+        toolbar={
+          <>
+            <FilterSelect
+              label={t('audit.filters.user')}
+              allLabel={t('audit.filters.allUsers')}
+              value={list.filters.actor}
+              options={actorOptions}
+              onChange={(v) => list.setFilter('actor', v)}
+            />
+            <FilterSelect
+              label={t('audit.filters.action')}
+              allLabel={t('audit.filters.allActions')}
+              value={list.filters.action}
+              options={actionOptions}
+              onChange={(v) => list.setFilter('action', v)}
+            />
+            <FilterSelect
+              label={t('audit.filters.date')}
+              allLabel={t('audit.filters.allTime')}
+              value={list.filters.range}
+              options={rangeOptions}
+              onChange={(v) => list.setFilter('range', v)}
+            />
+            {list.hasActiveFilters && <ClearFiltersButton onClick={list.clearAll} />}
+          </>
+        }
+        empty={
+          <EmptyState
+            title={t('audit.emptyTitle')}
+            description={t('audit.emptyDescription')}
+            action={list.hasActiveFilters ? <ClearFiltersButton onClick={list.clearAll} /> : undefined}
+          />
+        }
+      />
+    </Page>
+  )
+}