818 lines
26 KiB
Vue
818 lines
26 KiB
Vue
<template>
|
|
<v-container fluid>
|
|
<!-- Header -->
|
|
<v-row class="mb-6">
|
|
<v-col>
|
|
<h1 class="text-h3 font-weight-bold mb-2">System Settings</h1>
|
|
<p class="text-body-1 text-medium-emphasis">Configure system preferences and options</p>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Settings Tabs -->
|
|
<v-card elevation="2">
|
|
<v-tabs v-model="activeTab" color="primary">
|
|
<v-tab value="general">
|
|
<v-icon start>mdi-cog</v-icon>
|
|
General
|
|
</v-tab>
|
|
<v-tab value="email">
|
|
<v-icon start>mdi-email</v-icon>
|
|
Email
|
|
</v-tab>
|
|
<v-tab value="nocodb">
|
|
<v-icon start>mdi-database</v-icon>
|
|
NocoDB
|
|
</v-tab>
|
|
</v-tabs>
|
|
|
|
<v-window v-model="activeTab">
|
|
<!-- General Settings -->
|
|
<v-window-item value="general">
|
|
<v-card-text>
|
|
<!-- Edit Mode Toggle -->
|
|
<v-row class="mb-4">
|
|
<v-col>
|
|
<v-alert
|
|
v-if="!generalEditMode"
|
|
type="info"
|
|
variant="tonal"
|
|
density="compact"
|
|
>
|
|
<template v-slot:text>
|
|
Click "Edit Settings" to modify these values
|
|
</template>
|
|
</v-alert>
|
|
</v-col>
|
|
<v-col cols="auto">
|
|
<v-btn
|
|
v-if="!generalEditMode"
|
|
color="primary"
|
|
variant="outlined"
|
|
@click="generalEditMode = true"
|
|
>
|
|
<v-icon start>mdi-pencil</v-icon>
|
|
Edit Settings
|
|
</v-btn>
|
|
<v-btn-group v-else>
|
|
<v-btn
|
|
color="success"
|
|
variant="flat"
|
|
@click="saveGeneralSettings"
|
|
>
|
|
<v-icon start>mdi-check</v-icon>
|
|
Save
|
|
</v-btn>
|
|
<v-btn
|
|
color="error"
|
|
variant="outlined"
|
|
@click="cancelGeneralEdit"
|
|
>
|
|
<v-icon start>mdi-close</v-icon>
|
|
Cancel
|
|
</v-btn>
|
|
</v-btn-group>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<h3 class="text-h6 mb-4">Organization Information</h3>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="settings.general.orgName"
|
|
label="Organization Name"
|
|
variant="outlined"
|
|
:readonly="!generalEditMode"
|
|
:disabled="!generalEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !generalEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="settings.general.orgEmail"
|
|
label="Contact Email"
|
|
variant="outlined"
|
|
type="email"
|
|
:readonly="!generalEditMode"
|
|
:disabled="!generalEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !generalEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-textarea
|
|
v-model="settings.general.orgDescription"
|
|
label="Description"
|
|
variant="outlined"
|
|
rows="3"
|
|
:readonly="!generalEditMode"
|
|
:disabled="!generalEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !generalEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-divider class="my-4" />
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<h3 class="text-h6 mb-4">Regional Settings</h3>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-select
|
|
v-model="settings.general.timezone"
|
|
label="Timezone"
|
|
:items="timezones"
|
|
variant="outlined"
|
|
:readonly="!generalEditMode"
|
|
:disabled="!generalEditMode"
|
|
:class="{ 'readonly-field': !generalEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-select
|
|
v-model="settings.general.dateFormat"
|
|
label="Date Format"
|
|
:items="dateFormats"
|
|
variant="outlined"
|
|
:readonly="!generalEditMode"
|
|
:disabled="!generalEditMode"
|
|
:class="{ 'readonly-field': !generalEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-select
|
|
v-model="settings.general.currency"
|
|
label="Currency"
|
|
:items="currencies"
|
|
variant="outlined"
|
|
:readonly="!generalEditMode"
|
|
:disabled="!generalEditMode"
|
|
:class="{ 'readonly-field': !generalEditMode }"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-window-item>
|
|
|
|
<!-- Email Settings -->
|
|
<v-window-item value="email">
|
|
<v-card-text>
|
|
<!-- Edit Mode Toggle -->
|
|
<v-row class="mb-4">
|
|
<v-col>
|
|
<v-alert
|
|
v-if="!emailEditMode"
|
|
type="info"
|
|
variant="tonal"
|
|
density="compact"
|
|
>
|
|
<template v-slot:text>
|
|
Click "Edit Email Configuration" to modify SMTP settings
|
|
</template>
|
|
</v-alert>
|
|
<v-alert
|
|
v-if="emailEditMode"
|
|
type="warning"
|
|
variant="tonal"
|
|
density="compact"
|
|
>
|
|
<template v-slot:text>
|
|
Be careful when editing email settings. Incorrect values may prevent emails from being sent.
|
|
</template>
|
|
</v-alert>
|
|
</v-col>
|
|
<v-col cols="auto">
|
|
<v-btn
|
|
v-if="!emailEditMode"
|
|
color="primary"
|
|
variant="outlined"
|
|
@click="emailEditMode = true"
|
|
>
|
|
<v-icon start>mdi-pencil</v-icon>
|
|
Edit Email Configuration
|
|
</v-btn>
|
|
<v-btn-group v-else>
|
|
<v-btn
|
|
color="success"
|
|
variant="flat"
|
|
@click="saveEmailSettings"
|
|
>
|
|
<v-icon start>mdi-check</v-icon>
|
|
Save
|
|
</v-btn>
|
|
<v-btn
|
|
color="warning"
|
|
variant="outlined"
|
|
@click="testEmailSettings"
|
|
:loading="testingEmail"
|
|
>
|
|
<v-icon start>mdi-email-check</v-icon>
|
|
Test
|
|
</v-btn>
|
|
<v-btn
|
|
color="error"
|
|
variant="outlined"
|
|
@click="cancelEmailEdit"
|
|
>
|
|
<v-icon start>mdi-close</v-icon>
|
|
Cancel
|
|
</v-btn>
|
|
</v-btn-group>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<h3 class="text-h6 mb-4">SMTP Configuration</h3>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="settings.email.smtpHost"
|
|
label="SMTP Host"
|
|
variant="outlined"
|
|
:readonly="!emailEditMode"
|
|
:disabled="!emailEditMode"
|
|
autocomplete="new-password"
|
|
:type="emailEditMode ? 'text' : 'password'"
|
|
:class="{ 'readonly-field': !emailEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="settings.email.smtpPort"
|
|
label="SMTP Port"
|
|
variant="outlined"
|
|
type="number"
|
|
:readonly="!emailEditMode"
|
|
:disabled="!emailEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !emailEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="settings.email.smtpUsername"
|
|
label="SMTP Username"
|
|
variant="outlined"
|
|
:readonly="!emailEditMode"
|
|
:disabled="!emailEditMode"
|
|
autocomplete="new-password"
|
|
:type="emailEditMode ? 'text' : 'password'"
|
|
:class="{ 'readonly-field': !emailEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="settings.email.smtpPassword"
|
|
label="SMTP Password"
|
|
variant="outlined"
|
|
:type="showPassword ? 'text' : 'password'"
|
|
:readonly="!emailEditMode"
|
|
:disabled="!emailEditMode"
|
|
autocomplete="new-password"
|
|
:class="{ 'readonly-field': !emailEditMode }"
|
|
>
|
|
<template v-slot:append-inner>
|
|
<v-icon
|
|
v-if="emailEditMode"
|
|
@click="showPassword = !showPassword"
|
|
:icon="showPassword ? 'mdi-eye-off' : 'mdi-eye'"
|
|
class="cursor-pointer"
|
|
/>
|
|
</template>
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-switch
|
|
v-model="settings.email.useTLS"
|
|
label="Use TLS/SSL"
|
|
color="primary"
|
|
:readonly="!emailEditMode"
|
|
:disabled="!emailEditMode"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-divider class="my-4" />
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<h3 class="text-h6 mb-4">Email Templates</h3>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="settings.email.fromName"
|
|
label="From Name"
|
|
variant="outlined"
|
|
:readonly="!emailEditMode"
|
|
:disabled="!emailEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !emailEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="6">
|
|
<v-text-field
|
|
v-model="settings.email.fromEmail"
|
|
label="From Email"
|
|
variant="outlined"
|
|
type="email"
|
|
:readonly="!emailEditMode"
|
|
:disabled="!emailEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !emailEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-btn variant="outlined" color="primary">
|
|
<v-icon start>mdi-email-edit</v-icon>
|
|
Manage Email Templates
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-window-item>
|
|
|
|
<!-- NocoDB Settings -->
|
|
<v-window-item value="nocodb">
|
|
<v-card-text>
|
|
<!-- Edit Mode Toggle -->
|
|
<v-row class="mb-4">
|
|
<v-col>
|
|
<v-alert
|
|
v-if="!nocodbEditMode"
|
|
type="info"
|
|
variant="tonal"
|
|
density="compact"
|
|
>
|
|
<template v-slot:text>
|
|
Click "Edit NocoDB Configuration" to modify database settings
|
|
</template>
|
|
</v-alert>
|
|
<v-alert
|
|
v-if="nocodbEditMode"
|
|
type="warning"
|
|
variant="tonal"
|
|
density="compact"
|
|
>
|
|
<template v-slot:text>
|
|
NocoDB configuration is required for member management functionality
|
|
</template>
|
|
</v-alert>
|
|
</v-col>
|
|
<v-col cols="auto">
|
|
<v-btn
|
|
v-if="!nocodbEditMode"
|
|
color="primary"
|
|
variant="outlined"
|
|
@click="nocodbEditMode = true"
|
|
>
|
|
<v-icon start>mdi-pencil</v-icon>
|
|
Edit NocoDB Configuration
|
|
</v-btn>
|
|
<v-btn-group v-else>
|
|
<v-btn
|
|
color="success"
|
|
variant="flat"
|
|
@click="saveNocodbSettings"
|
|
>
|
|
<v-icon start>mdi-check</v-icon>
|
|
Save
|
|
</v-btn>
|
|
<v-btn
|
|
color="warning"
|
|
variant="outlined"
|
|
@click="testNocodbConnection"
|
|
:loading="testingNocodb"
|
|
>
|
|
<v-icon start>mdi-connection</v-icon>
|
|
Test Connection
|
|
</v-btn>
|
|
<v-btn
|
|
color="error"
|
|
variant="outlined"
|
|
@click="cancelNocodbEdit"
|
|
>
|
|
<v-icon start>mdi-close</v-icon>
|
|
Cancel
|
|
</v-btn>
|
|
</v-btn-group>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<v-row>
|
|
<v-col cols="12">
|
|
<h3 class="text-h6 mb-4">NocoDB Database Configuration</h3>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
v-model="settings.nocodb.url"
|
|
label="NocoDB URL"
|
|
variant="outlined"
|
|
placeholder="https://your-nocodb-instance.com"
|
|
:readonly="!nocodbEditMode"
|
|
:disabled="!nocodbEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !nocodbEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
v-model="settings.nocodb.apiKey"
|
|
label="API Key"
|
|
variant="outlined"
|
|
:type="showNocodbApiKey ? 'text' : 'password'"
|
|
placeholder="Enter your NocoDB API token"
|
|
:readonly="!nocodbEditMode"
|
|
:disabled="!nocodbEditMode"
|
|
autocomplete="new-password"
|
|
:class="{ 'readonly-field': !nocodbEditMode }"
|
|
>
|
|
<template v-slot:append-inner>
|
|
<v-icon
|
|
v-if="nocodbEditMode"
|
|
@click="showNocodbApiKey = !showNocodbApiKey"
|
|
:icon="showNocodbApiKey ? 'mdi-eye-off' : 'mdi-eye'"
|
|
class="cursor-pointer"
|
|
/>
|
|
</template>
|
|
</v-text-field>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-text-field
|
|
v-model="settings.nocodb.baseId"
|
|
label="Base ID"
|
|
variant="outlined"
|
|
placeholder="Your NocoDB base ID"
|
|
:readonly="!nocodbEditMode"
|
|
:disabled="!nocodbEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !nocodbEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<v-divider class="my-4" />
|
|
</v-col>
|
|
<v-col cols="12">
|
|
<h3 class="text-h6 mb-4">Table Mappings</h3>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-model="settings.nocodb.tables.members"
|
|
label="Members Table"
|
|
variant="outlined"
|
|
:readonly="!nocodbEditMode"
|
|
:disabled="!nocodbEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !nocodbEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-model="settings.nocodb.tables.events"
|
|
label="Events Table"
|
|
variant="outlined"
|
|
:readonly="!nocodbEditMode"
|
|
:disabled="!nocodbEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !nocodbEditMode }"
|
|
/>
|
|
</v-col>
|
|
<v-col cols="12" md="4">
|
|
<v-text-field
|
|
v-model="settings.nocodb.tables.rsvps"
|
|
label="RSVPs Table"
|
|
variant="outlined"
|
|
:readonly="!nocodbEditMode"
|
|
:disabled="!nocodbEditMode"
|
|
autocomplete="off"
|
|
:class="{ 'readonly-field': !nocodbEditMode }"
|
|
/>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Connection Status -->
|
|
<v-row v-if="nocodbConnectionStatus" class="mt-4">
|
|
<v-col>
|
|
<v-alert
|
|
:type="nocodbConnectionStatus.success ? 'success' : 'error'"
|
|
variant="tonal"
|
|
>
|
|
{{ nocodbConnectionStatus.message }}
|
|
</v-alert>
|
|
</v-col>
|
|
</v-row>
|
|
</v-card-text>
|
|
</v-window-item>
|
|
</v-window>
|
|
</v-card>
|
|
|
|
<!-- Snackbar for notifications -->
|
|
<v-snackbar
|
|
v-model="snackbar"
|
|
:color="snackbarColor"
|
|
:timeout="3000"
|
|
>
|
|
{{ snackbarText }}
|
|
<template v-slot:actions>
|
|
<v-btn
|
|
variant="text"
|
|
@click="snackbar = false"
|
|
>
|
|
Close
|
|
</v-btn>
|
|
</template>
|
|
</v-snackbar>
|
|
</v-container>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
definePageMeta({
|
|
layout: 'admin',
|
|
middleware: 'admin'
|
|
});
|
|
|
|
// State
|
|
const activeTab = ref('general');
|
|
const generalEditMode = ref(false);
|
|
const emailEditMode = ref(false);
|
|
const nocodbEditMode = ref(false);
|
|
const showPassword = ref(false);
|
|
const showNocodbApiKey = ref(false);
|
|
const testingEmail = ref(false);
|
|
const testingNocodb = ref(false);
|
|
const nocodbConnectionStatus = ref<{ success: boolean; message: string } | null>(null);
|
|
const snackbar = ref(false);
|
|
const snackbarText = ref('');
|
|
const snackbarColor = ref('success');
|
|
|
|
// Original settings backup for cancel functionality
|
|
const originalSettings = ref<any>(null);
|
|
|
|
// Settings data
|
|
const settings = ref({
|
|
general: {
|
|
orgName: 'MonacoUSA',
|
|
orgEmail: 'info@monacousa.org',
|
|
orgDescription: 'Monaco USA Association - Connecting Monaco and USA',
|
|
timezone: 'America/New_York',
|
|
dateFormat: 'MM/DD/YYYY',
|
|
currency: 'EUR'
|
|
},
|
|
email: {
|
|
smtpHost: 'smtp.gmail.com',
|
|
smtpPort: 587,
|
|
smtpUsername: '',
|
|
smtpPassword: '',
|
|
useTLS: true,
|
|
fromName: 'MonacoUSA',
|
|
fromEmail: 'noreply@monacousa.org'
|
|
},
|
|
nocodb: {
|
|
url: '',
|
|
apiKey: '',
|
|
baseId: '',
|
|
tables: {
|
|
members: 'Members',
|
|
events: 'Events',
|
|
rsvps: 'RSVPs'
|
|
}
|
|
}
|
|
});
|
|
|
|
// Options
|
|
const timezones = [
|
|
'America/New_York',
|
|
'America/Chicago',
|
|
'America/Denver',
|
|
'America/Los_Angeles',
|
|
'Europe/Monaco'
|
|
];
|
|
|
|
const dateFormats = [
|
|
'MM/DD/YYYY',
|
|
'DD/MM/YYYY',
|
|
'YYYY-MM-DD'
|
|
];
|
|
|
|
const currencies = [
|
|
'EUR',
|
|
'USD',
|
|
'GBP'
|
|
];
|
|
|
|
// Load settings on mount
|
|
onMounted(async () => {
|
|
await loadSettings();
|
|
await loadNocodbSettings();
|
|
});
|
|
|
|
// Methods
|
|
const loadSettings = async () => {
|
|
try {
|
|
// Load settings from API
|
|
// For now, we'll keep the defaults
|
|
console.log('Loading settings...');
|
|
} catch (error) {
|
|
console.error('Error loading settings:', error);
|
|
showNotification('Failed to load settings', 'error');
|
|
}
|
|
};
|
|
|
|
const saveGeneralSettings = async () => {
|
|
try {
|
|
console.log('Saving general settings:', settings.value.general);
|
|
// TODO: Save to API
|
|
generalEditMode.value = false;
|
|
showNotification('General settings saved successfully', 'success');
|
|
} catch (error) {
|
|
console.error('Error saving general settings:', error);
|
|
showNotification('Failed to save general settings', 'error');
|
|
}
|
|
};
|
|
|
|
const cancelGeneralEdit = () => {
|
|
if (originalSettings.value) {
|
|
settings.value.general = { ...originalSettings.value.general };
|
|
}
|
|
generalEditMode.value = false;
|
|
};
|
|
|
|
const saveEmailSettings = async () => {
|
|
try {
|
|
console.log('Saving email settings:', settings.value.email);
|
|
// TODO: Save to API
|
|
emailEditMode.value = false;
|
|
showPassword.value = false;
|
|
showNotification('Email settings saved successfully', 'success');
|
|
} catch (error) {
|
|
console.error('Error saving email settings:', error);
|
|
showNotification('Failed to save email settings', 'error');
|
|
}
|
|
};
|
|
|
|
const testEmailSettings = async () => {
|
|
testingEmail.value = true;
|
|
try {
|
|
console.log('Testing email settings...');
|
|
// TODO: Test email configuration via API
|
|
await new Promise(resolve => setTimeout(resolve, 2000)); // Simulate API call
|
|
showNotification('Test email sent successfully', 'success');
|
|
} catch (error) {
|
|
console.error('Error testing email:', error);
|
|
showNotification('Failed to send test email', 'error');
|
|
} finally {
|
|
testingEmail.value = false;
|
|
}
|
|
};
|
|
|
|
const cancelEmailEdit = () => {
|
|
if (originalSettings.value) {
|
|
settings.value.email = { ...originalSettings.value.email };
|
|
}
|
|
emailEditMode.value = false;
|
|
showPassword.value = false;
|
|
};
|
|
|
|
const showNotification = (text: string, color: string = 'success') => {
|
|
snackbarText.value = text;
|
|
snackbarColor.value = color;
|
|
snackbar.value = true;
|
|
};
|
|
|
|
const loadNocodbSettings = async () => {
|
|
try {
|
|
const response = await $fetch<{ success: boolean; data?: any }>('/api/admin/nocodb-config');
|
|
if (response.success && response.data) {
|
|
settings.value.nocodb = {
|
|
url: response.data.url || '',
|
|
apiKey: response.data.apiKey || '',
|
|
baseId: response.data.baseId || '',
|
|
tables: response.data.tables || {
|
|
members: 'Members',
|
|
events: 'Events',
|
|
rsvps: 'RSVPs'
|
|
}
|
|
};
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading NocoDB settings:', error);
|
|
showNotification('Failed to load NocoDB settings', 'error');
|
|
}
|
|
};
|
|
|
|
const saveNocodbSettings = async () => {
|
|
try {
|
|
const response = await $fetch('/api/admin/nocodb-config', {
|
|
method: 'POST',
|
|
body: settings.value.nocodb
|
|
});
|
|
nocodbEditMode.value = false;
|
|
showNocodbApiKey.value = false;
|
|
showNotification('NocoDB settings saved successfully', 'success');
|
|
// Reload settings to ensure they're persistent
|
|
await loadNocodbSettings();
|
|
} catch (error) {
|
|
console.error('Error saving NocoDB settings:', error);
|
|
showNotification('Failed to save NocoDB settings', 'error');
|
|
}
|
|
};
|
|
|
|
const testNocodbConnection = async () => {
|
|
testingNocodb.value = true;
|
|
nocodbConnectionStatus.value = null;
|
|
|
|
try {
|
|
const response = await $fetch<{ success: boolean; message: string }>('/api/admin/nocodb-test', {
|
|
method: 'POST',
|
|
body: settings.value.nocodb
|
|
});
|
|
|
|
nocodbConnectionStatus.value = {
|
|
success: response.success,
|
|
message: response.message
|
|
};
|
|
|
|
if (response.success) {
|
|
showNotification('NocoDB connection successful', 'success');
|
|
} else {
|
|
showNotification(response.message, 'error');
|
|
}
|
|
} catch (error: any) {
|
|
nocodbConnectionStatus.value = {
|
|
success: false,
|
|
message: error.data?.message || 'Failed to connect to NocoDB'
|
|
};
|
|
showNotification('Connection test failed', 'error');
|
|
} finally {
|
|
testingNocodb.value = false;
|
|
}
|
|
};
|
|
|
|
const cancelNocodbEdit = () => {
|
|
if (originalSettings.value) {
|
|
settings.value.nocodb = { ...originalSettings.value.nocodb };
|
|
}
|
|
nocodbEditMode.value = false;
|
|
showNocodbApiKey.value = false;
|
|
nocodbConnectionStatus.value = null;
|
|
};
|
|
|
|
// Watch for edit mode changes to backup original settings
|
|
watch(generalEditMode, (newVal) => {
|
|
if (newVal) {
|
|
originalSettings.value = {
|
|
general: { ...settings.value.general }
|
|
};
|
|
}
|
|
});
|
|
|
|
watch(emailEditMode, (newVal) => {
|
|
if (newVal) {
|
|
originalSettings.value = {
|
|
email: { ...settings.value.email }
|
|
};
|
|
}
|
|
});
|
|
|
|
watch(nocodbEditMode, (newVal) => {
|
|
if (newVal) {
|
|
originalSettings.value = {
|
|
nocodb: { ...settings.value.nocodb }
|
|
};
|
|
}
|
|
});
|
|
|
|
// Prevent browser autofill on mount
|
|
onMounted(() => {
|
|
// Disable autofill for all inputs initially
|
|
const inputs = document.querySelectorAll('input');
|
|
inputs.forEach(input => {
|
|
input.setAttribute('autocomplete', 'off');
|
|
input.setAttribute('data-lpignore', 'true'); // LastPass
|
|
input.setAttribute('data-form-type', 'other'); // Dashlane
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.readonly-field :deep(.v-field) {
|
|
background-color: rgba(0, 0, 0, 0.02);
|
|
}
|
|
|
|
.readonly-field :deep(.v-field__input) {
|
|
cursor: default !important;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Prevent browser autofill styling */
|
|
:deep(input:-webkit-autofill),
|
|
:deep(input:-webkit-autofill:hover),
|
|
:deep(input:-webkit-autofill:focus),
|
|
:deep(input:-webkit-autofill:active) {
|
|
-webkit-box-shadow: 0 0 0 30px white inset !important;
|
|
box-shadow: 0 0 0 30px white inset !important;
|
|
}
|
|
</style> |