MOREEEE PROGRESS

This commit is contained in:
Zach Fox 2017-08-18 10:52:42 -07:00
parent ccf81f801d
commit ace1e00158
7 changed files with 470 additions and 129 deletions

View file

@ -0,0 +1,105 @@
//
// AccountHome.qml
// qml/hifi/commerce/wallet
//
// AccountHome
//
// 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
Item {
HifiConstants { id: hifi; }
id: root;
Hifi.QmlCommerce {
id: commerce;
}
Connections {
target: GlobalServices
onMyUsernameChanged: {
usernameText.text = Account.username;
}
}
// Security Image
Image {
id: passphrasePageSecurityImage;
// Anchors
anchors.top: parent.top;
anchors.left: parent.left;
height: 75;
width: height;
fillMode: Image.PreserveAspectFit;
mipmap: true;
}
// Username Text
RalewayRegular {
id: usernameText;
text: Account.username;
// Text size
size: 24;
// Style
color: hifi.colors.faintGray;
elide: Text.ElideRight;
// Anchors
anchors.top: passphrasePageSecurityImage.top;
anchors.bottom: passphrasePageSecurityImage.bottom;
anchors.left: passphrasePageSecurityImage.right;
anchors.leftMargin: 16;
anchors.right: hfcBalanceContainer.left;
}
Rectangle {
id: hfcBalanceContainer;
anchors.right: parent.right;
anchors.verticalCenter: passphrasePageSecurityImage.verticalCenter;
width: 175;
height: 45;
}
//
// FUNCTION DEFINITIONS START
//
function setSecurityImage(imagePath) {
passphrasePageSecurityImage.source = imagePath;
}
//
// 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 sendSignalToWallet(var msg);
//
// FUNCTION DEFINITIONS END
//
}

View file

@ -0,0 +1,127 @@
//
// NotSetUp.qml
// qml/hifi/commerce/wallet
//
// NotSetUp
//
// 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
Item {
HifiConstants { id: hifi; }
id: root;
Hifi.QmlCommerce {
id: commerce;
}
//
// TAB CONTENTS START
//
// Text below title bar
RalewaySemiBold {
id: notSetUpText;
text: "Your Wallet Account Has Not Been Set Up";
// Text size
size: 22;
// Anchors
anchors.top: parent.top;
anchors.topMargin: 100;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 50;
width: paintedWidth;
// Style
color: hifi.colors.faintGray;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
}
// Explanitory text
RalewayRegular {
text: "To buy and sell items in High Fidelity Coin (HFC), you first need " +
"to set up your wallet.<br><b>You do not need to submit a credit card or personal information to set up your wallet.</b>";
// Text size
size: 18;
// Anchors
anchors.top: notSetUpText.bottom;
anchors.topMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 30;
anchors.right: parent.right;
anchors.rightMargin: 30;
height: 100;
width: paintedWidth;
// Style
color: hifi.colors.faintGray;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
}
// "Set Up" button
HifiControlsUit.Button {
color: hifi.buttons.black;
colorScheme: hifi.colorSchemes.dark;
anchors.bottom: parent.bottom;
anchors.bottomMargin: 150;
anchors.horizontalCenter: parent.horizontalCenter;
width: parent.width/2;
height: 50;
text: "Set Up My Wallet";
onClicked: {
sendSignalToWallet({method: 'setUpClicked'});
}
}
//
// TAB CONTENTS END
//
//
// 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 sendSignalToWallet(var msg);
//
// FUNCTION DEFINITIONS END
//
}

View file

@ -0,0 +1,149 @@
//
// PassphraseSelection.qml
// qml/hifi/commerce/wallet
//
// PassphraseSelection
//
// 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
Item {
HifiConstants { id: hifi; }
id: root;
Hifi.QmlCommerce {
id: commerce;
}
HifiControlsUit.TextField {
id: passphraseField;
anchors.top: parent.top;
anchors.topMargin: 30;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 50;
echoMode: TextInput.Password;
placeholderText: "passphrase";
}
HifiControlsUit.TextField {
id: passphraseFieldAgain;
anchors.top: passphraseField.bottom;
anchors.topMargin: 10;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 50;
echoMode: TextInput.Password;
placeholderText: "re-enter passphrase";
}
// Error text below TextFields
RalewaySemiBold {
id: errorText;
text: "";
// Text size
size: 16;
// Anchors
anchors.top: passphraseFieldAgain.bottom;
anchors.topMargin: 0;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 30;
// Style
color: hifi.colors.redHighlight;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
// Text below TextFields
RalewaySemiBold {
id: passwordReqs;
text: "Passphrase must be at least 4 characters";
// Text size
size: 16;
// Anchors
anchors.top: passphraseFieldAgain.bottom;
anchors.topMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 30;
// Style
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
// Show passphrase text
HifiControlsUit.CheckBox {
id: showPassphrase;
colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.top: passwordReqs.bottom;
anchors.topMargin: 16;
height: 30;
text: "Show passphrase as plain text";
boxSize: 24;
onClicked: {
passphraseField.echoMode = checked ? TextInput.Normal : TextInput.Password;
passphraseFieldAgain.echoMode = checked ? TextInput.Normal : TextInput.Password;
}
}
// Text below checkbox
RalewayRegular {
text: "Your passphrase is used to encrypt your private keys. <b>Please write it down.</b> If it is lost, you will not be able to recover it.";
// Text size
size: 16;
// Anchors
anchors.top: showPassphrase.bottom;
anchors.topMargin: 16;
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;
}
function validateAndSubmitPassphrase() {
if (passphraseField.text.length < 4) {
errorText.text = "Passphrase too short."
return false;
} else if (passphraseField.text !== passphraseFieldAgain.text) {
errorText.text = "Passphrases don't match."
return false;
} else {
errorText.text = "";
commerce.setPassphrase(passphraseField.text);
return true;
}
}
}

View file

@ -39,4 +39,8 @@ ListModel {
sourcePath: "images/06gingerbread.jpg"
securityImageEnumValue: 6;
}
function getImagePathFromImageID(imageID) {
return (imageID ? root.get(imageID - 1).sourcePath : "");
}
}

View file

@ -92,7 +92,7 @@ Item {
signal sendToScript(var message);
function getImagePathFromImageID(imageID) {
return (imageID ? gridModel.get(imageID - 1).sourcePath : "");
return (imageID ? gridModel.getImagePathFromImageID(imageID) : "");
}
function getSelectedImageIndex() {

View file

@ -24,6 +24,7 @@ Rectangle {
HifiConstants { id: hifi; }
id: root;
property string activeView: "notSetUp";
// Style
color: hifi.colors.baseGray;
Hifi.QmlCommerce {
@ -35,11 +36,40 @@ Rectangle {
hfcBalanceText.text = balance;
}
}
onSecurityImageResult: {
if (imageID !== 0) { // "If security image is set up"
accountHome.setSecurityImage(securityImageModel.getImagePathFromImageID(imageID));
} else if (root.lastPage === "securityImage") {
// ERROR! Invalid security image.
securityImageContainer.visible = true;
choosePassphraseContainer.visible = false;
}
}
}
SecurityImageModel {
id: securityImageModel;
}
Connections {
target: walletSetupLightbox;
onSendSignalToWallet: {
sendToScript(msg);
if (msg.method === 'walletSetup_cancelClicked') {
walletSetupLightbox.visible = false;
} else if (msg.method === 'walletSetup_finished') {
root.activeView = "accountHome";
} else {
sendToScript(msg);
}
}
}
Connections {
target: notSetUp;
onSendSignalToWallet: {
if (msg.method === 'setUpClicked') {
walletSetupLightbox.visible = true;
}
}
}
@ -53,6 +83,7 @@ Rectangle {
}
WalletSetupLightbox {
id: walletSetupLightbox;
visible: false;
z: 999;
anchors.centerIn: walletSetupLightboxContainer;
width: walletSetupLightboxContainer.width - 50;
@ -84,7 +115,7 @@ Rectangle {
anchors.bottom: parent.bottom;
width: paintedWidth;
// Style
color: hifi.colors.lightGrayText;
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
@ -104,7 +135,27 @@ Rectangle {
//
// TAB CONTENTS START
//
NotSetUp {
id: notSetUp;
visible: root.activeView === "notSetUp";
anchors.top: titleBarContainer.bottom;
anchors.bottom: tabButtonsContainer.top;
anchors.left: parent.left;
anchors.right: parent.right;
}
AccountHome {
id: accountHome;
visible: root.activeView === "accountHome";
anchors.top: titleBarContainer.bottom;
anchors.topMargin: 16;
anchors.bottom: tabButtonsContainer.top;
anchors.bottomMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
}
//
@ -134,6 +185,7 @@ Rectangle {
// "ACCOUNT HOME" tab button
Rectangle {
id: accountHomeButtonContainer;
visible: !notSetUp.visible;
color: hifi.colors.black;
anchors.top: parent.top;
anchors.left: parent.left;
@ -149,7 +201,7 @@ Rectangle {
anchors.leftMargin: 4;
anchors.rightMargin: 4;
// Style
color: hifi.colors.lightGrayText;
color: hifi.colors.faintGray;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHCenter;
@ -160,6 +212,7 @@ Rectangle {
anchors.fill: parent;
hoverEnabled: enabled;
onClicked: {
root.activeView = "accountHome";
}
onEntered: parent.color = hifi.colors.blueHighlight;
onExited: parent.color = hifi.colors.black;
@ -169,6 +222,7 @@ Rectangle {
// "SEND MONEY" tab button
Rectangle {
id: sendMoneyButtonContainer;
visible: !notSetUp.visible;
color: hifi.colors.black;
anchors.top: parent.top;
anchors.left: accountHomeButtonContainer.right;
@ -184,7 +238,7 @@ Rectangle {
anchors.leftMargin: 4;
anchors.rightMargin: 4;
// Style
color: hifi.colors.lightGrayText;
color: hifi.colors.faintGray;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHCenter;
@ -195,6 +249,7 @@ Rectangle {
anchors.fill: parent;
hoverEnabled: enabled;
onClicked: {
root.activeView = "sendMoney";
}
onEntered: parent.color = hifi.colors.blueHighlight;
onExited: parent.color = hifi.colors.black;
@ -204,6 +259,7 @@ Rectangle {
// "SECURITY" tab button
Rectangle {
id: securityButtonContainer;
visible: !notSetUp.visible;
color: hifi.colors.black;
anchors.top: parent.top;
anchors.left: sendMoneyButtonContainer.right;
@ -219,7 +275,7 @@ Rectangle {
anchors.leftMargin: 4;
anchors.rightMargin: 4;
// Style
color: hifi.colors.lightGrayText;
color: hifi.colors.faintGray;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHCenter;
@ -230,6 +286,7 @@ Rectangle {
anchors.fill: parent;
hoverEnabled: enabled;
onClicked: {
root.activeView = "security";
}
onEntered: parent.color = hifi.colors.blueHighlight;
onExited: parent.color = hifi.colors.black;
@ -239,6 +296,7 @@ Rectangle {
// "HELP" tab button
Rectangle {
id: helpButtonContainer;
visible: !notSetUp.visible;
color: hifi.colors.black;
anchors.top: parent.top;
anchors.left: securityButtonContainer.right;
@ -254,7 +312,7 @@ Rectangle {
anchors.leftMargin: 4;
anchors.rightMargin: 4;
// Style
color: hifi.colors.lightGrayText;
color: hifi.colors.faintGray;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHCenter;
@ -265,6 +323,7 @@ Rectangle {
anchors.fill: parent;
hoverEnabled: enabled;
onClicked: {
root.activeView = "help";
}
onEntered: parent.color = hifi.colors.blueHighlight;
onExited: parent.color = hifi.colors.black;

View file

@ -26,7 +26,7 @@ Rectangle {
id: root;
property string lastPage: "login";
// Style
color: "white";
color: hifi.colors.baseGray;
Hifi.QmlCommerce {
id: commerce;
@ -43,10 +43,6 @@ Rectangle {
if (imageID !== 0) { // "If security image is set up"
passphrasePageSecurityImage.source = securityImageSelection.getImagePathFromImageID(imageID);
keysReadyPageSecurityImage.source = securityImageSelection.getImagePathFromImageID(imageID);
if (root.lastPage === "login") {
securityImageContainer.visible = false;
choosePassphraseContainer.visible = true;
}
} else if (root.lastPage === "securityImage") {
// ERROR! Invalid security image.
securityImageContainer.visible = true;
@ -98,7 +94,7 @@ Rectangle {
anchors.bottom: parent.bottom;
width: paintedWidth;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
@ -119,7 +115,7 @@ Rectangle {
anchors.rightMargin: 16;
height: 50;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
@ -140,7 +136,7 @@ Rectangle {
anchors.rightMargin: 16;
height: 50;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHLeft;
@ -230,7 +226,7 @@ Rectangle {
anchors.bottom: parent.bottom;
width: paintedWidth;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
@ -250,7 +246,7 @@ Rectangle {
height: 50;
width: paintedWidth;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
@ -269,7 +265,7 @@ Rectangle {
// Text below security images
RalewayRegular {
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: "<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
@ -281,7 +277,7 @@ Rectangle {
anchors.rightMargin: 16;
height: paintedHeight;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHLeft;
@ -375,7 +371,7 @@ Rectangle {
anchors.bottom: parent.bottom;
width: paintedWidth;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
@ -396,118 +392,24 @@ Rectangle {
anchors.rightMargin: 16;
height: 50;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
HifiControlsUit.TextField {
id: passphraseField;
PassphraseSelection {
id: passphraseSelection;
anchors.top: passphraseTitleHelper.bottom;
anchors.topMargin: 30;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 50;
echoMode: TextInput.Password;
placeholderText: "passphrase";
}
HifiControlsUit.TextField {
id: passphraseFieldAgain;
anchors.top: passphraseField.bottom;
anchors.topMargin: 10;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 50;
echoMode: TextInput.Password;
placeholderText: "re-enter passphrase";
}
// Error text below TextFields
RalewaySemiBold {
id: errorText;
text: "";
// Text size
size: 16;
// Anchors
anchors.top: passphraseFieldAgain.bottom;
anchors.topMargin: 0;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 30;
// Style
color: hifi.colors.redHighlight;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
// Text below TextFields
RalewaySemiBold {
id: passwordReqs;
text: "Passphrase must be at least 4 characters";
// Text size
size: 16;
// Anchors
anchors.top: passphraseFieldAgain.bottom;
anchors.topMargin: 16;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.right: parent.right;
anchors.rightMargin: 16;
height: 30;
// Style
color: hifi.colors.darkGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
}
// Show passphrase text
HifiControlsUit.CheckBox {
id: showPassphrase;
colorScheme: hifi.colorSchemes.dark;
anchors.left: parent.left;
anchors.leftMargin: 16;
anchors.top: passwordReqs.bottom;
anchors.topMargin: 16;
height: 30;
text: "Show passphrase as plain text";
boxSize: 24;
onClicked: {
passphraseField.echoMode = checked ? TextInput.Normal : TextInput.Password;
passphraseFieldAgain.echoMode = checked ? TextInput.Normal : TextInput.Password;
}
}
// Text below checkbox
RalewayRegular {
text: "Your passphrase is used to encrypt your private keys. <b>Please write it down.</b> If it is lost, you will not be able to recover it.";
// Text size
size: 16;
// Anchors
anchors.top: showPassphrase.bottom;
anchors.topMargin: 16;
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;
anchors.bottom: passphraseNavBar.top;
}
// Navigation Bar
Item {
id: passphraseNavBar;
// Size
width: parent.width;
height: 100;
@ -563,14 +465,8 @@ Rectangle {
width: 100;
text: "Next";
onClicked: {
if (passphraseField.text.length < 4) {
errorText.text = "Passphrase too short."
} else if (passphraseField.text !== passphraseFieldAgain.text) {
errorText.text = "Passphrases don't match."
} else {
errorText.text = ""
if (passphraseSelection.validateAndSubmitPassphrase()) {
root.lastPage = "passphrase";
commerce.setPassphrase(passphraseField.text);
choosePassphraseContainer.visible = false;
privateKeysReadyContainer.visible = true;
}
@ -612,7 +508,7 @@ Rectangle {
anchors.bottom: parent.bottom;
width: paintedWidth;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
@ -633,7 +529,7 @@ Rectangle {
anchors.rightMargin: 16;
height: 50;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
// Alignment
horizontalAlignment: Text.AlignHLeft;
verticalAlignment: Text.AlignVCenter;
@ -656,7 +552,7 @@ Rectangle {
anchors.rightMargin: 16;
height: paintedHeight;
// Style
color: hifi.colors.darkGray;
color: hifi.colors.faintGray;
wrapMode: Text.WordWrap;
// Alignment
horizontalAlignment: Text.AlignHLeft;
@ -699,6 +595,7 @@ Rectangle {
text: "Finish";
onClicked: {
root.visible = false;
sendSignalToWallet({method: 'walletSetup_finished'});
}
}
}