add spinner/design updates/fix steam link

interface/resources/qml/LoginDialog.qml

@@ -63,7 +63,7 @@ FocusScope {
         id: opaqueRect
         height: parent.height
         width: parent.width
-        opacity: 0.5
+        opacity: 0.65
         color: "black"
     }
 

interface/resources/qml/LoginDialog/CantAccessBody.qml

@@ -1,140 +0,0 @@
-//
-//  CantAccessBody.qml
-//
-//  Created by Wayne Chen on 11/28/18
-//  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
-import QtQuick 2.4
-
-import controlsUit 1.0 as HifiControlsUit
-import stylesUit 1.0 as HifiStylesUit
-
-Item {
-    id: cantAccessBody
-    clip: true
-    width: root.width
-    height: root.height
-    property int textFieldHeight: 31
-    property string fontFamily: "Raleway"
-    property int fontSize: 15
-    property int textFontSize: 24
-    property bool fontBold: true
-
-    QtObject {
-        id: d
-        readonly property int minWidth: 480
-        readonly property int minWidthButton: !root.isTablet ? 256 : 174
-        property int maxWidth: root.isTablet ? 1280 : root.width
-        readonly property int minHeight: 120
-        // readonly property int minHeightButton: !root.isTablet ? 56 : 42
-        readonly property int minHeightButton: 36
-        property int maxHeight: root.isTablet ? 720 : root.height
-
-        function resize() {
-            maxWidth = root.isTablet ? 1280 : root.width;
-            maxHeight = root.isTablet ? 720 : root.height;
-            var targetWidth = Math.max(titleWidth, mainContainer.width);
-            var targetHeight =  hifi.dimensions.contentSpacing.y + mainContainer.height + 4 * hifi.dimensions.contentSpacing.y;
-
-            var newWidth = Math.max(d.minWidth, Math.min(d.maxWidth, targetWidth));
-            if (!isNaN(newWidth)) {
-                parent.width = root.width = newWidth;
-            }
-
-            parent.height = root.height = Math.max(d.minHeight, Math.min(d.maxHeight, targetHeight)) + hifi.dimensions.contentSpacing.y;
-        }
-    }
-
-    Item {
-        id: mainContainer
-        anchors.fill: parent
-        onHeightChanged: d.resize(); onWidthChanged: d.resize();
-
-        Item {
-            id: textContainer
-            width: parent.width
-            height: 0.45 * parent.height
-            anchors {
-                top: parent.top
-                topMargin: bannerContainer.height + 0.25 * parent.height
-                left: parent.left
-            }
-            TextMetrics {
-                id: titleTextMetrics
-                font: titleText.font
-                text: titleText.text
-            }
-            Text {
-                id: titleText
-                anchors {
-                    top: parent.top
-                    topMargin: 0.2 * parent.height
-                    left: parent.left
-                    leftMargin: (parent.width - titleTextMetrics.width) / 2
-                }
-                text: qsTr("Can't Access Account")
-                font.pixelSize: cantAccessBody.textFontSize + 10
-                font.bold: cantAccessBody.fontBold
-                color: "white"
-                lineHeight: 2
-                lineHeightMode: Text.ProportionalHeight
-                horizontalAlignment: Text.AlignHCenter
-            }
-
-            TextMetrics {
-                id: bodyTextMetrics
-                font: bodyText.font
-                text: bodyText.text
-            }
-            Text {
-                id: bodyText
-                anchors {
-                    top: titleText.bottom
-                    topMargin: hifi.dimensions.contentSpacing.y
-                    left: parent.left
-                }
-                text: qsTr("Please navigate to your default browser to recover your account.\nIf you are in a VR headset, please take it off.")
-                font.pixelSize: cantAccessBody.textFontSize
-                color: "white"
-                wrapMode: Text.WordWrap
-                lineHeight: 1
-                lineHeightMode: Text.ProportionalHeight
-                horizontalAlignment: Text.AlignHCenter
-                Component.onCompleted: {
-                    bodyText.text = root.isTablet ? qsTr("Please navigate to your default browser\nto recover your account.\nIf you are in a VR headset, please take it off.") :
-                        qsTr("Please navigate to your default browser to recover your account.\nIf you are in a VR headset,\nplease take it off.");
-                    bodyTextMetrics.text = bodyText.text;
-                    bodyText
-                    bodyText.anchors.leftMargin = (parent.width - bodyTextMetrics.width) / 2;
-
-                }
-            }
-        }
-
-        HifiControlsUit.Button {
-            id: okButton
-            height: d.minHeightButton
-            anchors {
-                bottom: parent.bottom
-                right: parent.right
-                margins: 3 * hifi.dimensions.contentSpacing.y
-            }
-            text: qsTr("OK")
-            fontFamily: cantAccessBody.fontFamily
-            fontSize: cantAccessBody.fontSize
-            fontBold: cantAccessBody.fontBold
-            onClicked: {
-                bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": ""});
-            }
-        }
-
-    }
-    Component.onCompleted: {
-        d.resize();
-    }
-}

interface/resources/qml/LoginDialog/CompleteProfileBody.qml

@@ -33,10 +33,10 @@ Item {
         id: d
         readonly property int minWidth: 480
         readonly property int minWidthButton: !root.isTablet ? 256 : 174
-        property int maxWidth: root.isTablet ? 1280 : root.width
+        property int maxWidth: root.width
         readonly property int minHeight: 120
         readonly property int minHeightButton: 36
-        property int maxHeight: root.isTablet ? 720 : root.height
+        property int maxHeight: root.height
 
         function resize() {
             maxWidth = root.isTablet ? 1280 : root.width;

interface/resources/qml/LoginDialog/LinkAccountBody.qml

@@ -13,6 +13,8 @@ import QtQuick 2.7
 import QtQuick.Controls 1.4
 import QtQuick.Controls.Styles 1.4 as OriginalStyles
 
+import "." as LoginDialog
+
 import controlsUit 1.0 as HifiControlsUit
 import stylesUit 1.0 as HifiStylesUit
 import TabletScriptingInterface 1.0
@@ -43,10 +45,10 @@ Item {
         id: d
         readonly property int minWidth: 480
         readonly property int minWidthButton: !root.isTablet ? 256 : 174
-        property int maxWidth: root.isTablet ? 1280 : root.width
+        property int maxWidth: root.width
         readonly property int minHeight: 120
         readonly property int minHeightButton: 36
-        property int maxHeight: root.isTablet ? 720 : root.height
+        property int maxHeight: root.height
 
         function resize() {
             maxWidth = root.isTablet ? 1280 : root.width;
@@ -96,16 +98,24 @@ Item {
         height: root.height
         onHeightChanged: d.resize(); onWidthChanged: d.resize();
 
+        LoginDialog.LoginDialogLightbox {
+            id: lightboxPopup;
+            visible: false;
+            anchors.fill: parent;
+        }
+
         Item {
             id: loginContainer
             width: emailField.width
-            height: 0.45 * parent.height
+            height: errorContainer.height + emailField.height + passwordField.height + 5.5 * hifi.dimensions.contentSpacing.y +
+                keepMeLoggedInCheckbox.height + loginButton.height + cantAccessTextMetrics.height + continueButton.height
             anchors {
                 top: parent.top
                 topMargin: root.bannerHeight + 0.25 * parent.height
                 left: parent.left
                 leftMargin: (parent.width - emailField.width) / 2
             }
+
             Item {
                 id: errorContainer
                 width: loginErrorMessageTextMetrics.width
@@ -316,6 +326,11 @@ Item {
                 verticalAlignment: Text.AlignVCenter
                 horizontalAlignment: Text.AlignHCenter
             }
+            TextMetrics {
+                id: cantAccessTextMetrics
+                font: cantAccessText.font
+                text: "Can't access your account?"
+            }
             HifiStylesUit.ShortcutText {
                 id: cantAccessText
                 z: 10
@@ -337,7 +352,14 @@ Item {
                 onLinkActivated: {
                     Tablet.playSound(TabletEnums.ButtonClick);
                     loginDialog.openUrl(link);
-                    bodyLoader.setSource("CantAccessBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
+                    lightboxPopup.titleText = "Can't Access Account";
+                    lightboxPopup.bodyText = lightboxPopup.cantAccessBodyText;
+                    lightboxPopup.button2text = "CLOSE";
+                    lightboxPopup.button2method = function() {
+                        lightboxPopup.visible = false;
+                    }
+                    lightboxPopup.visible = true;
+                    // bodyLoader.setSource("CantAccessBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
                 }
             }
             HifiControlsUit.Button {
@@ -355,6 +377,7 @@ Item {
                 fontSize: linkAccountBody.fontSize
                 fontBold: linkAccountBody.fontBold
                 buttonGlyph: hifi.glyphs.steamSquare
+                buttonGlyphSize: 24
                 buttonGlyphRightMargin: 10
                 onClicked: {
                     // if (loginDialog.isOculusStoreRunning()) {
@@ -395,7 +418,7 @@ Item {
             anchors {
                 left: loginContainer.left
                 top: loginContainer.bottom
-                topMargin: 0.05 * parent.height
+                topMargin: 0.15 * parent.height
             }
             TextMetrics {
                 id: signUpTextMetrics
@@ -500,6 +523,9 @@ Item {
         root.text = "";
         d.resize();
         init();
+        Qt.callLater(function() {
+            emailField.forceActiveFocus();
+        });
     }
 
     Keys.onPressed: {

interface/resources/qml/LoginDialog/LoggingInBody.qml

@@ -32,10 +32,10 @@ Item {
         id: d
         readonly property int minWidth: 480
         readonly property int minWidthButton: !root.isTablet ? 256 : 174
-        property int maxWidth: root.isTablet ? 1280 : root.width
+        property int maxWidth: root.width
         readonly property int minHeight: 120
-        readonly property int minHeightButton: !root.isTablet ? 56 : 42
+        readonly property int minHeightButton: 36
-        property int maxHeight: root.isTablet ? 720 : root.height
+        property int maxHeight: root.height
 
         function resize() {
             maxWidth = root.isTablet ? 1280 : root.width;
@@ -68,7 +68,12 @@ Item {
     function init() {
         // For the process of logging in.
         loggingInText.wrapMode = Text.NoWrap;
-        if (loggingInBody.withSteam) {
+
+        if (loggingInBody.linkSteam) {
+            loggingInText.centerIn = loggingInHeader;
+            loggingInText.text = "Linking to Steam";
+            loginDialog.linkSteam();
+        } else if (loggingInBody.withSteam) {
             loggingInGlyph.visible = true;
             loggingInText.text = "Logging in to Steam";
             loggingInText.x = loggingInHeader.width/2 - loggingInTextMetrics.width/2 + loggingInGlyphTextMetrics.width/2;
@@ -78,6 +83,7 @@ Item {
             loggingInText.text = "Logging in to Oculus";
             loggingInText.x = loggingInHeader.width/2 - loggingInTextMetrics.width/2 + loggingInGlyphTextMetrics.width/2;
         } else {
+            loggingInText.centerIn = loggingInHeader;
             loggingInText.text = "Logging in";
             loggingInText.anchors.bottom = loggingInHeader.bottom;
             loggingInText.anchors.bottomMargin = hifi.dimensions.contentSpacing.y;
@@ -123,9 +129,11 @@ Item {
             Item {
                 id: loggingInHeader
                 width: parent.width
-                height: 0.5 * parent.height
+                height: loggingInGlyph.height
                 anchors {
                     top: parent.top
+                    topMargin: 0.4 * parent.height
+                    left: parent.left
                 }
                 TextMetrics {
                     id: loggingInGlyphTextMetrics;
@@ -138,12 +146,11 @@ Item {
                     // Color
                     color: "white";
                     // Size
-                    size: 31;
+                    size: 36;
                     // Anchors
                     anchors.right: loggingInText.left;
                     anchors.rightMargin: loggingInBody.loggingInGlyphRightMargin
                     anchors.bottom: parent.bottom;
-                    anchors.bottomMargin: hifi.dimensions.contentSpacing.y
                     // Alignment
                     horizontalAlignment: Text.AlignHCenter;
                     verticalAlignment: Text.AlignVCenter;
@@ -158,13 +165,10 @@ Item {
                 Text {
                     id: loggingInText;
                     width: loggingInTextMetrics.width
-                    anchors.bottom: parent.bottom;
+                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.bottomMargin: hifi.dimensions.contentSpacing.y
-                    anchors.left: parent.left;
-                    anchors.leftMargin: (parent.width - loggingInTextMetrics.width) / 2
                     color: "white";
                     font.family: loggingInBody.fontFamily
-                    font.pixelSize: loggingInBody.fontSize
+                    font.pixelSize: 24
                     font.bold: loggingInBody.fontBold
                     wrapMode: Text.NoWrap
                     verticalAlignment: Text.AlignVCenter
@@ -178,11 +182,12 @@ Item {
                 height: 0.5 * parent.height
                 anchors {
                     top: loggingInHeader.bottom
+                    topMargin: 2 * hifi.dimensions.contentSpacing.y
                 }
                 AnimatedImage {
                     id: loggingInSpinner
-                    source: "images/loader-snake-298-b.gif"
+                    source: "images/loader-snake-256.gif"
-                    width: 128
+                    width: 64
                     height: width
                     anchors.left: parent.left;
                     anchors.leftMargin: (parent.width - width) / 2;

interface/resources/qml/LoginDialog/LoginDialogLightbox.qml

@@ -0,0 +1,170 @@
+//
+//  LoginDialogLightbox.qml
+//  qml/LoginDialog
+//
+//  LoginDialogLightbox
+//
+//  Created by Wayne Chen on 2018-12-07
+//  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 stylesUit 1.0
+import controlsUit 1.0 as HifiControlsUit
+import "qrc:////qml//controls" as HifiControls
+
+// references XXX from root context
+
+Rectangle {
+    property string titleText;
+    property string bodyImageSource;
+    property string bodyText;
+    property string button1color: hifi.buttons.noneBorderlessGray;
+    property string button1text;
+    property var button1method;
+    property string button2color: hifi.buttons.blue;
+    property string button2text;
+    property var button2method;
+    property string buttonLayout: "leftright";
+
+    readonly property string cantAccessBodyText: "Please navigate to your default browser to recover your account." +
+        "<br><br>If you are in a VR headset, please take it off.";
+
+    id: root;
+    visible: false;
+    anchors.fill: parent;
+    color: Qt.rgba(0, 0, 0, 0.5);
+    z: 999;
+
+    HifiConstants { id: hifi; }
+
+    onVisibleChanged: {
+        if (!visible) {
+            resetLightbox();
+        }
+    }
+
+    // This object is always used in a popup.
+    // This MouseArea is used to prevent a user from being
+    //     able to click on a button/mouseArea underneath the popup.
+    MouseArea {
+        anchors.fill: parent;
+        propagateComposedEvents: false;
+        hoverEnabled: true;
+    }
+
+    Rectangle {
+        anchors.centerIn: parent;
+        width: 376;
+        height: childrenRect.height + 30;
+        color: "white";
+
+        RalewaySemiBold {
+            id: titleText;
+            text: root.titleText;
+            anchors.top: parent.top;
+            anchors.topMargin: 30;
+            anchors.left: parent.left;
+            anchors.leftMargin: 30;
+            anchors.right: parent.right;
+            anchors.rightMargin: 30;
+            height: paintedHeight;
+            color: hifi.colors.black;
+            size: 24;
+            verticalAlignment: Text.AlignTop;
+            wrapMode: Text.WordWrap;
+        }
+
+        RalewayRegular {
+            id: bodyText;
+            text: root.bodyText;
+            anchors.top: root.bodyImageSource ? bodyImage.bottom : (root.titleText ? titleText.bottom : parent.top);
+            anchors.topMargin: root.bodyImageSource ? 20 : (root.titleText ? 20 : 30);
+            anchors.left: parent.left;
+            anchors.leftMargin: 30;
+            anchors.right: parent.right;
+            anchors.rightMargin: 30;
+            height: paintedHeight;
+            color: hifi.colors.black;
+            size: 20;
+            verticalAlignment: Text.AlignTop;
+            wrapMode: Text.WordWrap;
+
+        }
+
+        Item {
+            id: buttons;
+            anchors.top: bodyText.bottom;
+            anchors.topMargin: 30;
+            anchors.left: parent.left;
+            anchors.right: parent.right;
+            height: root.buttonLayout === "leftright" ? 70 : 150;
+
+            // Button 1
+            HifiControlsUit.Button {
+                id: button1;
+                color: root.button1color;
+                colorScheme: hifi.colorSchemes.light;
+                anchors.top: root.buttonLayout === "leftright" ? parent.top : parent.top;
+                anchors.left: parent.left;
+                anchors.leftMargin: root.buttonLayout === "leftright" ? 30 : 10;
+                anchors.right: root.buttonLayout === "leftright" ? undefined : parent.right;
+                anchors.rightMargin: root.buttonLayout === "leftright" ? undefined : 10;
+                width: root.buttonLayout === "leftright" ? (root.button2text ? parent.width/2 - anchors.leftMargin*2 : parent.width - anchors.leftMargin * 2) :
+                    (undefined);
+                height: 40;
+                text: root.button1text;
+                onClicked: {
+                    button1method();
+                }
+                visible: (root.button1text !== "");
+            }
+
+            // Button 2
+            HifiControlsUit.Button {
+                id: button2;
+                visible: root.button2text;
+                color: root.button2color;
+                colorScheme: hifi.colorSchemes.light;
+                anchors.top: root.buttonLayout === "leftright" ? parent.top : button1.bottom;
+                anchors.topMargin: root.buttonLayout === "leftright" ? undefined : 20;
+                anchors.left: root.buttonLayout === "leftright" ? undefined : parent.left;
+                anchors.leftMargin: root.buttonLayout === "leftright" ? undefined : 10;
+                anchors.right: parent.right;
+                anchors.rightMargin: root.buttonLayout === "leftright" ? 30 : 10;
+                width: root.buttonLayout === "leftright" ? parent.width/2 - anchors.rightMargin*2 : undefined;
+                height: 40;
+                text: root.button2text;
+                onClicked: {
+                    button2method();
+                }
+            }
+        }
+    }
+
+    //
+    // FUNCTION DEFINITIONS START
+    //
+    signal sendToParent(var msg);
+
+    function resetLightbox() {
+        root.titleText = "";
+        root.bodyImageSource = "";
+        root.bodyText = "";
+        root.button1color = hifi.buttons.noneBorderlessGray;
+        root.button1text = "";
+        root.button1method = function() {};
+        root.button2color = hifi.buttons.blue;
+        root.button2text = "";
+        root.button2method = function() {};
+        root.buttonLayout = "leftright";
+    }
+    //
+    // FUNCTION DEFINITIONS END
+    //
+}

interface/resources/qml/LoginDialog/SignUpBody.qml

@@ -43,10 +43,10 @@ Item {
         id: d
         readonly property int minWidth: 480
         readonly property int minWidthButton: !root.isTablet ? 256 : 174
-        property int maxWidth: root.isTablet ? 1280 : root.width
+        property int maxWidth: root.width
         readonly property int minHeight: 120
         readonly property int minHeightButton: 36
-        property int maxHeight: root.isTablet ? 720 : root.height
+        property int maxHeight: root.height
 
         function resize() {
             maxWidth = root.isTablet ? 1280 : root.width;
@@ -222,7 +222,7 @@ Item {
                 id: passwordField
                 width: root.bannerWidth
                 height: signUpBody.textFieldHeight
-                placeholderText: "Password"
+                placeholderText: "Password (min. 6 characters)"
                 font.pixelSize: signUpBody.textFieldFontSize
                 styleRenderType: Text.QtRendering
                 activeFocusOnPress: true
@@ -411,18 +411,19 @@ Item {
         onHandleSignupFailed: {
             console.log("Sign Up Failed")
 
-            var errorStringEdited = errorString.replace(/[\n\r]+/g, ' ');
+            if (errorString !== "") {
-            loginErrorMessage.visible = (errorStringEdited !== "");
+                loginErrorMessage.visible = true;
-            if (errorStringEdited !== "") {
+                var errorStringEdited = errorString.replace(/[\n\r]+/g, "\n");
                 loginErrorMessage.text = errorStringEdited;
-                loginErrorMessageTextMetrics.text = errorStringEdited;
+                loginErrorMessageTextMetrics.text = errorString;
-                if (loginErrorMessageTextMetrics.width > 350 && root.isTablet) {
+                if (loginErrorMessageTextMetrics.width > usernameField.width) {
                     loginErrorMessage.wrapMode = Text.WordWrap;
                     loginErrorMessage.verticalAlignment = Text.AlignLeft;
                     loginErrorMessage.horizontalAlignment = Text.AlignLeft;
-                    errorContainer.height = 2 * loginErrorMessageTextMetrics.height;
+                    errorContainer.height = (loginErrorMessageTextMetrics.width / usernameField.width) * loginErrorMessageTextMetrics.height;
                 }
                 errorContainer.anchors.bottom = usernameField.top;
+                errorContainer.anchors.bottomMargin = hifi.dimensions.contentSpacing.y;
                 errorContainer.anchors.left = usernameField.left;
             }
         }

interface/resources/qml/LoginDialog/UsernameCollisionBody.qml

@@ -43,10 +43,10 @@ Item {
         id: d
         readonly property int minWidth: 480
         readonly property int minWidthButton: !root.isTablet ? 256 : 174
-        property int maxWidth: root.isTablet ? 1280 : root.width
+        property int maxWidth: root.width
         readonly property int minHeight: 120
         readonly property int minHeightButton: 36
-        property int maxHeight: root.isTablet ? 720 : root.height
+        property int maxHeight: root.height
 
         function resize() {
             maxWidth = root.isTablet ? 1280 : root.width;

interface/resources/qml/OverlayLoginDialog.qml

@@ -64,7 +64,7 @@ FocusScope {
         id: opaqueRect
         height: parent.height
         width: parent.width
-        opacity: 0.5
+        opacity: 0.65
         color: "black"
     }
 

interface/resources/qml/controlsUit/Button.qml

@@ -25,6 +25,7 @@ Original.Button {
     property int radius: hifi.buttons.radius
     property alias implicitTextWidth: buttonText.implicitWidth
     property string buttonGlyph: "";
+    property int buttonGlyphSize: 34;
     property int buttonGlyphRightMargin: 0;
     property int fontCapitalization: Font.AllUppercase
 
@@ -103,7 +104,7 @@ Original.Button {
             visible: control.buttonGlyph !== "";
             text: control.buttonGlyph === "" ? hifi.glyphs.question : control.buttonGlyph;
             // Size
-            size: 34;
+            size: control.buttonGlyphSize;
             // Anchors
             anchors.right: buttonText.left;
             anchors.rightMargin: control.buttonGlyphRightMargin

interface/resources/qml/dialogs/TabletLoginDialog.qml

@@ -120,7 +120,7 @@ FocusScope {
         id: opaqueRect
         height: parent.height
         width: parent.width
-        opacity: 0.5
+        opacity: 0.65
         color: "black"
     }