create-freakpunch 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,73 @@
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+import { useSession } from '@/core/auth/use-auth'
+import { accountService } from './account.service'
+import type { PasswordChange } from './types'
+
+/** Keys are scoped to the signed-in user so switching users never shows stale data. */
+export function useAccountKeys() {
+  const userId = useSession()?.user.id ?? 'anonymous'
+  const all = ['account', userId] as const
+  return {
+    all,
+    security: [...all, 'security'] as const,
+    sessions: [...all, 'sessions'] as const,
+    history: [...all, 'history'] as const,
+  }
+}
+
+export function useSecurityOverview() {
+  const keys = useAccountKeys()
+  return useQuery({ queryKey: keys.security, queryFn: () => accountService.security() })
+}
+
+export function useChangePassword() {
+  const qc = useQueryClient()
+  const keys = useAccountKeys()
+  return useMutation({
+    mutationFn: (input: PasswordChange) => accountService.changePassword(input),
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.security }),
+  })
+}
+
+export function useTwoFactorSetup() {
+  return useMutation({ mutationFn: () => accountService.startTwoFactorSetup() })
+}
+
+export function useConfirmTwoFactor() {
+  const qc = useQueryClient()
+  const keys = useAccountKeys()
+  return useMutation({
+    mutationFn: (code: string) => accountService.confirmTwoFactor(code),
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.security }),
+  })
+}
+
+export function useDisableTwoFactor() {
+  const qc = useQueryClient()
+  const keys = useAccountKeys()
+  return useMutation({
+    mutationFn: () => accountService.disableTwoFactor(),
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.security }),
+  })
+}
+
+export function useSessions() {
+  const keys = useAccountKeys()
+  return useQuery({ queryKey: keys.sessions, queryFn: () => accountService.sessions() })
+}
+
+export function useRevokeSession() {
+  const qc = useQueryClient()
+  const keys = useAccountKeys()
+  return useMutation({
+    mutationFn: (id: string | 'others') =>
+      id === 'others' ? accountService.revokeOtherSessions() : accountService.revokeSession(id),
+    onSuccess: () => qc.invalidateQueries({ queryKey: keys.sessions }),
+  })
+}
+
+export function useLoginHistory() {
+  const keys = useAccountKeys()
+  return useQuery({ queryKey: keys.history, queryFn: () => accountService.loginHistory() })
+}

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

@@ -0,0 +1,103 @@
+import { Fragment } from 'react'
+import { Controller, useForm } from 'react-hook-form'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+
+import { Switch } from '@/components/ui/switch'
+import { FormLayout } from '@/core/components/form-page'
+import { Page } from '@/core/components/page'
+import { ErrorState, LoadingState } from '@/core/components/states'
+import { useNotificationSettings, useUpdateNotificationSettings } from '@/core/notifications/hooks'
+import { visibleNotificationEvents, type NotificationGroup, type NotificationSettings } from '@/core/notifications/types'
+
+const channels = ['email', 'inApp'] as const
+const groups = [...new Set(visibleNotificationEvents.map((e) => e.group))] as NotificationGroup[]
+
+export default function NotificationsPage() {
+  const { t } = useTranslation('account')
+  const query = useNotificationSettings()
+
+  return (
+    <Page title={t('notifications.title')} description={t('notifications.description')}>
+      {query.isPending ? (
+        <LoadingState />
+      ) : query.error ? (
+        <ErrorState error={query.error} onRetry={() => query.refetch()} />
+      ) : (
+        <NotificationsForm settings={query.data} />
+      )}
+    </Page>
+  )
+}
+
+function NotificationsForm({ settings }: { settings: NotificationSettings }) {
+  const { t } = useTranslation('account')
+  const update = useUpdateNotificationSettings()
+  const { control, handleSubmit, formState, reset } = useForm<NotificationSettings>({ defaultValues: settings })
+
+  const onSubmit = handleSubmit(async (values) => {
+    const saved = await update.mutateAsync(values)
+    reset(saved)
+    toast.success(t('notifications.saved'))
+  })
+
+  return (
+    <FormLayout
+      onSubmit={onSubmit}
+      saveBar="dirty"
+      isDirty={formState.isDirty}
+      isSubmitting={formState.isSubmitting}
+      onCancel={() => reset()}
+    >
+      <div role="table" aria-label={t('notifications.title')} className="flex flex-col">
+        <div role="row" className="grid grid-cols-[1fr_4rem_4rem] items-center gap-2 bg-fill-1 px-4 py-2.5 sm:grid-cols-[1fr_5rem_5rem] md:px-6">
+          <span role="columnheader" className="label-caps">
+            {t('notifications.channels.event')}
+          </span>
+          {channels.map((c) => (
+            <span key={c} role="columnheader" className="label-caps text-center">
+              {t(`notifications.channels.${c}`)}
+            </span>
+          ))}
+        </div>
+        {groups.map((group) => (
+          <Fragment key={group}>
+            <div role="row" className="border-t px-4 pt-4 pb-1 md:px-6">
+              <span role="rowheader" className="label-caps">
+                {t(`notifications.groups.${group}`)}
+              </span>
+            </div>
+            {visibleNotificationEvents
+              .filter((e) => e.group === group)
+              .map(({ id }) => {
+                const label = t(`notifications.events.${id}.label`)
+                return (
+                  <div key={id} role="row" className="grid grid-cols-[1fr_4rem_4rem] items-center gap-2 px-4 py-3 sm:grid-cols-[1fr_5rem_5rem] md:px-6">
+                    <div role="cell" className="min-w-0">
+                      <p className="text-sm font-medium">{label}</p>
+                      <p className="text-xs text-muted-foreground">{t(`notifications.events.${id}.description`)}</p>
+                    </div>
+                    {channels.map((channel) => (
+                      <div key={channel} role="cell" className="flex justify-center">
+                        <Controller
+                          control={control}
+                          name={`${id}.${channel}`}
+                          render={({ field }) => (
+                            <Switch
+                              checked={field.value}
+                              onCheckedChange={field.onChange}
+                              aria-label={t('notifications.toggle', { channel: t(`notifications.channels.${channel}`), event: label })}
+                            />
+                          )}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                )
+              })}
+          </Fragment>
+        ))}
+      </div>
+    </FormLayout>
+  )
+}

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

@@ -0,0 +1,157 @@
+import { useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { Field, FieldContent, FieldLabel, FieldTitle } from '@/components/ui/field'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
+import { FormSection } from '@/core/components/form-page'
+import { Page } from '@/core/components/page'
+import { Segmented } from '@/core/components/segmented'
+import { currentLanguage, setLanguage } from '@/core/i18n/i18n'
+import { languageNames, languages, type Language } from '@/core/i18n/types'
+import { useFormat } from '@/core/i18n/use-format'
+import { createFormatters } from '@/core/lib/format'
+import {
+  browserTimeZone,
+  dateFormats,
+  preferencesStore,
+  sidebarDefaults,
+  timeZones,
+  usePreferences,
+  type DateFormat,
+} from '@/core/preferences/preferences-store'
+import { useTheme, type Theme } from '@/core/theme/theme-context'
+import { themeOptions } from '@/core/theme/theme-options'
+
+const SAMPLE = new Date(Date.UTC(2026, 11, 31, 9, 30))
+
+/** Settings that apply immediately: no save bar. */
+export default function PreferencesPage() {
+  const { t } = useTranslation(['account', 'common'])
+  const { theme, setTheme } = useTheme()
+  const prefs = usePreferences()
+  const fmt = useFormat()
+  const language = currentLanguage()
+
+  const zoneItems = useMemo(
+    () => [
+      { value: 'auto', label: t('preferences.region.auto', { zone: browserTimeZone() }) },
+      ...timeZones.map((z) => ({ value: z, label: z.replace(/_/g, ' ') })),
+    ],
+    [t],
+  )
+
+  const dateItems = dateFormats.map((f) => ({
+    value: f,
+    label:
+      f === 'auto'
+        ? t('preferences.region.dateAuto', {
+            example: createFormatters({ locale: fmt.locale, currency: 'USD', timeZone: 'UTC' }).date(SAMPLE),
+          })
+        : f,
+  }))
+
+  return (
+    <Page title={t('preferences.title')} description={t('preferences.description')}>
+      <div className="flex flex-col divide-y rounded-xl border bg-card shadow-(--shadow-card)">
+        <FormSection title={t('preferences.appearance.title')} description={t('preferences.appearance.description')}>
+          <RadioGroup
+            value={theme}
+            onValueChange={(v) => setTheme(v as Theme)}
+            className="grid grid-cols-1 gap-3 sm:grid-cols-3"
+            aria-label={t('common:theme.label')}
+          >
+            {themeOptions.map(({ value, icon: Icon }) => (
+              <FieldLabel key={value} htmlFor={`theme-${value}`} className="rounded-xl!">
+                <Field orientation="horizontal">
+                  <FieldContent>
+                    <FieldTitle>
+                      <Icon className="size-4 text-muted-foreground" />
+                      {t(`common:theme.${value}`)}
+                    </FieldTitle>
+                  </FieldContent>
+                  <RadioGroupItem value={value} id={`theme-${value}`} />
+                </Field>
+              </FieldLabel>
+            ))}
+          </RadioGroup>
+        </FormSection>
+
+        <FormSection title={t('preferences.language.title')} description={t('preferences.language.description')}>
+          <RadioGroup
+            value={language}
+            onValueChange={(v) => setLanguage(v as Language)}
+            className="grid grid-cols-1 gap-3 sm:grid-cols-2"
+            aria-label={t('common:language.label')}
+          >
+            {languages.map((lng) => (
+              <FieldLabel key={lng} htmlFor={`lang-${lng}`} className="rounded-xl!">
+                <Field orientation="horizontal">
+                  <FieldContent>
+                    <FieldTitle lang={lng}>
+                      <span className="tabular-nums text-[11px] text-muted-foreground uppercase">{lng}</span>
+                      {languageNames[lng]}
+                    </FieldTitle>
+                  </FieldContent>
+                  <RadioGroupItem value={lng} id={`lang-${lng}`} />
+                </Field>
+              </FieldLabel>
+            ))}
+          </RadioGroup>
+        </FormSection>
+
+        <FormSection title={t('preferences.region.title')} description={t('preferences.region.description')}>
+          <div className="grid gap-4 sm:grid-cols-2">
+            <Field>
+              <FieldLabel htmlFor="timeZone">{t('preferences.region.timeZone')}</FieldLabel>
+              <Select items={zoneItems} value={prefs.timeZone} onValueChange={(v) => v && preferencesStore.set({ timeZone: v })}>
+                <SelectTrigger id="timeZone" className="w-full">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {zoneItems.map((z) => (
+                    <SelectItem key={z.value} value={z.value}>
+                      {z.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+            <Field>
+              <FieldLabel htmlFor="dateFormat">{t('preferences.region.dateFormat')}</FieldLabel>
+              <Select
+                items={dateItems}
+                value={prefs.dateFormat}
+                onValueChange={(v) => v && preferencesStore.set({ dateFormat: v as DateFormat })}
+              >
+                <SelectTrigger id="dateFormat" className="w-full tabular-nums">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {dateItems.map((d) => (
+                    <SelectItem key={d.value} value={d.value} className="tabular-nums">
+                      {d.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </Field>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {t('preferences.region.example', { value: fmt.dateTime(SAMPLE) })}
+          </p>
+        </FormSection>
+
+        <FormSection title={t('preferences.sidebar.title')} description={t('preferences.sidebar.description')}>
+          <Segmented
+            label={t('preferences.sidebar.title')}
+            value={prefs.sidebarDefault}
+            onChange={(v) => preferencesStore.set({ sidebarDefault: v })}
+            options={sidebarDefaults.map((s) => ({ value: s, label: t(`preferences.sidebar.${s}`) }))}
+            className="w-fit"
+          />
+        </FormSection>
+      </div>
+    </Page>
+  )
+}

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

@@ -0,0 +1,242 @@
+import { Controller, useForm, useWatch } from 'react-hook-form'
+import { zodResolver } from '@hookform/resolvers/zod'
+import { Trans, useTranslation } from 'react-i18next'
+import { MailCheck } 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, FieldDescription, FieldLabel } from '@/components/ui/field'
+import { Input } from '@/components/ui/input'
+import { ApiError } from '@/core/api/http'
+import { useAuth } from '@/core/auth/use-auth'
+import { FormFieldError } from '@/core/components/form-error'
+import { FormLayout, FormSection } from '@/core/components/form-page'
+import { ImageUpload } from '@/core/components/image-upload'
+import { PhoneInput } from '@/core/components/phone-input'
+import { Page } from '@/core/components/page'
+import { UserAvatar } from '@/core/components/user-avatar'
+import { vmsg } from '@/core/i18n/keys'
+import { dialCode, isValidPhone, splitPhone, toE164 } from '@/core/lib/phone'
+import { useResolveEmailChange, useUpdateProfile } from '@/core/users/hooks'
+import type { User } from '@/core/users/types'
+import { userErrors } from '@/core/users/users.service'
+
+const name = z
+  .string()
+  .trim()
+  .min(1, vmsg('validation.required'))
+  .max(50, vmsg('validation.maxChars', { max: 50 }))
+
+const schema = z
+  .object({
+    avatarUrl: z.string().optional(),
+    firstName: name,
+    lastName: name,
+    jobTitle: z.string().trim().max(80, vmsg('validation.maxChars', { max: 80 })),
+    email: z.string().trim().min(1, vmsg('validation.required')).pipe(z.email(vmsg('validation.email'))),
+    phoneCountry: z.string(),
+    phoneNumber: z.string().trim(),
+  })
+  .superRefine((v, ctx) => {
+    if (v.phoneNumber && !isValidPhone(v.phoneCountry, v.phoneNumber)) {
+      ctx.addIssue({
+        code: 'custom',
+        path: ['phoneNumber'],
+        message: vmsg('account:profile.contact.phoneInvalid', { country: dialCode(v.phoneCountry) }),
+      })
+    }
+  })
+
+type Values = z.infer<typeof schema>
+
+function toValues(user: User): Values {
+  const phone = splitPhone(user.phone)
+  return {
+    avatarUrl: user.avatarUrl,
+    firstName: user.firstName,
+    lastName: user.lastName,
+    jobTitle: user.jobTitle ?? '',
+    email: user.email,
+    phoneCountry: phone.country,
+    phoneNumber: phone.number,
+  }
+}
+
+export default function ProfilePage() {
+  const { user } = useAuth()
+  const { t } = useTranslation(['account', 'common'])
+  if (!user) return null
+  return (
+    <Page title={t('profile.title')} description={t('profile.description')}>
+      <PendingEmail user={user} />
+      <ProfileForm key={user.id} user={user} />
+    </Page>
+  )
+}
+
+function ProfileForm({ user }: { user: User }) {
+  const { t } = useTranslation(['account', 'common'])
+  const update = useUpdateProfile()
+  const form = useForm<Values>({ resolver: zodResolver(schema), defaultValues: toValues(user) })
+  const { register, control, handleSubmit, formState, reset, setError } = form
+  const { errors } = formState
+
+  const onSubmit = handleSubmit(async (values) => {
+    try {
+      const updated = await update.mutateAsync({
+        id: user.id,
+        patch: {
+          avatarUrl: values.avatarUrl,
+          firstName: values.firstName,
+          lastName: values.lastName,
+          jobTitle: values.jobTitle || undefined,
+          email: values.email,
+          phone: values.phoneNumber ? toE164(values.phoneCountry, values.phoneNumber) : undefined,
+        },
+      })
+      reset(toValues(updated))
+      toast.success(t('profile.saved'))
+      if (updated.pendingEmail && updated.pendingEmail !== user.pendingEmail) {
+        toast.info(t('profile.pending.started', { email: updated.pendingEmail }))
+      }
+    } catch (e) {
+      if (e instanceof ApiError && e.message === userErrors.duplicateEmail) {
+        setError('email', { message: vmsg('account:profile.contact.emailTaken') })
+        return
+      }
+      toast.error(t('profile.saveFailed'), { description: e instanceof Error ? e.message : undefined })
+    }
+  })
+
+  const [firstName, lastName] = useWatch({ control, name: ['firstName', 'lastName'] })
+  const preview = { ...user, firstName, lastName }
+
+  return (
+    <FormLayout
+      onSubmit={onSubmit}
+      saveBar="dirty"
+      isDirty={formState.isDirty}
+      isSubmitting={formState.isSubmitting}
+      onCancel={() => reset()}
+    >
+      <FormSection title={t('profile.photo.title')} description={t('profile.photo.description')}>
+        <Controller
+          control={control}
+          name="avatarUrl"
+          render={({ field }) => (
+            <ImageUpload
+              value={field.value}
+              onChange={(v) => field.onChange(v)}
+              label={t('profile.photo.change')}
+              onError={(err) => toast.error(t(`profile.photo.${err}`))}
+              preview={(src) => <UserAvatar user={{ ...preview, avatarUrl: src }} className="size-16 rounded-xl text-base" />}
+            />
+          )}
+        />
+      </FormSection>
+
+      <FormSection title={t('profile.personal.title')} description={t('profile.personal.description')}>
+        <div className="grid gap-4 sm:grid-cols-2">
+          <Field data-invalid={!!errors.firstName}>
+            <FieldLabel htmlFor="firstName">{t('profile.personal.firstName')}</FieldLabel>
+            <Input id="firstName" autoComplete="given-name" aria-invalid={!!errors.firstName} {...register('firstName')} />
+            <FormFieldError error={errors.firstName} />
+          </Field>
+          <Field data-invalid={!!errors.lastName}>
+            <FieldLabel htmlFor="lastName">{t('profile.personal.lastName')}</FieldLabel>
+            <Input id="lastName" autoComplete="family-name" aria-invalid={!!errors.lastName} {...register('lastName')} />
+            <FormFieldError error={errors.lastName} />
+          </Field>
+        </div>
+        <Field data-invalid={!!errors.jobTitle}>
+          <FieldLabel htmlFor="jobTitle">{t('profile.personal.jobTitle')}</FieldLabel>
+          <Input
+            id="jobTitle"
+            autoComplete="organization-title"
+            placeholder={t('profile.personal.jobTitlePlaceholder')}
+            aria-invalid={!!errors.jobTitle}
+            {...register('jobTitle')}
+          />
+          <FormFieldError error={errors.jobTitle} />
+        </Field>
+      </FormSection>
+
+      <FormSection title={t('profile.contact.title')} description={t('profile.contact.description')}>
+        <Field data-invalid={!!errors.email}>
+          <FieldLabel htmlFor="email">{t('profile.contact.email')}</FieldLabel>
+          <Input id="email" type="email" autoComplete="email" aria-invalid={!!errors.email} {...register('email')} />
+          <FormFieldError error={errors.email} />
+        </Field>
+        <Field data-invalid={!!errors.phoneNumber}>
+          <FieldLabel htmlFor="phoneNumber">{t('profile.contact.phone')}</FieldLabel>
+          <Controller
+            control={control}
+            name="phoneCountry"
+            render={({ field }) => (
+              <PhoneInput
+                id="phoneNumber"
+                country={field.value}
+                onCountryChange={field.onChange}
+                countryLabel={t('profile.contact.countryCode')}
+                invalid={!!errors.phoneNumber}
+                inputProps={register('phoneNumber')}
+              />
+            )}
+          />
+          <FieldDescription>{t('profile.contact.phoneHint')}</FieldDescription>
+          <FormFieldError error={errors.phoneNumber} />
+        </Field>
+      </FormSection>
+
+      <FormSection title={t('profile.role.title')} description={t('profile.role.description')}>
+        <div>
+          <Badge variant="secondary" size="lg">
+            {t(`common:roles.${user.role as 'owner'}`)}
+          </Badge>
+        </div>
+      </FormSection>
+    </FormLayout>
+  )
+}
+
+/** "Verification pending" banner for a requested email change. */
+function PendingEmail({ user }: { user: User }) {
+  const { t } = useTranslation(['account', 'common'])
+  const resolve = useResolveEmailChange()
+  if (!user.pendingEmail) return null
+  const email = user.pendingEmail
+
+  async function run(accept: boolean) {
+    await resolve.mutateAsync({ id: user.id, accept })
+    toast.success(accept ? t('profile.pending.verified', { email }) : t('profile.pending.cancelled'))
+  }
+
+  return (
+    <div role="status" className="flex flex-col gap-3 rounded-xl border bg-card p-4 shadow-(--shadow-card) sm:flex-row sm:items-center">
+      <div className="flex min-w-0 flex-1 gap-3">
+        <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-fill-2 text-warning">
+          <MailCheck className="size-4" />
+        </span>
+        <div className="min-w-0">
+          <p className="text-sm font-medium">{t('profile.pending.title')}</p>
+          <p className="text-xs text-muted-foreground">
+            <Trans t={t} i18nKey="profile.pending.description" values={{ email }} components={{ b: <span className="font-medium text-foreground" /> }} />
+          </p>
+        </div>
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button variant="ghost" size="sm" disabled={resolve.isPending} onClick={() => void run(false)}>
+          {t('profile.pending.cancel')}
+        </Button>
+        <Button variant="outline" size="sm" onClick={() => toast.success(t('profile.pending.resent', { email }))}>
+          {t('profile.pending.resend')}
+        </Button>
+        <Button variant="outline" size="sm" disabled={resolve.isPending} onClick={() => void run(true)}>
+          {t('profile.pending.simulate')}
+        </Button>
+      </div>
+    </div>
+  )
+}