From 43ca79b3dcf9d3069d8e47d3300e8fbf04468395 Mon Sep 17 00:00:00 2001
From: Martyn Janes <martyn@obany.com>
Date: Tue, 9 Mar 2021 13:18:27 +0100
Subject: [PATCH 1/6] feat: Add spinner component

---
 packages/shared/components/Spinner.svelte | 18 ++++++++++++++++++
 packages/shared/components/index.js       |  1 +
 2 files changed, 19 insertions(+)
 create mode 100644 packages/shared/components/Spinner.svelte

diff --git a/packages/shared/components/Spinner.svelte b/packages/shared/components/Spinner.svelte
new file mode 100644
index 00000000000..808b3956a92
--- /dev/null
+++ b/packages/shared/components/Spinner.svelte
@@ -0,0 +1,18 @@
+<script lang="typescript">
+    import { Icon, Text } from 'shared/components'
+
+    export let busy = false
+    export let message = ''
+    export let classes = ''
+</script>
+
+{#if busy || message}
+    <div class={`flex flex-row items-center ${classes}`}>
+        {#if busy}
+        <Icon icon="refresh" classes="animate-spin text-gray-500 dark:text-white" />
+        {/if}
+        {#if message}
+            <Text type="p" classes="ml-2" secondary>{message}</Text>
+        {/if}
+    </div>
+{/if}
diff --git a/packages/shared/components/index.js b/packages/shared/components/index.js
index 9f9ffb14fd3..8867b949757 100644
--- a/packages/shared/components/index.js
+++ b/packages/shared/components/index.js
@@ -36,6 +36,7 @@ export { default as SecurityTile } from './SecurityTile.svelte'
 export { default as Idle } from './Idle.svelte'
 export { default as ToastContainer } from './ToastContainer.svelte'
 export { default as ProgressBar } from './ProgressBar.svelte'
+export { default as Spinner } from './Spinner.svelte'
 
 export * from './modals'
 // Charts

From 132b6ac8569a76450d94724ed150bddda94e9f4f Mon Sep 17 00:00:00 2001
From: Martyn Janes <martyn@obany.com>
Date: Tue, 9 Mar 2021 13:18:59 +0100
Subject: [PATCH 2/6] fix: Dont try and autolock if no active profile

---
 packages/shared/components/Idle.svelte | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/shared/components/Idle.svelte b/packages/shared/components/Idle.svelte
index f51c8d7f9d7..692de5d6bd1 100644
--- a/packages/shared/components/Idle.svelte
+++ b/packages/shared/components/Idle.svelte
@@ -10,13 +10,17 @@
     function handleEvent() {
         clearTimeout(timeout)
 
-        timeout = setTimeout(lock, $activeProfile.settings.lockScreenTimeout * 60 * 1000)
+        if ($activeProfile) {
+            timeout = setTimeout(lock, $activeProfile.settings.lockScreenTimeout * 60 * 1000)
+        }
     }
 
     function lock() {
         api.lockStronghold({
             onSuccess() {
-                destroyActor($activeProfile.id)
+                if ($activeProfile) {
+                    destroyActor($activeProfile.id)
+                }
                 resetWallet()
                 resetRouter()
             },

From 27ca92f85cbb1cfd646bde856c5f4883494115e2 Mon Sep 17 00:00:00 2001
From: Martyn Janes <martyn@obany.com>
Date: Tue, 9 Mar 2021 13:19:35 +0100
Subject: [PATCH 3/6] fix: Checkbox button type set, otherwise defaults to
 submit

---
 packages/shared/components/inputs/Checkbox.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/shared/components/inputs/Checkbox.svelte b/packages/shared/components/inputs/Checkbox.svelte
index e9dc7b417a8..fd479a8ba57 100644
--- a/packages/shared/components/inputs/Checkbox.svelte
+++ b/packages/shared/components/inputs/Checkbox.svelte
@@ -41,6 +41,7 @@
 <button
     data-label="checkbox-input"
     class={`flex items-center cursor-pointer ${classes}`}
+    type="button"
     {disabled}
     on:click={() => {
         checked = !checked

From b27fbd1ed1761e2f396be5b840338f1d1c9d1ac1 Mon Sep 17 00:00:00 2001
From: Martyn Janes <martyn@obany.com>
Date: Tue, 9 Mar 2021 13:19:57 +0100
Subject: [PATCH 4/6] feat: Password component dont show reveal button when
 disabled

---
 packages/shared/components/inputs/Password.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/components/inputs/Password.svelte b/packages/shared/components/inputs/Password.svelte
index 8867d4caa07..0c03f77d266 100644
--- a/packages/shared/components/inputs/Password.svelte
+++ b/packages/shared/components/inputs/Password.svelte
@@ -67,7 +67,7 @@
             placeholder={placeholder || locale('general.password')} 
             {submitHandler}
         />
-        {#if showRevealToggle === true}
+        {#if showRevealToggle === true && !disabled}
             <button type="button" on:click={() => revealToggle()} tabindex="-1" class="absolute top-3">
                 <Icon icon={revealed ? 'view' : 'hide'} classes="text-blue-500" />
             </button>

From 300b86f8417803ed586c48599938bacaef66243e Mon Sep 17 00:00:00 2001
From: Martyn Janes <martyn@obany.com>
Date: Tue, 9 Mar 2021 13:20:20 +0100
Subject: [PATCH 5/6] feat: Add delete profile confirmation

---
 .../components/popups/DeleteProfile.svelte    | 60 +++++++++++++++++++
 .../shared/components/popups/Index.svelte     |  4 +-
 2 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 packages/shared/components/popups/DeleteProfile.svelte

diff --git a/packages/shared/components/popups/DeleteProfile.svelte b/packages/shared/components/popups/DeleteProfile.svelte
new file mode 100644
index 00000000000..a009242f693
--- /dev/null
+++ b/packages/shared/components/popups/DeleteProfile.svelte
@@ -0,0 +1,60 @@
+<script lang="typescript">
+    import { Button, Text } from 'shared/components'
+    import { Electron } from 'shared/lib/electron'
+    import { showAppNotification } from 'shared/lib/notifications'
+    import { closePopup } from 'shared/lib/popup'
+    import { activeProfile, removeProfile } from 'shared/lib/profile'
+    import { resetRouter } from 'shared/lib/router'
+    import { api, destroyActor, resetWallet } from 'shared/lib/wallet'
+    import { get } from 'svelte/store'
+
+    export let locale
+
+    let isBusy = false
+
+    function deleteProfile() {
+        isBusy = true
+        Electron.PincodeManager.remove(get(activeProfile).id).then((isRemoved) => {
+            if (!isRemoved) {
+                throw new Error('Something went wrong removing pincode entry.')
+            }
+
+            // Remove storage
+            api.removeStorage({
+                onSuccess(res) {
+                    // Destroy wallet.rs actor for this profile
+                    destroyActor($activeProfile.id)
+
+                    resetWallet()
+                    resetRouter()
+
+                    // Remove profile from (local) storage
+                    // Note: This should be the last step in the reset process.
+                    // It should be done after the router is set back to default.
+                    // Otherwise, parts of the application referencing $activeProfile will create an exception.
+                    removeProfile($activeProfile.id)
+
+                    isBusy = false
+                    closePopup()
+                },
+                onError(err) {
+                    isBusy = false
+                    closePopup()
+                    showAppNotification({
+                        type: 'error',
+                        message: locale(err.error),
+                    })
+                },
+            })
+        })
+    }
+</script>
+
+<Text type="h4" classes="mb-5">{locale('popups.deleteProfile.title')}</Text>
+<div class="w-full h-full mb-5">
+    <Text>{locale('popups.deleteProfile.confirmation')}</Text>
+</div>
+<div class="flex flex-row justify-between space-x-4 w-full px-8 ">
+    <Button secondary classes="w-1/2" onClick={() => closePopup()} disabled={isBusy}>{locale('actions.no')}</Button>
+    <Button disabled={isBusy} classes="w-1/2" onClick={() => deleteProfile()} warning>{locale('actions.yes')}</Button>
+</div>
diff --git a/packages/shared/components/popups/Index.svelte b/packages/shared/components/popups/Index.svelte
index f41b5ba5020..853120a85aa 100644
--- a/packages/shared/components/popups/Index.svelte
+++ b/packages/shared/components/popups/Index.svelte
@@ -12,6 +12,7 @@
     import RemoveNode from './RemoveNode.svelte'
     import Busy from './Busy.svelte'
     import ErrorLog from './ErrorLog.svelte'
+    import DeleteProfile from './DeleteProfile.svelte'
 
     export let locale = 'en'
     export let type = undefined
@@ -30,7 +31,8 @@
         addNode: AddNode,
         removeNode: RemoveNode,
         busy: Busy,
-        errorLog: ErrorLog
+        errorLog: ErrorLog,
+        deleteProfile: DeleteProfile
     }
 
     const onkey = (e) => {

From a33ecb2a0cd4badef2f317c478ca872ef7d8e363 Mon Sep 17 00:00:00 2001
From: Martyn Janes <martyn@obany.com>
Date: Tue, 9 Mar 2021 13:20:46 +0100
Subject: [PATCH 6/6] fix: Add progress indicators and feedback on
 settings->security

---
 packages/shared/locales/en.json               |  15 +-
 .../dashboard/settings/views/Security.svelte  | 277 ++++++++++++------
 2 files changed, 197 insertions(+), 95 deletions(-)

diff --git a/packages/shared/locales/en.json b/packages/shared/locales/en.json
index 38c2e842503..89a60160214 100644
--- a/packages/shared/locales/en.json
+++ b/packages/shared/locales/en.json
@@ -330,6 +330,10 @@
         "errorLog": {
             "title": "Error Log",
             "empty": "The error log is empty."
+        },
+        "deleteProfile": {
+            "title": "Delete profile",
+            "confirmation": "Are you sure you want to delete this profile, this operation cannot be undone?"
         }
     },
     "charts": {
@@ -493,7 +497,16 @@
         "creatingAccount": "Creating account, please wait...",
         "updatingAccount": "Updating account, please wait...",
         "accountSyncing": "Account is syncing",
-        "accountSyncComplete": "Account sync complete"
+        "accountSyncComplete": "Account sync complete",
+        "passwordUpdating": "Updating password...",
+        "passwordSuccess": "Updated password successfully",
+        "passwordFailed": "Updating password failed",
+        "exportingStronghold": "Exporting stronghold...",
+        "exportingStrongholdSuccess": "Exported stronghold successfully",
+        "exportingStrongholdFailed": "Exported stronghold failed",
+        "pinCodeUpdating": "Updating PIN code...",
+        "pinCodeSuccess": "Updated PIN code successfully",
+        "pinCodeFailed": "Updating PIN code failed"
     },
     "dates": {
         "today": "Today",
diff --git a/packages/shared/routes/dashboard/settings/views/Security.svelte b/packages/shared/routes/dashboard/settings/views/Security.svelte
index 42012ec402c..4b028a632bd 100644
--- a/packages/shared/routes/dashboard/settings/views/Security.svelte
+++ b/packages/shared/routes/dashboard/settings/views/Security.svelte
@@ -1,14 +1,14 @@
 <script lang="typescript">
-    import { Button, Checkbox, Dropdown, Password, Text } from 'shared/components'
+    import { Button, Checkbox, Dropdown, Password, Spinner, Text } from 'shared/components'
     import { Electron } from 'shared/lib/electron'
+    import { showAppNotification } from 'shared/lib/notifications'
     import passwordInfo from 'shared/lib/password'
     import { openPopup } from 'shared/lib/popup'
-    import { activeProfile, removeProfile, updateProfile } from 'shared/lib/profile'
-    import { api, destroyActor, resetWallet } from 'shared/lib/wallet'
-    import { resetRouter } from 'shared/lib/router'
+    import { activeProfile, updateProfile } from 'shared/lib/profile'
+    import { PIN_LENGTH } from 'shared/lib/utils'
+    import { api } from 'shared/lib/wallet'
     import { get } from 'svelte/store'
     import zxcvbn from 'zxcvbn'
-    import { showAppNotification } from 'shared/lib/notifications'
 
     function assignTimeoutOptionLabel(timeInMinutes) {
         let label = ''
@@ -33,97 +33,90 @@
     let confirmedPassword = ''
     let currentPasswordError = ''
     let newPasswordError = ''
+    let exportBusy = false
+    let exportMessage = ''
 
     let currentPincode = ''
     let newPincode = ''
     let confirmedPincode = ''
     let currentPincodeError = ''
     let newPincodeError = ''
+    let pinCodeBusy = false
+    let pinCodeMessage = ''
+
+    let passwordChangeBusy = false
+    let passwordChangeMessage = ''
 
     const MAX_PASSWORD_LENGTH = 256
-    const MAX_PINCODE_LENGTH = 6
 
     $: passwordStrength = zxcvbn(newPassword)
 
-    function reset() {
-        Electron.PincodeManager.remove(get(activeProfile).id).then((isRemoved) => {
-            if (!isRemoved) {
-                throw new Error('Something went wrong removing pincode entry.')
-            }
-
-            // Remove storage
-            api.removeStorage({
-                onSuccess(res) {
-                    // Destroy wallet.rs actor for this profile
-                    destroyActor($activeProfile.id)
-
-                    resetWallet()
-                    resetRouter()
+    function handleExportClick() {
+        resetErrors()
 
-                    // Remove profile from (local) storage
-                    // Note: This should be the last step in the reset process. 
-                    // It should be done after the router is set back to default. 
-                    // Otherwise, parts of the application referencing $activeProfile will create an exception. 
-                    removeProfile($activeProfile.id)
+        const _callback = (cancelled, err) => {
+            setTimeout(
+                () => {
+                    exportMessage = ''
                 },
-                onError(err) {
+                cancelled ? 0 : 2000
+            )
+            exportBusy = false
+            if (!cancelled) {
+                if (err) {
+                    exportMessage = locale('general.exportingStrongholdFailed')
                     showAppNotification({
                         type: 'error',
-                        message: locale(err.error),
+                        message: locale(err),
                     })
-                },
-            })
-        })
-    }
+                } else {
+                    exportMessage = locale('general.exportingStrongholdSuccess')
+                }
+            }
+        }
 
-    function handleExportClick() {
         if (get(activeProfile).isStrongholdLocked) {
-            openPopup({ type: 'password', props: { onSuccess: exportStronghold } })
+            openPopup({
+                type: 'password',
+                props: {
+                    onSuccess: () => {
+                        exportBusy = true
+                        exportMessage = locale('general.exportingStronghold')
+                        exportStronghold(_callback)
+                    },
+                },
+            })
         } else {
-            exportStronghold()
+            exportBusy = true
+            exportMessage = locale('general.exportingStronghold')
+            exportStronghold(_callback)
         }
     }
 
-    function exportStronghold(callback?: () => void) {
+    function exportStronghold(callback?: (cancelled: boolean, err?: string) => void) {
         Electron.getStrongholdBackupDestination()
             .then((result) => {
                 if (result) {
                     api.backup(result, {
                         onSuccess() {
                             updateProfile('lastStrongholdBackupTime', new Date())
-
-                            if ('function' === typeof callback) {
-                                callback()
-                            }
+                            callback(false)
                         },
                         onError(err) {
-                            showAppNotification({
-                                type: 'error',
-                                message: locale(err.error),
-                            })
+                            callback(false, err.error)
                         },
                     })
+                } else {
+                    callback(true)
                 }
             })
-            .catch((err) =>
-                showAppNotification({
-                    type: 'error',
-                    message: locale(err.error),
-                })
-            )
+            .catch((err) => {
+                callback(false, err.error)
+            })
     }
 
     function changePassword() {
         resetErrors()
-        const _changePassword = () => {
-            console.log('changing password')
-            api.changeStrongholdPassword(currentPassword, newPassword, {
-                onSuccess() {},
-                onError(err) {
-                    currentPasswordError = locale(err.error)
-                },
-            })
-        }
 
         if (newPassword.length > MAX_PASSWORD_LENGTH) {
             newPasswordError = locale('error.password.length', {
@@ -138,52 +131,120 @@
                 ? locale(`error.password.${passwordInfo[passwordStrength.feedback.warning]}`)
                 : locale('error.password.tooWeak')
         } else {
-            if (exportStrongholdChecked) {
-                return exportStronghold(_changePassword)
+            passwordChangeBusy = true
+            passwordChangeMessage = locale('general.passwordUpdating')
+            let busyStart = Date.now()
+            const _clearMessage = () => {
+                setTimeout(() => (passwordChangeMessage = ''), 2000)
             }
-            _changePassword()
+            const _hideBusy = (message, timeout) => {
+                const diff = Date.now() - busyStart
+                if (diff < timeout) {
+                    setTimeout(() => {
+                        passwordChangeBusy = false
+                        passwordChangeMessage = message
+                        _clearMessage()
+                    }, timeout - diff)
+                } else {
+                    passwordChangeBusy = false
+                    passwordChangeMessage = message
+                    _clearMessage()
+                }
+            }
+
+            api.changeStrongholdPassword(currentPassword, newPassword, {
+                onSuccess() {
+                    if (exportStrongholdChecked) {
+                        passwordChangeMessage = locale('general.exportingStronghold')
+
+                        return exportStronghold((cancelled, err) => {
+                            if (cancelled) {
+                                _hideBusy('', 0)
+                            } else {
+                                if (err) {
+                                    currentPasswordError = locale(err)
+                                    _hideBusy(locale('general.passwordFailed'), 0)
+                                } else {
+                                    currentPassword = ''
+                                    newPassword = ''
+                                    confirmedPassword = ''
+                                    exportStrongholdChecked = false
+                                    _hideBusy(locale('general.passwordSuccess'), 2000)
+                                }
+                            }
+                        })
+                    } else {
+                        currentPassword = ''
+                        newPassword = ''
+                        confirmedPassword = ''
+                        exportStrongholdChecked = false
+                        _hideBusy(locale('general.passwordSuccess'), 2000)
+                    }
+                },
+                onError(err) {
+                    currentPasswordError = locale(err.error)
+                    _hideBusy(locale('general.passwordFailed'), 0)
+                },
+            })
         }
     }
 
     function changePincode() {
         resetErrors()
-        if (newPincode.length !== MAX_PINCODE_LENGTH) {
+
+        if (newPincode.length !== PIN_LENGTH) {
             newPincodeError = locale('error.pincode.length', {
                 values: {
-                    length: MAX_PINCODE_LENGTH,
+                    length: PIN_LENGTH,
                 },
             })
         } else if (newPincode !== confirmedPincode) {
             newPincodeError = locale('error.pincode.match')
         } else {
+            pinCodeBusy = true
+            pinCodeMessage = locale('general.pinCodeUpdating')
+
+            const _clear = (err?) => {
+                setTimeout(() => {
+                    pinCodeMessage = ''
+                }, 2000)
+                pinCodeBusy = false
+                if (err) {
+                    newPincodeError = err
+                    pinCodeMessage = locale('general.pinCodeFailed')
+                } else {
+                    pinCodeMessage = locale('general.pinCodeSuccess')
+                }
+            }
+
             Electron.PincodeManager.verify(get(activeProfile).id, currentPincode)
                 .then((valid) => {
                     if (valid) {
-                        return new Promise((resolve, reject) => {
+                        return new Promise<void>((resolve, reject) => {
                             api.setStoragePassword(newPincode, {
                                 onSuccess() {
                                     Electron.PincodeManager.set(get(activeProfile).id, newPincode)
-                                        .then(resolve)
                                         .then(() => {
                                             currentPincode = ''
                                             newPincode = ''
                                             confirmedPincode = ''
+                                            _clear()
+                                            resolve()
                                         })
                                         .catch(reject)
                                 },
                                 onError(err) {
-                                    showAppNotification({
-                                        type: 'error',
-                                        message: locale(err.error),
-                                    })
+                                    _clear(locale(err.error))
                                 },
                             })
                         })
                     } else {
-                        currentPincodeError = locale('error.pincode.incorrect')
+                        _clear(locale('error.pincode.incorrect'))
                     }
                 })
-                .catch(console.error)
+                .catch((err) => {
+                    _clear(err.message)
+                })
         }
     }
 
@@ -192,6 +253,16 @@
         newPasswordError = ''
         currentPincodeError = ''
         newPincodeError = ''
+        passwordChangeBusy = false
+        passwordChangeMessage = ''
+        pinCodeBusy = false
+        pinCodeMessage = ''
+        exportBusy = false
+        exportMessage = ''
+    }
+
+    function reset() {
+        openPopup({ type: 'deleteProfile' })
     }
 </script>
 
@@ -199,7 +270,10 @@
     <section id="exportStronghold" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.exportStronghold.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.exportStronghold.description')}</Text>
-        <Button classes="w-1/4 h-1/2" onClick={handleExportClick}>{locale('actions.export')}</Button>
+        <div class="flex flex-row items-center">
+            <Button classes="w-1/4 h-1/2" onClick={handleExportClick} disabled={exportBusy}>{locale('actions.export')}</Button>
+            <Spinner busy={exportBusy} message={exportMessage} classes="ml-2" />
+        </div>
     </section>
     <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
     <section id="appLock" class="w-3/4">
@@ -224,7 +298,7 @@
                 showRevealToggle
                 {locale}
                 placeholder={locale('general.currentPassword')}
-                autofocus />
+                disabled={passwordChangeBusy} />
             <Password
                 error={newPasswordError}
                 classes="mb-1"
@@ -234,21 +308,30 @@
                 showStrengthLevel
                 strength={passwordStrength.score}
                 {locale}
-                placeholder={locale('general.newPassword')} />
+                placeholder={locale('general.newPassword')}
+                disabled={passwordChangeBusy} />
             <Password
                 classes="mb-5"
                 bind:value={confirmedPassword}
                 showRevealToggle
                 {locale}
-                placeholder={locale('general.confirmNewPassword')} />
-            <Checkbox classes="mb-5" label={locale('actions.exportNewStronghold')} bind:checked={exportStrongholdChecked} />
-            <Button
-                form="form-change-password"
-                type="submit"
-                classes="w-1/4"
-                disabled={!currentPassword || !newPassword || !confirmedPassword}>
-                {locale('views.settings.changePassword.title')}
-            </Button>
+                placeholder={locale('general.confirmNewPassword')}
+                disabled={passwordChangeBusy} />
+            <Checkbox
+                classes="mb-5"
+                label={locale('actions.exportNewStronghold')}
+                bind:checked={exportStrongholdChecked}
+                disabled={passwordChangeBusy} />
+            <div class="flex flex-row items-center">
+                <Button
+                    form="form-change-password"
+                    type="submit"
+                    classes="w-1/4"
+                    disabled={!currentPassword || !newPassword || !confirmedPassword || passwordChangeBusy}>
+                    {locale('views.settings.changePassword.title')}
+                </Button>
+                <Spinner busy={passwordChangeBusy} message={passwordChangeMessage} classes="ml-2" />
+            </div>
         </form>
     </section>
     <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
@@ -264,7 +347,8 @@
                 {locale}
                 maxlength="6"
                 numeric
-                placeholder={locale('views.settings.changePincode.currentPincode')} />
+                placeholder={locale('views.settings.changePincode.currentPincode')}
+                disabled={pinCodeBusy} />
             <Password
                 error={newPincodeError}
                 classes="mb-1"
@@ -273,7 +357,8 @@
                 {locale}
                 maxlength="6"
                 numeric
-                placeholder={locale('views.settings.changePincode.newPincode')} />
+                placeholder={locale('views.settings.changePincode.newPincode')}
+                disabled={pinCodeBusy} />
             <Password
                 classes="mb-5"
                 bind:value={confirmedPincode}
@@ -281,20 +366,24 @@
                 {locale}
                 maxlength="6"
                 numeric
-                placeholder={locale('views.settings.changePincode.confirmNewPincode')} />
-            <Button
-                type="submit"
-                form="pincode-change-form"
-                classes="w-1/4 mb-5"
-                disabled={!currentPincode || !newPincode || !confirmedPincode}>
-                {locale('views.settings.changePincode.action')}
-            </Button>
+                placeholder={locale('views.settings.changePincode.confirmNewPincode')}
+                disabled={pinCodeBusy} />
+            <div class="flex flex-row items-center">
+                <Button
+                    type="submit"
+                    form="pincode-change-form"
+                    classes="w-1/4 mb-5"
+                    disabled={!currentPincode || !newPincode || !confirmedPincode || pinCodeBusy}>
+                    {locale('views.settings.changePincode.action')}
+                </Button>
+                <Spinner busy={pinCodeBusy} message={pinCodeMessage} classes="ml-2" />
+            </div>
         </form>
     </section>
     <hr class="border-t border-gray-100 w-full border-solid pb-5 mt-5 justify-center" />
     <section id="deleteProfile" class="w-3/4">
         <Text type="h4" classes="mb-3">{locale('views.settings.deleteProfile.title')}</Text>
         <Text type="p" secondary classes="mb-5">{locale('views.settings.deleteProfile.description')}</Text>
-        <Button classes="w-1/4" onClick={reset}>{locale('views.settings.deleteProfile.title')}</Button>
+        <Button classes="w-1/4" warning onClick={reset}>{locale('views.settings.deleteProfile.title')}</Button>
     </section>
 </div>