Direct DB Connection page

lib/assets/javascripts/new-dashboard/i18n/locales/en.json

@@ -752,5 +752,14 @@
       "headerText": "Share current map via URL",
       "close": "close"
     }
+  },
+  "InputList": {
+    "add": "Add",
+    "delete": "Delete"
+  },
+  "DBConnectionPage": {
+    "errors": {
+      "ipNotValid": "IP is not valid"
+    }
   }
 }

lib/assets/javascripts/new-dashboard/pages/DBConnection.vue

@@ -0,0 +1,68 @@
+<template>
+  <Page>
+    <InputList
+      :values="ipList"
+      :fieldValidator="checkIfIPIsValid"
+      @addElement="onIPsChanged"
+      @removeElement="onIPsChanged"></InputList>
+  </Page>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import isIP from 'is-ip';
+import Page from 'new-dashboard/components/Page';
+import InputList from 'new-dashboard/components/forms/InputList';
+
+export default {
+  name: 'DBConnectionPage',
+  components: {
+    Page,
+    InputList
+  },
+
+  data () {
+    return {
+      ipList: []
+    };
+  },
+
+  computed: mapState({
+    client: state => state.client
+  }),
+
+  beforeMount () {
+    this.getCurrentIPs();
+  },
+
+  methods: {
+    getCurrentIPs () {
+      this.client
+        .directDBConnection()
+        .getIPs((_, _1, ipList) => {
+          this.ipList = ipList.ips.split(',');
+        });
+    },
+
+    checkIfIPIsValid (value) {
+      const isValid = isIP(value);
+      let errorText = '';
+
+      if (!isValid) {
+        errorText = this.$t('DBConnectionPage.errors.ipNotValid');
+      }
+
+      return { isValid, errorText };
+    },
+
+    onIPsChanged (IPs) {
+      this.client
+        .directDBConnection()
+        .setIPs(
+          IPs.join(','),
+          () => { console.log('Successful!'); }
+        );
+    }
+  }
+};
+</script>

lib/assets/javascripts/new-dashboard/router/index.js

@@ -10,6 +10,7 @@ import SearchRoutes from './routes/search';
 import NotificationRoutes from './routes/notifications';
 import OAuthRoutes from './routes/oauth_apps';
 import ConnectedAppsRoutes from './routes/connected_apps';
+import DBConnectionRoutes from './routes/db_connection';
 
 Vue.use(Router);
 
@@ -33,7 +34,8 @@ const router = new Router({
     ...SearchRoutes,
     ...NotificationRoutes,
     ...OAuthRoutes,
-    ...ConnectedAppsRoutes
+    ...ConnectedAppsRoutes,
+    ...DBConnectionRoutes
   ],
 
   scrollBehavior () {