Record add and refresh

joker/src/components/DNS.vue

@@ -7,9 +7,26 @@
                     <button @click.stop="$router.go(-1)" class="btn btn-info">Back</button>
                     &nbsp;
                 </span>
-                <button class="btn btn-danger">Add</button>
+                <b-btn v-b-modal.modalPrevent variant="danger">Add</b-btn>
             </p>
         </div>
+        <b-modal id="modalPrevent"
+                 ref="modal"
+                 title="Add a record"
+                 @ok="handleOk">
+            <form @submit.stop.prevent="handleSubmit">
+                <b-form-group id="recordName">
+                    <b-form-input type="text"
+                                  placeholder="Record name"
+                                  v-model="name"></b-form-input>
+                </b-form-group>
+                <b-form-group id="recordValue">
+                    <b-form-input type="text"
+                                  placeholder="Record IP"
+                                  v-model="value"></b-form-input>
+                </b-form-group>
+            </form>
+        </b-modal>
         <div class="col-12">
             <b-table id="records" striped bordered hover fixed :items="items" :fields="fields" v-on:row-clicked="rowClicked" v-on:row-dblclicked="edit" head-variant="dark" sort-by="domain">
                 <template slot="ip" slot-scope="row">
@@ -38,6 +55,8 @@
 
     let data = {
         domain: null,
+        name: '',
+        value: '',
         items: [],
         fields: [
             {key: "domain", label: 'Domain', sortable: true},
@@ -50,7 +69,54 @@
         name: 'DNS',
         props: ['base'],
         methods: {
-            domainProvider: function () {
+            handleOk (evt) {
+                // Prevent modal from closing
+                evt.preventDefault()
+
+                if (!this.name || !this.value) {
+                    alert('Please enter a valid record name and value')
+                } else {
+                    this.handleSubmit()
+                }
+            },
+            handleSubmit () {
+                if (!this.validateHostname(this.name)) {
+                    alert('Please enter a valid hostname.');
+                    return;
+                }
+
+                if (!this.validateIPAddress(this.value)) {
+                    alert('Please enter a valid IP address.');
+                    return;
+                }
+
+                axios.post('/update', {
+                    domain: this.name,
+                    ip: this.value
+                }).then(() => {
+                    return axios.get('/info');
+                }).then((response) => {
+                    data.items = response.data;
+                });
+
+                this.name = '';
+                this.value = '';
+
+                this.$refs.modal.hide()
+            },
+            validateHostname: function(host) {
+                if (/^(([a-zA-Z0-9]|[a-zA-Z0-9][a-zA-Z0-9\-]*[a-zA-Z0-9])\.)*([A-Za-z0-9]|[A-Za-z0-9][A-Za-z0-9\-]*[A-Za-z0-9])$/.test(host)) {
+                    return true;
+                }
+
+                return false;
+            },
+            validateIPAddress: function(ip) {
+                if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(ip)) {
+                    return true;
+                }
+
+                return false;
             },
             rowClicked: function (item) {
                 if (item.itemCount > 1) {

stack.yml

@@ -0,0 +1,25 @@
+version: '3'
+
+services:
+  godns:
+    image: registry.git.meow.tf/tyler/godns:latest
+    environment:
+      - REDIS_ADDR=redis
+    networks:
+      - godns
+  joker:
+    image: registry.git.meow.tf/tyler/joker:latest
+    ports:
+      - 8080:8080
+    environment:
+      - REDIS_SERVER=redis
+    networks:
+      - godns
+  redis:
+    image: registry.git.meow.tf/sopine-docker/services/redis:latest
+    networks:
+      - godns
+
+networks:
+  godns:
+    driver: overlay