MOAR PROGRESS

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
     //

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;
+        z: 999;
-            width: parent.width - 50;
+        anchors.centerIn: walletSetupLightboxContainer;
-            height: parent.height - 50;
+        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: {

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;
+    color: "white";
-    anchors.fill: parent;
 
     Hifi.QmlCommerce {
         id: commerce;
 
         onLoginStatusResult: {
             if (isLoggedIn) {
-                loginPageContainer.visible = false;
+                securityImageContainer.visible = true;
-                commerce.getSecurityImage();
             } 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: "<b>Your security picture shows you that the service asking for your passphrase is authorized. You can change your secure picture at any time.</b>";
+            // 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
     //
-    //
+    signal signalSent(var msg);
-    // 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);
-
     //
     // FUNCTION DEFINITIONS END
     //

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));
         }