@actuate-media/cms-admin 0.28.0 → 0.30.0

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>
+  )
+}