From 3522fe5263461d2c54e37b5a5019c0d514d3ec8c Mon Sep 17 00:00:00 2001 From: Wayne Chen Date: Tue, 23 Oct 2018 22:19:54 -0700 Subject: [PATCH] some work to profile screen --- .../qml/LoginDialog/CompleteProfileBody.qml | 304 ++++++++++---- .../qml/LoginDialog/LinkAccountBody.qml | 372 +----------------- .../resources/qml/LoginDialog/SignInBody.qml | 67 ++-- 3 files changed, 280 insertions(+), 463 deletions(-) diff --git a/interface/resources/qml/LoginDialog/CompleteProfileBody.qml b/interface/resources/qml/LoginDialog/CompleteProfileBody.qml index 3a57061de4..34f202ff0f 100644 --- a/interface/resources/qml/LoginDialog/CompleteProfileBody.qml +++ b/interface/resources/qml/LoginDialog/CompleteProfileBody.qml @@ -12,108 +12,243 @@ import Hifi 1.0 import QtQuick 2.4 import QtQuick.Controls.Styles 1.4 as OriginalStyles -import controlsUit 1.0 -import stylesUit 1.0 +import controlsUit 1.0 as HifiControlsUit +import stylesUit 1.0 as HifiStylesUit Item { id: completeProfileBody clip: true width: root.pane.width height: root.pane.height + readonly property string termsContainerText: qsTr("By creating this user profile, you agree to High Fidelity's Terms of Service") + readonly property string fontFamily: "Cairo" + readonly property int fontSize: 24 + readonly property bool fontBold: true QtObject { id: d readonly property int minWidth: 480 - readonly property int maxWidth: 1280 + readonly property int minWidthButton: !root.isTablet ? 256 : 174 + property int maxWidth: root.isTablet ? 1280 : Window.innerWidth readonly property int minHeight: 120 - readonly property int maxHeight: 720 + readonly property int minHeightButton: !root.isTablet ? 56 : 42 + property int maxHeight: root.isTablet ? 720 : Window.innerHeight function resize() { + maxWidth = root.isTablet ? 1280 : Window.innerWidth; + maxHeight = root.isTablet ? 720 : Window.innerHeight; if (root.isTablet === false) { - var targetWidth = Math.max(titleWidth, Math.max(additionalTextContainer.contentWidth, - termsContainer.contentWidth)) + var targetWidth = Math.max(Math.max(titleWidth, Math.max(additionalTextContainer.contentWidth, + termsContainer.contentWidth)), mainContainer.width) parent.width = root.width = Math.max(d.minWidth, Math.min(d.maxWidth, targetWidth)) } - var targetHeight = 5 * hifi.dimensions.contentSpacing.y + buttons.height + additionalTextContainer.height + termsContainer.height + var targetHeight = Math.max(5 * hifi.dimensions.contentSpacing.y + buttons.height + additionalTextContainer.height + termsContainer.height, d.maxHeight) parent.height = root.height = Math.max(d.minHeight, Math.min(d.maxHeight, targetHeight)) } } - Row { - id: buttons - anchors { - top: parent.top - horizontalCenter: parent.horizontalCenter - margins: 0 - topMargin: 2 * hifi.dimensions.contentSpacing.y + // timer to kill the dialog upon login success + Timer { + id: successTimer + interval: 500; + running: false; + repeat: false; + onTriggered: { + root.tryDestroy(); } - spacing: hifi.dimensions.contentSpacing.x + } + + function hideContents(hide) { + additionalTextContainer.visible = !hide; + termsContainer.visible = !hide; + buttons.visible = !hide; + } + + function loginSuccess(success) { + loginErrorMessage.visible = true; + loggedInGlyph.visible = success; + loginErrorMessage.text = success ? "You are now logged into Steam!" : "Error logging into Steam." + loginErrorMessage.color = success ? "white" : "red"; + loginErrorMessage.font.pixelSize = success ? 24 : 12; + loginErrorMessage.anchors.leftMargin = (mainContainer.width - loginErrorMessageTextMetrics.width) / 2; + completeProfileBody.hideContents(success); + if (success) { + successTimer.start(); + } + } + + Item { + id: mainContainer + width: root.pane.width + height: root.pane.height onHeightChanged: d.resize(); onWidthChanged: d.resize(); - Button { - anchors.verticalCenter: parent.verticalCenter - width: 200 - - text: qsTr("Create your profile") - color: hifi.buttons.blue - - onClicked: loginDialog.createAccountFromStream() + Rectangle { + id: opaqueRect + height: parent.height + width: parent.width + opacity: 0.9 + color: "black" } - Button { - anchors.verticalCenter: parent.verticalCenter - text: qsTr("Cancel") - onClicked: root.tryDestroy() + Item { + id: bannerContainer + width: parent.width + height: banner.height + anchors { + top: parent.top + topMargin: 85 + } + Image { + id: banner + anchors.centerIn: parent + source: "../../images/high-fidelity-banner.svg" + horizontalAlignment: Image.AlignHCenter + } } - } + Item { + id: contentItem + anchors.fill: parent - ShortcutText { - id: additionalTextContainer - anchors { - top: buttons.bottom - horizontalCenter: parent.horizontalCenter - margins: 0 - topMargin: hifi.dimensions.contentSpacing.y + TextMetrics { + id: loginErrorMessageTextMetrics + font: loginErrorMessage.font + text: loginErrorMessage.text + } + Text { + id: loginErrorMessage + anchors.top: parent.top; + // above buttons. + anchors.topMargin: (parent.height - additionalTextContainer.height) / 2 - hifi.dimensions.contentSpacing.y - buttons.height + anchors.left: parent.left; + color: "red"; + font.family: "Cairo" + font.pixelSize: 12 + text: "" + visible: true + } + + HifiStylesUit.HiFiGlyphs { + id: loggedInGlyph; + text: hifi.glyphs.steamSquare; + // color + color: "white" + // Size + size: 78; + // Anchors + anchors.left: parent.left; + anchors.leftMargin: (parent.width - loggedInGlyph.size) / 2; + anchors.top: loginErrorMessage.bottom + anchors.topMargin: 2 * hifi.dimensions.contentSpacing.y + // Alignment + horizontalAlignment: Text.AlignHCenter; + verticalAlignment: Text.AlignVCenter; + visible: false; + + } + Row { + id: buttons + anchors { + top: parent.top + topMargin: (parent.height - additionalTextContainer.height) / 2 - hifi.dimensions.contentSpacing.y + horizontalCenter: parent.horizontalCenter + margins: 0 + } + spacing: hifi.dimensions.contentSpacing.x + onHeightChanged: d.resize(); onWidthChanged: d.resize(); + + HifiControlsUit.Button { + id: profileButton + anchors.verticalCenter: parent.verticalCenter + width: 256 + + text: qsTr("Create your profile") + color: hifi.buttons.blue + + fontFamily: completeProfileBody.fontFamily + fontSize: completeProfileBody.fontSize + fontBold: completeProfileBody.fontBold + onClicked: { + loginErrorMessage.visible = false; + loginDialog.createAccountFromStream() + } + } + + HifiControlsUit.Button { + id: cancelButton + anchors.verticalCenter: parent.verticalCenter + text: qsTr("Cancel") + fontFamily: completeProfileBody.fontFamily + fontSize: completeProfileBody.fontSize + fontBold: completeProfileBody.fontBold + onClicked: { + bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader }); + } + } + } + + HifiStylesUit.ShortcutText { + id: additionalTextContainer + anchors { + top: buttons.bottom + horizontalCenter: parent.horizontalCenter + margins: 0 + topMargin: hifi.dimensions.contentSpacing.y + } + + text: "Already have a High Fidelity profile? Link to an existing profile here." + + font.family: completeProfileBody.fontFamily + font.pixelSize: 14 + font.bold: completeProfileBody.fontBold + wrapMode: Text.WordWrap + lineHeight: 2 + lineHeightMode: Text.ProportionalHeight + horizontalAlignment: Text.AlignHCenter + + onLinkActivated: { + loginDialog.atSignIn = true; + loginDialog.isLogIn = true; + bodyLoader.setSource("SignInBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader }); + } + } + + TextMetrics { + id: termsContainerTextMetrics + font: termsContainer.font + text: completeProfileBody.termsContainerText + Component.onCompleted: { + // with the link. + termsContainer.text = qsTr("By creating this user profile, you agree to High Fidelity's Terms of Service") + } + } + + HifiStylesUit.InfoItem { + id: termsContainer + anchors { + top: additionalTextContainer.bottom + margins: 0 + topMargin: 2 * hifi.dimensions.contentSpacing.y + horizontalCenter: parent.horizontalCenter + left: parent.left + leftMargin: (parent.width - termsContainerTextMetrics.width) / 2 + } + + text: completeProfileBody.termsContainerText + font.family: completeProfileBody.fontFamily + font.pixelSize: 14 + font.bold: completeProfileBody.fontBold + wrapMode: Text.WordWrap + color: hifi.colors.baseGrayHighlight + lineHeight: 1 + lineHeightMode: Text.ProportionalHeight + + onLinkActivated: loginDialog.openUrl(link) + } } - - text: "Already have a High Fidelity profile? Link to an existing profile here." - - wrapMode: Text.WordWrap - lineHeight: 2 - lineHeightMode: Text.ProportionalHeight - horizontalAlignment: Text.AlignHCenter - - onLinkActivated: { - bodyLoader.source = "LinkAccountBody.qml" - bodyLoader.item.width = root.pane.width - bodyLoader.item.height = root.pane.height - } - } - - InfoItem { - id: termsContainer - anchors { - top: additionalTextContainer.bottom - margins: 0 - topMargin: 2 * hifi.dimensions.contentSpacing.y - horizontalCenter: parent.horizontalCenter - } - width: parent.width - - text: qsTr("By creating this user profile, you agree to High Fidelity's Terms of Service") - wrapMode: Text.WordWrap - color: hifi.colors.baseGrayHighlight - lineHeight: 1 - lineHeightMode: Text.ProportionalHeight - fontSizeMode: Text.HorizontalFit - horizontalAlignment: Text.AlignVCenter - - onLinkActivated: loginDialog.openUrl(link) } Component.onCompleted: { - root.title = qsTr("Complete Your Profile") - root.iconText = "<" d.resize(); } @@ -126,22 +261,31 @@ Item { } onHandleCreateFailed: { console.log("Create Failed: " + error) - - bodyLoader.source = "UsernameCollisionBody.qml" - if (!root.isTablet) { - bodyLoader.item.width = root.pane.width - bodyLoader.item.height = root.pane.height + var poppedUp = Settings.getValue("loginDialogPoppedUp", false); + if (poppedUp) { + console.log("[ENCOURAGELOGINDIALOG]: failed creating an account") + var data = { + "action": "user failed creating an account" + }; + UserActivityLogger.logAction("encourageLoginDialog", data); } + bodyLoader.setSource("UsernameCollisionBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader }); } onHandleLoginCompleted: { console.log("Login Succeeded") - - bodyLoader.setSource("WelcomeBody.qml", { "welcomeBack" : false }) - bodyLoader.item.width = root.pane.width - bodyLoader.item.height = root.pane.height + loginSuccess(true) } onHandleLoginFailed: { console.log("Login Failed") + var poppedUp = Settings.getValue("loginDialogPoppedUp", false); + if (poppedUp) { + console.log("[ENCOURAGELOGINDIALOG]: failed logging in") + var data = { + "action": "user failed logging in" + }; + UserActivityLogger.logAction("encourageLoginDialog", data); + } + loginSuccess(false) } } } diff --git a/interface/resources/qml/LoginDialog/LinkAccountBody.qml b/interface/resources/qml/LoginDialog/LinkAccountBody.qml index 3c7fe41938..0f9db33861 100644 --- a/interface/resources/qml/LoginDialog/LinkAccountBody.qml +++ b/interface/resources/qml/LoginDialog/LinkAccountBody.qml @@ -32,10 +32,6 @@ Item { property bool keyboardRaised: false property bool punctuationMode: false - property bool isLogIn: false - property bool atSignIn: false - property bool withSteam: false - onKeyboardRaisedChanged: d.resize(); QtObject { @@ -105,7 +101,7 @@ Item { // For the process of logging in. linkAccountBody.resetContainers(); loggingInContainer.visible = true; - if (linkAccountBody.withSteam) { + if (loginDialog.isSteamRunning()) { loggingInGlyph.visible = true; loggingInText.text = "Logging in to Steam"; loggingInText.x = loggingInHeader.width/2 - loggingInTextMetrics.width/2 + loggingInGlyphTextMetrics.width/2; @@ -125,7 +121,7 @@ Item { failureTimer.start(); return; } - if (linkAccountBody.withSteam) { + if (loginDialog.isSteamRunning()) { // reset the flag. linkAccountBody.withSteam = false; loggingInGlyph.visible = false; @@ -141,38 +137,10 @@ Item { function toggleSignIn(signIn, isLogIn) { // going to/from sign in/up dialog. - linkAccountBody.atSignIn = signIn; - linkAccountBody.isLogIn = isLogIn; - if (signIn) { - usernameField.visible = !isLogIn; - cantAccessContainer.visible = isLogIn; - if (isLogIn) { - loginButtonAtSignIn.text = "Log In"; - loginButtonAtSignIn.color = hifi.buttons.black; - emailField.placeholderText = "Username or Email"; - var savedUsername = Settings.getValue("wallet/savedUsername", ""); - emailField.text = savedUsername === "Unknown user" ? "" : savedUsername; - emailField.anchors.top = loginContainer.top; - emailField.anchors.topMargin = !root.isTablet ? 0.2 * root.pane.height : 0.24 * root.pane.height; - cantAccessContainer.anchors.topMargin = !root.isTablet ? 3.5 * hifi.dimensions.contentSpacing.y : hifi.dimensions.contentSpacing.y; - } else { - loginButtonAtSignIn.text = "Sign Up"; - loginButtonAtSignIn.color = hifi.buttons.blue; - emailField.placeholderText = "Email"; - emailField.text = ""; - emailField.anchors.top = usernameField.bottom; - emailField.anchors.topMargin = 1.5 * hifi.dimensions.contentSpacing.y; - passwordField.text = ""; - } - loginErrorMessage.visible = false; - } + loginDialog.atSignIn = signIn; + loginDialog.isLogIn = isLogIn; - splashContainer.visible = !signIn; - topContainer.height = signIn ? root.pane.height : 0.6 * topContainer.height; - bottomContainer.visible = !signIn; - dismissTextContainer.visible = !signIn; - topOpaqueRect.visible = signIn; - loginContainer.visible = signIn; + bodyLoader.setSource("SignInBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader }); } @@ -190,7 +158,6 @@ Item { color: "black" visible: false } - Item { id: bannerContainer width: parent.width @@ -206,316 +173,6 @@ Item { horizontalAlignment: Image.AlignHCenter } } - - Item { - id: loggingInContainer - width: parent.width - height: parent.height - onHeightChanged: d.resize(); onWidthChanged: d.resize(); - visible: false - - Item { - id: loggingInHeader - width: parent.width - height: 0.5 * parent.height - anchors { - top: parent.top - } - TextMetrics { - id: loggingInGlyphTextMetrics; - font: loggingInGlyph.font; - text: loggingInGlyph.text; - } - HifiStylesUit.HiFiGlyphs { - id: loggingInGlyph; - text: hifi.glyphs.steamSquare; - // Color - color: "white"; - // Size - size: 31; - // Anchors - anchors.right: loggingInText.left; - anchors.rightMargin: linkAccountBody.loggingInGlyphRightMargin - anchors.bottom: parent.bottom; - anchors.bottomMargin: hifi.dimensions.contentSpacing.y - // Alignment - horizontalAlignment: Text.AlignHCenter; - verticalAlignment: Text.AlignVCenter; - visible: loginDialog.isSteamRunning(); - } - - TextMetrics { - id: loggingInTextMetrics; - font: loggingInText.font; - text: loggingInText.text; - } - Text { - id: loggingInText; - width: loggingInTextMetrics.width - anchors.bottom: parent.bottom; - anchors.bottomMargin: hifi.dimensions.contentSpacing.y - anchors.left: parent.left; - anchors.leftMargin: (parent.width - loggingInTextMetrics.width) / 2 - color: "white"; - font.family: linkAccountBody.fontFamily - font.pixelSize: linkAccountBody.fontSize - font.bold: linkAccountBody.fontBold - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - text: "Logging in" - } - } - Item { - id: loggingInFooter - width: parent.width - height: 0.5 * parent.height - anchors { - top: loggingInHeader.bottom - } - AnimatedImage { - id: linkAccountSpinner - source: "../../icons/loader-snake-64-w.gif" - width: 128 - height: width - anchors.left: parent.left; - anchors.leftMargin: (parent.width - width) / 2; - anchors.top: parent.top - anchors.topMargin: hifi.dimensions.contentSpacing.y - } - TextMetrics { - id: loggedInGlyphTextMetrics; - font: loggedInGlyph.font; - text: loggedInGlyph.text; - } - HifiStylesUit.HiFiGlyphs { - id: loggedInGlyph; - text: hifi.glyphs.steamSquare; - // Size - size: 78; - // Anchors - anchors.left: parent.left; - anchors.leftMargin: (parent.width - loggedInGlyph.size) / 2; - anchors.top: parent.top - anchors.topMargin: hifi.dimensions.contentSpacing.y - // Alignment - horizontalAlignment: Text.AlignHCenter; - verticalAlignment: Text.AlignVCenter; - visible: loginDialog.isSteamRunning(); - - } - } - } - Item { - id: loginContainer - width: parent.width - height: parent.height - (bannerContainer.height + 1.5 * hifi.dimensions.contentSpacing.y) - anchors { - top: bannerContainer.bottom - topMargin: 1.5 * hifi.dimensions.contentSpacing.y - } - visible: false - - Text { - id: loginErrorMessage; - anchors.bottom: emailField.top; - anchors.bottomMargin: 2 - anchors.left: emailField.left; - color: "red"; - font.family: linkAccountBody.fontFamily - font.pixelSize: 12 - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - text: "" - visible: false - } - - HifiControlsUit.TextField { - id: usernameField - width: banner.width - font.family: linkAccountBody.fontFamily - placeholderText: "Username" - anchors { - top: parent.top - topMargin: 0.2 * parent.height - left: parent.left - leftMargin: (parent.width - usernameField.width) / 2 - } - visible: false - } - - HifiControlsUit.TextField { - id: emailField - width: banner.width - font.family: linkAccountBody.fontFamily - text: Settings.getValue("wallet/savedUsername", ""); - anchors { - top: parent.top - left: parent.left - leftMargin: (parent.width - emailField.width) / 2 - } - focus: true - placeholderText: "Username or Email" - activeFocusOnPress: true - onHeightChanged: d.resize(); onWidthChanged: d.resize(); - } - HifiControlsUit.TextField { - id: passwordField - width: banner.width - font.family: linkAccountBody.fontFamily - placeholderText: "Password" - activeFocusOnPress: true - echoMode: passwordFieldMouseArea.showPassword ? TextInput.Normal : TextInput.Password - anchors { - top: emailField.bottom - topMargin: 1.5 * hifi.dimensions.contentSpacing.y - left: parent.left - leftMargin: (parent.width - emailField.width) / 2 - } - - onFocusChanged: { - root.isPassword = true; - } - - Rectangle { - id: showPasswordHitbox - z: 10 - x: passwordField.width - ((passwordField.height) * 31 / 23) - width: parent.width - (parent.width - (parent.height * 31/16)) - height: parent.height - anchors { - right: parent.right - } - color: "transparent" - - Image { - id: showPasswordImage - width: passwordField.height * 16 / 23 - height: passwordField.height * 16 / 23 - anchors { - right: parent.right - rightMargin: 8 - top: parent.top - topMargin: passwordFieldMouseArea.showPassword ? 6 : 8 - bottom: parent.bottom - bottomMargin: passwordFieldMouseArea.showPassword ? 5 : 8 - } - source: passwordFieldMouseArea.showPassword ? "../../images/eyeClosed.svg" : "../../images/eyeOpen.svg" - MouseArea { - id: passwordFieldMouseArea - anchors.fill: parent - acceptedButtons: Qt.LeftButton - property bool showPassword: false - onClicked: { - showPassword = !showPassword; - } - } - } - } - Keys.onReturnPressed: { - linkAccountBody.login() - } - } - HifiControlsUit.CheckBox { - id: autoLogoutCheckbox - checked: !Settings.getValue("wallet/autoLogout", false); - text: qsTr("Keep Me Logged In") - boxSize: 18; - labelFontFamily: linkAccountBody.fontFamily - labelFontSize: 18; - color: hifi.colors.white; - anchors { - top: passwordField.bottom; - topMargin: hifi.dimensions.contentSpacing.y; - right: passwordField.right; - } - onCheckedChanged: { - Settings.setValue("wallet/autoLogout", !checked); - if (checked) { - Settings.setValue("wallet/savedUsername", Account.username); - } else { - Settings.setValue("wallet/savedUsername", ""); - } - } - Component.onDestruction: { - Settings.setValue("wallet/autoLogout", !checked); - } - } - Item { - id: cancelContainer - width: cancelText.width - height: d.minHeightButton - anchors { - top: autoLogoutCheckbox.bottom - topMargin: hifi.dimensions.contentSpacing.y - left: parent.left - leftMargin: (parent.width - passwordField.width) / 2 - } - Text { - id: cancelText - anchors.centerIn: parent - text: qsTr("Cancel"); - - lineHeight: 1 - color: "white" - font.family: linkAccountBody.fontFamily - font.pixelSize: linkAccountBody.fontSize - font.capitalization: Font.AllUppercase; - font.bold: linkAccountBody.fontBold - lineHeightMode: Text.ProportionalHeight - } - MouseArea { - id: cancelArea - anchors.fill: parent - acceptedButtons: Qt.LeftButton - onClicked: { - toggleSignIn(false, true); - linkAccountBody.isLogIn = false; - } - } - } - HifiControlsUit.Button { - id: loginButtonAtSignIn - width: d.minWidthButton - height: d.minHeightButton - text: qsTr("Log In") - fontFamily: linkAccountBody.fontFamily - fontSize: linkAccountBody.fontSize - fontBold: linkAccountBody.fontBold - anchors { - top: cancelContainer.top - right: passwordField.right - } - - onClicked: { - linkAccountBody.login() - } - } - Item { - id: cantAccessContainer - width: parent.width - y: usernameField.height - anchors { - top: cancelContainer.bottom - topMargin: 3.5 * hifi.dimensions.contentSpacing.y - } - visible: false - HifiStylesUit.ShortcutText { - id: cantAccessText - z: 10 - anchors.centerIn: parent - font.family: linkAccountBody.fontFamily - font.pixelSize: 14 - - text: " Can't access your account?" - - verticalAlignment: Text.AlignVCenter - horizontalAlignment: Text.AlignHCenter - linkColor: hifi.colors.blueAccent - onLinkActivated: loginDialog.openUrl(link) - } - } - - } Item { id: splashContainer width: parent.width @@ -653,6 +310,15 @@ Item { anchors.fill: parent acceptedButtons: Qt.LeftButton onClicked: { + var poppedUp = Settings.getValue("loginDialogPoppedUp", false); + if (poppedUp) { + + console.log("[ENCOURAGELOGINDIALOG]: user dismissed login screen") + var data = { + "action": "user dismissed login screen" + }; + Settings.setValue("loginDialogPoppedUp", false); + } root.tryDestroy(); } } @@ -727,16 +393,8 @@ Item { } Keys.onPressed: { - if (!visible && !atSignIn) { + if (!visible) { return; } - - switch (event.key) { - case Qt.Key_Enter: - case Qt.Key_Return: - event.accepted = true - linkAccountBody.login() - break - } } } diff --git a/interface/resources/qml/LoginDialog/SignInBody.qml b/interface/resources/qml/LoginDialog/SignInBody.qml index 94a56cbb18..a693887536 100644 --- a/interface/resources/qml/LoginDialog/SignInBody.qml +++ b/interface/resources/qml/LoginDialog/SignInBody.qml @@ -23,6 +23,7 @@ Item { clip: true height: root.pane.height width: root.pane.width + property int textFieldHeight: 31 property bool failAfterSignUp: false property string fontFamily: "Cairo" property int fontSize: 24 @@ -32,8 +33,6 @@ Item { property bool keyboardRaised: false property bool punctuationMode: false - property bool logIn: isLogIn - property bool signIn: atSignIn property bool withSteam: loginDialog.isSteamRunning() onKeyboardRaisedChanged: d.resize(); @@ -50,8 +49,8 @@ Item { function resize() { maxWidth = root.isTablet ? 1280 : Window.innerWidth; maxHeight = root.isTablet ? 720 : Window.innerHeight; - var targetWidth = Math.max(titleWidth, topContainer.width); - var targetHeight = hifi.dimensions.contentSpacing.y + topContainer.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)); @@ -89,7 +88,7 @@ Item { function login() { signInBody.toggleLoading(); - if (signInBody.isLogIn) { + if (loginDialog.isLogIn) { loginDialog.login(emailField.text, passwordField.text); } else { loginDialog.signup(usernameField.text, emailField.text, passwordField.text); @@ -105,7 +104,7 @@ Item { // For the process of logging in. signInBody.resetContainers(); loggingInContainer.visible = true; - if (signInBody.withSteam) { + if (loginDialog.isSteamRunning()) { loggingInGlyph.visible = true; loggingInText.text = "Logging in to Steam"; loggingInText.x = loggingInHeader.width/2 - loggingInTextMetrics.width/2 + loggingInGlyphTextMetrics.width/2; @@ -120,12 +119,12 @@ Item { linkAccountSpinner.visible = false; if (!success) { loginErrorMessage.visible = true; - loginErrorMessage.text = errorString !== "" ? errorString : signInBody.isLogIn ? "bad user/pass combo." : "unknown error."; - loginErrorMessage.anchors.bottom = signInBody.isLogIn ? emailField.top : usernameField.top; + loginErrorMessage.text = errorString !== "" ? errorString : "unknown error."; + loginErrorMessage.anchors.bottom = loginDialog.isLogIn ? emailField.top : usernameField.top; failureTimer.start(); return; } - if (signInBody.withSteam) { + if (loginDialog.isSteamRunning() && !loginDialog.isLogIn) { // reset the flag. signInBody.withSteam = false; loggingInGlyph.visible = false; @@ -141,8 +140,8 @@ Item { function toggleSignIn(signIn, isLogIn) { // going to/from sign in/up dialog. - // signInBody.atSignIn = signIn; - // signInBody.isLogIn = isLogIn; + loginDialog.atSignIn = signIn; + loginDialog.isLogIn = isLogIn; if (signIn) { usernameField.visible = !isLogIn; cantAccessContainer.visible = isLogIn; @@ -155,6 +154,9 @@ Item { emailField.anchors.top = loginContainer.top; emailField.anchors.topMargin = !root.isTablet ? 0.2 * root.pane.height : 0.24 * root.pane.height; cantAccessContainer.anchors.topMargin = !root.isTablet ? 3.5 * hifi.dimensions.contentSpacing.y : hifi.dimensions.contentSpacing.y; + } else if (loginDialog.isSteamRunning()) { + signInBody.toggleLoading(); + loginDialog.loginWithSteam(); } else { loginButtonAtSignIn.text = "Sign Up"; loginButtonAtSignIn.color = hifi.buttons.blue; @@ -172,13 +174,13 @@ Item { } Item { - id: topContainer + id: mainContainer width: root.pane.width height: root.pane.height onHeightChanged: d.resize(); onWidthChanged: d.resize(); Rectangle { - id: topOpaqueRect + id: opaqueRect height: parent.height width: parent.width opacity: 0.9 @@ -284,6 +286,8 @@ Item { HifiStylesUit.HiFiGlyphs { id: loggedInGlyph; text: hifi.glyphs.steamSquare; + // color + color: "white" // Size size: 78; // Anchors @@ -326,6 +330,7 @@ Item { HifiControlsUit.TextField { id: usernameField width: banner.width + height: signInBody.textFieldHeight font.family: signInBody.fontFamily placeholderText: "Username" anchors { @@ -340,6 +345,7 @@ Item { HifiControlsUit.TextField { id: emailField width: banner.width + height: signInBody.textFieldHeight font.family: signInBody.fontFamily text: Settings.getValue("wallet/savedUsername", ""); anchors { @@ -355,6 +361,7 @@ Item { HifiControlsUit.TextField { id: passwordField width: banner.width + height: signInBody.textFieldHeight font.family: signInBody.fontFamily placeholderText: "Password" activeFocusOnPress: true @@ -371,10 +378,10 @@ Item { } Item { - id: showPasswordHitbox + id: showPasswordContainer z: 10 - x: passwordField.width - ((passwordField.height) * 31 / 23) - width: parent.width - (parent.width - (parent.height * 31/16)) + // width + image's rightMargin + width: showPasswordImage.width + 8 height: parent.height anchors { right: parent.right @@ -461,7 +468,8 @@ Item { anchors.fill: parent acceptedButtons: Qt.LeftButton onClicked: { - bodyLoader.setSource("LinkAccountBody0.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader }); + loginDialog.atSignIn = false; + bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader }); } } } @@ -519,25 +527,27 @@ Item { root.keyboardRaised = Qt.binding( function() { return keyboardRaised; }) } d.resize(); - print(signIn, logIn) - toggleSignIn(signIn, logIn) + print(loginDialog.atSignIn, loginDialog.isLogIn) + toggleSignIn(loginDialog.atSignIn, loginDialog.isLogIn) } Connections { target: loginDialog onHandleCreateFailed: { console.log("Create Failed") + var error = "There was an unknown error while creating your account. Please try again later."; + loadingSuccess(false, error); } onHandleCreateCompleted: { console.log("Create Completed") } onHandleSignupFailed: { console.log("Sign Up Failed") - loadingSuccess(false, errorString) + loadingSuccess(false, ""); } onHandleSignupCompleted: { - console.log("Sign Up Completed") - loadingSuccess(true) + console.log("Sign Up Completed"); + loadingSuccess(true, ""); } onHandleLoginCompleted: { console.log("Login Succeeded") @@ -553,7 +563,7 @@ Item { if (loginDialog.isSteamRunning()) { loginDialog.linkSteam(); } - loadingSuccess(true) + loadingSuccess(true, "") } onHandleLoginFailed: { console.log("Login Failed") @@ -566,11 +576,16 @@ Item { UserActivityLogger.logAction("encourageLoginDialog", data); Settings.setValue("loginDialogPoppedUp", false); } - loadingSuccess(false) + if (loginDialog.isSteamRunning()) { + bodyLoader.setSource("CompleteProfileBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader }); + } + + var error = "Username or password incorrect." + loadingSuccess(false, error) } onHandleLinkCompleted: { console.log("Link Succeeded") - loadingSuccess(true) + loadingSuccess(true, "") } onHandleLinkFailed: { console.log("Link Failed") @@ -580,7 +595,7 @@ Item { } Keys.onPressed: { - if (!visible && !atSignIn) { + if (!visible && !loginDialog.atSignIn) { return; }