feat(accounts): add account tab and modal creation

src/components/MesComptes.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="accounts-tab">
+    <b-card no-body>
+      <b-tabs card>
+        <b-tab title="Mes comptes" active>
+          <b-card @click="show('modal-1')"
+                  class="mb-2 account-card d-flex flex-row"
+          >
+
+            <b-card-title class="p-2">
+              Ajouter un compte
+              <b-icon-plus-circle-fill style="color:green"></b-icon-plus-circle-fill>
+            </b-card-title>
+
+          </b-card>
+          <b-card v-for="account in accounts" :key="account.name"
+              :title=account.name
+              class="mb-2 account-card"
+          >
+            <b-card-text>
+              {{account.name}}
+            </b-card-text>
+
+            <b-button href="#" variant="primary">Voir mon compte</b-button>
+          </b-card>
+        </b-tab>
+      </b-tabs>
+    </b-card>
+    <b-modal ref="my-modal" id="modal-1" title="BootstrapVue">
+      <p class="my-4">Hello from modal!</p>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import {BCard, BTabs, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal} from "bootstrap-vue";
+import {getAccounts} from "@/config/noscomptes";
+export default {
+  name: 'mes_comptes',
+  data: function () {
+    return {
+      accounts: 0
+    }
+  },
+  beforeCreate() {
+    let loggedUser = this.$store.state.loggedUser
+    getAccounts(loggedUser.oauth_token, loggedUser.nosComptesId).then(data => {
+      this.$store.commit('userAccounts', data)
+    })
+  },
+  mounted () {
+  },
+  methods: {
+    show() {
+      this.$refs['my-modal'].show()
+    }
+  },
+  components: {
+    BCard,
+    BTabs,
+    BTab,
+    BCardText,
+    BCardTitle,
+    BIconPlusCircleFill,
+    BModal
+  }
+}
+</script>
+
+<style>
+.accounts-tab {
+  margin: 2% 3% 0 3%;
+  box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
+  -moz-box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
+  -webkit-box-shadow: 0px 0px 7px 2px rgba(119, 119, 119, 0.7);
+}
+.accounts-tab .account-card{
+  width: 20rem;
+  height: 20rem;
+  box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
+  -moz-box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
+  -webkit-box-shadow: 0px 0px 3px 0px rgba(119, 119, 119, 0.4);
+}
+.account-card .card-body {
+  text-align: center;
+  align-self: center;
+}
+</style>