Dashboard.vue

<template>
  <div id="mail-app" class="columns">
    <div class="column is-2 aside" style="overflow-y: auto;">
      <vault-list
        v-on:select-current-vault="switchCurrentVault"
        v-on:create-vault="createNewVault" >
      </vault-list>
      <div>{{ user.username ? user.username : user.identityAddress }}</div>
    </div>

    <div id="message-feed" class="column is-3 messages" style="overflow-y: auto;">
      <password-list ref="passwordList"
        v-if="this.currentVaultID"
        v-on:create-password="openNewPasswordForm"
        v-on:select-current-password="switchCurrentPassword" >
      </password-list>
    </div>

    <div id="message-pane" class="column is-7" style="overflow-y: auto;">
      <password-view
        v-if="this.currentPasswordID && !this.showPasswordForm" >
      </password-view>

      <template v-if="this.showPasswordForm" >
        <form @submit.prevent="createNewPassword" :disabled="! newPassword">
          <div class="input-group">
            <input v-model="newPassword.website" type="text" class="" placeholder="website" autofocus>
            <input v-model="newPassword.username" type="text" class="" placeholder="username">
            <template>
              <password
                v-model="newPassword.password"
                :toggle=true
                :defaultClass="form-control"
                :placeholder="password"
              />
            </template>
          </div>
          <span class="input-group">
            <button class="btn btn-default pull-right" type="submit" :disabled="! newPassword">Save</button>
            <button class="btn btn-default pull-right" type="button" @click.prevent="generatePassword(8)">⟳ Generate</button>
          </span>
        </form>
      </template>
    </div>
  </div>
</template>

<script>
import Password from 'vue-password-strength-meter'
import VaultList from '@/components/VaultList.vue'
import PasswordList from '@/components/PasswordList.vue'
import PasswordView from '@/components/PasswordView.vue'

import { mapGetters } from 'vuex'
import { fetchData,
  switchCurrentVault, switchCurrentPassword,
  createNewVault, createNewPassword
} from '../store/actions'

export default {
  name: 'dashboard',
  props: ['user'],
  components: { Password, VaultList, PasswordList, PasswordView },
  data () {
    return {
      blockstack: window.blockstack,
      showPasswordForm: false,
      newPassword: {
        website: '',
        username: '',
        password: ''
      },
      password: null,
      copyStatus: 'hidden'
    }
  },
  computed: mapGetters(['currentVaultID', 'currentPasswordID']),
  mounted () {
    fetchData(this.$store)
  },
  methods: {
    
    // ...

    createNewPassword () {
      if (!this.newPassword.password.trim()) {
        return
      }
      createNewPassword(this.$store, this.newPassword)
      this.newPassword = {
        website: '',
        username: '',
        password: ''
      }
      this.showPasswordForm = false
    },

    openNewPasswordForm () {
      this.resetVaultState()
      this.showPasswordForm = true
    },

    signOut () {
      this.blockstack.signUserOut(window.location.href)
    }
  }
}
</script>

PasswordList.vue

<template>
  <div id="inbox-messages" class="inbox-messages">
    <div class="search-wrapper">
      <input type="text" v-model="searchString" placeholder="Search title.." />
    </div>

    <div>
      <button @click="onCreatePassword">Create password</button>
    </div>

    <h2>{{currentVault.name}}</h2>
    <div> {{ Object.keys(passwords[currentVaultID]).length }}</div>
    <a v-for="(password, passwordID) in filteredPasswordList"
      @click="onPasswordClick(passwordID)" class="item"><span class="icon"><i class="fa fa-folder-o"></i></span><span class="name">{{ password.website }}</span>
    </a>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'PasswordList',
  data () {
    return {
      searchString: ''
    }
  },
  computed: {
    ...mapGetters(['passwords', 'currentVault', 'currentVaultID', 'currentPasswordID']),

    filteredPasswordList () {
      let filteredPasswordList = {}
      Object.keys(this.passwords[this.currentVaultID]).forEach((passwordID) => {
        let password = this.passwords[this.currentVaultID][passwordID]
        if (password.website.toLowerCase().includes(this.searchString.toLowerCase())) {
          filteredPasswordList[passwordID] = password
        }
      })
      return filteredPasswordList
    }
  },
  methods: {
    onCreatePassword () { this.$emit('create-password') },
    onPasswordClick (passwordID) { this.$emit('select-current-password', passwordID) },
    isActive (passwordID) { return passwordID === this.currentPasswordID ? ' active' : '' },
    resetForm () { this.searchString = '' }
  }
}
</script>

store.getters.js

import Vue from 'vue'

export const vaults = state => state.vaults

export const passwords = state => state.passwords

export const currentVaultID = state => {
  return state.currentVaultID
}

export const currentPasswordID = state => {
  return state.currentPasswordID
}

export const currentVault = state => {
  let vault = {}
  if (state.currentVaultID) {
    Vue.set(vault, 'uuid', state.vaults[state.currentVaultID].uuid)
    Vue.set(vault, 'name', state.vaults[state.currentVaultID].name)
    Vue.set(vault, 'passwords', state.passwords[state.currentVaultID])
  }
  console.log(vault)
  return vault
}

export const currentPassword = state => {
  return state.currentPasswordID ? state.passwords[state.currentVaultID][state.currentPasswordID] : {}
}

store.mutations.js

import Vue from 'vue'

export default {
  storeAllVaults (state, vaults) {
    vaults.forEach(vault => {
      if (!state.vaults[vault.uuid]) {
        createVault(state, vault.uuid, vault.name)
      } else {
        console.error('Failed to create vault')
      }
    })
  },

  storeAllPasswords (state, {vaultID, passwords}) {
    state.passwords[vaultID] = {}
    passwords.forEach(password => {
      createPassword(state, vaultID, password.uuid, password.website, password.username, password.password)
    })
  },
  switchCurrentVault (state, id) {
    state.currentVaultID = id
  },

  switchCurrentPassword (state, id) {
    state.currentPasswordID = id
  },

  createNewVault (state, vault) {
    if (!state.vaults[vault.uuid]) {
      createVault(state, vault.uuid, vault.name.trim())
      state.passwords[vault.uuid] = {}
    } else {
      console.error('Failed to create vault')
    }
  },

  createNewPassword (state, password) {
    let vaultID = state.currentVaultID
    createPassword(state, vaultID, password.uuid, password.website.trim(), password.username.trim(), password.password.trim())
    state.currentPasswordID = password.uuid
  }
}

function createVault (state, uuid, name) {
  Vue.set(state.vaults, uuid, {
    uuid,
    name
  })
}

function createPassword (state, vaultID, passwordID, website, username, password) {
  Vue.set(state.passwords[vaultID], passwordID, {
    passwordID,
    website,
    username,
    password
  })
}