antares/src/renderer/components/DatabaseConnectPanel.vue

<template>
   <div class="columns">
      <div class="column col-12 empty text-light">
         <div class="empty-icon">
            <i class="material-icons md-48">cloud_off</i>
         </div>
         <p class="empty-title h5">
            Disconnected
         </p>
         <div class="empty-action">
            <button
               class="btn btn-success"
               :class="{'loading': isConnecting}"
               @click="startConnection"
            >
               Connect
            </button>
         </div>
      </div>
      <ModalAskCredentials
         v-if="isAsking"
         @closeAsking="closeAsking"
         @credentials="continueTest"
      />
   </div>
</template>

<script>
import { mapActions } from 'vuex';
import ModalAskCredentials from '@/components/ModalAskCredentials';

export default {
   name: 'DatabaseConnectPanel',
   components: {
      ModalAskCredentials
   },
   props: {
      connection: Object
   },
   data () {
      return {
         isConnecting: false,
         isAsking: false
      };
   },
   methods: {
      ...mapActions({
         addNotification: 'notifications/addNotification',
         connectWorkspace: 'workspaces/connectWorkspace'
      }),
      async startConnection () {
         this.isConnecting = true;

         if (this.connection.ask)
            this.isAsking = true;
         else {
            await this.connectWorkspace(this.connection);
            this.isConnecting = false;
         }
      },
      async continueTest (credentials) { // if "Ask for credentials" is true
         this.isAsking = false;
         const params = Object.assign({}, this.connection, credentials);
         await this.connectWorkspace(params);
         this.isConnecting = false;
      },
      closeAsking () {
         this.isAsking = false;
         this.isConnecting = false;
      }
   }
};
</script>

<style scoped>
   .empty{
      height: 100%;
      border-radius: 0;
      background: transparent;
      display: flex;
      flex-direction: column;
      justify-content: center;
   }
</style>