88 lines
2.5 KiB
Vue
88 lines
2.5 KiB
Vue
<template>
|
|
<v-dialog v-model="modelValue" max-width="520" persistent>
|
|
<v-card>
|
|
<v-card-title>
|
|
{{ action === 'restore' ? 'Restore' : 'Delete' }}
|
|
{{ kind === 'db' ? 'database' : 'images' }} backup #{{ runId }}
|
|
</v-card-title>
|
|
<v-card-text>
|
|
<v-alert
|
|
:type="action === 'restore' ? 'warning' : 'error'"
|
|
variant="tonal" density="compact" class="mb-3"
|
|
>
|
|
<strong>{{ warningText }}</strong>
|
|
<div class="mt-1">{{ description }}</div>
|
|
</v-alert>
|
|
|
|
<div class="text-body-2 mb-2">
|
|
Type the following to confirm:
|
|
</div>
|
|
<div class="fc-token mb-3">{{ expectedToken }}</div>
|
|
|
|
<v-text-field
|
|
v-model="typed"
|
|
variant="outlined" density="compact" hide-details
|
|
autofocus
|
|
placeholder="paste the token above"
|
|
/>
|
|
</v-card-text>
|
|
<v-card-actions>
|
|
<v-spacer />
|
|
<v-btn variant="text" @click="onCancel">Cancel</v-btn>
|
|
<v-btn
|
|
:color="action === 'restore' ? 'warning' : 'error'"
|
|
variant="flat" rounded="pill"
|
|
:disabled="typed !== expectedToken"
|
|
@click="onConfirm"
|
|
>
|
|
{{ action === 'restore' ? 'Restore' : 'Delete' }}
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
const props = defineProps({
|
|
modelValue: { type: Boolean, required: true },
|
|
action: { type: String, required: true }, // 'restore' | 'delete'
|
|
kind: { type: String, required: true }, // 'db' | 'images'
|
|
runId: { type: Number, required: true },
|
|
description: { type: String, default: '' },
|
|
})
|
|
const emit = defineEmits(['update:modelValue', 'confirm'])
|
|
|
|
const typed = ref('')
|
|
const expectedToken = computed(
|
|
() => `${props.action}-${props.kind}-${props.runId}`,
|
|
)
|
|
const warningText = computed(() => (
|
|
props.action === 'restore'
|
|
? 'This replaces current state with the backup. There is no undo.'
|
|
: 'This deletes the backup record + on-disk files. Cannot be recovered.'
|
|
))
|
|
|
|
watch(() => props.modelValue, (open) => {
|
|
if (open) typed.value = ''
|
|
})
|
|
|
|
function onCancel() {
|
|
emit('update:modelValue', false)
|
|
}
|
|
function onConfirm() {
|
|
emit('confirm', expectedToken.value)
|
|
emit('update:modelValue', false)
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.fc-token {
|
|
font-family: 'JetBrains Mono', monospace;
|
|
background: rgb(var(--v-theme-surface-light));
|
|
padding: 6px 10px; border-radius: 4px;
|
|
font-size: 14px; word-break: break-all;
|
|
}
|
|
</style>
|