Almost-working change pages

interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml

@@ -27,6 +27,9 @@ Item {
 
     Hifi.QmlCommerce {
         id: commerce;
+        onSecurityImageResult: {
+            passphrasePageSecurityImage.source = gridModel.getImagePathFromImageID(imageID);
+        }
     }
 
     onVisibleChanged: {
@@ -35,6 +38,10 @@ Item {
         }
     }
 
+    SecurityImageModel {
+        id: gridModel;
+    }
+
     HifiControlsUit.TextField {
         id: passphraseField;
         anchors.top: parent.top;
@@ -73,6 +80,10 @@ Item {
             width: height;
             fillMode: Image.PreserveAspectFit;
             mipmap: true;
+
+            onVisibleChanged: {
+                commerce.getSecurityImage();
+            }
         }
         // "Security picture" text below pic
         RalewayRegular {
@@ -175,19 +186,24 @@ Item {
 
     function validateAndSubmitPassphrase() {
         if (passphraseField.text.length < 4) {
-            errorText.text = "Passphrase too short."
+            setErrorText("Passphrase too short.");
             return false;
         } else if (passphraseField.text !== passphraseFieldAgain.text) {
-            errorText.text = "Passphrases don't match."
+            setErrorText("Passphrases don't match.");
             return false;
         } else {
-            errorText.text = "";
+            setErrorText("");
             commerce.setPassphrase(passphraseField.text);
             return true;
         }
     }
 
-    function setSecurityImage(imageSource) {
+    function setErrorText(text) {
-        passphrasePageSecurityImage.source = imageSource;
+        errorText.text = text;
+    }
+
+    function clearText() {
+        passphraseField.text = "";
+        passphraseFieldAgain.text = "";
     }
 }

interface/resources/qml/hifi/commerce/wallet/PassphraseSelectionLightbox.qml

@@ -0,0 +1,165 @@
+//
+//  PassphraseSelectionLightbox.qml
+//  qml/hifi/commerce/wallet
+//
+//  PassphraseSelectionLightbox
+//
+//  Created by Zach Fox on 2017-08-18
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import Hifi 1.0 as Hifi
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import "../../../styles-uit"
+import "../../../controls-uit" as HifiControlsUit
+import "../../../controls" as HifiControls
+
+// references XXX from root context
+
+Rectangle {
+    HifiConstants { id: hifi; }
+
+    id: root;
+    // Style
+    color: hifi.colors.baseGray;
+
+    Hifi.QmlCommerce {
+        id: commerce;
+
+        onPassphraseSetupStatusResult: {
+            console.log("ZRF HERE " + passphraseIsSetup);
+            if (passphraseIsSetup) {
+                // Success submitting new passphrase
+                passphraseSubmitButton.enabled = true;
+                root.visible = false;
+            } else {
+                // Error submitting new passphrase
+                passphraseSubmitButton.enabled = true;
+                passphraseSelection.setErrorText("Backend error");
+            }
+        }
+    }
+
+    //
+    // SECURE PASSPHRASE SELECTION START
+    //
+    Item {
+        id: choosePassphraseContainer;
+        // Anchors
+        anchors.fill: parent;
+
+        Item {
+            id: passphraseTitle;
+            // Size
+            width: parent.width;
+            height: 50;
+            // Anchors
+            anchors.left: parent.left;
+            anchors.top: parent.top;
+
+            // Title Bar text
+            RalewaySemiBold {
+                text: "CHANGE PASSPHRASE";
+                // Text size
+                size: hifi.fontSizes.overlayTitle;
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: parent.left;
+                anchors.leftMargin: 16;
+                anchors.bottom: parent.bottom;
+                width: paintedWidth;
+                // Style
+                color: hifi.colors.faintGray;
+                // Alignment
+                horizontalAlignment: Text.AlignHLeft;
+                verticalAlignment: Text.AlignVCenter;
+            }
+        }
+
+        // Text below title bar
+        RalewaySemiBold {
+            id: passphraseTitleHelper;
+            text: "Choose a Secure Passphrase";
+            // Text size
+            size: 24;
+            // Anchors
+            anchors.top: passphraseTitle.bottom;
+            anchors.left: parent.left;
+            anchors.leftMargin: 16;
+            anchors.right: parent.right;
+            anchors.rightMargin: 16;
+            height: 50;
+            // Style
+            color: hifi.colors.faintGray;
+            // Alignment
+            horizontalAlignment: Text.AlignHLeft;
+            verticalAlignment: Text.AlignVCenter;
+        }
+
+        PassphraseSelection {
+            id: passphraseSelection;
+            anchors.top: passphraseTitleHelper.bottom;
+            anchors.topMargin: 30;
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            anchors.bottom: passphraseNavBar.top;
+        }
+
+        // Navigation Bar
+        Item {
+            id: passphraseNavBar;
+            // Size
+            width: parent.width;
+            height: 100;
+            // Anchors:
+            anchors.left: parent.left;
+            anchors.bottom: parent.bottom;
+
+            // "Cancel" button
+            HifiControlsUit.Button {
+                color: hifi.buttons.black;
+                colorScheme: hifi.colorSchemes.dark;
+                anchors.top: parent.top;
+                anchors.topMargin: 3;
+                anchors.bottom: parent.bottom;
+                anchors.bottomMargin: 3;
+                anchors.left: parent.left;
+                anchors.leftMargin: 20;
+                width: 100;
+                text: "Cancel"
+                onClicked: {
+                    passphraseSelection.clearText();
+                    root.visible = false;
+                }
+            }
+
+            // "Submit" button
+            HifiControlsUit.Button {
+                id: passphraseSubmitButton;
+                color: hifi.buttons.black;
+                colorScheme: hifi.colorSchemes.dark;
+                anchors.top: parent.top;
+                anchors.topMargin: 3;
+                anchors.bottom: parent.bottom;
+                anchors.bottomMargin: 3;
+                anchors.right: parent.right;
+                anchors.rightMargin: 20;
+                width: 100;
+                text: "Submit";
+                onClicked: {
+                    if (passphraseSelection.validateAndSubmitPassphrase()) {
+                        passphraseSubmitButton.text = "Submitting...";
+                        passphraseSubmitButton.enabled = false;
+                    }
+                }
+            }
+        }
+    }
+    //
+    // SECURE PASSPHRASE SELECTION END
+    //
+}

interface/resources/qml/hifi/commerce/wallet/Security.qml

@@ -105,7 +105,7 @@ Item {
         }
 
         Item {
-            id: resetPassphraseContainer;
+            id: changePassphraseContainer;
             anchors.top: securityText.bottom;
             anchors.topMargin: 16;
             anchors.left: parent.left;
@@ -113,7 +113,7 @@ Item {
             height: 75;
 
             Image {
-                id: resetPassphraseImage;
+                id: changePassphraseImage;
                 // Anchors
                 anchors.top: parent.top;
                 anchors.left: parent.left;
@@ -122,33 +122,33 @@ Item {
                 fillMode: Image.PreserveAspectFit;
                 mipmap: true;
             }
-            // "Reset Passphrase" button
+            // "Change Passphrase" button
             HifiControlsUit.Button {
-                id: resetPassphraseButton;
+                id: changePassphraseButton;
                 color: hifi.buttons.black;
                 colorScheme: hifi.colorSchemes.dark;
                 anchors.verticalCenter: parent.verticalCenter;
-                anchors.left: resetPassphraseImage.right;
+                anchors.left: changePassphraseImage.right;
                 anchors.leftMargin: 16;
                 width: 250;
                 height: 50;
-                text: "Reset My Passphrase";
+                text: "Change My Passphrase";
                 onClicked: {
-                    
+                    sendSignalToWallet({method: 'walletSecurity_changePassphrase'});
                 }
             }
         }
 
         Item {
-            id: resetSecurityImageContainer;
+            id: changeSecurityImageContainer;
-            anchors.top: resetPassphraseContainer.bottom;
+            anchors.top: changePassphraseContainer.bottom;
             anchors.topMargin: 8;
             anchors.left: parent.left;
             anchors.right: parent.right;
             height: 75;
 
             Image {
-                id: resetSecurityImageImage;
+                id: changeSecurityImageImage;
                 // Anchors
                 anchors.top: parent.top;
                 anchors.left: parent.left;
@@ -157,19 +157,19 @@ Item {
                 fillMode: Image.PreserveAspectFit;
                 mipmap: true;
             }
-            // "Reset Security Image" button
+            // "Change Security Image" button
             HifiControlsUit.Button {
-                id: resetSecurityImageButton;
+                id: changeSecurityImageButton;
                 color: hifi.buttons.black;
                 colorScheme: hifi.colorSchemes.dark;
                 anchors.verticalCenter: parent.verticalCenter;
-                anchors.left: resetSecurityImageImage.right;
+                anchors.left: changeSecurityImageImage.right;
                 anchors.leftMargin: 16;
                 width: 250;
                 height: 50;
-                text: "Reset My Security Image";
+                text: "Change My Security Image";
                 onClicked: {
-                    
+                    sendSignalToWallet({method: 'walletSecurity_changeSecurityImage'});
                 }
             }
         }
@@ -225,7 +225,7 @@ Item {
     //
     function setSecurityImages(imagePath) {
         topSecurityImage.source = imagePath;
-        resetSecurityImageImage.source = imagePath;
+        changeSecurityImageImage.source = imagePath;
     }
     //
     // Function Name: fromScript()

interface/resources/qml/hifi/commerce/wallet/SecurityImageSelectionLightbox.qml

@@ -0,0 +1,186 @@
+//
+//  SecurityImageSelectionLightbox.qml
+//  qml/hifi/commerce/wallet
+//
+//  SecurityImageSelectionLightbox
+//
+//  Created by Zach Fox on 2017-08-18
+//  Copyright 2017 High Fidelity, Inc.
+//
+//  Distributed under the Apache License, Version 2.0.
+//  See the accompanying file LICENSE or http://www.apache.org/licenses/LICENSE-2.0.html
+//
+
+import Hifi 1.0 as Hifi
+import QtQuick 2.5
+import QtQuick.Controls 1.4
+import "../../../styles-uit"
+import "../../../controls-uit" as HifiControlsUit
+import "../../../controls" as HifiControls
+
+// references XXX from root context
+
+Rectangle {
+    HifiConstants { id: hifi; }
+
+    id: root;
+    property bool justSubmitted: false;
+    // Style
+    color: hifi.colors.baseGray;
+
+    Hifi.QmlCommerce {
+        id: commerce;
+
+        onSecurityImageResult: {
+            if (imageID !== 0) { // Success submitting new security image
+                if (root.justSubmitted) {
+                    securityImageSubmitButton.enabled = true;
+                    root.visible = false;
+                }
+            } else if (root.lastPage === "securityImage") {
+                // Error submitting new security image.
+                securityImageSubmitButton.enabled = true;
+                root.justSubmitted = false;
+            }
+        }
+    }
+    
+    //
+    // SECURITY IMAGE SELECTION START
+    //
+    Item {
+        id: securityImageContainer;
+        // Anchors
+        anchors.fill: parent;
+
+        Item {
+            id: securityImageTitle;
+            // Size
+            width: parent.width;
+            height: 50;
+            // Anchors
+            anchors.left: parent.left;
+            anchors.top: parent.top;
+
+            // Title Bar text
+            RalewaySemiBold {
+                text: "CHANGE SECURITY IMAGE";
+                // Text size
+                size: hifi.fontSizes.overlayTitle;
+                // Anchors
+                anchors.top: parent.top;
+                anchors.left: parent.left;
+                anchors.leftMargin: 16;
+                anchors.bottom: parent.bottom;
+                width: paintedWidth;
+                // Style
+                color: hifi.colors.faintGray;
+                // Alignment
+                horizontalAlignment: Text.AlignHLeft;
+                verticalAlignment: Text.AlignVCenter;
+            }
+        }
+
+        // Text below title bar
+        RalewaySemiBold {
+            id: securityImageTitleHelper;
+            text: "Choose a Security Picture:";
+            // Text size
+            size: 24;
+            // Anchors
+            anchors.top: securityImageTitle.bottom;
+            anchors.left: parent.left;
+            anchors.leftMargin: 16;
+            height: 50;
+            width: paintedWidth;
+            // Style
+            color: hifi.colors.faintGray;
+            // Alignment
+            horizontalAlignment: Text.AlignHLeft;
+            verticalAlignment: Text.AlignVCenter;
+        }
+
+        SecurityImageSelection {
+            id: securityImageSelection;
+            // Anchors
+            anchors.top: securityImageTitleHelper.bottom;
+            anchors.left: parent.left;
+            anchors.leftMargin: 16;
+            anchors.right: parent.right;
+            anchors.rightMargin: 16;
+            height: 280;
+        }
+
+        // Text below security images
+        RalewayRegular {
+            text: "<b>Your security picture shows you that the service asking for your passphrase is authorized.</b> 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.faintGray;
+            wrapMode: Text.WordWrap;
+            // Alignment
+            horizontalAlignment: Text.AlignHLeft;
+            verticalAlignment: Text.AlignVCenter;
+        }
+
+        // Navigation Bar
+        Item {
+            id: securityImageNavBar;
+            // Size
+            width: parent.width;
+            height: 100;
+            // Anchors:
+            anchors.left: parent.left;
+            anchors.bottom: parent.bottom;
+
+            // "Cancel" button
+            HifiControlsUit.Button {
+                color: hifi.buttons.black;
+                colorScheme: hifi.colorSchemes.dark;
+                anchors.top: parent.top;
+                anchors.topMargin: 3;
+                anchors.bottom: parent.bottom;
+                anchors.bottomMargin: 3;
+                anchors.left: parent.left;
+                anchors.leftMargin: 20;
+                width: 100;
+                text: "Cancel"
+                onClicked: {
+                    root.visible = false;
+                }
+            }
+
+            // "Submit" button
+            HifiControlsUit.Button {
+                id: securityImageSubmitButton;
+                color: hifi.buttons.black;
+                colorScheme: hifi.colorSchemes.dark;
+                anchors.top: parent.top;
+                anchors.topMargin: 3;
+                anchors.bottom: parent.bottom;
+                anchors.bottomMargin: 3;
+                anchors.right: parent.right;
+                anchors.rightMargin: 20;
+                width: 100;
+                text: "Submit";
+                onClicked: {
+                    root.justSubmitted = true;
+                    securityImageSubmitButton.text = "Submitting...";
+                    securityImageSubmitButton.enabled = false;
+                }
+            }
+        }
+    }
+    //
+    // SECURITY IMAGE SELECTION END
+    //
+}

interface/resources/qml/hifi/commerce/wallet/Wallet.qml

@@ -31,18 +31,15 @@ Rectangle {
     color: hifi.colors.baseGray;
     Hifi.QmlCommerce {
         id: commerce;
-        onBalanceResult: {
-            if (failureMessage.length) {
-                console.log("Failed to get balance", failureMessage);
-            } else {
-                hfcBalanceText.text = balance;
-            }
-        }
 
         onSecurityImageResult: {
             if (imageID !== 0) { // "If security image is set up"
-                accountHome.setSecurityImage(securityImageModel.getImagePathFromImageID(imageID));
+                if (walletHome) {
-                security.setSecurityImages(securityImageModel.getImagePathFromImageID(imageID));
+                    walletHome.setSecurityImage(securityImageModel.getImagePathFromImageID(imageID));
+                }
+                if (security) {
+                    security.setSecurityImages(securityImageModel.getImagePathFromImageID(imageID));
+                }
             } else if (root.lastPage === "securityImage") {
                 // ERROR! Invalid security image.
                 securityImageContainer.visible = true;
@@ -61,7 +58,7 @@ Rectangle {
             if (msg.method === 'walletSetup_cancelClicked') {
                 walletSetupLightbox.visible = false;
             } else if (msg.method === 'walletSetup_finished') {
-                root.activeView = "accountHome";
+                root.activeView = "walletHome";
             } else {
                 sendToScript(msg);
             }
@@ -78,7 +75,7 @@ Rectangle {
 
     Rectangle {
         id: walletSetupLightboxContainer;
-        visible: walletSetupLightbox.visible;
+        visible: walletSetupLightbox.visible || passphraseSelectionLightbox.visible || securityImageSelectionLightbox.visible;
         z: 998;
         anchors.fill: parent;
         color: "black";
@@ -92,6 +89,23 @@ Rectangle {
         width: walletSetupLightboxContainer.width - 50;
         height: walletSetupLightboxContainer.height - 50;
     }
+    PassphraseSelectionLightbox {
+        id: passphraseSelectionLightbox;
+        visible: false;
+        z: 999;
+        anchors.centerIn: walletSetupLightboxContainer;
+        width: walletSetupLightboxContainer.width - 50;
+        height: walletSetupLightboxContainer.height - 50;
+    }
+    SecurityImageSelectionLightbox {
+        id: securityImageSelectionLightbox;
+        visible: false;
+        z: 999;
+        anchors.centerIn: walletSetupLightboxContainer;
+        width: walletSetupLightboxContainer.width - 50;
+        height: walletSetupLightboxContainer.height - 50;
+    }
+    
 
     //
     // TITLE BAR START
@@ -147,9 +161,9 @@ Rectangle {
         anchors.right: parent.right;
     }
 
-    AccountHome {
+    WalletHome {
-        id: accountHome;
+        id: walletHome;
-        visible: root.activeView === "accountHome";
+        visible: root.activeView === "walletHome";
         anchors.top: titleBarContainer.bottom;
         anchors.topMargin: 16;
         anchors.bottom: tabButtonsContainer.top;
@@ -185,6 +199,16 @@ Rectangle {
         anchors.right: parent.right;
         anchors.rightMargin: 16;
     }
+    Connections {
+        target: security;
+        onSendSignalToWallet: {
+            if (msg.method === 'walletSecurity_changePassphrase') {
+                passphraseSelectionLightbox.visible = true;
+            } else if (msg.method === 'walletSecurity_changeSecurityImage') {
+                securityImageSelectionLightbox.visible = true;
+            }
+        }
+    }
 
     Help {
         id: help;
@@ -224,18 +248,18 @@ Rectangle {
             anchors.top: parent.top;
         }
 
-        // "ACCOUNT HOME" tab button
+        // "WALLET HOME" tab button
         Rectangle {
-            id: accountHomeButtonContainer;
+            id: walletHomeButtonContainer;
             visible: !notSetUp.visible;
-            color: root.activeView === "accountHome" ? hifi.colors.blueAccent : hifi.colors.black;
+            color: root.activeView === "walletHome" ? hifi.colors.blueAccent : hifi.colors.black;
             anchors.top: parent.top;
             anchors.left: parent.left;
             anchors.bottom: parent.bottom;
             width: parent.width / tabButtonsContainer.numTabs;
 
             RalewaySemiBold {
-                text: "ACCOUNT HOME";
+                text: "WALLET HOME";
                 // Text size
                 size: hifi.fontSizes.overlayTitle;
                 // Anchors
@@ -254,11 +278,11 @@ Rectangle {
                 anchors.fill: parent;
                 hoverEnabled: enabled;
                 onClicked: {
-                    root.activeView = "accountHome";
+                    root.activeView = "walletHome";
                     tabButtonsContainer.resetTabButtonColors();
                 }
                 onEntered: parent.color = hifi.colors.blueHighlight;
-                onExited: parent.color = root.activeView === "accountHome" ? hifi.colors.blueAccent : hifi.colors.black;
+                onExited: parent.color = root.activeView === "walletHome" ? hifi.colors.blueAccent : hifi.colors.black;
             }
         }
 
@@ -268,7 +292,7 @@ Rectangle {
             visible: !notSetUp.visible;
             color: hifi.colors.black;
             anchors.top: parent.top;
-            anchors.left: accountHomeButtonContainer.right;
+            anchors.left: walletHomeButtonContainer.right;
             anchors.bottom: parent.bottom;
             width: parent.width / tabButtonsContainer.numTabs;
 
@@ -393,12 +417,12 @@ Rectangle {
         }
 
         function resetTabButtonColors() {
-            accountHomeButtonContainer.color = hifi.colors.black;
+            walletHomeButtonContainer.color = hifi.colors.black;
             sendMoneyButtonContainer.color = hifi.colors.black;
             securityButtonContainer.color = hifi.colors.black;
             helpButtonContainer.color = hifi.colors.black;
-            if (root.activeView === "accountHome") {
+            if (root.activeView === "walletHome") {
-                accountHomeButtonContainer.color = hifi.colors.blueAccent;
+                walletHomeButtonContainer.color = hifi.colors.blueAccent;
             } else if (root.activeView === "sendMoney") {
                 sendMoneyButtonContainer.color = hifi.colors.blueAccent;
             } else if (root.activeView === "security") {

interface/resources/qml/hifi/commerce/wallet/WalletHome.qml

@@ -142,7 +142,7 @@ Item {
         width: 75;
         height: childrenRect.height;
         Image {
-            id: passphrasePageSecurityImage;
+            id: securityImage;
             // Anchors
             anchors.top: parent.top;
             anchors.horizontalCenter: parent.horizontalCenter;
@@ -157,7 +157,7 @@ Item {
             // Text size
             size: 12;
             // Anchors
-            anchors.top: passphrasePageSecurityImage.bottom;
+            anchors.top: securityImage.bottom;
             anchors.topMargin: 4;
             anchors.left: securityImageContainer.left;
             anchors.right: securityImageContainer.right;
@@ -309,7 +309,7 @@ Item {
     // FUNCTION DEFINITIONS START
     //
     function setSecurityImage(imagePath) {
-        passphrasePageSecurityImage.source = imagePath;
+        securityImage.source = imagePath;
     }
     //
     // Function Name: fromScript()

interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml

@@ -40,9 +40,7 @@ Rectangle {
         }
         
         onSecurityImageResult: {
-            if (imageID !== 0) { // "If security image is set up"
+            if (imageID === 0 && root.lastPage === "securityImage") {
-                passphraseSelection.setSecurityImage(securityImageSelection.getImagePathFromImageID(imageID));
-            } else if (root.lastPage === "securityImage") {
                 // ERROR! Invalid security image.
                 securityImageContainer.visible = true;
                 choosePassphraseContainer.visible = false;