From b33267a63ae57edea80c380d024c1bdcd07a3e09 Mon Sep 17 00:00:00 2001 From: Wayne Chen Date: Mon, 22 Oct 2018 17:38:12 -0700 Subject: [PATCH] more wip --- interface/resources/qml/LoginDialog.qml | 5 +- .../qml/LoginDialog/LinkAccountBody.qml | 419 ++++++++++++++---- 2 files changed, 336 insertions(+), 88 deletions(-) diff --git a/interface/resources/qml/LoginDialog.qml b/interface/resources/qml/LoginDialog.qml index ebf4e9e3a6..d97b0d876d 100644 --- a/interface/resources/qml/LoginDialog.qml +++ b/interface/resources/qml/LoginDialog.qml @@ -47,7 +47,6 @@ Windows.ModalWindow { Loader { id: bodyLoader - source: loginDialog.isSteamRunning() ? "LoginDialog/SignInBody.qml" : "LoginDialog/LinkAccountBody.qml" } } @@ -86,4 +85,8 @@ Windows.ModalWindow { } } + Component.onCompleted: { + bodyLoader.setSource("LoginDialog/LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root }); + } + } diff --git a/interface/resources/qml/LoginDialog/LinkAccountBody.qml b/interface/resources/qml/LoginDialog/LinkAccountBody.qml index 758e8555cd..2df0bef665 100644 --- a/interface/resources/qml/LoginDialog/LinkAccountBody.qml +++ b/interface/resources/qml/LoginDialog/LinkAccountBody.qml @@ -27,14 +27,17 @@ Item { property bool keyboardRaised: false property bool punctuationMode: false + property bool withSteam: false onKeyboardRaisedChanged: d.resize(); QtObject { id: d readonly property int minWidth: 480 + readonly property int minWidthButton: !root.isTablet ? 256 : 174 property int maxWidth: root.isTablet ? 1280 : Window.innerWidth readonly property int minHeight: 120 + readonly property int minHeightButton: !root.isTablet ? 56 : 42 property int maxHeight: root.isTablet ? 720 : Window.innerHeight function resize() { @@ -54,6 +57,42 @@ Item { } } + function toggleLoggingIn(loggingIn) { + // For the process of logging in. + if (withSteam) { + + } + else { + + } + } + + function toggleSignIn(signIn, isLogIn) { + // going to/from sign in/up dialog. + if (signIn) { + usernameField.visible = !isLogIn; + cantAccessContainer.visible = isLogIn; + if (isLogIn) { + emailField.placeholderText = "Username or Email"; + 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 { + emailField.placeholderText = "Email"; + emailField.anchors.top = usernameField.bottom; + emailField.anchors.topMargin = 1.5 * hifi.dimensions.contentSpacing.y; + } + } + + 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; + + } + function toggleLoading(isLoading) { linkAccountSpinner.visible = isLoading form.visible = !isLoading @@ -69,13 +108,22 @@ Item { height: 0.6 * root.pane.height onHeightChanged: d.resize(); onWidthChanged: d.resize(); + Rectangle { + id: topOpaqueRect + height: parent.height + width: parent.width + opacity: 0.7 + color: "black" + visible: false + } + Item { id: bannerContainer width: parent.width height: banner.height anchors { top: parent.top - topMargin: 0.17 * parent.height + topMargin: 85 } Image { id: banner @@ -84,44 +132,251 @@ Item { horizontalAlignment: Image.AlignHCenter } } - Text { - id: flavorText - text: qsTr("BE ANYWHERE, WITH ANYONE RIGHT NOW") - width: 0.48 * parent.width - anchors.centerIn: parent + Item { + id: loginContainer + width: parent.width + height: parent.height - (bannerContainer.height + 1.5 * hifi.dimensions.contentSpacing.y) anchors { top: bannerContainer.bottom - topMargin: 0.1 * parent.height + topMargin: 1.5 * hifi.dimensions.contentSpacing.y } - wrapMode: Text.WordWrap - lineHeight: 1 - color: "white" - font.family: "Raleway" - font.pixelSize: 55 - font.bold: true - lineHeightMode: Text.ProportionalHeight - horizontalAlignment: Text.AlignHCenter + visible: false + + HifiControlsUit.TextField { + id: usernameField + width: 0.254 * parent.width + 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: 0.254 * parent.width + 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(); + + Component.onCompleted: { + var savedUsername = Settings.getValue("wallet/savedUsername", ""); + emailField.text = savedUsername === "Unknown user" ? "" : savedUsername; + } + } + HifiControlsUit.TextField { + id: passwordField + width: 0.254 * parent.width + 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.text = ""; + // 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: { + signInBody.login() + } + + } + HifiControlsUit.CheckBox { + id: autoLogoutCheckbox + checked: !Settings.getValue("wallet/autoLogout", true) + text: "Keep Me Logged In" + boxSize: 18; + 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: "Raleway" + font.pixelSize: 24 + font.bold: true + lineHeightMode: Text.ProportionalHeight + // horizontalAlignment: Text.AlignHCenter + } + MouseArea { + id: cancelArea + anchors.fill: parent + acceptedButtons: Qt.LeftButton + onClicked: { + toggleSignIn(false, true); + } + } + } + HifiControlsUit.Button { + id: loginButtonAtSignIn + width: d.minWidthButton + height: d.minHeightButton + text: qsTr("Log In") + fontSize: signUpButton.fontSize + color: hifi.buttons.none + // background: Rectangle { + // radius: hifi.buttons.radius + // + // } + anchors { + top: cancelContainer.top + right: passwordField.right + } + + onClicked: { + linkAccountBody.login() + } + } + Item { + id: cantAccessContainer + width: parent.width + height: cantAccessText.height + anchors { + top: cancelContainer.bottom + topMargin: 3.5 * hifi.dimensions.contentSpacing.y + } + visible: false + HifiStylesUit.ShortcutText { + id: cantAccessText + z: 10 + + 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 + anchors.fill: parent - HifiControlsUit.Button { - id: signUpButton - text: qsTr("Sign Up") - width: 0.17 * parent.width - height: 0.068 * parent.height - color: hifi.buttons.blue - fontSize: 30 - anchors { - top: flavorText.bottom - topMargin: 0.1 * parent.height - left: parent.left - leftMargin: (parent.width - signUpButton.width) / 2 + visible: true + + Text { + id: flavorText + text: qsTr("BE ANYWHERE, WITH ANYONE RIGHT NOW") + width: 0.48 * parent.width + anchors.centerIn: parent + anchors { + top: bannerContainer.bottom + topMargin: 0.1 * parent.height + } + wrapMode: Text.WordWrap + lineHeight: 1 + color: "white" + font.family: "Raleway" + font.pixelSize: 48 + font.bold: true + lineHeightMode: Text.ProportionalHeight + horizontalAlignment: Text.AlignHCenter } - onClicked: { - bodyLoader.setSource("SignUpBody.qml") - if (!linkAccountBody.isTablet) { - bodyLoader.item.width = root.pane.width - bodyLoader.item.height = root.pane.height + HifiControlsUit.Button { + id: signUpButton + text: qsTr("Sign Up") + width: d.minWidthButton + height: d.minHeightButton + color: hifi.buttons.blue + fontSize: 30 + anchors { + bottom: parent.bottom + bottomMargin: 0.1 * parent.height + left: parent.left + leftMargin: (parent.width - signUpButton.width) / 2 + } + + onClicked: { + toggleSignIn(true, false); } } } @@ -134,58 +389,57 @@ Item { anchors.top: topContainer.bottom Rectangle { - height: root.pane.height - width: root.pane.width + id: bottomOpaqueRect + height: parent.height + width: parent.width opacity: 0.7 color: "black" } + Item { + id: bottomButtonsContainer - HifiControlsUit.Button { - id: loginButton - width: signUpButton.width - height: signUpButton.height - text: qsTr("Log In") - fontSize: signUpButton.fontSize - // background: Rectangle { - // radius: hifi.buttons.radius - // - // } - anchors { - top: parent.top - topMargin: 0.245 * parent.height - left: parent.left - leftMargin: (parent.width - loginButton.width) / 2 - } + width: parent.width + height: parent.height - onClicked: { - bodyLoader.setSource("SignInBody.qml") - if (!linkAccountBody.isTablet) { - loginDialog.bodyLoader.item.width = root.pane.width - loginDialog.bodyLoader.item.height = root.pane.height + HifiControlsUit.Button { + id: loginButton + width: signUpButton.width + height: signUpButton.height + text: qsTr("Log In") + fontSize: signUpButton.fontSize + // background: Rectangle { + // radius: hifi.buttons.radius + // + // } + anchors { + top: parent.top + topMargin: 0.245 * parent.height + left: parent.left + leftMargin: (parent.width - loginButton.width) / 2 + } + + onClicked: { + toggleSignIn(true, true); } } - } - HifiControlsUit.Button { - id: steamLoginButton - width: signUpButton.width - height: signUpButton.height - text: qsTr("Link Account") - fontSize: signUpButton.fontSize - color: hifi.buttons.black - anchors { - top: loginButton.bottom - topMargin: 0.04 * parent.height - left: parent.left - leftMargin: (parent.width - steamLoginButton.width) / 2 - } - - onClicked: { - if (loginDialog.isSteamRunning()) { - loginDialog.linkSteam(); + HifiControlsUit.Button { + id: steamLoginButton + width: signUpButton.width + height: signUpButton.height + text: qsTr("Steam Log In") + fontSize: signUpButton.fontSize + color: hifi.buttons.black + anchors { + top: loginButton.bottom + topMargin: 0.04 * parent.height + left: parent.left + leftMargin: (parent.width - steamLoginButton.width) / 2 } - if (!linkAccountBody.isTablet) { - bodyLoader.item.width = root.pane.width - bodyLoader.item.height = root.pane.height + + onClicked: { + if (loginDialog.isSteamRunning()) { + loginDialog.linkSteam(); + } } } } @@ -205,7 +459,7 @@ Item { lineHeight: 1 color: "white" font.family: "Raleway" - font.pixelSize: 20 + font.pixelSize: 24 font.bold: true lineHeightMode: Text.ProportionalHeight // horizontalAlignment: Text.AlignHCenter @@ -222,9 +476,6 @@ Item { } Component.onCompleted: { - root.title = qsTr("Sign Into High Fidelity") - root.iconText = "<" - //dont rise local keyboard keyboardEnabled = !root.isTablet && HMD.active; //but rise Tablet's one instead for Tablet interface @@ -234,12 +485,6 @@ Item { } d.resize(); - // if (failAfterSignUp) { - // mainTextContainer.text = "Account created successfully." - // flavorText.visible = true - // mainTextContainer.visible = true - // } - } Connections { @@ -293,7 +538,7 @@ Item { Keys.onPressed: { if (!visible) { - return + return; } switch (event.key) {