feat(accounts): add form for the account creation

src/components/MesComptes.vue

@@ -4,7 +4,7 @@
       <b-tabs card>
         <b-tab title="Mes comptes" active>
           <b-card @click="show('modal-1')"
-                  class="mb-2 account-card d-flex flex-row"
+                  class="mb-2 account-card account-add d-flex flex-row"
           >
 
             <b-card-title class="p-2">
@@ -21,25 +21,63 @@
               {{account.name}}
             </b-card-text>
 
-            <b-button href="#" variant="primary">Voir mon compte</b-button>
+            <b-button href="#" variant="primary" :header-bg-variant="dark" >Voir mon compte</b-button>
           </b-card>
         </b-tab>
       </b-tabs>
     </b-card>
-    <b-modal ref="my-modal" id="modal-1" title="BootstrapVue">
+    <b-modal ref="my-modal" size="lg" centered title="">
-      <p class="my-4">Hello from modal!</p>
+      <template #modal-header="{  }">
+        <h5>Ajout d'un compte</h5>
+      </template>
+      <template #modal-footer="{ ok, cancel }">
+        <b-button size="sm" variant="success" @click="ok()">
+          Créer
+        </b-button>
+        <b-button size="sm" variant="danger" @click="cancel()">
+          Fermer
+        </b-button>
+      </template>
+      <form ref="form" @submit.stop.prevent="handleSubmit">
+        <b-form-group
+            label="Name"
+            label-for="name-input"
+            invalid-feedback="Le nom du compte est requis"
+            :state="nameState"
+        >
+          <b-form-input
+              id="name-input"
+              v-model="name"
+              :state="nameState"
+              required
+          ></b-form-input>
+        </b-form-group>
+        <b-form-group
+            label="Banque"
+            label-for="provider-input"
+            invalid-feedback="La banque est requise"
+            :state="nameState">
+          <b-form-select v-model="provider" :options="options"></b-form-select>
+        </b-form-group>
+      </form>
     </b-modal>
   </div>
 </template>
 
 <script>
-import {BCard, BTabs, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal} from "bootstrap-vue";
+import {BCard, BTabs, BTab, BCardText, BCardTitle, BIconPlusCircleFill, BModal, BFormGroup, BFormSelect, BFormInput} from "bootstrap-vue";
 import {getAccounts} from "@/config/noscomptes";
 export default {
   name: 'mes_comptes',
   data: function () {
     return {
-      accounts: 0
+      accounts: [],
+      name: "",
+      options: [
+        { value: 'caisse-epargne', text: 'Caisse Epargne' },
+        { value: 'bnp', text: 'BNP Paribas' },
+        { value: 'boursorama', text: 'Boursorama' }
+      ]
     }
   },
   beforeCreate() {
@@ -62,7 +100,10 @@ export default {
     BCardText,
     BCardTitle,
     BIconPlusCircleFill,
-    BModal
+    BModal,
+    BFormGroup,
+    BFormSelect,
+    BFormInput
   }
 }
 </script>
@@ -81,6 +122,12 @@ export default {
   -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);
 }
+.accounts-tab .account-card.account-add:hover {
+  background-color: green;
+}
+.accounts-tab .account-card.account-add:hover .card-title, .accounts-tab .account-card.account-add:hover .card-title .bi {
+  color:white!important;
+}
 .account-card .card-body {
   text-align: center;
   align-self: center;