From 69312aed2985d0ec76ddc8ed823387b1a49f9959 Mon Sep 17 00:00:00 2001
From: Stefan <stefand@status.im>
Date: Mon, 18 Mar 2024 20:42:50 +0200
Subject: [PATCH] feat(settings) blur background when re-encrypting due to
 password change

Closes: #13992
---
 storybook/main.qml                            |  5 ++
 .../popups/ConfirmChangePasswordModal.qml     | 60 ++++++++++++++++++-
 2 files changed, 62 insertions(+), 3 deletions(-)

diff --git a/storybook/main.qml b/storybook/main.qml
index c09ae21e5f..20a8906bcb 100644
--- a/storybook/main.qml
+++ b/storybook/main.qml
@@ -31,6 +31,11 @@ ApplicationWindow {
 
     onCurrentPageChanged: testsReRunTimer.restart()
 
+    // We need to set Global.applicationWindow to test components that relies on it e.g. ConfirmChangePasswordModal
+    Component.onCompleted: {
+        Global.applicationWindow = this;
+    }
+
     QtObject {
         id: d
 
diff --git a/ui/app/AppLayouts/Profile/popups/ConfirmChangePasswordModal.qml b/ui/app/AppLayouts/Profile/popups/ConfirmChangePasswordModal.qml
index a483ddf6da..390a11287f 100644
--- a/ui/app/AppLayouts/Profile/popups/ConfirmChangePasswordModal.qml
+++ b/ui/app/AppLayouts/Profile/popups/ConfirmChangePasswordModal.qml
@@ -2,7 +2,7 @@ import QtQuick 2.15
 import QtQuick.Controls 2.15
 import QtQuick.Layouts 1.12
 import QtQml.Models 2.15
-
+import QtGraphicalEffects 1.15
 
 import utils 1.0
 import shared 1.0
@@ -48,11 +48,65 @@ StatusDialog {
 
     width: 480
     height: 546
-    closePolicy: d.passwordChanged ||  d.dbEncryptionInProgress ? Popup.NoAutoClose : Popup.CloseOnEscape | Popup.CloseOnPressOutside
+    closePolicy: d.passwordChanged || d.dbEncryptionInProgress
+                     ? Popup.NoAutoClose
+                     : Popup.CloseOnEscape | Popup.CloseOnPressOutside
+
+    // Overwrite the default modal background with a conditioned blurred one
+    Overlay.modal: Item {
+        Rectangle {
+            id: normalBackground
+            anchors.fill: parent
+            visible: !blurredBackground.visible
+            color: Theme.palette.backdropColor
+        }
+        Item {
+            id: blurredBackground
+
+            anchors.fill: parent
+            visible: d.dbEncryptionInProgress
+
+            // Update the blur source only once, when the modal is shown for performance reasons
+            onVisibleChanged: {
+                if (!visible) {
+                    return;
+                }
+                blurSource.scheduleUpdate()
+            }
+
+            GaussianBlur {
+                visible: true
+
+                anchors.fill: parent
+                source: blurSource
+                radius: 16
+                samples: 16
+
+                Rectangle {
+                    anchors.fill: parent
+                    color: normalBackground.color
+                    opacity: 0.6
+                }
+            }
+
+            // Capture the entire main window content to be blurred
+            ShaderEffectSource {
+                id: blurSource
+
+                sourceItem: Global.applicationWindow.contentItem
+                width: Global.applicationWindow.contentItem.width
+                height: Global.applicationWindow.contentItem.height
+
+                live: false
+                visible: false
+            }
+        }
+    }
 
     Column {
         anchors.fill: parent
         spacing: 20
+
         StatusBaseText {
             width: parent.width
             wrapMode: Text.WordWrap
@@ -109,7 +163,7 @@ StatusDialog {
         id: footer
         leftButtons: ObjectModel {
             StatusFlatButton {
-                text: qsTr("Cancel")  
+                text: qsTr("Cancel")
                 visible: !d.dbEncryptionInProgress && !d.passwordChanged
                 textColor: Style.current.darkGrey
                 onClicked: { root.close(); }