refactor: Remove ConnectionStatus and PasswordDialog components to streamline codebase
- Delete ConnectionStatus.vue and PasswordDialog.vue components to reduce complexity and improve maintainability. - Ensure the application remains functional while enhancing overall clarity for future development.
This commit is contained in:
parent
b074cc4ca3
commit
91d742eb7b
2 changed files with 0 additions and 164 deletions
|
|
@ -1,59 +0,0 @@
|
||||||
<!-- A component that shows NOSTR connection status -->
|
|
||||||
<script setup lang="ts">
|
|
||||||
import { Badge } from '@/components/ui/badge'
|
|
||||||
|
|
||||||
const props = defineProps<{
|
|
||||||
isConnected: boolean
|
|
||||||
isConnecting: boolean
|
|
||||||
error?: Error | null
|
|
||||||
}>()
|
|
||||||
|
|
||||||
function getStatusVariant(): 'default' | 'destructive' | 'outline' | 'secondary' {
|
|
||||||
if (!props.isConnected) return 'destructive'
|
|
||||||
if (props.isConnecting) return 'secondary'
|
|
||||||
return 'outline'
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStatusText() {
|
|
||||||
if (props.isConnecting) return 'Connecting'
|
|
||||||
return props.isConnected ? 'Online' : 'Offline'
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStatusColor() {
|
|
||||||
if (props.isConnecting) return 'bg-yellow-400'
|
|
||||||
return props.isConnected ? 'bg-green-400' : 'bg-red-400'
|
|
||||||
}
|
|
||||||
|
|
||||||
function getStatusColorSolid() {
|
|
||||||
if (props.isConnecting) return 'bg-yellow-500'
|
|
||||||
return props.isConnected ? 'bg-green-500' : 'bg-red-500'
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<Badge
|
|
||||||
:variant="getStatusVariant()"
|
|
||||||
class="flex items-center gap-1 border-0 bg-transparent sm:border sm:bg-[inherit]"
|
|
||||||
>
|
|
||||||
<span class="relative flex h-2 w-2">
|
|
||||||
<span
|
|
||||||
class="absolute inline-flex h-full w-full rounded-full opacity-75"
|
|
||||||
:class="[
|
|
||||||
getStatusColor(),
|
|
||||||
{ 'animate-ping': !props.isConnecting },
|
|
||||||
{ 'animate-pulse': props.isConnecting }
|
|
||||||
]"
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
class="relative inline-flex h-2 w-2 rounded-full"
|
|
||||||
:class="getStatusColorSolid()"
|
|
||||||
/>
|
|
||||||
</span>
|
|
||||||
<span class="hidden text-[10px] sm:inline">{{ getStatusText() }}</span>
|
|
||||||
</Badge>
|
|
||||||
<p v-if="error" class="hidden text-xs text-destructive sm:block">
|
|
||||||
{{ error.message }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
@ -1,105 +0,0 @@
|
||||||
<script setup lang="ts">
|
|
||||||
import { ref } from 'vue'
|
|
||||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
|
||||||
import { Button } from '@/components/ui/button'
|
|
||||||
import { Input } from '@/components/ui/input'
|
|
||||||
import { Label } from '@/components/ui/label'
|
|
||||||
import { Lock } from 'lucide-vue-next'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
isOpen: boolean
|
|
||||||
title?: string
|
|
||||||
description?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
interface Emits {
|
|
||||||
(e: 'update:isOpen', value: boolean): void
|
|
||||||
(e: 'password', password: string): void
|
|
||||||
(e: 'cancel'): void
|
|
||||||
}
|
|
||||||
|
|
||||||
withDefaults(defineProps<Props>(), {
|
|
||||||
title: 'Enter Password',
|
|
||||||
description: 'Your identity is encrypted. Please enter your password to continue.'
|
|
||||||
})
|
|
||||||
|
|
||||||
const emit = defineEmits<Emits>()
|
|
||||||
|
|
||||||
const password = ref('')
|
|
||||||
const isLoading = ref(false)
|
|
||||||
const error = ref('')
|
|
||||||
|
|
||||||
function handleSubmit() {
|
|
||||||
if (!password.value.trim()) {
|
|
||||||
error.value = 'Password is required'
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
error.value = ''
|
|
||||||
emit('password', password.value)
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleCancel() {
|
|
||||||
emit('cancel')
|
|
||||||
handleClose()
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClose() {
|
|
||||||
emit('update:isOpen', false)
|
|
||||||
// Reset form
|
|
||||||
password.value = ''
|
|
||||||
error.value = ''
|
|
||||||
isLoading.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleKeydown(event: KeyboardEvent) {
|
|
||||||
if (event.key === 'Enter') {
|
|
||||||
handleSubmit()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<Dialog :open="isOpen" @update:open="handleClose">
|
|
||||||
<DialogContent class="sm:max-w-[425px]">
|
|
||||||
<DialogHeader>
|
|
||||||
<DialogTitle class="flex items-center gap-2">
|
|
||||||
<Lock class="w-5 h-5" />
|
|
||||||
{{ title }}
|
|
||||||
</DialogTitle>
|
|
||||||
<DialogDescription>
|
|
||||||
{{ description }}
|
|
||||||
</DialogDescription>
|
|
||||||
</DialogHeader>
|
|
||||||
|
|
||||||
<div class="grid gap-4 py-4">
|
|
||||||
<div class="space-y-2">
|
|
||||||
<Label for="password">Password</Label>
|
|
||||||
<Input
|
|
||||||
id="password"
|
|
||||||
type="password"
|
|
||||||
v-model="password"
|
|
||||||
placeholder="Enter your password"
|
|
||||||
:disabled="isLoading"
|
|
||||||
@keydown="handleKeydown"
|
|
||||||
class="w-full"
|
|
||||||
autofocus
|
|
||||||
/>
|
|
||||||
<p v-if="error" class="text-sm text-destructive">
|
|
||||||
{{ error }}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<DialogFooter>
|
|
||||||
<Button variant="outline" @click="handleCancel" :disabled="isLoading">
|
|
||||||
Cancel
|
|
||||||
</Button>
|
|
||||||
<Button @click="handleSubmit" :disabled="isLoading || !password.trim()">
|
|
||||||
<span v-if="isLoading" class="animate-spin mr-2">⚡</span>
|
|
||||||
Unlock
|
|
||||||
</Button>
|
|
||||||
</DialogFooter>
|
|
||||||
</DialogContent>
|
|
||||||
</Dialog>
|
|
||||||
</template>
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue