From c42a658bde2dd7133d1fdd679ae0b80823a4d8d6 Mon Sep 17 00:00:00 2001 From: Zach Fox Date: Fri, 18 Aug 2017 16:06:39 -0700 Subject: [PATCH] Almost-working change pages --- .../commerce/wallet/PassphraseSelection.qml | 26 ++- .../wallet/PassphraseSelectionLightbox.qml | 165 ++++++++++++++++ .../qml/hifi/commerce/wallet/Security.qml | 32 +-- .../wallet/SecurityImageSelectionLightbox.qml | 186 ++++++++++++++++++ .../qml/hifi/commerce/wallet/Wallet.qml | 72 ++++--- .../{AccountHome.qml => WalletHome.qml} | 6 +- .../commerce/wallet/WalletSetupLightbox.qml | 4 +- 7 files changed, 440 insertions(+), 51 deletions(-) create mode 100644 interface/resources/qml/hifi/commerce/wallet/PassphraseSelectionLightbox.qml create mode 100644 interface/resources/qml/hifi/commerce/wallet/SecurityImageSelectionLightbox.qml rename interface/resources/qml/hifi/commerce/wallet/{AccountHome.qml => WalletHome.qml} (98%) diff --git a/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml b/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml index 13f72b8b2c..7f9f034d09 100644 --- a/interface/resources/qml/hifi/commerce/wallet/PassphraseSelection.qml +++ b/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) { - passphrasePageSecurityImage.source = imageSource; + function setErrorText(text) { + errorText.text = text; + } + + function clearText() { + passphraseField.text = ""; + passphraseFieldAgain.text = ""; } } diff --git a/interface/resources/qml/hifi/commerce/wallet/PassphraseSelectionLightbox.qml b/interface/resources/qml/hifi/commerce/wallet/PassphraseSelectionLightbox.qml new file mode 100644 index 0000000000..611dad7f6a --- /dev/null +++ b/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 + // +} diff --git a/interface/resources/qml/hifi/commerce/wallet/Security.qml b/interface/resources/qml/hifi/commerce/wallet/Security.qml index 1ef05f4b7a..bf72c6b2b1 100644 --- a/interface/resources/qml/hifi/commerce/wallet/Security.qml +++ b/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; - anchors.top: resetPassphraseContainer.bottom; + id: changeSecurityImageContainer; + 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() diff --git a/interface/resources/qml/hifi/commerce/wallet/SecurityImageSelectionLightbox.qml b/interface/resources/qml/hifi/commerce/wallet/SecurityImageSelectionLightbox.qml new file mode 100644 index 0000000000..461154c8d4 --- /dev/null +++ b/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: "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.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 + // +} diff --git a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml index 0adaab4890..2ee08147c6 100644 --- a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml +++ b/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)); - security.setSecurityImages(securityImageModel.getImagePathFromImageID(imageID)); + if (walletHome) { + 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 { - id: accountHome; - visible: root.activeView === "accountHome"; + WalletHome { + id: walletHome; + 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") { - accountHomeButtonContainer.color = hifi.colors.blueAccent; + if (root.activeView === "walletHome") { + walletHomeButtonContainer.color = hifi.colors.blueAccent; } else if (root.activeView === "sendMoney") { sendMoneyButtonContainer.color = hifi.colors.blueAccent; } else if (root.activeView === "security") { diff --git a/interface/resources/qml/hifi/commerce/wallet/AccountHome.qml b/interface/resources/qml/hifi/commerce/wallet/WalletHome.qml similarity index 98% rename from interface/resources/qml/hifi/commerce/wallet/AccountHome.qml rename to interface/resources/qml/hifi/commerce/wallet/WalletHome.qml index f86564baa3..6bca18c861 100644 --- a/interface/resources/qml/hifi/commerce/wallet/AccountHome.qml +++ b/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() diff --git a/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml b/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml index bf624609c6..d25ebe379a 100644 --- a/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml +++ b/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml @@ -40,9 +40,7 @@ Rectangle { } onSecurityImageResult: { - if (imageID !== 0) { // "If security image is set up" - passphraseSelection.setSecurityImage(securityImageSelection.getImagePathFromImageID(imageID)); - } else if (root.lastPage === "securityImage") { + if (imageID === 0 && root.lastPage === "securityImage") { // ERROR! Invalid security image. securityImageContainer.visible = true; choosePassphraseContainer.visible = false;