From d052b49a54b3b54c3de918dd03bfa39096dd939a Mon Sep 17 00:00:00 2001
From: Zach Fox <fox@highfidelity.io>
Date: Thu, 17 Aug 2017 16:34:33 -0700
Subject: [PATCH] Login and picture selection done

---
 .../qml/hifi/commerce/wallet/Wallet.qml       |  2 +-
 .../commerce/wallet/WalletSetupLightbox.qml   | 69 +++++++++++++++++--
 scripts/system/commerce/wallet.js             | 11 ++-
 3 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml
index 191081118b..d8ca2e2c94 100644
--- a/interface/resources/qml/hifi/commerce/wallet/Wallet.qml
+++ b/interface/resources/qml/hifi/commerce/wallet/Wallet.qml
@@ -38,7 +38,7 @@ Rectangle {
     }
     Connections {
         target: walletSetupLightbox;
-        onSignalSent: {
+        onSendSignalToWallet: {
             sendToScript(msg);
         }
     }
diff --git a/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml b/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml
index 9fdb27064e..1d0d28c055 100644
--- a/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml
+++ b/interface/resources/qml/hifi/commerce/wallet/WalletSetupLightbox.qml
@@ -24,7 +24,7 @@ Rectangle {
     HifiConstants { id: hifi; }
 
     id: root;
-    property string lastPage: "";
+    property string lastPage: "login";
     // Style
     color: "white";
 
@@ -42,7 +42,7 @@ Rectangle {
         onSecurityImageResult: {
             if (imageID !== 0) { // "If security image is set up"
                 passphrasePageSecurityImage.source = securityImageSelection.getImagePathFromImageID(imageID);
-                if (root.lastPage === "") {
+                if (root.lastPage === "login") {
                     securityImageContainer.visible = false;
                     choosePassphraseContainer.visible = true;
                 }
@@ -77,6 +77,7 @@ Rectangle {
         }
 
         Item {
+            id: loginTitle;
             // Size
             width: parent.width;
             height: 50;
@@ -103,6 +104,64 @@ Rectangle {
             }
         }
 
+        // 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
@@ -125,7 +184,7 @@ Rectangle {
                 width: 100;
                 text: "Cancel"
                 onClicked: {
-                    
+                    sendSignalToWallet({method: 'walletSetup_cancelClicked'});
                 }
             }
         }
@@ -250,7 +309,7 @@ Rectangle {
                 width: 100;
                 text: "Cancel"
                 onClicked: {
-                    signalSent({method: 'securityImageSelection_cancelClicked'});
+                    sendSignalToWallet({method: 'walletSetup_cancelClicked'});
                 }
             }
 
@@ -430,7 +489,7 @@ Rectangle {
     //
     // FUNCTION DEFINITIONS START
     //
-    signal signalSent(var msg);
+    signal sendSignalToWallet(var msg);
     //
     // FUNCTION DEFINITIONS END
     //
diff --git a/scripts/system/commerce/wallet.js b/scripts/system/commerce/wallet.js
index 330fad97a7..3cdb419f7c 100644
--- a/scripts/system/commerce/wallet.js
+++ b/scripts/system/commerce/wallet.js
@@ -55,9 +55,18 @@
     //    in the format "{method, params}", like json-rpc. See also sendToQml().
     function fromQml(message) {
         switch (message.method) {
-            case 'securityImageSelection_cancelClicked':
+            case 'walletSetup_cancelClicked':
                 tablet.gotoHomeScreen();
                 break;
+            case 'walletSetup_loginClicked':
+                if ((HMD.active && Settings.getValue("hmdTabletBecomesToolbar", false))
+                    || (!HMD.active && Settings.getValue("desktopTabletBecomesToolbar", true))) {
+                    Menu.triggerOption("Login / Sign Up");
+                    tablet.gotoHomeScreen();
+                } else {
+                    tablet.loadQMLOnTop("../../../dialogs/TabletLoginDialog.qml");
+                }
+                break;
             default:
                 print('Unrecognized message from QML:', JSON.stringify(message));
         }