Remove RelayHubStatus, NostrFeed, and related composables for codebase cleanup
- Delete RelayHubStatus.vue and its associated components to streamline the application structure. - Remove NostrFeed.vue to eliminate unused functionality and improve maintainability. - Eliminate the legacy useRelayHub composable, reflecting a shift towards modular service architecture. - Clean up router configuration by removing references to deleted components, enhancing clarity and organization.
This commit is contained in:
parent
ee8dd37761
commit
18f48581cd
5 changed files with 0 additions and 1077 deletions
|
|
@ -1,332 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="relay-hub-status">
|
|
||||||
<div class="status-header">
|
|
||||||
<h3>Nostr Relay Hub Status</h3>
|
|
||||||
<div class="connection-indicator" :class="connectionStatus">
|
|
||||||
{{ connectionStatus }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="connection-info">
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="label">Status:</span>
|
|
||||||
<span class="value">{{ connectionStatus }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="label">Connected Relays:</span>
|
|
||||||
<span class="value">{{ connectedRelayCount }}/{{ totalRelayCount }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row">
|
|
||||||
<span class="label">Health:</span>
|
|
||||||
<span class="value">{{ connectionHealth.toFixed(1) }}%</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-row" v-if="error">
|
|
||||||
<span class="label">Error:</span>
|
|
||||||
<span class="value error">{{ error.message }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="relay-list" v-if="relayStatuses.length > 0">
|
|
||||||
<h4>Relay Status</h4>
|
|
||||||
<div class="relay-item" v-for="relay in relayStatuses" :key="relay.url">
|
|
||||||
<div class="relay-url">{{ relay.url }}</div>
|
|
||||||
<div class="relay-status" :class="{ connected: relay.connected }">
|
|
||||||
{{ relay.connected ? 'Connected' : 'Disconnected' }}
|
|
||||||
</div>
|
|
||||||
<div class="relay-latency" v-if="relay.latency !== undefined">
|
|
||||||
{{ relay.latency }}ms
|
|
||||||
</div>
|
|
||||||
<div class="relay-error" v-if="relay.error">
|
|
||||||
{{ relay.error }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="actions">
|
|
||||||
<button @click="connect" :disabled="connectionStatus === 'connecting'">
|
|
||||||
Connect
|
|
||||||
</button>
|
|
||||||
<button @click="disconnect" :disabled="!isConnected">
|
|
||||||
Disconnect
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="subscription-info">
|
|
||||||
<h4>Active Subscriptions</h4>
|
|
||||||
<div class="subscription-count">
|
|
||||||
<div>Local: {{ activeSubscriptions.size }}</div>
|
|
||||||
<div>Global: {{ totalSubscriptionCount }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { relayHubComposable } from '@/composables/useRelayHub'
|
|
||||||
|
|
||||||
const {
|
|
||||||
isConnected,
|
|
||||||
connectionStatus,
|
|
||||||
relayStatuses,
|
|
||||||
error,
|
|
||||||
activeSubscriptions,
|
|
||||||
connectedRelayCount,
|
|
||||||
totalRelayCount,
|
|
||||||
totalSubscriptionCount,
|
|
||||||
connectionHealth,
|
|
||||||
connect,
|
|
||||||
disconnect
|
|
||||||
} = relayHubComposable
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.relay-hub-status {
|
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
padding-bottom: 1rem;
|
|
||||||
border-bottom: 1px solid #e2e8f0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-header h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 1.125rem;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1e293b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .status-header h3 {
|
|
||||||
color: #f1f5f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .status-header {
|
|
||||||
border-bottom-color: #475569;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connection-indicator {
|
|
||||||
padding: 0.25rem 0.75rem;
|
|
||||||
border-radius: 9999px;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connection-indicator.connected {
|
|
||||||
background-color: #dcfce7;
|
|
||||||
color: #166534;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connection-indicator.connecting {
|
|
||||||
background-color: #fef3c7;
|
|
||||||
color: #92400e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connection-indicator.disconnected {
|
|
||||||
background-color: #fee2e2;
|
|
||||||
color: #991b1b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connection-indicator.error {
|
|
||||||
background-color: #fecaca;
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.connection-info {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.5rem 0;
|
|
||||||
border-bottom: 1px solid #f1f5f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .info-row {
|
|
||||||
border-bottom-color: #334155;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row:last-child {
|
|
||||||
border-bottom: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #64748b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .label {
|
|
||||||
color: #94a3b8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-weight: 600;
|
|
||||||
color: #1e293b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .value {
|
|
||||||
color: #f1f5f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value.error {
|
|
||||||
color: #dc2626;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .value.error {
|
|
||||||
color: #fca5a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relay-list {
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relay-list h4 {
|
|
||||||
margin: 0 0 0.75rem 0;
|
|
||||||
color: #1e293b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .relay-list h4 {
|
|
||||||
color: #f1f5f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relay-item {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto auto auto;
|
|
||||||
gap: 0.75rem;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0.75rem;
|
|
||||||
background-color: white;
|
|
||||||
border: 1px solid #e2e8f0;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .relay-item {
|
|
||||||
background-color: #1e293b;
|
|
||||||
border-color: #475569;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relay-url {
|
|
||||||
font-family: monospace;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
color: #475569;
|
|
||||||
word-break: break-all;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .relay-url {
|
|
||||||
color: #94a3b8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relay-status {
|
|
||||||
padding: 0.25rem 0.5rem;
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 500;
|
|
||||||
text-align: center;
|
|
||||||
background-color: #fee2e2;
|
|
||||||
color: #991b1b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relay-status.connected {
|
|
||||||
background-color: #dcfce7;
|
|
||||||
color: #166534;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relay-latency {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #64748b;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .relay-latency {
|
|
||||||
color: #94a3b8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.relay-error {
|
|
||||||
font-size: 0.75rem;
|
|
||||||
color: #dc2626;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .relay-error {
|
|
||||||
color: #fca5a5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions {
|
|
||||||
display: flex;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin-bottom: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions button {
|
|
||||||
padding: 0.5rem 1rem;
|
|
||||||
border: 1px solid #d1d5db;
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
background-color: white;
|
|
||||||
color: #374151;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .actions button {
|
|
||||||
background-color: #374151;
|
|
||||||
color: #f9fafb;
|
|
||||||
border-color: #6b7280;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions button:hover:not(:disabled) {
|
|
||||||
background-color: #f9fafb;
|
|
||||||
border-color: #9ca3af;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .actions button:hover:not(:disabled) {
|
|
||||||
background-color: #4b5563;
|
|
||||||
border-color: #9ca3af;
|
|
||||||
}
|
|
||||||
|
|
||||||
.actions button:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .actions button:disabled {
|
|
||||||
background-color: #6b7280;
|
|
||||||
color: #9ca3af;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subscription-info {
|
|
||||||
border-top: 1px solid #e2e8f0;
|
|
||||||
padding-top: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .subscription-info {
|
|
||||||
border-top-color: #475569;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subscription-info h4 {
|
|
||||||
margin: 0 0 0.5rem 0;
|
|
||||||
color: #1e293b;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .subscription-info h4 {
|
|
||||||
color: #f1f5f9;
|
|
||||||
}
|
|
||||||
|
|
||||||
.subscription-count {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #3b82f6;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark .subscription-count {
|
|
||||||
color: #60a5fa;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,336 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
||||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
|
||||||
import { Badge } from '@/components/ui/badge'
|
|
||||||
import { Button } from '@/components/ui/button'
|
|
||||||
import { formatDistanceToNow } from 'date-fns'
|
|
||||||
import { Megaphone, RefreshCw, AlertCircle } from 'lucide-vue-next'
|
|
||||||
import { config, configUtils } from '@/lib/config'
|
|
||||||
import { relayHubComposable } from '@/composables/useRelayHub'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
relays?: string[]
|
|
||||||
feedType?: 'all' | 'announcements' | 'events' | 'general'
|
|
||||||
}>()
|
|
||||||
|
|
||||||
const relayHub = relayHubComposable
|
|
||||||
|
|
||||||
// Reactive state
|
|
||||||
const notes = ref<any[]>([])
|
|
||||||
const isLoading = ref(false)
|
|
||||||
const error = ref<Error | null>(null)
|
|
||||||
const isConnected = ref(false)
|
|
||||||
|
|
||||||
// Get admin/moderator pubkeys from centralized config
|
|
||||||
const adminPubkeys = config.nostr.adminPubkeys
|
|
||||||
|
|
||||||
// Check if we have admin pubkeys configured
|
|
||||||
const hasAdminPubkeys = computed(() => adminPubkeys.length > 0)
|
|
||||||
|
|
||||||
// Get feed title and description based on type
|
|
||||||
const feedTitle = computed(() => {
|
|
||||||
switch (props.feedType) {
|
|
||||||
case 'announcements':
|
|
||||||
return 'Community Announcements'
|
|
||||||
case 'events':
|
|
||||||
return 'Events & Calendar'
|
|
||||||
case 'general':
|
|
||||||
return 'General Discussion'
|
|
||||||
default:
|
|
||||||
return 'Community Feed'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
const feedDescription = computed(() => {
|
|
||||||
switch (props.feedType) {
|
|
||||||
case 'announcements':
|
|
||||||
return 'Important announcements from community administrators'
|
|
||||||
case 'events':
|
|
||||||
return 'Upcoming events and calendar updates'
|
|
||||||
case 'general':
|
|
||||||
return 'Community discussions and general posts'
|
|
||||||
default:
|
|
||||||
return 'Latest posts from the community'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// Check if a post is from an admin
|
|
||||||
function isAdminPost(pubkey: string): boolean {
|
|
||||||
return configUtils.isAdminPubkey(pubkey)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Load notes from relays
|
|
||||||
async function loadNotes() {
|
|
||||||
if (!hasAdminPubkeys.value && props.feedType === 'announcements') {
|
|
||||||
notes.value = []
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
isLoading.value = true
|
|
||||||
error.value = null
|
|
||||||
|
|
||||||
// Connect to relay hub if not already connected
|
|
||||||
if (!relayHub.isConnected.value) {
|
|
||||||
await relayHub.connect()
|
|
||||||
}
|
|
||||||
|
|
||||||
isConnected.value = relayHub.isConnected.value
|
|
||||||
|
|
||||||
if (!isConnected.value) {
|
|
||||||
throw new Error('Failed to connect to Nostr relays')
|
|
||||||
}
|
|
||||||
|
|
||||||
// Configure filters based on feed type
|
|
||||||
const filters: any[] = [{
|
|
||||||
kinds: [1], // TEXT_NOTE
|
|
||||||
limit: 50
|
|
||||||
}]
|
|
||||||
|
|
||||||
// Filter by authors for announcements
|
|
||||||
if (props.feedType === 'announcements' && hasAdminPubkeys.value) {
|
|
||||||
filters[0].authors = adminPubkeys
|
|
||||||
}
|
|
||||||
|
|
||||||
// Query events from relays
|
|
||||||
const events = await relayHub.queryEvents(filters)
|
|
||||||
|
|
||||||
// Process and filter events
|
|
||||||
let processedNotes = events.map(event => ({
|
|
||||||
id: event.id,
|
|
||||||
pubkey: event.pubkey,
|
|
||||||
content: event.content,
|
|
||||||
created_at: event.created_at,
|
|
||||||
tags: event.tags || [],
|
|
||||||
// Extract mentions from tags
|
|
||||||
mentions: event.tags?.filter((tag: any[]) => tag[0] === 'p').map((tag: any[]) => tag[1]) || [],
|
|
||||||
// Check if it's a reply
|
|
||||||
isReply: event.tags?.some((tag: any[]) => tag[0] === 'e' && tag[3] === 'reply'),
|
|
||||||
replyTo: event.tags?.find((tag: any[]) => tag[0] === 'e' && tag[3] === 'reply')?.[1]
|
|
||||||
}))
|
|
||||||
|
|
||||||
// Sort by creation time (newest first)
|
|
||||||
processedNotes.sort((a, b) => b.created_at - a.created_at)
|
|
||||||
|
|
||||||
// For general feed, exclude admin posts
|
|
||||||
if (props.feedType === 'general' && hasAdminPubkeys.value) {
|
|
||||||
processedNotes = processedNotes.filter(note => !isAdminPost(note.pubkey))
|
|
||||||
}
|
|
||||||
|
|
||||||
notes.value = processedNotes
|
|
||||||
|
|
||||||
} catch (err) {
|
|
||||||
const errorObj = err instanceof Error ? err : new Error('Failed to load notes')
|
|
||||||
error.value = errorObj
|
|
||||||
console.error('Failed to load notes:', errorObj)
|
|
||||||
} finally {
|
|
||||||
isLoading.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Refresh the feed
|
|
||||||
async function refreshFeed() {
|
|
||||||
await loadNotes()
|
|
||||||
}
|
|
||||||
|
|
||||||
// Subscribe to real-time updates
|
|
||||||
let unsubscribe: (() => void) | null = null
|
|
||||||
|
|
||||||
async function startRealtimeSubscription() {
|
|
||||||
if (!relayHub.isConnected.value) return
|
|
||||||
|
|
||||||
try {
|
|
||||||
const filters: any[] = [{
|
|
||||||
kinds: [1], // TEXT_NOTE
|
|
||||||
limit: 10
|
|
||||||
}]
|
|
||||||
|
|
||||||
if (props.feedType === 'announcements' && hasAdminPubkeys.value) {
|
|
||||||
filters[0].authors = adminPubkeys
|
|
||||||
}
|
|
||||||
|
|
||||||
unsubscribe = relayHub.subscribe({
|
|
||||||
id: `feed-${props.feedType || 'all'}`,
|
|
||||||
filters,
|
|
||||||
onEvent: (event) => {
|
|
||||||
// Add new note to the beginning of the list
|
|
||||||
const newNote = {
|
|
||||||
id: event.id,
|
|
||||||
pubkey: event.pubkey,
|
|
||||||
content: event.content,
|
|
||||||
created_at: event.created_at,
|
|
||||||
tags: event.tags || [],
|
|
||||||
mentions: event.tags?.filter((tag: any[]) => tag[0] === 'p').map((tag: any[]) => tag[1]) || [],
|
|
||||||
isReply: event.tags?.some((tag: any[]) => tag[0] === 'e' && tag[3] === 'reply'),
|
|
||||||
replyTo: event.tags?.find((tag: any[]) => tag[0] === 'e' && tag[3] === 'reply')?.[1]
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if note should be included
|
|
||||||
let shouldInclude = true
|
|
||||||
if (props.feedType === 'announcements' && !isAdminPost(event.pubkey)) {
|
|
||||||
shouldInclude = false
|
|
||||||
}
|
|
||||||
if (props.feedType === 'general' && isAdminPost(event.pubkey)) {
|
|
||||||
shouldInclude = false
|
|
||||||
}
|
|
||||||
|
|
||||||
if (shouldInclude) {
|
|
||||||
notes.value.unshift(newNote)
|
|
||||||
// Limit array size
|
|
||||||
if (notes.value.length > 100) {
|
|
||||||
notes.value = notes.value.slice(0, 100)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Failed to start real-time subscription:', error)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Cleanup subscription
|
|
||||||
function cleanup() {
|
|
||||||
if (unsubscribe) {
|
|
||||||
unsubscribe()
|
|
||||||
unsubscribe = null
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(async () => {
|
|
||||||
await loadNotes()
|
|
||||||
await startRealtimeSubscription()
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
cleanup()
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Card class="w-full">
|
|
||||||
<CardHeader>
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<Megaphone class="h-5 w-5 text-primary" />
|
|
||||||
<div>
|
|
||||||
<CardTitle>{{ feedTitle }}</CardTitle>
|
|
||||||
<CardDescription>{{ feedDescription }}</CardDescription>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
@click="refreshFeed"
|
|
||||||
:disabled="isLoading"
|
|
||||||
class="gap-2"
|
|
||||||
>
|
|
||||||
<RefreshCw :class="{ 'animate-spin': isLoading }" class="h-4 w-4" />
|
|
||||||
Refresh
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardHeader>
|
|
||||||
|
|
||||||
<CardContent>
|
|
||||||
<!-- Connection Status -->
|
|
||||||
<div v-if="!isConnected && !isLoading" class="mb-4 p-3 bg-yellow-50 dark:bg-yellow-950 border border-yellow-200 dark:border-yellow-800 rounded-lg">
|
|
||||||
<div class="flex items-center gap-2 text-yellow-800 dark:text-yellow-200">
|
|
||||||
<AlertCircle class="h-4 w-4" />
|
|
||||||
<span class="text-sm">Not connected to relays</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Loading State -->
|
|
||||||
<div v-if="isLoading" class="flex items-center justify-center py-8">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<RefreshCw class="h-4 w-4 animate-spin" />
|
|
||||||
<span class="text-muted-foreground">Loading announcements...</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Error State -->
|
|
||||||
<div v-else-if="error" class="text-center py-8">
|
|
||||||
<div class="flex items-center justify-center gap-2 text-destructive mb-4">
|
|
||||||
<AlertCircle class="h-5 w-5" />
|
|
||||||
<span>Failed to load announcements</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-muted-foreground mb-4">{{ error.message }}</p>
|
|
||||||
<Button @click="refreshFeed" variant="outline">Try Again</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- No Admin Pubkeys Warning -->
|
|
||||||
<div v-else-if="!hasAdminPubkeys && props.feedType === 'announcements'" class="text-center py-8">
|
|
||||||
<div class="flex items-center justify-center gap-2 text-muted-foreground mb-4">
|
|
||||||
<Megaphone class="h-5 w-5" />
|
|
||||||
<span>No admin pubkeys configured</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Community announcements will appear here once admin pubkeys are configured.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- No Notes -->
|
|
||||||
<div v-else-if="notes.length === 0" class="text-center py-8">
|
|
||||||
<div class="flex items-center justify-center gap-2 text-muted-foreground mb-4">
|
|
||||||
<Megaphone class="h-5 w-5" />
|
|
||||||
<span>No announcements yet</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-muted-foreground">
|
|
||||||
Check back later for community updates and announcements.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Notes List -->
|
|
||||||
<ScrollArea v-else class="h-[400px] pr-4">
|
|
||||||
<div class="space-y-4">
|
|
||||||
<div
|
|
||||||
v-for="note in notes"
|
|
||||||
:key="note.id"
|
|
||||||
class="p-4 border rounded-lg hover:bg-accent/50 transition-colors"
|
|
||||||
>
|
|
||||||
<!-- Note Header -->
|
|
||||||
<div class="flex items-start justify-between mb-2">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<Badge
|
|
||||||
v-if="isAdminPost(note.pubkey)"
|
|
||||||
variant="default"
|
|
||||||
class="text-xs"
|
|
||||||
>
|
|
||||||
Admin
|
|
||||||
</Badge>
|
|
||||||
<Badge
|
|
||||||
v-if="note.isReply"
|
|
||||||
variant="secondary"
|
|
||||||
class="text-xs"
|
|
||||||
>
|
|
||||||
Reply
|
|
||||||
</Badge>
|
|
||||||
<span class="text-xs text-muted-foreground">
|
|
||||||
{{ formatDistanceToNow(note.created_at * 1000, { addSuffix: true }) }}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Note Content -->
|
|
||||||
<div class="text-sm leading-relaxed whitespace-pre-wrap">
|
|
||||||
{{ note.content }}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Note Footer -->
|
|
||||||
<div v-if="note.mentions.length > 0" class="mt-2 pt-2 border-t">
|
|
||||||
<div class="flex items-center gap-1 text-xs text-muted-foreground">
|
|
||||||
<span>Mentions:</span>
|
|
||||||
<span v-for="mention in note.mentions.slice(0, 3)" :key="mention" class="font-mono">
|
|
||||||
{{ mention.slice(0, 8) }}...
|
|
||||||
</span>
|
|
||||||
<span v-if="note.mentions.length > 3" class="text-muted-foreground">
|
|
||||||
+{{ note.mentions.length - 3 }} more
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</ScrollArea>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
// Legacy composable stub - replaced by modular base module services
|
|
||||||
export function useRelayHub() {
|
|
||||||
return {
|
|
||||||
connectedRelays: [],
|
|
||||||
status: 'disconnected'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,331 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 py-8">
|
|
||||||
<div class="max-w-6xl mx-auto px-4">
|
|
||||||
<div class="mb-8">
|
|
||||||
<h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">Relay Hub Status</h1>
|
|
||||||
<p class="text-gray-600 dark:text-gray-300">
|
|
||||||
Monitor and test the centralized Nostr relay hub functionality
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Relay Hub Status -->
|
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
|
||||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Relay Hub Status</h2>
|
|
||||||
<RelayHubStatus />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Subscription Details -->
|
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
|
||||||
<div class="flex items-center justify-between mb-4">
|
|
||||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white">Subscription Details</h2>
|
|
||||||
<button
|
|
||||||
@click="toggleSubscriptionDetails"
|
|
||||||
class="flex items-center gap-2 px-3 py-2 text-sm bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors"
|
|
||||||
>
|
|
||||||
<span>{{ showSubscriptionDetails ? 'Hide' : 'Show' }} Details</span>
|
|
||||||
<svg
|
|
||||||
class="w-4 h-4 transition-transform duration-200"
|
|
||||||
:class="{ 'rotate-180': showSubscriptionDetails }"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="showSubscriptionDetails">
|
|
||||||
<div v-if="subscriptionDetails.length > 0" class="space-y-4">
|
|
||||||
<div
|
|
||||||
v-for="sub in subscriptionDetails"
|
|
||||||
:key="sub.id"
|
|
||||||
class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700"
|
|
||||||
>
|
|
||||||
<div class="font-mono text-sm font-semibold text-blue-600 dark:text-blue-400 mb-2">
|
|
||||||
{{ sub.id }}
|
|
||||||
</div>
|
|
||||||
<div class="text-sm text-gray-600 dark:text-gray-300">
|
|
||||||
<div><strong>Filters:</strong> {{ sub.filters.length }} filter(s)</div>
|
|
||||||
<div v-if="sub.relays && sub.relays.length > 0">
|
|
||||||
<strong>Relays:</strong> {{ sub.relays.join(', ') }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div v-else class="text-gray-500 dark:text-gray-400 text-center py-4">
|
|
||||||
No active subscriptions
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-else class="text-center py-8">
|
|
||||||
<div class="text-gray-400 dark:text-gray-500 text-sm">
|
|
||||||
Click "Show Details" to view subscription information
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Connection Test -->
|
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
|
||||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Connection Test</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<button
|
|
||||||
@click="testConnection"
|
|
||||||
:disabled="isTesting || isConnected"
|
|
||||||
class="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors"
|
|
||||||
>
|
|
||||||
{{ isTesting ? 'Testing...' : 'Test Connection' }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div v-if="testResult" class="p-4 rounded-lg" :class="{
|
|
||||||
'bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 text-green-800 dark:text-green-200': testResult.success,
|
|
||||||
'bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 text-red-800 dark:text-red-200': !testResult.success
|
|
||||||
}">
|
|
||||||
<p class="font-medium">{{ testResult.message }}</p>
|
|
||||||
<div v-if="testResult.success" class="mt-2 text-sm">
|
|
||||||
<p>Connected Relays: {{ testResult.connectedCount }}</p>
|
|
||||||
<p>Connection Health: {{ testResult.health?.toFixed(1) }}%</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Subscription Test -->
|
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
|
||||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Subscription Test</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<button
|
|
||||||
@click="testSubscription"
|
|
||||||
:disabled="isSubscribing"
|
|
||||||
class="px-4 py-2 bg-blue-600 dark:bg-blue-500 text-white rounded-lg hover:bg-blue-700 dark:hover:bg-blue-600 disabled:bg-gray-400 dark:disabled:bg-gray-600 disabled:cursor-not-allowed transition-colors"
|
|
||||||
>
|
|
||||||
{{ isSubscribing ? 'Subscribing...' : 'Test Subscription' }}
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
v-if="activeTestSubscription"
|
|
||||||
@click="unsubscribeTest"
|
|
||||||
class="px-4 py-2 bg-red-600 dark:bg-red-500 text-white rounded-lg hover:bg-red-700 dark:hover:bg-red-600 transition-colors"
|
|
||||||
>
|
|
||||||
Unsubscribe
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div v-if="subscriptionEvents.length > 0" class="text-sm">
|
|
||||||
<p class="font-medium text-gray-900 dark:text-white mb-2">Received Events ({{ subscriptionEvents.length }}):</p>
|
|
||||||
<div class="space-y-2 max-h-40 overflow-y-auto">
|
|
||||||
<div
|
|
||||||
v-for="event in subscriptionEvents.slice(-5)"
|
|
||||||
:key="event.id"
|
|
||||||
class="p-2 bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded text-xs font-mono text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{{ event.id }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Mobile Visibility Test -->
|
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-6">
|
|
||||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Mobile Visibility Test</h2>
|
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700">
|
|
||||||
<div class="flex items-center space-x-2 mb-2">
|
|
||||||
<div class="w-3 h-3 rounded-full" :class="pageVisible ? 'bg-green-500' : 'bg-red-500'"></div>
|
|
||||||
<span class="font-medium text-gray-900 dark:text-white">Page Visibility</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
||||||
{{ pageVisible ? 'Page is visible' : 'Page is hidden (backgrounded)' }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="p-4 border border-gray-200 dark:border-gray-600 rounded-lg bg-gray-50 dark:bg-gray-700">
|
|
||||||
<div class="flex items-center space-x-2 mb-2">
|
|
||||||
<div class="w-3 h-3 rounded-full" :class="networkOnline ? 'bg-green-500' : 'bg-red-500'"></div>
|
|
||||||
<span class="font-medium text-gray-900 dark:text-white">Network Status</span>
|
|
||||||
</div>
|
|
||||||
<p class="text-sm text-gray-600 dark:text-gray-300">
|
|
||||||
{{ networkOnline ? 'Network is online' : 'Network is offline' }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Configuration Info -->
|
|
||||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
|
||||||
<h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">Configuration</h2>
|
|
||||||
<div class="space-y-2 text-sm">
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<span class="font-medium text-gray-700 dark:text-gray-300">Configured Relays:</span>
|
|
||||||
<span class="text-gray-900 dark:text-white">{{ config.nostr.relays.length }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<span class="font-medium text-gray-700 dark:text-gray-300">Market Relays:</span>
|
|
||||||
<span class="text-gray-900 dark:text-white">{{ config.market.supportedRelays.length }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4">
|
|
||||||
<p class="font-medium text-gray-700 dark:text-gray-300 mb-2">Relay URLs:</p>
|
|
||||||
<div class="space-y-1">
|
|
||||||
<div
|
|
||||||
v-for="relay in config.nostr.relays"
|
|
||||||
:key="relay"
|
|
||||||
class="font-mono text-xs bg-gray-50 dark:bg-gray-700 p-2 rounded border border-gray-200 dark:border-gray-600 text-gray-700 dark:text-gray-300"
|
|
||||||
>
|
|
||||||
{{ relay }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref, onMounted, onUnmounted } from 'vue'
|
|
||||||
import RelayHubStatus from '@/components/RelayHubStatus.vue'
|
|
||||||
import { config } from '@/lib/config'
|
|
||||||
import { relayHubComposable } from '@/composables/useRelayHub'
|
|
||||||
|
|
||||||
const {
|
|
||||||
isConnected,
|
|
||||||
connectionStatus,
|
|
||||||
connectionHealth,
|
|
||||||
connectedRelayCount,
|
|
||||||
subscriptionDetails,
|
|
||||||
initialize,
|
|
||||||
connect,
|
|
||||||
subscribe
|
|
||||||
} = relayHubComposable
|
|
||||||
|
|
||||||
// Test state
|
|
||||||
const isTesting = ref(false)
|
|
||||||
const testResult = ref<{
|
|
||||||
success: boolean
|
|
||||||
message: string
|
|
||||||
connectedCount?: number
|
|
||||||
health?: number
|
|
||||||
} | null>(null)
|
|
||||||
|
|
||||||
const isSubscribing = ref(false)
|
|
||||||
const activeTestSubscription = ref<(() => void) | null>(null)
|
|
||||||
const subscriptionEvents = ref<any[]>([])
|
|
||||||
|
|
||||||
// Mobile visibility state
|
|
||||||
const pageVisible = ref(!document.hidden)
|
|
||||||
const networkOnline = ref(navigator.onLine)
|
|
||||||
|
|
||||||
// Subscription details visibility state
|
|
||||||
const showSubscriptionDetails = ref(false)
|
|
||||||
|
|
||||||
const toggleSubscriptionDetails = () => {
|
|
||||||
showSubscriptionDetails.value = !showSubscriptionDetails.value
|
|
||||||
}
|
|
||||||
|
|
||||||
// Test connection
|
|
||||||
const testConnection = async () => {
|
|
||||||
try {
|
|
||||||
isTesting.value = true
|
|
||||||
testResult.value = null
|
|
||||||
|
|
||||||
if (!isConnected.value) {
|
|
||||||
await connect()
|
|
||||||
}
|
|
||||||
|
|
||||||
testResult.value = {
|
|
||||||
success: true,
|
|
||||||
message: 'Connection test successful!',
|
|
||||||
connectedCount: connectedRelayCount.value,
|
|
||||||
health: connectionHealth.value
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
testResult.value = {
|
|
||||||
success: false,
|
|
||||||
message: `Connection test failed: ${error instanceof Error ? error.message : 'Unknown error'}`
|
|
||||||
}
|
|
||||||
} finally {
|
|
||||||
isTesting.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Test subscription
|
|
||||||
const testSubscription = async () => {
|
|
||||||
try {
|
|
||||||
isSubscribing.value = true
|
|
||||||
subscriptionEvents.value = []
|
|
||||||
|
|
||||||
// Subscribe to some test events (kind 1 text notes)
|
|
||||||
const unsubscribe = subscribe({
|
|
||||||
id: 'test-subscription',
|
|
||||||
filters: [{ kinds: [1], limit: 10 }],
|
|
||||||
onEvent: (event: any) => {
|
|
||||||
subscriptionEvents.value.push(event)
|
|
||||||
console.log('Received test event:', event)
|
|
||||||
},
|
|
||||||
onEose: () => {
|
|
||||||
console.log('Test subscription EOSE')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
activeTestSubscription.value = unsubscribe
|
|
||||||
|
|
||||||
} catch (error) {
|
|
||||||
console.error('Subscription test failed:', error)
|
|
||||||
} finally {
|
|
||||||
isSubscribing.value = false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Unsubscribe from test
|
|
||||||
const unsubscribeTest = () => {
|
|
||||||
if (activeTestSubscription.value) {
|
|
||||||
activeTestSubscription.value()
|
|
||||||
activeTestSubscription.value = null
|
|
||||||
subscriptionEvents.value = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Setup mobile visibility handlers
|
|
||||||
const handleVisibilityChange = () => {
|
|
||||||
pageVisible.value = !document.hidden
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleOnline = () => {
|
|
||||||
networkOnline.value = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleOffline = () => {
|
|
||||||
networkOnline.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// Initialize relay hub if not already done
|
|
||||||
if (!isConnected.value && connectionStatus.value === 'disconnected') {
|
|
||||||
initialize().catch(console.error)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Setup visibility and network listeners
|
|
||||||
document.addEventListener('visibilitychange', handleVisibilityChange)
|
|
||||||
window.addEventListener('online', handleOnline)
|
|
||||||
window.addEventListener('offline', handleOffline)
|
|
||||||
})
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
// Cleanup listeners
|
|
||||||
document.removeEventListener('visibilitychange', handleVisibilityChange)
|
|
||||||
window.removeEventListener('online', handleOnline)
|
|
||||||
window.removeEventListener('offline', handleOffline)
|
|
||||||
|
|
||||||
// Cleanup test subscription
|
|
||||||
if (activeTestSubscription.value) {
|
|
||||||
activeTestSubscription.value()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.container {
|
|
||||||
min-height: 100vh;
|
|
||||||
background-color: #f8fafc;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,71 +0,0 @@
|
||||||
import { createRouter, createWebHistory } from 'vue-router'
|
|
||||||
import { auth } from '@/composables/useAuth'
|
|
||||||
import Home from '@/pages/Home.vue'
|
|
||||||
import LoginDemo from '@/pages/LoginDemo.vue'
|
|
||||||
|
|
||||||
const router = createRouter({
|
|
||||||
history: createWebHistory(),
|
|
||||||
routes: [
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
name: 'home',
|
|
||||||
component: Home,
|
|
||||||
meta: {
|
|
||||||
requiresAuth: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/login',
|
|
||||||
name: 'login',
|
|
||||||
component: LoginDemo,
|
|
||||||
meta: {
|
|
||||||
requiresAuth: false
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/cart',
|
|
||||||
name: 'cart',
|
|
||||||
component: () => import('@/pages/Cart.vue'),
|
|
||||||
meta: {
|
|
||||||
title: 'Shopping Cart',
|
|
||||||
requiresAuth: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/order-history',
|
|
||||||
name: 'OrderHistory',
|
|
||||||
component: () => import('@/pages/OrderHistory.vue'),
|
|
||||||
meta: { requiresAuth: true }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/relay-hub-status',
|
|
||||||
name: 'relay-hub-status',
|
|
||||||
component: () => import('@/pages/RelayHubStatus.vue'),
|
|
||||||
meta: {
|
|
||||||
title: 'Relay Hub Status',
|
|
||||||
requiresAuth: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
]
|
|
||||||
})
|
|
||||||
|
|
||||||
// Navigation guard to check authentication
|
|
||||||
router.beforeEach(async (to, _from, next) => {
|
|
||||||
// Initialize auth if not already done
|
|
||||||
if (!auth.isAuthenticated.value && auth.checkAuth()) {
|
|
||||||
await auth.initialize()
|
|
||||||
}
|
|
||||||
|
|
||||||
if (to.meta.requiresAuth && !auth.isAuthenticated.value) {
|
|
||||||
// Redirect to login if authentication is required but user is not authenticated
|
|
||||||
next('/login')
|
|
||||||
} else if (to.path === '/login' && auth.isAuthenticated.value) {
|
|
||||||
// Redirect to home if user is already authenticated and trying to access login
|
|
||||||
next('/')
|
|
||||||
} else {
|
|
||||||
next()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default router
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue