From 8763f52941605c58fd046b8b1f1fc2787ca46f2f Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Fri, 7 Feb 2020 01:46:05 -0300
Subject: [PATCH 01/16] wip

---
 .../Modal/ModalCloseConfirmation.vue          | 139 ++++++++++++++++++
 src/renderer/components/Modal/ModalWindow.vue |  32 +++-
 .../Transaction/TransactionModal.vue          |   1 +
 src/renderer/i18n/locales/en-US.js            |   6 +
 src/renderer/i18n/locales/pt-BR.js            |   6 +
 5 files changed, 182 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/components/Modal/ModalCloseConfirmation.vue

diff --git a/src/renderer/components/Modal/ModalCloseConfirmation.vue b/src/renderer/components/Modal/ModalCloseConfirmation.vue
new file mode 100644
index 0000000000..421f5a6199
--- /dev/null
+++ b/src/renderer/components/Modal/ModalCloseConfirmation.vue
@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="ModalCloseConfirmation__wrapper"
+    @click="onBackdropClick"
+  >
+    <div class="ModalCloseConfirmation__container">
+      <section class="ModalCloseConfirmation__container__content">
+        <div class="mb-6">
+          <h3
+            v-if="question"
+            class="font-semibold"
+          >
+            {{ question }}
+          </h3>
+
+          <div
+            v-if="note"
+            class="mt-3 text-grey-darker text-lg"
+            :class="note ? 'mb-8' : ''"
+          >
+            {{ note }}
+          </div>
+        </div>
+
+        <slot />
+
+        <div class="mt-4 flex flex-row">
+          <button
+            class="blue-button m-1"
+            @click="emitCancel"
+          >
+            {{ cancelButton }}
+          </button>
+
+          <button
+            class="action-button m-1 ml-auto"
+            @click="emitConfirm"
+          >
+            {{ confirmButton }}
+          </button>
+        </div>
+      </section>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ModalCloseConfirmation',
+
+  props: {
+    cancelButton: {
+      type: String,
+      required: false,
+      default () {
+        return this.$t('MODAL_CLOSE_CONFIRMATION.CANCEL')
+      }
+    },
+    confirmButton: {
+      type: String,
+      required: false,
+      default () {
+        return this.$t('MODAL_CLOSE_CONFIRMATION.CONFIRM')
+      }
+    },
+    containerClasses: {
+      type: String,
+      required: false,
+      default: 'ModalConfirmationClose'
+    },
+    footer: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    note: {
+      type: String,
+      required: false,
+      default: null
+    },
+    question: {
+      type: String,
+      required: false,
+      default () {
+        return this.$t('MODAL_CLOSE_CONFIRMATION.QUESTION')
+      }
+    },
+    title: {
+      type: String,
+      required: false,
+      default () {
+        return this.$t('MODAL_CONFIRMATION.TITLE')
+      }
+    },
+    portalTarget: {
+      type: String,
+      required: false,
+      default: 'modal'
+    }
+  },
+
+  methods: {
+    emitCancel () {
+      this.$emit('cancel')
+    },
+
+    emitConfirm () {
+      this.$emit('confirm')
+    },
+
+    onBackdropClick () {
+      this.$emit('cancel')
+    }
+  }
+}
+</script>
+
+<style lang="postcss" scoped>
+.ModalCloseConfirmation-enter,
+.ModalCloseConfirmation-leave-active {
+  opacity: 0;
+  transform: scale(1.1);
+}
+
+.ModalCloseConfirmation__wrapper {
+  @apply overflow-hidden p-16 pt-16 bg-theme-modal shadow rounded-lg w-full h-full flex items-center justify-center absolute;
+  position: fixed;
+  z-index: 60;
+  top: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .5);
+  transition: opacity .3s ease;
+}
+
+.ModalCloseConfirmation__container__content{
+  @apply overflow-hidden p-12 bg-theme-modal shadow rounded-lg flex flex-col inline-block w-auto
+}
+</style>
diff --git a/src/renderer/components/Modal/ModalWindow.vue b/src/renderer/components/Modal/ModalWindow.vue
index 05279206e7..de78a14ff6 100644
--- a/src/renderer/components/Modal/ModalWindow.vue
+++ b/src/renderer/components/Modal/ModalWindow.vue
@@ -69,6 +69,12 @@
                 <p v-html="message" />
               </footer>
             </slot>
+
+            <ModalCloseConfirmation
+              v-if="showConfirmationModal"
+              @cancel="showConfirmationModal = false"
+              @confirm="emitCloseAfterConfirm"
+            />
           </div>
         </div>
       </Transition>
@@ -79,12 +85,14 @@
 <script>
 import { ButtonClose } from '@/components/Button'
 import { isFunction } from 'lodash'
+import ModalCloseConfirmation from './ModalCloseConfirmation'
 
 export default {
   name: 'ModalWindow',
 
   components: {
-    ButtonClose
+    ButtonClose,
+    ModalCloseConfirmation
   },
 
   props: {
@@ -123,6 +131,11 @@ export default {
       required: false,
       default: true
     },
+    confirmClose: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
     allowClose: {
       type: Boolean,
       required: false,
@@ -136,9 +149,14 @@ export default {
   },
 
   data: () => ({
-    isMaximized: true
+    isMaximized: true,
+    showConfirmationModal: false
   }),
 
+  beforeCreate () {
+    this.$options.components.ModalConfirmation = require('./ModalConfirmation').default
+  },
+
   mounted () {
     document.addEventListener('keyup', this.onEscKey, { once: true })
   },
@@ -164,11 +182,21 @@ export default {
         return
       }
 
+      if (this.confirmClose) {
+        this.showConfirmationModal = true
+        return
+      }
+
       if (force || this.isMaximized) {
         this.$emit('close')
       }
     },
 
+    emitCloseAfterConfirm () {
+      this.showConfirmationModal = false
+      this.$emit('close')
+    },
+
     onEscKey (event) {
       if (event.keyCode === 27) {
         this.emitClose()
diff --git a/src/renderer/components/Transaction/TransactionModal.vue b/src/renderer/components/Transaction/TransactionModal.vue
index 6d8da648d8..f3974ffeaf 100644
--- a/src/renderer/components/Transaction/TransactionModal.vue
+++ b/src/renderer/components/Transaction/TransactionModal.vue
@@ -2,6 +2,7 @@
   <ModalWindow
     :title="title || typeName"
     :container-classes="`TransactionModal ${typeClass}`"
+    :confirm-close="true"
     @close="emitCancel"
   >
     <KeepAlive>
diff --git a/src/renderer/i18n/locales/en-US.js b/src/renderer/i18n/locales/en-US.js
index 2e176db668..d6d8a5aff4 100644
--- a/src/renderer/i18n/locales/en-US.js
+++ b/src/renderer/i18n/locales/en-US.js
@@ -416,6 +416,12 @@ export default {
     TITLE: 'Export Wallets'
   },
 
+  MODAL_CLOSE_CONFIRMATION: {
+    QUESTION: 'Are you sure you want to close this window?',
+    CONFIRM: 'Yes, close.',
+    CANCEL: 'No, cancel.'
+  },
+
   MODAL_CONFIRMATION: {
     CANCEL: 'No, cancel',
     CONTINUE: 'Yes, I am sure',
diff --git a/src/renderer/i18n/locales/pt-BR.js b/src/renderer/i18n/locales/pt-BR.js
index c46df1628c..eb5368bac7 100644
--- a/src/renderer/i18n/locales/pt-BR.js
+++ b/src/renderer/i18n/locales/pt-BR.js
@@ -398,6 +398,12 @@ export default {
     TITLE: 'Confirmação'
   },
 
+  MODAL_CLOSE_CONFIRMATION: {
+    QUESTION: 'Tem certeza que deseja fechar esta janela?',
+    CONFIRM: 'Sim, fechar.',
+    CANCEL: 'Cancelar'
+  },
+
   MODAL_QR_CODE: {
     TITLE: 'QR Code',
     SUBTITLE: 'Verificar endereço'

From a4d0a978c286a24d381ef0cd6eae4b944051cc5e Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Fri, 7 Feb 2020 01:55:18 -0300
Subject: [PATCH 02/16] wip

---
 src/renderer/i18n/locales/en-US.js | 4 ++--
 src/renderer/i18n/locales/es-ES.js | 6 ++++++
 src/renderer/i18n/locales/it-IT.js | 6 ++++++
 src/renderer/i18n/locales/pt-BR.js | 4 ++--
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/renderer/i18n/locales/en-US.js b/src/renderer/i18n/locales/en-US.js
index d6d8a5aff4..e2b984e938 100644
--- a/src/renderer/i18n/locales/en-US.js
+++ b/src/renderer/i18n/locales/en-US.js
@@ -418,8 +418,8 @@ export default {
 
   MODAL_CLOSE_CONFIRMATION: {
     QUESTION: 'Are you sure you want to close this window?',
-    CONFIRM: 'Yes, close.',
-    CANCEL: 'No, cancel.'
+    CONFIRM: 'Yes, close',
+    CANCEL: 'No, cancel'
   },
 
   MODAL_CONFIRMATION: {
diff --git a/src/renderer/i18n/locales/es-ES.js b/src/renderer/i18n/locales/es-ES.js
index 6d3e8dbfb8..856e66fdfb 100644
--- a/src/renderer/i18n/locales/es-ES.js
+++ b/src/renderer/i18n/locales/es-ES.js
@@ -31,6 +31,12 @@ export default {
     popupHeader: 'Seleccionar'
   },
 
+  MODAL_CLOSE_CONFIRMATION: {
+    QUESTION: '¿Seguro que quieres cerrar esta ventana?',
+    CONFIRM: 'Si, cerca',
+    CANCEL: 'No, cancelar'
+  },
+
   PAGES: {
     PROFILE_NEW: {
       STEP1: {
diff --git a/src/renderer/i18n/locales/it-IT.js b/src/renderer/i18n/locales/it-IT.js
index 712be67a7a..99611cb29a 100644
--- a/src/renderer/i18n/locales/it-IT.js
+++ b/src/renderer/i18n/locales/it-IT.js
@@ -403,6 +403,12 @@ export default {
     TITLE: 'Esporta Portafogli'
   },
 
+  MODAL_CLOSE_CONFIRMATION: {
+    QUESTION: 'Sei sicuro di voler chiudere questa finestra?',
+    CONFIRM: 'Sim, fechar.',
+    CANCEL: 'No, annulla'
+  },
+
   MODAL_CONFIRMATION: {
     CANCEL: 'No, annulla',
     CONTINUE: 'Sì, sono sicuro',
diff --git a/src/renderer/i18n/locales/pt-BR.js b/src/renderer/i18n/locales/pt-BR.js
index eb5368bac7..52264a3b93 100644
--- a/src/renderer/i18n/locales/pt-BR.js
+++ b/src/renderer/i18n/locales/pt-BR.js
@@ -400,8 +400,8 @@ export default {
 
   MODAL_CLOSE_CONFIRMATION: {
     QUESTION: 'Tem certeza que deseja fechar esta janela?',
-    CONFIRM: 'Sim, fechar.',
-    CANCEL: 'Cancelar'
+    CONFIRM: 'Sim, fechar',
+    CANCEL: 'Não, cancelar'
   },
 
   MODAL_QR_CODE: {

From 39d628048e90c650f4e423b5614f143e627ed65d Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Sun, 9 Feb 2020 11:56:52 -0300
Subject: [PATCH 03/16] fix: expose modal inside index

---
 src/renderer/components/Modal/index.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/Modal/index.js b/src/renderer/components/Modal/index.js
index 1dbba455ca..0782318d14 100644
--- a/src/renderer/components/Modal/index.js
+++ b/src/renderer/components/Modal/index.js
@@ -6,6 +6,7 @@ import ModalQrCode from './ModalQrCode'
 import ModalQrCodeScanner from './ModalQrCodeScanner'
 import ModalRename from './ModalRename'
 import ModalWindow from './ModalWindow'
+import ModalCloseConfirmation from './ModalCloseConfirmation'
 
 export default ModalWindow
 export {
@@ -16,5 +17,6 @@ export {
   ModalQrCode,
   ModalQrCodeScanner,
   ModalRename,
-  ModalWindow
+  ModalWindow,
+  ModalCloseConfirmation
 }

From 8f3934c911cff3581f592d860de04c8baaa43eff Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Sun, 9 Feb 2020 12:21:49 -0300
Subject: [PATCH 04/16] fix: prevent click bubbling on child elements

---
 .../components/Modal/ModalCloseConfirmation.vue     | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/renderer/components/Modal/ModalCloseConfirmation.vue b/src/renderer/components/Modal/ModalCloseConfirmation.vue
index 421f5a6199..c72a88953e 100644
--- a/src/renderer/components/Modal/ModalCloseConfirmation.vue
+++ b/src/renderer/components/Modal/ModalCloseConfirmation.vue
@@ -1,9 +1,12 @@
 <template>
   <div
-    class="ModalCloseConfirmation__wrapper"
+    class="ModalCloseConfirmation__mask"
     @click="onBackdropClick"
   >
-    <div class="ModalCloseConfirmation__container">
+    <div
+      class="ModalCloseConfirmation__container"
+      @click.stop="void 0"
+    >
       <section class="ModalCloseConfirmation__container__content">
         <div class="mb-6">
           <h3
@@ -26,14 +29,14 @@
 
         <div class="mt-4 flex flex-row">
           <button
-            class="blue-button m-1"
+            class="ModalCloseConfirmation__cancel-button blue-button m-1"
             @click="emitCancel"
           >
             {{ cancelButton }}
           </button>
 
           <button
-            class="action-button m-1 ml-auto"
+            class="ModalCloseConfirmation__confirm-button action-button m-1 ml-auto"
             @click="emitConfirm"
           >
             {{ confirmButton }}
@@ -123,7 +126,7 @@ export default {
   transform: scale(1.1);
 }
 
-.ModalCloseConfirmation__wrapper {
+.ModalCloseConfirmation__mask {
   @apply overflow-hidden p-16 pt-16 bg-theme-modal shadow rounded-lg w-full h-full flex items-center justify-center absolute;
   position: fixed;
   z-index: 60;

From 3edb8591fd48fa7eb169073513bdcaaf94ccafe1 Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Sun, 9 Feb 2020 12:50:01 -0300
Subject: [PATCH 05/16] test: close confirmation tests

---
 .../Modal/ModalCloseConfirmation.spec.js      | 50 +++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 __tests__/unit/components/Modal/ModalCloseConfirmation.spec.js

diff --git a/__tests__/unit/components/Modal/ModalCloseConfirmation.spec.js b/__tests__/unit/components/Modal/ModalCloseConfirmation.spec.js
new file mode 100644
index 0000000000..82f55a66bf
--- /dev/null
+++ b/__tests__/unit/components/Modal/ModalCloseConfirmation.spec.js
@@ -0,0 +1,50 @@
+import { shallowMount } from '@vue/test-utils'
+import useI18nGlobally from '../../__utils__/i18n'
+import { ModalCloseConfirmation } from '@/components/Modal'
+
+const i18n = useI18nGlobally()
+
+let wrapper
+beforeEach(() => {
+  wrapper = shallowMount(ModalCloseConfirmation, {
+    i18n
+  })
+})
+
+describe('ModalCloseConfirmation', () => {
+  describe('render popup', () => {
+    it('should render the close confirmation modal', () => {
+      expect(wrapper.isVueInstance()).toBeTrue()
+    })
+  })
+
+  describe('close modal capabilities', () => {
+    describe('cancel event', () => {
+      it('should emit a cancel event when clicks the cancel buttom', () => {
+        const mask = wrapper.find('.ModalCloseConfirmation__cancel-button')
+        mask.trigger('click')
+        expect(wrapper.emitted('cancel')).toBeTruthy()
+      })
+
+      it('should emit a cancel event when clicks the mask', () => {
+        const mask = wrapper.find('.ModalCloseConfirmation__mask')
+        mask.trigger('click')
+        expect(wrapper.emitted('cancel')).toBeTruthy()
+      })
+
+      it('should not emit a cancel event when pressing inside the modal', () => {
+        const modal = wrapper.find('.ModalCloseConfirmation__container')
+        modal.trigger('click')
+        expect(wrapper.emitted('cancel')).toBeFalsy()
+      })
+    })
+
+    describe('confirm event', () => {
+      it('should emit a confirm event when clicks the confirm buttom', () => {
+        const mask = wrapper.find('.ModalCloseConfirmation__confirm-button')
+        mask.trigger('click')
+        expect(wrapper.emitted('confirm')).toBeTruthy()
+      })
+    })
+  })
+})

From 053577a8515f9f9cbf03a369b8cef69b366a0546 Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Sun, 9 Feb 2020 13:13:06 -0300
Subject: [PATCH 06/16] fix: include major class on component

---
 src/renderer/components/Modal/ModalCloseConfirmation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/Modal/ModalCloseConfirmation.vue b/src/renderer/components/Modal/ModalCloseConfirmation.vue
index c72a88953e..97036a37fe 100644
--- a/src/renderer/components/Modal/ModalCloseConfirmation.vue
+++ b/src/renderer/components/Modal/ModalCloseConfirmation.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="ModalCloseConfirmation__mask"
+    class="ModalCloseConfirmation ModalCloseConfirmation__mask"
     @click="onBackdropClick"
   >
     <div

From 1070c4b73a3961d91c642e2f70ce6cfc01ee675c Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Sun, 9 Feb 2020 13:37:27 -0300
Subject: [PATCH 07/16] test: modal window tests

---
 .../unit/components/Modal/ModalWindow.spec.js | 85 +++++++++++++++++++
 1 file changed, 85 insertions(+)

diff --git a/__tests__/unit/components/Modal/ModalWindow.spec.js b/__tests__/unit/components/Modal/ModalWindow.spec.js
index b0e63d8375..29b647f3cc 100644
--- a/__tests__/unit/components/Modal/ModalWindow.spec.js
+++ b/__tests__/unit/components/Modal/ModalWindow.spec.js
@@ -1,5 +1,8 @@
 import { mount } from '@vue/test-utils'
 import ModalWindow from '@/components/Modal'
+import useI18nGlobally from '../../__utils__/i18n'
+
+const i18n = useI18nGlobally()
 
 const stubs = {
   Portal: '<div><slot/></div>'
@@ -63,6 +66,88 @@ describe('ModalWindow', () => {
     })
   })
 
+  describe('close confirmation modal', () => {
+    it('should render a close confirmation modal when click on mask', () => {
+      const wrapper = mount(ModalWindow, {
+        stubs,
+        i18n,
+        propsData: {
+          confirmClose: true
+        }
+      })
+      const mask = wrapper.find('.ModalWindow')
+      mask.trigger('click')
+      expect(wrapper.contains('.ModalCloseConfirmation')).toBeTruthy()
+    })
+
+    it('should not emit close when backdrop clicked', () => {
+      const wrapper = mount(ModalWindow, {
+        stubs,
+        i18n,
+        propsData: {
+          confirmClose: true
+        }
+      })
+      const mask = wrapper.find('.ModalWindow')
+      mask.trigger('click')
+      expect(wrapper.emitted('close')).toBeFalsy()
+    })
+
+    it('should emit close when confirm closing', () => {
+      const wrapper = mount(ModalWindow, {
+        stubs,
+        i18n,
+        propsData: {
+          confirmClose: true
+        },
+        data () {
+          return {
+            showConfirmationModal: true
+          }
+        }
+      })
+      const button = wrapper.find('.ModalCloseConfirmation__confirm-button')
+      button.trigger('click')
+      expect(wrapper.emitted('close')).toBeTruthy()
+    })
+
+    it('should not emit close when click on confirmation mask', () => {
+      const wrapper = mount(ModalWindow, {
+        stubs,
+        i18n,
+        propsData: {
+          confirmClose: true
+        },
+        data () {
+          return {
+            showConfirmationModal: true
+          }
+        }
+      })
+      const button = wrapper.find('.ModalCloseConfirmation__mask')
+      button.trigger('click')
+      expect(wrapper.emitted('close')).toBeFalsy()
+    })
+
+    it('should close the confirmation modal when canceling', () => {
+      const wrapper = mount(ModalWindow, {
+        stubs,
+        i18n,
+        propsData: {
+          confirmClose: true
+        },
+        data () {
+          return {
+            showConfirmationModal: true
+          }
+        }
+      })
+      const button = wrapper.find('.ModalCloseConfirmation__cancel-button')
+      button.trigger('click')
+      expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+    })
+  })
+
   describe('close popup', () => {
     it('should emit a close event when clicks the close button', () => {
       const wrapper = mount(ModalWindow, { stubs })

From 8db6097fa984b44ba70d2f0fab46fe09f126bf15 Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Sun, 9 Feb 2020 13:41:26 -0300
Subject: [PATCH 08/16] test: prevet closing when button clicked

---
 __tests__/unit/components/Modal/ModalWindow.spec.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

diff --git a/__tests__/unit/components/Modal/ModalWindow.spec.js b/__tests__/unit/components/Modal/ModalWindow.spec.js
index 29b647f3cc..3ccb89d5b6 100644
--- a/__tests__/unit/components/Modal/ModalWindow.spec.js
+++ b/__tests__/unit/components/Modal/ModalWindow.spec.js
@@ -93,6 +93,19 @@ describe('ModalWindow', () => {
       expect(wrapper.emitted('close')).toBeFalsy()
     })
 
+    it('should not emit close when click close button', () => {
+      const wrapper = mount(ModalWindow, {
+        stubs,
+        i18n,
+        propsData: {
+          confirmClose: true
+        }
+      })
+      const mask = wrapper.find('.ModalWindow__close-button')
+      mask.trigger('click')
+      expect(wrapper.emitted('close')).toBeFalsy()
+    })
+
     it('should emit close when confirm closing', () => {
       const wrapper = mount(ModalWindow, {
         stubs,

From acf637122734feef3d6eb6f46127c02f7ac992b3 Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Mon, 10 Feb 2020 04:21:12 -0300
Subject: [PATCH 09/16] feat: check for state change to close

---
 src/renderer/components/Modal/ModalWindow.vue | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/Modal/ModalWindow.vue b/src/renderer/components/Modal/ModalWindow.vue
index de78a14ff6..eec19042fd 100644
--- a/src/renderer/components/Modal/ModalWindow.vue
+++ b/src/renderer/components/Modal/ModalWindow.vue
@@ -150,7 +150,8 @@ export default {
 
   data: () => ({
     isMaximized: true,
-    showConfirmationModal: false
+    showConfirmationModal: false,
+    hasChanged: false
   }),
 
   beforeCreate () {
@@ -159,6 +160,7 @@ export default {
 
   mounted () {
     document.addEventListener('keyup', this.onEscKey, { once: true })
+    document.addEventListener('change', this.onChange)
   },
 
   destroyed () {
@@ -182,7 +184,7 @@ export default {
         return
       }
 
-      if (this.confirmClose) {
+      if (this.confirmClose && this.hasChanged) {
         this.showConfirmationModal = true
         return
       }
@@ -201,6 +203,10 @@ export default {
       if (event.keyCode === 27) {
         this.emitClose()
       }
+    },
+
+    onChange () {
+      this.hasChanged = true
     }
   }
 }

From f74a7fc80fca3e37fbd957a3bd4178c19a17c61d Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Mon, 10 Feb 2020 05:32:39 -0300
Subject: [PATCH 10/16] refactor: tests

---
 .../unit/components/Modal/ModalWindow.spec.js | 167 +++++++++---------
 1 file changed, 85 insertions(+), 82 deletions(-)

diff --git a/__tests__/unit/components/Modal/ModalWindow.spec.js b/__tests__/unit/components/Modal/ModalWindow.spec.js
index 3ccb89d5b6..29f507e7f9 100644
--- a/__tests__/unit/components/Modal/ModalWindow.spec.js
+++ b/__tests__/unit/components/Modal/ModalWindow.spec.js
@@ -67,97 +67,100 @@ describe('ModalWindow', () => {
   })
 
   describe('close confirmation modal', () => {
-    it('should render a close confirmation modal when click on mask', () => {
-      const wrapper = mount(ModalWindow, {
-        stubs,
-        i18n,
-        propsData: {
-          confirmClose: true
-        }
-      })
-      const mask = wrapper.find('.ModalWindow')
-      mask.trigger('click')
-      expect(wrapper.contains('.ModalCloseConfirmation')).toBeTruthy()
-    })
-
-    it('should not emit close when backdrop clicked', () => {
-      const wrapper = mount(ModalWindow, {
-        stubs,
-        i18n,
-        propsData: {
-          confirmClose: true
-        }
+    const options = {
+      stubs,
+      i18n,
+      propsData: {
+        confirmClose: true
+      }
+    }
+
+    describe('render', () => {
+      describe('without changes', () => {
+        it('should not render when click on mask', () => {
+          const wrapper = mount(ModalWindow, options)
+          const mask = wrapper.find('.ModalWindow')
+          mask.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+        })
+        it('should not render when click on close button', () => {
+          const wrapper = mount(ModalWindow, options)
+          const mask = wrapper.find('.ModalWindow__close-button')
+          mask.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+        })
       })
-      const mask = wrapper.find('.ModalWindow')
-      mask.trigger('click')
-      expect(wrapper.emitted('close')).toBeFalsy()
-    })
-
-    it('should not emit close when click close button', () => {
-      const wrapper = mount(ModalWindow, {
-        stubs,
-        i18n,
-        propsData: {
-          confirmClose: true
-        }
+      describe('with changes', () => {
+        it('should render when click on mask', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const mask = wrapper.find('.ModalWindow')
+          mask.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeTruthy()
+        })
+
+        it('should render when click on close button', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const mask = wrapper.find('.ModalWindow__close-button')
+          mask.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeTruthy()
+        })
       })
-      const mask = wrapper.find('.ModalWindow__close-button')
-      mask.trigger('click')
-      expect(wrapper.emitted('close')).toBeFalsy()
     })
 
-    it('should emit close when confirm closing', () => {
-      const wrapper = mount(ModalWindow, {
-        stubs,
-        i18n,
-        propsData: {
-          confirmClose: true
-        },
-        data () {
-          return {
-            showConfirmationModal: true
-          }
-        }
+    describe('events', () => {
+      describe('close', () => {
+        it('should emit on confirm', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const confirmButton = wrapper.find('.ModalCloseConfirmation__confirm-button')
+          confirmButton.trigger('click')
+          expect(wrapper.emitted('close')).toBeTruthy()
+        })
+
+        it('should not emit on cancel', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const cancelButton = wrapper.find('.ModalCloseConfirmation__cancel-button')
+          cancelButton.trigger('click')
+          expect(wrapper.emitted('close')).toBeFalsy()
+        })
       })
-      const button = wrapper.find('.ModalCloseConfirmation__confirm-button')
-      button.trigger('click')
-      expect(wrapper.emitted('close')).toBeTruthy()
-    })
 
-    it('should not emit close when click on confirmation mask', () => {
-      const wrapper = mount(ModalWindow, {
-        stubs,
-        i18n,
-        propsData: {
-          confirmClose: true
-        },
-        data () {
-          return {
-            showConfirmationModal: true
-          }
-        }
+      describe('confirm', () => {
+        it('should close the confirmation modal', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const confirmButton = wrapper.find('.ModalCloseConfirmation__confirm-button')
+          confirmButton.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+        })
+        it('should close the modal window', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const confirmButton = wrapper.find('.ModalCloseConfirmation__confirm-button')
+          confirmButton.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+        })
       })
-      const button = wrapper.find('.ModalCloseConfirmation__mask')
-      button.trigger('click')
-      expect(wrapper.emitted('close')).toBeFalsy()
-    })
 
-    it('should close the confirmation modal when canceling', () => {
-      const wrapper = mount(ModalWindow, {
-        stubs,
-        i18n,
-        propsData: {
-          confirmClose: true
-        },
-        data () {
-          return {
-            showConfirmationModal: true
-          }
-        }
+      describe('cancel', () => {
+        it('should close the confirmation modal', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const cancelButton = wrapper.find('.ModalCloseConfirmation__cancel-button')
+          cancelButton.trigger('click')
+          expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
+        })
+        it('should not close the modal window', () => {
+          const wrapper = mount(ModalWindow, options)
+          wrapper.setData({ showConfirmationModal: true })
+          const cancelButton = wrapper.find('.ModalCloseConfirmation__cancel-button')
+          cancelButton.trigger('click')
+          expect(wrapper.contains('.ModalWindow')).toBeTruthy()
+        })
       })
-      const button = wrapper.find('.ModalCloseConfirmation__cancel-button')
-      button.trigger('click')
-      expect(wrapper.contains('.ModalCloseConfirmation')).toBeFalsy()
     })
   })
 

From 5cbb1d6024d09dadb4e971a5535e2e9b7d5cfd5c Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Mon, 10 Feb 2020 13:28:17 -0300
Subject: [PATCH 11/16] fix: change eventbus on menu dropdown

---
 src/renderer/components/Input/InputAddress.vue | 3 +++
 src/renderer/components/Modal/ModalWindow.vue  | 3 ++-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/Input/InputAddress.vue b/src/renderer/components/Input/InputAddress.vue
index 06507377cd..e27c49c882 100644
--- a/src/renderer/components/Input/InputAddress.vue
+++ b/src/renderer/components/Input/InputAddress.vue
@@ -357,6 +357,9 @@ export default {
 
     updateInputValue (value) {
       this.inputValue = value
+
+      this.$eventBus.emit('change')
+
       // Inform Vuelidate that the value changed
       this.$v.model.$touch()
     },
diff --git a/src/renderer/components/Modal/ModalWindow.vue b/src/renderer/components/Modal/ModalWindow.vue
index eec19042fd..8865adc596 100644
--- a/src/renderer/components/Modal/ModalWindow.vue
+++ b/src/renderer/components/Modal/ModalWindow.vue
@@ -19,6 +19,7 @@
               [containerClassesMinimized]: !isMaximized,
             }]"
             class="ModalWindow__container flex flex-col mx-auto rounded-lg relative transition text-theme-text-content"
+            @change="onChange"
             @click.stop="void 0"
           >
             <section class="ModalWindow__container__content">
@@ -160,7 +161,7 @@ export default {
 
   mounted () {
     document.addEventListener('keyup', this.onEscKey, { once: true })
-    document.addEventListener('change', this.onChange)
+    this.$eventBus.on('change', this.onChange)
   },
 
   destroyed () {

From fbc02f219e41c2362ca4e379a6f3869a026d1bcd Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Wed, 12 Feb 2020 04:17:03 -0800
Subject: [PATCH 12/16] fix: class selection.

Co-Authored-By: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com>
---
 src/renderer/components/Modal/ModalCloseConfirmation.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/Modal/ModalCloseConfirmation.vue b/src/renderer/components/Modal/ModalCloseConfirmation.vue
index 97036a37fe..5e27cf236d 100644
--- a/src/renderer/components/Modal/ModalCloseConfirmation.vue
+++ b/src/renderer/components/Modal/ModalCloseConfirmation.vue
@@ -19,7 +19,7 @@
           <div
             v-if="note"
             class="mt-3 text-grey-darker text-lg"
-            :class="note ? 'mb-8' : ''"
+            :class="{ 'mb-8': note }"
           >
             {{ note }}
           </div>

From 0a6d3d4b90c27c45fee7365c07a88ad593abc978 Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Wed, 12 Feb 2020 09:28:33 -0300
Subject: [PATCH 13/16] fix: remove modal confirmation reference

---
 src/renderer/components/Modal/ModalWindow.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/renderer/components/Modal/ModalWindow.vue b/src/renderer/components/Modal/ModalWindow.vue
index fd7c4f72a7..9e5a20963d 100644
--- a/src/renderer/components/Modal/ModalWindow.vue
+++ b/src/renderer/components/Modal/ModalWindow.vue
@@ -153,10 +153,6 @@ export default {
     hasChanged: false
   }),
 
-  beforeCreate () {
-    this.$options.components.ModalConfirmation = require('./ModalConfirmation').default
-  },
-
   mounted () {
     document.addEventListener('keyup', this.onEscKey, { once: true })
     this.$eventBus.on('change', this.onChange)

From 2db2b179cd257903b7f4255f7516294746d85c95 Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Fri, 14 Feb 2020 14:54:46 -0300
Subject: [PATCH 14/16] fix: remove mousedown event

---
 src/renderer/components/Modal/ModalWindow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/Modal/ModalWindow.vue b/src/renderer/components/Modal/ModalWindow.vue
index 9e5a20963d..b5c9763bf5 100644
--- a/src/renderer/components/Modal/ModalWindow.vue
+++ b/src/renderer/components/Modal/ModalWindow.vue
@@ -7,7 +7,7 @@
         'ModalWindow--maximized': isMaximized,
         'ModalWindow--minimized': !isMaximized
       }"
-      @mousedown.left="onBackdropClick"
+      @click="onBackdropClick"
     >
       <Transition name="ModalWindow">
         <div class="ModalWindow__wrapper flex items-center justify-center absolute">

From b9f83b86ab1b3e841d07eefd0f9b088a826dc467 Mon Sep 17 00:00:00 2001
From: Davi Figueiredo <davi.mello.28@gmail.com>
Date: Thu, 20 Feb 2020 10:32:23 -0300
Subject: [PATCH 15/16] fix: mousedown events

---
 src/renderer/components/Modal/ModalWindow.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/Modal/ModalWindow.vue b/src/renderer/components/Modal/ModalWindow.vue
index b5c9763bf5..1525235e07 100644
--- a/src/renderer/components/Modal/ModalWindow.vue
+++ b/src/renderer/components/Modal/ModalWindow.vue
@@ -7,7 +7,7 @@
         'ModalWindow--maximized': isMaximized,
         'ModalWindow--minimized': !isMaximized
       }"
-      @click="onBackdropClick"
+      @mousedown.left="onBackdropClick"
     >
       <Transition name="ModalWindow">
         <div class="ModalWindow__wrapper flex items-center justify-center absolute">
@@ -18,7 +18,7 @@
             }]"
             class="ModalWindow__container flex flex-col mx-auto rounded-lg relative transition text-theme-text-content"
             @change="onChange"
-            @click.stop="void 0"
+            @mousedown.stop="void 0"
           >
             <section class="ModalWindow__container__content">
               <div class="ModalWindow__container__actions">

From 55ebf553ec725f371868440629319cc835bf7529 Mon Sep 17 00:00:00 2001
From: Alex Barnsley <8069294+alexbarnsley@users.noreply.github.com>
Date: Mon, 24 Feb 2020 22:46:21 +0000
Subject: [PATCH 16/16] refactor: close confirm modal buttons

---
 .../Modal/ModalCloseConfirmation.vue          | 28 +++++++++++--------
 1 file changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/renderer/components/Modal/ModalCloseConfirmation.vue b/src/renderer/components/Modal/ModalCloseConfirmation.vue
index 5e27cf236d..d9ec806991 100644
--- a/src/renderer/components/Modal/ModalCloseConfirmation.vue
+++ b/src/renderer/components/Modal/ModalCloseConfirmation.vue
@@ -28,19 +28,23 @@
         <slot />
 
         <div class="mt-4 flex flex-row">
-          <button
-            class="ModalCloseConfirmation__cancel-button blue-button m-1"
-            @click="emitCancel"
-          >
-            {{ cancelButton }}
-          </button>
+          <div class="flex-1">
+            <button
+              class="ModalCloseConfirmation__cancel-button blue-button m-1"
+              @click="emitCancel"
+            >
+              {{ cancelButton }}
+            </button>
+          </div>
 
-          <button
-            class="ModalCloseConfirmation__confirm-button action-button m-1 ml-auto"
-            @click="emitConfirm"
-          >
-            {{ confirmButton }}
-          </button>
+          <div class="flex-1 text-right">
+            <button
+              class="ModalCloseConfirmation__confirm-button action-button m-1 px-8 py-4"
+              @click="emitConfirm"
+            >
+              {{ confirmButton }}
+            </button>
+          </div>
         </div>
       </section>
     </div>