diff --git a/interface/resources/qml/hifi/commerce/wallet/SecurityImageSelection.qml b/interface/resources/qml/hifi/commerce/wallet/SecurityImageSelection.qml index 984a5c932a..4086f868fb 100644 --- a/interface/resources/qml/hifi/commerce/wallet/SecurityImageSelection.qml +++ b/interface/resources/qml/hifi/commerce/wallet/SecurityImageSelection.qml @@ -24,8 +24,6 @@ Item { HifiConstants { id: hifi; } id: root; - anchors.fill: parent; - visible: false; Hifi.QmlCommerce { id: commerce; @@ -96,6 +94,10 @@ Item { function getImagePathFromImageID(imageID) { return (imageID ? gridModel.get(imageID - 1).sourcePath : ""); } + + function getSelectedImageIndex() { + return gridModel.get(securityImageGrid.currentIndex).securityImageEnumValue; + } // // FUNCTION DEFINITIONS END // diff --git a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml index b200c7467f..191081118b 100644 --- a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml +++ b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml @@ -36,17 +36,27 @@ Rectangle { } } } + Connections { + target: walletSetupLightbox; + onSignalSent: { + sendToScript(msg); + } + } Rectangle { + id: walletSetupLightboxContainer; + visible: walletSetupLightbox.visible; + z: 998; anchors.fill: parent; color: "black"; opacity: 0.5; - WalletSetupLightbox { - id: walletSetupLightbox; - anchors.centerIn: parent; - width: parent.width - 50; - height: parent.height - 50; - } + } + WalletSetupLightbox { + id: walletSetupLightbox; + z: 999; + anchors.centerIn: walletSetupLightboxContainer; + width: walletSetupLightboxContainer.width - 50; + height: walletSetupLightboxContainer.height - 50; } // @@ -146,6 +156,7 @@ Rectangle { verticalAlignment: Text.AlignVCenter; } MouseArea { + enabled: !walletSetupLightboxContainer.visible; anchors.fill: parent; hoverEnabled: enabled; onClicked: { @@ -180,6 +191,7 @@ Rectangle { verticalAlignment: Text.AlignVCenter; } MouseArea { + enabled: !walletSetupLightboxContainer.visible; anchors.fill: parent; hoverEnabled: enabled; onClicked: { @@ -214,6 +226,7 @@ Rectangle { verticalAlignment: Text.AlignVCenter; } MouseArea { + enabled: !walletSetupLightboxContainer.visible; anchors.fill: parent; hoverEnabled: enabled; onClicked: { @@ -248,6 +261,7 @@ Rectangle { verticalAlignment: Text.AlignVCenter; } MouseArea { + enabled: !walletSetupLightboxContainer.visible; anchors.fill: parent; hoverEnabled: enabled; onClicked: { diff --git a/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml b/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml index 393a6727a8..9fdb27064e 100644 --- a/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml +++ b/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml @@ -24,30 +24,32 @@ Rectangle { HifiConstants { id: hifi; } id: root; - property int stepNumber: 0; + property string lastPage: ""; // Style - color: hifi.colors.white; - anchors.fill: parent; + color: "white"; Hifi.QmlCommerce { id: commerce; onLoginStatusResult: { if (isLoggedIn) { - loginPageContainer.visible = false; - commerce.getSecurityImage(); + securityImageContainer.visible = true; } else { loginPageContainer.visible = true; } } onSecurityImageResult: { - loginPageContainer.visible = false; if (imageID !== 0) { // "If security image is set up" - commerce.getPassphraseSetupStatus(); passphrasePageSecurityImage.source = securityImageSelection.getImagePathFromImageID(imageID); - } else { + if (root.lastPage === "") { + securityImageContainer.visible = false; + choosePassphraseContainer.visible = true; + } + } else if (root.lastPage === "securityImage") { + // ERROR! Invalid security image. securityImageContainer.visible = true; + choosePassphraseContainer.visible = false; } } @@ -94,7 +96,7 @@ Rectangle { anchors.bottom: parent.bottom; width: paintedWidth; // Style - color: hifi.colors.lightGrayText; + color: hifi.colors.darkGray; // Alignment horizontalAlignment: Text.AlignHLeft; verticalAlignment: Text.AlignVCenter; @@ -141,6 +143,12 @@ Rectangle { // Anchors anchors.fill: parent; + onVisibleChanged: { + if (visible) { + commerce.getSecurityImage(); + } + } + Item { id: securityImageTitle; // Size @@ -162,7 +170,7 @@ Rectangle { anchors.bottom: parent.bottom; width: paintedWidth; // Style - color: hifi.colors.lightGrayText; + color: hifi.colors.darkGray; // Alignment horizontalAlignment: Text.AlignHLeft; verticalAlignment: Text.AlignVCenter; @@ -172,9 +180,9 @@ Rectangle { // Text below title bar RalewaySemiBold { id: securityImageTitleHelper; - text: "Choose a Security Picture"; + text: "Choose a Security Picture:"; // Text size - size: hifi.fontSizes.overlayTitle; + size: 24; // Anchors anchors.top: securityImageTitle.bottom; anchors.left: parent.left; @@ -182,7 +190,7 @@ Rectangle { height: 50; width: paintedWidth; // Style - color: hifi.colors.lightGrayText; + color: hifi.colors.darkGray; // Alignment horizontalAlignment: Text.AlignHLeft; verticalAlignment: Text.AlignVCenter; @@ -193,8 +201,31 @@ Rectangle { // Anchors anchors.top: securityImageTitleHelper.bottom; anchors.left: parent.left; + anchors.leftMargin: 16; anchors.right: parent.right; - height: 350; + anchors.rightMargin: 16; + height: 280; + } + + // Text below security images + RalewaySemiBold { + text: "Your security picture shows you that the service asking for your passphrase is authorized. You can change your secure picture at any time."; + // Text size + size: 18; + // Anchors + anchors.top: securityImageSelection.bottom; + anchors.topMargin: 40; + anchors.left: parent.left; + anchors.leftMargin: 16; + anchors.right: parent.right; + anchors.rightMargin: 16; + height: paintedHeight; + // Style + color: hifi.colors.darkGray; + wrapMode: Text.WordWrap; + // Alignment + horizontalAlignment: Text.AlignHLeft; + verticalAlignment: Text.AlignVCenter; } // Navigation Bar @@ -219,7 +250,7 @@ Rectangle { width: 100; text: "Cancel" onClicked: { - + signalSent({method: 'securityImageSelection_cancelClicked'}); } } @@ -236,7 +267,10 @@ Rectangle { width: 100; text: "Next"; onClicked: { - + root.lastPage = "securityImage"; + commerce.chooseSecurityImage(securityImageSelection.getSelectedImageIndex()); + securityImageContainer.visible = false; + choosePassphraseContainer.visible = true; } } } @@ -254,6 +288,12 @@ Rectangle { // Anchors anchors.fill: parent; + onVisibleChanged: { + if (visible) { + commerce.getPassphraseSetupStatus(); + } + } + Item { // Size width: parent.width; @@ -274,7 +314,7 @@ Rectangle { anchors.bottom: parent.bottom; width: paintedWidth; // Style - color: hifi.colors.lightGrayText; + color: hifi.colors.darkGray; // Alignment horizontalAlignment: Text.AlignHLeft; verticalAlignment: Text.AlignVCenter; @@ -303,7 +343,9 @@ Rectangle { width: 100; text: "Back" onClicked: { - + root.lastPage = "choosePassphrase"; + choosePassphraseContainer.visible = false; + securityImageContainer.visible = true; } } @@ -374,7 +416,7 @@ Rectangle { anchors.bottom: parent.bottom; width: paintedWidth; // Style - color: hifi.colors.lightGrayText; + color: hifi.colors.darkGray; // Alignment horizontalAlignment: Text.AlignHLeft; verticalAlignment: Text.AlignVCenter; @@ -388,27 +430,7 @@ Rectangle { // // FUNCTION DEFINITIONS START // - // - // Function Name: fromScript() - // - // Relevant Variables: - // None - // - // Arguments: - // message: The message sent from the JavaScript. - // Messages are in format "{method, params}", like json-rpc. - // - // Description: - // Called when a message is received from a script. - // - function fromScript(message) { - switch (message.method) { - default: - console.log('Unrecognized message from wallet.js:', JSON.stringify(message)); - } - } - signal sendToScript(var message); - + signal signalSent(var msg); // // FUNCTION DEFINITIONS END // diff --git a/scripts/system/commerce/wallet.js b/scripts/system/commerce/wallet.js index 866bb613a7..330fad97a7 100644 --- a/scripts/system/commerce/wallet.js +++ b/scripts/system/commerce/wallet.js @@ -55,6 +55,9 @@ // in the format "{method, params}", like json-rpc. See also sendToQml(). function fromQml(message) { switch (message.method) { + case 'securityImageSelection_cancelClicked': + tablet.gotoHomeScreen(); + break; default: print('Unrecognized message from QML:', JSON.stringify(message)); }