feat(proxy): add edit and delete functionality for proxies
- Add new API endpoints for modifying and deleting proxies - Implement UI components for edit and delete actions - Update proxy form to handle both create and edit modes - Add confirmation modal for delete operation
This commit is contained in:
@@ -175,7 +175,23 @@
|
||||
<div v-for="proxy in proxies" :key="proxy.name" class="proxy-item">
|
||||
<div class="proxy-header">
|
||||
<span class="proxy-name">{{ proxy.name }}</span>
|
||||
<span class="proxy-type">{{ proxy.type }}</span>
|
||||
<div class="proxy-actions-right">
|
||||
<span class="proxy-type">{{ proxy.type }}</span>
|
||||
<div class="proxy-actions">
|
||||
<button
|
||||
class="common-btn edit-btn"
|
||||
@click="editProxy(proxy)"
|
||||
>
|
||||
<i class="fas fa-edit"></i> Edit
|
||||
</button>
|
||||
<button
|
||||
class="common-btn delete-btn"
|
||||
@click="deleteProxy(proxy)"
|
||||
>
|
||||
<i class="fas fa-trash"></i> Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="proxy-details">
|
||||
<div class="config-item proxy-detail">
|
||||
@@ -196,8 +212,8 @@
|
||||
|
||||
<div v-if="showAddProxyModal" class="modal-overlay" @click="closeAddProxyModal">
|
||||
<div class="modal" @click.stop>
|
||||
<h3>Add Proxy</h3>
|
||||
<form @submit.prevent="handleAddProxySubmit" class="form">
|
||||
<h3>{{ isEditProxy ? 'Edit Proxy' : 'Add Proxy' }}</h3>
|
||||
<form @submit.prevent="handleProxySubmit" class="form">
|
||||
<div class="form-group">
|
||||
<label>Proxy Name</label>
|
||||
<input
|
||||
@@ -246,12 +262,25 @@
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="cancel-btn" @click="closeAddProxyModal">Cancel</button>
|
||||
<button type="submit" class="submit-btn" :disabled="loading">{{ loading ? 'Processing...' : 'Submit' }}</button>
|
||||
<button type="submit" class="submit-btn" :disabled="loading">{{ loading ? 'Processing...' : (isEditProxy ? 'Save' : 'Submit') }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="showDeleteProxyModal" class="modal-overlay" @click="closeDeleteProxyModal">
|
||||
<div class="modal" @click.stop>
|
||||
<h3>Delete Proxy</h3>
|
||||
<p>Are you sure you want to delete proxy <strong>{{ selectedProxyName }}</strong>?</p>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="cancel-btn" @click="closeDeleteProxyModal">Cancel</button>
|
||||
<button type="button" class="submit-btn delete-btn" @click="confirmDeleteProxy" :disabled="loading">
|
||||
{{ loading ? 'Processing...' : 'Delete' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<h3>Logs</h3>
|
||||
<div class="logs-container">
|
||||
@@ -291,6 +320,9 @@ export default {
|
||||
const statusInfo = ref({});
|
||||
const showEditConfigModal = ref(false);
|
||||
const showAddProxyModal = ref(false);
|
||||
const showDeleteProxyModal = ref(false);
|
||||
const isEditProxy = ref(false);
|
||||
const selectedProxyName = ref('');
|
||||
const loading = ref(false);
|
||||
const userType = ref(getCookie('user-type') || 'visitor');
|
||||
const formData = ref({
|
||||
@@ -484,15 +516,108 @@ export default {
|
||||
};
|
||||
|
||||
const addProxy = () => {
|
||||
isEditProxy.value = false;
|
||||
formData.value = {
|
||||
name: '',
|
||||
type: '',
|
||||
localIP: '',
|
||||
localPort: '',
|
||||
remotePort: '',
|
||||
auth_method: formData.value.auth_method,
|
||||
serverAddr: formData.value.serverAddr,
|
||||
serverPort: formData.value.serverPort,
|
||||
token: formData.value.token,
|
||||
clientId: formData.value.clientId,
|
||||
clientSecret: formData.value.clientSecret,
|
||||
audience: formData.value.audience,
|
||||
tokenEndpoint: formData.value.tokenEndpoint,
|
||||
bootAtStart: formData.value.bootAtStart,
|
||||
runUser: formData.value.runUser
|
||||
};
|
||||
showAddProxyModal.value = true;
|
||||
}
|
||||
|
||||
const editProxy = (proxy) => {
|
||||
isEditProxy.value = true;
|
||||
formData.value = {
|
||||
name: proxy.name,
|
||||
type: proxy.type,
|
||||
localIP: proxy.localIP,
|
||||
localPort: parseInt(proxy.localPort),
|
||||
remotePort: parseInt(proxy.remotePort),
|
||||
auth_method: formData.value.auth_method,
|
||||
serverAddr: formData.value.serverAddr,
|
||||
serverPort: formData.value.serverPort,
|
||||
token: formData.value.token,
|
||||
clientId: formData.value.clientId,
|
||||
clientSecret: formData.value.clientSecret,
|
||||
audience: formData.value.audience,
|
||||
tokenEndpoint: formData.value.tokenEndpoint,
|
||||
bootAtStart: formData.value.bootAtStart,
|
||||
runUser: formData.value.runUser
|
||||
};
|
||||
showAddProxyModal.value = true;
|
||||
}
|
||||
|
||||
const deleteProxy = (proxy) => {
|
||||
selectedProxyName.value = proxy.name;
|
||||
showDeleteProxyModal.value = true;
|
||||
}
|
||||
|
||||
const closeDeleteProxyModal = () => {
|
||||
showDeleteProxyModal.value = false;
|
||||
selectedProxyName.value = '';
|
||||
}
|
||||
|
||||
const closeAddProxyModal = () => {
|
||||
showAddProxyModal.value = false;
|
||||
selectedProxyName.value = '';
|
||||
};
|
||||
|
||||
const closeEditConfigModal = () => {
|
||||
showEditConfigModal.value = false;
|
||||
};
|
||||
|
||||
const closeAddProxyModal = () => {
|
||||
showAddProxyModal.value = false;
|
||||
const confirmDeleteProxy = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
await instanceApi.deleteProxy(instanceID.value, selectedProxyName.value);
|
||||
showNotification('Proxy deleted successfully', 'success');
|
||||
closeDeleteProxyModal();
|
||||
await loadProxies();
|
||||
} catch (error) {
|
||||
showNotification(error.message || 'Delete proxy failed', 'error');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleProxySubmit = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const proxyInfo = {
|
||||
name: formData.value.name,
|
||||
type: formData.value.type,
|
||||
localIP: formData.value.localIP,
|
||||
localPort: formData.value.localPort.toString(),
|
||||
remotePort: formData.value.remotePort.toString()
|
||||
};
|
||||
|
||||
if (isEditProxy.value) {
|
||||
await instanceApi.modifyProxy(instanceID.value, proxyInfo);
|
||||
showNotification('Proxy updated successfully', 'success');
|
||||
} else {
|
||||
await instanceApi.createProxy(instanceID.value, proxyInfo);
|
||||
showNotification('Proxy created successfully', 'success');
|
||||
}
|
||||
|
||||
closeAddProxyModal();
|
||||
await loadProxies();
|
||||
} catch (error) {
|
||||
showNotification(error.message || (isEditProxy.value ? 'Update proxy failed' : 'Create proxy failed'), 'error');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleEditConfiguration = async () => {
|
||||
@@ -586,15 +711,22 @@ export default {
|
||||
userType,
|
||||
showEditConfigModal,
|
||||
showAddProxyModal,
|
||||
showDeleteProxyModal,
|
||||
isEditProxy,
|
||||
selectedProxyName,
|
||||
loading,
|
||||
formData,
|
||||
goBack,
|
||||
editConfig,
|
||||
closeEditConfigModal,
|
||||
addProxy,
|
||||
editProxy,
|
||||
deleteProxy,
|
||||
closeAddProxyModal,
|
||||
closeDeleteProxyModal,
|
||||
confirmDeleteProxy,
|
||||
handleEditConfiguration,
|
||||
handleAddProxySubmit,
|
||||
handleProxySubmit,
|
||||
handleStatusClick,
|
||||
restartInstance,
|
||||
deleteInstance
|
||||
|
||||
Reference in New Issue
Block a user