V1

interface/resources/qml/hifi/commerce/Inventory.qml

@@ -45,6 +45,12 @@ Rectangle {
         }
     }
 
+    SecurityImageSelection {
+        id: securityImageSelection;
+        visible: true;
+        referrerURL: inventoryRoot.referrerURL;
+    }
+
     //
     // TITLE BAR START
     //

interface/resources/qml/hifi/commerce/SecurityImageSelection.qml

@@ -0,0 +1,266 @@
+//
+//  SecurityImageSelection.qml
+//  qml/hifi/commerce
+//
+//  SecurityImageSelection
+//
+//  Created by Zach Fox on 2017-08-15
+//  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: securityImageSelectionRoot;
+    property string referrerURL: "";
+    anchors.fill: parent;
+    // Style
+    color: hifi.colors.baseGray;
+    z:999; // On top of everything else
+
+    Hifi.QmlCommerce {
+        id: commerce;
+    }
+
+    //
+    // TITLE BAR START
+    //
+    Item {
+        id: titleBarContainer;
+        // Size
+        width: securityImageSelectionRoot.width;
+        height: 30;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.top: parent.top;
+
+        // Title Bar text
+        RalewaySemiBold {
+            id: titleBarText;
+            text: "Select a Security Image";
+            // Text size
+            size: hifi.fontSizes.overlayTitle;
+            // Anchors
+            anchors.fill: parent;
+            anchors.leftMargin: 16;
+            // Style
+            color: hifi.colors.lightGrayText;
+            // Alignment
+            horizontalAlignment: Text.AlignHLeft;
+            verticalAlignment: Text.AlignVCenter;
+        }
+
+        // Separator
+        HifiControlsUit.Separator {
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            anchors.bottom: parent.bottom;
+        }
+    }
+    //
+    // TITLE BAR END
+    //
+
+    //
+    // EXPLANATION START
+    //
+    Item {
+        id: explanationContainer; 
+        // Size
+        width: securityImageSelectionRoot.width;
+        height: 85;
+        // Anchors
+        anchors.top: titleBarContainer.bottom;
+        anchors.left: parent.left;
+        anchors.right: parent.right;
+
+        RalewayRegular {
+            id: explanationText;
+            text: "This image will be displayed on secure Inventory and Marketplace Checkout dialogs.<b><br>If you don't see your selected image on these dialogs, do not use them!</b>";
+            // Text size
+            size: 16;
+            // Anchors
+            anchors.top: parent.top;
+            anchors.topMargin: 4;
+            anchors.left: parent.left;
+            anchors.leftMargin: 16;
+            anchors.right: parent.right;
+            anchors.rightMargin: 16;
+            // Style
+            color: hifi.colors.lightGrayText;
+            wrapMode: Text.WordWrap;
+            // Alignment
+            horizontalAlignment: Text.AlignHLeft;
+            verticalAlignment: Text.AlignVCenter;
+        }
+
+        // Separator
+        HifiControlsUit.Separator {
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            anchors.bottom: parent.bottom;
+        }
+    }
+    //
+    // EXPLANATION END
+    //
+    
+    //
+    // SECURITY IMAGE GRID START
+    //
+    Item {
+        id: securityImageGridContainer;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.leftMargin: 8;
+        anchors.right: parent.right;
+        anchors.rightMargin: 8;
+        anchors.top: explanationContainer.bottom;
+        anchors.topMargin: 8;
+        anchors.bottom: actionButtonsContainer.top;
+        anchors.bottomMargin: 8;
+
+        ListModel {
+            id: gridModel;
+            ListElement{
+                sourcePath: "images/01cat.jpg"
+            }
+            ListElement{
+                sourcePath: "images/02car.jpg"
+            }
+            ListElement{
+                sourcePath: "images/03dog.jpg"
+            }
+            ListElement{
+                sourcePath: "images/04stars.jpg"
+            }
+            ListElement{
+                sourcePath: "images/05plane.jpg"
+            }
+            ListElement{
+                sourcePath: "images/06gingerbread.jpg"
+            }
+        }
+
+        GridView {
+            id: securityImageGrid;
+            // Anchors
+            anchors.fill: parent;
+            currentIndex: -1;
+            cellWidth: width/2;
+            cellHeight: height/3;
+            model: gridModel;
+            delegate: Item {
+                width: securityImageGrid.cellWidth;
+                height: securityImageGrid.cellHeight;
+                Item {
+                    anchors.fill: parent;
+                    Image {
+                        width: parent.width - 20;
+                        height: parent.height - 20;
+                        source: sourcePath;
+                        anchors.horizontalCenter: parent.horizontalCenter;
+                        anchors.verticalCenter: parent.verticalCenter;
+                        fillMode: Image.PreserveAspectFit;
+                    }
+                }
+                MouseArea {
+                    anchors.fill: parent;
+                    hoverEnabled: enabled;
+                    onClicked: {
+                        securityImageGrid.currentIndex = index;
+                    }
+                    onEntered: {
+                        //thisItemId.color = hifi.colors.blueHighlight;
+                    }
+                    onExited: {
+                        //thisItemId.color = hifi.colors.blueAccent;
+                    }
+                }
+            }
+            highlight: Rectangle {
+                    width: securityImageGrid.cellWidth;
+                    height: securityImageGrid.cellHeight;
+                    color: hifi.colors.blueHighlight;
+                    y: securityImageGrid.currentItem.y;
+                }
+        }
+    }
+    //
+    // SECURITY IMAGE GRID END
+    //
+    
+    
+    //
+    // ACTION BUTTONS START
+    //
+    Item {
+        id: actionButtonsContainer;
+        // Size
+        width: securityImageSelectionRoot.width;
+        height: 40;
+        // Anchors
+        anchors.left: parent.left;
+        anchors.bottom: parent.bottom;
+        anchors.bottomMargin: 8;
+
+        // "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: 'securityImageSelection_cancelClicked', referrerURL: referrerURL});
+            }
+        }
+
+        // "Confirm" button
+        HifiControlsUit.Button {
+            id: confirmButton;
+            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: parent.width/2 - anchors.rightMargin*2;
+            text: "Confirm";
+            onClicked: {
+                commerce.chooseSecurityImage(securityImageGrid.currentIndex);
+            }
+        }
+    }
+    //
+    // ACTION BUTTONS END
+    //
+    
+    //
+    // FUNCTION DEFINITIONS START
+    //
+    signal sendToScript(var message);
+    //
+    // FUNCTION DEFINITIONS END
+    //
+}

interface/src/commerce/QmlCommerce.cpp

@@ -48,4 +48,10 @@ void QmlCommerce::inventory() {
     auto ledger = DependencyManager::get<Ledger>();
     auto wallet = DependencyManager::get<Wallet>();
     ledger->inventory(wallet->listPublicKeys());
- }
+}
+
+void QmlCommerce::chooseSecurityImage(QmlCommerce::SecurityImage imageID) {
+    auto ledger = DependencyManager::get<Ledger>();
+    auto wallet = DependencyManager::get<Wallet>();
+    ledger->inventory(wallet->listPublicKeys());
+}

interface/src/commerce/QmlCommerce.h

@@ -35,6 +35,16 @@ protected:
     Q_INVOKABLE void buy(const QString& assetId, int cost, const QString& buyerUsername = "");
     Q_INVOKABLE void balance();
     Q_INVOKABLE void inventory();
+
+    enum SecurityImage {
+        NONE = 0,
+        Cat
+    };
+    Q_INVOKABLE void chooseSecurityImage(SecurityImage imageID);
+    Q_INVOKABLE bool hasChosenSecurityImage() { return (QmlCommerce::_chosenSecurityImage != SecurityImage::NONE); }
+
+private:
+    SecurityImage _chosenSecurityImage = SecurityImage::NONE;
 };
 
 #endif // hifi_QmlCommerce_h

scripts/system/marketplaces/marketplaces.js

@@ -21,6 +21,7 @@
     var MARKETPLACES_INJECT_SCRIPT_URL = Script.resolvePath("../html/js/marketplacesInject.js");
     var MARKETPLACE_CHECKOUT_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/Checkout.qml";
     var MARKETPLACE_INVENTORY_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/Inventory.qml";
+    var MARKETPLACE_SECURITY_QML_PATH = Script.resourcesPath() + "qml/hifi/commerce/SecurityImageSelection.qml";
 
     var HOME_BUTTON_TEXTURE = "http://hifi-content.s3.amazonaws.com/alan/dev/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png";
     // var HOME_BUTTON_TEXTURE = Script.resourcesPath() + "meshes/tablet-with-home-button.fbx/tablet-with-home-button.fbm/button-root.png";
@@ -217,8 +218,12 @@
             case 'inventory_backClicked':
                 tablet.gotoWebScreen(message.referrerURL, MARKETPLACES_INJECT_SCRIPT_URL);
                 break;
+            case 'securityImageSelection_cancelClicked':
+                console.log("ZRF HERE " + message.referrerURL);
+                tablet.gotoWebScreen(message.referrerURL, MARKETPLACES_INJECT_SCRIPT_URL);
+                break;
             default:
-                print('Unrecognized message from Checkout.qml or Inventory.qml: ' + JSON.stringify(message));
+                print('Unrecognized message from Checkout.qml, Inventory.qml, or SecurityImageSelection.qml: ' + JSON.stringify(message));
         }
     }