mirror of https://github.com/Fabio286/antares.git
533 lines
22 KiB
Vue
533 lines
22 KiB
Vue
<template>
|
|
<div class="connection-panel">
|
|
<div class="panel">
|
|
<div class="panel-nav">
|
|
<ul class="tab tab-block">
|
|
<li
|
|
class="tab-item c-hand"
|
|
:class="{'active': selectedTab === 'general'}"
|
|
@click="selectTab('general')"
|
|
>
|
|
<a class="tab-link">{{ $t('word.general') }}</a>
|
|
</li>
|
|
<li
|
|
v-if="customizations.sslConnection"
|
|
class="tab-item c-hand"
|
|
:class="{'active': selectedTab === 'ssl'}"
|
|
@click="selectTab('ssl')"
|
|
>
|
|
<a class="tab-link">{{ $t('word.ssl') }}</a>
|
|
</li>
|
|
<li
|
|
v-if="customizations.sshConnection"
|
|
class="tab-item c-hand"
|
|
:class="{'active': selectedTab === 'ssh'}"
|
|
@click="selectTab('ssh')"
|
|
>
|
|
<a class="tab-link">{{ $t('word.sshTunnel') }}</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div v-if="selectedTab === 'general'" class="panel-body py-0">
|
|
<div>
|
|
<form class="form-horizontal">
|
|
<fieldset class="m-0" :disabled="isBusy">
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.connectionName') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
ref="firstInput"
|
|
v-model="localConnection.name"
|
|
class="form-input"
|
|
type="text"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.client') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<select v-model="localConnection.client" class="form-select">
|
|
<option
|
|
v-for="client in clients"
|
|
:key="client.slug"
|
|
:value="client.slug"
|
|
>
|
|
{{ client.name }}
|
|
</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<div v-if="!customizations.fileConnection" class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.hostName') }}/IP</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.host"
|
|
class="form-input"
|
|
type="text"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div v-if="customizations.fileConnection" class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.database') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<BaseUploadInput
|
|
:value="localConnection.databasePath"
|
|
:message="$t('word.browse')"
|
|
@clear="pathClear('databasePath')"
|
|
@change="pathSelection($event, 'databasePath')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div v-if="!customizations.fileConnection" class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.port') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.port"
|
|
class="form-input"
|
|
type="number"
|
|
min="1"
|
|
max="65535"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div v-if="customizations.database" class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.database') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.database"
|
|
class="form-input"
|
|
type="text"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div v-if="!customizations.fileConnection" class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.user') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.user"
|
|
class="form-input"
|
|
type="text"
|
|
:disabled="localConnection.ask"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div v-if="!customizations.fileConnection" class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.password') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.password"
|
|
class="form-input"
|
|
type="password"
|
|
:disabled="localConnection.ask"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div v-if="customizations.connectionSchema" class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.schema') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.schema"
|
|
class="form-input"
|
|
type="text"
|
|
:placeholder="$t('word.all')"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div v-if="!customizations.fileConnection" class="form-group columns">
|
|
<div class="column col-4 col-sm-12" />
|
|
<div class="column col-8 col-sm-12">
|
|
<label class="form-checkbox form-inline">
|
|
<input v-model="localConnection.ask" type="checkbox"><i class="form-icon" /> {{ $t('message.askCredentials') }}
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div v-if="selectedTab === 'ssl'" class="panel-body py-0">
|
|
<div>
|
|
<form class="form-horizontal">
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">
|
|
{{ $t('message.enableSsl') }}
|
|
</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<label class="form-switch d-inline-block" @click.prevent="toggleSsl">
|
|
<input type="checkbox" :checked="localConnection.ssl">
|
|
<i class="form-icon" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<fieldset class="m-0" :disabled="isBusy || !localConnection.ssl">
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.privateKey') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<BaseUploadInput
|
|
:value="localConnection.key"
|
|
:message="$t('word.browse')"
|
|
@clear="pathClear('key')"
|
|
@change="pathSelection($event, 'key')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.certificate') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<BaseUploadInput
|
|
:value="localConnection.cert"
|
|
:message="$t('word.browse')"
|
|
@clear="pathClear('cert')"
|
|
@change="pathSelection($event, 'cert')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.caCertificate') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<BaseUploadInput
|
|
:value="localConnection.ca"
|
|
:message="$t('word.browse')"
|
|
@clear="pathClear('ca')"
|
|
@change="pathSelection($event, 'ca')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.ciphers') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
ref="firstInput"
|
|
v-model="localConnection.ciphers"
|
|
class="form-input"
|
|
type="text"
|
|
>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div v-if="selectedTab === 'ssh'" class="panel-body py-0">
|
|
<div>
|
|
<form class="form-horizontal">
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">
|
|
{{ $t('message.enableSsh') }}
|
|
</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<label class="form-switch d-inline-block" @click.prevent="toggleSsh">
|
|
<input type="checkbox" :checked="localConnection.ssh">
|
|
<i class="form-icon" />
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<fieldset class="m-0" :disabled="isBusy || !localConnection.ssh">
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.hostName') }}/IP</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.sshHost"
|
|
class="form-input"
|
|
type="text"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.user') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.sshUser"
|
|
class="form-input"
|
|
type="text"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.password') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.sshPass"
|
|
class="form-input"
|
|
type="password"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.port') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.sshPort"
|
|
class="form-input"
|
|
type="number"
|
|
min="1"
|
|
max="65535"
|
|
>
|
|
</div>
|
|
</div>
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.privateKey') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<BaseUploadInput
|
|
:value="localConnection.sshKey"
|
|
:message="$t('word.browse')"
|
|
@clear="pathClear('sshKey')"
|
|
@change="pathSelection($event, 'sshKey')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="form-group columns">
|
|
<div class="column col-4 col-sm-12">
|
|
<label class="form-label">{{ $t('word.passphrase') }}</label>
|
|
</div>
|
|
<div class="column col-8 col-sm-12">
|
|
<input
|
|
v-model="localConnection.sshPassphrase"
|
|
class="form-input"
|
|
type="password"
|
|
>
|
|
</div>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<div class="panel-footer">
|
|
<button
|
|
class="btn btn-gray mr-2 d-flex"
|
|
:class="{'loading': isTesting}"
|
|
:disabled="isBusy"
|
|
@click="startTest"
|
|
>
|
|
<i class="mdi mdi-24px mdi-lightning-bolt mr-1" />
|
|
{{ $t('message.testConnection') }}
|
|
</button>
|
|
<button
|
|
class="btn btn-primary mr-2 d-flex"
|
|
:disabled="isBusy || !hasChanges"
|
|
@click="saveConnection"
|
|
>
|
|
<i class="mdi mdi-24px mdi-content-save mr-1" />
|
|
{{ $t('word.save') }}
|
|
</button>
|
|
<button
|
|
class="btn btn-success d-flex"
|
|
:class="{'loading': isConnecting}"
|
|
:disabled="isBusy"
|
|
@click="startConnection"
|
|
>
|
|
<i class="mdi mdi-24px mdi-connection mr-1" />
|
|
{{ $t('word.connect') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<ModalAskCredentials
|
|
v-if="isAsking"
|
|
@close-asking="closeAsking"
|
|
@credentials="continueTest"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from 'vuex';
|
|
import customizations from 'common/customizations';
|
|
import Connection from '@/ipc-api/Connection';
|
|
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
|
import BaseUploadInput from '@/components/BaseUploadInput';
|
|
|
|
export default {
|
|
name: 'WorkspaceEditConnectionPanel',
|
|
components: {
|
|
ModalAskCredentials,
|
|
BaseUploadInput
|
|
},
|
|
props: {
|
|
connection: Object
|
|
},
|
|
data () {
|
|
return {
|
|
clients: [
|
|
{ name: 'MySQL', slug: 'mysql' },
|
|
{ name: 'MariaDB', slug: 'maria' },
|
|
{ name: 'PostgreSQL', slug: 'pg' },
|
|
{ name: 'SQLite', slug: 'sqlite' }
|
|
],
|
|
isConnecting: false,
|
|
isTesting: false,
|
|
isAsking: false,
|
|
localConnection: null,
|
|
selectedTab: 'general'
|
|
};
|
|
},
|
|
computed: {
|
|
customizations () {
|
|
return customizations[this.localConnection.client];
|
|
},
|
|
isBusy () {
|
|
return this.isConnecting || this.isTesting;
|
|
},
|
|
hasChanges () {
|
|
return JSON.stringify(this.connection) !== JSON.stringify(this.localConnection);
|
|
}
|
|
},
|
|
watch: {
|
|
connection () {
|
|
this.localConnection = JSON.parse(JSON.stringify(this.connection));
|
|
}
|
|
},
|
|
created () {
|
|
this.localConnection = JSON.parse(JSON.stringify(this.connection));
|
|
},
|
|
methods: {
|
|
...mapActions({
|
|
editConnection: 'connections/editConnection',
|
|
connectWorkspace: 'workspaces/connectWorkspace',
|
|
addNotification: 'notifications/addNotification'
|
|
}),
|
|
async startConnection () {
|
|
await this.saveConnection();
|
|
this.isConnecting = true;
|
|
|
|
if (this.localConnection.ask)
|
|
this.isAsking = true;
|
|
else {
|
|
await this.connectWorkspace(this.localConnection);
|
|
this.isConnecting = false;
|
|
}
|
|
},
|
|
async startTest () {
|
|
this.isTesting = true;
|
|
|
|
if (this.localConnection.ask)
|
|
this.isAsking = true;
|
|
else {
|
|
try {
|
|
const res = await Connection.makeTest(this.localConnection);
|
|
if (res.status === 'error')
|
|
this.addNotification({ status: 'error', message: res.response.message || res.response.toString() });
|
|
else
|
|
this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
|
|
}
|
|
catch (err) {
|
|
this.addNotification({ status: 'error', message: err.stack });
|
|
}
|
|
|
|
this.isTesting = false;
|
|
}
|
|
},
|
|
async continueTest (credentials) { // if "Ask for credentials" is true
|
|
this.isAsking = false;
|
|
const params = Object.assign({}, this.localConnection, credentials);
|
|
try {
|
|
if (this.isConnecting) {
|
|
const params = Object.assign({}, this.connection, credentials);
|
|
await this.connectWorkspace(params);
|
|
this.isConnecting = false;
|
|
}
|
|
else {
|
|
const res = await Connection.makeTest(params);
|
|
if (res.status === 'error')
|
|
this.addNotification({ status: 'error', message: res.response.message || res.response.toString() });
|
|
else
|
|
this.addNotification({ status: 'success', message: this.$t('message.connectionSuccessfullyMade') });
|
|
}
|
|
}
|
|
catch (err) {
|
|
this.addNotification({ status: 'error', message: err.stack });
|
|
}
|
|
|
|
this.isTesting = false;
|
|
},
|
|
saveConnection () {
|
|
return this.editConnection(this.localConnection);
|
|
},
|
|
closeAsking () {
|
|
this.isTesting = false;
|
|
this.isAsking = false;
|
|
this.isConnecting = false;
|
|
},
|
|
selectTab (tab) {
|
|
this.selectedTab = tab;
|
|
},
|
|
toggleSsl () {
|
|
this.localConnection.ssl = !this.localConnection.ssl;
|
|
},
|
|
toggleSsh () {
|
|
this.localConnection.ssh = !this.localConnection.ssh;
|
|
},
|
|
pathSelection (event, name) {
|
|
const { files } = event.target;
|
|
if (!files.length) return;
|
|
|
|
this.localConnection[name] = files[0].path;
|
|
},
|
|
pathClear (name) {
|
|
this.localConnection[name] = '';
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.connection-panel {
|
|
margin-top: 15vh;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
|
|
.panel {
|
|
width: 450px;
|
|
border-radius: $border-radius;
|
|
|
|
.panel-body {
|
|
flex: initial;
|
|
}
|
|
|
|
.panel-footer {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
</style>
|