Recordlist.vue

<template>

  <div class="container contents">
    <div className="row">
      <div className="col-md-12">
        <h2>API Connector</h2>
            <button id="add-new" type="button" class="btn btn-success pull-right" @click="openNewModal">
              Add Connector
            </button>
        <div className="panel with-nav-tabs panel-danger">
          <table class="table table-bordered">
            <thead>
              <tr>
                <th>URL</th>
                <th>API Key</th>
                <th>Rollbase Username</th>
                <th>Rollbase Password</th>
                <th>Action</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="connector in connectors" :key="connector['.key']">
                <td> <a v-bind:href="connector.url">{{ connector.url | snippet }}</a> </td>
                <td> {{ connector.apikey | snippet }} </td>
                <td> {{ connector.username }} </td>
                <td> {{ connector.password }} </td>
                <td>
                  <center>
                    <button class="btn btn-primary btn-xs" data-title="Edit" data-toggle="modal" data-target="#edit" ><span class="glyphicon glyphicon-pencil"></span></button>
                    <button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete" v-on:click="removeBook(connector.id)"><span class="glyphicon glyphicon-trash"></span></button>
                  </center>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <div class="modal fade" id="add-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">&times;</span>
              <span class="sr-only">Close</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">
              Add New API Connector
            </h4>
          </div>

          <div class="modal-body" :class="{ 'error' : hasErrors }">
            <form class="form-horizontal" role="form">
              <div class="form-group">
                <label  class="col-sm-2 control-label" accesskey=""for="inputEmail3">URL</label>
                <div class="col-sm-10">
                  <input type="text" v-model="url" class="form-control" id="url" placeholder="URL"/>
                </div>
              </div>

              <div class="form-group">
                <label  class="col-sm-2 control-label" accesskey=""for="inputEmail3">Username</label>
                <div class="col-sm-10">
                  <input type="text" v-model="username" class="form-control" id="username" placeholder="Email"/>
                </div>
              </div>

              <div class="form-group">
                <label class="col-sm-2 control-label" for="inputPassword3" >Password</label>
                <div class="col-sm-10">
                  <input type="text" v-model="password" class="form-control" id="password" placeholder="Password"/>
                </div>
              </div>
            </form>
          </div>
          <div class="alert alert-danger" v-if="hasErrors">
            <p v-for="error in errors">
              {{ error }}
            </p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              Cancel
            </button>
            <button type="button" class="btn btn-primary" @click="addConnector">
              Save Connector
            </button>
          </div>
        </div>
      </div>
    </div>

  </div>

</template>

<script>

  export default {
    name: 'recordList',
    data () {
      return {
        connectors: [],
        url: '',
        apikey: '',
        username: '',
        password: '',
        connectorsRef: firebase.database().ref('connectors'),
        errors: []
      }
    },
    computed: {
      hasErrors () {
        return this.errors.length > 0
      }
    },
    mounted () {
      this.viewConnectors();
    },
    filters: {
      truncate: function(string, value) {
        return string.substring(0, value) + '...';
      }
    },
    methods: {
      openNewModal () {
        $('#add-modal').modal('show')
      },
      addConnector () {
        this.errors = []

        if ( this.isFormValid() ) {
          let key = this.connectorsRef.push().key
          this.apikey = this.generateHaskKey()
          let newConnector = { id : key, url : this.url, apikey : this.apikey, username : this.username, password : this.password }

          this.connectorsRef.child(key).update(newConnector).then( () => {
            this.url = ''
            this.apikey = ''
            this.username = ''
            this.password = ''
            $('#add-modal').modal('hide')
          }).catch( error => {
            this.errors.push(error.message)
          })
        }

      },
      generateHaskKey () {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for( var i=0; i < 100; i++ )
            text += possible.charAt(Math.floor(Math.random() * possible.length));

        return text;
      },
      removeBook: function (connector) {
        this.connectorsRef.child(connector).remove()
        console.table(this.connectors);
      },
      viewConnectors () {
        this.connectorsRef.on('child_added', snap => {
          this.connectors.push(snap.val())
        })
      },
      isEmpty () {
        if ( this.url.length == 0 || this.username.length == 0 || this.password.length == 0 ) {
          return true;
        }
        return false;
      },
      passMatch () {
        if ( this.password.length < 6 ) {
          return false;
        }
        return true;
      },
      isFormValid () {
        if ( this.isEmpty() ) {
          this.errors.push('Must not be empty');
          return false;
        }
        if ( !this.passMatch() ) {
          this.errors.push('Not less than 6 characters');
          return false;
        }
        return true;
      }
    }
  }

</script>


<style scoped>
.contents {
  margin-top: 5rem;
}
table {
  width: 100%
}
th {
  text-align: center;
}
#add-new {
  margin-bottom: 10px
}
</style>