Account settings uses live data

Author: andyfusniak

src/capturoo-client/index.ts

@@ -239,6 +239,29 @@ class CapturooClient {
     }
   }
 
+  /**
+   * getAccount fetches the account object.
+   * @param accountId? account id or defaults to the account in the claim if not set
+   * @returns {Promise.<Account>}
+   */
+  async getAccount(accountId?: string): Promise<Account> {
+    try {
+      if (!accountId) {
+        accountId = this.claimAccountId
+      }
+
+      const response = await this.get(`/accounts/${accountId}`)
+      if (response.status === 200) {
+        const account: Account = await response.json()
+        return account
+      }
+
+      const data = await response.json()
+      throw new CapturooError(response.status, 'unknown-error', data.toString())
+    } catch (err) {
+      throw err
+    }
+  }
   /**
    * createBucket creates a new bucket inside the account associated to the
    * currently signed in user

src/store/index.ts

@@ -12,6 +12,9 @@ export default new Vuex.Store({
     user: null
   },
   getters: {
+    account(state) {
+      return state.account
+    },
     buckets(state) {
       return state.buckets
     },
@@ -54,6 +57,15 @@ export default new Vuex.Store({
         throw err
       }
     },
+    async getAccount({ commit, state }) {
+      try {
+        const account = await capturoo.admin().getAccount()
+        commit('setAccount', account)
+        return account
+      } catch (err) {
+        throw err
+      }
+    },
     async signInWithEmailAndPassword({ commit, state }, { email, password }) {
       try {
         const userCredential = await firebase.auth().signInWithEmailAndPassword(email, password);

src/views/account/AccountSettings.vue

@@ -17,9 +17,10 @@
           <v-card-text>
             <v-list-item three-line>
               <v-list-item-content>
-                <v-list-item-title class="headline mb-1">Jon Doe</v-list-item-title>
-                <v-list-item-subtitle>[email protected]</v-list-item-subtitle>
-                <p class="grey--text darken-12 pt-4">Created: 28 April 2020 4:25pm</p>
+                <v-list-item-title class="headline mb-1">{{ account.displayName }}</v-list-item-title>
+                <v-list-item-subtitle>{{ account.email }}</v-list-item-subtitle>
+                <p class="grey--text text--darken-1 pt-4">Account id: {{ account.accountId }}</p>
+                <p class="grey--text text--darken-1 pt-4">Created: {{ account.created }}</p>
               </v-list-item-content>
             </v-list-item>
           </v-card-text>
@@ -33,7 +34,7 @@
             <v-list-item three-line>
               <v-list-item-content>
                 <v-list-item-title class="headline mb-1">Private API Key</v-list-item-title>
-                <v-list-item-subtitle>Crl1Ml8BtiWD1CISVLQeaSgZ6tzZHObZN6tu9dukcf3</v-list-item-subtitle>
+                <v-list-item-subtitle>{{ account.developerKey }}</v-list-item-subtitle>
               </v-list-item-content>
             </v-list-item>
           </v-card-text>
@@ -50,6 +51,29 @@ export default {
     return {
       tab: null
     }
+  },
+  computed: {
+    account() {
+      return this.$store.getters.account
+    }
+  },
+  beforeMount: async function() {
+    this.loading = true;
+    console.log('loading account')
+    const account = await this.getBuckets();
+    console.log('account loaded')
+    console.log(account)
+  },
+  methods: {
+    async getBuckets() {
+      const account = await this.$store.dispatch('getAccount')
+      console.log('method: getBuckets')
+      console.log(account)
+      return account
+    },
+    async deleteConfirm(bucketId) {
+      await this.$store.dispatch('deleteBucket', { bucketId })
+    }
   }
 }
 </script>