mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-06-27 17:38:46 +02:00
631 lines
19 KiB
QML
631 lines
19 KiB
QML
//
|
|
// WalletSetupLightbox.qml
|
|
// qml/hifi/commerce/wallet
|
|
//
|
|
// WalletSetupLightbox
|
|
//
|
|
// Created by Zach Fox on 2017-08-17
|
|
// 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 string lastPage: "login";
|
|
// Style
|
|
color: "white";
|
|
|
|
Hifi.QmlCommerce {
|
|
id: commerce;
|
|
|
|
onLoginStatusResult: {
|
|
if (isLoggedIn) {
|
|
securityImageContainer.visible = true;
|
|
} else {
|
|
loginPageContainer.visible = true;
|
|
}
|
|
}
|
|
|
|
onSecurityImageResult: {
|
|
if (imageID !== 0) { // "If security image is set up"
|
|
passphrasePageSecurityImage.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;
|
|
choosePassphraseContainer.visible = false;
|
|
}
|
|
}
|
|
|
|
onPassphraseSetupStatusResult: {
|
|
securityImageContainer.visible = false;
|
|
if (passphraseIsSetup) {
|
|
privateKeysReadyContainer.visible = true;
|
|
} else {
|
|
choosePassphraseContainer.visible = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// LOGIN PAGE START
|
|
//
|
|
Item {
|
|
id: loginPageContainer;
|
|
visible: false;
|
|
// Anchors
|
|
anchors.fill: parent;
|
|
|
|
Component.onCompleted: {
|
|
commerce.getLoginStatus();
|
|
}
|
|
|
|
Item {
|
|
id: loginTitle;
|
|
// Size
|
|
width: parent.width;
|
|
height: 50;
|
|
// Anchors
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
|
|
// Title Bar text
|
|
RalewaySemiBold {
|
|
text: "WALLET SETUP - LOGIN";
|
|
// 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.darkGray;
|
|
// Alignment
|
|
horizontalAlignment: Text.AlignHLeft;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
}
|
|
|
|
// Text below title bar
|
|
RalewaySemiBold {
|
|
id: loginTitleHelper;
|
|
text: "Please Log In to High Fidelity";
|
|
// Text size
|
|
size: 24;
|
|
// Anchors
|
|
anchors.top: loginTitle.bottom;
|
|
anchors.left: parent.left;
|
|
anchors.leftMargin: 16;
|
|
anchors.right: parent.right;
|
|
anchors.rightMargin: 16;
|
|
height: 50;
|
|
// Style
|
|
color: hifi.colors.darkGray;
|
|
// Alignment
|
|
horizontalAlignment: Text.AlignHLeft;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
|
|
// Text below helper text
|
|
RalewaySemiBold {
|
|
id: loginDetailText;
|
|
text: "To set up your wallet, you must first log in to High Fidelity.";
|
|
// Text size
|
|
size: 18;
|
|
// Anchors
|
|
anchors.top: loginTitleHelper.bottom;
|
|
anchors.topMargin: 25;
|
|
anchors.left: parent.left;
|
|
anchors.leftMargin: 16;
|
|
anchors.right: parent.right;
|
|
anchors.rightMargin: 16;
|
|
height: 50;
|
|
// Style
|
|
color: hifi.colors.darkGray;
|
|
wrapMode: Text.WordWrap;
|
|
// Alignment
|
|
horizontalAlignment: Text.AlignHLeft;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
|
|
// "Cancel" button
|
|
HifiControlsUit.Button {
|
|
color: hifi.buttons.black;
|
|
colorScheme: hifi.colorSchemes.dark;
|
|
anchors.top: loginDetailText.bottom;
|
|
anchors.topMargin: 25;
|
|
anchors.left: parent.left;
|
|
anchors.leftMargin: 16;
|
|
width: 150;
|
|
height: 50;
|
|
text: "Log In"
|
|
onClicked: {
|
|
sendSignalToWallet({method: 'walletSetup_loginClicked'});
|
|
}
|
|
}
|
|
|
|
// Navigation Bar
|
|
Item {
|
|
// 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: {
|
|
sendSignalToWallet({method: 'walletSetup_cancelClicked'});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//
|
|
// LOGIN PAGE END
|
|
//
|
|
|
|
//
|
|
// SECURITY IMAGE SELECTION START
|
|
//
|
|
Item {
|
|
id: securityImageContainer;
|
|
visible: false;
|
|
// Anchors
|
|
anchors.fill: parent;
|
|
|
|
onVisibleChanged: {
|
|
if (visible) {
|
|
commerce.getSecurityImage();
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: securityImageTitle;
|
|
// Size
|
|
width: parent.width;
|
|
height: 50;
|
|
// Anchors
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
|
|
// Title Bar text
|
|
RalewaySemiBold {
|
|
text: "WALLET SETUP - STEP 1 OF 3";
|
|
// 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.darkGray;
|
|
// 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.darkGray;
|
|
// 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
|
|
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
|
|
Item {
|
|
// 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: {
|
|
sendSignalToWallet({method: 'walletSetup_cancelClicked'});
|
|
}
|
|
}
|
|
|
|
// "Next" 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.right: parent.right;
|
|
anchors.rightMargin: 20;
|
|
width: 100;
|
|
text: "Next";
|
|
onClicked: {
|
|
root.lastPage = "securityImage";
|
|
commerce.chooseSecurityImage(securityImageSelection.getSelectedImageIndex());
|
|
securityImageContainer.visible = false;
|
|
choosePassphraseContainer.visible = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//
|
|
// SECURITY IMAGE SELECTION END
|
|
//
|
|
|
|
//
|
|
// SECURE PASSPHRASE SELECTION START
|
|
//
|
|
Item {
|
|
id: choosePassphraseContainer;
|
|
visible: false;
|
|
// Anchors
|
|
anchors.fill: parent;
|
|
|
|
onVisibleChanged: {
|
|
if (visible) {
|
|
commerce.getPassphraseSetupStatus();
|
|
}
|
|
}
|
|
|
|
Item {
|
|
id: passphraseTitle;
|
|
// Size
|
|
width: parent.width;
|
|
height: 50;
|
|
// Anchors
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
|
|
// Title Bar text
|
|
RalewaySemiBold {
|
|
text: "WALLET SETUP - STEP 2 OF 3";
|
|
// 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.darkGray;
|
|
// 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.darkGray;
|
|
// Alignment
|
|
horizontalAlignment: Text.AlignHLeft;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
|
|
HifiControlsUit.TextField {
|
|
id: passphraseField;
|
|
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
|
|
RalewaySemiBold {
|
|
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;
|
|
}
|
|
|
|
// Navigation Bar
|
|
Item {
|
|
// Size
|
|
width: parent.width;
|
|
height: 100;
|
|
// Anchors:
|
|
anchors.left: parent.left;
|
|
anchors.bottom: parent.bottom;
|
|
|
|
// "Back" 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: "Back"
|
|
onClicked: {
|
|
root.lastPage = "choosePassphrase";
|
|
choosePassphraseContainer.visible = false;
|
|
securityImageContainer.visible = true;
|
|
}
|
|
}
|
|
|
|
|
|
// Security Image
|
|
Image {
|
|
id: passphrasePageSecurityImage;
|
|
// Anchors
|
|
anchors.top: parent.top;
|
|
anchors.topMargin: 3;
|
|
anchors.right: passphrasePageNextButton.left;
|
|
height: passphrasePageNextButton.height;
|
|
width: height;
|
|
anchors.verticalCenter: parent.verticalCenter;
|
|
fillMode: Image.PreserveAspectFit;
|
|
mipmap: true;
|
|
}
|
|
|
|
// "Next" button
|
|
HifiControlsUit.Button {
|
|
id: passphrasePageNextButton;
|
|
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: "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 = ""
|
|
root.lastPage = "passphrase";
|
|
commerce.setPassphrase(passphraseField.text);
|
|
choosePassphraseContainer.visible = false;
|
|
privateKeysReadyContainer.visible = true;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
//
|
|
// SECURE PASSPHRASE SELECTION END
|
|
//
|
|
|
|
//
|
|
// PRIVATE KEYS READY START
|
|
//
|
|
Item {
|
|
id: privateKeysReadyContainer;
|
|
visible: false;
|
|
// Anchors
|
|
anchors.fill: parent;
|
|
|
|
Item {
|
|
// Size
|
|
width: parent.width;
|
|
height: 50;
|
|
// Anchors
|
|
anchors.left: parent.left;
|
|
anchors.top: parent.top;
|
|
|
|
// Title Bar text
|
|
RalewaySemiBold {
|
|
text: "WALLET SETUP - STEP 2 OF 3";
|
|
// 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.darkGray;
|
|
// Alignment
|
|
horizontalAlignment: Text.AlignHLeft;
|
|
verticalAlignment: Text.AlignVCenter;
|
|
}
|
|
}
|
|
}
|
|
//
|
|
// PRIVATE KEYS READY END
|
|
//
|
|
|
|
//
|
|
// FUNCTION DEFINITIONS START
|
|
//
|
|
signal sendSignalToWallet(var msg);
|
|
//
|
|
// FUNCTION DEFINITIONS END
|
|
//
|
|
}
|