init
This commit is contained in:
corsacca
commit
6f5313f990
64 changed files with 7928 additions and 0 deletions
14
.blueprints.json
Normal file
14
.blueprints.json
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
{
|
||||
"source": "/Users/jd/code/base-code/nuxt-blueprints",
|
||||
"generated": "2026-04-21",
|
||||
"blocks": {
|
||||
"core": {},
|
||||
"email/mailgun": {},
|
||||
"activity-log": {},
|
||||
"rate-limiting/db": {},
|
||||
"auth-jwt": {},
|
||||
"admin": {},
|
||||
"user-management": {},
|
||||
"s3-storage": {}
|
||||
}
|
||||
}
|
||||
13
.editorconfig
Executable file
13
.editorconfig
Executable file
|
|
@ -0,0 +1,13 @@
|
|||
# editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
19
.env.example
Normal file
19
.env.example
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
APP_TITLE=My App
|
||||
DATABASE_URL=postgresql://user:password@localhost:5432/dbname
|
||||
NODE_ENV=development
|
||||
NUXT_PUBLIC_SITE_URL=http://localhost:3000
|
||||
|
||||
JWT_SECRET=your-super-secret-jwt-key-change-this
|
||||
|
||||
MAILGUN_API_KEY=your-mailgun-api-key
|
||||
MAILGUN_DOMAIN=mg.yourdomain.com
|
||||
# Optional: Use 'api.eu.mailgun.net' for EU region
|
||||
MAILGUN_HOST=
|
||||
SMTP_FROM=noreply@yourdomain.com
|
||||
SMTP_FROM_NAME=My App
|
||||
|
||||
S3_ENDPOINT=https://s3.us-west-004.backblazeb2.com
|
||||
S3_REGION=us-west-004
|
||||
S3_ACCESS_KEY_ID=your-access-key-id
|
||||
S3_SECRET_ACCESS_KEY=your-secret-access-key
|
||||
S3_BUCKET_NAME=your-bucket-name
|
||||
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
# Nuxt dev/build outputs
|
||||
.output
|
||||
.data
|
||||
.nuxt
|
||||
.nitro
|
||||
.cache
|
||||
dist
|
||||
|
||||
# Node dependencies
|
||||
node_modules
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Misc
|
||||
.DS_Store
|
||||
.fleet
|
||||
.idea
|
||||
|
||||
# Local env files
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
8
app/app.config.ts
Normal file
8
app/app.config.ts
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
export default defineAppConfig({
|
||||
ui: {
|
||||
colors: {
|
||||
primary: 'green',
|
||||
neutral: 'slate'
|
||||
}
|
||||
}
|
||||
})
|
||||
7
app/app.vue
Normal file
7
app/app.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<UApp>
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
</UApp>
|
||||
</template>
|
||||
25
app/assets/css/main.css
Normal file
25
app/assets/css/main.css
Normal file
|
|
@ -0,0 +1,25 @@
|
|||
@import "tailwindcss";
|
||||
@import "@nuxt/ui";
|
||||
|
||||
@theme static {
|
||||
--font-sans: 'Public Sans', sans-serif;
|
||||
|
||||
--color-green-50: #EFFDF5;
|
||||
--color-green-100: #D9FBE8;
|
||||
--color-green-200: #B3F5D1;
|
||||
--color-green-300: #75EDAE;
|
||||
--color-green-400: #00DC82;
|
||||
--color-green-500: #00C16A;
|
||||
--color-green-600: #00A155;
|
||||
--color-green-700: #007F45;
|
||||
--color-green-800: #016538;
|
||||
--color-green-900: #0A5331;
|
||||
--color-green-950: #052E16;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
button:not(:disabled),
|
||||
[role="button"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
17
app/components/ThemeToggle.vue
Normal file
17
app/components/ThemeToggle.vue
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
<script setup lang="ts">
|
||||
const { theme, toggleTheme } = useTheme()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UButton
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="lg"
|
||||
@click="toggleTheme"
|
||||
:aria-label="theme === 'light' ? 'Switch to dark mode' : 'Switch to light mode'"
|
||||
title="Toggle theme"
|
||||
>
|
||||
<UIcon v-if="theme === 'light'" name="i-lucide-moon" class="size-5" />
|
||||
<UIcon v-else name="i-lucide-sun" class="size-5" />
|
||||
</UButton>
|
||||
</template>
|
||||
157
app/composables/useAuth.ts
Normal file
157
app/composables/useAuth.ts
Normal file
|
|
@ -0,0 +1,157 @@
|
|||
const CACHE_KEY = 'auth.user.cache'
|
||||
|
||||
const saveToCache = (userData: any) => {
|
||||
if (import.meta.client && userData) {
|
||||
try {
|
||||
sessionStorage.setItem(CACHE_KEY, JSON.stringify(userData))
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
const loadFromCache = (): any => {
|
||||
if (import.meta.client) {
|
||||
try {
|
||||
const cached = sessionStorage.getItem(CACHE_KEY)
|
||||
return cached ? JSON.parse(cached) : null
|
||||
} catch {}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const clearCache = () => {
|
||||
if (import.meta.client) {
|
||||
try {
|
||||
sessionStorage.removeItem(CACHE_KEY)
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
|
||||
export const useAuth = () => {
|
||||
const user = useState('auth.user', () => null as any)
|
||||
const authReady = useState('auth.ready', () => false)
|
||||
|
||||
const restoreFromCache = () => {
|
||||
const cached = loadFromCache()
|
||||
if (cached) {
|
||||
user.value = cached
|
||||
}
|
||||
}
|
||||
|
||||
const login = async (email: string, password: string) => {
|
||||
try {
|
||||
const response = await $fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
body: { email, password }
|
||||
}) as { success: boolean; user?: any }
|
||||
|
||||
if (response.success) {
|
||||
user.value = response.user
|
||||
saveToCache(response.user)
|
||||
|
||||
const route = useRoute()
|
||||
const redirectTo = route.query.redirect as string
|
||||
|
||||
if (redirectTo && redirectTo.startsWith('/')) {
|
||||
await navigateTo(redirectTo)
|
||||
} else {
|
||||
await navigateTo('/')
|
||||
}
|
||||
|
||||
return { success: true }
|
||||
}
|
||||
|
||||
return { success: false, message: 'Login failed' }
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
message: error.data?.message || 'An error occurred during login'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const logout = async () => {
|
||||
try {
|
||||
await $fetch('/api/auth/logout', { method: 'POST' })
|
||||
user.value = null
|
||||
clearCache()
|
||||
await navigateTo('/login')
|
||||
} catch {
|
||||
user.value = null
|
||||
clearCache()
|
||||
await navigateTo('/login')
|
||||
}
|
||||
}
|
||||
|
||||
const register = async (email: string, password: string, display_name: string) => {
|
||||
try {
|
||||
const response = await $fetch('/api/auth/register', {
|
||||
method: 'POST',
|
||||
body: { email, password, display_name }
|
||||
}) as { success: boolean; message?: string; requiresVerification?: boolean; autoLoggedIn?: boolean; user?: any }
|
||||
|
||||
// First-ever user is promoted server-side and arrives already logged in.
|
||||
if (response.autoLoggedIn && response.user) {
|
||||
user.value = response.user
|
||||
saveToCache(response.user)
|
||||
}
|
||||
|
||||
return response
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
message: error.data?.statusMessage || error.data?.message || 'Registration failed'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const checkAuth = async () => {
|
||||
try {
|
||||
const response = await $fetch('/api/auth/me') as { user: any }
|
||||
user.value = response.user
|
||||
saveToCache(response.user)
|
||||
return response.user
|
||||
} catch {
|
||||
user.value = null
|
||||
clearCache()
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
const isLoggedIn = computed(() => !!user.value)
|
||||
|
||||
const deleteAccount = async (password: string) => {
|
||||
try {
|
||||
const response = await $fetch('/api/profile/account', {
|
||||
method: 'DELETE',
|
||||
body: { password }
|
||||
}) as { success: boolean; message?: string }
|
||||
|
||||
if (response.success) {
|
||||
user.value = null
|
||||
clearCache()
|
||||
await navigateTo('/login')
|
||||
return { success: true }
|
||||
}
|
||||
|
||||
return { success: false, message: 'Account deletion failed' }
|
||||
} catch (error: any) {
|
||||
return {
|
||||
success: false,
|
||||
message: error.data?.statusMessage || 'An error occurred while deleting your account'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
user: readonly(user),
|
||||
authReady: readonly(authReady),
|
||||
login,
|
||||
logout,
|
||||
register,
|
||||
checkAuth,
|
||||
restoreFromCache,
|
||||
isLoggedIn,
|
||||
deleteAccount,
|
||||
setAuthReady: (value: boolean) => { authReady.value = value }
|
||||
}
|
||||
}
|
||||
20
app/composables/usePermissions.ts
Normal file
20
app/composables/usePermissions.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
import type { Permission } from '~~/app/utils/permissions'
|
||||
|
||||
export const usePermissions = () => {
|
||||
const { user } = useAuth()
|
||||
|
||||
const roles = computed<string[]>(() => user.value?.roles ?? [])
|
||||
const permissions = computed<string[]>(() => user.value?.permissions ?? [])
|
||||
|
||||
const hasRole = (name: string) => roles.value.includes(name)
|
||||
const hasPermission = (name: Permission | string) => permissions.value.includes(name)
|
||||
const isAdmin = computed(() => hasRole('admin'))
|
||||
|
||||
return {
|
||||
roles,
|
||||
permissions,
|
||||
hasRole,
|
||||
hasPermission,
|
||||
isAdmin
|
||||
}
|
||||
}
|
||||
19
app/composables/useTheme.ts
Normal file
19
app/composables/useTheme.ts
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
export const useTheme = () => {
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const theme = computed(() => colorMode.value)
|
||||
|
||||
const toggleTheme = () => {
|
||||
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
|
||||
}
|
||||
|
||||
const initTheme = () => {
|
||||
// No-op: Nuxt UI handles initialization automatically
|
||||
}
|
||||
|
||||
return {
|
||||
theme,
|
||||
toggleTheme,
|
||||
initTheme
|
||||
}
|
||||
}
|
||||
129
app/layouts/admin.vue
Normal file
129
app/layouts/admin.vue
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<script setup lang="ts">
|
||||
const { user } = useAuth()
|
||||
const { hasPermission } = usePermissions()
|
||||
const route = useRoute()
|
||||
const mobileOpen = ref(false)
|
||||
|
||||
const navItems = computed(() => [
|
||||
{ to: '/admin', label: 'Dashboard', icon: 'i-lucide-layout-dashboard' },
|
||||
...(hasPermission('users.view')
|
||||
? [{ to: '/admin/users', label: 'Users', icon: 'i-lucide-users' }]
|
||||
: []),
|
||||
...(hasPermission('roles.view')
|
||||
? [{ to: '/admin/roles', label: 'Roles', icon: 'i-lucide-shield' }]
|
||||
: [])
|
||||
])
|
||||
|
||||
const isActive = (to: string) => {
|
||||
if (to === '/admin') return route.path === '/admin'
|
||||
return route.path === to || route.path.startsWith(to + '/')
|
||||
}
|
||||
|
||||
watch(() => route.path, () => {
|
||||
mobileOpen.value = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-(--ui-bg) text-(--ui-text)">
|
||||
<!-- Mobile top bar -->
|
||||
<header class="lg:hidden bg-(--ui-bg-elevated) border-b border-(--ui-border) py-3 px-4 sticky top-0 z-40 flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<UButton
|
||||
icon="i-lucide-menu"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
aria-label="Open menu"
|
||||
@click="mobileOpen = true"
|
||||
/>
|
||||
<span class="text-lg font-semibold">Admin</span>
|
||||
</div>
|
||||
<span class="text-sm text-(--ui-text-muted) truncate max-w-[50%]">
|
||||
{{ user?.display_name || user?.email }}
|
||||
</span>
|
||||
</header>
|
||||
|
||||
<div class="lg:flex">
|
||||
<!-- Desktop sidebar -->
|
||||
<aside class="hidden lg:flex lg:flex-col w-64 min-h-screen border-r border-(--ui-border) bg-(--ui-bg-elevated) sticky top-0 h-screen">
|
||||
<div class="px-6 py-5 border-b border-(--ui-border)">
|
||||
<h1 class="text-xl font-semibold">Admin</h1>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
|
||||
<NuxtLink
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors"
|
||||
:class="isActive(item.to)
|
||||
? 'bg-(--ui-bg-accented) text-(--ui-text) font-medium'
|
||||
: 'text-(--ui-text-muted) hover:bg-(--ui-bg-accented) hover:text-(--ui-text)'"
|
||||
>
|
||||
<UIcon :name="item.icon" class="size-5 shrink-0" />
|
||||
<span>{{ item.label }}</span>
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
<div class="border-t border-(--ui-border) px-4 py-4 space-y-2">
|
||||
<div class="text-sm text-(--ui-text-muted) truncate">
|
||||
{{ user?.display_name || user?.email }}
|
||||
</div>
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="flex items-center gap-2 text-sm text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"
|
||||
>
|
||||
<UIcon name="i-lucide-arrow-left" class="size-4" />
|
||||
<span>Back to app</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<!-- Mobile drawer -->
|
||||
<USlideover v-model:open="mobileOpen" side="left" :ui="{ content: 'max-w-xs' }">
|
||||
<template #content>
|
||||
<div class="flex flex-col h-full bg-(--ui-bg-elevated)">
|
||||
<div class="px-6 py-5 border-b border-(--ui-border) flex items-center justify-between">
|
||||
<h1 class="text-xl font-semibold">Admin</h1>
|
||||
<UButton
|
||||
icon="i-lucide-x"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
aria-label="Close menu"
|
||||
@click="mobileOpen = false"
|
||||
/>
|
||||
</div>
|
||||
<nav class="flex-1 px-3 py-4 space-y-1 overflow-y-auto">
|
||||
<NuxtLink
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="flex items-center gap-3 px-3 py-2 rounded-md text-sm transition-colors"
|
||||
:class="isActive(item.to)
|
||||
? 'bg-(--ui-bg-accented) text-(--ui-text) font-medium'
|
||||
: 'text-(--ui-text-muted) hover:bg-(--ui-bg-accented) hover:text-(--ui-text)'"
|
||||
>
|
||||
<UIcon :name="item.icon" class="size-5 shrink-0" />
|
||||
<span>{{ item.label }}</span>
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
<div class="border-t border-(--ui-border) px-4 py-4 space-y-2">
|
||||
<div class="text-sm text-(--ui-text-muted) truncate">
|
||||
{{ user?.display_name || user?.email }}
|
||||
</div>
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="flex items-center gap-2 text-sm text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"
|
||||
>
|
||||
<UIcon name="i-lucide-arrow-left" class="size-4" />
|
||||
<span>Back to app</span>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</USlideover>
|
||||
|
||||
<main class="flex-1 px-4 sm:px-6 lg:px-8 py-6 lg:py-8">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
12
app/layouts/auth.vue
Normal file
12
app/layouts/auth.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<template>
|
||||
<div class="min-h-screen flex flex-col bg-(--ui-bg)">
|
||||
<div class="flex justify-end p-4">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<div class="flex-1 flex items-center justify-center px-4 pb-12">
|
||||
<div class="w-full max-w-md">
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
35
app/layouts/default.vue
Normal file
35
app/layouts/default.vue
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
<script setup lang="ts">
|
||||
const { user } = useAuth()
|
||||
const config = useRuntimeConfig()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-(--ui-bg) text-(--ui-text)">
|
||||
<header class="bg-(--ui-bg-elevated) border-b border-(--ui-border) py-4 sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 flex justify-between items-center">
|
||||
<div class="flex items-center gap-4">
|
||||
<slot name="header-left">
|
||||
<NuxtLink to="/" class="text-xl font-semibold hover:text-(--ui-text-muted) transition-colors">
|
||||
{{ config.public.appName }}
|
||||
</NuxtLink>
|
||||
</slot>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<slot name="header-right">
|
||||
<span class="text-(--ui-text-muted) text-sm hidden sm:inline">
|
||||
{{ user?.display_name || user?.email }}
|
||||
</span>
|
||||
<UButton to="/profile" variant="ghost" size="sm">
|
||||
Profile
|
||||
</UButton>
|
||||
<ThemeToggle />
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="max-w-7xl mx-auto px-4 py-8">
|
||||
<slot />
|
||||
</main>
|
||||
</div>
|
||||
</template>
|
||||
16
app/middleware/admin.ts
Normal file
16
app/middleware/admin.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
export default defineNuxtRouteMiddleware(async (_to, _from) => {
|
||||
const { user, checkAuth } = useAuth()
|
||||
|
||||
let currentUser = user.value
|
||||
if (!currentUser) {
|
||||
currentUser = await checkAuth()
|
||||
}
|
||||
|
||||
if (!currentUser) {
|
||||
return navigateTo('/login')
|
||||
}
|
||||
|
||||
if (!currentUser.permissions?.includes('admin.access')) {
|
||||
return navigateTo('/')
|
||||
}
|
||||
})
|
||||
12
app/middleware/auth.ts
Normal file
12
app/middleware/auth.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
export default defineNuxtRouteMiddleware(async (to, _from) => {
|
||||
const { user, checkAuth } = useAuth()
|
||||
|
||||
if (!user.value) {
|
||||
const authUser = await checkAuth()
|
||||
|
||||
if (!authUser) {
|
||||
const redirectUrl = to.fullPath
|
||||
return navigateTo(`/login?redirect=${encodeURIComponent(redirectUrl)}`)
|
||||
}
|
||||
}
|
||||
})
|
||||
12
app/pages/admin/index.vue
Normal file
12
app/pages/admin/index.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: ['auth', 'admin']
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-6">Dashboard</h1>
|
||||
</div>
|
||||
</template>
|
||||
129
app/pages/admin/roles.vue
Normal file
129
app/pages/admin/roles.vue
Normal file
|
|
@ -0,0 +1,129 @@
|
|||
<script setup lang="ts">
|
||||
import { ROLES, type RoleDefinition } from '~~/app/utils/role-definitions'
|
||||
import { PERMISSIONS, PERMISSION_META, type Permission } from '~~/app/utils/permissions'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: ['auth', 'admin']
|
||||
})
|
||||
|
||||
const roles = computed<RoleDefinition[]>(() => Object.values(ROLES))
|
||||
|
||||
const roleIcons: Record<string, string> = {
|
||||
admin: 'i-lucide-shield',
|
||||
member: 'i-lucide-user'
|
||||
}
|
||||
|
||||
const expandedRole = ref<string | null>(null)
|
||||
const toggleExpandedRole = (name: string) => {
|
||||
expandedRole.value = expandedRole.value === name ? null : name
|
||||
}
|
||||
|
||||
interface PermissionGroup {
|
||||
resource: string
|
||||
permissions: { perm: Permission; granted: boolean; title: string; description: string }[]
|
||||
}
|
||||
|
||||
const getPermissionGroups = (role: RoleDefinition): PermissionGroup[] => {
|
||||
const groups = new Map<string, PermissionGroup['permissions']>()
|
||||
for (const perm of PERMISSIONS) {
|
||||
const resource = perm.includes('.') ? perm.split('.', 1)[0]! : 'general'
|
||||
if (!groups.has(resource)) groups.set(resource, [])
|
||||
const meta = PERMISSION_META[perm]
|
||||
groups.get(resource)!.push({
|
||||
perm,
|
||||
granted: (role.permissions as readonly string[]).includes(perm),
|
||||
title: meta?.title ?? perm,
|
||||
description: meta?.description ?? ''
|
||||
})
|
||||
}
|
||||
return Array.from(groups.entries())
|
||||
.sort(([a], [b]) => a.localeCompare(b))
|
||||
.map(([resource, permissions]) => ({ resource, permissions }))
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
|
||||
<h1 class="text-3xl font-bold">Roles</h1>
|
||||
</div>
|
||||
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-for="role in roles"
|
||||
:key="role.name"
|
||||
class="rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated) overflow-hidden"
|
||||
>
|
||||
<button
|
||||
class="w-full flex items-center justify-between p-4 hover:bg-(--ui-bg-accented)/50 transition-colors text-left"
|
||||
:aria-expanded="expandedRole === role.name"
|
||||
@click="toggleExpandedRole(role.name)"
|
||||
>
|
||||
<div class="flex items-center gap-3 min-w-0">
|
||||
<UIcon
|
||||
:name="roleIcons[role.name] || 'i-lucide-user'"
|
||||
class="size-5 text-(--ui-text-muted) shrink-0"
|
||||
/>
|
||||
<div class="min-w-0">
|
||||
<p class="text-sm font-medium capitalize">{{ role.name }}</p>
|
||||
<p class="text-xs text-(--ui-text-muted) truncate">{{ role.description }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0">
|
||||
<UBadge color="neutral" variant="outline" size="sm">
|
||||
{{ role.permissions.length }} / {{ PERMISSIONS.length }} permissions
|
||||
</UBadge>
|
||||
<UIcon
|
||||
:name="expandedRole === role.name ? 'i-lucide-chevron-up' : 'i-lucide-chevron-down'"
|
||||
class="size-4 text-(--ui-text-muted)"
|
||||
/>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div
|
||||
v-if="expandedRole === role.name"
|
||||
class="border-t border-(--ui-border) p-4 space-y-5"
|
||||
>
|
||||
<div
|
||||
v-for="group in getPermissionGroups(role)"
|
||||
:key="group.resource"
|
||||
>
|
||||
<p class="text-xs font-medium text-(--ui-text-muted) uppercase tracking-wider mb-2">
|
||||
{{ group.resource }}
|
||||
</p>
|
||||
<div class="space-y-1">
|
||||
<div
|
||||
v-for="p in group.permissions"
|
||||
:key="p.perm"
|
||||
class="flex items-start gap-2 py-1 px-2"
|
||||
>
|
||||
<UIcon
|
||||
:name="p.granted ? 'i-lucide-check' : 'i-lucide-x'"
|
||||
:class="p.granted
|
||||
? 'size-4 text-(--ui-success) shrink-0 mt-0.5'
|
||||
: 'size-4 text-(--ui-text-muted)/50 shrink-0 mt-0.5'"
|
||||
/>
|
||||
<div class="min-w-0 flex-1">
|
||||
<span
|
||||
class="text-sm"
|
||||
:class="p.granted ? '' : 'text-(--ui-text-muted)'"
|
||||
>
|
||||
{{ p.title }}
|
||||
</span>
|
||||
<span
|
||||
v-if="p.description"
|
||||
class="text-xs text-(--ui-text-muted) ml-2"
|
||||
>
|
||||
— {{ p.description }}
|
||||
</span>
|
||||
<code class="ml-2 text-xs text-(--ui-text-muted)/70 font-mono">{{ p.perm }}</code>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
663
app/pages/admin/users.vue
Normal file
663
app/pages/admin/users.vue
Normal file
|
|
@ -0,0 +1,663 @@
|
|||
<script setup lang="ts">
|
||||
import { h, resolveComponent } from 'vue'
|
||||
import type { TableColumn } from '@nuxt/ui'
|
||||
import { ROLES, type RoleDefinition } from '~~/app/utils/role-definitions'
|
||||
|
||||
definePageMeta({
|
||||
layout: 'admin',
|
||||
middleware: ['auth', 'admin']
|
||||
})
|
||||
|
||||
interface AdminUserRow {
|
||||
id: string
|
||||
display_name: string
|
||||
email: string
|
||||
verified: boolean
|
||||
created: string
|
||||
last_login: string | null
|
||||
roles: string[]
|
||||
}
|
||||
|
||||
interface AssignableRole {
|
||||
name: string
|
||||
description: string
|
||||
source: 'static' | 'custom'
|
||||
permissions: string[]
|
||||
}
|
||||
|
||||
const staticRoles = Object.values(ROLES) as RoleDefinition[]
|
||||
|
||||
const availableRoles = computed<AssignableRole[]>(() =>
|
||||
staticRoles.map(r => ({
|
||||
name: r.name,
|
||||
description: r.description,
|
||||
source: 'static' as const,
|
||||
permissions: [...r.permissions]
|
||||
}))
|
||||
)
|
||||
|
||||
const { permissions: myPermissions, hasPermission } = usePermissions()
|
||||
|
||||
const canManageUsers = computed(() => hasPermission('users.manage'))
|
||||
|
||||
const canAssignRole = (role: AssignableRole) => {
|
||||
const mine = new Set(myPermissions.value)
|
||||
return role.permissions.every(p => mine.has(p))
|
||||
}
|
||||
|
||||
const missingPermsForRole = (role: AssignableRole) => {
|
||||
const mine = new Set(myPermissions.value)
|
||||
return role.permissions.filter(p => !mine.has(p))
|
||||
}
|
||||
|
||||
interface UsersResponse {
|
||||
rows: AdminUserRow[]
|
||||
total: number
|
||||
page: number
|
||||
pageSize: number
|
||||
}
|
||||
|
||||
const UIcon = resolveComponent('UIcon')
|
||||
const UButton = resolveComponent('UButton')
|
||||
const UBadge = resolveComponent('UBadge')
|
||||
|
||||
const toast = useToast()
|
||||
const { user: currentUser } = useAuth()
|
||||
|
||||
const page = ref(1)
|
||||
const pageSize = ref(50)
|
||||
const search = ref('')
|
||||
const sortField = ref<'display_name' | 'email' | 'verified' | 'created' | 'last_login'>('created')
|
||||
const sortDir = ref<'asc' | 'desc'>('desc')
|
||||
|
||||
const searchDebounced = ref('')
|
||||
let searchTimer: ReturnType<typeof setTimeout> | null = null
|
||||
watch(search, (val) => {
|
||||
if (searchTimer) clearTimeout(searchTimer)
|
||||
searchTimer = setTimeout(() => {
|
||||
searchDebounced.value = val
|
||||
page.value = 1
|
||||
}, 250)
|
||||
})
|
||||
|
||||
const queryKey = computed(() => ({
|
||||
page: page.value,
|
||||
pageSize: pageSize.value,
|
||||
q: searchDebounced.value,
|
||||
sort: sortField.value,
|
||||
dir: sortDir.value
|
||||
}))
|
||||
|
||||
const { data, pending, error } = await useFetch<UsersResponse>('/api/admin/users', {
|
||||
query: queryKey,
|
||||
watch: [queryKey],
|
||||
default: () => ({ rows: [], total: 0, page: 1, pageSize: 50 })
|
||||
})
|
||||
|
||||
const toggleSort = (field: typeof sortField.value) => {
|
||||
if (sortField.value === field) {
|
||||
sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
|
||||
} else {
|
||||
sortField.value = field
|
||||
sortDir.value = 'asc'
|
||||
}
|
||||
page.value = 1
|
||||
}
|
||||
|
||||
const sortIcon = (field: typeof sortField.value) => {
|
||||
if (sortField.value !== field) return 'i-lucide-chevrons-up-down'
|
||||
return sortDir.value === 'asc' ? 'i-lucide-arrow-up' : 'i-lucide-arrow-down'
|
||||
}
|
||||
|
||||
const formatDate = (value: string | Date | null | undefined) => {
|
||||
if (!value) return '—'
|
||||
const d = typeof value === 'string' ? new Date(value) : value
|
||||
if (Number.isNaN(d.getTime())) return '—'
|
||||
return d.toLocaleString()
|
||||
}
|
||||
|
||||
const formatTimestamp = (input: string | number | null | undefined) => {
|
||||
if (!input) return '—'
|
||||
const d = new Date(input)
|
||||
if (Number.isNaN(d.getTime())) return '—'
|
||||
return d.toLocaleString()
|
||||
}
|
||||
|
||||
const relativeTime = (input: string | number | Date | null | undefined) => {
|
||||
if (!input) return null
|
||||
const d = input instanceof Date
|
||||
? input
|
||||
: new Date(typeof input === 'string' ? input : Number(input))
|
||||
if (Number.isNaN(d.getTime())) return null
|
||||
const diffMs = Date.now() - d.getTime()
|
||||
const abs = Math.abs(diffMs)
|
||||
const minute = 60_000
|
||||
const hour = 60 * minute
|
||||
const day = 24 * hour
|
||||
const week = 7 * day
|
||||
const month = 30 * day
|
||||
const year = 365 * day
|
||||
const rtf = new Intl.RelativeTimeFormat(undefined, { numeric: 'auto' })
|
||||
const sign = diffMs >= 0 ? -1 : 1
|
||||
if (abs < minute) return rtf.format(sign * Math.round(abs / 1000), 'second')
|
||||
if (abs < hour) return rtf.format(sign * Math.round(abs / minute), 'minute')
|
||||
if (abs < day) return rtf.format(sign * Math.round(abs / hour), 'hour')
|
||||
if (abs < week) return rtf.format(sign * Math.round(abs / day), 'day')
|
||||
if (abs < month) return rtf.format(sign * Math.round(abs / week), 'week')
|
||||
if (abs < year) return rtf.format(sign * Math.round(abs / month), 'month')
|
||||
return rtf.format(sign * Math.round(abs / year), 'year')
|
||||
}
|
||||
|
||||
const initialsOf = (name: string | undefined | null, email: string | undefined | null) => {
|
||||
const source = (name || email || '').trim()
|
||||
if (!source) return '?'
|
||||
const parts = source.split(/\s+/).filter(Boolean)
|
||||
if (parts.length >= 2) {
|
||||
return (parts[0]![0]! + parts[parts.length - 1]![0]!).toUpperCase()
|
||||
}
|
||||
return source.slice(0, 2).toUpperCase()
|
||||
}
|
||||
|
||||
const sortableHeader = (label: string, field: typeof sortField.value) => {
|
||||
return () => h(UButton, {
|
||||
variant: 'ghost',
|
||||
color: 'neutral',
|
||||
size: 'xs',
|
||||
class: '-mx-2',
|
||||
trailingIcon: sortIcon(field),
|
||||
onClick: (e: MouseEvent) => {
|
||||
e.stopPropagation()
|
||||
toggleSort(field)
|
||||
}
|
||||
}, () => label)
|
||||
}
|
||||
|
||||
const columns: TableColumn<AdminUserRow>[] = [
|
||||
{
|
||||
accessorKey: 'display_name',
|
||||
header: sortableHeader('Name', 'display_name'),
|
||||
cell: ({ row }) => row.original.display_name || '—'
|
||||
},
|
||||
{
|
||||
accessorKey: 'email',
|
||||
header: sortableHeader('Email', 'email')
|
||||
},
|
||||
{
|
||||
accessorKey: 'verified',
|
||||
header: sortableHeader('Verified', 'verified'),
|
||||
cell: ({ row }) => row.original.verified
|
||||
? h(UIcon, { name: 'i-lucide-check', class: 'size-5 text-(--ui-success)' })
|
||||
: h('span', { class: 'text-(--ui-text-muted)' }, '—')
|
||||
},
|
||||
{
|
||||
accessorKey: 'roles',
|
||||
header: 'Roles',
|
||||
cell: ({ row }) => {
|
||||
const roles = row.original.roles ?? []
|
||||
if (roles.length === 0) {
|
||||
return h('span', { class: 'text-(--ui-text-muted) text-sm' }, '—')
|
||||
}
|
||||
return h('div', { class: 'flex flex-wrap gap-1' },
|
||||
roles.map(r => h(UBadge, {
|
||||
key: r,
|
||||
color: r === 'admin' ? 'warning' : 'neutral',
|
||||
variant: 'subtle',
|
||||
size: 'sm'
|
||||
}, () => r))
|
||||
)
|
||||
}
|
||||
},
|
||||
{
|
||||
accessorKey: 'created',
|
||||
header: sortableHeader('Created', 'created'),
|
||||
cell: ({ row }) => formatDate(row.original.created)
|
||||
},
|
||||
{
|
||||
accessorKey: 'last_login',
|
||||
header: sortableHeader('Last login', 'last_login'),
|
||||
cell: ({ row }) => formatTimestamp(row.original.last_login)
|
||||
}
|
||||
]
|
||||
|
||||
const total = computed(() => data.value?.total ?? 0)
|
||||
const rows = computed(() => data.value?.rows ?? [])
|
||||
|
||||
// Edit slideover state
|
||||
const selectedUser = ref<AdminUserRow | null>(null)
|
||||
const editName = ref('')
|
||||
const editRoles = ref<string[]>([])
|
||||
const saving = ref(false)
|
||||
const savingRoles = ref(false)
|
||||
|
||||
const slideoverOpen = computed({
|
||||
get: () => selectedUser.value !== null,
|
||||
set: (val: boolean) => {
|
||||
if (!val) selectedUser.value = null
|
||||
}
|
||||
})
|
||||
|
||||
const trimmedName = computed(() => editName.value.trim())
|
||||
const nameValid = computed(() => trimmedName.value.length >= 2)
|
||||
const nameChanged = computed(() =>
|
||||
selectedUser.value !== null && trimmedName.value !== selectedUser.value.display_name
|
||||
)
|
||||
const canSave = computed(() => nameValid.value && nameChanged.value && !saving.value)
|
||||
|
||||
const openRow = (row: AdminUserRow) => {
|
||||
selectedUser.value = row
|
||||
editName.value = row.display_name
|
||||
editRoles.value = [...(row.roles ?? [])]
|
||||
}
|
||||
|
||||
const toggleRole = (name: string) => {
|
||||
const idx = editRoles.value.indexOf(name)
|
||||
if (idx === -1) {
|
||||
editRoles.value = [...editRoles.value, name]
|
||||
} else {
|
||||
editRoles.value = editRoles.value.filter(r => r !== name)
|
||||
}
|
||||
}
|
||||
|
||||
const rolesChanged = computed(() => {
|
||||
if (!selectedUser.value) return false
|
||||
const a = [...(selectedUser.value.roles ?? [])].sort()
|
||||
const b = [...editRoles.value].sort()
|
||||
return a.length !== b.length || a.some((r, i) => r !== b[i])
|
||||
})
|
||||
|
||||
const handleSaveRoles = async () => {
|
||||
if (!selectedUser.value || !rolesChanged.value) return
|
||||
savingRoles.value = true
|
||||
try {
|
||||
const response = await $fetch<{ user: { id: string; roles: string[] } }>(
|
||||
`/api/admin/users/${selectedUser.value.id}/roles`,
|
||||
{ method: 'PUT', body: { roles: editRoles.value } }
|
||||
)
|
||||
|
||||
const updatedRoles = response.user.roles
|
||||
if (data.value) {
|
||||
data.value = {
|
||||
...data.value,
|
||||
rows: data.value.rows.map(r =>
|
||||
r.id === response.user.id ? { ...r, roles: updatedRoles } : r
|
||||
)
|
||||
}
|
||||
}
|
||||
if (selectedUser.value) {
|
||||
selectedUser.value = { ...selectedUser.value, roles: updatedRoles }
|
||||
}
|
||||
|
||||
toast.add({ title: 'Roles updated', color: 'success' })
|
||||
} catch (err: any) {
|
||||
toast.add({
|
||||
title: 'Update failed',
|
||||
description: err?.data?.statusMessage || err?.message || 'Failed to update roles',
|
||||
color: 'error'
|
||||
})
|
||||
} finally {
|
||||
savingRoles.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleRowSelect = (_event: Event, row: { original: AdminUserRow }) => {
|
||||
if (!canManageUsers.value) return
|
||||
openRow(row.original)
|
||||
}
|
||||
|
||||
const tableMeta = computed(() => ({
|
||||
class: {
|
||||
tr: (row: { original: AdminUserRow }) =>
|
||||
selectedUser.value?.id === row.original.id ? 'bg-(--ui-bg-accented)' : ''
|
||||
}
|
||||
}))
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!selectedUser.value || !canSave.value) return
|
||||
saving.value = true
|
||||
try {
|
||||
const response = await $fetch<{ user: AdminUserRow }>(`/api/admin/users/${selectedUser.value.id}`, {
|
||||
method: 'PATCH',
|
||||
body: { display_name: trimmedName.value }
|
||||
})
|
||||
|
||||
if (data.value) {
|
||||
data.value = {
|
||||
...data.value,
|
||||
rows: data.value.rows.map(r => r.id === response.user.id ? response.user : r)
|
||||
}
|
||||
}
|
||||
|
||||
toast.add({ title: 'User updated', color: 'success' })
|
||||
selectedUser.value = null
|
||||
} catch (err: any) {
|
||||
toast.add({
|
||||
title: 'Update failed',
|
||||
description: err?.data?.statusMessage || err?.message || 'Failed to update user',
|
||||
color: 'error'
|
||||
})
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Delete flow
|
||||
const deleteModalOpen = ref(false)
|
||||
const deleting = ref(false)
|
||||
|
||||
const isSelf = computed(() =>
|
||||
!!(selectedUser.value && currentUser.value && selectedUser.value.id === currentUser.value.id)
|
||||
)
|
||||
|
||||
const requestDelete = () => {
|
||||
if (!selectedUser.value || isSelf.value) return
|
||||
deleteModalOpen.value = true
|
||||
}
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!selectedUser.value || isSelf.value) return
|
||||
deleting.value = true
|
||||
try {
|
||||
const userId = selectedUser.value.id
|
||||
await $fetch(`/api/admin/users/${userId}`, { method: 'DELETE' })
|
||||
|
||||
if (data.value) {
|
||||
data.value = {
|
||||
...data.value,
|
||||
rows: data.value.rows.filter(r => r.id !== userId),
|
||||
total: Math.max(0, data.value.total - 1)
|
||||
}
|
||||
}
|
||||
|
||||
toast.add({ title: 'User deleted', color: 'success' })
|
||||
deleteModalOpen.value = false
|
||||
selectedUser.value = null
|
||||
} catch (err: any) {
|
||||
toast.add({
|
||||
title: 'Delete failed',
|
||||
description: err?.data?.statusMessage || err?.message || 'Failed to delete user',
|
||||
color: 'error'
|
||||
})
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 mb-6">
|
||||
<h1 class="text-3xl font-bold">Users</h1>
|
||||
<UInput
|
||||
v-model="search"
|
||||
placeholder="Search name or email..."
|
||||
icon="i-lucide-search"
|
||||
class="w-full sm:w-80"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UAlert v-if="error" color="error" :title="error.statusMessage || 'Failed to load users'" class="mb-4" />
|
||||
|
||||
<div class="border border-(--ui-border) rounded-lg overflow-hidden bg-(--ui-bg-elevated)">
|
||||
<UTable
|
||||
:data="rows"
|
||||
:columns="columns"
|
||||
:loading="pending"
|
||||
:empty-state="{ icon: 'i-lucide-users', label: 'No users found' }"
|
||||
:on-select="handleRowSelect"
|
||||
:meta="tableMeta"
|
||||
:ui="{ tr: canManageUsers ? 'transition-colors cursor-pointer' : 'transition-colors' }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap items-center justify-between gap-4 mt-4">
|
||||
<p class="text-sm text-(--ui-text-muted)">
|
||||
{{ total }} {{ total === 1 ? 'user' : 'users' }}
|
||||
</p>
|
||||
<UPagination
|
||||
v-model:page="page"
|
||||
:total="total"
|
||||
:items-per-page="pageSize"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<USlideover
|
||||
v-model:open="slideoverOpen"
|
||||
side="right"
|
||||
:title="selectedUser?.display_name || ''"
|
||||
:ui="{ content: 'w-screen max-w-full sm:max-w-none sm:w-[50vw]' }"
|
||||
>
|
||||
<template #actions>
|
||||
<UTooltip :text="isSelf ? 'Cannot delete your own account' : 'Delete user'">
|
||||
<UButton
|
||||
icon="i-lucide-trash-2"
|
||||
color="error"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
:disabled="isSelf"
|
||||
aria-label="Delete user"
|
||||
@click="requestDelete"
|
||||
/>
|
||||
</UTooltip>
|
||||
</template>
|
||||
<template #body>
|
||||
<div v-if="selectedUser" class="space-y-8">
|
||||
<!-- Identity hero -->
|
||||
<section class="flex items-start gap-4">
|
||||
<div class="shrink-0 size-16 rounded-full bg-gradient-to-br from-(--ui-primary) to-(--ui-primary)/60 text-white flex items-center justify-center text-xl font-semibold ring-1 ring-(--ui-border) shadow-sm">
|
||||
{{ initialsOf(selectedUser.display_name, selectedUser.email) }}
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<h2 class="text-xl font-semibold truncate">{{ selectedUser.display_name }}</h2>
|
||||
<UBadge
|
||||
v-for="role in selectedUser.roles ?? []"
|
||||
:key="role"
|
||||
:color="role === 'admin' ? 'warning' : 'neutral'"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
<UIcon v-if="role === 'admin'" name="i-lucide-shield" class="size-3 mr-1" />
|
||||
{{ role }}
|
||||
</UBadge>
|
||||
</div>
|
||||
<a
|
||||
:href="`mailto:${selectedUser.email}`"
|
||||
class="text-sm text-(--ui-text-muted) hover:text-(--ui-text) transition-colors inline-flex items-center gap-1.5 mt-0.5 truncate"
|
||||
>
|
||||
<UIcon name="i-lucide-mail" class="size-3.5 shrink-0" />
|
||||
<span class="truncate">{{ selectedUser.email }}</span>
|
||||
</a>
|
||||
<div class="mt-2.5">
|
||||
<UBadge
|
||||
:color="selectedUser.verified ? 'success' : 'neutral'"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
<UIcon
|
||||
:name="selectedUser.verified ? 'i-lucide-badge-check' : 'i-lucide-circle-dashed'"
|
||||
class="size-3 mr-1"
|
||||
/>
|
||||
{{ selectedUser.verified ? 'Verified' : 'Unverified' }}
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Stat cards -->
|
||||
<section class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
<div class="rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated) p-4">
|
||||
<div class="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-(--ui-text-muted)">
|
||||
<UIcon name="i-lucide-calendar-plus" class="size-3.5" />
|
||||
<span>Created</span>
|
||||
</div>
|
||||
<p class="mt-1.5 text-sm font-medium">{{ formatDate(selectedUser.created) }}</p>
|
||||
<p class="text-xs text-(--ui-text-muted) mt-0.5">{{ relativeTime(selectedUser.created) || '—' }}</p>
|
||||
</div>
|
||||
<div class="rounded-lg border border-(--ui-border) bg-(--ui-bg-elevated) p-4">
|
||||
<div class="flex items-center gap-2 text-xs font-medium uppercase tracking-wide text-(--ui-text-muted)">
|
||||
<UIcon name="i-lucide-log-in" class="size-3.5" />
|
||||
<span>Last login</span>
|
||||
</div>
|
||||
<p class="mt-1.5 text-sm font-medium">
|
||||
{{ selectedUser.last_login ? formatTimestamp(selectedUser.last_login) : 'Never' }}
|
||||
</p>
|
||||
<p class="text-xs text-(--ui-text-muted) mt-0.5">
|
||||
{{ selectedUser.last_login ? relativeTime(selectedUser.last_login) : '—' }}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Edit form -->
|
||||
<section>
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<UIcon name="i-lucide-pencil" class="size-4 text-(--ui-text-muted)" />
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wide text-(--ui-text-muted)">Edit details</h3>
|
||||
<div class="flex-1 h-px bg-(--ui-border)" />
|
||||
</div>
|
||||
|
||||
<form class="space-y-5" @submit.prevent="handleSave">
|
||||
<UFormField
|
||||
label="Display name"
|
||||
:hint="`${trimmedName.length} / 2+ characters`"
|
||||
:error="editName && !nameValid ? 'Must be at least 2 characters' : undefined"
|
||||
>
|
||||
<UInput
|
||||
v-model="editName"
|
||||
size="lg"
|
||||
icon="i-lucide-user"
|
||||
:disabled="saving"
|
||||
placeholder="Display name"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<div class="flex items-center gap-3 pt-2">
|
||||
<UButton
|
||||
type="submit"
|
||||
size="lg"
|
||||
icon="i-lucide-save"
|
||||
:loading="saving"
|
||||
:disabled="!canSave"
|
||||
>
|
||||
Save changes
|
||||
</UButton>
|
||||
<UButton
|
||||
type="button"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
size="lg"
|
||||
:disabled="saving"
|
||||
@click="slideoverOpen = false"
|
||||
>
|
||||
Cancel
|
||||
</UButton>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<!-- Roles editor -->
|
||||
<section>
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<UIcon name="i-lucide-shield" class="size-4 text-(--ui-text-muted)" />
|
||||
<h3 class="text-sm font-semibold uppercase tracking-wide text-(--ui-text-muted)">Roles</h3>
|
||||
<div class="flex-1 h-px bg-(--ui-border)" />
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<label
|
||||
v-for="role in availableRoles"
|
||||
:key="role.name"
|
||||
class="flex items-start gap-3 p-3 rounded-lg border border-(--ui-border) transition-colors"
|
||||
:class="canAssignRole(role)
|
||||
? 'hover:bg-(--ui-bg-accented) cursor-pointer'
|
||||
: 'opacity-60 cursor-not-allowed'"
|
||||
>
|
||||
<UTooltip
|
||||
:text="!canAssignRole(role)
|
||||
? `You lack: ${missingPermsForRole(role).join(', ')}`
|
||||
: ''"
|
||||
:disabled="canAssignRole(role)"
|
||||
>
|
||||
<UCheckbox
|
||||
:model-value="editRoles.includes(role.name)"
|
||||
:disabled="savingRoles || !canAssignRole(role)"
|
||||
@update:model-value="toggleRole(role.name)"
|
||||
/>
|
||||
</UTooltip>
|
||||
<div class="flex-1 min-w-0">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="font-medium">{{ role.name }}</span>
|
||||
<UBadge
|
||||
v-if="!canAssignRole(role)"
|
||||
color="warning"
|
||||
variant="subtle"
|
||||
size="sm"
|
||||
>
|
||||
Cannot assign
|
||||
</UBadge>
|
||||
</div>
|
||||
<div v-if="role.description" class="text-sm text-(--ui-text-muted) mt-0.5">
|
||||
{{ role.description }}
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-3 pt-4">
|
||||
<UButton
|
||||
size="lg"
|
||||
icon="i-lucide-save"
|
||||
:loading="savingRoles"
|
||||
:disabled="!rolesChanged || savingRoles"
|
||||
@click="handleSaveRoles"
|
||||
>
|
||||
Save roles
|
||||
</UButton>
|
||||
<p v-if="rolesChanged" class="text-sm text-(--ui-text-muted)">
|
||||
{{ editRoles.length }} {{ editRoles.length === 1 ? 'role' : 'roles' }} selected
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
</USlideover>
|
||||
|
||||
<UModal v-model:open="deleteModalOpen" :dismissible="!deleting">
|
||||
<template #content>
|
||||
<div class="p-6 space-y-5">
|
||||
<div class="flex items-start gap-3">
|
||||
<div class="shrink-0 size-10 rounded-full bg-(--ui-error)/10 flex items-center justify-center">
|
||||
<UIcon name="i-lucide-triangle-alert" class="size-5 text-(--ui-error)" />
|
||||
</div>
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 class="text-lg font-semibold">Delete user?</h3>
|
||||
<p class="text-sm text-(--ui-text-muted) mt-1">
|
||||
This will permanently delete
|
||||
<span class="font-medium text-(--ui-text)">{{ selectedUser?.display_name }}</span>
|
||||
({{ selectedUser?.email }}) and their password reset records. Activity history is retained. This cannot be undone.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-end gap-3 pt-2">
|
||||
<UButton
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
:disabled="deleting"
|
||||
@click="deleteModalOpen = false"
|
||||
>
|
||||
Cancel
|
||||
</UButton>
|
||||
<UButton
|
||||
color="error"
|
||||
icon="i-lucide-trash-2"
|
||||
:loading="deleting"
|
||||
@click="handleDelete"
|
||||
>
|
||||
Delete user
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</div>
|
||||
</template>
|
||||
12
app/pages/dashboard.vue
Normal file
12
app/pages/dashboard.vue
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold mb-6">Dashboard</h1>
|
||||
<p class="text-(--ui-text-muted)">Welcome to your dashboard.</p>
|
||||
</div>
|
||||
</template>
|
||||
34
app/pages/index.vue
Normal file
34
app/pages/index.vue
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: false
|
||||
})
|
||||
|
||||
const { isLoggedIn } = useAuth()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="min-h-screen bg-(--ui-bg)">
|
||||
<div class="flex justify-end p-4">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
<div class="text-center py-16 px-4">
|
||||
<h1 class="text-4xl font-bold text-(--ui-text) mb-4">Welcome</h1>
|
||||
<p class="text-(--ui-text-muted) mb-8 max-w-lg mx-auto">
|
||||
Get started by customizing this page.
|
||||
</p>
|
||||
<div v-if="!isLoggedIn" class="flex items-center justify-center gap-3">
|
||||
<UButton to="/login" size="lg">
|
||||
Sign in
|
||||
</UButton>
|
||||
<UButton to="/register" size="lg" variant="outline">
|
||||
Create an account
|
||||
</UButton>
|
||||
</div>
|
||||
<div v-else>
|
||||
<UButton to="/dashboard" size="lg">
|
||||
Go to dashboard
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
292
app/pages/login.vue
Normal file
292
app/pages/login.vue
Normal file
|
|
@ -0,0 +1,292 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'auth'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const { login } = useAuth()
|
||||
|
||||
const state = reactive({
|
||||
email: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const successMessage = ref('')
|
||||
|
||||
// Forgot password state
|
||||
const view = ref<'login' | 'reset'>('login')
|
||||
const resetEmail = ref('')
|
||||
const resetLoading = ref(false)
|
||||
const resetError = ref('')
|
||||
const resetSuccess = ref(false)
|
||||
const sentToEmail = ref('')
|
||||
|
||||
// Check for verification status in query params
|
||||
onMounted(() => {
|
||||
const verified = route.query.verified as string
|
||||
if (verified === 'success') {
|
||||
successMessage.value = 'Email verified successfully! You can now sign in.'
|
||||
} else if (verified === 'already') {
|
||||
successMessage.value = 'Your email is already verified. Please sign in.'
|
||||
}
|
||||
})
|
||||
|
||||
async function handleLogin() {
|
||||
error.value = ''
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const result = await login(state.email, state.password)
|
||||
|
||||
if (!result.success) {
|
||||
error.value = result.message || 'Login failed. Please check your credentials.'
|
||||
}
|
||||
// On success, useAuth composable will handle navigation
|
||||
} catch (err: any) {
|
||||
error.value = err.data?.message || 'An error occurred during login. Please try again.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const redirectToRegister = () => {
|
||||
const redirect = route.query.redirect as string
|
||||
if (redirect) {
|
||||
router.push(`/register?redirect=${encodeURIComponent(redirect)}`)
|
||||
} else {
|
||||
router.push('/register')
|
||||
}
|
||||
}
|
||||
|
||||
async function handleForgotPassword() {
|
||||
resetError.value = ''
|
||||
resetLoading.value = true
|
||||
|
||||
try {
|
||||
const response = await $fetch('/api/auth/forgot-password', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
email: resetEmail.value
|
||||
}
|
||||
})
|
||||
|
||||
resetSuccess.value = true
|
||||
sentToEmail.value = resetEmail.value
|
||||
resetEmail.value = ''
|
||||
} catch (err: any) {
|
||||
resetError.value = err.data?.message || 'An error occurred. Please try again.'
|
||||
} finally {
|
||||
resetLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function switchToLogin() {
|
||||
view.value = 'login'
|
||||
resetSuccess.value = false
|
||||
resetError.value = ''
|
||||
sentToEmail.value = ''
|
||||
}
|
||||
|
||||
function switchToReset() {
|
||||
view.value = 'reset'
|
||||
error.value = ''
|
||||
successMessage.value = ''
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Logo/Header -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-4xl font-bold text-(--ui-text) mb-2">
|
||||
{{ view === 'login' ? 'Welcome Back' : 'Reset Password' }}
|
||||
</h1>
|
||||
<p class="text-(--ui-text-muted)">
|
||||
{{ view === 'login' ? 'Sign in to your account' : 'Enter your email to receive reset instructions' }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Login View -->
|
||||
<UCard v-if="view === 'login'" :ui="{ body: 'p-6 sm:p-8' }">
|
||||
<form @submit.prevent="handleLogin" class="space-y-6">
|
||||
<!-- Success Alert -->
|
||||
<UAlert
|
||||
v-if="successMessage"
|
||||
color="success"
|
||||
variant="soft"
|
||||
:title="successMessage"
|
||||
@close="successMessage = ''"
|
||||
:close-button="{ icon: 'i-lucide-x', color: 'gray', variant: 'ghost' }"
|
||||
/>
|
||||
|
||||
<!-- Error Alert -->
|
||||
<UAlert
|
||||
v-if="error"
|
||||
color="error"
|
||||
variant="soft"
|
||||
:title="error"
|
||||
@close="error = ''"
|
||||
:close-button="{ icon: 'i-lucide-x', color: 'gray', variant: 'ghost' }"
|
||||
/>
|
||||
|
||||
<!-- Email Input -->
|
||||
<div class="space-y-2">
|
||||
<UFormField label="Email" name="email" required>
|
||||
<UInput
|
||||
v-model="state.email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
size="lg"
|
||||
:disabled="loading"
|
||||
autocomplete="email"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Password Input -->
|
||||
<div class="space-y-2">
|
||||
<UFormField label="Password" name="password" required>
|
||||
<UInput
|
||||
v-model="state.password"
|
||||
type="password"
|
||||
placeholder="Enter your password"
|
||||
size="lg"
|
||||
:disabled="loading"
|
||||
autocomplete="current-password"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Forgot Password Link -->
|
||||
<div class="text-right">
|
||||
<button
|
||||
type="button"
|
||||
@click="switchToReset"
|
||||
class="text-sm text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"
|
||||
:disabled="loading"
|
||||
>
|
||||
Forgot Password?
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
size="lg"
|
||||
block
|
||||
:loading="loading"
|
||||
:disabled="loading || !state.email || !state.password"
|
||||
>
|
||||
Sign In
|
||||
</UButton>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-(--ui-border)"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span class="px-2 bg-(--ui-bg) text-(--ui-text-muted)">Don't have an account?</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Register Link -->
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
block
|
||||
@click="redirectToRegister"
|
||||
:disabled="loading"
|
||||
>
|
||||
Create Account
|
||||
</UButton>
|
||||
</form>
|
||||
</UCard>
|
||||
|
||||
<!-- Forgot Password View -->
|
||||
<UCard v-else :ui="{ body: 'p-6 sm:p-8' }">
|
||||
<form @submit.prevent="handleForgotPassword" class="space-y-6">
|
||||
<!-- Success Message -->
|
||||
<div v-if="resetSuccess" class="space-y-4">
|
||||
<UAlert
|
||||
color="success"
|
||||
variant="soft"
|
||||
title="Email Sent!"
|
||||
:close-button="{ icon: 'i-lucide-x', color: 'gray', variant: 'ghost' }"
|
||||
@close="resetSuccess = false"
|
||||
/>
|
||||
<p class="text-(--ui-text-muted)">
|
||||
If an account with <strong>{{ sentToEmail }}</strong> exists, you will receive password reset instructions shortly.
|
||||
</p>
|
||||
<p class="text-sm text-(--ui-text-dimmed)">
|
||||
Check your email inbox and spam folder.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Reset Form -->
|
||||
<div v-else class="space-y-6">
|
||||
<!-- Error Alert -->
|
||||
<UAlert
|
||||
v-if="resetError"
|
||||
color="error"
|
||||
variant="soft"
|
||||
:title="resetError"
|
||||
@close="resetError = ''"
|
||||
:close-button="{ icon: 'i-lucide-x', color: 'gray', variant: 'ghost' }"
|
||||
/>
|
||||
|
||||
<!-- Email Input -->
|
||||
<div class="space-y-2">
|
||||
<UFormField label="Email" name="email" required>
|
||||
<UInput
|
||||
v-model="resetEmail"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
size="lg"
|
||||
:disabled="resetLoading"
|
||||
autocomplete="email"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
size="lg"
|
||||
block
|
||||
:loading="resetLoading"
|
||||
:disabled="resetLoading || !resetEmail"
|
||||
>
|
||||
Send Reset Link
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<!-- Back to Login -->
|
||||
<div class="text-center">
|
||||
<button
|
||||
type="button"
|
||||
@click="switchToLogin"
|
||||
class="text-sm text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"
|
||||
:disabled="resetLoading"
|
||||
>
|
||||
← Back to Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</UCard>
|
||||
|
||||
<!-- Footer -->
|
||||
<p class="text-center text-sm text-(--ui-text-dimmed) mt-8">
|
||||
By signing in, you agree to our Terms of Service and Privacy Policy
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
464
app/pages/profile.vue
Normal file
464
app/pages/profile.vue
Normal file
|
|
@ -0,0 +1,464 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
middleware: 'auth'
|
||||
})
|
||||
|
||||
const { user, logout, deleteAccount } = useAuth()
|
||||
const route = useRoute()
|
||||
|
||||
// Check for email change status in query params
|
||||
onMounted(() => {
|
||||
const emailChangeStatus = route.query.email_change as string
|
||||
if (emailChangeStatus) {
|
||||
switch (emailChangeStatus) {
|
||||
case 'success':
|
||||
emailSuccess.value = 'Email address successfully changed! You can now log in with your new email.'
|
||||
break
|
||||
case 'invalid_token':
|
||||
emailError.value = 'Invalid or expired verification link'
|
||||
break
|
||||
case 'no_pending':
|
||||
emailError.value = 'No pending email change found'
|
||||
break
|
||||
case 'email_taken':
|
||||
emailError.value = 'The new email address is already in use'
|
||||
break
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// State for name change
|
||||
const nameState = reactive({
|
||||
display_name: user.value?.display_name || ''
|
||||
})
|
||||
const nameLoading = ref(false)
|
||||
const nameError = ref('')
|
||||
const nameSuccess = ref('')
|
||||
|
||||
// State for email change
|
||||
const emailState = reactive({
|
||||
new_email: '',
|
||||
current_password: ''
|
||||
})
|
||||
const emailLoading = ref(false)
|
||||
const emailError = ref('')
|
||||
const emailSuccess = ref('')
|
||||
|
||||
const canSubmitEmail = computed(() => {
|
||||
return emailState.new_email.trim() &&
|
||||
emailState.current_password &&
|
||||
!emailLoading.value &&
|
||||
emailState.new_email !== user.value?.email
|
||||
})
|
||||
|
||||
// State for password change
|
||||
const passwordState = reactive({
|
||||
current_password: '',
|
||||
new_password: '',
|
||||
confirm_password: ''
|
||||
})
|
||||
const passwordLoading = ref(false)
|
||||
const passwordError = ref('')
|
||||
const passwordSuccess = ref('')
|
||||
|
||||
// State for account deletion
|
||||
const deleteState = reactive({
|
||||
password: '',
|
||||
confirmDelete: false
|
||||
})
|
||||
const deleteLoading = ref(false)
|
||||
const deleteError = ref('')
|
||||
|
||||
// Watch user changes to update name field
|
||||
watch(user, (newUser) => {
|
||||
if (newUser) {
|
||||
nameState.display_name = newUser.display_name
|
||||
}
|
||||
})
|
||||
|
||||
// Password validation
|
||||
const passwordMatch = computed(() => {
|
||||
return passwordState.new_password === passwordState.confirm_password
|
||||
})
|
||||
|
||||
const passwordStrength = computed(() => {
|
||||
const password = passwordState.new_password
|
||||
if (password.length === 0) return { strength: 0, label: '', color: 'gray' }
|
||||
if (password.length < 8) return { strength: 25, label: 'Weak', color: 'red' }
|
||||
if (password.length < 12) return { strength: 50, label: 'Fair', color: 'yellow' }
|
||||
if (!/[A-Z]/.test(password) || !/[a-z]/.test(password) || !/[0-9]/.test(password)) {
|
||||
return { strength: 50, label: 'Fair', color: 'yellow' }
|
||||
}
|
||||
return { strength: 100, label: 'Strong', color: 'green' }
|
||||
})
|
||||
|
||||
const canSubmitPassword = computed(() => {
|
||||
return passwordState.current_password &&
|
||||
passwordState.new_password.length >= 8 &&
|
||||
passwordMatch.value &&
|
||||
!passwordLoading.value
|
||||
})
|
||||
|
||||
// Handle name update
|
||||
async function handleNameUpdate() {
|
||||
nameError.value = ''
|
||||
nameSuccess.value = ''
|
||||
|
||||
if (!nameState.display_name.trim()) {
|
||||
nameError.value = 'Display name is required'
|
||||
return
|
||||
}
|
||||
|
||||
nameLoading.value = true
|
||||
|
||||
try {
|
||||
await $fetch('/api/profile/name', {
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
display_name: nameState.display_name.trim()
|
||||
}
|
||||
})
|
||||
|
||||
nameSuccess.value = 'Display name updated successfully'
|
||||
|
||||
// Update user in auth composable
|
||||
if (user.value) {
|
||||
user.value.display_name = nameState.display_name.trim()
|
||||
}
|
||||
} catch (err: any) {
|
||||
nameError.value = err.data?.statusMessage || 'Failed to update display name'
|
||||
} finally {
|
||||
nameLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Handle email change
|
||||
async function handleEmailChange() {
|
||||
emailError.value = ''
|
||||
emailSuccess.value = ''
|
||||
|
||||
if (!canSubmitEmail.value) {
|
||||
return
|
||||
}
|
||||
|
||||
// Basic email validation
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (!emailRegex.test(emailState.new_email)) {
|
||||
emailError.value = 'Please enter a valid email address'
|
||||
return
|
||||
}
|
||||
|
||||
emailLoading.value = true
|
||||
|
||||
try {
|
||||
await $fetch('/api/profile/email', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
new_email: emailState.new_email.trim(),
|
||||
current_password: emailState.current_password
|
||||
}
|
||||
})
|
||||
|
||||
emailSuccess.value = 'Verification email sent! Please check your new email address to confirm the change.'
|
||||
|
||||
// Reset form
|
||||
emailState.new_email = ''
|
||||
emailState.current_password = ''
|
||||
} catch (err: any) {
|
||||
emailError.value = err.data?.statusMessage || 'Failed to request email change'
|
||||
} finally {
|
||||
emailLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Handle password change
|
||||
async function handlePasswordChange() {
|
||||
passwordError.value = ''
|
||||
passwordSuccess.value = ''
|
||||
|
||||
if (!canSubmitPassword.value) {
|
||||
return
|
||||
}
|
||||
|
||||
passwordLoading.value = true
|
||||
|
||||
try {
|
||||
await $fetch('/api/profile/password', {
|
||||
method: 'PATCH',
|
||||
body: {
|
||||
current_password: passwordState.current_password,
|
||||
new_password: passwordState.new_password
|
||||
}
|
||||
})
|
||||
|
||||
passwordSuccess.value = 'Password changed successfully'
|
||||
|
||||
// Reset form
|
||||
passwordState.current_password = ''
|
||||
passwordState.new_password = ''
|
||||
passwordState.confirm_password = ''
|
||||
} catch (err: any) {
|
||||
passwordError.value = err.data?.statusMessage || 'Failed to change password'
|
||||
} finally {
|
||||
passwordLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Handle account deletion
|
||||
async function handleDeleteAccount() {
|
||||
deleteError.value = ''
|
||||
|
||||
if (!deleteState.password || !deleteState.confirmDelete) {
|
||||
return
|
||||
}
|
||||
|
||||
deleteLoading.value = true
|
||||
|
||||
try {
|
||||
const result = await deleteAccount(deleteState.password)
|
||||
|
||||
if (!result.success) {
|
||||
deleteError.value = result.message || 'Failed to delete account'
|
||||
}
|
||||
} catch (err: any) {
|
||||
deleteError.value = err.data?.statusMessage || 'Failed to delete account'
|
||||
} finally {
|
||||
deleteLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// Reset delete confirmation when password changes
|
||||
watch(() => deleteState.password, () => {
|
||||
deleteState.confirmDelete = false
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="max-w-2xl mx-auto space-y-6">
|
||||
<h1 class="text-3xl font-bold">Profile Settings</h1>
|
||||
|
||||
<!-- Account Info -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold">Account Information</h2>
|
||||
</template>
|
||||
<div class="space-y-2 text-sm">
|
||||
<div>
|
||||
<span class="font-medium">Email:</span>
|
||||
<span class="ml-2 text-(--ui-text-muted)">{{ user?.email }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">Account created:</span>
|
||||
<span class="ml-2 text-(--ui-text-muted)">
|
||||
{{ new Date(user?.created).toLocaleDateString() }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Change Display Name -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold">Change Display Name</h2>
|
||||
</template>
|
||||
<form @submit.prevent="handleNameUpdate" class="space-y-4">
|
||||
<UFormField label="Display Name">
|
||||
<UInput
|
||||
v-model="nameState.display_name"
|
||||
type="text"
|
||||
size="lg"
|
||||
:disabled="nameLoading"
|
||||
placeholder="Enter your display name"
|
||||
/>
|
||||
</UFormField>
|
||||
<UAlert v-if="nameError" color="error" :title="nameError" />
|
||||
<UAlert v-if="nameSuccess" color="success" :title="nameSuccess" />
|
||||
<UButton
|
||||
type="submit"
|
||||
size="lg"
|
||||
:loading="nameLoading"
|
||||
:disabled="!nameState.display_name.trim() || nameLoading"
|
||||
>
|
||||
Update Name
|
||||
</UButton>
|
||||
</form>
|
||||
</UCard>
|
||||
|
||||
<!-- Change Email -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold">Change Email Address</h2>
|
||||
</template>
|
||||
<form @submit.prevent="handleEmailChange" class="space-y-4">
|
||||
<div class="text-sm text-(--ui-text-muted) mb-4">
|
||||
<p>Current email: <strong>{{ user?.email }}</strong></p>
|
||||
<p class="mt-2">A verification link will be sent to your new email address.</p>
|
||||
</div>
|
||||
<UFormField label="New Email Address">
|
||||
<UInput
|
||||
v-model="emailState.new_email"
|
||||
type="email"
|
||||
size="lg"
|
||||
:disabled="emailLoading"
|
||||
placeholder="Enter new email address"
|
||||
autocomplete="email"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="Current Password">
|
||||
<UInput
|
||||
v-model="emailState.current_password"
|
||||
type="password"
|
||||
size="lg"
|
||||
:disabled="emailLoading"
|
||||
placeholder="Enter your current password"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</UFormField>
|
||||
<UAlert v-if="emailError" color="error" :title="emailError" />
|
||||
<UAlert v-if="emailSuccess" color="success" :title="emailSuccess" />
|
||||
<UButton
|
||||
type="submit"
|
||||
size="lg"
|
||||
:loading="emailLoading"
|
||||
:disabled="!canSubmitEmail"
|
||||
>
|
||||
Send Verification Email
|
||||
</UButton>
|
||||
</form>
|
||||
</UCard>
|
||||
|
||||
<!-- Change Password -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold">Change Password</h2>
|
||||
</template>
|
||||
<form @submit.prevent="handlePasswordChange" class="space-y-4">
|
||||
<UFormField label="Current Password">
|
||||
<UInput
|
||||
v-model="passwordState.current_password"
|
||||
type="password"
|
||||
size="lg"
|
||||
:disabled="passwordLoading"
|
||||
placeholder="Enter current password"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</UFormField>
|
||||
<UFormField label="New Password">
|
||||
<UInput
|
||||
v-model="passwordState.new_password"
|
||||
type="password"
|
||||
size="lg"
|
||||
:disabled="passwordLoading"
|
||||
placeholder="Enter new password (min 8 characters)"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</UFormField>
|
||||
<!-- Password Strength Indicator -->
|
||||
<div v-if="passwordState.new_password" class="space-y-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span>Password Strength:</span>
|
||||
<span :class="{
|
||||
'text-red-600': passwordStrength.color === 'red',
|
||||
'text-yellow-600': passwordStrength.color === 'yellow',
|
||||
'text-green-600': passwordStrength.color === 'green'
|
||||
}">
|
||||
{{ passwordStrength.label }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-2 bg-(--ui-bg-accented) rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full transition-all duration-300"
|
||||
:class="{
|
||||
'bg-red-500': passwordStrength.color === 'red',
|
||||
'bg-yellow-500': passwordStrength.color === 'yellow',
|
||||
'bg-green-500': passwordStrength.color === 'green'
|
||||
}"
|
||||
:style="{ width: passwordStrength.strength + '%' }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<UFormField label="Confirm New Password">
|
||||
<UInput
|
||||
v-model="passwordState.confirm_password"
|
||||
type="password"
|
||||
size="lg"
|
||||
:disabled="passwordLoading"
|
||||
placeholder="Confirm new password"
|
||||
autocomplete="new-password"
|
||||
/>
|
||||
</UFormField>
|
||||
<!-- Password Match Indicator -->
|
||||
<div v-if="passwordState.confirm_password" class="text-sm">
|
||||
<span v-if="passwordMatch" class="text-green-600">Passwords match</span>
|
||||
<span v-else class="text-red-600">Passwords do not match</span>
|
||||
</div>
|
||||
<UAlert v-if="passwordError" color="error" :title="passwordError" />
|
||||
<UAlert v-if="passwordSuccess" color="success" :title="passwordSuccess" />
|
||||
<UButton
|
||||
type="submit"
|
||||
size="lg"
|
||||
:loading="passwordLoading"
|
||||
:disabled="!canSubmitPassword"
|
||||
>
|
||||
Change Password
|
||||
</UButton>
|
||||
</form>
|
||||
</UCard>
|
||||
|
||||
<!-- Sign Out -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold">Sign Out</h2>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm text-(--ui-text-muted)">
|
||||
Sign out of your account on this device.
|
||||
</p>
|
||||
<UButton color="error" variant="outline" size="lg" @click="logout">
|
||||
Sign Out
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Delete Account -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h2 class="text-xl font-semibold text-red-600">Delete Account</h2>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<UAlert
|
||||
color="warning"
|
||||
title="Warning: This action is permanent"
|
||||
description="Deleting your account will permanently remove all your data. This action cannot be undone."
|
||||
/>
|
||||
<UFormField label="Enter your password to confirm">
|
||||
<UInput
|
||||
v-model="deleteState.password"
|
||||
type="password"
|
||||
size="lg"
|
||||
:disabled="deleteLoading"
|
||||
placeholder="Enter your password"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</UFormField>
|
||||
<div class="flex items-center gap-2">
|
||||
<UCheckbox
|
||||
v-model="deleteState.confirmDelete"
|
||||
:disabled="!deleteState.password || deleteLoading"
|
||||
/>
|
||||
<span class="text-sm">I understand this action is permanent and cannot be undone</span>
|
||||
</div>
|
||||
<UAlert v-if="deleteError" color="error" :title="deleteError" />
|
||||
<UButton
|
||||
color="error"
|
||||
size="lg"
|
||||
:loading="deleteLoading"
|
||||
:disabled="!deleteState.password || !deleteState.confirmDelete || deleteLoading"
|
||||
@click="handleDeleteAccount"
|
||||
>
|
||||
Delete My Account
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</template>
|
||||
253
app/pages/register.vue
Normal file
253
app/pages/register.vue
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'auth'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const { register } = useAuth()
|
||||
|
||||
const state = reactive({
|
||||
display_name: '',
|
||||
email: '',
|
||||
password: '',
|
||||
confirmPassword: ''
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
const success = ref(false)
|
||||
|
||||
const passwordMatch = computed(() => {
|
||||
if (!state.confirmPassword) return true
|
||||
return state.password === state.confirmPassword
|
||||
})
|
||||
|
||||
const passwordStrength = computed(() => {
|
||||
const password = state.password
|
||||
if (!password) return { strength: 0, label: '', color: 'gray' }
|
||||
|
||||
let strength = 0
|
||||
if (password.length >= 8) strength++
|
||||
if (password.length >= 12) strength++
|
||||
if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++
|
||||
if (/\d/.test(password)) strength++
|
||||
if (/[^a-zA-Z0-9]/.test(password)) strength++
|
||||
|
||||
const labels = ['Weak', 'Fair', 'Good', 'Strong', 'Very Strong']
|
||||
const colors = ['red', 'orange', 'yellow', 'green', 'emerald']
|
||||
|
||||
return {
|
||||
strength: (strength / 5) * 100,
|
||||
label: labels[strength - 1] || 'Weak',
|
||||
color: colors[strength - 1] || 'red'
|
||||
}
|
||||
})
|
||||
|
||||
async function handleRegister() {
|
||||
error.value = ''
|
||||
|
||||
// Validation
|
||||
if (state.display_name.length < 2) {
|
||||
error.value = 'Display name must be at least 2 characters long'
|
||||
return
|
||||
}
|
||||
|
||||
if (state.password.length < 8) {
|
||||
error.value = 'Password must be at least 8 characters long'
|
||||
return
|
||||
}
|
||||
|
||||
if (state.password !== state.confirmPassword) {
|
||||
error.value = 'Passwords do not match'
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
|
||||
try {
|
||||
const result = await register(state.email, state.password, state.display_name) as { success: boolean; message?: string; autoLoggedIn?: boolean }
|
||||
|
||||
if (result.success) {
|
||||
// First user is auto-logged-in by the server; skip the "check your email" UI.
|
||||
if (result.autoLoggedIn) {
|
||||
await navigateTo('/dashboard', { replace: true })
|
||||
return
|
||||
}
|
||||
success.value = true
|
||||
} else {
|
||||
error.value = result.message || 'Registration failed. Please try again.'
|
||||
}
|
||||
} catch (err: any) {
|
||||
error.value = err.data?.message || 'An error occurred during registration. Please try again.'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const redirectToLogin = () => {
|
||||
const redirect = route.query.redirect as string
|
||||
if (redirect) {
|
||||
router.push(`/login?redirect=${encodeURIComponent(redirect)}`)
|
||||
} else {
|
||||
router.push('/login')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Logo/Header -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-4xl font-bold text-(--ui-text) mb-2">Create Account</h1>
|
||||
<p class="text-(--ui-text-muted)">Join us today</p>
|
||||
</div>
|
||||
|
||||
<!-- Register Card -->
|
||||
<UCard :ui="{ body: 'p-6 sm:p-8' }">
|
||||
<!-- Success Message -->
|
||||
<div v-if="success" class="space-y-4">
|
||||
<UAlert
|
||||
color="success"
|
||||
variant="soft"
|
||||
title="Registration Successful!"
|
||||
description="Please check your email to verify your account."
|
||||
:ui="{ icon: 'i-lucide-check-circle' }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Registration Form -->
|
||||
<form v-else @submit.prevent="handleRegister" class="space-y-6">
|
||||
<!-- Error Alert -->
|
||||
<UAlert
|
||||
v-if="error"
|
||||
color="error"
|
||||
variant="soft"
|
||||
:title="error"
|
||||
@close="error = ''"
|
||||
:close-button="{ icon: 'i-lucide-x', color: 'gray', variant: 'ghost' }"
|
||||
/>
|
||||
|
||||
<!-- Display Name Input -->
|
||||
<div class="space-y-2">
|
||||
<UFormField label="Display Name" name="display_name" required>
|
||||
<UInput
|
||||
v-model="state.display_name"
|
||||
type="text"
|
||||
placeholder="Your name"
|
||||
size="lg"
|
||||
:disabled="loading"
|
||||
autocomplete="name"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Email Input -->
|
||||
<div class="space-y-2">
|
||||
<UFormField label="Email" name="email" required>
|
||||
<UInput
|
||||
v-model="state.email"
|
||||
type="email"
|
||||
placeholder="you@example.com"
|
||||
size="lg"
|
||||
:disabled="loading"
|
||||
autocomplete="email"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Password Input -->
|
||||
<div class="space-y-2">
|
||||
<UFormField label="Password" name="password" required>
|
||||
<UInput
|
||||
v-model="state.password"
|
||||
type="password"
|
||||
placeholder="Create a strong password"
|
||||
size="lg"
|
||||
:disabled="loading"
|
||||
autocomplete="new-password"
|
||||
class="w-full"
|
||||
/>
|
||||
|
||||
<!-- Password Strength Indicator -->
|
||||
<div v-if="state.password" class="mt-2 space-y-1">
|
||||
<div class="flex items-center justify-between text-xs">
|
||||
<span class="text-(--ui-text-muted)">Password strength:</span>
|
||||
<span :class="`font-medium text-${passwordStrength.color}-600`">
|
||||
{{ passwordStrength.label }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="h-1.5 bg-(--ui-bg-accented) rounded-full overflow-hidden">
|
||||
<div
|
||||
:class="`h-full bg-${passwordStrength.color}-500 transition-all duration-300`"
|
||||
:style="{ width: `${passwordStrength.strength}%` }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password Input -->
|
||||
<div class="space-y-2">
|
||||
<UFormField label="Confirm Password" name="confirmPassword" required>
|
||||
<UInput
|
||||
v-model="state.confirmPassword"
|
||||
type="password"
|
||||
placeholder="Confirm your password"
|
||||
size="lg"
|
||||
:disabled="loading"
|
||||
autocomplete="new-password"
|
||||
:ui="{ base: 'px-3 py-2' }"
|
||||
:color="!passwordMatch ? 'error' : undefined"
|
||||
class="w-full"
|
||||
/>
|
||||
<p v-if="!passwordMatch" class="text-xs text-red-600 mt-1">
|
||||
Passwords do not match
|
||||
</p>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
size="lg"
|
||||
block
|
||||
:loading="loading"
|
||||
:disabled="loading || !state.email || !state.password || !state.display_name || !passwordMatch"
|
||||
>
|
||||
Create Account
|
||||
</UButton>
|
||||
|
||||
<!-- Divider -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-(--ui-border)"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center text-sm">
|
||||
<span class="px-2 bg-(--ui-bg) text-(--ui-text-muted)">Already have an account?</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Login Link -->
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="outline"
|
||||
size="lg"
|
||||
block
|
||||
@click="redirectToLogin"
|
||||
:disabled="loading"
|
||||
>
|
||||
Sign In
|
||||
</UButton>
|
||||
</form>
|
||||
</UCard>
|
||||
|
||||
<!-- Footer -->
|
||||
<p class="text-center text-sm text-(--ui-text-dimmed) mt-8">
|
||||
By creating an account, you agree to our Terms of Service and Privacy Policy
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
189
app/pages/reset-password.vue
Normal file
189
app/pages/reset-password.vue
Normal file
|
|
@ -0,0 +1,189 @@
|
|||
<script setup lang="ts">
|
||||
definePageMeta({
|
||||
layout: 'auth'
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
|
||||
const token = computed(() => route.query.token as string)
|
||||
|
||||
const state = reactive({
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
loading: false
|
||||
})
|
||||
|
||||
const error = ref('')
|
||||
const success = ref(false)
|
||||
const invalidToken = ref(false)
|
||||
|
||||
// Validate token on mount
|
||||
onMounted(() => {
|
||||
if (!token.value) {
|
||||
invalidToken.value = true
|
||||
}
|
||||
})
|
||||
|
||||
async function handleResetPassword() {
|
||||
error.value = ''
|
||||
|
||||
// Validate passwords
|
||||
if (state.password.length < 6) {
|
||||
error.value = 'Password must be at least 6 characters'
|
||||
return
|
||||
}
|
||||
|
||||
if (state.password !== state.confirmPassword) {
|
||||
error.value = 'Passwords do not match'
|
||||
return
|
||||
}
|
||||
|
||||
state.loading = true
|
||||
|
||||
try {
|
||||
const response = await $fetch('/api/auth/reset-password', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
token: token.value,
|
||||
password: state.password,
|
||||
confirmPassword: state.confirmPassword
|
||||
}
|
||||
})
|
||||
|
||||
success.value = true
|
||||
|
||||
// Redirect to login after 2 seconds
|
||||
setTimeout(() => {
|
||||
router.push('/login')
|
||||
}, 2000)
|
||||
} catch (err: any) {
|
||||
error.value = err.data?.message || 'An error occurred. Please try again.'
|
||||
} finally {
|
||||
state.loading = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- Logo/Header -->
|
||||
<div class="text-center mb-8">
|
||||
<h1 class="text-4xl font-bold text-(--ui-text) mb-2">Reset Password</h1>
|
||||
<p class="text-(--ui-text-muted)">Enter your new password</p>
|
||||
</div>
|
||||
|
||||
<!-- Invalid Token View -->
|
||||
<UCard v-if="invalidToken" :ui="{ body: 'p-6 sm:p-8' }">
|
||||
<div class="space-y-4">
|
||||
<UAlert
|
||||
color="error"
|
||||
variant="soft"
|
||||
title="Invalid Reset Link"
|
||||
/>
|
||||
<p class="text-(--ui-text-muted)">
|
||||
This password reset link is invalid or has expired. Please request a new password reset.
|
||||
</p>
|
||||
<UButton
|
||||
color="primary"
|
||||
size="lg"
|
||||
block
|
||||
@click="router.push('/login')"
|
||||
>
|
||||
Back to Login
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Success View -->
|
||||
<UCard v-else-if="success" :ui="{ body: 'p-6 sm:p-8' }">
|
||||
<div class="space-y-4">
|
||||
<UAlert
|
||||
color="success"
|
||||
variant="soft"
|
||||
title="Password Reset Successfully!"
|
||||
/>
|
||||
<p class="text-(--ui-text-muted)">
|
||||
Your password has been reset. You can now log in with your new password.
|
||||
</p>
|
||||
<p class="text-sm text-(--ui-text-dimmed)">
|
||||
Redirecting to login page...
|
||||
</p>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Reset Form -->
|
||||
<UCard v-else :ui="{ body: 'p-6 sm:p-8' }">
|
||||
<form @submit.prevent="handleResetPassword" class="space-y-6">
|
||||
<!-- Error Alert -->
|
||||
<UAlert
|
||||
v-if="error"
|
||||
color="error"
|
||||
variant="soft"
|
||||
:title="error"
|
||||
@close="error = ''"
|
||||
:close-button="{ icon: 'i-lucide-x', color: 'gray', variant: 'ghost' }"
|
||||
/>
|
||||
|
||||
<!-- Password Input -->
|
||||
<div class="space-y-2">
|
||||
<UFormField label="New Password" name="password" required>
|
||||
<UInput
|
||||
v-model="state.password"
|
||||
type="password"
|
||||
placeholder="Enter new password (min. 6 characters)"
|
||||
size="lg"
|
||||
:disabled="state.loading"
|
||||
autocomplete="new-password"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Confirm Password Input -->
|
||||
<div class="space-y-2">
|
||||
<UFormField label="Confirm Password" name="confirmPassword" required>
|
||||
<UInput
|
||||
v-model="state.confirmPassword"
|
||||
type="password"
|
||||
placeholder="Confirm new password"
|
||||
size="lg"
|
||||
:disabled="state.loading"
|
||||
autocomplete="new-password"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<UButton
|
||||
type="submit"
|
||||
color="primary"
|
||||
size="lg"
|
||||
block
|
||||
:loading="state.loading"
|
||||
:disabled="state.loading || !state.password || !state.confirmPassword"
|
||||
>
|
||||
Reset Password
|
||||
</UButton>
|
||||
|
||||
<!-- Back to Login -->
|
||||
<div class="text-center">
|
||||
<button
|
||||
type="button"
|
||||
@click="router.push('/login')"
|
||||
class="text-sm text-(--ui-text-muted) hover:text-(--ui-text) transition-colors"
|
||||
:disabled="state.loading"
|
||||
>
|
||||
← Back to Login
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</UCard>
|
||||
|
||||
<!-- Footer -->
|
||||
<p class="text-center text-sm text-(--ui-text-dimmed) mt-8">
|
||||
By resetting your password, you agree to our Terms of Service and Privacy Policy
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
12
app/plugins/auth.client.ts
Normal file
12
app/plugins/auth.client.ts
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
export default defineNuxtPlugin(async () => {
|
||||
const { restoreFromCache, checkAuth, setAuthReady } = useAuth()
|
||||
|
||||
restoreFromCache()
|
||||
|
||||
const hasAuthCookie = document.cookie.includes('auth-token')
|
||||
if (hasAuthCookie) {
|
||||
await checkAuth()
|
||||
}
|
||||
|
||||
setAuthReady(true)
|
||||
})
|
||||
44
app/utils/permissions.ts
Normal file
44
app/utils/permissions.ts
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
// Central permission registry.
|
||||
//
|
||||
// When porting to nuxt-blueprints, each block ships a `permissions.ts` fragment
|
||||
// and blueprint assembly merges the fragments into this file. Consumer projects
|
||||
// own this file and are free to edit it.
|
||||
export const PERMISSIONS = [
|
||||
'admin.access',
|
||||
'users.view',
|
||||
'users.manage',
|
||||
'roles.view',
|
||||
'roles.manage'
|
||||
] as const
|
||||
|
||||
export type Permission = typeof PERMISSIONS[number]
|
||||
|
||||
// Optional: human-readable titles and descriptions shown in admin UI.
|
||||
// Keys must match entries in PERMISSIONS. Missing entries fall back to the raw
|
||||
// permission string.
|
||||
export const PERMISSION_META: Record<string, { title: string; description: string }> = {
|
||||
'admin.access': {
|
||||
title: 'Access admin area',
|
||||
description: 'Required to reach /admin and see the admin shell.'
|
||||
},
|
||||
'users.view': {
|
||||
title: 'View users',
|
||||
description: 'See the users list.'
|
||||
},
|
||||
'users.manage': {
|
||||
title: 'Manage users',
|
||||
description: 'Edit, delete, and assign roles to other users (subject to the subset delegation rule).'
|
||||
},
|
||||
'roles.view': {
|
||||
title: 'View roles',
|
||||
description: 'See the roles reference page.'
|
||||
},
|
||||
'roles.manage': {
|
||||
title: 'Manage roles',
|
||||
description: 'Create, edit, and delete custom roles.'
|
||||
}
|
||||
}
|
||||
|
||||
export function isPermission(value: string): value is Permission {
|
||||
return (PERMISSIONS as readonly string[]).includes(value)
|
||||
}
|
||||
32
app/utils/role-definitions.ts
Normal file
32
app/utils/role-definitions.ts
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { PERMISSIONS, type Permission } from './permissions'
|
||||
|
||||
export interface RoleDefinition {
|
||||
name: string
|
||||
description: string
|
||||
permissions: readonly Permission[]
|
||||
}
|
||||
|
||||
export const ROLES = {
|
||||
admin: {
|
||||
name: 'admin',
|
||||
description: 'Full access to all features and user management.',
|
||||
permissions: [...PERMISSIONS]
|
||||
},
|
||||
member: {
|
||||
name: 'member',
|
||||
description: 'Basic authenticated access.',
|
||||
permissions: []
|
||||
}
|
||||
} as const satisfies Record<string, RoleDefinition>
|
||||
|
||||
export type StaticRoleName = keyof typeof ROLES
|
||||
|
||||
export const STATIC_ROLE_NAMES = Object.keys(ROLES) as StaticRoleName[]
|
||||
|
||||
export function getStaticRole(name: string): RoleDefinition | null {
|
||||
return (ROLES as Record<string, RoleDefinition>)[name] ?? null
|
||||
}
|
||||
|
||||
export function isStaticRole(name: string): name is StaticRoleName {
|
||||
return name in ROLES
|
||||
}
|
||||
6
eslint.config.mjs
Normal file
6
eslint.config.mjs
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
// @ts-check
|
||||
import withNuxt from './.nuxt/eslint.config.mjs'
|
||||
|
||||
export default withNuxt(
|
||||
// Your custom configs here
|
||||
)
|
||||
18
migrations/001_create_users_table.ts
Normal file
18
migrations/001_create_users_table.ts
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
import { Kysely, sql } from 'kysely'
|
||||
|
||||
export async function up(db: Kysely<any>): Promise<void> {
|
||||
await db.schema
|
||||
.createTable('users')
|
||||
.ifNotExists()
|
||||
.addColumn('id', 'uuid', col => col.primaryKey().defaultTo(sql`gen_random_uuid()`))
|
||||
.addColumn('created', 'timestamptz', col => col.defaultTo(sql`now()`))
|
||||
.addColumn('updated', 'timestamptz', col => col.defaultTo(sql`now()`))
|
||||
.addColumn('email', 'text', col => col.unique().notNull())
|
||||
.addColumn('display_name', 'text', col => col.notNull())
|
||||
.addColumn('avatar', 'text', col => col.defaultTo(''))
|
||||
.execute()
|
||||
}
|
||||
|
||||
export async function down(db: Kysely<any>): Promise<void> {
|
||||
await db.schema.dropTable('users').ifExists().execute()
|
||||
}
|
||||
29
migrations/002_add_auth_fields.ts
Normal file
29
migrations/002_add_auth_fields.ts
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
import { Kysely, sql, type ColumnDefinitionBuilder } from 'kysely'
|
||||
|
||||
export async function up(db: Kysely<any>): Promise<void> {
|
||||
await db.schema
|
||||
.alterTable('users')
|
||||
.addColumn('password', 'text', col => col.notNull().defaultTo(''))
|
||||
.addColumn('verified', 'boolean', col => col.defaultTo(false))
|
||||
.addColumn(
|
||||
'roles',
|
||||
sql`text[]`,
|
||||
(col: ColumnDefinitionBuilder) => col.notNull().defaultTo(sql`'{}'::text[]`)
|
||||
)
|
||||
.addColumn('token_key', 'uuid', col => col.defaultTo(sql`gen_random_uuid()`))
|
||||
.addColumn('pending_email', 'text')
|
||||
.addColumn('email_change_token', 'uuid')
|
||||
.execute()
|
||||
}
|
||||
|
||||
export async function down(db: Kysely<any>): Promise<void> {
|
||||
await db.schema
|
||||
.alterTable('users')
|
||||
.dropColumn('password')
|
||||
.dropColumn('verified')
|
||||
.dropColumn('roles')
|
||||
.dropColumn('token_key')
|
||||
.dropColumn('pending_email')
|
||||
.dropColumn('email_change_token')
|
||||
.execute()
|
||||
}
|
||||
43
migrations/003_create_password_reset_table.ts
Normal file
43
migrations/003_create_password_reset_table.ts
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import { Kysely, sql } from 'kysely'
|
||||
|
||||
export async function up(db: Kysely<any>): Promise<void> {
|
||||
await db.schema
|
||||
.createTable('password_reset_requests')
|
||||
.ifNotExists()
|
||||
.addColumn('id', 'uuid', col => col.primaryKey().defaultTo(sql`gen_random_uuid()`))
|
||||
.addColumn('created', 'timestamptz', col => col.notNull().defaultTo(sql`current_timestamp`))
|
||||
.addColumn('expires', 'timestamptz', col => col.notNull())
|
||||
.addColumn('user_id', 'uuid', col => col.notNull().references('users.id').onDelete('cascade'))
|
||||
.addColumn('token', 'text', col => col.notNull().unique())
|
||||
.addColumn('used', 'boolean', col => col.notNull().defaultTo(false))
|
||||
.execute()
|
||||
|
||||
await db.schema
|
||||
.createIndex('password_reset_requests_token_idx')
|
||||
.unique()
|
||||
.on('password_reset_requests')
|
||||
.column('token')
|
||||
.execute()
|
||||
|
||||
await db.schema
|
||||
.createIndex('password_reset_requests_user_id_idx')
|
||||
.on('password_reset_requests')
|
||||
.column('user_id')
|
||||
.execute()
|
||||
|
||||
await db.schema
|
||||
.createIndex('password_reset_requests_expires_idx')
|
||||
.on('password_reset_requests')
|
||||
.column('expires')
|
||||
.execute()
|
||||
|
||||
await db.schema
|
||||
.createIndex('password_reset_requests_used_idx')
|
||||
.on('password_reset_requests')
|
||||
.column('used')
|
||||
.execute()
|
||||
}
|
||||
|
||||
export async function down(db: Kysely<any>): Promise<void> {
|
||||
await db.schema.dropTable('password_reset_requests').ifExists().execute()
|
||||
}
|
||||
41
migrations/004_create_activity_logs_table.ts
Normal file
41
migrations/004_create_activity_logs_table.ts
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
import { Kysely, sql } from 'kysely'
|
||||
|
||||
export async function up(db: Kysely<any>): Promise<void> {
|
||||
await db.schema
|
||||
.createTable('activity_logs')
|
||||
.ifNotExists()
|
||||
.addColumn('id', 'uuid', col => col.primaryKey().defaultTo(sql`gen_random_uuid()`))
|
||||
.addColumn('timestamp', 'timestamptz', col => col.notNull().defaultTo(sql`now()`))
|
||||
.addColumn('event_type', 'text', col => col.notNull())
|
||||
.addColumn('table_name', 'text')
|
||||
.addColumn('record_id', 'text')
|
||||
.addColumn('user_id', 'uuid')
|
||||
.addColumn('user_agent', 'text')
|
||||
.addColumn('metadata', 'jsonb', col => col.defaultTo(sql`'{}'::jsonb`))
|
||||
.execute()
|
||||
|
||||
await db.schema
|
||||
.createIndex('idx_activity_logs_timestamp')
|
||||
.ifNotExists()
|
||||
.on('activity_logs')
|
||||
.expression(sql`timestamp DESC`)
|
||||
.execute()
|
||||
|
||||
await db.schema
|
||||
.createIndex('idx_activity_logs_user_id')
|
||||
.ifNotExists()
|
||||
.on('activity_logs')
|
||||
.column('user_id')
|
||||
.execute()
|
||||
|
||||
await db.schema
|
||||
.createIndex('idx_activity_logs_event_type')
|
||||
.ifNotExists()
|
||||
.on('activity_logs')
|
||||
.column('event_type')
|
||||
.execute()
|
||||
}
|
||||
|
||||
export async function down(db: Kysely<any>): Promise<void> {
|
||||
await db.schema.dropTable('activity_logs').ifExists().execute()
|
||||
}
|
||||
67
nuxt.config.ts
Normal file
67
nuxt.config.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
modules: [
|
||||
'@nuxt/eslint',
|
||||
'@nuxt/ui'
|
||||
],
|
||||
|
||||
devtools: {
|
||||
enabled: true
|
||||
},
|
||||
|
||||
devServer: {
|
||||
port: 3033
|
||||
},
|
||||
|
||||
ssr: false,
|
||||
|
||||
css: ['~/assets/css/main.css'],
|
||||
|
||||
ui: {
|
||||
theme: {
|
||||
colors: ['primary', 'secondary', 'info', 'success', 'warning', 'error', 'neutral']
|
||||
}
|
||||
},
|
||||
|
||||
app: {
|
||||
head: {
|
||||
title: process.env.APP_TITLE || 'My App'
|
||||
}
|
||||
},
|
||||
|
||||
routeRules: {
|
||||
'/': { prerender: true }
|
||||
},
|
||||
|
||||
runtimeConfig: {
|
||||
appName: process.env.APP_TITLE || 'My App',
|
||||
databaseUrl: process.env.DATABASE_URL || '',
|
||||
jwtSecret: process.env.JWT_SECRET || '',
|
||||
mailgunApiKey: process.env.MAILGUN_API_KEY || '',
|
||||
mailgunDomain: process.env.MAILGUN_DOMAIN || '',
|
||||
mailgunHost: process.env.MAILGUN_HOST || '',
|
||||
smtpFrom: process.env.SMTP_FROM || '',
|
||||
smtpFromName: process.env.SMTP_FROM_NAME || '',
|
||||
s3Endpoint: process.env.S3_ENDPOINT || '',
|
||||
s3Region: process.env.S3_REGION || '',
|
||||
s3AccessKeyId: process.env.S3_ACCESS_KEY_ID || '',
|
||||
s3SecretAccessKey: process.env.S3_SECRET_ACCESS_KEY || '',
|
||||
s3BucketName: process.env.S3_BUCKET_NAME || '',
|
||||
public: {
|
||||
appName: process.env.APP_TITLE || 'My App',
|
||||
nodeEnv: process.env.NODE_ENV || '',
|
||||
siteUrl: process.env.NUXT_PUBLIC_SITE_URL || ''
|
||||
}
|
||||
},
|
||||
|
||||
compatibilityDate: '2025-01-15',
|
||||
|
||||
eslint: {
|
||||
config: {
|
||||
stylistic: {
|
||||
commaDangle: 'never',
|
||||
braceStyle: '1tbs'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
39
package.json
Normal file
39
package.json
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"name": "marketing-rebuild",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"build": "nuxt build",
|
||||
"dev": "nuxt dev",
|
||||
"preview": "nuxt preview",
|
||||
"postinstall": "nuxt prepare",
|
||||
"lint": "eslint .",
|
||||
"typecheck": "nuxt typecheck"
|
||||
},
|
||||
"dependencies": {
|
||||
"@aws-sdk/client-s3": "^3.914.0",
|
||||
"@aws-sdk/s3-request-presigner": "^3.914.0",
|
||||
"@iconify-json/lucide": "^1.2.102",
|
||||
"@iconify-json/simple-icons": "^1.2.78",
|
||||
"@nuxt/ui": "^4.6.1",
|
||||
"bcrypt": "^6.0.0",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"kysely": "^0.28.0",
|
||||
"kysely-postgres-js": "^2.0.0",
|
||||
"nodemailer": "^7.0.6",
|
||||
"nodemailer-mailgun-transport": "^2.1.5",
|
||||
"nuxt": "^4.4.2",
|
||||
"postgres": "^3.4.7",
|
||||
"tailwindcss": "^4.2.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint": "^1.15.2",
|
||||
"@types/bcrypt": "^6.0.0",
|
||||
"@types/jsonwebtoken": "^9.0.10",
|
||||
"@types/nodemailer": "^7.0.1",
|
||||
"@types/nodemailer-mailgun-transport": "^1.4.6",
|
||||
"eslint": "^10.2.0",
|
||||
"typescript": "^6.0.2",
|
||||
"vue-tsc": "^3.2.6"
|
||||
}
|
||||
}
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
81
server/api/admin/users.get.ts
Normal file
81
server/api/admin/users.get.ts
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import { getQuery } from 'h3'
|
||||
import { db, sql } from '../../utils/database'
|
||||
import { requirePermission } from '../../utils/rbac'
|
||||
|
||||
const SORTABLE_COLUMNS = ['display_name', 'email', 'verified', 'created', 'last_login'] as const
|
||||
type SortColumn = typeof SORTABLE_COLUMNS[number]
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
await requirePermission(event, 'users.view')
|
||||
|
||||
const query = getQuery(event)
|
||||
|
||||
const pageRaw = Number(query.page ?? 1)
|
||||
const pageSizeRaw = Number(query.pageSize ?? 50)
|
||||
const page = Number.isFinite(pageRaw) && pageRaw >= 1 ? Math.floor(pageRaw) : 1
|
||||
const pageSize = Number.isFinite(pageSizeRaw) && pageSizeRaw >= 1 && pageSizeRaw <= 200
|
||||
? Math.floor(pageSizeRaw)
|
||||
: 50
|
||||
|
||||
const q = typeof query.q === 'string' ? query.q.trim() : ''
|
||||
|
||||
const sortParam = typeof query.sort === 'string' ? query.sort : 'created'
|
||||
const sort: SortColumn = (SORTABLE_COLUMNS as readonly string[]).includes(sortParam)
|
||||
? sortParam as SortColumn
|
||||
: 'created'
|
||||
const dir: 'asc' | 'desc' = query.dir === 'asc' ? 'asc' : 'desc'
|
||||
|
||||
const pattern = q ? `%${q}%` : null
|
||||
|
||||
const totalRow = await db
|
||||
.selectFrom('users')
|
||||
.select(eb => eb.fn.countAll<string>().as('count'))
|
||||
.$if(!!pattern, qb => qb.where(eb => eb.or([
|
||||
eb('users.display_name', 'ilike', pattern!),
|
||||
eb('users.email', 'ilike', pattern!)
|
||||
])))
|
||||
.executeTakeFirst()
|
||||
const total = Number(totalRow?.count ?? 0)
|
||||
|
||||
const orderExpr = sort === 'last_login'
|
||||
? sql`last_login ${sql.raw(dir)} nulls last`
|
||||
: sort === 'display_name'
|
||||
? sql`users.display_name ${sql.raw(dir)}`
|
||||
: sort === 'email'
|
||||
? sql`users.email ${sql.raw(dir)}`
|
||||
: sort === 'verified'
|
||||
? sql`users.verified ${sql.raw(dir)}`
|
||||
: sql`users.created ${sql.raw(dir)}`
|
||||
|
||||
const rows = await db
|
||||
.selectFrom('users')
|
||||
.select([
|
||||
'users.id',
|
||||
'users.display_name',
|
||||
'users.email',
|
||||
'users.verified',
|
||||
'users.created',
|
||||
'users.roles',
|
||||
eb => eb
|
||||
.selectFrom('activity_logs')
|
||||
.select(eb2 => eb2.fn.max('activity_logs.timestamp').as('last_login'))
|
||||
.where('activity_logs.event_type', '=', 'LOGIN')
|
||||
.whereRef('activity_logs.user_id', '=', 'users.id')
|
||||
.as('last_login')
|
||||
])
|
||||
.$if(!!pattern, qb => qb.where(eb => eb.or([
|
||||
eb('users.display_name', 'ilike', pattern!),
|
||||
eb('users.email', 'ilike', pattern!)
|
||||
])))
|
||||
.orderBy(orderExpr)
|
||||
.limit(pageSize)
|
||||
.offset((page - 1) * pageSize)
|
||||
.execute()
|
||||
|
||||
return {
|
||||
rows,
|
||||
total,
|
||||
page,
|
||||
pageSize
|
||||
}
|
||||
})
|
||||
60
server/api/admin/users/[id].delete.ts
Normal file
60
server/api/admin/users/[id].delete.ts
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
import { getRouterParam, getHeader } from 'h3'
|
||||
import { db, sql } from '../../../utils/database'
|
||||
import { requirePermission } from '../../../utils/rbac'
|
||||
import { logEvent } from '../../../utils/activity-logger'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const admin = await requirePermission(event, 'users.manage')
|
||||
|
||||
const id = getRouterParam(event, 'id')
|
||||
if (!id) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'User id is required' })
|
||||
}
|
||||
|
||||
if (id === admin.userId) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'You cannot delete your own account' })
|
||||
}
|
||||
|
||||
const target = await db
|
||||
.selectFrom('users')
|
||||
.select(['id', 'email', 'display_name', 'roles'])
|
||||
.where('id', '=', id)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!target) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'User not found' })
|
||||
}
|
||||
|
||||
if (target.roles.includes('admin')) {
|
||||
const countRow = await db
|
||||
.selectFrom('users')
|
||||
.select(eb => eb.fn.count<string>('id').as('count'))
|
||||
.where(sql<boolean>`'admin' = ANY(roles)`)
|
||||
.executeTakeFirst()
|
||||
|
||||
const adminCount = Number(countRow?.count ?? 0)
|
||||
if (adminCount <= 1) {
|
||||
throw createError({ statusCode: 409, statusMessage: 'Cannot delete the last admin' })
|
||||
}
|
||||
}
|
||||
|
||||
await db.transaction().execute(async (trx) => {
|
||||
await trx.deleteFrom('password_reset_requests').where('user_id', '=', id).execute()
|
||||
await trx.deleteFrom('users').where('id', '=', id).execute()
|
||||
})
|
||||
|
||||
await logEvent({
|
||||
eventType: 'admin_delete_user',
|
||||
tableName: 'users',
|
||||
recordId: id,
|
||||
userId: admin.userId,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: {
|
||||
email: target.email,
|
||||
display_name: target.display_name,
|
||||
roles: target.roles
|
||||
}
|
||||
})
|
||||
|
||||
return { success: true }
|
||||
})
|
||||
73
server/api/admin/users/[id].patch.ts
Normal file
73
server/api/admin/users/[id].patch.ts
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import { readBody, getRouterParam, getHeader } from 'h3'
|
||||
import { db } from '../../../utils/database'
|
||||
import { requirePermission } from '../../../utils/rbac'
|
||||
import { logEvent } from '../../../utils/activity-logger'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const admin = await requirePermission(event, 'users.manage')
|
||||
|
||||
const id = getRouterParam(event, 'id')
|
||||
if (!id) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'User id is required' })
|
||||
}
|
||||
|
||||
const body = await readBody(event)
|
||||
const rawName = typeof body?.display_name === 'string' ? body.display_name : ''
|
||||
const next = rawName.trim()
|
||||
|
||||
if (next.length < 2) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'Display name must be at least 2 characters' })
|
||||
}
|
||||
|
||||
const existing = await db
|
||||
.selectFrom('users')
|
||||
.select(['id', 'display_name'])
|
||||
.where('id', '=', id)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!existing) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'User not found' })
|
||||
}
|
||||
|
||||
if (existing.display_name !== next) {
|
||||
await db
|
||||
.updateTable('users')
|
||||
.set({ display_name: next, updated: new Date().toISOString() })
|
||||
.where('id', '=', id)
|
||||
.execute()
|
||||
|
||||
await logEvent({
|
||||
eventType: 'admin_update_user',
|
||||
tableName: 'users',
|
||||
recordId: id,
|
||||
userId: admin.userId,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: {
|
||||
field: 'display_name',
|
||||
from: existing.display_name,
|
||||
to: next
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const updated = await db
|
||||
.selectFrom('users')
|
||||
.select([
|
||||
'users.id',
|
||||
'users.display_name',
|
||||
'users.email',
|
||||
'users.verified',
|
||||
'users.created',
|
||||
'users.roles',
|
||||
eb => eb
|
||||
.selectFrom('activity_logs')
|
||||
.select(eb2 => eb2.fn.max('activity_logs.timestamp').as('last_login'))
|
||||
.where('activity_logs.event_type', '=', 'LOGIN')
|
||||
.whereRef('activity_logs.user_id', '=', 'users.id')
|
||||
.as('last_login')
|
||||
])
|
||||
.where('users.id', '=', id)
|
||||
.executeTakeFirst()
|
||||
|
||||
return { user: updated }
|
||||
})
|
||||
101
server/api/admin/users/[id]/roles.put.ts
Normal file
101
server/api/admin/users/[id]/roles.put.ts
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import { readBody, getRouterParam, getHeader } from 'h3'
|
||||
import { db, sql } from '../../../../utils/database'
|
||||
import {
|
||||
requirePermission,
|
||||
validateRoleNames,
|
||||
getRolePermissions,
|
||||
getUserPermissions
|
||||
} from '../../../../utils/rbac'
|
||||
import { logEvent } from '../../../../utils/activity-logger'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const admin = await requirePermission(event, 'users.manage')
|
||||
|
||||
const id = getRouterParam(event, 'id')
|
||||
if (!id) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'User id is required' })
|
||||
}
|
||||
|
||||
const body = await readBody(event)
|
||||
const input = Array.isArray(body?.roles) ? body.roles : null
|
||||
if (!input || input.some((r: unknown) => typeof r !== 'string')) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'roles must be an array of strings' })
|
||||
}
|
||||
|
||||
const roles = Array.from(new Set(input as string[]))
|
||||
|
||||
const { valid, unknown } = await validateRoleNames(roles)
|
||||
if (!valid) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: `Unknown role(s): ${unknown.join(', ')}`
|
||||
})
|
||||
}
|
||||
|
||||
const existing = await db
|
||||
.selectFrom('users')
|
||||
.select(['id', 'roles'])
|
||||
.where('id', '=', id)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!existing) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'User not found' })
|
||||
}
|
||||
|
||||
const prior = existing.roles
|
||||
const priorSet = new Set(prior)
|
||||
const nextSet = new Set(roles)
|
||||
const removed = prior.filter(r => !nextSet.has(r))
|
||||
const added = roles.filter(r => !priorSet.has(r))
|
||||
|
||||
if (added.length === 0 && removed.length === 0) {
|
||||
return { user: { id: existing.id, roles: prior } }
|
||||
}
|
||||
|
||||
// Subset delegation: the assigner can only add/remove roles whose permissions
|
||||
// they themselves hold. Prevents users with `users.manage` from escalating
|
||||
// anyone (including themselves) into permissions they don't have.
|
||||
const deltaRoleNames = Array.from(new Set([...added, ...removed]))
|
||||
const [assignerPerms, deltaPerms] = await Promise.all([
|
||||
getUserPermissions(admin.userId),
|
||||
getRolePermissions(deltaRoleNames)
|
||||
])
|
||||
const missing = [...deltaPerms].filter(p => !assignerPerms.has(p))
|
||||
if (missing.length > 0) {
|
||||
throw createError({
|
||||
statusCode: 403,
|
||||
statusMessage: `Cannot assign or revoke roles granting permissions you don't hold: ${missing.join(', ')}`
|
||||
})
|
||||
}
|
||||
|
||||
// Prevent removing the last admin in the system.
|
||||
if (priorSet.has('admin') && !nextSet.has('admin')) {
|
||||
const countRow = await db
|
||||
.selectFrom('users')
|
||||
.select(eb => eb.fn.count<string>('id').as('count'))
|
||||
.where(sql<boolean>`'admin' = ANY(roles)`)
|
||||
.executeTakeFirst()
|
||||
|
||||
const adminCount = Number(countRow?.count ?? 0)
|
||||
if (adminCount <= 1) {
|
||||
throw createError({ statusCode: 409, statusMessage: 'Cannot remove the last admin' })
|
||||
}
|
||||
}
|
||||
|
||||
await db
|
||||
.updateTable('users')
|
||||
.set({ roles, updated: new Date().toISOString() })
|
||||
.where('id', '=', id)
|
||||
.execute()
|
||||
|
||||
await logEvent({
|
||||
eventType: 'admin_update_user_roles',
|
||||
tableName: 'users',
|
||||
recordId: id,
|
||||
userId: admin.userId,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: { from: prior, to: roles, added, removed }
|
||||
})
|
||||
|
||||
return { user: { id, roles } }
|
||||
})
|
||||
113
server/api/auth/forgot-password.post.ts
Normal file
113
server/api/auth/forgot-password.post.ts
Normal file
|
|
@ -0,0 +1,113 @@
|
|||
import crypto from 'crypto'
|
||||
import { db } from '../../utils/database'
|
||||
import { logPasswordResetRequest } from '../../utils/activity-logger'
|
||||
import { sendTemplateEmail } from '../../utils/email'
|
||||
import { checkRateLimit, logRateLimitExceeded } from '../../utils/rate-limit'
|
||||
import { readBody, getHeader } from 'h3'
|
||||
import { useRuntimeConfig, createError } from '#imports'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const { email } = await readBody(event)
|
||||
|
||||
// Basic validation
|
||||
if (!email || typeof email !== 'string') {
|
||||
throw createError({ statusCode: 400, statusMessage: 'Email is required' })
|
||||
}
|
||||
|
||||
// Validate email format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (!emailRegex.test(email)) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'Invalid email format' })
|
||||
}
|
||||
|
||||
// Always return success to prevent user enumeration
|
||||
const successResponse = {
|
||||
success: true,
|
||||
message: 'If an account with that email exists, password reset instructions have been sent.'
|
||||
}
|
||||
|
||||
// Check rate limit by email
|
||||
const userAgent = getHeader(event, 'user-agent') || undefined
|
||||
const rateCheck = await checkRateLimit('PASSWORD_RESET_REQUEST', 'email', email, 15 * 60 * 1000, 3)
|
||||
|
||||
if (!rateCheck.allowed) {
|
||||
logRateLimitExceeded(email, '/api/auth/forgot-password', userAgent)
|
||||
// Still return success to prevent enumeration
|
||||
return successResponse
|
||||
}
|
||||
|
||||
// Log this password reset request
|
||||
logPasswordResetRequest(email, userAgent)
|
||||
|
||||
try {
|
||||
// Check if user exists
|
||||
const user = await db
|
||||
.selectFrom('users')
|
||||
.select(['id', 'email', 'display_name'])
|
||||
.where('email', '=', email.toLowerCase())
|
||||
.executeTakeFirst()
|
||||
|
||||
// If user doesn't exist, still return success (security measure)
|
||||
if (!user) {
|
||||
return successResponse
|
||||
}
|
||||
|
||||
// Generate reset token
|
||||
const token = crypto.randomUUID()
|
||||
const expires = new Date(Date.now() + 60 * 60 * 1000) // 1 hour from now
|
||||
|
||||
await db.transaction().execute(async (trx) => {
|
||||
// Delete any existing unused or expired reset requests for this user
|
||||
await trx
|
||||
.deleteFrom('password_reset_requests')
|
||||
.where('user_id', '=', user.id)
|
||||
.execute()
|
||||
|
||||
// Create reset request
|
||||
await trx
|
||||
.insertInto('password_reset_requests')
|
||||
.values({
|
||||
user_id: user.id,
|
||||
token,
|
||||
expires,
|
||||
used: false,
|
||||
})
|
||||
.execute()
|
||||
})
|
||||
|
||||
// Get base URL from runtime config or construct from headers
|
||||
const config = useRuntimeConfig()
|
||||
const host = getHeader(event, 'host')
|
||||
const protocol = process.env.NODE_ENV === 'production' ? 'https' : 'http'
|
||||
const baseUrl = config.public.baseUrl || `${protocol}://${host}`
|
||||
|
||||
// Construct reset URL
|
||||
const resetUrl = `${baseUrl}/reset-password?token=${token}`
|
||||
|
||||
// Send email
|
||||
const emailSent = await sendTemplateEmail({
|
||||
to: user.email,
|
||||
template: 'passwordReset',
|
||||
data: {
|
||||
userName: user.display_name || 'User',
|
||||
resetUrl
|
||||
}
|
||||
})
|
||||
|
||||
// If email failed to send, delete the reset request
|
||||
if (!emailSent) {
|
||||
await db
|
||||
.deleteFrom('password_reset_requests')
|
||||
.where('token', '=', token)
|
||||
.execute()
|
||||
console.error('Failed to send password reset email to:', user.email)
|
||||
// Still return success to user to prevent enumeration
|
||||
}
|
||||
|
||||
return successResponse
|
||||
} catch (error) {
|
||||
console.error('Error in forgot-password endpoint:', error)
|
||||
// Always return success to prevent enumeration
|
||||
return successResponse
|
||||
}
|
||||
})
|
||||
87
server/api/auth/login.post.ts
Normal file
87
server/api/auth/login.post.ts
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import bcrypt from 'bcrypt'
|
||||
import jwt from 'jsonwebtoken'
|
||||
import { db } from '../../utils/database'
|
||||
import { logLoginFailed, logLogin } from '../../utils/activity-logger'
|
||||
import { checkRateLimit, logRateLimitExceeded } from '../../utils/rate-limit'
|
||||
import { getUserPermissions } from '../../utils/rbac'
|
||||
import { readBody, getHeader, setResponseHeader, setCookie } from 'h3'
|
||||
import { useRuntimeConfig, createError } from '#imports'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const { email, password } = await readBody(event)
|
||||
|
||||
if (!email || !password) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'Email and password are required' })
|
||||
}
|
||||
|
||||
// Check rate limit before processing login
|
||||
const userAgent = getHeader(event, 'user-agent') || undefined
|
||||
const rateCheck = await checkRateLimit('LOGIN_FAILED', 'email', email, 15 * 60 * 1000, 5)
|
||||
|
||||
if (!rateCheck.allowed) {
|
||||
logRateLimitExceeded(email, '/api/auth/login', userAgent)
|
||||
setResponseHeader(event, 'Retry-After', rateCheck.retryAfterSeconds!)
|
||||
throw createError({
|
||||
statusCode: 429,
|
||||
statusMessage: `Too many login attempts. Try again in ${Math.ceil(rateCheck.retryAfterSeconds! / 60)} minutes.`
|
||||
})
|
||||
}
|
||||
|
||||
// Query existing user from database
|
||||
const user = await db
|
||||
.selectFrom('users')
|
||||
.selectAll()
|
||||
.where('email', '=', email)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!user) {
|
||||
logLoginFailed(email, userAgent, { reason: 'user_not_found' })
|
||||
throw createError({ statusCode: 401, statusMessage: 'Invalid credentials' })
|
||||
}
|
||||
|
||||
// Check if user is verified
|
||||
if (!user.verified) {
|
||||
logLoginFailed(email, userAgent, { reason: 'not_verified' })
|
||||
throw createError({ statusCode: 401, statusMessage: 'Please verify your email address before logging in' })
|
||||
}
|
||||
|
||||
// Verify password
|
||||
const isValidPassword = await bcrypt.compare(password, user.password)
|
||||
if (!isValidPassword) {
|
||||
logLoginFailed(email, userAgent, { reason: 'invalid_password' })
|
||||
throw createError({ statusCode: 401, statusMessage: 'Invalid credentials' })
|
||||
}
|
||||
|
||||
// Generate new JWT token
|
||||
const token = jwt.sign(
|
||||
{ userId: user.id, email: user.email, display_name: user.display_name },
|
||||
useRuntimeConfig().jwtSecret,
|
||||
{ expiresIn: '120d' }
|
||||
)
|
||||
|
||||
// Set secure cookie
|
||||
setCookie(event, 'auth-token', token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'strict',
|
||||
maxAge: 60 * 60 * 24 * 120 // 120 days
|
||||
})
|
||||
|
||||
// Log successful login
|
||||
logLogin(user.id, userAgent)
|
||||
|
||||
const permissions = await getUserPermissions(user.id)
|
||||
|
||||
return {
|
||||
success: true,
|
||||
user: {
|
||||
id: user.id,
|
||||
email: user.email,
|
||||
display_name: user.display_name,
|
||||
avatar: user.avatar,
|
||||
verified: user.verified,
|
||||
roles: user.roles,
|
||||
permissions: [...permissions]
|
||||
}
|
||||
}
|
||||
})
|
||||
20
server/api/auth/logout.post.ts
Normal file
20
server/api/auth/logout.post.ts
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
export default defineEventHandler(async (event) => {
|
||||
// Get user info before clearing cookie
|
||||
const user = getAuthUser(event)
|
||||
const userAgent = getHeader(event, 'user-agent') || undefined
|
||||
|
||||
// Clear the auth cookie
|
||||
setCookie(event, 'auth-token', '', {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'strict',
|
||||
maxAge: 0 // Expire immediately
|
||||
})
|
||||
|
||||
// Log logout if user was authenticated
|
||||
if (user?.userId) {
|
||||
logLogout(user.userId, userAgent)
|
||||
}
|
||||
|
||||
return { success: true }
|
||||
})
|
||||
30
server/api/auth/me.get.ts
Normal file
30
server/api/auth/me.get.ts
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
import { getUserPermissions } from '../../utils/rbac'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const authUser = getAuthUser(event)
|
||||
|
||||
if (!authUser) {
|
||||
throw createError({ statusCode: 401, statusMessage: 'Not authenticated' })
|
||||
}
|
||||
|
||||
// Get fresh user data from database
|
||||
const user = await db
|
||||
.selectFrom('users')
|
||||
.select(['id', 'email', 'display_name', 'avatar', 'verified', 'roles', 'created', 'updated'])
|
||||
.where('id', '=', authUser.userId)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!user) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'User not found' })
|
||||
}
|
||||
|
||||
const permissions = await getUserPermissions(user.id)
|
||||
|
||||
return {
|
||||
user: {
|
||||
...user,
|
||||
avatar: user.avatar || null,
|
||||
permissions: [...permissions]
|
||||
}
|
||||
}
|
||||
})
|
||||
166
server/api/auth/register.post.ts
Normal file
166
server/api/auth/register.post.ts
Normal file
|
|
@ -0,0 +1,166 @@
|
|||
import bcrypt from 'bcrypt'
|
||||
import jwt from 'jsonwebtoken'
|
||||
import { randomUUID } from 'crypto'
|
||||
import { db, sql } from '../../utils/database'
|
||||
import { logRegisterAttempt, logEvent } from '../../utils/activity-logger'
|
||||
import { sendTemplateEmail } from '../../utils/email'
|
||||
import { checkRateLimit, logRateLimitExceeded } from '../../utils/rate-limit'
|
||||
import { readBody, getHeader, setResponseHeader, getRequestURL, setCookie } from 'h3'
|
||||
import { useRuntimeConfig, createError } from '#imports'
|
||||
import { ROLES } from '~~/app/utils/role-definitions'
|
||||
|
||||
// Advisory-lock key used to serialize concurrent registrations so the
|
||||
// first-user count check and insert can't interleave (ASCII 'reg1').
|
||||
const REGISTRATION_LOCK_KEY = 1919248689
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const { email, password, display_name } = await readBody(event)
|
||||
|
||||
if (!email || !password || !display_name) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'Email, password, and display name are required' })
|
||||
}
|
||||
|
||||
if (display_name.length < 2) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'Display name must be at least 2 characters long' })
|
||||
}
|
||||
|
||||
// Check rate limit by IP
|
||||
const clientIp = getHeader(event, 'x-forwarded-for')?.split(',')[0]?.trim() || 'unknown'
|
||||
const userAgent = getHeader(event, 'user-agent') || undefined
|
||||
const rateCheck = await checkRateLimit('REGISTER_ATTEMPT', 'ip', clientIp, 15 * 60 * 1000, 10)
|
||||
|
||||
if (!rateCheck.allowed) {
|
||||
logRateLimitExceeded(clientIp, '/api/auth/register', userAgent)
|
||||
setResponseHeader(event, 'Retry-After', rateCheck.retryAfterSeconds!)
|
||||
throw createError({
|
||||
statusCode: 429,
|
||||
statusMessage: 'Too many registration attempts. Please try again later.'
|
||||
})
|
||||
}
|
||||
|
||||
// Log this registration attempt
|
||||
logRegisterAttempt(clientIp, userAgent)
|
||||
|
||||
// Hash password
|
||||
const hashedPassword = await bcrypt.hash(password, 12)
|
||||
|
||||
// Generate unique ID and token key
|
||||
const userId = randomUUID()
|
||||
const tokenKey = randomUUID()
|
||||
const now = new Date().toISOString()
|
||||
|
||||
// First-user check + insert run atomically inside a transaction, with a
|
||||
// session-level advisory lock to serialize concurrent registrations. The
|
||||
// activity-log insert also rides on this transaction so the "who got the
|
||||
// admin role" audit row commits with the user row.
|
||||
const { isFirstUser } = await db.transaction().execute(async (trx) => {
|
||||
await sql`SELECT pg_advisory_xact_lock(${sql.lit(REGISTRATION_LOCK_KEY)})`.execute(trx)
|
||||
|
||||
// Check if user already exists
|
||||
const existingUser = await trx
|
||||
.selectFrom('users')
|
||||
.select('id')
|
||||
.where('email', '=', email)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (existingUser) {
|
||||
throw createError({ statusCode: 409, statusMessage: 'User with this email already exists' })
|
||||
}
|
||||
|
||||
const countRow = await trx
|
||||
.selectFrom('users')
|
||||
.select(eb => eb.fn.count<string>('id').as('count'))
|
||||
.executeTakeFirst()
|
||||
|
||||
const firstUser = Number(countRow?.count ?? 0) === 0
|
||||
|
||||
// Create user (first user is auto-promoted; everyone else starts unverified)
|
||||
await trx
|
||||
.insertInto('users')
|
||||
.values({
|
||||
id: userId,
|
||||
created: now,
|
||||
updated: now,
|
||||
email,
|
||||
password: hashedPassword,
|
||||
verified: firstUser,
|
||||
roles: firstUser ? ['admin'] : ['member'],
|
||||
display_name,
|
||||
avatar: '',
|
||||
token_key: tokenKey,
|
||||
})
|
||||
.execute()
|
||||
|
||||
if (firstUser) {
|
||||
await logEvent({
|
||||
eventType: 'first_user_promoted',
|
||||
userId,
|
||||
userAgent,
|
||||
metadata: { email }
|
||||
}, trx)
|
||||
}
|
||||
|
||||
return { isFirstUser: firstUser }
|
||||
})
|
||||
|
||||
// First user gets auto-logged-in — no verification email, JWT cookie set directly.
|
||||
if (isFirstUser) {
|
||||
const token = jwt.sign(
|
||||
{ userId, email, display_name },
|
||||
useRuntimeConfig().jwtSecret,
|
||||
{ expiresIn: '120d' }
|
||||
)
|
||||
|
||||
setCookie(event, 'auth-token', token, {
|
||||
httpOnly: true,
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
sameSite: 'strict',
|
||||
maxAge: 60 * 60 * 24 * 120
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
autoLoggedIn: true,
|
||||
requiresVerification: false,
|
||||
user: {
|
||||
id: userId,
|
||||
email,
|
||||
display_name,
|
||||
avatar: '',
|
||||
verified: true,
|
||||
roles: ['admin'],
|
||||
permissions: [...ROLES.admin.permissions]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Normal registration: send verification email. Any failure is logged and
|
||||
// swallowed — the account is already committed, so turning an email failure
|
||||
// into a 500 would trap the user with an account they can't re-register.
|
||||
const baseUrl = getRequestURL(event).origin
|
||||
const verificationUrl = `${baseUrl}/api/auth/verify?token=${tokenKey}`
|
||||
|
||||
try {
|
||||
const emailSent = await sendTemplateEmail({
|
||||
to: email,
|
||||
template: 'verification',
|
||||
data: {
|
||||
userName: display_name,
|
||||
verificationUrl
|
||||
}
|
||||
})
|
||||
|
||||
if (!emailSent) {
|
||||
console.error('Failed to send verification email to:', email)
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error sending verification email:', err)
|
||||
}
|
||||
|
||||
return {
|
||||
success: true,
|
||||
autoLoggedIn: false,
|
||||
requiresVerification: true,
|
||||
message: 'Registration successful! Please check your email to verify your account.'
|
||||
}
|
||||
})
|
||||
101
server/api/auth/reset-password.post.ts
Normal file
101
server/api/auth/reset-password.post.ts
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
import bcrypt from 'bcrypt'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const { token, password, confirmPassword } = await readBody(event)
|
||||
|
||||
// Validate inputs
|
||||
if (!token || !password || !confirmPassword) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Token, password, and confirmation are required'
|
||||
})
|
||||
}
|
||||
|
||||
// Validate passwords match
|
||||
if (password !== confirmPassword) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Passwords do not match'
|
||||
})
|
||||
}
|
||||
|
||||
// Validate password length
|
||||
if (password.length < 6) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Password must be at least 6 characters'
|
||||
})
|
||||
}
|
||||
|
||||
// Sanitize token
|
||||
const sanitizedToken = token.trim().substring(0, 255)
|
||||
|
||||
try {
|
||||
// Find valid reset request
|
||||
const resetRequest = await db
|
||||
.selectFrom('password_reset_requests')
|
||||
.selectAll()
|
||||
.where('token', '=', sanitizedToken)
|
||||
.where('used', '=', false)
|
||||
.where('expires', '>', new Date().toISOString())
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!resetRequest) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Invalid or expired reset token'
|
||||
})
|
||||
}
|
||||
|
||||
// Hash the new password
|
||||
const hashedPassword = await bcrypt.hash(password, 12)
|
||||
|
||||
await db.transaction().execute(async (trx) => {
|
||||
// Update user's password
|
||||
await trx
|
||||
.updateTable('users')
|
||||
.set({ password: hashedPassword })
|
||||
.where('id', '=', resetRequest.user_id)
|
||||
.execute()
|
||||
|
||||
// Mark token as used
|
||||
await trx
|
||||
.updateTable('password_reset_requests')
|
||||
.set({ used: true })
|
||||
.where('token', '=', sanitizedToken)
|
||||
.execute()
|
||||
|
||||
// Clean up old/expired reset requests
|
||||
await trx
|
||||
.deleteFrom('password_reset_requests')
|
||||
.where('user_id', '=', resetRequest.user_id)
|
||||
.where((eb) =>
|
||||
eb.or([
|
||||
eb('used', '=', true),
|
||||
eb('expires', '<=', new Date().toISOString()),
|
||||
])
|
||||
)
|
||||
.execute()
|
||||
})
|
||||
|
||||
// Log the password reset
|
||||
const userAgent = getHeader(event, 'user-agent') || undefined
|
||||
logPasswordReset(resetRequest.user_id, userAgent)
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Password reset successfully. You can now log in with your new password.'
|
||||
}
|
||||
} catch (error: any) {
|
||||
// If it's already a createError, throw it as-is
|
||||
if (error.statusCode) {
|
||||
throw error
|
||||
}
|
||||
|
||||
console.error('Error in reset-password endpoint:', error)
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
statusMessage: 'An error occurred while resetting your password'
|
||||
})
|
||||
}
|
||||
})
|
||||
88
server/api/auth/verify-email-change.get.ts
Normal file
88
server/api/auth/verify-email-change.get.ts
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import { sql } from 'kysely'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const query = getQuery(event)
|
||||
const token = query.token as string
|
||||
|
||||
if (!token) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Verification token is required'
|
||||
})
|
||||
}
|
||||
|
||||
try {
|
||||
// Find user with this email change token
|
||||
const user = await db
|
||||
.selectFrom('users')
|
||||
.select(['id', 'email', 'pending_email', 'email_change_token'])
|
||||
.where('email_change_token', '=', token)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!user) {
|
||||
// Redirect to profile with error message
|
||||
return sendRedirect(event, '/profile?email_change=invalid_token')
|
||||
}
|
||||
|
||||
if (!user.pending_email) {
|
||||
// No pending email change
|
||||
return sendRedirect(event, '/profile?email_change=no_pending')
|
||||
}
|
||||
|
||||
const oldEmail = user.email
|
||||
const newEmail = user.pending_email
|
||||
|
||||
// Check if new email is now taken by someone else (race condition check)
|
||||
const existingUser = await db
|
||||
.selectFrom('users')
|
||||
.select('id')
|
||||
.where('email', '=', newEmail)
|
||||
.where('id', '!=', user.id)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (existingUser) {
|
||||
// Clean up pending change
|
||||
await db
|
||||
.updateTable('users')
|
||||
.set({ pending_email: null, email_change_token: null })
|
||||
.where('id', '=', user.id)
|
||||
.execute()
|
||||
|
||||
return sendRedirect(event, '/profile?email_change=email_taken')
|
||||
}
|
||||
|
||||
// Update email and clear pending fields
|
||||
await db
|
||||
.updateTable('users')
|
||||
.set({
|
||||
email: newEmail,
|
||||
pending_email: null,
|
||||
email_change_token: null,
|
||||
updated: sql`now()`,
|
||||
})
|
||||
.where('id', '=', user.id)
|
||||
.execute()
|
||||
|
||||
// Log successful email change
|
||||
logEvent({
|
||||
eventType: 'EMAIL_CHANGED',
|
||||
tableName: 'users',
|
||||
recordId: user.id,
|
||||
userId: user.id,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: {
|
||||
old_email: oldEmail,
|
||||
new_email: newEmail
|
||||
}
|
||||
})
|
||||
|
||||
// Redirect to profile with success message
|
||||
return sendRedirect(event, '/profile?email_change=success')
|
||||
} catch (error) {
|
||||
console.error('Email change verification error:', error)
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
statusMessage: 'Email change verification failed'
|
||||
})
|
||||
}
|
||||
})
|
||||
39
server/api/auth/verify.get.ts
Normal file
39
server/api/auth/verify.get.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
export default defineEventHandler(async (event) => {
|
||||
const query = getQuery(event)
|
||||
const token = query.token as string
|
||||
|
||||
if (!token) {
|
||||
throw createError({ statusCode: 400, statusMessage: 'Verification token is required' })
|
||||
}
|
||||
|
||||
try {
|
||||
// Find user with this token
|
||||
const user = await db
|
||||
.selectFrom('users')
|
||||
.select(['id', 'verified'])
|
||||
.where('token_key', '=', token)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!user) {
|
||||
throw createError({ statusCode: 404, statusMessage: 'Invalid verification token' })
|
||||
}
|
||||
|
||||
if (user.verified) {
|
||||
// Already verified, redirect to login with message
|
||||
return sendRedirect(event, '/login?verified=already')
|
||||
}
|
||||
|
||||
// Mark user as verified
|
||||
await db
|
||||
.updateTable('users')
|
||||
.set({ verified: true, updated: new Date().toISOString() })
|
||||
.where('id', '=', user.id)
|
||||
.execute()
|
||||
|
||||
// Redirect to login with success message
|
||||
return sendRedirect(event, '/login?verified=success')
|
||||
} catch (error) {
|
||||
console.error('Email verification error:', error)
|
||||
throw createError({ statusCode: 500, statusMessage: 'Email verification failed' })
|
||||
}
|
||||
})
|
||||
94
server/api/profile/account.delete.ts
Normal file
94
server/api/profile/account.delete.ts
Normal file
|
|
@ -0,0 +1,94 @@
|
|||
import bcrypt from 'bcrypt'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
// Require authentication
|
||||
const user = requireAuth(event)
|
||||
|
||||
// Get request body
|
||||
const body = await readBody(event)
|
||||
const { password } = body
|
||||
|
||||
// Validate input
|
||||
if (!password || typeof password !== 'string') {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Password is required'
|
||||
})
|
||||
}
|
||||
|
||||
// Get current user password hash
|
||||
const current = await db
|
||||
.selectFrom('users')
|
||||
.select(['password', 'email'])
|
||||
.where('id', '=', user.userId)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!current) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: 'User not found'
|
||||
})
|
||||
}
|
||||
|
||||
// Verify password
|
||||
const isPasswordValid = await bcrypt.compare(password, current.password)
|
||||
|
||||
if (!isPasswordValid) {
|
||||
// Log failed account deletion attempt
|
||||
logEvent({
|
||||
eventType: 'ACCOUNT_DELETE_FAILED',
|
||||
tableName: 'users',
|
||||
recordId: user.userId,
|
||||
userId: user.userId,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: {
|
||||
reason: 'invalid_password'
|
||||
}
|
||||
})
|
||||
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'Password is incorrect'
|
||||
})
|
||||
}
|
||||
|
||||
// Delete related data in correct order (foreign key constraints)
|
||||
await db.transaction().execute(async (trx) => {
|
||||
// 1. Delete password reset requests
|
||||
await trx
|
||||
.deleteFrom('password_reset_requests')
|
||||
.where('user_id', '=', user.userId)
|
||||
.execute()
|
||||
|
||||
// 2. Delete activity logs for this user
|
||||
await trx
|
||||
.deleteFrom('activity_logs')
|
||||
.where('user_id', '=', user.userId)
|
||||
.execute()
|
||||
|
||||
// 3. Delete the user
|
||||
await trx
|
||||
.deleteFrom('users')
|
||||
.where('id', '=', user.userId)
|
||||
.execute()
|
||||
})
|
||||
|
||||
// Log account deletion (this log entry won't have user_id since we deleted it)
|
||||
logEvent({
|
||||
eventType: 'ACCOUNT_DELETED',
|
||||
tableName: 'users',
|
||||
recordId: user.userId,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: {
|
||||
email: current.email
|
||||
}
|
||||
})
|
||||
|
||||
// Clear auth cookie
|
||||
deleteCookie(event, 'auth-token')
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Account deleted successfully'
|
||||
}
|
||||
})
|
||||
163
server/api/profile/email.post.ts
Normal file
163
server/api/profile/email.post.ts
Normal file
|
|
@ -0,0 +1,163 @@
|
|||
import bcrypt from 'bcrypt'
|
||||
import crypto from 'crypto'
|
||||
import { sql } from 'kysely'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
// Require authentication
|
||||
const user = requireAuth(event)
|
||||
|
||||
// Get request body
|
||||
const body = await readBody(event)
|
||||
const { new_email, current_password } = body
|
||||
|
||||
// Validate input
|
||||
if (!new_email || typeof new_email !== 'string') {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'New email is required'
|
||||
})
|
||||
}
|
||||
|
||||
if (!current_password || typeof current_password !== 'string') {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Current password is required'
|
||||
})
|
||||
}
|
||||
|
||||
const trimmedEmail = new_email.trim().toLowerCase()
|
||||
|
||||
// Validate email format
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
|
||||
if (!emailRegex.test(trimmedEmail)) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Invalid email format'
|
||||
})
|
||||
}
|
||||
|
||||
// Get current user data including password
|
||||
const currentUser = await db
|
||||
.selectFrom('users')
|
||||
.select(['email', 'password'])
|
||||
.where('id', '=', user.userId)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!currentUser) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: 'User not found'
|
||||
})
|
||||
}
|
||||
|
||||
// Check if new email is same as current
|
||||
if (trimmedEmail === currentUser.email) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'New email must be different from current email'
|
||||
})
|
||||
}
|
||||
|
||||
// Verify current password
|
||||
const isPasswordValid = await bcrypt.compare(current_password, currentUser.password)
|
||||
|
||||
if (!isPasswordValid) {
|
||||
// Log failed attempt
|
||||
logEvent({
|
||||
eventType: 'EMAIL_CHANGE_FAILED',
|
||||
tableName: 'users',
|
||||
recordId: user.userId,
|
||||
userId: user.userId,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: {
|
||||
reason: 'invalid_password',
|
||||
attempted_new_email: trimmedEmail
|
||||
}
|
||||
})
|
||||
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'Current password is incorrect'
|
||||
})
|
||||
}
|
||||
|
||||
// Check if new email is already taken by another user
|
||||
const existingUser = await db
|
||||
.selectFrom('users')
|
||||
.select('id')
|
||||
.where('email', '=', trimmedEmail)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (existingUser) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'This email address is already in use'
|
||||
})
|
||||
}
|
||||
|
||||
// Generate verification token
|
||||
const emailChangeToken = crypto.randomUUID()
|
||||
|
||||
// Store pending email and token
|
||||
await db
|
||||
.updateTable('users')
|
||||
.set({
|
||||
pending_email: trimmedEmail,
|
||||
email_change_token: emailChangeToken,
|
||||
updated: sql`now()`,
|
||||
})
|
||||
.where('id', '=', user.userId)
|
||||
.execute()
|
||||
|
||||
// Get runtime config for email
|
||||
const config = useRuntimeConfig()
|
||||
|
||||
// Send verification email to NEW email address
|
||||
try {
|
||||
const verificationUrl = `${process.env.APP_URL || 'http://localhost:3002'}/api/auth/verify-email-change?token=${emailChangeToken}`
|
||||
|
||||
await sendTemplateEmail({
|
||||
to: trimmedEmail,
|
||||
subject: 'Verify Your New Email Address',
|
||||
template: 'emailChangeVerification',
|
||||
data: {
|
||||
userName: user.display_name,
|
||||
oldEmail: currentUser.email,
|
||||
newEmail: trimmedEmail,
|
||||
verificationUrl: verificationUrl
|
||||
}
|
||||
})
|
||||
|
||||
// Log successful email change request
|
||||
logEvent({
|
||||
eventType: 'EMAIL_CHANGE_REQUESTED',
|
||||
tableName: 'users',
|
||||
recordId: user.userId,
|
||||
userId: user.userId,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: {
|
||||
old_email: currentUser.email,
|
||||
new_email: trimmedEmail
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Verification email sent to new address'
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error sending verification email:', error)
|
||||
|
||||
// Clean up pending email change on error
|
||||
await db
|
||||
.updateTable('users')
|
||||
.set({ pending_email: null, email_change_token: null })
|
||||
.where('id', '=', user.userId)
|
||||
.execute()
|
||||
|
||||
throw createError({
|
||||
statusCode: 500,
|
||||
statusMessage: 'Failed to send verification email'
|
||||
})
|
||||
}
|
||||
})
|
||||
67
server/api/profile/name.patch.ts
Normal file
67
server/api/profile/name.patch.ts
Normal file
|
|
@ -0,0 +1,67 @@
|
|||
import { sql } from 'kysely'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
// Require authentication
|
||||
const user = requireAuth(event)
|
||||
|
||||
// Get request body
|
||||
const body = await readBody(event)
|
||||
const { display_name } = body
|
||||
|
||||
// Validate input
|
||||
if (!display_name || typeof display_name !== 'string') {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Display name is required'
|
||||
})
|
||||
}
|
||||
|
||||
const trimmedName = display_name.trim()
|
||||
|
||||
if (trimmedName.length === 0) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Display name cannot be empty'
|
||||
})
|
||||
}
|
||||
|
||||
if (trimmedName.length > 100) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Display name is too long (max 100 characters)'
|
||||
})
|
||||
}
|
||||
|
||||
// Update display name in database
|
||||
const updated = await db
|
||||
.updateTable('users')
|
||||
.set({ display_name: trimmedName, updated: sql`now()` })
|
||||
.where('id', '=', user.userId)
|
||||
.returning(['id', 'email', 'display_name'])
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!updated) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: 'User not found'
|
||||
})
|
||||
}
|
||||
|
||||
// Log activity
|
||||
logEvent({
|
||||
eventType: 'PROFILE_NAME_UPDATED',
|
||||
tableName: 'users',
|
||||
recordId: user.userId,
|
||||
userId: user.userId,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: {
|
||||
old_name: user.display_name,
|
||||
new_name: trimmedName
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
user: updated
|
||||
}
|
||||
})
|
||||
110
server/api/profile/password.patch.ts
Normal file
110
server/api/profile/password.patch.ts
Normal file
|
|
@ -0,0 +1,110 @@
|
|||
import bcrypt from 'bcrypt'
|
||||
import { sql } from 'kysely'
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
// Require authentication
|
||||
const user = requireAuth(event)
|
||||
|
||||
// Get request body
|
||||
const body = await readBody(event)
|
||||
const { current_password, new_password } = body
|
||||
|
||||
// Validate input
|
||||
if (!current_password || typeof current_password !== 'string') {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'Current password is required'
|
||||
})
|
||||
}
|
||||
|
||||
if (!new_password || typeof new_password !== 'string') {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'New password is required'
|
||||
})
|
||||
}
|
||||
|
||||
if (new_password.length < 8) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'New password must be at least 8 characters long'
|
||||
})
|
||||
}
|
||||
|
||||
if (new_password.length > 128) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'New password is too long (max 128 characters)'
|
||||
})
|
||||
}
|
||||
|
||||
// Don't allow same password
|
||||
if (current_password === new_password) {
|
||||
throw createError({
|
||||
statusCode: 400,
|
||||
statusMessage: 'New password must be different from current password'
|
||||
})
|
||||
}
|
||||
|
||||
// Get current user password hash
|
||||
const current = await db
|
||||
.selectFrom('users')
|
||||
.select('password')
|
||||
.where('id', '=', user.userId)
|
||||
.executeTakeFirst()
|
||||
|
||||
if (!current) {
|
||||
throw createError({
|
||||
statusCode: 404,
|
||||
statusMessage: 'User not found'
|
||||
})
|
||||
}
|
||||
|
||||
// Verify current password
|
||||
const isCurrentPasswordValid = await bcrypt.compare(current_password, current.password)
|
||||
|
||||
if (!isCurrentPasswordValid) {
|
||||
// Log failed password change attempt
|
||||
logEvent({
|
||||
eventType: 'PASSWORD_CHANGE_FAILED',
|
||||
tableName: 'users',
|
||||
recordId: user.userId,
|
||||
userId: user.userId,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: {
|
||||
reason: 'invalid_current_password'
|
||||
}
|
||||
})
|
||||
|
||||
throw createError({
|
||||
statusCode: 401,
|
||||
statusMessage: 'Current password is incorrect'
|
||||
})
|
||||
}
|
||||
|
||||
// Hash new password
|
||||
const saltRounds = 12
|
||||
const newPasswordHash = await bcrypt.hash(new_password, saltRounds)
|
||||
|
||||
// Update password in database
|
||||
await db
|
||||
.updateTable('users')
|
||||
.set({ password: newPasswordHash, updated: sql`now()` })
|
||||
.where('id', '=', user.userId)
|
||||
.execute()
|
||||
|
||||
// Log successful password change
|
||||
logEvent({
|
||||
eventType: 'PASSWORD_CHANGED',
|
||||
tableName: 'users',
|
||||
recordId: user.userId,
|
||||
userId: user.userId,
|
||||
userAgent: getHeader(event, 'user-agent') || undefined,
|
||||
metadata: {}
|
||||
})
|
||||
|
||||
return {
|
||||
success: true,
|
||||
message: 'Password changed successfully'
|
||||
}
|
||||
})
|
||||
42
server/database/schema.ts
Normal file
42
server/database/schema.ts
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
import type { ColumnType, Generated } from 'kysely'
|
||||
|
||||
export interface UsersTable {
|
||||
id: Generated<string>
|
||||
created: ColumnType<Date, string | undefined, string>
|
||||
updated: ColumnType<Date, string | undefined, string>
|
||||
email: string
|
||||
display_name: string
|
||||
avatar: Generated<string>
|
||||
password: Generated<string>
|
||||
verified: Generated<boolean>
|
||||
roles: Generated<string[]>
|
||||
token_key: Generated<string>
|
||||
pending_email: string | null
|
||||
email_change_token: string | null
|
||||
}
|
||||
|
||||
export interface PasswordResetRequestsTable {
|
||||
id: Generated<string>
|
||||
created: ColumnType<Date, Date | string | undefined, Date | string>
|
||||
expires: ColumnType<Date, Date | string, Date | string>
|
||||
user_id: string
|
||||
token: string
|
||||
used: Generated<boolean>
|
||||
}
|
||||
|
||||
export interface ActivityLogsTable {
|
||||
id: Generated<string>
|
||||
timestamp: ColumnType<Date, Date | string | undefined, Date | string>
|
||||
event_type: string
|
||||
table_name: string | null
|
||||
record_id: string | null
|
||||
user_id: string | null
|
||||
user_agent: string | null
|
||||
metadata: Generated<Record<string, any>>
|
||||
}
|
||||
|
||||
export interface Database {
|
||||
users: UsersTable
|
||||
password_reset_requests: PasswordResetRequestsTable
|
||||
activity_logs: ActivityLogsTable
|
||||
}
|
||||
49
server/plugins/migrations.ts
Normal file
49
server/plugins/migrations.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
import { FileMigrationProvider, Migrator } from 'kysely'
|
||||
import { promises as fs } from 'fs'
|
||||
import * as path from 'path'
|
||||
import { getDb } from '../utils/database'
|
||||
|
||||
export default defineNitroPlugin(async () => {
|
||||
const databaseUrl = useRuntimeConfig().databaseUrl || process.env.DATABASE_URL
|
||||
if (!databaseUrl) {
|
||||
console.warn('DATABASE_URL not set, skipping migrations')
|
||||
return
|
||||
}
|
||||
|
||||
const migrator = new Migrator({
|
||||
db: getDb(),
|
||||
provider: new FileMigrationProvider({
|
||||
fs,
|
||||
path,
|
||||
migrationFolder: path.join(process.cwd(), 'migrations'),
|
||||
}),
|
||||
})
|
||||
|
||||
// Identify pending migrations so we can announce them before execution
|
||||
const all = await migrator.getMigrations()
|
||||
const pending = all.filter(m => !m.executedAt)
|
||||
|
||||
if (pending.length === 0) {
|
||||
console.log('Migrations already up-to-date')
|
||||
return
|
||||
}
|
||||
|
||||
console.log(`Running ${pending.length} pending migration(s)...`)
|
||||
for (const m of pending) {
|
||||
console.log(` Migration: ${m.name}`)
|
||||
}
|
||||
|
||||
const { error, results } = await migrator.migrateToLatest()
|
||||
|
||||
results?.forEach(r => {
|
||||
if (r.status === 'Success') console.log(`✓ ${r.migrationName}`)
|
||||
if (r.status === 'Error') console.error(`✗ ${r.migrationName}`)
|
||||
})
|
||||
|
||||
if (error) {
|
||||
console.error('Migration failed:', error)
|
||||
throw error
|
||||
}
|
||||
|
||||
console.log('Migrations complete')
|
||||
})
|
||||
265
server/utils/activity-logger.ts
Normal file
265
server/utils/activity-logger.ts
Normal file
|
|
@ -0,0 +1,265 @@
|
|||
import { db } from './database'
|
||||
import crypto from 'crypto'
|
||||
import type { H3Event } from 'h3'
|
||||
import type { Kysely } from 'kysely'
|
||||
import type { Database } from '~/server/database/schema'
|
||||
import { getAuthUser } from './auth'
|
||||
|
||||
interface LogEventOptions {
|
||||
eventType: string
|
||||
tableName?: string
|
||||
recordId?: string
|
||||
userId?: string
|
||||
userAgent?: string
|
||||
metadata?: Record<string, any>
|
||||
}
|
||||
|
||||
/**
|
||||
* Core function to log an activity event.
|
||||
*
|
||||
* Accepts an optional `executor` so the insert can run inside a caller's
|
||||
* transaction — useful when the audit row must commit atomically with the
|
||||
* operation it describes (e.g. granting the first user the admin role).
|
||||
* Defaults to the global db for fire-and-forget use from helpers.
|
||||
*/
|
||||
export async function logEvent(
|
||||
options: LogEventOptions,
|
||||
executor: Kysely<Database> = db
|
||||
): Promise<void> {
|
||||
try {
|
||||
await executor
|
||||
.insertInto('activity_logs')
|
||||
.values({
|
||||
id: crypto.randomUUID(),
|
||||
timestamp: new Date(),
|
||||
event_type: options.eventType,
|
||||
table_name: options.tableName ?? null,
|
||||
record_id: options.recordId ?? null,
|
||||
user_id: options.userId ?? null,
|
||||
user_agent: options.userAgent ?? null,
|
||||
metadata: options.metadata ?? {},
|
||||
})
|
||||
.execute()
|
||||
} catch (error) {
|
||||
// Log error but don't throw - logging should never break the main flow
|
||||
console.error('Failed to log activity:', error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Helper to extract user info from H3Event
|
||||
*/
|
||||
function getUserInfoFromEvent(event: H3Event | null): { userId?: string; userAgent?: string } {
|
||||
if (!event) return {}
|
||||
|
||||
const user = getAuthUser(event)
|
||||
const userAgent = getHeader(event, 'user-agent') || undefined
|
||||
|
||||
return {
|
||||
userId: user?.userId,
|
||||
userAgent
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Log a CREATE event
|
||||
*/
|
||||
export function logCreate(
|
||||
tableName: string,
|
||||
recordId: string,
|
||||
userIdOrEvent?: string | H3Event,
|
||||
metadata?: any
|
||||
): void {
|
||||
let userId: string | undefined
|
||||
let userAgent: string | undefined
|
||||
|
||||
if (typeof userIdOrEvent === 'string') {
|
||||
userId = userIdOrEvent
|
||||
} else if (userIdOrEvent) {
|
||||
const info = getUserInfoFromEvent(userIdOrEvent)
|
||||
userId = info.userId
|
||||
userAgent = info.userAgent
|
||||
}
|
||||
|
||||
logEvent({
|
||||
eventType: 'CREATE',
|
||||
tableName,
|
||||
recordId,
|
||||
userId,
|
||||
userAgent,
|
||||
metadata
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Log an UPDATE event
|
||||
*/
|
||||
export function logUpdate(
|
||||
tableName: string,
|
||||
recordId: string,
|
||||
userIdOrEvent?: string | H3Event,
|
||||
metadata?: any
|
||||
): void {
|
||||
let userId: string | undefined
|
||||
let userAgent: string | undefined
|
||||
|
||||
if (typeof userIdOrEvent === 'string') {
|
||||
userId = userIdOrEvent
|
||||
} else if (userIdOrEvent) {
|
||||
const info = getUserInfoFromEvent(userIdOrEvent)
|
||||
userId = info.userId
|
||||
userAgent = info.userAgent
|
||||
}
|
||||
|
||||
logEvent({
|
||||
eventType: 'UPDATE',
|
||||
tableName,
|
||||
recordId,
|
||||
userId,
|
||||
userAgent,
|
||||
metadata
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Log a DELETE event
|
||||
*/
|
||||
export function logDelete(
|
||||
tableName: string,
|
||||
recordId: string,
|
||||
userIdOrEvent?: string | H3Event,
|
||||
metadata?: any
|
||||
): void {
|
||||
let userId: string | undefined
|
||||
let userAgent: string | undefined
|
||||
|
||||
if (typeof userIdOrEvent === 'string') {
|
||||
userId = userIdOrEvent
|
||||
} else if (userIdOrEvent) {
|
||||
const info = getUserInfoFromEvent(userIdOrEvent)
|
||||
userId = info.userId
|
||||
userAgent = info.userAgent
|
||||
}
|
||||
|
||||
logEvent({
|
||||
eventType: 'DELETE',
|
||||
tableName,
|
||||
recordId,
|
||||
userId,
|
||||
userAgent,
|
||||
metadata
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Log a successful LOGIN event
|
||||
*/
|
||||
export function logLogin(
|
||||
userId: string,
|
||||
userAgent?: string,
|
||||
metadata?: any
|
||||
): void {
|
||||
logEvent({
|
||||
eventType: 'LOGIN',
|
||||
userId,
|
||||
userAgent,
|
||||
metadata
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Log a failed LOGIN attempt
|
||||
* Note: email must be stored in metadata.email for privacy
|
||||
*/
|
||||
export function logLoginFailed(
|
||||
email: string,
|
||||
userAgent?: string,
|
||||
metadata?: any
|
||||
): void {
|
||||
logEvent({
|
||||
eventType: 'LOGIN_FAILED',
|
||||
userAgent,
|
||||
metadata: {
|
||||
...metadata,
|
||||
email
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Log a LOGOUT event
|
||||
*/
|
||||
export function logLogout(
|
||||
userId: string,
|
||||
userAgent?: string,
|
||||
metadata?: any
|
||||
): void {
|
||||
logEvent({
|
||||
eventType: 'LOGOUT',
|
||||
userId,
|
||||
userAgent,
|
||||
metadata
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Log a PASSWORD_RESET event
|
||||
*/
|
||||
export function logPasswordReset(
|
||||
userId: string,
|
||||
userAgent?: string,
|
||||
metadata?: any
|
||||
): void {
|
||||
logEvent({
|
||||
eventType: 'PASSWORD_RESET',
|
||||
userId,
|
||||
userAgent,
|
||||
metadata
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Log an EMAIL_CHANGE event
|
||||
*/
|
||||
export function logEmailChange(
|
||||
userId: string,
|
||||
userAgent?: string,
|
||||
metadata?: any
|
||||
): void {
|
||||
logEvent({
|
||||
eventType: 'EMAIL_CHANGE',
|
||||
userId,
|
||||
userAgent,
|
||||
metadata
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Log a registration attempt (for rate limiting by IP)
|
||||
*/
|
||||
export function logRegisterAttempt(
|
||||
ip: string,
|
||||
userAgent?: string,
|
||||
metadata?: any
|
||||
): void {
|
||||
logEvent({
|
||||
eventType: 'REGISTER_ATTEMPT',
|
||||
userAgent,
|
||||
metadata: { ...metadata, ip }
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Log a password reset request (for rate limiting by email)
|
||||
*/
|
||||
export function logPasswordResetRequest(
|
||||
email: string,
|
||||
userAgent?: string,
|
||||
metadata?: any
|
||||
): void {
|
||||
logEvent({
|
||||
eventType: 'PASSWORD_RESET_REQUEST',
|
||||
userAgent,
|
||||
metadata: { ...metadata, email }
|
||||
})
|
||||
}
|
||||
26
server/utils/auth.ts
Normal file
26
server/utils/auth.ts
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
import jwt from 'jsonwebtoken'
|
||||
import type { H3Event } from 'h3'
|
||||
|
||||
export function verifyToken(token: string) {
|
||||
try {
|
||||
return jwt.verify(token, useRuntimeConfig().jwtSecret) as { userId: string; email: string; display_name: string }
|
||||
} catch {
|
||||
return null
|
||||
}
|
||||
}
|
||||
|
||||
export function requireAuth(event: H3Event) {
|
||||
const token = getCookie(event, 'auth-token')
|
||||
const user = token ? verifyToken(token) : null
|
||||
|
||||
if (!user) {
|
||||
throw createError({ statusCode: 401, statusMessage: 'Authentication required' })
|
||||
}
|
||||
|
||||
return user
|
||||
}
|
||||
|
||||
export function getAuthUser(event: H3Event) {
|
||||
const token = getCookie(event, 'auth-token')
|
||||
return token ? verifyToken(token) : null
|
||||
}
|
||||
39
server/utils/database.ts
Normal file
39
server/utils/database.ts
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
import { Kysely, sql } from 'kysely'
|
||||
import { PostgresJSDialect } from 'kysely-postgres-js'
|
||||
import postgres from 'postgres'
|
||||
import type { Database } from '~/server/database/schema'
|
||||
|
||||
let _db: Kysely<Database> | null = null
|
||||
|
||||
function getDb(): Kysely<Database> {
|
||||
if (_db) return _db
|
||||
|
||||
const databaseUrl = useRuntimeConfig().databaseUrl || process.env.DATABASE_URL
|
||||
if (!databaseUrl) throw new Error('DATABASE_URL is not set')
|
||||
|
||||
const isLocal = databaseUrl.includes('localhost') || databaseUrl.includes('127.0.0.1')
|
||||
|
||||
_db = new Kysely<Database>({
|
||||
dialect: new PostgresJSDialect({
|
||||
postgres: postgres(databaseUrl, {
|
||||
ssl: isLocal ? false : 'require',
|
||||
max: 10,
|
||||
idle_timeout: 20,
|
||||
connect_timeout: 30,
|
||||
onnotice: () => {},
|
||||
}),
|
||||
}),
|
||||
})
|
||||
|
||||
return _db
|
||||
}
|
||||
|
||||
export const db = new Proxy({} as Kysely<Database>, {
|
||||
get: (_, prop) => {
|
||||
const real = getDb()
|
||||
const value = (real as any)[prop]
|
||||
return typeof value === 'function' ? value.bind(real) : value
|
||||
},
|
||||
})
|
||||
|
||||
export { getDb, sql }
|
||||
226
server/utils/email-templates.ts
Normal file
226
server/utils/email-templates.ts
Normal file
|
|
@ -0,0 +1,226 @@
|
|||
export interface EmailTemplateData {
|
||||
appName?: string
|
||||
userName?: string
|
||||
userEmail?: string
|
||||
timestamp?: string
|
||||
environment?: string
|
||||
[key: string]: any
|
||||
}
|
||||
|
||||
export interface EmailTemplate {
|
||||
subject: string
|
||||
html: (data: EmailTemplateData) => string
|
||||
text: (data: EmailTemplateData) => string
|
||||
}
|
||||
|
||||
const baseStyles = {
|
||||
container: 'font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px;',
|
||||
header: 'background: linear-gradient(135deg, #000000 0%, #374151 100%); color: white; padding: 30px; border-radius: 10px 10px 0 0; text-align: center;',
|
||||
content: 'background: white; padding: 30px; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 10px 10px;',
|
||||
footer: 'text-align: center; margin-top: 20px; color: #9ca3af; font-size: 12px;',
|
||||
infoBox: 'background: #f3f4f6; border-left: 4px solid #000000; padding: 15px; margin: 20px 0; border-radius: 0 5px 5px 0;',
|
||||
button: 'background: #000000; color: white; padding: 12px 24px; text-decoration: none; border-radius: 5px; display: inline-block;'
|
||||
}
|
||||
|
||||
function buildEmailTemplate(
|
||||
subject: string,
|
||||
htmlContent: (data: EmailTemplateData) => string,
|
||||
textContent: (data: EmailTemplateData) => string
|
||||
): EmailTemplate {
|
||||
return {
|
||||
subject,
|
||||
html: (data: EmailTemplateData) => `
|
||||
<div style="${baseStyles.container}">
|
||||
<div style="${baseStyles.header}">
|
||||
<h1 style="margin: 0; font-size: 24px;">${data.appName || 'App'}</h1>
|
||||
<p style="margin: 10px 0 0 0; opacity: 0.9;">${subject}</p>
|
||||
</div>
|
||||
<div style="${baseStyles.content}">
|
||||
${htmlContent(data)}
|
||||
</div>
|
||||
</div>
|
||||
`,
|
||||
text: textContent
|
||||
}
|
||||
}
|
||||
|
||||
export const testEmailTemplate: EmailTemplate = buildEmailTemplate(
|
||||
'Test Email',
|
||||
(data) => `
|
||||
<h2 style="color: #333; margin-top: 0;">Hello ${data.userName || 'User'}!</h2>
|
||||
<p style="color: #666; line-height: 1.6;">
|
||||
This is a test email from ${data.appName || 'the application'}. If you're receiving this,
|
||||
the email system is working correctly.
|
||||
</p>
|
||||
<div style="${baseStyles.infoBox}">
|
||||
<h3 style="margin: 0 0 10px 0; color: #333;">Email Details:</h3>
|
||||
<ul style="margin: 0; color: #666;">
|
||||
<li><strong>Sent to:</strong> ${data.userEmail || 'Unknown'}</li>
|
||||
<li><strong>Timestamp:</strong> ${data.timestamp || 'Unknown'}</li>
|
||||
<li><strong>Environment:</strong> ${data.environment || 'Unknown'}</li>
|
||||
</ul>
|
||||
</div>
|
||||
`,
|
||||
(data) => `Test Email from ${data.appName || 'App'}\n\nHello ${data.userName || 'User'}!\n\nThis is a test email. The email system is working correctly.\n\nSent to: ${data.userEmail || 'Unknown'}\nTimestamp: ${data.timestamp || 'Unknown'}\nEnvironment: ${data.environment || 'Unknown'}`
|
||||
)
|
||||
|
||||
export const welcomeEmailTemplate: EmailTemplate = buildEmailTemplate(
|
||||
'Welcome!',
|
||||
(data) => `
|
||||
<h2 style="color: #333; margin-top: 0;">Welcome ${data.userName || 'User'}!</h2>
|
||||
<p style="color: #666; line-height: 1.6;">
|
||||
Thank you for joining ${data.appName || 'us'}! We're excited to have you on board.
|
||||
</p>
|
||||
<p style="color: #666; line-height: 1.6;">
|
||||
If you have any questions or run into any issues, don't hesitate to reach out.
|
||||
</p>
|
||||
`,
|
||||
(data) => `Welcome to ${data.appName || 'App'}!\n\nHello ${data.userName || 'User'}!\n\nThank you for joining. We're excited to have you on board.`
|
||||
)
|
||||
|
||||
export const notificationEmailTemplate: EmailTemplate = buildEmailTemplate(
|
||||
'New Notification',
|
||||
(data) => `
|
||||
<h2 style="color: #333; margin-top: 0;">Hello ${data.userName || 'User'}!</h2>
|
||||
<p style="color: #666; line-height: 1.6;">
|
||||
You have a new notification from ${data.appName || 'the application'}.
|
||||
</p>
|
||||
<div style="${baseStyles.infoBox}">
|
||||
<p style="margin: 0; color: #666;">${data.message || 'No message provided'}</p>
|
||||
</div>
|
||||
${data.actionUrl ? `
|
||||
<div style="text-align: center; margin-top: 30px;">
|
||||
<a href="${data.actionUrl}" style="${baseStyles.button}">
|
||||
${data.actionText || 'View Details'}
|
||||
</a>
|
||||
</div>
|
||||
` : ''}
|
||||
`,
|
||||
(data) => `New Notification from ${data.appName || 'App'}\n\nHello ${data.userName || 'User'}!\n\n${data.message || 'No message provided'}\n\n${data.actionUrl ? `${data.actionText || 'View Details'}: ${data.actionUrl}` : ''}`
|
||||
)
|
||||
|
||||
export const bulkEmailTemplate: EmailTemplate = buildEmailTemplate(
|
||||
'Admin Message',
|
||||
(data) => `
|
||||
<h2 style="color: #333; margin-top: 0;">Hello ${data.userName || 'User'}!</h2>
|
||||
<div style="color: #666; line-height: 1.6;">
|
||||
${data.message || 'No message provided'}
|
||||
</div>
|
||||
${data.actionUrl ? `
|
||||
<div style="text-align: center; margin-top: 30px;">
|
||||
<a href="${data.actionUrl}" style="${baseStyles.button}">
|
||||
${data.actionText || 'Learn More'}
|
||||
</a>
|
||||
</div>
|
||||
` : ''}
|
||||
`,
|
||||
(data) => `Admin Message from ${data.appName || 'App'}\n\nHello ${data.userName || 'User'}!\n\n${data.message || 'No message provided'}`
|
||||
)
|
||||
|
||||
export const verificationEmailTemplate: EmailTemplate = buildEmailTemplate(
|
||||
'Verify Your Email Address',
|
||||
(data) => `
|
||||
<h2 style="color: #333; margin-top: 0;">Hello ${data.userName || 'User'}!</h2>
|
||||
<p style="color: #666; line-height: 1.6;">
|
||||
Thank you for registering with ${data.appName || 'us'}! To complete your registration,
|
||||
please verify your email address by clicking the button below.
|
||||
</p>
|
||||
<div style="text-align: center; margin-top: 30px;">
|
||||
<a href="${data.verificationUrl || '#'}" style="${baseStyles.button}">
|
||||
Verify Email Address
|
||||
</a>
|
||||
</div>
|
||||
<p style="color: #666; line-height: 1.6; margin-top: 20px; font-size: 14px;">
|
||||
If the button doesn't work, copy and paste this link into your browser:
|
||||
<br>
|
||||
<a href="${data.verificationUrl || '#'}" style="color: #000000; text-decoration: underline; word-break: break-all;">
|
||||
${data.verificationUrl || '#'}
|
||||
</a>
|
||||
</p>
|
||||
<p style="color: #666; line-height: 1.6; margin-top: 20px; font-size: 14px;">
|
||||
This link will expire in 24 hours. If you didn't create an account,
|
||||
you can safely ignore this email.
|
||||
</p>
|
||||
`,
|
||||
(data) => `Verify Your Email Address - ${data.appName || 'App'}\n\nHello ${data.userName || 'User'}!\n\nPlease verify your email by visiting:\n\n${data.verificationUrl || '#'}\n\nThis link will expire in 24 hours.`
|
||||
)
|
||||
|
||||
export const emailChangeVerificationTemplate: EmailTemplate = buildEmailTemplate(
|
||||
'Confirm Your New Email Address',
|
||||
(data) => `
|
||||
<h2 style="color: #333; margin-top: 0;">Hello ${data.userName || 'User'}!</h2>
|
||||
<p style="color: #666; line-height: 1.6;">
|
||||
You requested to change your email address from <strong>${data.oldEmail || 'your current email'}</strong>
|
||||
to <strong>${data.newEmail || 'a new email'}</strong>.
|
||||
</p>
|
||||
<div style="text-align: center; margin-top: 30px;">
|
||||
<a href="${data.verificationUrl || '#'}" style="${baseStyles.button}">
|
||||
Confirm Email Change
|
||||
</a>
|
||||
</div>
|
||||
<p style="color: #666; line-height: 1.6; margin-top: 20px; font-size: 14px;">
|
||||
If the button doesn't work, copy and paste this link into your browser:
|
||||
<br>
|
||||
<a href="${data.verificationUrl || '#'}" style="color: #000000; text-decoration: underline; word-break: break-all;">
|
||||
${data.verificationUrl || '#'}
|
||||
</a>
|
||||
</p>
|
||||
<p style="color: #666; line-height: 1.6; margin-top: 20px; font-size: 14px;">
|
||||
This link will expire in 24 hours. If you didn't request this change,
|
||||
you can safely ignore this email.
|
||||
</p>
|
||||
`,
|
||||
(data) => `Confirm Your New Email Address - ${data.appName || 'App'}\n\nHello ${data.userName || 'User'}!\n\nYou requested to change your email from ${data.oldEmail} to ${data.newEmail}.\n\nConfirm: ${data.verificationUrl || '#'}\n\nThis link will expire in 24 hours.`
|
||||
)
|
||||
|
||||
export const passwordResetEmailTemplate: EmailTemplate = buildEmailTemplate(
|
||||
'Reset Your Password',
|
||||
(data) => `
|
||||
<h2 style="color: #333; margin-top: 0;">Hello ${data.userName || 'User'}!</h2>
|
||||
<p style="color: #666; line-height: 1.6;">
|
||||
You requested to reset your password for your ${data.appName || ''} account.
|
||||
</p>
|
||||
<div style="text-align: center; margin-top: 30px;">
|
||||
<a href="${data.resetUrl || '#'}" style="${baseStyles.button}">
|
||||
Reset Password
|
||||
</a>
|
||||
</div>
|
||||
<p style="color: #666; line-height: 1.6; margin-top: 20px; font-size: 14px;">
|
||||
If the button doesn't work, copy and paste this link into your browser:
|
||||
<br>
|
||||
<a href="${data.resetUrl || '#'}" style="color: #000000; text-decoration: underline; word-break: break-all;">
|
||||
${data.resetUrl || '#'}
|
||||
</a>
|
||||
</p>
|
||||
<p style="color: #666; line-height: 1.6; margin-top: 20px; font-size: 14px;">
|
||||
This link will expire in 1 hour. If you didn't request a password reset,
|
||||
you can safely ignore this email.
|
||||
</p>
|
||||
`,
|
||||
(data) => `Reset Your Password - ${data.appName || 'App'}\n\nHello ${data.userName || 'User'}!\n\nReset your password: ${data.resetUrl || '#'}\n\nThis link will expire in 1 hour.`
|
||||
)
|
||||
|
||||
export const emailTemplates = {
|
||||
test: testEmailTemplate,
|
||||
welcome: welcomeEmailTemplate,
|
||||
notification: notificationEmailTemplate,
|
||||
bulk: bulkEmailTemplate,
|
||||
verification: verificationEmailTemplate,
|
||||
emailChangeVerification: emailChangeVerificationTemplate,
|
||||
passwordReset: passwordResetEmailTemplate
|
||||
}
|
||||
|
||||
export function renderEmailTemplate(
|
||||
templateName: keyof typeof emailTemplates,
|
||||
data: EmailTemplateData
|
||||
): { subject: string; html: string; text: string } {
|
||||
const template = emailTemplates[templateName]
|
||||
if (!template) {
|
||||
throw new Error(`Email template '${templateName}' not found`)
|
||||
}
|
||||
return {
|
||||
subject: template.subject,
|
||||
html: template.html(data),
|
||||
text: template.text(data)
|
||||
}
|
||||
}
|
||||
151
server/utils/email.ts
Normal file
151
server/utils/email.ts
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
import nodemailer from 'nodemailer'
|
||||
import type { Transporter } from 'nodemailer'
|
||||
import mailgunTransport from 'nodemailer-mailgun-transport'
|
||||
import { renderEmailTemplate, type EmailTemplateData } from './email-templates'
|
||||
|
||||
const isDevelopment = (process.env.NODE_ENV || 'development') === 'development'
|
||||
|
||||
let transporter: Transporter | null = null
|
||||
|
||||
function getEmailConfig() {
|
||||
try {
|
||||
const config = useRuntimeConfig()
|
||||
return {
|
||||
mailgunApiKey: config.mailgunApiKey || process.env.MAILGUN_API_KEY,
|
||||
mailgunDomain: config.mailgunDomain || process.env.MAILGUN_DOMAIN,
|
||||
mailgunHost: config.mailgunHost || process.env.MAILGUN_HOST,
|
||||
smtpFrom: config.smtpFrom || process.env.SMTP_FROM,
|
||||
smtpFromName: config.smtpFromName || process.env.SMTP_FROM_NAME,
|
||||
appName: config.appName || process.env.APP_NAME
|
||||
}
|
||||
} catch {
|
||||
return {
|
||||
mailgunApiKey: process.env.MAILGUN_API_KEY,
|
||||
mailgunDomain: process.env.MAILGUN_DOMAIN,
|
||||
mailgunHost: process.env.MAILGUN_HOST,
|
||||
smtpFrom: process.env.SMTP_FROM,
|
||||
smtpFromName: process.env.SMTP_FROM_NAME,
|
||||
appName: process.env.APP_NAME
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getTransporter(): Transporter {
|
||||
if (transporter) return transporter
|
||||
|
||||
const config = getEmailConfig()
|
||||
|
||||
if (isDevelopment) {
|
||||
console.log('[Email] Using MailHog (development mode)')
|
||||
transporter = nodemailer.createTransport({
|
||||
host: 'localhost',
|
||||
port: 1025,
|
||||
secure: false,
|
||||
tls: { rejectUnauthorized: false }
|
||||
})
|
||||
return transporter
|
||||
}
|
||||
|
||||
if (!config.mailgunApiKey || !config.mailgunDomain) {
|
||||
throw new Error('Mailgun configuration incomplete. Set MAILGUN_API_KEY and MAILGUN_DOMAIN.')
|
||||
}
|
||||
|
||||
console.log('[Email] Using Mailgun HTTP API')
|
||||
const mailgunOptions: any = {
|
||||
auth: {
|
||||
api_key: config.mailgunApiKey,
|
||||
domain: config.mailgunDomain
|
||||
}
|
||||
}
|
||||
|
||||
if (config.mailgunHost) {
|
||||
mailgunOptions.host = config.mailgunHost
|
||||
}
|
||||
|
||||
transporter = nodemailer.createTransport(mailgunTransport(mailgunOptions))
|
||||
return transporter
|
||||
}
|
||||
|
||||
export interface EmailOptions {
|
||||
to: string | string[]
|
||||
subject: string
|
||||
html: string
|
||||
text?: string
|
||||
from?: string
|
||||
}
|
||||
|
||||
export interface TemplateEmailOptions {
|
||||
to: string | string[]
|
||||
template: keyof typeof import('./email-templates').emailTemplates
|
||||
data: EmailTemplateData
|
||||
from?: string
|
||||
subject?: string
|
||||
}
|
||||
|
||||
export async function sendEmail(options: EmailOptions): Promise<boolean> {
|
||||
try {
|
||||
const config = getEmailConfig()
|
||||
|
||||
let fromEmail = options.from
|
||||
if (!fromEmail) {
|
||||
const fromName = config.smtpFromName || config.appName
|
||||
const fromAddress = isDevelopment
|
||||
? 'noreply@localhost.local'
|
||||
: (config.smtpFrom || 'noreply@yourdomain.com')
|
||||
fromEmail = fromName ? `${fromName} <${fromAddress}>` : fromAddress
|
||||
}
|
||||
|
||||
const mailOptions = {
|
||||
from: fromEmail,
|
||||
to: Array.isArray(options.to) ? options.to.join(', ') : options.to,
|
||||
subject: options.subject,
|
||||
html: options.html,
|
||||
text: options.text || options.html.replace(/<[^>]*>/g, '')
|
||||
}
|
||||
|
||||
const info = await getTransporter().sendMail(mailOptions)
|
||||
console.log('[Email] Sent successfully:', info.messageId)
|
||||
return true
|
||||
} catch (error) {
|
||||
if (!process.env.VITEST) {
|
||||
console.error('[Email] Error sending:', error)
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export async function sendTemplateEmail(options: TemplateEmailOptions): Promise<boolean> {
|
||||
try {
|
||||
const config = getEmailConfig()
|
||||
const appName = config.appName || 'App'
|
||||
|
||||
const templateData = { ...options.data, appName }
|
||||
const { subject, html, text } = renderEmailTemplate(options.template, templateData)
|
||||
|
||||
return await sendEmail({
|
||||
to: options.to,
|
||||
subject: options.subject || subject,
|
||||
html,
|
||||
text,
|
||||
from: options.from
|
||||
})
|
||||
} catch (error) {
|
||||
if (!process.env.VITEST) {
|
||||
console.error('[Email] Error sending template email:', error)
|
||||
}
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
export async function sendBulkTemplateEmails(emails: TemplateEmailOptions[]): Promise<{ success: number; failed: number }> {
|
||||
let success = 0
|
||||
let failed = 0
|
||||
|
||||
for (const email of emails) {
|
||||
const result = await sendTemplateEmail(email)
|
||||
if (result) success++
|
||||
else failed++
|
||||
}
|
||||
|
||||
return { success, failed }
|
||||
}
|
||||
78
server/utils/rate-limit.ts
Normal file
78
server/utils/rate-limit.ts
Normal file
|
|
@ -0,0 +1,78 @@
|
|||
import { sql } from 'kysely'
|
||||
import { db } from './database'
|
||||
import { logEvent } from './activity-logger'
|
||||
|
||||
interface RateLimitResult {
|
||||
allowed: boolean
|
||||
remaining: number
|
||||
retryAfterSeconds?: number
|
||||
}
|
||||
|
||||
/**
|
||||
* Check rate limit by counting recent events in activity_logs.
|
||||
* Uses metadata JSONB field to match identifier (email or IP).
|
||||
*/
|
||||
export async function checkRateLimit(
|
||||
eventType: string,
|
||||
identifierField: string,
|
||||
identifierValue: string,
|
||||
windowMs: number,
|
||||
maxAttempts: number
|
||||
): Promise<RateLimitResult> {
|
||||
const windowStart = new Date(Date.now() - windowMs)
|
||||
|
||||
try {
|
||||
const result = await db
|
||||
.selectFrom('activity_logs')
|
||||
.select([
|
||||
sql<number>`COUNT(*)::int`.as('count'),
|
||||
sql<Date | null>`MIN(timestamp)`.as('oldest_attempt'),
|
||||
])
|
||||
.where('event_type', '=', eventType)
|
||||
.where(sql`metadata->>${sql.lit(identifierField)}`, '=', identifierValue)
|
||||
.where('timestamp', '>', windowStart)
|
||||
.executeTakeFirst()
|
||||
|
||||
const count = result?.count || 0
|
||||
const oldestAttempt = result?.oldest_attempt
|
||||
|
||||
if (count >= maxAttempts) {
|
||||
const retryAfterMs = oldestAttempt
|
||||
? (new Date(oldestAttempt).getTime() + windowMs) - Date.now()
|
||||
: windowMs
|
||||
|
||||
return {
|
||||
allowed: false,
|
||||
remaining: 0,
|
||||
retryAfterSeconds: Math.max(1, Math.ceil(retryAfterMs / 1000))
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
allowed: true,
|
||||
remaining: maxAttempts - count
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Rate limit check failed:', error)
|
||||
// Fail open - allow request if rate limit check fails
|
||||
return {
|
||||
allowed: true,
|
||||
remaining: maxAttempts
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Log when rate limit is exceeded (for monitoring)
|
||||
*/
|
||||
export function logRateLimitExceeded(
|
||||
identifier: string,
|
||||
endpoint: string,
|
||||
userAgent?: string
|
||||
): void {
|
||||
logEvent({
|
||||
eventType: 'RATE_LIMIT_EXCEEDED',
|
||||
userAgent,
|
||||
metadata: { identifier, endpoint }
|
||||
})
|
||||
}
|
||||
73
server/utils/rbac.ts
Normal file
73
server/utils/rbac.ts
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
import type { H3Event } from 'h3'
|
||||
import { db } from './database'
|
||||
import { requireAuth } from './auth'
|
||||
import { getStaticRole, ROLES, STATIC_ROLE_NAMES } from '~~/app/utils/role-definitions'
|
||||
import type { Permission } from '~~/app/utils/permissions'
|
||||
|
||||
export async function getUserRoles(userId: string): Promise<string[]> {
|
||||
const row = await db
|
||||
.selectFrom('users')
|
||||
.select('roles')
|
||||
.where('id', '=', userId)
|
||||
.executeTakeFirst()
|
||||
|
||||
return row?.roles ?? []
|
||||
}
|
||||
|
||||
// Resolves a list of role names to the union of permissions they grant.
|
||||
// Baseline: static definitions only. The optional `custom-roles` block ships
|
||||
// a replacement of this file that also falls back to the `custom_roles` table
|
||||
// for names that aren't statically defined.
|
||||
export async function getRolePermissions(roleNames: readonly string[]): Promise<Set<Permission>> {
|
||||
const set = new Set<Permission>()
|
||||
for (const roleName of roleNames) {
|
||||
const staticRole = getStaticRole(roleName)
|
||||
if (!staticRole) continue
|
||||
for (const perm of staticRole.permissions) set.add(perm)
|
||||
}
|
||||
return set
|
||||
}
|
||||
|
||||
export async function getUserPermissions(userId: string): Promise<Set<Permission>> {
|
||||
const roles = await getUserRoles(userId)
|
||||
return getRolePermissions(roles)
|
||||
}
|
||||
|
||||
export async function userHasRole(userId: string, roleName: string): Promise<boolean> {
|
||||
const roles = await getUserRoles(userId)
|
||||
return roles.includes(roleName)
|
||||
}
|
||||
|
||||
export async function userHasPermission(userId: string, permission: Permission): Promise<boolean> {
|
||||
const perms = await getUserPermissions(userId)
|
||||
return perms.has(permission)
|
||||
}
|
||||
|
||||
export async function requireRole(event: H3Event, roleName: string) {
|
||||
const authUser = requireAuth(event)
|
||||
const ok = await userHasRole(authUser.userId, roleName)
|
||||
if (!ok) {
|
||||
throw createError({ statusCode: 403, statusMessage: `Role required: ${roleName}` })
|
||||
}
|
||||
return authUser
|
||||
}
|
||||
|
||||
export async function requirePermission(event: H3Event, permission: Permission) {
|
||||
const authUser = requireAuth(event)
|
||||
const ok = await userHasPermission(authUser.userId, permission)
|
||||
if (!ok) {
|
||||
throw createError({ statusCode: 403, statusMessage: `Permission required: ${permission}` })
|
||||
}
|
||||
return authUser
|
||||
}
|
||||
|
||||
// Validates that every entry in `roles` is a known role name.
|
||||
// v1: only static roles are known. The optional custom-roles block extends
|
||||
// this to also consult the `custom_roles` table.
|
||||
export async function validateRoleNames(roles: string[]): Promise<{ valid: boolean; unknown: string[] }> {
|
||||
const known = new Set<string>(STATIC_ROLE_NAMES)
|
||||
const unknown = roles.filter(r => !known.has(r))
|
||||
return { valid: unknown.length === 0, unknown }
|
||||
}
|
||||
|
||||
export { ROLES, STATIC_ROLE_NAMES }
|
||||
172
server/utils/storage.ts
Normal file
172
server/utils/storage.ts
Normal file
|
|
@ -0,0 +1,172 @@
|
|||
import { S3Client, PutObjectCommand, DeleteObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3'
|
||||
import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
|
||||
import { randomBytes } from 'crypto'
|
||||
|
||||
// S3 Client instance (will be initialized lazily)
|
||||
let s3Client: S3Client | null = null
|
||||
|
||||
const SIGNED_URL_EXPIRATION = 60 * 60 * 24 * 7 // 7 days in seconds
|
||||
|
||||
// Get S3 settings from environment variables
|
||||
function getS3Settings() {
|
||||
// Try to get runtime config first (for production builds), then fallback to process.env
|
||||
let S3_ENDPOINT, S3_REGION, S3_ACCESS_KEY_ID, S3_SECRET_ACCESS_KEY, S3_BUCKET_NAME
|
||||
|
||||
try {
|
||||
// Use runtime config if available (production build)
|
||||
const config = useRuntimeConfig()
|
||||
S3_ENDPOINT = config.s3Endpoint || process.env.S3_ENDPOINT
|
||||
S3_REGION = config.s3Region || process.env.S3_REGION
|
||||
S3_ACCESS_KEY_ID = config.s3AccessKeyId || process.env.S3_ACCESS_KEY_ID
|
||||
S3_SECRET_ACCESS_KEY = config.s3SecretAccessKey || process.env.S3_SECRET_ACCESS_KEY
|
||||
S3_BUCKET_NAME = config.s3BucketName || process.env.S3_BUCKET_NAME
|
||||
} catch {
|
||||
// Fallback to process.env (development mode)
|
||||
S3_ENDPOINT = process.env.S3_ENDPOINT
|
||||
S3_REGION = process.env.S3_REGION
|
||||
S3_ACCESS_KEY_ID = process.env.S3_ACCESS_KEY_ID
|
||||
S3_SECRET_ACCESS_KEY = process.env.S3_SECRET_ACCESS_KEY
|
||||
S3_BUCKET_NAME = process.env.S3_BUCKET_NAME
|
||||
}
|
||||
|
||||
return {
|
||||
endpoint: S3_ENDPOINT,
|
||||
region: S3_REGION || 'us-west-004',
|
||||
accessKeyId: S3_ACCESS_KEY_ID,
|
||||
secretAccessKey: S3_SECRET_ACCESS_KEY,
|
||||
bucketName: S3_BUCKET_NAME
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize S3 client with current settings
|
||||
function initializeS3Client() {
|
||||
const settings = getS3Settings()
|
||||
|
||||
if (!settings.endpoint || !settings.accessKeyId || !settings.secretAccessKey || !settings.bucketName) {
|
||||
throw new Error('S3 configuration is incomplete. Please set S3_ENDPOINT, S3_ACCESS_KEY_ID, S3_SECRET_ACCESS_KEY, and S3_BUCKET_NAME environment variables.')
|
||||
}
|
||||
|
||||
s3Client = new S3Client({
|
||||
endpoint: settings.endpoint,
|
||||
region: settings.region,
|
||||
credentials: {
|
||||
accessKeyId: settings.accessKeyId,
|
||||
secretAccessKey: settings.secretAccessKey,
|
||||
},
|
||||
forcePathStyle: true, // Required for B2
|
||||
})
|
||||
|
||||
return s3Client
|
||||
}
|
||||
|
||||
// Get S3 client (initialize if needed)
|
||||
function getS3Client() {
|
||||
if (!s3Client) {
|
||||
return initializeS3Client()
|
||||
}
|
||||
return s3Client
|
||||
}
|
||||
|
||||
export interface UploadResult {
|
||||
url: string
|
||||
key: string
|
||||
filename: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Upload a file to S3-compatible storage (Backblaze B2)
|
||||
*/
|
||||
export async function uploadToS3(
|
||||
fileData: Buffer,
|
||||
originalFilename: string,
|
||||
contentType: string
|
||||
): Promise<UploadResult> {
|
||||
try {
|
||||
const client = getS3Client()
|
||||
const settings = getS3Settings()
|
||||
|
||||
// Generate unique filename
|
||||
const ext = originalFilename.split('.').pop()
|
||||
const randomName = randomBytes(16).toString('hex')
|
||||
const key = `uploads/${randomName}.${ext}`
|
||||
|
||||
// Upload to S3
|
||||
const command = new PutObjectCommand({
|
||||
Bucket: settings.bucketName,
|
||||
Key: key,
|
||||
Body: fileData,
|
||||
ContentType: contentType,
|
||||
})
|
||||
|
||||
await client.send(command)
|
||||
|
||||
// Generate signed URL for private bucket access
|
||||
const url = await generateSignedUrl(key)
|
||||
|
||||
return {
|
||||
url,
|
||||
key,
|
||||
filename: originalFilename,
|
||||
}
|
||||
} catch (error: any) {
|
||||
console.error('S3 upload error:', error)
|
||||
throw new Error(`Failed to upload file to storage: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Delete a file from S3-compatible storage
|
||||
*/
|
||||
export async function deleteFromS3(key: string): Promise<void> {
|
||||
try {
|
||||
const client = getS3Client()
|
||||
const settings = getS3Settings()
|
||||
|
||||
const command = new DeleteObjectCommand({
|
||||
Bucket: settings.bucketName,
|
||||
Key: key,
|
||||
})
|
||||
|
||||
await client.send(command)
|
||||
} catch (error: any) {
|
||||
console.error('S3 delete error:', error)
|
||||
throw new Error(`Failed to delete file from storage: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Generate a signed URL for accessing a file in private bucket
|
||||
*/
|
||||
export async function generateSignedUrl(key: string, expiresIn: number = SIGNED_URL_EXPIRATION): Promise<string> {
|
||||
try {
|
||||
const client = getS3Client()
|
||||
const settings = getS3Settings()
|
||||
|
||||
const command = new GetObjectCommand({
|
||||
Bucket: settings.bucketName,
|
||||
Key: key,
|
||||
})
|
||||
|
||||
const url = await getSignedUrl(client, command, { expiresIn })
|
||||
return url
|
||||
} catch (error: any) {
|
||||
console.error('S3 signed URL generation error:', error)
|
||||
throw new Error(`Failed to generate signed URL: ${error.message}`)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate file type for image uploads
|
||||
*/
|
||||
export function validateImageType(contentType: string): boolean {
|
||||
const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif', 'image/webp', 'image/heic', 'image/heif']
|
||||
return allowedTypes.includes(contentType)
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate file size
|
||||
*/
|
||||
export function validateFileSize(fileSize: number, maxSizeMB: number = 5): boolean {
|
||||
const maxSize = maxSizeMB * 1024 * 1024
|
||||
return fileSize <= maxSize
|
||||
}
|
||||
10
tsconfig.json
Normal file
10
tsconfig.json
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
// https://nuxt.com/docs/guide/concepts/typescript
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./.nuxt/tsconfig.app.json" },
|
||||
{ "path": "./.nuxt/tsconfig.server.json" },
|
||||
{ "path": "./.nuxt/tsconfig.shared.json" },
|
||||
{ "path": "./.nuxt/tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
Loading…
Reference in a new issue