Connection test

package.json

@@ -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"

src/main/index.js

@@ -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;
 };
 

src/main/ipc-api/connection.js

@@ -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 };
+      }
+   });
+};

src/main/ipc-api/index.js

@@ -0,0 +1,5 @@
+import connection from './connection';
+
+export default () => {
+   connection();
+};

src/renderer/App.vue

@@ -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{
+   /* #main-content{
-      /* background: #232524; */
+      background: #232524;
-   }
+   } */
 </style>

src/renderer/components/BaseToast.vue

@@ -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>

src/renderer/components/NewConnectionModal.vue

@@ -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">
+         <div class="modal-header text-light">
-            <a class="btn btn-clear float-right c-hand" @click="closeModal" />
+            <div class="modal-title h6">
-            <div class="modal-title h5">
                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>

src/renderer/components/TheExploreBar.vue

@@ -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;

src/renderer/components/TheSettingBar.vue

@@ -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;

src/renderer/scss/_variables.scss

@@ -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;

src/renderer/scss/main.scss

@@ -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;
+}

src/renderer/store/modules/connections.store.js

@@ -16,6 +16,7 @@ export default {
       }
    },
    actions: {
+      // Modals
       showNewConnModal ({ commit }) {
          commit('showNewConnModal');
       },