From 1820dd1ddcb4e97bb0f7a9ea46f95422d93dc148 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Wed, 5 Feb 2020 11:52:26 +0100
Subject: [PATCH] Bind icon upload feature to Quick form

---
 resources/js/components/TwofaccountShow.vue |  2 +-
 resources/js/views/twofaccounts/Create.vue  | 15 ++++++++++++-
 resources/sass/app.scss                     | 25 ++++++++++++++++-----
 3 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/resources/js/components/TwofaccountShow.vue b/resources/js/components/TwofaccountShow.vue
index 681fbf48..6dbdf695 100644
--- a/resources/js/components/TwofaccountShow.vue
+++ b/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>
diff --git a/resources/js/views/twofaccounts/Create.vue b/resources/js/views/twofaccounts/Create.vue
index d89d85ba..97850674 100644
--- a/resources/js/views/twofaccounts/Create.vue
+++ b/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 ) {
 
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index 6927d664..cde4b4f7 100644
--- a/resources/sass/app.scss
+++ b/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;