chore(@desktop/general): password confirmation identified as shared component

ui/app/AppLayouts/Onboarding/views/ConfirmPasswordView.qml

@@ -1,52 +1,33 @@
 import QtQuick 2.0
-import QtQuick.Controls 2.13
 import QtQuick.Layouts 1.12
 
-import shared.controls 1.0
+import StatusQ.Controls 0.1
-import shared 1.0
+
-import shared.panels 1.0
+import shared.views 1.0
-import shared.stores 1.0
 import utils 1.0
 
-import StatusQ.Controls 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-
 import "../stores"
-import "../controls"
 
 Item {
     id: root
 
     property StartupStore startupStore
 
-    property string password
-
     Component.onCompleted: {
-        root.password = root.startupStore.getPassword()
+        passwordView.forceInputFocus()
-        d.forcePasswordInputFocus()
     }
 
     QtObject {
         id: d
 
-        function checkPasswordMatches() {
+        property bool submitEnabled: !submitBtn.loading && passwordView.passwordMatch
-            if (confPswInput.text !== root.password) {
-                errorTxt.text = qsTr("Passwords don't match")
-                return false
-            }
-            return true
-        }
 
         function submit() {
-            if (!checkPasswordMatches()) {
+            if (!d.submitEnabled) {
                 return
             }
-
             root.startupStore.doPrimaryAction()
         }
-
-        function forcePasswordInputFocus() { confPswInput.forceActiveFocus(Qt.MouseFocusReason) }
     }
 
     ColumnLayout {
@@ -55,78 +36,18 @@ Item {
         height: 460
         anchors.centerIn: parent
 
-        StatusBaseText {
+        PasswordConfirmationView {
-            Layout.alignment: Qt.AlignHCenter
+            id: passwordView
-            text: qsTr("Have you written down your password?")
-            font.pixelSize: 22
-            font.bold: true
-            color: Theme.palette.directColor1
-        }
 
-        ColumnLayout {
+            Layout.fillWidth: true
-            Layout.alignment: Qt.AlignHCenter
-            spacing: 4
-
-            StatusBaseText {
-                Layout.alignment: Qt.AlignHCenter
-                text: qsTr("You will never be able to recover your password if you lose it.")
-                font.pixelSize: 15
-                color: Theme.palette.dangerColor1
-            }
-
-            StatusBaseText {
-                Layout.alignment: Qt.AlignHCenter
-                text: qsTr("If you need to, write it using pen and paper and keep in a safe place.")
-                font.pixelSize: 15
-                color: Theme.palette.baseColor1
-            }
-
-            StatusBaseText {
-                Layout.alignment: Qt.AlignHCenter
-                text: qsTr("If you lose your password you will lose access to your Status profile.")
-                font.pixelSize: 15
-                color: Theme.palette.baseColor1
-            }
-        }
-
-        StatusPasswordInput {
-            id: confPswInput
-
-            property bool showPassword: false
-
-            objectName: "confirmAgainPasswordInput"
-            Layout.preferredWidth: 416
-            Layout.alignment: Qt.AlignHCenter
-            enabled: !submitBtn.loading
-            placeholderText: qsTr("Confirm your password (again)")
-            echoMode: showPassword ? TextInput.Normal : TextInput.Password
-            validator: RegExpValidator { regExp: /^[!-~]{0,64}$/ } // That incudes NOT extended ASCII printable characters less space and a maximum of 64 characters allowed
-            rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
-            onTextChanged: { errorTxt.text = "" }
-            Keys.onReturnPressed: { if(submitBtn.enabled) d.submit()}
-
-            StatusFlatRoundButton {
-                id: showHideCurrentIcon
-                visible: confPswInput.text !== ""
-                anchors.verticalCenter: parent.verticalCenter
-                anchors.right: parent.right
-                anchors.rightMargin: 16
-                width: 24
-                height: 24
-                icon.name: confPswInput.showPassword ? "hide" : "show"
-                icon.color: Theme.palette.baseColor1
-
-                onClicked: confPswInput.showPassword = !confPswInput.showPassword
-            }
-        }
-
-        StatusBaseText {
-            id: errorTxt
-            Layout.alignment: Qt.AlignHCenter
             Layout.fillHeight: true
-            Layout.topMargin: -Style.current.halfPadding
+            spacing: Style.current.bigPadding
-            font.pixelSize: 12
+
-            color: Theme.palette.dangerColor1
+            expectedPassword: root.startupStore.getPassword()
+
+            onSubmit: {
+                d.submit()
+            }
         }
 
         StatusButton {
@@ -134,17 +55,10 @@ Item {
             objectName: "confirmPswSubmitBtn"
             Layout.alignment: Qt.AlignHCenter
             text: qsTr("Finalise Status Password Creation")
-            enabled: !submitBtn.loading && (confPswInput.text === root.password)
+            enabled: d.submitEnabled
 
-            onClicked: { d.submit() }
+            onClicked: {
-        }
+                d.submit()
-    }
-
-    Connections {
-        target: RootStore.privacyModule
-        function onPasswordChanged(success: bool, errorMsg: string) {
-            if (success) {
-                submitBtn.loading = false
             }
         }
     }

ui/imports/shared/views/PasswordConfirmationView.qml

@@ -0,0 +1,110 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.12
+
+import StatusQ.Controls 0.1
+import StatusQ.Core 0.1
+import StatusQ.Core.Theme 0.1
+
+import utils 1.0
+
+ColumnLayout {
+    id: root
+
+    required property string expectedPassword
+    property bool passwordMatch
+
+    signal submit()
+
+    function forceInputFocus() {
+        confPswInput.forceActiveFocus(Qt.MouseFocusReason)
+    }
+
+    QtObject {
+        id: d
+
+        function updatePasswordMatch() {
+            root.passwordMatch = confPswInput.text === root.expectedPassword
+            if (!root.passwordMatch) {
+                errorTxt.text = qsTr("Passwords don't match")
+            }
+        }
+    }
+
+    StatusBaseText {
+        Layout.alignment: Qt.AlignHCenter
+        text: qsTr("Have you written down your password?")
+        font.pixelSize: 22
+        font.bold: true
+        color: Theme.palette.directColor1
+    }
+
+    ColumnLayout {
+        Layout.alignment: Qt.AlignHCenter
+        spacing: 4
+
+        StatusBaseText {
+            Layout.alignment: Qt.AlignHCenter
+            text: qsTr("You will never be able to recover your password if you lose it.")
+            font.pixelSize: 15
+            color: Theme.palette.dangerColor1
+        }
+
+        StatusBaseText {
+            Layout.alignment: Qt.AlignHCenter
+            text: qsTr("If you need to, write it using pen and paper and keep in a safe place.")
+            font.pixelSize: 15
+            color: Theme.palette.baseColor1
+        }
+
+        StatusBaseText {
+            Layout.alignment: Qt.AlignHCenter
+            text: qsTr("If you lose your password you will lose access to your Status profile.")
+            font.pixelSize: 15
+            color: Theme.palette.baseColor1
+        }
+    }
+
+    StatusPasswordInput {
+        id: confPswInput
+
+        property bool showPassword: false
+
+        objectName: "confirmAgainPasswordInput"
+        Layout.preferredWidth: 416
+        Layout.alignment: Qt.AlignHCenter
+        placeholderText: qsTr("Confirm your password (again)")
+        echoMode: showPassword ? TextInput.Normal : TextInput.Password
+        validator: RegExpValidator { regExp: /^[!-~]{0,64}$/ } // That incudes NOT extended ASCII printable characters less space and a maximum of 64 characters allowed
+        rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
+        onTextChanged: {
+            errorTxt.text = ""
+            d.updatePasswordMatch()
+        }
+        Keys.onReturnPressed: {
+            root.submit()
+        }
+
+        StatusFlatRoundButton {
+            id: showHideCurrentIcon
+            visible: confPswInput.text !== ""
+            anchors.verticalCenter: parent.verticalCenter
+            anchors.right: parent.right
+            anchors.rightMargin: 16
+            width: 24
+            height: 24
+            icon.name: confPswInput.showPassword ? "hide" : "show"
+            icon.color: Theme.palette.baseColor1
+
+            onClicked: confPswInput.showPassword = !confPswInput.showPassword
+        }
+    }
+
+    StatusBaseText {
+        id: errorTxt
+        Layout.alignment: Qt.AlignHCenter
+        Layout.fillHeight: true
+        Layout.topMargin: -Style.current.halfPadding
+        font.pixelSize: 12
+        color: Theme.palette.dangerColor1
+    }
+}

ui/imports/shared/views/qmldir

@@ -5,6 +5,7 @@ ExistingContacts 1.0 ExistingContacts.qml
 HistoryView 1.0 HistoryView.qml
 NoFriendsRectangle 1.0 NoFriendsRectangle.qml
 PasswordView 1.0 PasswordView.qml
+PasswordConfirmationView 1.0 PasswordConfirmationView.qml
 PickedContacts 1.0 PickedContacts.qml
 ProfileDialogView 1.0 ProfileDialogView.qml
 SearchResults 1.0 SearchResults.qml