settings
|- panel ( or 'category' if you like )
  |- name
  |- text
  |- icon
  |- isOk
  |- fields
    |- name
    |- text
    |- isOk
    |- value

<template>
  <section class="section">
    <div class="conatiner">

      <div class="columns">
        <nav class="settings-list panel column is-one-quarter">
          <p class="panel-heading">
            <i class="fas fa-cogs"></i> settings
          </p>
          <a v-for="panel in settings" class="panel-block" @click=" currentPanel = panel " :class="{ 'is-active': currentPanel == panel }">
            <i :class=" panel.icon "></i> &nbsp; {{ panel.text }}
          </a>
        </nav>

        <nav v-if="currentPanel != null" class="settings-view panel column">
          <p class="panel-heading">
            {{ settings[ currentPanel ].text }}
          </p>
          <div class="panel-block panel-content">
            <div v-for=" field in currentPanel.fields " class="settings-field">
              <label class="label subtitle is-4">{{ field.text }}</label>
              <input class="input title is-4" :class=" !field.isOk " :disabled=" field.name == 'username' " type="text" v-model=" field.value ">
            </div>
          </div>
          <div class="panel-block panel-footer">
            <a class="button is-success" :class=" { 'is-loading': isSaving } " :disabled=" !settings[ currentPanel ].isOk "><i class="fas fa-save"></i></a>
          </div>
        </nav>
      </div>

    </div>
  </section>
</template>

<script>
let sha1 = require('sha1')

function numberWithSpaces(x) {
    return x.toString().replace(/B(?=(d{3})+(?!d))/g, " ")
}

export default {
  name: 'settings',
  data () {
    return {
      title: 'Innstillinger',
      currentPanel: null,
      isSaving: false,
      settings: {
        personalDetails: {
          name: 'personalDetails',
          text: 'Personal details',
          icon: 'fas fa-user',
          isOk: true,
          fields: {
            username: {
              name: 'username',
              text: 'Username',
              value: 'mrMilkSteak69', //this.$store.state.users.user.username,
              isOk: true
            },
            firstname: {
              name: 'firstname',
              text: 'First name',
              value: 'Charlie', //this.$store.state.users.user.firstname,
              isOk: true
            },
            lastname: {
              name: 'lastname',
              text: 'Last name',
              value: 'Kelly', //this.$store.state.users.user.lastname,
              isOk: true
            }
          }
        },
        newPassword: {
          name: 'newPassword',
          text: 'New password',
          icon: 'fas fa-key',
          isOk: false,
          fields: {
            oldPassword: {
              name: 'oldPassword',
              text: 'Old password',
              value: null,
              isOk: true
            },
            newPassword: {
              name: 'newPassword',
              text: 'New password',
              value: null,
              isOk: true
            }
          }
        }
      }
    }
  },
  methods: {
    save: function () {

    }
  },
  beforeMount: function() {
    this.$store.dispatch( 'users/check').then( response => {
      if (!response) {
        this.$router.push("/login")
      }
    }, error => {
      console.log(error)
      this.$router.push("/login")
    })
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@import "../assets/theme";
@import "../assets/utils";
h1 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
.green {
  color: green;
}
.red {
  color: red;
}
.settings-list {
  a {
    text-align: left;
  }
}
.panel-content {
  display: block;

  .settings-field {
    margin: 25px;

    label {
      margin-bottom: 0;
      padding-left: 9px;
      text-align: left;
    }
    .input {
      border-width: 0;
      margin-top: 0;
      border-bottom-width: 2px;
      padding-left: 9px;
      padding-top: 0;
      box-shadow: none;
    }
  }
  .panel-footer {
    position: relative;

    a.button {
      position: absolute;
      right: 0;
      width: 100px;
    }
  }
}
</style>