Merge pull request #14317 from zfox23/moveSecuritySettings

Move Wallet Security tab to new dialog; fixup Login dialog

interface/resources/qml/LoginDialog/LinkAccountBody.qml

@@ -136,7 +136,7 @@ Item {
 
         TextField {
             id: usernameField
-            text: Settings.getValue("wallet/savedUsername", "");
+            text: Settings.getValue("keepMeLoggedIn/savedUsername", "");
             width: parent.width
             focus: true
             placeholderText: "Username or Email"
@@ -165,7 +165,7 @@ Item {
                 root.text = "";
             }
             Component.onCompleted: {
-                var savedUsername = Settings.getValue("wallet/savedUsername", "");
+                var savedUsername = Settings.getValue("keepMeLoggedIn/savedUsername", "");
                 usernameField.text = savedUsername === "Unknown user" ? "" : savedUsername;
             }
         }
@@ -239,7 +239,10 @@ Item {
 
             }
 
-            Keys.onReturnPressed: linkAccountBody.login()
+            Keys.onReturnPressed: {
+                Settings.setValue("keepMeLoggedIn/savedUsername", usernameField.text);
+                linkAccountBody.login();
+            }
         }
 
         InfoItem {
@@ -263,21 +266,21 @@ Item {
 
             CheckBox {
                 id: autoLogoutCheckbox
-                checked: !Settings.getValue("wallet/autoLogout", true)
+                checked: Settings.getValue("keepMeLoggedIn", false)
-                text: "Keep me signed in"
+                text: "Keep me logged in"
                 boxSize: 20;
                 labelFontSize: 15
                 color: hifi.colors.black
                 onCheckedChanged: {
-                    Settings.setValue("wallet/autoLogout", !checked);
+                    Settings.setValue("keepMeLoggedIn", checked);
                     if (checked) {
-                        Settings.setValue("wallet/savedUsername", Account.username);
+                        Settings.setValue("keepMeLoggedIn/savedUsername", usernameField.text);
                     } else {
-                        Settings.setValue("wallet/savedUsername", "");
+                        Settings.setValue("keepMeLoggedIn/savedUsername", "");
                     }
                 }
                 Component.onDestruction: {
-                    Settings.setValue("wallet/autoLogout", !checked);
+                    Settings.setValue("keepMeLoggedIn", checked);
                 }
             }
 
@@ -289,7 +292,10 @@ Item {
                 text: qsTr(loginDialog.isSteamRunning() ? "Link Account" : "Log in")
                 color: hifi.buttons.blue
 
-                onClicked: linkAccountBody.login()
+                onClicked: {
+                    Settings.setValue("keepMeLoggedIn/savedUsername", usernameField.text);
+                    linkAccountBody.login();
+                }
             }
         }
 
@@ -403,6 +409,7 @@ Item {
         case Qt.Key_Enter:
         case Qt.Key_Return:
             event.accepted = true
+            Settings.setValue("keepMeLoggedIn/savedUsername", usernameField.text);
             linkAccountBody.login()
             break
         }

interface/resources/qml/hifi/commerce/common/CommerceLightbox.qml

@@ -14,9 +14,9 @@
 import Hifi 1.0 as Hifi
 import QtQuick 2.5
 import QtGraphicalEffects 1.0
-import "../../../styles-uit"
+import "qrc:////qml//styles-uit"
-import "../../../controls-uit" as HifiControlsUit
+import "qrc:////qml//controls-uit" as HifiControlsUit
-import "../../../controls" as HifiControls
+import "qrc:////qml//controls" as HifiControls
 
 // references XXX from root context
 
@@ -33,13 +33,15 @@ Rectangle {
     property string buttonLayout: "leftright";
 
     readonly property string securityPicBodyText: "When you see your Security Pic, your actions and data are securely making use of your " +
-        "Wallet's private keys.<br><br>You can change your Security Pic in your Wallet.";
+        "private keys.<br><br>You can change your Security Pic via Settings > Security...";
 
     id: root;
     visible: false;
     anchors.fill: parent;
     color: Qt.rgba(0, 0, 0, 0.5);
     z: 999;
+    
+    HifiConstants { id: hifi; }
 
     onVisibleChanged: {
         if (!visible) {

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

@@ -74,8 +74,7 @@ In your Wallet's Send Money tab, choose from your list of connections, or choose
             isExpanded: false;
             question: "What is a Security Pic?"
             answer: "Your Security Pic acts as an extra layer of Wallet security. \
-When you see your Security Pic, you know that your actions and data are securely making use of your account. \
+When you see your Security Pic, you know that your actions and data are securely making use of your account.";
-<br><br><b><font color='#0093C5'><a href='#securitypic'>Tap here to change your Security Pic.</a></font></b>";
         }
         ListElement {
             isExpanded: false;
@@ -137,7 +136,7 @@ At the moment, there is currently no way to convert HFC to other currencies. Sta
                 anchors.left: parent.left;
                 width: parent.width;
                 height: questionText.paintedHeight + 50;
-            
+
                 RalewaySemiBold {
                     id: plusMinusButton;
                     text: model.isExpanded ? "-" : "+";
@@ -217,8 +216,6 @@ At the moment, there is currently no way to convert HFC to other currencies. Sta
                             }
                         } else if (link === "#support") {
                             Qt.openUrlExternally("mailto:support@highfidelity.com");
-                        } else if (link === "#securitypic") {
-                            sendSignalToWallet({method: 'walletSecurity_changeSecurityImage'});
                         }
                     }
                 }

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

@@ -1,246 +0,0 @@
-//
-//  Security.qml
-//  qml/hifi/commerce/wallet
-//
-//  Security
-//
-//  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 QtGraphicalEffects 1.0
-import "../../../styles-uit"
-import "../../../controls-uit" as HifiControlsUit
-import "../../../controls" as HifiControls
-
-// references XXX from root context
-
-Item {
-    HifiConstants { id: hifi; }
-
-    id: root;
-    property string keyFilePath;
-
-    Connections {
-        target: Commerce;
-
-        onKeyFilePathIfExistsResult: {
-            root.keyFilePath = path;
-        }
-    }
-
-    // Username Text
-    RalewayRegular {
-        id: usernameText;
-        text: Account.username;
-        // Text size
-        size: 24;
-        // Style
-        color: hifi.colors.white;
-        elide: Text.ElideRight;
-        // Anchors
-        anchors.top: parent.top;
-        anchors.left: parent.left;
-        anchors.leftMargin: 20;
-        width: parent.width/2;
-        height: 80;
-    }
-
-    Item {
-        id: securityContainer;
-        anchors.top: usernameText.bottom;
-        anchors.topMargin: 20;
-        anchors.left: parent.left;
-        anchors.right: parent.right;
-        anchors.bottom: parent.bottom;
-
-        RalewaySemiBold {
-            id: securityText;
-            text: "Security";
-            // Anchors
-            anchors.top: parent.top;
-            anchors.left: parent.left;
-            anchors.leftMargin: 20;
-            anchors.right: parent.right;
-            height: 30;
-            // Text size
-            size: 18;
-            // Style
-            color: hifi.colors.blueHighlight;
-        }
-
-        Rectangle {
-            id: securityTextSeparator;
-            // Size
-            width: parent.width;
-            height: 1;
-            // Anchors
-            anchors.left: parent.left;
-            anchors.right: parent.right;
-            anchors.top: securityText.bottom;
-            anchors.topMargin: 8;
-            // Style
-            color: hifi.colors.faintGray;
-        }
-
-        Item {
-            id: changeSecurityImageContainer;
-            anchors.top: securityTextSeparator.bottom;
-            anchors.topMargin: 8;
-            anchors.left: parent.left;
-            anchors.leftMargin: 40;
-            anchors.right: parent.right;
-            anchors.rightMargin: 55;
-            height: 75;
-
-            HiFiGlyphs {
-                id: changeSecurityImageImage;
-                text: hifi.glyphs.securityImage;
-                // Size
-                size: 80;
-                // Anchors
-                anchors.top: parent.top;
-                anchors.bottom: parent.bottom;
-                anchors.left: parent.left;
-                // Style
-                color: hifi.colors.white;
-            }
-
-            RalewaySemiBold {
-                text: "Security Pic";
-                // Anchors
-                anchors.top: parent.top;
-                anchors.bottom: parent.bottom;
-                anchors.left: changeSecurityImageImage.right;
-                anchors.leftMargin: 30;
-                width: 50;
-                // Text size
-                size: 18;
-                // Style
-                color: hifi.colors.white;
-            }
-
-            // "Change Security Pic" button
-            HifiControlsUit.Button {
-                id: changeSecurityImageButton;
-                color: hifi.buttons.blue;
-                colorScheme: hifi.colorSchemes.dark;
-                anchors.right: parent.right;
-                anchors.verticalCenter: parent.verticalCenter;
-                width: 140;
-                height: 40;
-                text: "Change";
-                onClicked: {
-                    sendSignalToWallet({method: 'walletSecurity_changeSecurityImage'});
-                }
-            }
-        }
-
-        Item {
-            id: autoLogoutContainer;
-            anchors.top: changeSecurityImageContainer.bottom;
-            anchors.topMargin: 8;
-            anchors.left: parent.left;
-            anchors.leftMargin: 40;
-            anchors.right: parent.right;
-            anchors.rightMargin: 55;
-            height: 75;
-
-            HiFiGlyphs {	
-                id: autoLogoutImage;	
-                text: hifi.glyphs.walletKey;	
-                // Size	
-                size: 80;	
-                // Anchors	
-                anchors.top: parent.top;	
-                anchors.topMargin: 20;	
-                anchors.left: parent.left;	
-                // Style	
-                color: hifi.colors.white;	
-            }
-
-            HifiControlsUit.CheckBox {
-                id: autoLogoutCheckbox;
-                checked: Settings.getValue("wallet/autoLogout", false);
-                text: "Automatically Log Out when Exiting Interface"
-                // Anchors
-                anchors.verticalCenter: autoLogoutImage.verticalCenter;
-                anchors.left: autoLogoutImage.right;
-                anchors.leftMargin: 20;
-                anchors.right: autoLogoutHelp.left;
-                anchors.rightMargin: 12;
-                boxSize: 28;
-                labelFontSize: 18;
-                color: hifi.colors.white;
-                onCheckedChanged: {
-                    Settings.setValue("wallet/autoLogout", checked);
-                    if (checked) {
-                        Settings.setValue("wallet/savedUsername", Account.username);
-                    } else {
-                        Settings.setValue("wallet/savedUsername", "");
-                    }
-                }
-            }
-
-            RalewaySemiBold {
-                id: autoLogoutHelp;
-                text: '[?]';
-                // Anchors
-                anchors.verticalCenter: autoLogoutImage.verticalCenter;
-                anchors.right: parent.right;
-                width: 30;
-                height: 30;
-                // Text size
-                size: 18;
-                // Style
-                color: hifi.colors.blueHighlight;
-
-                MouseArea {
-                    anchors.fill: parent;
-                    hoverEnabled: true;
-                    onEntered: {
-                        parent.color = hifi.colors.blueAccent;
-                    }
-                    onExited: {
-                        parent.color = hifi.colors.blueHighlight;
-                    }
-                    onClicked: {
-                        sendSignalToWallet({method: 'walletSecurity_autoLogoutHelp'});
-                    }
-                }
-            }
-        }
-    }
-
-    //
-    // 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/Wallet.qml

@@ -142,7 +142,7 @@ Rectangle {
         Image {
             id: titleBarSecurityImage;
             source: "";
-            visible: titleBarSecurityImage.source !== "" && !securityImageChange.visible;
+            visible: titleBarSecurityImage.source !== "";
             anchors.right: parent.right;
             anchors.rightMargin: 6;
             anchors.top: parent.top;
@@ -232,10 +232,6 @@ Rectangle {
                         root.isPassword = msg.isPasswordField;
                     } else if (msg.method === 'walletSetup_lowerKeyboard') {
                         root.keyboardRaised = false;
-                    } else if (msg.method === 'walletSecurity_changePassphraseCancelled') {
-                        root.activeView = "security";
-                    } else if (msg.method === 'walletSecurity_changePassphraseSuccess') {
-                        root.activeView = "security";
                     } else {
                         sendToScript(msg);
                     }
@@ -245,27 +241,6 @@ Rectangle {
             }
         }
     }
-    SecurityImageChange {
-        id: securityImageChange;
-        visible: root.activeView === "securityImageChange";
-        z: 997;
-        anchors.top: titleBarContainer.bottom;
-        anchors.left: parent.left;
-        anchors.right: parent.right;
-        anchors.bottom: parent.bottom;
-
-        Connections {
-            onSendSignalToWallet: {
-                if (msg.method === 'walletSecurity_changeSecurityImageCancelled') {
-                    root.activeView = "security";
-                } else if (msg.method === 'walletSecurity_changeSecurityImageSuccess') {
-                    root.activeView = "security";
-                } else {
-                    sendToScript(msg);
-                }
-            }
-        }
-    }
 
     //
     // TAB CONTENTS START
@@ -366,39 +341,6 @@ Rectangle {
         }
     }
 
-    Security {
-        id: security;
-        visible: root.activeView === "security";
-        anchors.top: titleBarContainer.bottom;
-        anchors.bottom: tabButtonsContainer.top;
-        anchors.left: parent.left;
-        anchors.right: parent.right;
-
-        Connections {
-            onSendSignalToWallet: {
-                if (msg.method === 'walletSecurity_changePassphrase') {
-                    root.activeView = "passphraseChange";
-                    passphraseChange.clearPassphraseFields();
-                    passphraseChange.resetSubmitButton();
-                } else if (msg.method === 'walletSecurity_changeSecurityImage') {
-                    securityImageChange.initModel();
-                    root.activeView = "securityImageChange";
-                } else if (msg.method === 'walletSecurity_autoLogoutHelp') {
-                    lightboxPopup.titleText = "Automatically Log Out";
-                    lightboxPopup.bodyText = "By default, after you log in to High Fidelity, you will stay logged in to your High Fidelity " +
-                        "account even after you close and re-open Interface. This means anyone who opens Interface on your computer " +
-                        "could make purchases with your Wallet.\n\n" +
-                        "If you do not want to stay logged in across Interface sessions, check this box.";
-                    lightboxPopup.button1text = "CLOSE";
-                    lightboxPopup.button1method = function() {
-                        lightboxPopup.visible = false;
-                    }
-                    lightboxPopup.visible = true;
-                }
-            }
-        }
-    }
-
     Help {
         id: help;
         visible: root.activeView === "help";
@@ -407,14 +349,6 @@ Rectangle {
         anchors.left: parent.left;
         anchors.right: parent.right;
 
-        Connections {
-            onSendSignalToWallet: {
-                if (msg.method === 'walletSecurity_changeSecurityImage') {
-                    securityImageChange.initModel();
-                    root.activeView = "securityImageChange";
-                }
-            }
-        }
     }
 
 
@@ -427,8 +361,8 @@ Rectangle {
     //
     Item {
         id: tabButtonsContainer;
-        visible: !needsLogIn.visible && root.activeView !== "passphraseChange" && root.activeView !== "securityImageChange" && sendMoney.currentActiveView !== "sendAssetStep";
+        visible: !needsLogIn.visible && root.activeView !== "passphraseChange" && sendMoney.currentActiveView !== "sendAssetStep";
-        property int numTabs: 5;
+        property int numTabs: 4;
         // Size
         width: root.width;
         height: 90;
@@ -452,7 +386,7 @@ Rectangle {
             anchors.left: parent.left;
             anchors.bottom: parent.bottom;
             width: parent.width / tabButtonsContainer.numTabs;
-        
+
             HiFiGlyphs {
                 id: homeTabIcon;
                 text: hifi.glyphs.home2;
@@ -506,7 +440,7 @@ Rectangle {
             anchors.left: walletHomeButtonContainer.right;
             anchors.bottom: parent.bottom;
             width: parent.width / tabButtonsContainer.numTabs;
-        
+
             HiFiGlyphs {
                 id: exchangeMoneyTabIcon;
                 text: hifi.glyphs.leftRightArrows;
@@ -550,7 +484,7 @@ Rectangle {
             anchors.left: exchangeMoneyButtonContainer.right;
             anchors.bottom: parent.bottom;
             width: parent.width / tabButtonsContainer.numTabs;
-        
+
             HiFiGlyphs {
                 id: sendMoneyTabIcon;
                 text: hifi.glyphs.paperPlane;
@@ -596,70 +530,16 @@ Rectangle {
             }
         }
 
-        // "SECURITY" tab button
-        Rectangle {
-            id: securityButtonContainer;
-            visible: !walletSetup.visible;
-            color: root.activeView === "security" ? hifi.colors.blueAccent : hifi.colors.black;
-            anchors.top: parent.top;
-            anchors.left: sendMoneyButtonContainer.right;
-            anchors.bottom: parent.bottom;
-            width: parent.width / tabButtonsContainer.numTabs;
-        
-            HiFiGlyphs {
-                id: securityTabIcon;
-                text: hifi.glyphs.lock;
-                // Size
-                size: 38;
-                // Anchors
-                anchors.horizontalCenter: parent.horizontalCenter;
-                anchors.top: parent.top;
-                anchors.topMargin: 2;
-                // Style
-                color: root.activeView === "security" || securityTabMouseArea.containsMouse ? hifi.colors.white : hifi.colors.blueHighlight;
-            }
-
-            RalewaySemiBold {
-                text: "SECURITY";
-                // Text size
-                size: 16;
-                // Anchors
-                anchors.bottom: parent.bottom;
-                height: parent.height/2;
-                anchors.left: parent.left;
-                anchors.leftMargin: 4;
-                anchors.right: parent.right;
-                anchors.rightMargin: 4;
-                // Style
-                color: root.activeView === "security" || securityTabMouseArea.containsMouse ? hifi.colors.white : hifi.colors.blueHighlight;
-                wrapMode: Text.WordWrap;
-                // Alignment
-                horizontalAlignment: Text.AlignHCenter;
-                verticalAlignment: Text.AlignTop;
-            }
-            MouseArea {
-                id: securityTabMouseArea;
-                anchors.fill: parent;
-                hoverEnabled: enabled;
-                onClicked: {
-                    root.activeView = "security";
-                    tabButtonsContainer.resetTabButtonColors();
-                }
-                onEntered: parent.color = hifi.colors.blueHighlight;
-                onExited: parent.color = root.activeView === "security" ? hifi.colors.blueAccent : hifi.colors.black;
-            }
-        }
-        
         // "HELP" tab button
         Rectangle {
             id: helpButtonContainer;
             visible: !walletSetup.visible;
             color: root.activeView === "help" ? hifi.colors.blueAccent : hifi.colors.black;
             anchors.top: parent.top;
-            anchors.left: securityButtonContainer.right;
+            anchors.left: sendMoneyButtonContainer.right;
             anchors.bottom: parent.bottom;
             width: parent.width / tabButtonsContainer.numTabs;
-        
+
             HiFiGlyphs {
                 id: helpTabIcon;
                 text: hifi.glyphs.question;

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

@@ -243,7 +243,6 @@ Item {
             height: 50;
             text: "Set Up Wallet";
             onClicked: {
-                securityImageSelection.initModel();
                 root.activeView = "step_2";
             }
         }
@@ -267,124 +266,6 @@ Item {
     // FIRST PAGE END
     //
 
-    //
-    // SECURITY IMAGE SELECTION START
-    //
-    Item {
-        id: securityImageContainer;
-        visible: root.activeView === "step_2";
-        // Anchors
-        anchors.top: titleBarContainer.bottom;
-        anchors.topMargin: 30;
-        anchors.bottom: parent.bottom;
-        anchors.left: parent.left;
-        anchors.leftMargin: 16;
-        anchors.right: parent.right;
-        anchors.rightMargin: 16;
-
-        // Text below title bar
-        RalewayRegular {
-            id: securityImageTitleHelper;
-            text: "Choose a Security Pic:";
-            // Text size
-            size: 24;
-            // Anchors
-            anchors.top: parent.top;
-            anchors.left: parent.left;
-            height: 50;
-            width: paintedWidth;
-            // Style
-            color: hifi.colors.white;
-            // Alignment
-            horizontalAlignment: Text.AlignHLeft;
-            verticalAlignment: Text.AlignVCenter;
-        }
-
-        SecurityImageSelection {
-            id: securityImageSelection;
-            // Anchors
-            anchors.top: securityImageTitleHelper.bottom;
-            anchors.left: parent.left;
-            anchors.right: parent.right;
-            height: 300;
-
-            Connections {
-                onSendSignalToWallet: {
-                    sendSignalToWallet(msg);
-                }
-            }
-        }
-
-        // Text below security images
-        RalewayRegular {
-            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
-            anchors.top: securityImageSelection.bottom;
-            anchors.topMargin: 40;
-            anchors.left: parent.left;
-            anchors.right: parent.right;
-            height: paintedHeight;
-            // Style
-            color: hifi.colors.white;
-            wrapMode: Text.WordWrap;
-            // Alignment
-            horizontalAlignment: Text.AlignHLeft;
-            verticalAlignment: Text.AlignVCenter;
-        }
-
-        // Navigation Bar
-        Item {
-            // Size
-            width: parent.width;
-            height: 50;
-            // Anchors:
-            anchors.left: parent.left;
-            anchors.bottom: parent.bottom;
-            anchors.bottomMargin: 50;
-
-            // "Back" button
-            HifiControlsUit.Button {
-                color: hifi.buttons.noneBorderlessWhite;
-                colorScheme: hifi.colorSchemes.dark;
-                anchors.top: parent.top;
-                anchors.bottom: parent.bottom;
-                anchors.left: parent.left;
-                anchors.leftMargin: 20;
-                width: 200;
-                text: "Back"
-                onClicked: {
-                    securityImageSelection.resetSelection();
-                    root.activeView = "step_1";
-                }
-            }
-
-            // "Next" button
-            HifiControlsUit.Button {
-                enabled: securityImageSelection.currentIndex !== -1;
-                color: hifi.buttons.blue;
-                colorScheme: hifi.colorSchemes.dark;
-                anchors.top: parent.top;
-                anchors.bottom: parent.bottom;
-                anchors.right: parent.right;
-                anchors.rightMargin: 20;
-                width: 200;
-                text: "Next";
-                onClicked: {
-                    root.lastPage = "step_2";
-                    var securityImagePath = securityImageSelection.getImagePathFromImageID(securityImageSelection.getSelectedImageIndex())
-                    Commerce.chooseSecurityImage(securityImagePath);
-                    root.activeView = "step_3";
-                    passphraseSelection.clearPassphraseFields();
-                }
-            }
-        }
-    }
-    //
-    // SECURITY IMAGE SELECTION END
-    //
-
     //
     // SECURE PASSPHRASE SELECTION START
     //
@@ -525,7 +406,6 @@ Item {
                 width: 200;
                 text: "Back"
                 onClicked: {
-                    securityImageSelection.resetSelection();
                     root.lastPage = "step_3";
                     root.activeView = "step_2";
                 }

interface/resources/qml/hifi/dialogs/security/Security.qml

@@ -0,0 +1,344 @@
+//
+//  Security.qml
+//  qml\hifi\dialogs\security
+//
+//  Security
+//
+//  Created by Zach Fox on 2018-10-31
+//  Copyright 2018 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 QtGraphicalEffects 1.0
+import "qrc:////qml//styles-uit" as HifiStylesUit
+import "qrc:////qml//controls-uit" as HifiControlsUit
+import "qrc:////qml//controls" as HifiControls
+import "qrc:////qml//hifi//commerce//common" as HifiCommerceCommon
+
+Rectangle {
+    HifiStylesUit.HifiConstants { id: hifi; }
+
+    id: root;
+    color: hifi.colors.baseGray;
+    
+    property string title: "Security Settings";
+    property bool walletSetUp;
+    
+    QtObject {
+        id: margins
+        property real paddings: root.width / 20.25
+
+        property real sizeCheckBox: root.width / 13.5
+        property real sizeText: root.width / 2.5
+        property real sizeLevel: root.width / 5.8
+        property real sizeDesktop: root.width / 5.8
+        property real sizeVR: root.width / 13.5
+    }
+
+    Connections {
+        target: Commerce;
+
+        onWalletStatusResult: {
+            if (walletStatus === 5) {
+                Commerce.getSecurityImage();
+                root.walletSetUp = true;
+            } else {
+                root.walletSetUp = false;
+            }
+        }
+
+        onSecurityImageResult: {
+            if (exists) {
+                currentSecurityPicture.source = "";
+                currentSecurityPicture.source = "image://security/securityImage";
+            }
+        }
+    }
+
+    Component.onCompleted: {
+        Commerce.getWalletStatus();
+    }
+
+    HifiCommerceCommon.CommerceLightbox {
+        z: 996;
+        id: lightboxPopup;
+        visible: false;
+        anchors.fill: parent;
+    }
+
+    SecurityImageChange {
+        id: securityImageChange;
+        visible: false;
+        z: 997;
+        anchors.top: usernameText.bottom;
+        anchors.left: parent.left;
+        anchors.right: parent.right;
+        anchors.bottom: parent.bottom;
+
+        Connections {
+            onSendSignalToParent: {
+                securityImageChange.visible = false;
+            }
+        }
+    }
+
+    // Username Text
+    HifiStylesUit.RalewayRegular {
+        id: usernameText;
+        text: Account.username === "Unknown user" ? "Please Log In" : Account.username;
+        // Text size
+        size: 24;
+        // Style
+        color: hifi.colors.white;
+        elide: Text.ElideRight;
+        // Anchors
+        anchors.top: parent.top;
+        anchors.left: parent.left;
+        anchors.leftMargin: 20;
+        anchors.right: parent.right;
+        anchors.rightMargin: 20;
+        height: 60;
+    }
+
+    Item {
+        id: pleaseLogInContainer;
+        visible: Account.username === "Unknown user";
+        anchors.top: usernameText.bottom;
+        anchors.left: parent.left;
+        anchors.right: parent.right;
+        anchors.bottom: parent.bottom;
+
+        HifiStylesUit.RalewayRegular {
+            text: "Please log in for security settings."
+            // Text size
+            size: 24;
+            // Style
+            color: hifi.colors.white;
+            // Anchors
+            anchors.bottom: openLoginButton.top;
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            horizontalAlignment: Text.AlignHCenter;
+            verticalAlignment: Text.AlignVCenter;
+            height: 60;
+        }
+        
+        HifiControlsUit.Button {
+            id: openLoginButton;
+            color: hifi.buttons.white;
+            colorScheme: hifi.colorSchemes.dark;
+            anchors.centerIn: parent;
+            width: 140;
+            height: 40;
+            text: "Log In";
+            onClicked: {
+                DialogsManager.showLoginDialog();
+            }
+        }
+    }
+
+    Item {
+        id: securitySettingsContainer;
+        visible: !pleaseLogInContainer.visible;
+        anchors.top: usernameText.bottom;
+        anchors.left: parent.left;
+        anchors.right: parent.right;
+        anchors.bottom: parent.bottom;
+
+        Item {
+            id: accountContainer;
+            anchors.top: securitySettingsContainer.top;
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            height: childrenRect.height;
+
+            Rectangle {
+                id: accountHeaderContainer;
+                anchors.top: parent.top;
+                anchors.left: parent.left;
+                anchors.right: parent.right;
+                height: 55;
+                color: hifi.colors.baseGrayHighlight;
+
+                HifiStylesUit.RalewaySemiBold {
+                    text: "Account";
+                    anchors.fill: parent;
+                    anchors.leftMargin: 20;
+                    color: hifi.colors.white;
+                    size: 18;
+                }
+            }
+
+            Item {
+                id: keepMeLoggedInContainer;
+                anchors.top: accountHeaderContainer.bottom;
+                anchors.left: parent.left;
+                anchors.right: parent.right;
+                height: 80;            
+
+                HifiControlsUit.CheckBox {
+                    id: autoLogoutCheckbox;
+                    checked: Settings.getValue("keepMeLoggedIn", false);
+                    text: "Keep Me Logged In"
+                    // Anchors
+                    anchors.verticalCenter: parent.verticalCenter;
+                    anchors.left: parent.left;
+                    anchors.leftMargin: 20;
+                    boxSize: 24;
+                    labelFontSize: 18;
+                    colorScheme: hifi.colorSchemes.dark
+                    color: hifi.colors.white;
+                    width: 240;
+                    onCheckedChanged: {
+                        Settings.setValue("keepMeLoggedIn", checked);
+                        if (checked) {
+                            Settings.setValue("keepMeLoggedIn/savedUsername", Account.username);
+                        } else {
+                            Settings.setValue("keepMeLoggedIn/savedUsername", "");
+                        }
+                    }
+                }
+
+                HifiStylesUit.RalewaySemiBold {
+                    id: autoLogoutHelp;
+                    text: '[?]';
+                    // Anchors
+                    anchors.verticalCenter: parent.verticalCenter;
+                    anchors.right: autoLogoutCheckbox.right;
+                    width: 30;
+                    height: 30;
+                    // Text size
+                    size: 18;
+                    // Style
+                    color: hifi.colors.blueHighlight;
+
+                    MouseArea {
+                        anchors.fill: parent;
+                        hoverEnabled: true;
+                        onEntered: {
+                            parent.color = hifi.colors.blueAccent;
+                        }
+                        onExited: {
+                            parent.color = hifi.colors.blueHighlight;
+                        }
+                        onClicked: {
+                            lightboxPopup.titleText = "Keep Me Logged In";
+                            lightboxPopup.bodyText = "If you choose to stay logged in, ensure that this is a trusted device.\n\n" +
+                                "Also, remember that logging out may not disconnect you from a domain.";
+                            lightboxPopup.button1text = "OK";
+                            lightboxPopup.button1method = function() {
+                                lightboxPopup.visible = false;
+                            }
+                            lightboxPopup.visible = true;
+                        }
+                    }
+                }
+            }
+        }
+
+        Item {
+            id: walletContainer;
+            anchors.top: accountContainer.bottom;
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            height: childrenRect.height;
+
+            Rectangle {
+                id: walletHeaderContainer;
+                anchors.top: parent.top;
+                anchors.left: parent.left;
+                anchors.right: parent.right;
+                height: 55;
+                color: hifi.colors.baseGrayHighlight;
+
+                HifiStylesUit.RalewaySemiBold {
+                    text: "Wallet";
+                    anchors.fill: parent;
+                    anchors.leftMargin: 20;
+                    color: hifi.colors.white;
+                    size: 18;
+                }
+            }
+
+            Item {
+                id: walletSecurityPictureContainer;
+                visible: root.walletSetUp;
+                anchors.top: walletHeaderContainer.bottom;
+                anchors.left: parent.left;
+                anchors.right: parent.right;
+                height: 80;
+
+                Image {
+                    id: currentSecurityPicture;
+                    source: "";
+                    visible: true;
+                    anchors.left: parent.left;
+                    anchors.leftMargin: 20;
+                    anchors.verticalCenter: parent.verticalCenter;
+                    height: 40;
+                    width: height;
+                    mipmap: true;
+                    cache: false;
+                }
+
+                HifiStylesUit.RalewaySemiBold {
+                    id: securityPictureText;
+                    text: "Wallet Security Picture";
+                    // Anchors
+                    anchors.top: parent.top;
+                    anchors.bottom: parent.bottom;
+                    anchors.left: currentSecurityPicture.right;
+                    anchors.leftMargin: 12;
+                    width: paintedWidth;
+                    // Text size
+                    size: 18;
+                    // Style
+                    color: hifi.colors.white;
+                }
+
+                // "Change Security Pic" button
+                HifiControlsUit.Button {
+                    id: changeSecurityImageButton;
+                    color: hifi.buttons.white;
+                    colorScheme: hifi.colorSchemes.dark;
+                    anchors.left: securityPictureText.right;
+                    anchors.leftMargin: 12;
+                    anchors.verticalCenter: parent.verticalCenter;
+                    width: 140;
+                    height: 40;
+                    text: "Change";
+                    onClicked: {
+                        securityImageChange.visible = true;
+                        securityImageChange.initModel();
+                    }
+                }
+            }
+
+            Item {
+                id: walletNotSetUpContainer;
+                visible: !root.walletSetUp;
+                anchors.top: walletHeaderContainer.bottom;
+                anchors.left: parent.left;
+                anchors.right: parent.right;
+                height: 60;
+
+                HifiStylesUit.RalewayRegular {
+                    text: "Your wallet is not set up.\n" +
+                        "Open the WALLET app to get started.";
+                    // Anchors
+                    anchors.fill: parent;
+                    // Text size
+                    size: 18;
+                    // Style
+                    color: hifi.colors.white;
+                    horizontalAlignment: Text.AlignHCenter;
+                    verticalAlignment: Text.AlignVCenter;
+                }
+            }
+        }
+    }
+}

interface/resources/qml/hifi/dialogs/security/SecurityImageChange.qml

@@ -1,11 +1,11 @@
 //
 //  SecurityImageChange.qml
-//  qml/hifi/commerce/wallet
+//  qml\hifi\dialogs\security
 //
-//  SecurityImageChange
+//  Security
 //
-//  Created by Zach Fox on 2017-08-18
+//  Created by Zach Fox on 2018-10-31
-//  Copyright 2017 High Fidelity, Inc.
+//  Copyright 2018 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
@@ -13,16 +13,17 @@
 
 import Hifi 1.0 as Hifi
 import QtQuick 2.5
-import "../../../styles-uit"
+import "qrc:////qml//styles-uit" as HifiStylesUit
-import "../../../controls-uit" as HifiControlsUit
+import "qrc:////qml//controls-uit" as HifiControlsUit
-import "../../../controls" as HifiControls
+import "qrc:////qml//controls" as HifiControls
 
 // references XXX from root context
 
-Item {
+Rectangle {
-    HifiConstants { id: hifi; }
+    HifiStylesUit.HifiConstants { id: hifi; }
 
     id: root;
+    color: hifi.colors.baseGray;
     property bool justSubmitted: false;
 
     Connections {
@@ -33,7 +34,7 @@ Item {
             securityImageChangePageSecurityImage.source = "image://security/securityImage";
             if (exists) { // Success submitting new security image
                 if (root.justSubmitted) {
-                    sendSignalToWallet({method: "walletSecurity_changeSecurityImageSuccess"});
+                    sendSignalToParent({method: "walletSecurity_changeSecurityImageSuccess"});
                     root.justSubmitted = false;
                 }
             } else if (root.justSubmitted) {
@@ -72,7 +73,7 @@ Item {
             anchors.bottom: parent.bottom;
             height: 22;
             // Lock icon
-            HiFiGlyphs {
+            HifiStylesUit.HiFiGlyphs {
                 id: lockIcon;
                 text: hifi.glyphs.lock;
                 anchors.bottom: parent.bottom;
@@ -83,8 +84,8 @@ Item {
                 verticalAlignment: Text.AlignBottom;
                 color: hifi.colors.white;
             }
-            // "Security image" text below pic
+            // "Security image" text below image
-            RalewayRegular {
+            HifiStylesUit.RalewayRegular {
                 id: securityImageText;
                 text: "SECURITY PIC";
                 // Text size
@@ -116,9 +117,9 @@ Item {
         anchors.bottom: parent.bottom;
 
         // "Change Security Image" text
-        RalewaySemiBold {
+        HifiStylesUit.RalewaySemiBold {
             id: securityImageTitle;
-            text: "Change Security Pic:";
+            text: "Change Security Image:";
             // Text size
             size: 18;
             anchors.top: parent.top;
@@ -139,12 +140,6 @@ Item {
             anchors.right: parent.right;
             anchors.rightMargin: 16;
             height: 300;
-        
-            Connections {
-                onSendSignalToWallet: {
-                    sendSignalToWallet(msg);
-                }
-            }
         }
 
         // Navigation Bar
@@ -169,7 +164,7 @@ Item {
                 width: 150;
                 text: "Cancel"
                 onClicked: {
-                    sendSignalToWallet({method: "walletSecurity_changeSecurityImageCancelled"});
+                    sendSignalToParent({method: "walletSecurity_changeSecurityImageCancelled"});
                 }
             }
 
@@ -197,7 +192,7 @@ Item {
     // SECURITY IMAGE SELECTION END
     //
 
-    signal sendSignalToWallet(var msg);
+    signal sendSignalToParent(var msg);
 
     function initModel() {
         securityImageSelection.initModel();

interface/resources/qml/hifi/dialogs/security/SecurityImageModel.qml

@@ -1,11 +1,11 @@
 //
 //  SecurityImageModel.qml
-//  qml/hifi/commerce
+//  qml\hifi\dialogs\security
 //
-//  SecurityImageModel
+//  Security
 //
-//  Created by Zach Fox on 2017-08-17
+//  Created by Zach Fox on 2018-10-31
-//  Copyright 2017 High Fidelity, Inc.
+//  Copyright 2018 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

interface/resources/qml/hifi/dialogs/security/SecurityImageSelection.qml

@@ -1,11 +1,11 @@
 //
 //  SecurityImageSelection.qml
-//  qml/hifi/commerce/wallet
+//  qml\hifi\dialogs\security
 //
-//  SecurityImageSelection
+//  Security
 //
-//  Created by Zach Fox on 2017-08-17
+//  Created by Zach Fox on 2018-10-31
-//  Copyright 2017 High Fidelity, Inc.
+//  Copyright 2018 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
@@ -13,14 +13,14 @@
 
 import Hifi 1.0 as Hifi
 import QtQuick 2.5
-import "../../../styles-uit"
+import "qrc:////qml//styles-uit" as HifiStylesUit
-import "../../../controls-uit" as HifiControlsUit
+import "qrc:////qml//controls-uit" as HifiControlsUit
-import "../../../controls" as HifiControls
+import "qrc:////qml//controls" as HifiControls
 
 // references XXX from root context
 
 Item {
-    HifiConstants { id: hifi; }
+    HifiStylesUit.HifiConstants { id: hifi; }
 
     id: root;
     property alias currentIndex: securityImageGrid.currentIndex;
@@ -64,17 +64,15 @@ Item {
             }
         }
         highlight: Rectangle {
-                width: securityImageGrid.cellWidth;
+            width: securityImageGrid.cellWidth;
-                height: securityImageGrid.cellHeight;
+            height: securityImageGrid.cellHeight;
-                color: hifi.colors.blueHighlight;
+            color: hifi.colors.blueHighlight;
-            }
+        }
     }
 
     //
     // FUNCTION DEFINITIONS START
     //
-    signal sendSignalToWallet(var msg);
-
     function getImagePathFromImageID(imageID) {
         return (imageID ? gridModel.getImagePathFromImageID(imageID) : "");
     }

interface/src/Application.cpp

@@ -382,7 +382,7 @@ static const int INTERVAL_TO_CHECK_HMD_WORN_STATUS = 500; // milliseconds
 static const QString DESKTOP_DISPLAY_PLUGIN_NAME = "Desktop";
 static const QString ACTIVE_DISPLAY_PLUGIN_SETTING_NAME = "activeDisplayPlugin";
 static const QString SYSTEM_TABLET = "com.highfidelity.interface.tablet.system";
-static const QString AUTO_LOGOUT_SETTING_NAME = "wallet/autoLogout";
+static const QString KEEP_ME_LOGGED_IN_SETTING_NAME = "keepMeLoggedIn";
 
 const std::vector<std::pair<QString, Application::AcceptURLMethod>> Application::_acceptedExtensions {
     { SVO_EXTENSION, &Application::importSVOFromURL },
@@ -2567,8 +2567,8 @@ void Application::cleanupBeforeQuit() {
     }
     DependencyManager::destroy<ScriptEngines>();
 
-    bool autoLogout = Setting::Handle<bool>(AUTO_LOGOUT_SETTING_NAME, false).get();
+    bool keepMeLoggedIn = Setting::Handle<bool>(KEEP_ME_LOGGED_IN_SETTING_NAME, false).get();
-    if (autoLogout) {
+    if (!keepMeLoggedIn) {
         DependencyManager::get<AccountManager>()->removeAccountFromFile();
     }
 
@@ -2944,13 +2944,13 @@ void Application::initializeUi() {
         QUrl{ "hifi/commerce/wallet/PassphraseChange.qml" },
         QUrl{ "hifi/commerce/wallet/PassphraseModal.qml" },
         QUrl{ "hifi/commerce/wallet/PassphraseSelection.qml" },
-        QUrl{ "hifi/commerce/wallet/Security.qml" },
-        QUrl{ "hifi/commerce/wallet/SecurityImageChange.qml" },
-        QUrl{ "hifi/commerce/wallet/SecurityImageModel.qml" },
-        QUrl{ "hifi/commerce/wallet/SecurityImageSelection.qml" },
         QUrl{ "hifi/commerce/wallet/Wallet.qml" },
         QUrl{ "hifi/commerce/wallet/WalletHome.qml" },
         QUrl{ "hifi/commerce/wallet/WalletSetup.qml" },
+        QUrl{ "hifi/dialogs/security/Security.qml" },
+        QUrl{ "hifi/dialogs/security/SecurityImageChange.qml" },
+        QUrl{ "hifi/dialogs/security/SecurityImageModel.qml" },
+        QUrl{ "hifi/dialogs/security/SecurityImageSelection.qml" },
     }, callback);
     qmlRegisterType<ResourceImageItem>("Hifi", 1, 0, "ResourceImageItem");
     qmlRegisterType<Preference>("Hifi", 1, 0, "Preference");

interface/src/Menu.cpp

@@ -265,6 +265,18 @@ Menu::Menu() {
             QString("hifi/tablet/TabletGraphicsPreferences.qml"), "GraphicsPreferencesDialog");
     });
 
+    // Settings > Security...
+    action = addActionToQMenuAndActionHash(settingsMenu, "Security...");
+    connect(action, &QAction::triggered, [] {
+		auto tablet = DependencyManager::get<TabletScriptingInterface>()->getTablet("com.highfidelity.interface.tablet.system");
+		auto hmd = DependencyManager::get<HMDScriptingInterface>();
+		tablet->pushOntoStack("hifi/dialogs/security/Security.qml");
+
+		if (!hmd->getShouldShowTablet()) {
+			hmd->toggleShouldShowTablet();
+		}
+    });
+
     // Settings > Developer Menu
     addCheckableActionToQMenuAndActionHash(settingsMenu, "Developer Menu", 0, false, this, SLOT(toggleDeveloperMenus()));
 

interface/src/commerce/Wallet.cpp

@@ -687,7 +687,7 @@ void Wallet::chooseSecurityImage(const QString& filename) {
         delete _securityImage;
     }
     QString path = PathUtils::resourcesPath();
-    path.append("/qml/hifi/commerce/wallet/");
+    path.append("/qml/hifi/dialogs/security/");
     path.append(filename);
 
     // now create a new security image pixmap

scripts/system/commerce/wallet.js

@@ -376,9 +376,9 @@ function deleteSendMoneyParticleEffect() {
 }
 
 function onUsernameChanged() {
-    if (Account.username !== Settings.getValue("wallet/savedUsername")) {
+    if (Account.username !== Settings.getValue("keepMeLoggedIn/savedUsername")) {
-        Settings.setValue("wallet/autoLogout", false);
+        Settings.setValue("keepMeLoggedIn", false);
-        Settings.setValue("wallet/savedUsername", "");
+        Settings.setValue("keepMeLoggedIn/savedUsername", "");
     }
 }