2021-07-08 17:43:33 +02:00
|
|
|
<template>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div class="connection-panel-wrapper p-relative">
|
|
|
|
<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('application.general') }}</a>
|
|
|
|
</li>
|
|
|
|
<li
|
|
|
|
v-if="clientCustomizations.sslConnection"
|
|
|
|
class="tab-item c-hand"
|
|
|
|
:class="{'active': selectedTab === 'ssl'}"
|
|
|
|
@click="selectTab('ssl')"
|
|
|
|
>
|
|
|
|
<a class="tab-link">{{ t('connection.ssl') }}</a>
|
|
|
|
</li>
|
|
|
|
<li
|
|
|
|
v-if="clientCustomizations.sshConnection"
|
|
|
|
class="tab-item c-hand"
|
|
|
|
:class="{'active': selectedTab === 'ssh'}"
|
|
|
|
@click="selectTab('ssh')"
|
|
|
|
>
|
|
|
|
<a class="tab-link">{{ t('connection.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-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.connectionName') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
ref="firstInput"
|
|
|
|
v-model="connection.name"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.client') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<BaseSelect
|
|
|
|
v-model="connection.client"
|
|
|
|
:options="clients"
|
|
|
|
option-track-by="slug"
|
|
|
|
option-label="name"
|
|
|
|
class="form-select"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="connection.client === 'pg'" class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.connectionString') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
ref="pgString"
|
|
|
|
v-model="connection.pgConnString"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="!clientCustomizations.fileConnection" class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.hostName') }}/IP</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
v-model="connection.host"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="clientCustomizations.fileConnection" class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('database.database') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<BaseUploadInput
|
|
|
|
:model-value="connection.databasePath"
|
|
|
|
:message="t('general.browse')"
|
|
|
|
@clear="pathClear('databasePath')"
|
|
|
|
@change="pathSelection($event, 'databasePath')"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="!clientCustomizations.fileConnection" class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.port') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
v-model="connection.port"
|
|
|
|
class="form-input"
|
|
|
|
type="number"
|
|
|
|
min="1"
|
|
|
|
max="65535"
|
|
|
|
>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="clientCustomizations.database" class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('database.database') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
v-model="connection.database"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
:placeholder="clientCustomizations.defaultDatabase"
|
|
|
|
>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="!clientCustomizations.fileConnection" class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.user') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
v-model="connection.user"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
:disabled="connection.ask"
|
|
|
|
>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="!clientCustomizations.fileConnection" class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.password') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
v-model="connection.password"
|
|
|
|
class="form-input"
|
|
|
|
type="password"
|
|
|
|
:disabled="connection.ask"
|
|
|
|
>
|
|
|
|
</div>
|
2021-07-09 10:26:16 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="clientCustomizations.connectionSchema" class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('database.schema') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
v-model="connection.schema"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
:placeholder="t('general.all')"
|
|
|
|
>
|
|
|
|
</div>
|
2021-07-09 10:26:16 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="clientCustomizations.readOnlyMode" class="form-group columns mb-0">
|
|
|
|
<div class="column col-5 col-sm-12" />
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<label class="form-checkbox form-inline my-0">
|
|
|
|
<input v-model="connection.readonly" type="checkbox"><i class="form-icon" /> {{ t('connection.readOnlyMode') }}
|
|
|
|
</label>
|
|
|
|
</div>
|
2021-11-16 13:21:33 +01:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="!clientCustomizations.fileConnection" class="form-group columns mb-0">
|
|
|
|
<div class="column col-5 col-sm-12" />
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<label class="form-checkbox form-inline my-0">
|
|
|
|
<input v-model="connection.ask" type="checkbox"><i class="form-icon" /> {{ t('connection.askCredentials') }}
|
|
|
|
</label>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="clientCustomizations.singleConnectionMode" class="form-group columns mb-0">
|
|
|
|
<div class="column col-5 col-sm-12" />
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<label class="form-checkbox form-inline my-0">
|
|
|
|
<input v-model="connection.singleConnectionMode" type="checkbox"><i class="form-icon" /> {{ t('connection.singleConnection') }}
|
|
|
|
</label>
|
|
|
|
</div>
|
2024-02-18 14:37:45 +01:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div v-if="selectedTab === 'ssl'" class="panel-body py-0">
|
|
|
|
<div>
|
|
|
|
<form class="form-horizontal">
|
2021-07-08 17:43:33 +02:00
|
|
|
<div class="form-group columns">
|
2023-07-24 14:48:05 +02:00
|
|
|
<div class="column col-5 col-sm-12">
|
2024-07-01 18:16:18 +02:00
|
|
|
<label class="form-label cut-text">
|
|
|
|
{{ t('connection.enableSsl') }}
|
2022-04-10 10:49:27 +02:00
|
|
|
</label>
|
|
|
|
</div>
|
2023-07-24 14:48:05 +02:00
|
|
|
<div class="column col-7 col-sm-12">
|
2024-07-01 18:16:18 +02:00
|
|
|
<label class="form-switch d-inline-block" @click.prevent="toggleSsl">
|
|
|
|
<input type="checkbox" :checked="connection.ssl">
|
|
|
|
<i class="form-icon" />
|
|
|
|
</label>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<fieldset class="m-0" :disabled="isBusy || !connection.ssl">
|
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.privateKey') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<BaseUploadInput
|
|
|
|
:model-value="connection.key"
|
|
|
|
:message="t('general.browse')"
|
|
|
|
@clear="pathClear('key')"
|
|
|
|
@change="pathSelection($event, 'key')"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.certificate') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<BaseUploadInput
|
|
|
|
:model-value="connection.cert"
|
|
|
|
:message="t('general.browse')"
|
|
|
|
@clear="pathClear('cert')"
|
|
|
|
@change="pathSelection($event, 'cert')"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.caCertificate') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<BaseUploadInput
|
|
|
|
:model-value="connection.ca"
|
|
|
|
:message="t('general.browse')"
|
|
|
|
@clear="pathClear('ca')"
|
|
|
|
@change="pathSelection($event, 'ca')"
|
|
|
|
/>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.ciphers') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
ref="firstInput"
|
|
|
|
v-model="connection.ciphers"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12" />
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<label class="form-checkbox form-inline">
|
|
|
|
<input v-model="connection.untrustedConnection" type="checkbox"><i class="form-icon" /> {{ t('connection.untrustedConnection') }}
|
|
|
|
</label>
|
|
|
|
</div>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="selectedTab === 'ssh'" class="panel-body py-0">
|
|
|
|
<div>
|
|
|
|
<form class="form-horizontal">
|
2021-07-08 17:43:33 +02:00
|
|
|
<div class="form-group columns">
|
2023-07-24 14:48:05 +02:00
|
|
|
<div class="column col-5 col-sm-12">
|
2024-07-01 18:16:18 +02:00
|
|
|
<label class="form-label cut-text">
|
|
|
|
{{ t('connection.enableSsh') }}
|
|
|
|
</label>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
2023-07-24 14:48:05 +02:00
|
|
|
<div class="column col-7 col-sm-12">
|
2024-07-01 18:16:18 +02:00
|
|
|
<label class="form-switch d-inline-block" @click.prevent="toggleSsh">
|
|
|
|
<input type="checkbox" :checked="connection.ssh">
|
|
|
|
<i class="form-icon" />
|
|
|
|
</label>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<fieldset class="m-0" :disabled="isBusy || !connection.ssh">
|
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.hostName') }}/IP</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
v-model="connection.sshHost"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
>
|
|
|
|
</div>
|
2021-10-07 14:58:31 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.user') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
v-model="connection.sshUser"
|
|
|
|
class="form-input"
|
|
|
|
type="text"
|
|
|
|
>
|
|
|
|
</div>
|
2021-10-07 14:58:31 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.password') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
v-model="connection.sshPass"
|
|
|
|
class="form-input"
|
|
|
|
type="password"
|
|
|
|
>
|
|
|
|
</div>
|
2023-07-24 14:48:05 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.port') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
2023-09-04 16:27:50 +02:00
|
|
|
<input
|
2024-07-01 18:16:18 +02:00
|
|
|
v-model="connection.sshPort"
|
2023-09-04 16:27:50 +02:00
|
|
|
class="form-input"
|
|
|
|
type="number"
|
|
|
|
min="1"
|
2024-07-01 18:16:18 +02:00
|
|
|
max="65535"
|
2023-09-04 16:27:50 +02:00
|
|
|
>
|
|
|
|
</div>
|
2023-07-24 14:48:05 +02:00
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.privateKey') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<BaseUploadInput
|
|
|
|
:model-value="connection.sshKey"
|
|
|
|
:message="t('general.browse')"
|
|
|
|
@clear="pathClear('sshKey')"
|
|
|
|
@change="pathSelection($event, 'sshKey')"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.passphrase') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<input
|
|
|
|
v-model="connection.sshPassphrase"
|
|
|
|
class="form-input"
|
|
|
|
type="password"
|
|
|
|
>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="form-group columns">
|
|
|
|
<div class="column col-5 col-sm-12">
|
|
|
|
<label class="form-label cut-text">{{ t('connection.keepAliveInterval') }}</label>
|
|
|
|
</div>
|
|
|
|
<div class="column col-7 col-sm-12">
|
|
|
|
<div class="input-group">
|
|
|
|
<input
|
|
|
|
v-model="connection.sshKeepAliveInterval"
|
|
|
|
class="form-input"
|
|
|
|
type="number"
|
|
|
|
min="1"
|
|
|
|
>
|
|
|
|
<span class="input-group-addon">{{ t('general.seconds') }}</span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</fieldset>
|
|
|
|
</form>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="panel-footer">
|
|
|
|
<button
|
|
|
|
id="connection-test"
|
|
|
|
class="btn btn-gray mr-2 d-flex"
|
|
|
|
:class="{'loading': isTesting}"
|
|
|
|
:disabled="isBusy"
|
|
|
|
@click="startTest"
|
|
|
|
>
|
|
|
|
<BaseIcon
|
|
|
|
icon-name="mdiLightningBolt"
|
|
|
|
:size="24"
|
|
|
|
class="mr-1"
|
|
|
|
/>
|
|
|
|
{{ t('connection.testConnection') }}
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
id="connection-save"
|
|
|
|
class="btn btn-primary mr-2 d-flex"
|
|
|
|
:disabled="isBusy"
|
|
|
|
@click="saveConnection"
|
|
|
|
>
|
|
|
|
<BaseIcon
|
|
|
|
icon-name="mdiContentSave"
|
|
|
|
:size="24"
|
|
|
|
class="mr-1"
|
|
|
|
/>
|
|
|
|
{{ t('general.save') }}
|
|
|
|
</button>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<ModalAskCredentials
|
|
|
|
v-if="isAsking"
|
|
|
|
@close-asking="closeAsking"
|
|
|
|
@credentials="continueTest"
|
|
|
|
/>
|
2021-07-08 17:43:33 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-07-01 18:16:18 +02:00
|
|
|
<DebugConsole v-if="isConsoleOpen" />
|
2021-07-08 17:43:33 +02:00
|
|
|
</template>
|
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
<script setup lang="ts">
|
2021-07-08 17:43:33 +02:00
|
|
|
import customizations from 'common/customizations';
|
2023-08-18 15:57:31 +02:00
|
|
|
import { ConnectionParams } from 'common/interfaces/antares';
|
2021-07-08 17:43:33 +02:00
|
|
|
import { uidGen } from 'common/libs/uidGen';
|
2024-07-01 18:16:18 +02:00
|
|
|
import { storeToRefs } from 'pinia';
|
2023-08-18 15:57:31 +02:00
|
|
|
import { computed, Ref, ref, watch } from 'vue';
|
|
|
|
import { useI18n } from 'vue-i18n';
|
|
|
|
|
2023-09-17 18:49:37 +02:00
|
|
|
import BaseIcon from '@/components/BaseIcon.vue';
|
2023-08-18 15:57:31 +02:00
|
|
|
import BaseSelect from '@/components/BaseSelect.vue';
|
|
|
|
import BaseUploadInput from '@/components/BaseUploadInput.vue';
|
2024-07-01 18:16:18 +02:00
|
|
|
import DebugConsole from '@/components/DebugConsole.vue';
|
2023-08-18 15:57:31 +02:00
|
|
|
import ModalAskCredentials from '@/components/ModalAskCredentials.vue';
|
|
|
|
import Connection from '@/ipc-api/Connection';
|
2022-04-30 00:47:37 +02:00
|
|
|
import { useConnectionsStore } from '@/stores/connections';
|
2024-07-01 18:16:18 +02:00
|
|
|
import { useConsoleStore } from '@/stores/console';
|
2022-04-30 00:47:37 +02:00
|
|
|
import { useNotificationsStore } from '@/stores/notifications';
|
|
|
|
import { useWorkspacesStore } from '@/stores/workspaces';
|
2021-07-08 17:43:33 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const { t } = useI18n();
|
2022-04-30 00:47:37 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const { addConnection } = useConnectionsStore();
|
|
|
|
const { addNotification } = useNotificationsStore();
|
|
|
|
const workspacesStore = useWorkspacesStore();
|
2024-07-01 18:16:18 +02:00
|
|
|
const { isConsoleOpen } = storeToRefs(useConsoleStore());
|
2022-04-30 00:47:37 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const { connectWorkspace, selectWorkspace } = workspacesStore;
|
|
|
|
|
2022-07-04 12:27:04 +02:00
|
|
|
const clients = [
|
2022-06-04 18:37:16 +02:00
|
|
|
{ name: 'MySQL', slug: 'mysql' },
|
|
|
|
{ name: 'MariaDB', slug: 'maria' },
|
|
|
|
{ name: 'PostgreSQL', slug: 'pg' },
|
2022-11-02 14:18:50 +01:00
|
|
|
{ name: 'SQLite', slug: 'sqlite' },
|
2023-05-14 18:48:21 +02:00
|
|
|
{ name: 'Firebird SQL', slug: 'firebird' }
|
2022-07-04 12:27:04 +02:00
|
|
|
];
|
2021-07-08 17:43:33 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const connection = ref({
|
|
|
|
name: '',
|
|
|
|
client: 'mysql',
|
|
|
|
host: '127.0.0.1',
|
|
|
|
database: null,
|
|
|
|
databasePath: '',
|
|
|
|
port: null,
|
|
|
|
user: null,
|
|
|
|
password: '',
|
|
|
|
ask: false,
|
|
|
|
readonly: false,
|
|
|
|
uid: uidGen('C'),
|
|
|
|
ssl: false,
|
|
|
|
cert: '',
|
|
|
|
key: '',
|
|
|
|
ca: '',
|
|
|
|
ciphers: '',
|
|
|
|
untrustedConnection: false,
|
|
|
|
ssh: false,
|
|
|
|
sshHost: '',
|
|
|
|
sshUser: '',
|
|
|
|
sshPass: '',
|
2023-09-04 16:27:50 +02:00
|
|
|
sshPassphrase: null,
|
2022-06-04 18:37:16 +02:00
|
|
|
sshKey: '',
|
|
|
|
sshPort: 22,
|
2023-09-04 16:27:50 +02:00
|
|
|
sshKeepAliveInterval: 1800,
|
2022-06-04 18:37:16 +02:00
|
|
|
pgConnString: ''
|
|
|
|
}) as Ref<ConnectionParams & { pgConnString: string }>;
|
2021-07-08 17:43:33 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const firstInput: Ref<HTMLInputElement> = ref(null);
|
|
|
|
const isConnecting = ref(false);
|
|
|
|
const isTesting = ref(false);
|
|
|
|
const isAsking = ref(false);
|
|
|
|
const selectedTab = ref('general');
|
2021-07-08 17:43:33 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const clientCustomizations = computed(() => {
|
|
|
|
return customizations[connection.value.client];
|
|
|
|
});
|
2021-07-08 17:43:33 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const isBusy = computed(() => {
|
|
|
|
return isConnecting.value || isTesting.value;
|
|
|
|
});
|
2021-07-08 17:43:33 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
watch(() => connection.value.client, () => {
|
|
|
|
connection.value.user = clientCustomizations.value.defaultUser;
|
|
|
|
connection.value.port = clientCustomizations.value.defaultPort;
|
|
|
|
connection.value.database = clientCustomizations.value.defaultDatabase;
|
|
|
|
});
|
|
|
|
|
|
|
|
const setDefaults = () => {
|
|
|
|
connection.value.user = clientCustomizations.value.defaultUser;
|
|
|
|
connection.value.port = clientCustomizations.value.defaultPort;
|
|
|
|
connection.value.database = clientCustomizations.value.defaultDatabase;
|
|
|
|
};
|
2021-07-08 17:43:33 +02:00
|
|
|
|
2022-06-04 18:37:16 +02:00
|
|
|
const startTest = async () => {
|
|
|
|
isTesting.value = true;
|
|
|
|
|
|
|
|
if (connection.value.ask)
|
|
|
|
isAsking.value = true;
|
|
|
|
else {
|
|
|
|
try {
|
2022-06-05 17:57:44 +02:00
|
|
|
const res = await Connection.makeTest(connection.value);
|
2022-06-04 18:37:16 +02:00
|
|
|
if (res.status === 'error')
|
|
|
|
addNotification({ status: 'error', message: res.response.message || res.response.toString() });
|
|
|
|
else
|
2023-08-03 18:28:50 +02:00
|
|
|
addNotification({ status: 'success', message: t('connection.connectionSuccessfullyMade') });
|
2022-06-04 18:37:16 +02:00
|
|
|
}
|
|
|
|
catch (err) {
|
|
|
|
addNotification({ status: 'error', message: err.stack });
|
2021-07-08 17:43:33 +02:00
|
|
|
}
|
2022-06-04 18:37:16 +02:00
|
|
|
|
|
|
|
isTesting.value = false;
|
2021-07-08 17:43:33 +02:00
|
|
|
}
|
|
|
|
};
|
2022-06-04 18:37:16 +02:00
|
|
|
|
|
|
|
const continueTest = async (credentials: { user: string; password: string }) => { // if "Ask for credentials" is true
|
|
|
|
isAsking.value = false;
|
|
|
|
const params = Object.assign({}, connection.value, credentials);
|
|
|
|
|
|
|
|
try {
|
|
|
|
if (isConnecting.value) {
|
|
|
|
await connectWorkspace(params);
|
|
|
|
isConnecting.value = false;
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
const res = await Connection.makeTest(params);
|
|
|
|
if (res.status === 'error')
|
|
|
|
addNotification({ status: 'error', message: res.response.message || res.response.toString() });
|
|
|
|
else
|
2023-08-03 18:28:50 +02:00
|
|
|
addNotification({ status: 'success', message: t('connection.connectionSuccessfullyMade') });
|
2022-06-04 18:37:16 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
catch (err) {
|
|
|
|
addNotification({ status: 'error', message: err.stack });
|
|
|
|
}
|
|
|
|
|
|
|
|
isTesting.value = false;
|
|
|
|
};
|
|
|
|
|
2022-06-13 09:29:05 +02:00
|
|
|
const saveConnection = async () => {
|
|
|
|
await addConnection(connection.value);
|
2022-06-04 18:37:16 +02:00
|
|
|
selectWorkspace(connection.value.uid);
|
|
|
|
};
|
|
|
|
|
|
|
|
const closeAsking = () => {
|
|
|
|
isTesting.value = false;
|
|
|
|
isAsking.value = false;
|
|
|
|
};
|
|
|
|
|
|
|
|
const selectTab = (tab: string) => {
|
|
|
|
selectedTab.value = tab;
|
|
|
|
};
|
|
|
|
|
|
|
|
const toggleSsl = () => {
|
|
|
|
connection.value.ssl = !connection.value.ssl;
|
|
|
|
};
|
|
|
|
|
|
|
|
const toggleSsh = () => {
|
|
|
|
connection.value.ssh = !connection.value.ssh;
|
|
|
|
};
|
|
|
|
|
|
|
|
const pathSelection = (event: Event & {target: {files: {path: string}[]}}, name: keyof ConnectionParams) => {
|
|
|
|
const { files } = event.target;
|
|
|
|
if (!files.length) return;
|
|
|
|
|
2024-01-19 18:03:20 +01:00
|
|
|
(connection.value as unknown as Record<string, string>)[name] = files[0].path as string;
|
2022-06-04 18:37:16 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
const pathClear = (name: keyof ConnectionParams) => {
|
2024-01-19 18:03:20 +01:00
|
|
|
(connection.value as unknown as Record<string, string>)[name] = '';
|
2022-06-04 18:37:16 +02:00
|
|
|
};
|
|
|
|
|
|
|
|
setDefaults();
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
if (firstInput.value) firstInput.value.focus();
|
2022-08-17 10:00:23 +02:00
|
|
|
}, 200);
|
2021-07-08 17:43:33 +02:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.connection-panel {
|
|
|
|
margin-left: auto;
|
|
|
|
margin-right: auto;
|
2022-08-09 16:10:08 +02:00
|
|
|
margin-bottom: 0.5rem;
|
2022-07-20 10:41:44 +02:00
|
|
|
margin-top: 1.5rem;
|
2021-07-08 17:43:33 +02:00
|
|
|
|
|
|
|
.panel {
|
2022-03-24 17:34:24 +01:00
|
|
|
min-width: 450px;
|
2021-07-08 18:43:31 +02:00
|
|
|
border-radius: $border-radius;
|
2021-07-08 17:43:33 +02:00
|
|
|
|
|
|
|
.panel-body {
|
|
|
|
flex: initial;
|
|
|
|
}
|
|
|
|
|
|
|
|
.panel-footer {
|
|
|
|
display: flex;
|
|
|
|
justify-content: flex-end;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|