adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Task 5: Refactor SettingsSecurityTab

Browse Source 
- Accept authMethods, isLoadingAuthMethods, onRefreshAuthMethods as props
- Fix passkey list URL to /api/auth/passkey/list-user-passkeys
- Fix passkey delete/rename to use /api/auth/passkey/delete-passkey and /api/auth/passkey/update-passkey
- Add error feedback with retry UI for passkey loading failures
- Add passkeyMessage state for success/error feedback
- Keep password validation at 10 characters minimum
- Call onRefreshAuthMethods after password and passkey operations
This commit is contained in:
adrianbonpin
2026-04-26 12:22:06 -05:00
parent 45c071692e
commit 2063c0cb83
1 changed files with 137 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/profile/settings-security-tab.tsx
+107 -58
View File
@@ -1,6 +1,6 @@
"use client"
import { useState, useRef, useEffect } from "react"
import { useState, useEffect } from "react"
import { authClient } from "@/lib/auth-client"
import { Loader2, Key, Fingerprint, Plus, Trash2, Pencil, Check, X, Shield } from "lucide-react"
import { motion, AnimatePresence } from "motion/react"
@@ -19,11 +19,16 @@ interface AuthMethods {
totalAuthMethods: number
}
export function SettingsSecurityTab() {
const [authMethods, setAuthMethods] = useState<AuthMethods | null>(null)
interface SettingsSecurityTabProps {
authMethods: AuthMethods | null
isLoadingAuthMethods: boolean
onRefreshAuthMethods: () => Promise<void>
}
export function SettingsSecurityTab({ authMethods, isLoadingAuthMethods, onRefreshAuthMethods }: SettingsSecurityTabProps) {
const [passkeys, setPasskeys] = useState<Passkey[]>([])
const [isLoadingAuthMethods, setIsLoadingAuthMethods] = useState(true)
const [isLoadingPasskeys, setIsLoadingPasskeys] = useState(true)
const [passkeysError, setPasskeysError] = useState<string | null>(null)
const [passwordMessage, setPasswordMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
const [isPasswordSubmitting, setIsPasswordSubmitting] = useState(false)
@@ -32,43 +37,48 @@ export function SettingsSecurityTab() {
const [newPassword, setNewPassword] = useState("")
const [confirmPassword, setConfirmPassword] = useState("")
// Passkey editing state
// Passkey state
const [editingPasskeyId, setEditingPasskeyId] = useState<string | null>(null)
const [editingName, setEditingName] = useState("")
const [isUpdatingPasskey, setIsUpdatingPasskey] = useState(false)
const [isDeletingPasskey, setIsDeletingPasskey] = useState<string | null>(null)
const [isAddingPasskey, setIsAddingPasskey] = useState(false)
const [passkeyMessage, setPasskeyMessage] = useState<{ type: "success" | "error"; text: string } | null>(null)
const fetchRef = useRef(false)
useEffect(() => {
if (fetchRef.current) return
fetchRef.current = true
let cancelled = false
Promise.all([
fetch("/api/user/me/auth-methods", { credentials: "include" }).then(r => r.ok ? r.json() : null).catch(() => null),
fetch("/api/auth/passkey/list", { credentials: "include" }).then(r => r.ok ? r.json() : []).catch(() => []),
]).then(([methodsData, passkeyData]) => {
if (cancelled) return
if (methodsData) setAuthMethods(methodsData)
if (passkeyData) setPasskeys(Array.isArray(passkeyData) ? passkeyData : [])
setIsLoadingAuthMethods(false)
setIsLoadingPasskeys(false)
})
return () => { cancelled = true }
fetchPasskeys()
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [])
const refreshAuthMethods = async () => {
const res = await fetch("/api/user/me/auth-methods", { credentials: "include" })
if (res.ok) setAuthMethods(await res.json())
async function fetchPasskeys() {
try {
const res = await fetch("/api/auth/passkey/list-user-passkeys", { credentials: "include" })
if (!res.ok) {
setPasskeysError("Failed to load passkeys")
setPasskeys([])
} else {
const data = await res.json()
setPasskeys(Array.isArray(data) ? data : [])
setPasskeysError(null)
}
} catch {
setPasskeysError("Failed to load passkeys. Please try again.")
setPasskeys([])
} finally {
setIsLoadingPasskeys(false)
}
}
const refreshPasskeys = async () => {
const res = await fetch("/api/auth/passkey/list", { credentials: "include" })
try {
const res = await fetch("/api/auth/passkey/list-user-passkeys", { credentials: "include" })
if (res.ok) {
const data = await res.json()
setPasskeys(Array.isArray(data) ? data : [])
setPasskeysError(null)
}
} catch {
// silently fail on refresh
}
}
@@ -88,6 +98,7 @@ export function SettingsSecurityTab() {
setIsPasswordSubmitting(true)
try {
if (authMethods?.hasPassword) {
const { error } = await authClient.changePassword({
currentPassword,
@@ -101,6 +112,7 @@ export function SettingsSecurityTab() {
setCurrentPassword("")
setNewPassword("")
setConfirmPassword("")
await onRefreshAuthMethods()
}
} else {
const res = await fetch("/api/user/me/set-password", {
@@ -117,25 +129,30 @@ export function SettingsSecurityTab() {
setPasswordMessage({ type: "success", text: "Password set successfully" })
setNewPassword("")
setConfirmPassword("")
await refreshAuthMethods()
await onRefreshAuthMethods()
}
}
} catch {
setPasswordMessage({ type: "error", text: "An unexpected error occurred" })
} finally {
setIsPasswordSubmitting(false)
}
}
const handleAddPasskey = async () => {
setIsAddingPasskey(true)
setPasskeyMessage(null)
try {
const { error } = await authClient.passkey.addPasskey()
if (error) {
console.error("Failed to add passkey:", error)
setPasskeyMessage({ type: "error", text: error.message || "Failed to add passkey" })
} else {
setPasskeyMessage({ type: "success", text: "Passkey added successfully" })
await refreshPasskeys()
await refreshAuthMethods()
await onRefreshAuthMethods()
}
} catch {
// silently fail
setPasskeyMessage({ type: "error", text: "Failed to add passkey. Please try again." })
} finally {
setIsAddingPasskey(false)
}
@@ -145,24 +162,57 @@ export function SettingsSecurityTab() {
if (authMethods && authMethods.totalAuthMethods <= 1) return
setIsDeletingPasskey(id)
setPasskeyMessage(null)
try {
const res = await fetch("/api/user/me/passkey/delete", {
const res = await fetch("/api/auth/passkey/delete-passkey", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ id }),
credentials: "include",
body: JSON.stringify({ id }),
})
if (res.ok) {
if (!res.ok) {
const data = await res.json().catch(() => ({ message: "Failed to delete passkey" }))
setPasskeyMessage({ type: "error", text: data.message || "Failed to delete passkey" })
} else {
setPasskeyMessage({ type: "success", text: "Passkey deleted" })
await refreshPasskeys()
await refreshAuthMethods()
await onRefreshAuthMethods()
}
} catch {
// silently fail
setPasskeyMessage({ type: "error", text: "Failed to delete passkey. Please try again." })
} finally {
setIsDeletingPasskey(null)
}
}
const handleRenamePasskey = async (id: string) => {
setIsUpdatingPasskey(true)
setPasskeyMessage(null)
try {
const res = await fetch("/api/auth/passkey/update-passkey", {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify({ id, name: editingName }),
})
if (!res.ok) {
const data = await res.json().catch(() => ({ message: "Failed to rename passkey" }))
setPasskeyMessage({ type: "error", text: data.message || "Failed to rename passkey" })
} else {
setPasskeyMessage({ type: "success", text: "Passkey renamed" })
await refreshPasskeys()
setEditingPasskeyId(null)
setEditingName("")
}
} catch {
setPasskeyMessage({ type: "error", text: "Failed to rename passkey. Please try again." })
} finally {
setIsUpdatingPasskey(false)
}
}
const startEditingPasskey = (passkey: Passkey) => {
setEditingPasskeyId(passkey.id)
setEditingName(passkey.name || "")
@@ -173,27 +223,6 @@ export function SettingsSecurityTab() {
setEditingName("")
}
const handleRenamePasskey = async (id: string) => {
setIsUpdatingPasskey(true)
try {
const res = await fetch("/api/user/me/passkey/update", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ id, name: editingName }),
credentials: "include",
})
if (res.ok) {
await refreshPasskeys()
setEditingPasskeyId(null)
setEditingName("")
}
} catch {
// silently fail
} finally {
setIsUpdatingPasskey(false)
}
}
const isSingleAuthMethod = authMethods && authMethods.totalAuthMethods <= 1
return (
@@ -314,7 +343,27 @@ export function SettingsSecurityTab() {
</button>
</div>
{isLoadingPasskeys ? (
{passkeyMessage && (
<div className={`mb-3 text-sm ${passkeyMessage.type === "success" ? "text-green-400" : "text-red-400"}`}>
{passkeyMessage.text}
</div>
)}
{passkeysError ? (
<div className="text-center py-4">
<p className="text-sm text-red-400 mb-2">{passkeysError}</p>
<button
onClick={() => {
setPasskeysError(null)
setIsLoadingPasskeys(true)
fetchPasskeys()
}}
className="text-sm text-primary hover:underline cursor-pointer"
>
Retry
</button>
</div>
) : isLoadingPasskeys ? (
<div className="flex items-center gap-2 text-sm text-text/50">
<Loader2 className="h-4 w-4 animate-spin" />
Loading passkeys...