Login; punctuationMode; new images

interface/resources/qml/hifi/commerce/checkout/Checkout.qml

@@ -41,6 +41,16 @@ Rectangle {
     Hifi.QmlCommerce {
         id: commerce;
 
+        onLoginStatusResult: {
+            if (!isLoggedIn && root.activeView !== "needsLogIn") {
+                root.activeView = "needsLogIn";
+            } else if (isLoggedIn) {
+                root.activeView = "initialize";
+                commerce.getSecurityImage();
+                commerce.getKeyFilePathIfExists();
+            }
+        }
+
         onSecurityImageResult: {
             securityImageResultReceived = true;
             if (!exists && root.activeView !== "notSetUp") { // "If security image is not set up"
@@ -107,6 +117,7 @@ Rectangle {
     //
     Item {
         id: titleBarContainer;
+        visible: !needsLogIn.visible;
         // Size
         width: parent.width;
         height: 50;
@@ -179,10 +190,32 @@ Rectangle {
         color: hifi.colors.baseGray;
 
         Component.onCompleted: {
-            commerce.getSecurityImage();
+            commerce.getLoginStatus();
-            commerce.getKeyFilePathIfExists();
         }
     }
+        
+    HifiWallet.NeedsLogIn {
+        id: needsLogIn;
+        visible: root.activeView === "needsLogIn";
+        anchors.top: parent.top;
+        anchors.bottom: parent.bottom;
+        anchors.left: parent.left;
+        anchors.right: parent.right;
+
+        Connections {
+            onSendSignalToWallet: {
+                sendToScript(msg);
+            }
+        }
+    }
+    Connections {
+        target: GlobalServices
+        onMyUsernameChanged: {
+            commerce.getLoginStatus();
+        }
+    }
+
+
     
     //
     // "WALLET NOT SET UP" START

interface/resources/qml/hifi/commerce/purchases/Purchases.qml

@@ -36,6 +36,16 @@ Rectangle {
     Hifi.QmlCommerce {
         id: commerce;
 
+        onLoginStatusResult: {
+            if (!isLoggedIn && root.activeView !== "needsLogIn") {
+                root.activeView = "needsLogIn";
+            } else if (isLoggedIn) {
+                root.activeView = "initialize";
+                commerce.getSecurityImage();
+                commerce.getKeyFilePathIfExists();
+            }
+        }
+
         onSecurityImageResult: {
             securityImageResultReceived = true;
             if (!exists && root.activeView !== "notSetUp") { // "If security image is not set up"
@@ -78,6 +88,7 @@ Rectangle {
     //
     Item {
         id: titleBarContainer;
+        visible: !needsLogIn.visible;
         // Size
         height: 50;
         // Anchors
@@ -150,8 +161,28 @@ Rectangle {
         color: hifi.colors.baseGray;
 
         Component.onCompleted: {
-            commerce.getSecurityImage();
+            commerce.getLoginStatus();
-            commerce.getKeyFilePathIfExists();
+        }
+    }
+        
+    HifiWallet.NeedsLogIn {
+        id: needsLogIn;
+        visible: root.activeView === "needsLogIn";
+        anchors.top: parent.top;
+        anchors.bottom: parent.bottom;
+        anchors.left: parent.left;
+        anchors.right: parent.right;
+
+        Connections {
+            onSendSignalToWallet: {
+                sendToScript(msg);
+            }
+        }
+    }
+    Connections {
+        target: GlobalServices
+        onMyUsernameChanged: {
+            commerce.getLoginStatus();
         }
     }
     

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

@@ -0,0 +1,188 @@
+//
+//  NeedsLogIn.qml
+//  qml/hifi/commerce/wallet
+//
+//  NeedsLogIn
+//
+//  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;
+    }
+
+    //
+    // LOGIN PAGE START
+    //
+    Item {
+        id: loginPageContainer;
+        // Anchors
+        anchors.fill: parent;
+
+        Item {
+            id: loginTitle;
+            // Size
+            width: parent.width;
+            height: 50;
+            // Anchors
+            anchors.left: parent.left;
+            anchors.top: parent.top;
+
+            // Title Bar text
+            RalewaySemiBold {
+                text: "HIFI COMMERCE - 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.faintGray;
+                // 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.topMargin: 100;
+            anchors.left: parent.left;
+            anchors.leftMargin: 16;
+            anchors.right: parent.right;
+            anchors.rightMargin: 16;
+            height: 50;
+            // Style
+            color: hifi.colors.faintGray;
+            // Alignment
+            horizontalAlignment: Text.AlignHCenter;
+            verticalAlignment: Text.AlignVCenter;
+        }
+
+        // Text below helper text
+        RalewayRegular {
+            id: loginDetailText;
+            text: "To buy/sell items on the <b>Marketplace</b>, or to use your <b>Wallet</b>, 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.faintGray;
+            wrapMode: Text.WordWrap;
+            // Alignment
+            horizontalAlignment: Text.AlignHCenter;
+            verticalAlignment: Text.AlignVCenter;
+        }
+
+        
+
+        Item {
+            // Size
+            width: root.width;
+            height: 70;
+            // Anchors
+            anchors.top: loginDetailText.bottom;
+            anchors.topMargin: 40;
+            anchors.left: parent.left;
+        
+            // "Cancel" button
+            HifiControlsUit.Button {
+                id: cancelButton;
+                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: parent.width/2 - anchors.leftMargin*2;
+                text: "Cancel"
+                onClicked: {
+                    sendToScript({method: 'needsLogIn_cancelClicked'});
+                }
+            }
+
+            // "Set Up" button
+            HifiControlsUit.Button {
+                id: setUpButton;
+                color: hifi.buttons.blue;
+                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: parent.width/2 - anchors.rightMargin*2;
+                text: "Log In"
+                onClicked: {
+                    sendToScript({method: 'needsLogIn_loginClicked'});
+                }
+            }
+        }
+    }
+    //
+    // LOGIN PAGE 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
+    //
+}

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

@@ -16,27 +16,27 @@ import QtQuick 2.5
 ListModel {
     id: root;
     ListElement{
-        sourcePath: "images/01cat.jpg"
+        sourcePath: "images/01.jpg"
         securityImageEnumValue: 1;
     }
     ListElement{
-        sourcePath: "images/02car.jpg"
+        sourcePath: "images/02.jpg"
         securityImageEnumValue: 2;
     }
     ListElement{
-        sourcePath: "images/03dog.jpg"
+        sourcePath: "images/03.jpg"
         securityImageEnumValue: 3;
     }
     ListElement{
-        sourcePath: "images/04stars.jpg"
+        sourcePath: "images/04.jpg"
         securityImageEnumValue: 4;
     }
     ListElement{
-        sourcePath: "images/05plane.jpg"
+        sourcePath: "images/05.jpg"
         securityImageEnumValue: 5;
     }
     ListElement{
-        sourcePath: "images/06gingerbread.jpg"
+        sourcePath: "images/06.jpg"
         securityImageEnumValue: 6;
     }
 

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

@@ -35,6 +35,16 @@ Rectangle {
     Hifi.QmlCommerce {
         id: commerce;
 
+        onLoginStatusResult: {
+            if (!isLoggedIn && root.activeView !== "needsLogIn") {
+                root.activeView = "needsLogIn";
+            } else if (isLoggedIn) {
+                root.activeView = "initialize";
+                commerce.getSecurityImage();
+                commerce.getKeyFilePathIfExists();
+            }
+        }
+
         onSecurityImageResult: {
             securityImageResultReceived = true;
             if (!exists && root.activeView !== "notSetUp") { // "If security image is not set up"
@@ -131,6 +141,7 @@ Rectangle {
     //
     Item {
         id: titleBarContainer;
+        visible: !needsLogIn.visible;
         // Size
         width: parent.width;
         height: 50;
@@ -182,8 +193,28 @@ Rectangle {
         color: hifi.colors.baseGray;
 
         Component.onCompleted: {
-            commerce.getSecurityImage();
+            commerce.getLoginStatus();
-            commerce.getKeyFilePathIfExists();
+        }
+    }
+        
+    NeedsLogIn {
+        id: needsLogIn;
+        visible: root.activeView === "needsLogIn";
+        anchors.top: parent.top;
+        anchors.bottom: parent.bottom;
+        anchors.left: parent.left;
+        anchors.right: parent.right;
+
+        Connections {
+            onSendSignalToWallet: {
+                sendToScript(msg);
+            }
+        }
+    }
+    Connections {
+        target: GlobalServices
+        onMyUsernameChanged: {
+            commerce.getLoginStatus();
         }
     }
 
@@ -276,6 +307,7 @@ Rectangle {
     //
     Item {
         id: tabButtonsContainer;
+        visible: !needsLogIn.visible;
         property int numTabs: 5;
         // Size
         width: root.width;
@@ -483,6 +515,7 @@ Rectangle {
         id: keyboardContainer;
         z: 999;
         visible: keyboard.raised;
+        property bool punctuationMode: false;
         anchors {
             bottom: parent.bottom;
             left: parent.left;
@@ -508,9 +541,8 @@ Rectangle {
 
         HifiControlsUit.Keyboard {
             id: keyboard;
-            property bool punctuationMode: false;
             raised: HMD.mounted && root.keyboardRaised;
-            numeric: keyboard.punctuationMode;
+            numeric: parent.punctuationMode;
             anchors {
                 bottom: parent.bottom;
                 left: parent.left;

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

@@ -24,21 +24,13 @@ Rectangle {
     HifiConstants { id: hifi; }
 
     id: root;
-    property string lastPage: "login";
+    property string lastPage: "securityImage";
     // Style
     color: hifi.colors.baseGray;
 
     Hifi.QmlCommerce {
         id: commerce;
 
-        onLoginStatusResult: {
-            if (isLoggedIn) {
-                securityImageContainer.visible = true;
-            } else {
-                loginPageContainer.visible = true;
-            }
-        }
-
         onSecurityImageResult: {
             if (!exists && root.lastPage === "securityImage") {
                 // ERROR! Invalid security image.
@@ -61,136 +53,6 @@ Rectangle {
         }
     }
 
-    //
-    // 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.faintGray;
-                // 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.faintGray;
-            // 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.faintGray;
-            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
     //

interface/src/commerce/Wallet.h

@@ -42,17 +42,6 @@ signals:
     void securityImageResult(bool exists) ;
     void keyFilePathIfExistsResult(const QString& path);
 
-protected:
-    enum SecurityImage {
-        NONE = 0,
-        Cat,
-        Car,
-        Dog,
-        Stars,
-        Plane,
-        Gingerbread
-    };
-
 private:
     QStringList _publicKeys{};
     QPixmap* _securityImage { nullptr };

scripts/system/commerce/wallet.js

@@ -57,9 +57,10 @@
     function fromQml(message) {
         switch (message.method) {
             case 'walletSetup_cancelClicked':
+            case 'needsLogIn_cancelClicked':
                 tablet.gotoHomeScreen();
                 break;
-            case 'walletSetup_loginClicked':
+            case 'needsLogIn_loginClicked':
                 openLoginWindow();
                 break;
             case 'disableHmdPreview':

scripts/system/marketplaces/marketplaces.js

@@ -231,6 +231,12 @@
             case 'purchases_goToMarketplaceClicked':
                 tablet.gotoWebScreen(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL);
                 break;
+            case 'needsLogIn_cancelClicked':
+                tablet.gotoWebScreen(MARKETPLACE_URL_INITIAL, MARKETPLACES_INJECT_SCRIPT_URL);
+                break;
+            case 'needsLogIn_loginClicked':
+                openLoginWindow();
+                break;
             default:
                 print('Unrecognized message from Checkout.qml or Purchases.qml: ' + JSON.stringify(message));
         }