Complete sermon management system with Nuxt 4, authentication, SQLite database, QR codes, and Docker deployment
This commit is contained in:
Ryderjj89
112
components/LoginModal.vue
Normal file
112
components/LoginModal.vue
Normal file
@@ -0,0 +1,112 @@
|
||||
<template>
|
||||
<UModal v-model="isOpen">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-semibold">Admin Login</h3>
|
||||
</template>
|
||||
|
||||
<form @submit.prevent="handleSubmit" class="space-y-4">
|
||||
<UFormGroup label="Username" name="username">
|
||||
<UInput
|
||||
v-model="form.username"
|
||||
placeholder="Enter username"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Password" name="password">
|
||||
<UInput
|
||||
v-model="form.password"
|
||||
type="password"
|
||||
placeholder="Enter password"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<div v-if="error" class="text-red-600 text-sm">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end space-x-2">
|
||||
<UButton
|
||||
type="button"
|
||||
variant="outline"
|
||||
:disabled="loading"
|
||||
@click="close"
|
||||
>
|
||||
Cancel
|
||||
</UButton>
|
||||
<UButton
|
||||
type="submit"
|
||||
variant="solid"
|
||||
color="primary"
|
||||
:loading="loading"
|
||||
>
|
||||
Login
|
||||
</UButton>
|
||||
</div>
|
||||
</form>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
(e: 'success'): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const isOpen = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
const form = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const loading = ref(false)
|
||||
const error = ref('')
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!form.username || !form.password) {
|
||||
error.value = 'Please enter both username and password'
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
error.value = ''
|
||||
|
||||
try {
|
||||
await $fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
username: form.username,
|
||||
password: form.password
|
||||
}
|
||||
})
|
||||
|
||||
emit('success')
|
||||
close()
|
||||
} catch (err: any) {
|
||||
error.value = err.data?.statusMessage || 'Login failed'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
isOpen.value = false
|
||||
form.username = ''
|
||||
form.password = ''
|
||||
error.value = ''
|
||||
}
|
||||
</script>
|
||||
38
components/QRCodeButton.vue
Normal file
38
components/QRCodeButton.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<UButton
|
||||
@click="showQRCode = true"
|
||||
variant="ghost"
|
||||
color="gray"
|
||||
size="sm"
|
||||
icon="i-heroicons-qr-code"
|
||||
:aria-label="`Show QR code for ${title}`"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
url: string
|
||||
title?: string
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const showQRCode = ref(false)
|
||||
|
||||
const fullUrl = computed(() => {
|
||||
if (process.client) {
|
||||
return `${window.location.origin}${props.url}`
|
||||
}
|
||||
return props.url
|
||||
})
|
||||
|
||||
// Emit event to parent component to show modal
|
||||
const emit = defineEmits<{
|
||||
click: [value: boolean]
|
||||
}>()
|
||||
|
||||
watch(showQRCode, (open) => {
|
||||
if (open) {
|
||||
emit('click', open)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
95
components/QRCodeModal.vue
Normal file
95
components/QRCodeModal.vue
Normal file
@@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<UModal v-model="isOpen">
|
||||
<UCard class="max-w-md">
|
||||
<template #header>
|
||||
<h3 class="text-lg font-semibold">QR Code</h3>
|
||||
<p class="text-sm text-gray-600 mt-1">{{ title }}</p>
|
||||
</template>
|
||||
|
||||
<div class="text-center space-y-4">
|
||||
<div class="bg-white p-4 rounded-lg inline-block">
|
||||
<canvas ref="qrCanvas"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<p class="text-sm text-gray-600">
|
||||
<strong>URL:</strong>
|
||||
<span class="font-mono text-xs break-all">{{ fullUrl }}</span>
|
||||
</p>
|
||||
<UButton
|
||||
@click="downloadQR"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
icon="i-heroicons-arrow-down-tray"
|
||||
>
|
||||
Download QR Code
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import QRCode from 'qrcode'
|
||||
|
||||
interface Props {
|
||||
modelValue: boolean
|
||||
url: string
|
||||
title?: string
|
||||
}
|
||||
|
||||
interface Emits {
|
||||
(e: 'update:modelValue', value: boolean): void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const emit = defineEmits<Emits>()
|
||||
|
||||
const isOpen = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value)
|
||||
})
|
||||
|
||||
const qrCanvas = ref<HTMLCanvasElement>()
|
||||
const fullUrl = computed(() => {
|
||||
if (process.client) {
|
||||
return `${window.location.origin}${props.url}`
|
||||
}
|
||||
return props.url
|
||||
})
|
||||
|
||||
const generateQR = async () => {
|
||||
if (!qrCanvas.value) return
|
||||
|
||||
try {
|
||||
await QRCode.toCanvas(qrCanvas.value, fullUrl.value, {
|
||||
width: 200,
|
||||
margin: 2,
|
||||
color: {
|
||||
dark: '#1f2937',
|
||||
light: '#ffffff'
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Failed to generate QR code:', error)
|
||||
}
|
||||
}
|
||||
|
||||
const downloadQR = () => {
|
||||
if (!qrCanvas.value) return
|
||||
|
||||
const link = document.createElement('a')
|
||||
link.download = `sermon-qr-${props.title || 'code'}.png`
|
||||
link.href = qrCanvas.value.toDataURL()
|
||||
link.click()
|
||||
}
|
||||
|
||||
watch(isOpen, (open) => {
|
||||
if (open) {
|
||||
nextTick(() => {
|
||||
generateQR()
|
||||
})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
93
components/SermonCard.vue
Normal file
93
components/SermonCard.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<UCard class="h-full flex flex-col hover:shadow-lg transition-shadow duration-200">
|
||||
<template #header>
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-gray-900 line-clamp-2">
|
||||
{{ sermon.title }}
|
||||
</h3>
|
||||
<p class="text-sm text-gray-600 mt-1">
|
||||
{{ formatDate(sermon.date) }}
|
||||
</p>
|
||||
</div>
|
||||
<div class="ml-2">
|
||||
<QRCodeButton :url="sermonUrl" :title="sermon.title" @click="showQRModal = $event" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="flex-1">
|
||||
<div v-if="sermon.bibleReferences && sermon.bibleReferences.length > 0" class="mb-4">
|
||||
<h4 class="text-sm font-medium text-gray-700 mb-2">Bible References:</h4>
|
||||
<div class="space-y-1">
|
||||
<p
|
||||
v-for="reference in sermon.bibleReferences.slice(0, 3)"
|
||||
:key="reference"
|
||||
class="text-sm text-gray-600 bg-gray-50 px-2 py-1 rounded"
|
||||
>
|
||||
{{ reference }}
|
||||
</p>
|
||||
<p
|
||||
v-if="sermon.bibleReferences.length > 3"
|
||||
class="text-sm text-gray-500 italic"
|
||||
>
|
||||
+{{ sermon.bibleReferences.length - 3 }} more references
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="sermon.personalApplication" class="mb-4">
|
||||
<h4 class="text-sm font-medium text-gray-700 mb-2">Personal Application:</h4>
|
||||
<p class="text-sm text-gray-600 line-clamp-3">
|
||||
{{ sermon.personalApplication }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template #footer>
|
||||
<UButton
|
||||
@click="navigateTo(sermonUrl)"
|
||||
variant="outline"
|
||||
color="primary"
|
||||
class="w-full"
|
||||
:label="`View Sermon - ${sermon.slug.replace('sermon-', '').replace(/(\d{2})(\d{2})(\d{4})/, '$1/$2/$3')}`"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- QR Code Modal -->
|
||||
<QRCodeModal
|
||||
v-model="showQRModal"
|
||||
:url="sermonUrl"
|
||||
:title="sermon.title"
|
||||
/>
|
||||
</UCard>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { format, parseISO } from 'date-fns'
|
||||
|
||||
interface Sermon {
|
||||
id: number
|
||||
title: string
|
||||
date: string
|
||||
slug: string
|
||||
bibleReferences?: string[]
|
||||
personalApplication?: string
|
||||
pastorChallenge?: string
|
||||
}
|
||||
|
||||
const props = defineProps<{
|
||||
sermon: Sermon
|
||||
}>()
|
||||
|
||||
const showQRModal = ref(false)
|
||||
const sermonUrl = computed(() => `/${props.sermon.slug}`)
|
||||
|
||||
const formatDate = (dateString: string) => {
|
||||
try {
|
||||
return format(parseISO(dateString), 'MMMM d, yyyy')
|
||||
} catch {
|
||||
return dateString
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Reference in New Issue
Block a user