@meith/web 0.31.0 → 0.33.0

package/src/components/admin/admin-forms.tsx

@@ -2,7 +2,12 @@
 
 import { useActionState } from 'react'
 
-import { adminSignInAction, adminSignOutAction } from '@/server/admin-actions'
+import {
+  adminAbandonSecondFactorAction,
+  adminSignInAction,
+  adminSignOutAction,
+  adminVerifySecondFactorAction,
+} from '@/server/admin-actions'
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
 import { FormError, PendingButton } from '../auth/form-controls'
@@ -51,14 +56,6 @@ export function AdminSignInForm({
         />
       </label>
 
-      <OtpField
-        label={fromCopy(copy, 'adminPanel.twoFactorCode')}
-        name="code"
-        required={false}
-        hint={fromCopy(copy, 'adminPanel.twoFactorCodeHint')}
-        recovery={otpRecoveryFromCopy(copy)}
-      />
-
       <PendingButton
         showWorking
         className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
@@ -73,6 +70,57 @@ export function AdminSignInForm({
   )
 }
 
+export function AdminSecondFactorForm({
+  recoveryCodesLeft,
+  copy,
+}: {
+  recoveryCodesLeft: number
+  copy: Copy
+}) {
+  const [state, action] = useActionState(adminVerifySecondFactorAction, EMPTY_STATE)
+
+  return (
+    <div className="flex w-full max-w-sm flex-col gap-4 rounded-lg border border-border bg-card p-6">
+      <h1 className="text-xl font-semibold tracking-tight">
+        {fromCopy(copy, 'adminPanel.twoFactor.title')}
+      </h1>
+
+      <p className="text-sm text-muted-foreground">{fromCopy(copy, 'adminPanel.twoFactor.lede')}</p>
+
+      <form action={action} className="flex flex-col gap-4" noValidate>
+        <FormError message={state.error} />
+
+        <OtpField
+          label={fromCopy(copy, 'adminPanel.twoFactorCode')}
+          name="code"
+          hint={
+            recoveryCodesLeft > 0
+              ? fromCopy(copy, 'adminPanel.twoFactor.recoveryHint')
+              : fromCopy(copy, 'adminPanel.twoFactor.recoveryHintExhausted')
+          }
+          recovery={otpRecoveryFromCopy(copy)}
+        />
+
+        <PendingButton
+          showWorking
+          className="inline-flex h-10 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {fromCopy(copy, 'adminPanel.twoFactor.submit')}
+        </PendingButton>
+      </form>
+
+      <form action={adminAbandonSecondFactorAction}>
+        <PendingButton
+          showWorking
+          className="text-sm text-muted-foreground hover:text-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          {fromCopy(copy, 'adminPanel.twoFactor.cancel')}
+        </PendingButton>
+      </form>
+    </div>
+  )
+}
+
 export function AdminSignOutForm({ copy }: { copy: Copy }) {
   return (
     <form action={adminSignOutAction}>

package/src/components/admin/api-token-forms.tsx

@@ -6,6 +6,7 @@ import { issueApiTokenAction, revokeApiTokenAction } from '@/server/api-token-ac
 import { EMPTY_STATE } from '@/server/auth-form-state'
 
 import { FormError, SubmitButton } from '../auth/form-controls'
+import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 
 export function IssueTokenForm({ scopes, copy }: { scopes: readonly string[]; copy: Copy }) {
@@ -78,12 +79,15 @@ export function RevokeTokenForm({ tokenId, copy }: { tokenId: number; copy: Copy
   const [state, action] = useActionState(revokeApiTokenAction, EMPTY_STATE)
 
   return (
-    <form action={action}>
-      <input type="hidden" name="tokenId" value={tokenId} />
-      <SubmitButton>{fromCopy(copy, 'adminPanel.token.revoke')}</SubmitButton>
-      {state.error !== undefined && (
-        <span className="ml-2 text-xs text-destructive">{state.error}</span>
-      )}
-    </form>
+    <>
+      <form action={action}>
+        <input type="hidden" name="tokenId" value={tokenId} />
+        <SubmitButton>{fromCopy(copy, 'adminPanel.token.revoke')}</SubmitButton>
+        {state.error !== undefined && (
+          <span className="ml-2 text-xs text-destructive">{state.error}</span>
+        )}
+      </form>
+      <ConfirmDialog confirm={state.confirm} action={action} />
+    </>
   )
 }

package/src/components/admin/ban-filter-forms.tsx

@@ -6,6 +6,7 @@ import { EMPTY_STATE } from '@/server/auth-form-state'
 import { addBanFilterAction, removeBanFilterAction } from '@/server/ban-filter-admin-actions'
 
 import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
+import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, formatFromCopy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 
@@ -89,16 +90,19 @@ export function RemoveBanFilterForm({
   const [state, action] = useActionState(removeBanFilterAction, EMPTY_STATE)
 
   return (
-    <form action={action} className="flex flex-col items-end gap-1">
-      <FormError message={state.error} />
-      <input type="hidden" name="id" value={id} />
-      <PendingButton
-        showWorking
-        className="text-xs text-destructive hover:underline"
-        aria-label={formatFromCopy(copy, 'adminBanFilter.removeFilter', { pattern })}
-      >
-        {fromCopy(copy, 'admin.remove')}
-      </PendingButton>
-    </form>
+    <div className="flex flex-col items-end gap-1">
+      <form action={action} className="flex flex-col items-end gap-1">
+        <FormError message={state.error} />
+        <input type="hidden" name="id" value={id} />
+        <PendingButton
+          showWorking
+          className="text-xs text-destructive hover:underline"
+          aria-label={formatFromCopy(copy, 'adminBanFilter.removeFilter', { pattern })}
+        >
+          {fromCopy(copy, 'admin.remove')}
+        </PendingButton>
+      </form>
+      <ConfirmDialog confirm={state.confirm} action={action} />
+    </div>
   )
 }

package/src/components/admin/content-forms.tsx

@@ -25,6 +25,7 @@ import {
 } from '@/server/content-admin-actions'
 
 import { FormError, PendingButton, SubmitButton } from '../auth/form-controls'
+import { ConfirmDialog } from '../shell/confirm-dialog'
 import { type Copy, fromCopy } from '../shell/copy'
 import { INPUT, Saved } from './form-bits'
 
@@ -91,6 +92,8 @@ export function WordFilterRowForm({ filter, copy }: { filter: WordFilterValues;
           {fromCopy(copy, 'adminContent.filter.removeThis')}
         </PendingButton>
       </form>
+
+      <ConfirmDialog confirm={removeState.confirm} action={removeAction} />
     </div>
   )
 }
@@ -140,13 +143,16 @@ export function DeletePrefixForm({ prefix, copy }: { prefix: PrefixValues; copy:
   const [state, action] = useActionState(deletePrefixAction, EMPTY_STATE)
 
   return (
-    <form action={action} className="flex items-center gap-2">
-      <FormError message={state.error} />
-      <input type="hidden" name="id" value={prefix.id} />
-      <PendingButton showWorking className="text-xs text-muted-foreground hover:underline">
-        {fromCopy(copy, 'admin.remove')}
-      </PendingButton>
-    </form>
+    <>
+      <form action={action} className="flex items-center gap-2">
+        <FormError message={state.error} />
+        <input type="hidden" name="id" value={prefix.id} />
+        <PendingButton showWorking className="text-xs text-muted-foreground hover:underline">
+          {fromCopy(copy, 'admin.remove')}
+        </PendingButton>
+      </form>
+      <ConfirmDialog confirm={state.confirm} action={action} />
+    </>
   )
 }
 
@@ -256,6 +262,8 @@ export function SmileyRowForm({ smiley, copy }: { smiley: SmileyValues; copy: Co
           {fromCopy(copy, 'admin.remove')}
         </PendingButton>
       </form>
+
+      <ConfirmDialog confirm={removeState.confirm} action={removeAction} />
     </div>
   )
 }
@@ -366,6 +374,8 @@ export function DirectiveRowForm({ directive, copy }: { directive: DirectiveValu
           {fromCopy(copy, 'admin.remove')}
         </PendingButton>
       </form>
+
+      <ConfirmDialog confirm={removeState.confirm} action={removeAction} />
     </div>
   )
 }
@@ -419,13 +429,16 @@ export function DeleteAttachmentForm({ attachmentId, copy }: { attachmentId: num
   const [state, action] = useActionState(deleteAttachmentAction, EMPTY_STATE)
 
   return (
-    <form action={action} className="shrink-0">
-      <FormError message={state.error} />
-      <input type="hidden" name="id" value={attachmentId} />
-      <PendingButton showWorking className="text-xs text-destructive hover:underline">
-        {fromCopy(copy, 'adminContent.attachment.delete')}
-      </PendingButton>
-    </form>
+    <div className="shrink-0">
+      <form action={action}>
+        <FormError message={state.error} />
+        <input type="hidden" name="id" value={attachmentId} />
+        <PendingButton showWorking className="text-xs text-destructive hover:underline">
+          {fromCopy(copy, 'adminContent.attachment.delete')}
+        </PendingButton>
+      </form>
+      <ConfirmDialog confirm={state.confirm} action={action} />
+    </div>
   )
 }
 
@@ -572,6 +585,8 @@ export function AnnouncementRowForm({
           {fromCopy(copy, 'admin.remove')}
         </PendingButton>
       </form>
+
+      <ConfirmDialog confirm={removeState.confirm} action={removeAction} />
     </div>
   )
 }
@@ -674,6 +689,8 @@ export function CaptchaQuestionRowForm({
           {fromCopy(copy, 'admin.remove')}
         </PendingButton>
       </form>
+
+      <ConfirmDialog confirm={removeState.confirm} action={removeAction} />
     </div>
   )
 }