mirror of
https://github.com/Fabio286/antares.git
synced 2025-06-05 21:59:22 +02:00
Additions
This commit is contained in:
77
src/renderer/components/ModalAskCredentials.vue
Normal file
77
src/renderer/components/ModalAskCredentials.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div class="modal active modal-sm">
|
||||
<a class="modal-overlay" />
|
||||
<div class="modal-container">
|
||||
<div class="modal-header text-light">
|
||||
<div class="modal-title h6">
|
||||
Credentials
|
||||
</div>
|
||||
<a class="btn btn-clear c-hand" @click="closeModal" />
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="content">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label">User:</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input
|
||||
v-model="credentials.user"
|
||||
class="form-input"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3">
|
||||
<label class="form-label">Password:</label>
|
||||
</div>
|
||||
<div class="col-9">
|
||||
<input
|
||||
v-model="credentials.password"
|
||||
class="form-input"
|
||||
type="password"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer text-light">
|
||||
<button class="btn btn-primary mr-2" @click="sendCredentials">
|
||||
Send
|
||||
</button>
|
||||
<button class="btn btn-link" @click="closeModal">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ModalAskCredentials',
|
||||
data () {
|
||||
return {
|
||||
credentials: {
|
||||
user: '',
|
||||
password: ''
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
closeModal () {
|
||||
this.$emit('closeAsking');
|
||||
},
|
||||
sendCredentials () {
|
||||
this.$emit('credentials', this.credentials);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
224
src/renderer/components/ModalNewConnection.vue
Normal file
224
src/renderer/components/ModalNewConnection.vue
Normal file
@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<div class="modal active">
|
||||
<a class="modal-overlay c-hand" @click="closeModal" />
|
||||
<div class="modal-container">
|
||||
<div class="modal-header text-light">
|
||||
<div class="modal-title h6">
|
||||
Create a new connection
|
||||
</div>
|
||||
<a class="btn btn-clear c-hand" @click="closeModal" />
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="content">
|
||||
<form class="form-horizontal">
|
||||
<fieldset class="m-0" :disabled="isTesting">
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">Client:</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<select v-model="connection.client" class="form-select">
|
||||
<option value="mysql">
|
||||
MySQL/MariaDB
|
||||
</option>
|
||||
<option value="mssql">
|
||||
Microsoft SQL
|
||||
</option>
|
||||
<option value="pg">
|
||||
PostgreSQL
|
||||
</option>
|
||||
<option value="oracledb">
|
||||
Oracle DB
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">Host name/IP:</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<input
|
||||
v-model="connection.host"
|
||||
class="form-input"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">Port:</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<input
|
||||
v-model="connection.port"
|
||||
class="form-input"
|
||||
type="number"
|
||||
min="1"
|
||||
max="65535"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">User:</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<input
|
||||
v-model="connection.user"
|
||||
class="form-input"
|
||||
type="text"
|
||||
:disabled="connection.ask"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">Password:</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<input
|
||||
v-model="connection.password"
|
||||
class="form-input"
|
||||
type="password"
|
||||
:disabled="connection.ask"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12" />
|
||||
<div class="col-9 col-sm-12">
|
||||
<label class="form-checkbox form-inline">
|
||||
<input v-model="connection.ask" type="checkbox"><i class="form-icon" /> Ask for credentials
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer text-light">
|
||||
<BaseToast
|
||||
class="mb-2"
|
||||
:message="toast.message"
|
||||
:status="toast.status"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-gray mr-2"
|
||||
:class="{'loading': isTesting}"
|
||||
@click="startTest"
|
||||
>
|
||||
Test connection
|
||||
</button>
|
||||
<button class="btn btn-primary mr-2" @click="saveNewConnection">
|
||||
Save
|
||||
</button>
|
||||
<button class="btn btn-link" @click="closeModal">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<ModalAskCredentials
|
||||
v-if="isAsking"
|
||||
@closeAsking="closeAsking"
|
||||
@credentials="continueTest"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
import { ipcRenderer } from 'electron';
|
||||
import ModalAskCredentials from '@/components/ModalAskCredentials';
|
||||
import BaseToast from '@/components/BaseToast';
|
||||
|
||||
export default {
|
||||
name: 'ModalNewConnection',
|
||||
components: {
|
||||
ModalAskCredentials,
|
||||
BaseToast
|
||||
},
|
||||
props: {
|
||||
isOpened: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
connection: {
|
||||
client: 'mysql',
|
||||
host: '127.0.0.1',
|
||||
port: '3306',
|
||||
user: 'root',
|
||||
password: '',
|
||||
ask: false
|
||||
},
|
||||
toast: {
|
||||
status: '',
|
||||
message: ''
|
||||
},
|
||||
isTesting: false,
|
||||
isAsking: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
closeModal: 'connections/hideNewConnModal',
|
||||
addConnection: 'connections/addConnection'
|
||||
}),
|
||||
async startTest () {
|
||||
this.isTesting = true;
|
||||
this.toast = {
|
||||
status: '',
|
||||
message: ''
|
||||
};
|
||||
|
||||
if (this.connection.ask)
|
||||
this.isAsking = true;
|
||||
else
|
||||
await this.invokeTest(this.connection);
|
||||
},
|
||||
async continueTest (credentials) { // if "Ask for credentials" is true
|
||||
this.isAsking = false;
|
||||
const params = Object.assign({}, this.connection, credentials);
|
||||
await this.invokeTest(params);
|
||||
},
|
||||
invokeTest (params) {
|
||||
return new Promise((resolve, reject) => {
|
||||
ipcRenderer.invoke('testConnection', params).then(res => {
|
||||
if (res.status === 'error') {
|
||||
this.toast = {
|
||||
status: 'error',
|
||||
message: res.response.message
|
||||
};
|
||||
}
|
||||
else {
|
||||
this.toast = {
|
||||
status: 'success',
|
||||
message: 'Connection successifully made!'
|
||||
};
|
||||
}
|
||||
|
||||
this.isTesting = false;
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
},
|
||||
saveNewConnection () {
|
||||
this.addConnection(this.connection);
|
||||
this.closeModal();
|
||||
},
|
||||
closeAsking () {
|
||||
this.isAsking = false;
|
||||
this.isTesting = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-container{
|
||||
max-width: 450px;
|
||||
}
|
||||
</style>
|
||||
@ -1,190 +0,0 @@
|
||||
<template>
|
||||
<div class="modal active">
|
||||
<a class="modal-overlay c-hand" @click="closeModal" />
|
||||
<div class="modal-container">
|
||||
<div class="modal-header text-light">
|
||||
<div class="modal-title h6">
|
||||
Create a new connection
|
||||
</div>
|
||||
<a class="btn btn-clear c-hand" @click="closeModal" />
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="content">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">Client:</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<select v-model="connection.client" class="form-select">
|
||||
<option value="mysql">
|
||||
MySQL/MariaDB
|
||||
</option>
|
||||
<option value="mssql">
|
||||
Microsoft SQL
|
||||
</option>
|
||||
<option value="pg">
|
||||
PostgreSQL
|
||||
</option>
|
||||
<option value="oracledb">
|
||||
Oracle DB
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">Host name/IP:</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<input
|
||||
v-model="connection.host"
|
||||
class="form-input"
|
||||
type="text"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">Port:</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<input
|
||||
v-model="connection.port"
|
||||
class="form-input"
|
||||
type="number"
|
||||
min="1"
|
||||
max="65535"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">User:</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<input
|
||||
v-model="connection.user"
|
||||
class="form-input"
|
||||
type="text"
|
||||
:disabled="connection.ask"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12">
|
||||
<label class="form-label">Password:</label>
|
||||
</div>
|
||||
<div class="col-9 col-sm-12">
|
||||
<input
|
||||
v-model="connection.password"
|
||||
class="form-input"
|
||||
type="password"
|
||||
:disabled="connection.ask"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-3 col-sm-12" />
|
||||
<div class="col-9 col-sm-12">
|
||||
<label class="form-checkbox form-inline">
|
||||
<input v-model="connection.ask" type="checkbox"><i class="form-icon" /> Ask for credentials
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer text-light">
|
||||
<BaseToast
|
||||
class="mb-2"
|
||||
:message="toast.message"
|
||||
:status="toast.status"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-gray mr-2"
|
||||
:class="{'loading': isTesting}"
|
||||
@click="testConnection"
|
||||
>
|
||||
Test connection
|
||||
</button>
|
||||
<button class="btn btn-primary mr-2">
|
||||
Save
|
||||
</button>
|
||||
<button class="btn btn-link" @click="closeModal">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
import { ipcRenderer } from 'electron';
|
||||
import BaseToast from '@/components/BaseToast';
|
||||
|
||||
export default {
|
||||
name: 'NewConnectionModal',
|
||||
components: {
|
||||
BaseToast
|
||||
},
|
||||
props: {
|
||||
isOpened: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
connection: {
|
||||
client: 'mysql',
|
||||
host: '127.0.0.1',
|
||||
port: '3306',
|
||||
user: 'root',
|
||||
password: '',
|
||||
ask: false
|
||||
},
|
||||
toast: {
|
||||
status: '',
|
||||
message: ''
|
||||
},
|
||||
isTesting: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
closeModal: 'connections/hideNewConnModal'
|
||||
}),
|
||||
testConnection () {
|
||||
this.isTesting = true;
|
||||
this.toast = {
|
||||
status: '',
|
||||
message: ''
|
||||
};
|
||||
|
||||
ipcRenderer.invoke('testConnection', this.connection).then(res => {
|
||||
this.isTesting = false;
|
||||
if (res.status === 'error') {
|
||||
this.toast = {
|
||||
status: 'error',
|
||||
message: res.response.message
|
||||
};
|
||||
}
|
||||
else {
|
||||
this.toast = {
|
||||
status: 'success',
|
||||
message: 'Connection successifully made!'
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-container{
|
||||
max-width: 450px;
|
||||
}
|
||||
</style>
|
||||
@ -2,6 +2,14 @@
|
||||
<div id="settingbar" class="container">
|
||||
<div class="settingbar-top-elements">
|
||||
<ul class="settingbar-elements">
|
||||
<li
|
||||
v-for="(connection, key) in connections"
|
||||
:key="key"
|
||||
class="settingbar-element btn btn-link tooltip tooltip-right p-0"
|
||||
:data-tooltip="`${connection.user}@${connection.host}:${connection.port}`"
|
||||
>
|
||||
<i class="dbi" :class="`dbi-${connection.client}`" />
|
||||
</li>
|
||||
<li
|
||||
class="settingbar-element btn btn-link tooltip tooltip-right"
|
||||
data-tooltip="Add connection"
|
||||
@ -23,10 +31,15 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
import { mapActions, mapGetters } from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'TheSettingBar',
|
||||
computed: {
|
||||
...mapGetters({
|
||||
connections: 'connections/getConnections'
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
...mapActions({
|
||||
showNewConnModal: 'connections/showNewConnModal'
|
||||
@ -50,8 +63,18 @@ export default {
|
||||
|
||||
.settingbar-elements{
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.settingbar-element{
|
||||
height: initial;
|
||||
|
||||
.settingbar-element-icon{
|
||||
width: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user