@actuate-media/cms-admin 0.27.0 → 0.29.0

package/src/__tests__/views/security-settings.render.test.tsx

@@ -0,0 +1,212 @@
+// @vitest-environment happy-dom
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+
+// The Security tab reads `/security` (computed posture + summaries + editable
+// policy), saves via PUT `/security`, and revokes sessions via POST.
+let securityData: any
+
+const cmsApi = vi.fn(async (endpoint: string, options?: { method?: string; body?: unknown }) => {
+  const method = options?.method ?? 'GET'
+  if (endpoint === '/security' && method === 'GET') return { data: securityData, status: 200 }
+  if (endpoint === '/security' && method === 'PUT') {
+    const body = JSON.parse(String(options?.body ?? '{}'))
+    securityData = {
+      ...securityData,
+      settings: {
+        mfa: { required: body.mfa.required, gracePeriodDays: body.mfa.gracePeriodDays },
+        session: { maxConcurrentSessions: body.session.maxConcurrentSessions },
+      },
+    }
+    return { data: securityData, status: 200 }
+  }
+  if (endpoint === '/security/sessions/revoke-all' && method === 'POST')
+    return { data: { revoked: 2 }, status: 200 }
+  return { data: {}, status: 200 }
+})
+
+vi.mock('../../lib/api.js', () => ({ cmsApi: (e: string, o?: unknown) => cmsApi(e, o as any) }))
+
+const { SecurityTab } = await import('../../views/settings/SecurityTab.js')
+
+function baseData(overrides: Record<string, unknown> = {}) {
+  return {
+    settings: {
+      mfa: { required: false, gracePeriodDays: 7 },
+      session: { maxConcurrentSessions: 5 },
+    },
+    status: {
+      status: 'needs_attention',
+      score: 88,
+      label: 'Needs attention',
+      description: 'Some recommended controls are missing.',
+      checks: [
+        { key: 'mfa', label: 'MFA coverage', status: 'warning', value: '1 of 2 admins' },
+        { key: 'csrf', label: 'CSRF protection', status: 'pass', value: 'Enabled' },
+      ],
+      warnings: [
+        {
+          id: 'mfa-not-required',
+          severity: 'warning',
+          category: 'auth',
+          title: 'MFA is not required in production',
+          description: 'Requiring MFA reduces account-takeover risk.',
+        },
+      ],
+      lastCheckedAt: '2026-06-01T00:00:00.000Z',
+    },
+    users: {
+      totalUsers: 3,
+      totalAdmins: 2,
+      withMfa: 1,
+      withoutMfa: 2,
+      adminsWithoutMfa: 1,
+      inactive: 0,
+    },
+    apiKeys: { active: 1, withoutExpiration: 0, broadScope: 0, staleUnused90d: 0 },
+    secrets: {
+      cmsSecret: 'pass',
+      encryptionKey: 'pass',
+      rateLimitBackend: 'distributed',
+      apiKeysHashed: true,
+      webhookSecretsEncrypted: true,
+    },
+    ipAllowlist: {
+      enabled: false,
+      source: 'none',
+      ranges: [],
+      currentIp: '1.2.3.4',
+      currentIpAllowed: null,
+    },
+    failedLogins24h: 0,
+    activeSessions: 2,
+    csrfEnabled: true,
+    uploadValidation: true,
+    auditEnabled: true,
+    sessionMaxAgeHours: 168,
+    viewerHasMfa: true,
+    environment: 'production',
+    sources: {
+      ipAllowlist: { source: 'config', editable: false },
+      csrf: { source: 'computed', editable: false },
+      rateLimiting: { source: 'environment', editable: false },
+      uploadValidation: { source: 'computed', editable: false },
+      cmsSecret: { source: 'environment', editable: false },
+      encryptionKey: { source: 'environment', editable: false },
+      audit: { source: 'computed', editable: false },
+    },
+    ...overrides,
+  }
+}
+
+beforeEach(() => {
+  cmsApi.mockClear()
+  securityData = baseData()
+})
+
+describe('SecurityTab', () => {
+  it('renders the status card and all security sections with a disabled save bar', async () => {
+    render(<SecurityTab role="ADMIN" />)
+
+    await screen.findByText('Security Status')
+    expect(screen.getByText('Authentication & MFA')).toBeTruthy()
+    expect(screen.getByText('Session Policy')).toBeTruthy()
+    expect(screen.getByText('Access & Request Protection')).toBeTruthy()
+    expect(screen.getByText('Secrets, Encryption & Audit')).toBeTruthy()
+    // Status badge + warning surfaced.
+    expect(screen.getByText('Needs attention')).toBeTruthy()
+    expect(screen.getByText('MFA is not required in production')).toBeTruthy()
+    expect(
+      (screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement).disabled,
+    ).toBe(true)
+  })
+
+  it('enables Save when concurrent-session cap changes and persists via PUT /security', async () => {
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    const select = screen.getByLabelText(/Maximum concurrent sessions/) as HTMLSelectElement
+    fireEvent.change(select, { target: { value: '3' } })
+
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/security',
+        expect.objectContaining({
+          method: 'PUT',
+          body: expect.stringContaining('"maxConcurrentSessions":3'),
+        }),
+      ),
+    )
+  })
+
+  it('blocks enabling Require MFA (lockout-safe) when the acting admin has no MFA', async () => {
+    securityData = baseData({ viewerHasMfa: false })
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    const toggle = screen.getByRole('switch', {
+      name: 'Require MFA for admin users',
+    }) as HTMLButtonElement
+    // Toggle is disabled until the admin sets up their own MFA.
+    expect(toggle.disabled).toBe(true)
+    expect(screen.getByText(/Set up MFA on your own account/i)).toBeTruthy()
+  })
+
+  it('confirms before requiring MFA and then persists it (admin has MFA)', async () => {
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    fireEvent.click(screen.getByRole('switch', { name: 'Require MFA for admin users' }))
+    // Confirmation dialog appears; nothing saved yet.
+    const confirm = await screen.findByRole('button', { name: 'Require MFA' })
+    fireEvent.click(confirm)
+
+    const save = screen.getByRole('button', { name: 'Save Changes' }) as HTMLButtonElement
+    expect(save.disabled).toBe(false)
+    fireEvent.click(save)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/security',
+        expect.objectContaining({
+          method: 'PUT',
+          body: expect.stringContaining('"required":true'),
+        }),
+      ),
+    )
+  })
+
+  it('revokes other sessions through a confirmation flow', async () => {
+    render(<SecurityTab role="ADMIN" />)
+    await screen.findByText('Security Status')
+
+    fireEvent.click(screen.getByRole('button', { name: 'Revoke other sessions' }))
+    const confirm = await screen.findByRole('button', { name: 'Revoke sessions' })
+    fireEvent.click(confirm)
+
+    await waitFor(() =>
+      expect(cmsApi).toHaveBeenCalledWith(
+        '/security/sessions/revoke-all',
+        expect.objectContaining({ method: 'POST' }),
+      ),
+    )
+    await screen.findByText('Other sessions revoked.')
+  })
+
+  it('is read-only for non-admin roles', async () => {
+    render(<SecurityTab role="EDITOR" />)
+    await screen.findByText('Security Status')
+
+    expect(screen.getByText(/read-only access/i)).toBeTruthy()
+    const toggle = screen.getByRole('switch', {
+      name: 'Require MFA for admin users',
+    }) as HTMLButtonElement
+    expect(toggle.disabled).toBe(true)
+    const select = screen.getByLabelText(/Maximum concurrent sessions/) as HTMLSelectElement
+    expect(select.disabled).toBe(true)
+  })
+})

package/src/components/Breadcrumbs.tsx

@@ -14,6 +14,7 @@ const LABEL_MAP: Record<string, string> = {
   users: 'Users',
   'script-tags': 'Script Tags',
   settings: 'Settings',
+  profile: 'Your Profile',
   collections: 'Collections',
   submissions: 'Submissions',
   new: 'New',

package/src/views/Login.tsx

@@ -25,6 +25,24 @@ export interface LoginProps {
     email: string,
     password: string,
     captchaToken?: string,
+  ) => Promise<{
+    success: boolean
+    error?: string
+    /** Set when the account has TOTP enabled — the password step succeeded but
+     * a second factor is still required. */
+    requiresTOTP?: boolean
+    /** Short-lived token tying the second-factor step to this password step. */
+    mfaPendingToken?: string
+  }>
+  /**
+   * Completes the second-factor step. Receives the `mfaPendingToken` from
+   * `onLogin` plus the user's authenticator code (or a one-time backup code).
+   * Required for accounts with MFA enabled; when omitted, the challenge screen
+   * explains that MFA sign-in isn't wired up.
+   */
+  onVerifyTotp?: (
+    mfaPendingToken: string,
+    code: string,
   ) => Promise<{ success: boolean; error?: string }>
   onNavigate?: (path: string) => void
   oauthProviders?: string[]
@@ -189,6 +207,7 @@ async function getCaptchaToken(provider: string, siteKey: string, action: string
 
 export function Login({
   onLogin,
+  onVerifyTotp,
   onNavigate,
   oauthProviders,
   captchaConfig,
@@ -200,6 +219,14 @@ export function Login({
   const [submitting, setSubmitting] = useState(false)
   const [error, setError] = useState('')
 
+  // Second-factor challenge state. When `mfaPendingToken` is set we swap the
+  // email/password form for the TOTP code entry.
+  const [mfaPendingToken, setMfaPendingToken] = useState<string | null>(null)
+  const [totpCode, setTotpCode] = useState('')
+  const [useBackupCode, setUseBackupCode] = useState(false)
+  const [totpError, setTotpError] = useState('')
+  const [verifying, setVerifying] = useState(false)
+
   useCaptchaScript(captchaConfig?.provider, captchaConfig?.siteKey)
 
   const canSubmit = email.trim() && password && !submitting
@@ -224,6 +251,13 @@ export function Login({
 
       const result = await onLogin(email.trim(), password, captchaToken)
 
+      if (result.requiresTOTP && result.mfaPendingToken) {
+        // Password verified — advance to the second-factor step.
+        setMfaPendingToken(result.mfaPendingToken)
+        setPassword('')
+        return
+      }
+
       if (!result.success) {
         setError(result.error ?? 'Invalid email or password')
       }
@@ -234,6 +268,39 @@ export function Login({
     }
   }
 
+  const handleVerifyTotp = async (e: FormEvent) => {
+    e.preventDefault()
+    const code = totpCode.trim()
+    if (!code || !mfaPendingToken) return
+
+    setTotpError('')
+
+    if (!onVerifyTotp) {
+      setTotpError('Two-factor sign-in is not available. Contact your administrator.')
+      return
+    }
+
+    setVerifying(true)
+    try {
+      const result = await onVerifyTotp(mfaPendingToken, code)
+      if (!result.success) {
+        setTotpError(result.error ?? 'That code was not accepted. Try again.')
+      }
+    } catch (err) {
+      setTotpError(err instanceof Error ? err.message : 'An unexpected error occurred')
+    } finally {
+      setVerifying(false)
+    }
+  }
+
+  const resetToPasswordStep = () => {
+    setMfaPendingToken(null)
+    setTotpCode('')
+    setUseBackupCode(false)
+    setTotpError('')
+    setError('')
+  }
+
   const handleOAuthClick = (provider: string) => {
     window.location.href = `/api/cms/auth/oauth/${provider}`
   }
@@ -269,116 +336,202 @@ export function Login({
           <p className="mt-2 text-gray-600">{brandTagline}</p>
         </div>
 
-        <form
-          onSubmit={handleSubmit}
-          className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm"
-        >
-          {error && (
-            <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
-              <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
-              <p className="text-sm text-red-800">{error}</p>
+        {mfaPendingToken ? (
+          <form
+            onSubmit={handleVerifyTotp}
+            className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm"
+          >
+            <div>
+              <h2 className="text-lg font-semibold text-gray-900">Two-factor authentication</h2>
+              <p className="mt-1 text-sm text-gray-600">
+                {useBackupCode
+                  ? 'Enter one of your one-time backup codes.'
+                  : 'Enter the 6-digit code from your authenticator app.'}
+              </p>
             </div>
-          )}
-
-          <div>
-            <label htmlFor="login-email" className="mb-1.5 block text-sm font-medium text-gray-700">
-              Email Address
-            </label>
-            <input
-              id="login-email"
-              type="email"
-              value={email}
-              onChange={(e) => setEmail(e.target.value)}
-              placeholder="admin@example.com"
-              className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
-              required
-              autoFocus
-              autoComplete="email"
-            />
-          </div>
-
-          <div>
-            <div className="mb-1.5 flex items-center justify-between">
-              <label htmlFor="login-password" className="block text-sm font-medium text-gray-700">
-                Password
+
+            {totpError && (
+              <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
+                <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
+                <p className="text-sm text-red-800">{totpError}</p>
+              </div>
+            )}
+
+            <div>
+              <label htmlFor="totp-code" className="mb-1.5 block text-sm font-medium text-gray-700">
+                {useBackupCode ? 'Backup code' : 'Authentication code'}
               </label>
-              {onNavigate && (
-                <button
-                  type="button"
-                  onClick={() => onNavigate('/forgot-password')}
-                  className="text-xs font-medium text-blue-600 hover:text-blue-700"
-                >
-                  Forgot Password?
-                </button>
-              )}
-            </div>
-            <div className="relative">
               <input
-                id="login-password"
-                type={showPassword ? 'text' : 'password'}
-                value={password}
-                onChange={(e) => setPassword(e.target.value)}
-                placeholder="Enter your password"
-                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 pr-10 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                id="totp-code"
+                type="text"
+                inputMode={useBackupCode ? 'text' : 'numeric'}
+                autoComplete="one-time-code"
+                value={totpCode}
+                onChange={(e) =>
+                  setTotpCode(
+                    useBackupCode
+                      ? e.target.value.trim()
+                      : e.target.value.replace(/\D/g, '').slice(0, 6),
+                  )
+                }
+                placeholder={useBackupCode ? 'abcd1234' : '123456'}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-center font-mono text-lg tracking-[0.3em] focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                autoFocus
                 required
-                autoComplete="current-password"
               />
+            </div>
+
+            <button
+              type="submit"
+              disabled={!totpCode.trim() || verifying}
+              className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {verifying ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Verifying...
+                </>
+              ) : (
+                'Verify'
+              )}
+            </button>
+
+            <div className="flex items-center justify-between text-xs">
               <button
                 type="button"
-                onClick={() => setShowPassword(!showPassword)}
-                className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                tabIndex={-1}
+                onClick={() => {
+                  setUseBackupCode((v) => !v)
+                  setTotpCode('')
+                  setTotpError('')
+                }}
+                className="font-medium text-blue-600 hover:text-blue-700"
               >
-                {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                {useBackupCode ? 'Use authenticator app instead' : 'Use a backup code'}
+              </button>
+              <button
+                type="button"
+                onClick={resetToPasswordStep}
+                className="font-medium text-gray-500 hover:text-gray-700"
+              >
+                Back to sign in
               </button>
             </div>
-          </div>
-
-          <button
-            type="submit"
-            disabled={!canSubmit}
-            className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+          </form>
+        ) : (
+          <form
+            onSubmit={handleSubmit}
+            className="space-y-5 rounded-xl border border-gray-200 bg-white p-6 shadow-sm"
           >
-            {submitting ? (
-              <>
-                <Loader2 className="h-4 w-4 animate-spin" />
-                Signing in...
-              </>
-            ) : (
-              'Sign In'
+            {error && (
+              <div className="flex items-start gap-3 rounded-lg border border-red-200 bg-red-50 p-3">
+                <AlertTriangle className="mt-0.5 h-5 w-5 shrink-0 text-red-600" />
+                <p className="text-sm text-red-800">{error}</p>
+              </div>
             )}
-          </button>
 
-          {enabledProviders.length > 0 && (
-            <>
+            <div>
+              <label
+                htmlFor="login-email"
+                className="mb-1.5 block text-sm font-medium text-gray-700"
+              >
+                Email Address
+              </label>
+              <input
+                id="login-email"
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="admin@example.com"
+                className="w-full rounded-lg border border-gray-300 px-3 py-2.5 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                required
+                autoFocus
+                autoComplete="email"
+              />
+            </div>
+
+            <div>
+              <div className="mb-1.5 flex items-center justify-between">
+                <label htmlFor="login-password" className="block text-sm font-medium text-gray-700">
+                  Password
+                </label>
+                {onNavigate && (
+                  <button
+                    type="button"
+                    onClick={() => onNavigate('/forgot-password')}
+                    className="text-xs font-medium text-blue-600 hover:text-blue-700"
+                  >
+                    Forgot Password?
+                  </button>
+                )}
+              </div>
               <div className="relative">
-                <div className="absolute inset-0 flex items-center">
-                  <div className="w-full border-t border-gray-200" />
-                </div>
-                <div className="relative flex justify-center text-sm">
-                  <span className="bg-white px-3 text-gray-500">Or continue with</span>
-                </div>
+                <input
+                  id="login-password"
+                  type={showPassword ? 'text' : 'password'}
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder="Enter your password"
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2.5 pr-10 text-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none"
+                  required
+                  autoComplete="current-password"
+                />
+                <button
+                  type="button"
+                  onClick={() => setShowPassword(!showPassword)}
+                  className="absolute top-1/2 right-3 -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                  tabIndex={-1}
+                >
+                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+                </button>
               </div>
+            </div>
 
-              <div className="grid gap-3">
-                {enabledProviders.map((provider) => {
-                  const colors = OAUTH_COLORS[provider] ?? OAUTH_COLORS.google
-                  return (
-                    <button
-                      key={provider}
-                      type="button"
-                      onClick={() => handleOAuthClick(provider)}
-                      className={`flex w-full items-center justify-center gap-3 border px-4 py-2.5 ${colors?.border ?? ''} ${colors?.bg ?? ''} ${colors?.text ?? ''} rounded-lg text-sm font-medium ${colors?.hover ?? ''} transition-colors`}
-                    >
-                      <OAuthIcon provider={provider} />
-                      {OAUTH_LABELS[provider] ?? provider}
-                    </button>
-                  )
-                })}
-              </div>
-            </>
-          )}
-        </form>
+            <button
+              type="submit"
+              disabled={!canSubmit}
+              className="flex w-full items-center justify-center gap-2 rounded-lg bg-blue-600 py-2.5 font-medium text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {submitting ? (
+                <>
+                  <Loader2 className="h-4 w-4 animate-spin" />
+                  Signing in...
+                </>
+              ) : (
+                'Sign In'
+              )}
+            </button>
+
+            {enabledProviders.length > 0 && (
+              <>
+                <div className="relative">
+                  <div className="absolute inset-0 flex items-center">
+                    <div className="w-full border-t border-gray-200" />
+                  </div>
+                  <div className="relative flex justify-center text-sm">
+                    <span className="bg-white px-3 text-gray-500">Or continue with</span>
+                  </div>
+                </div>
+
+                <div className="grid gap-3">
+                  {enabledProviders.map((provider) => {
+                    const colors = OAUTH_COLORS[provider] ?? OAUTH_COLORS.google
+                    return (
+                      <button
+                        key={provider}
+                        type="button"
+                        onClick={() => handleOAuthClick(provider)}
+                        className={`flex w-full items-center justify-center gap-3 border px-4 py-2.5 ${colors?.border ?? ''} ${colors?.bg ?? ''} ${colors?.text ?? ''} rounded-lg text-sm font-medium ${colors?.hover ?? ''} transition-colors`}
+                      >
+                        <OAuthIcon provider={provider} />
+                        {OAUTH_LABELS[provider] ?? provider}
+                      </button>
+                    )
+                  })}
+                </div>
+              </>
+            )}
+          </form>
+        )}
       </div>
     </div>
   )

package/src/views/Profile.tsx

@@ -0,0 +1,54 @@
+'use client'
+
+import { useId } from 'react'
+import { SecurityCard } from './settings/securityPrimitives.js'
+import { AccountSecurity } from './profile/AccountSecurity.js'
+
+export interface ProfileProps {
+  onNavigate?: (path: string) => void
+  session?: { user?: { name?: string; email?: string; role?: string } }
+}
+
+function roleLabel(role?: string): string {
+  if (!role) return 'Member'
+  return role.charAt(0).toUpperCase() + role.slice(1).toLowerCase()
+}
+
+export function Profile({ session }: ProfileProps = {}) {
+  const accountHeadingId = useId()
+  const user = session?.user
+
+  return (
+    <div className="p-3 pr-6 sm:p-4 sm:pr-8">
+      <div className="mb-4">
+        <h1 className="mb-1 text-2xl font-semibold text-gray-900">Your profile</h1>
+        <p className="text-sm text-gray-600">Manage your account details and sign-in security.</p>
+      </div>
+
+      <div className="grid max-w-3xl gap-4">
+        <SecurityCard
+          headingId={accountHeadingId}
+          title="Account"
+          description="Your identity within this CMS. Contact an administrator to change your role."
+        >
+          <dl className="divide-border divide-y text-sm">
+            <div className="flex items-center justify-between gap-3 py-2">
+              <dt className="text-muted-foreground">Name</dt>
+              <dd className="text-foreground">{user?.name ?? '—'}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-3 py-2">
+              <dt className="text-muted-foreground">Email</dt>
+              <dd className="text-foreground">{user?.email ?? '—'}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-3 py-2">
+              <dt className="text-muted-foreground">Role</dt>
+              <dd className="text-foreground">{roleLabel(user?.role)}</dd>
+            </div>
+          </dl>
+        </SecurityCard>
+
+        <AccountSecurity />
+      </div>
+    </div>
+  )
+}