Bind icon upload feature to Quick form

resources/js/components/TwofaccountShow.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <figure class="image is-64x64" :class="{ 'no-icon' : !internal_icon }" style="display: inline-block">
+        <figure class="image is-64x64" style="display: inline-block">
             <img :src="'storage/icons/' + internal_icon" v-if="internal_icon">
         </figure>
         <p class="is-size-4 has-text-grey-light has-ellipsis">{{ internal_service }}</p>

resources/js/views/twofaccounts/Create.vue

@@ -3,7 +3,12 @@
         <div class="container preview has-text-centered">
             <div class="columns is-mobile">
                 <div class="column">
-                    <twofaccount-show
+                    <label class="add-icon-button" v-if="!tempIcon">
+                        <input class="file-input" type="file" accept="image/*" v-on:change="uploadIcon" ref="iconInput">
+                        <font-awesome-icon :icon="['fas', 'image']" size="lg" />
+                    </label>
+                    <button class="delete delete-icon-button is-medium" v-if="tempIcon" @click.prevent="deleteIcon"></button>
+                    <twofaccount-show ref="TwofaccountShow"
                         :service="form.service"
                         :account="form.account"
                         :uri="form.uri"
@@ -131,6 +136,14 @@
             }
         },
 
+        watch: {
+            tempIcon: function(val) {
+                if( this.isQuickForm ) {
+                    this.$refs.TwofaccountShow.setIcon = val
+                }
+            }
+        },
+
         mounted: function () {
             if( this.$route.params.qrAccount ) {
 

resources/sass/app.scss

@@ -161,10 +161,29 @@
   white-space: nowrap;
 }
 
-.no-icon {
+.add-icon-button {
+  height: 64px;
+  width: 64px;
+  padding-top: calc(32px - 0.665rem);
+  position: absolute;
+  margin-left: -32px;
+  z-index: 40;
   border: 1px dashed hsl(0, 0%, 7%);
 }
 
+.delete-icon-button {
+  position: absolute;
+  margin-left: 37px;
+}
+
+.file-input {
+  cursor: pointer;
+}
+
+.add-icon-button, .add-icon-button:hover {
+  color: hsl(0, 0%, 7%);
+}
+
 .dots {
   list-style: none;
   padding: 0;
@@ -299,10 +318,6 @@ footer .field.is-grouped {
   height: 256px;
 }
 
-.no-account input {
-  cursor: pointer;
-}
-
 .no-account::before {
   content: "";
   position: absolute;