mirror of
https://github.com/Fabio286/antares.git
synced 2024-12-22 22:28:16 +01:00
Connection test
This commit is contained in:
parent
8ded79017b
commit
1e025cdaf6
868
package-lock.json
generated
868
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -4,6 +4,7 @@
|
||||
"version": "0.0.0",
|
||||
"description": "A multi-platform easy to use SQL client. ",
|
||||
"license": "MIT",
|
||||
"repository": "https://github.com/Fabio286/antares.git",
|
||||
"scripts": {
|
||||
"dev": "electron-webpack dev",
|
||||
"compile": "electron-webpack",
|
||||
@ -29,6 +30,8 @@
|
||||
"codemirror": "^5.53.2",
|
||||
"knex": "^0.21.1",
|
||||
"material-design-icons": "^3.0.1",
|
||||
"mssql": "^6.2.0",
|
||||
"mysql": "^2.18.1",
|
||||
"source-map-support": "^0.5.16",
|
||||
"spectre.css": "^0.5.8",
|
||||
"vue-i18n": "^8.17.4",
|
||||
@ -49,7 +52,7 @@
|
||||
"eslint-plugin-promise": "^4.2.1",
|
||||
"eslint-plugin-standard": "^4.0.1",
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"node-sass": "^4.14.0",
|
||||
"node-sass": "^4.14.1",
|
||||
"sass-loader": "^8.0.2",
|
||||
"vue": "^2.6.11",
|
||||
"webpack": "^4.43.0"
|
||||
|
||||
@ -5,6 +5,8 @@ import * as path from 'path';
|
||||
import { format as formatUrl } from 'url';
|
||||
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer';
|
||||
|
||||
import ipcApi from './ipc-api';
|
||||
|
||||
const isDevelopment = process.env.NODE_ENV !== 'production';
|
||||
process.env.ELECTRON_DISABLE_SECURITY_WARNINGS = 'true';
|
||||
|
||||
@ -59,6 +61,9 @@ function createMainWindow () {
|
||||
});
|
||||
});
|
||||
|
||||
// Initialize ipcApi
|
||||
ipcApi();
|
||||
|
||||
return window;
|
||||
};
|
||||
|
||||
|
||||
24
src/main/ipc-api/connection.js
Normal file
24
src/main/ipc-api/connection.js
Normal file
@ -0,0 +1,24 @@
|
||||
|
||||
import { ipcMain } from 'electron';
|
||||
import knex from 'knex';
|
||||
|
||||
export default () => {
|
||||
ipcMain.handle('testConnection', async (event, conn) => {
|
||||
try {
|
||||
await knex({
|
||||
client: conn.client,
|
||||
connection: {
|
||||
host: conn.host,
|
||||
port: +conn.port,
|
||||
user: conn.user,
|
||||
password: conn.password
|
||||
}
|
||||
}).raw('SELECT 1+1 AS result');
|
||||
|
||||
return { status: 'success' };
|
||||
}
|
||||
catch (err) {
|
||||
return { status: 'error', response: err };
|
||||
}
|
||||
});
|
||||
};
|
||||
5
src/main/ipc-api/index.js
Normal file
5
src/main/ipc-api/index.js
Normal file
@ -0,0 +1,5 @@
|
||||
import connection from './connection';
|
||||
|
||||
export default () => {
|
||||
connection();
|
||||
};
|
||||
@ -11,7 +11,7 @@
|
||||
<TheAppWelcome @newConn="showNewConnModal" />
|
||||
</div>
|
||||
<TheFooter />
|
||||
<NewConnectionModal :is-opened="isNewConnModal" />
|
||||
<NewConnectionModal v-if="isNewConnModal" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -62,7 +62,7 @@ export default {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main-content{
|
||||
/* background: #232524; */
|
||||
}
|
||||
/* #main-content{
|
||||
background: #232524;
|
||||
} */
|
||||
</style>
|
||||
|
||||
78
src/renderer/components/BaseToast.vue
Normal file
78
src/renderer/components/BaseToast.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<div
|
||||
:style="{display: isVisible ? 'flex' : 'none'}"
|
||||
class="toast mt-2"
|
||||
:class="toastStatus.className"
|
||||
>
|
||||
<span class="p-vcentered text-left" v-html="`${toastStatus.iconTag} ${message}`" />
|
||||
<button class="btn btn-clear" @click="hideToast" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'BaseToast',
|
||||
props: {
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
isVisible: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
toastStatus () {
|
||||
let className = '';
|
||||
let iconTag = '';
|
||||
switch (this.status) {
|
||||
case 'success':
|
||||
className = 'toast-success';
|
||||
iconTag = '<i class="material-icons mr-1">done</i>';
|
||||
break;
|
||||
case 'error':
|
||||
className = 'toast-error';
|
||||
iconTag = '<i class="material-icons mr-1">error</i>';
|
||||
break;
|
||||
case 'warning':
|
||||
className = 'toast-warning';
|
||||
iconTag = '<i class="material-icons mr-1">warning</i>';
|
||||
break;
|
||||
case 'primary':
|
||||
className = 'toast-primary';
|
||||
iconTag = '<i class="material-icons mr-1">info_outline</i>';
|
||||
break;
|
||||
}
|
||||
|
||||
return { className, iconTag };
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
message: function () {
|
||||
if (this.message)
|
||||
this.isVisible = true;
|
||||
else
|
||||
this.isVisible = false;
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
hideToast () {
|
||||
this.isVisible = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style scoped>
|
||||
.toast{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
user-select: text;
|
||||
word-break: break-all;
|
||||
}
|
||||
</style>
|
||||
@ -1,20 +1,119 @@
|
||||
<template>
|
||||
<div class="modal" :class="{'active': isOpened}">
|
||||
<div class="modal active">
|
||||
<a class="modal-overlay c-hand" @click="closeModal" />
|
||||
<div class="modal-container">
|
||||
<div class="modal-header">
|
||||
<a class="btn btn-clear float-right c-hand" @click="closeModal" />
|
||||
<div class="modal-title h5">
|
||||
<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">
|
||||
<!-- content here -->
|
||||
<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">
|
||||
...
|
||||
<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>
|
||||
@ -22,9 +121,14 @@
|
||||
|
||||
<script>
|
||||
import { mapActions } from 'vuex';
|
||||
import { ipcRenderer } from 'electron';
|
||||
import BaseToast from '@/components/BaseToast';
|
||||
|
||||
export default {
|
||||
name: 'NewConnectionModal',
|
||||
components: {
|
||||
BaseToast
|
||||
},
|
||||
props: {
|
||||
isOpened: {
|
||||
type: Boolean,
|
||||
@ -33,17 +137,54 @@ export default {
|
||||
},
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
.modal-container{
|
||||
max-width: 450px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -18,7 +18,7 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
background: #272727;
|
||||
background: $bg-color-gray;
|
||||
margin-bottom: $footer-height;
|
||||
box-shadow: 0 0 1px 0px #000;
|
||||
z-index: 8;
|
||||
|
||||
@ -42,7 +42,7 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #3f3f3f;
|
||||
background: $bg-color-light;
|
||||
padding: .5rem 0;
|
||||
margin-bottom: $footer-height;
|
||||
box-shadow: 0 0 1px 0px #000;
|
||||
|
||||
@ -1,7 +1,10 @@
|
||||
/*Colors*/
|
||||
$body-bg: #232524;
|
||||
$body-bg: #1d1d1d;
|
||||
$body-font-color: #fff;
|
||||
$primary-color: #e36929;
|
||||
$bg-color: #232524;
|
||||
$bg-color: #1d1d1d;
|
||||
$bg-color-light: #3f3f3f;
|
||||
$bg-color-gray: #272727;
|
||||
|
||||
/*Sizes*/
|
||||
$settingbar-width: 4rem;
|
||||
|
||||
@ -1,3 +1,65 @@
|
||||
@import "variables";
|
||||
@import "mdi-additions";
|
||||
@import "~spectre.css/src/spectre";
|
||||
@import "~spectre.css/src/spectre";
|
||||
|
||||
body{
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/*Additions*/
|
||||
@include margin-variant(3, $unit-3);
|
||||
@include margin-variant(4, $unit-4);
|
||||
@include padding-variant(3, $unit-3);
|
||||
@include padding-variant(4, $unit-4);
|
||||
|
||||
.btn.btn-gray{
|
||||
color: #fff;
|
||||
background: $bg-color-gray;
|
||||
|
||||
&:hover{
|
||||
background: $bg-color;
|
||||
}
|
||||
}
|
||||
|
||||
.p-vcentered{
|
||||
display: flex!important;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/*Override*/
|
||||
.modal-overlay,
|
||||
.modal.active .modal-overlay{
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.modal-container{
|
||||
box-shadow: 0 0 1px 0px #000;
|
||||
padding: 0;
|
||||
background: $bg-color;
|
||||
|
||||
.modal-header{
|
||||
padding: .4rem .8rem;
|
||||
text-transform: uppercase;
|
||||
background: $bg-color-gray;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.form-select{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-select,
|
||||
.form-select:not([multiple]):not([size]),
|
||||
.form-input,
|
||||
.form-checkbox .form-icon,
|
||||
.form-radio .form-icon{
|
||||
border-color: $bg-color-light;
|
||||
background: $bg-color-gray;
|
||||
}
|
||||
|
||||
.form-select:not([multiple]):not([size]):focus{
|
||||
border-color: $primary-color;
|
||||
}
|
||||
@ -16,6 +16,7 @@ export default {
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
// Modals
|
||||
showNewConnModal ({ commit }) {
|
||||
commit('showNewConnModal');
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user