mirror of
https://github.com/HifiExperiments/overte.git
synced 2025-06-18 17:40:48 +02:00
519 lines
20 KiB
QML
519 lines
20 KiB
QML
//
|
|
// LinkAccountBody.qml
|
|
//
|
|
// Created by Clement on 7/18/16
|
|
// Copyright 2015 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.7
|
|
import QtQuick.Controls 1.4
|
|
import QtQuick.Controls.Styles 1.4 as OriginalStyles
|
|
|
|
import controlsUit 1.0 as HifiControlsUit
|
|
import stylesUit 1.0 as HifiStylesUit
|
|
import TabletScriptingInterface 1.0
|
|
|
|
Item {
|
|
z: -2
|
|
id: linkAccountBody
|
|
clip: true
|
|
height: root.height
|
|
width: root.width
|
|
property int textFieldHeight: 31
|
|
property string fontFamily: "Raleway"
|
|
property int fontSize: 15
|
|
// property int textFieldFontSize: !root.isTablet ? !root.isOverlay : hifi.fontSizes.textFieldInput ? hifi.fontSizes.textFieldInput : 18
|
|
property int textFieldFontSize: 18
|
|
property bool fontBold: true
|
|
|
|
property bool keyboardEnabled: false
|
|
property bool keyboardRaised: false
|
|
property bool punctuationMode: false
|
|
|
|
property bool withSteam: false
|
|
property bool linkSteam: linkSteam
|
|
property bool withOculus: false
|
|
property string errorString: errorString
|
|
|
|
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: 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;
|
|
}
|
|
}
|
|
|
|
function login() {
|
|
loginDialog.login(emailField.text, passwordField.text);
|
|
bodyLoader.setSource("LoggingInBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "withSteam": false, "withOculus": false, "linkSteam": linkAccountBody.linkSteam });
|
|
}
|
|
|
|
function init() {
|
|
// going to/from sign in/up dialog.
|
|
loginDialog.isLogIn = true;
|
|
loginErrorMessage.text = linkAccountBody.errorString;
|
|
loginErrorMessage.visible = (linkAccountBody.errorString !== "");
|
|
loginButton.text = !linkAccountBody.linkSteam ? "Log In" : "Link Account";
|
|
loginButton.color = hifi.buttons.blue;
|
|
emailField.placeholderText = "Username or Email";
|
|
var savedUsername = Settings.getValue("keepMeLoggedIn/savedUsername", "");
|
|
emailField.text = keepMeLoggedInCheckbox.checked ? savedUsername === "Unknown user" ? "" : savedUsername : "";
|
|
if (linkAccountBody.linkSteam) {
|
|
steamInfoText.anchors.top = passwordField.bottom;
|
|
keepMeLoggedInCheckbox.anchors.top = steamInfoText.bottom;
|
|
loginButton.width = (passwordField.width - hifi.dimensions.contentSpacing.x) / 2;
|
|
loginButton.anchors.right = emailField.right;
|
|
} else {
|
|
loginButton.anchors.left = emailField.left;
|
|
}
|
|
loginContainer.visible = true;
|
|
}
|
|
|
|
Item {
|
|
z: 10
|
|
id: mainContainer
|
|
width: root.width
|
|
height: root.height
|
|
onHeightChanged: d.resize(); onWidthChanged: d.resize();
|
|
|
|
Rectangle {
|
|
id: opaqueRect
|
|
height: parent.height
|
|
width: parent.width
|
|
opacity: 0.9
|
|
color: "black"
|
|
}
|
|
|
|
Item {
|
|
id: bannerContainer
|
|
width: parent.width
|
|
height: banner.height
|
|
anchors {
|
|
bottom: loginContainer.top
|
|
bottomMargin: 0.07 * parent.height
|
|
}
|
|
Image {
|
|
id: banner
|
|
anchors.centerIn: parent
|
|
source: "../../images/high-fidelity-banner.svg"
|
|
horizontalAlignment: Image.AlignHCenter
|
|
}
|
|
}
|
|
Item {
|
|
id: loginContainer
|
|
width: emailField.width
|
|
height: 0.45 * parent.height
|
|
anchors {
|
|
top: parent.top
|
|
topMargin: bannerContainer.height + 0.25 * parent.height
|
|
left: parent.left
|
|
leftMargin: (parent.width - emailField.width) / 2
|
|
}
|
|
Item {
|
|
id: errorContainer
|
|
width: loginErrorMessageTextMetrics.width
|
|
height: loginErrorMessageTextMetrics.height
|
|
anchors {
|
|
bottom: emailField.top;
|
|
bottomMargin: hifi.dimensions.contentSpacing.y;
|
|
left: emailField.left;
|
|
}
|
|
TextMetrics {
|
|
id: loginErrorMessageTextMetrics
|
|
font: loginErrorMessage.font
|
|
text: loginErrorMessage.text
|
|
}
|
|
Text {
|
|
id: loginErrorMessage;
|
|
color: "red";
|
|
font.family: linkAccountBody.fontFamily
|
|
font.pixelSize: linkAccountBody.textFieldFontSize
|
|
verticalAlignment: Text.AlignVCenter
|
|
horizontalAlignment: Text.AlignHCenter
|
|
text: ""
|
|
visible: false
|
|
}
|
|
}
|
|
|
|
HifiControlsUit.TextField {
|
|
id: emailField
|
|
width: banner.width
|
|
height: linkAccountBody.textFieldHeight
|
|
font.pixelSize: linkAccountBody.textFieldFontSize
|
|
styleRenderType: Text.QtRendering
|
|
anchors {
|
|
top: parent.top
|
|
topMargin: loginErrorMessage.height
|
|
}
|
|
placeholderText: "Username or Email"
|
|
focus: true
|
|
activeFocusOnPress: true
|
|
Keys.onPressed: {
|
|
switch (event.key) {
|
|
case Qt.Key_Tab:
|
|
event.accepted = true;
|
|
passwordField.focus = true;
|
|
break;
|
|
case Qt.Key_Backtab:
|
|
event.accepted = true;
|
|
passwordField.focus = true;
|
|
break;
|
|
case Qt.Key_Enter:
|
|
case Qt.Key_Return:
|
|
event.accepted = true;
|
|
if (keepMeLoggedInCheckbox.checked) {
|
|
Settings.setValue("keepMeLoggedIn/savedUsername", emailField.text);
|
|
}
|
|
linkAccountBody.login();
|
|
break;
|
|
}
|
|
}
|
|
onFocusChanged: {
|
|
root.text = "";
|
|
root.isPassword = !focus;
|
|
}
|
|
}
|
|
HifiControlsUit.TextField {
|
|
id: passwordField
|
|
width: banner.width
|
|
height: linkAccountBody.textFieldHeight
|
|
font.pixelSize: linkAccountBody.textFieldFontSize
|
|
styleRenderType: Text.QtRendering
|
|
placeholderText: "Password"
|
|
activeFocusOnPress: true
|
|
echoMode: passwordFieldMouseArea.showPassword ? TextInput.Normal : TextInput.Password
|
|
anchors {
|
|
top: emailField.bottom
|
|
topMargin: 1.5 * hifi.dimensions.contentSpacing.y
|
|
}
|
|
|
|
onFocusChanged: {
|
|
root.text = "";
|
|
root.isPassword = focus;
|
|
}
|
|
|
|
Item {
|
|
id: showPasswordContainer
|
|
z: 10
|
|
// width + image's rightMargin
|
|
width: showPasswordImage.width + 8
|
|
height: parent.height
|
|
anchors {
|
|
right: parent.right
|
|
}
|
|
|
|
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.onPressed: {
|
|
switch (event.key) {
|
|
case Qt.Key_Tab:
|
|
case Qt.Key_Backtab:
|
|
event.accepted = true;
|
|
emailField.focus = true;
|
|
break;
|
|
case Qt.Key_Enter:
|
|
case Qt.Key_Return:
|
|
event.accepted = true;
|
|
if (keepMeLoggedInCheckbox.checked) {
|
|
Settings.setValue("keepMeLoggedIn/savedUsername", emailField.text);
|
|
}
|
|
linkAccountBody.login();
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
HifiControlsUit.CheckBox {
|
|
id: keepMeLoggedInCheckbox
|
|
checked: Settings.getValue("keepMeLoggedIn", 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;
|
|
left: passwordField.left;
|
|
}
|
|
onCheckedChanged: {
|
|
Settings.setValue("keepMeLoggedIn", checked);
|
|
}
|
|
Component.onDestruction: {
|
|
Settings.setValue("keepMeLoggedIn", checked);
|
|
if (checked) {
|
|
Settings.setValue("keepMeLoggedIn/savedUsername", emailField.text);
|
|
}
|
|
}
|
|
}
|
|
HifiControlsUit.Button {
|
|
id: cancelButton
|
|
width: (passwordField.width - hifi.dimensions.contentSpacing.x) / 2;
|
|
height: d.minHeightButton
|
|
text: qsTr("Cancel")
|
|
fontFamily: linkAccountBody.fontFamily
|
|
fontSize: linkAccountBody.fontSize
|
|
fontBold: linkAccountBody.fontBold
|
|
color: hifi.buttons.noneBorderlessWhite;
|
|
visible: linkAccountBody.linkSteam
|
|
anchors {
|
|
top: keepMeLoggedInCheckbox.bottom
|
|
topMargin: hifi.dimensions.contentSpacing.y
|
|
}
|
|
onClicked: {
|
|
bodyLoader.setSource("CompleteProfileBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "withSteam": linkAccountBody.withSteam, "errorString": "" });
|
|
}
|
|
}
|
|
HifiControlsUit.Button {
|
|
id: loginButton
|
|
width: passwordField.width
|
|
height: d.minHeightButton
|
|
text: qsTr("Log In")
|
|
fontFamily: linkAccountBody.fontFamily
|
|
fontSize: linkAccountBody.fontSize
|
|
fontBold: linkAccountBody.fontBold
|
|
anchors {
|
|
top: keepMeLoggedInCheckbox.bottom
|
|
topMargin: hifi.dimensions.contentSpacing.y
|
|
}
|
|
onClicked: {
|
|
linkAccountBody.login()
|
|
}
|
|
}
|
|
Text {
|
|
id: steamInfoText
|
|
visible: linkAccountBody.linkSteam
|
|
anchors {
|
|
top: loginButton.bottom
|
|
topMargin: hifi.dimensions.contentSpacing.y
|
|
left: emailField.left
|
|
}
|
|
|
|
font.family: linkAccountBody.fontFamily
|
|
font.pixelSize: linkAccountBody.textFieldFontSize
|
|
color: "white"
|
|
text: qsTr("Your Steam account information will not be exposed to others.");
|
|
verticalAlignment: Text.AlignVCenter
|
|
horizontalAlignment: Text.AlignHCenter
|
|
}
|
|
HifiStylesUit.ShortcutText {
|
|
id: cantAccessText
|
|
z: 10
|
|
visible: !linkAccountBody.linkSteam
|
|
anchors {
|
|
top: loginButton.bottom
|
|
topMargin: hifi.dimensions.contentSpacing.y
|
|
left: emailField.left
|
|
}
|
|
font.family: linkAccountBody.fontFamily
|
|
font.pixelSize: linkAccountBody.textFieldFontSize
|
|
|
|
text: "<a href='https://highfidelity.com/users/password/new'> Can't access your account?</a>"
|
|
|
|
verticalAlignment: Text.AlignVCenter
|
|
horizontalAlignment: Text.AlignHCenter
|
|
linkColor: hifi.colors.blueAccent
|
|
onLinkActivated: {
|
|
Tablet.playSound(TabletEnums.ButtonClick);
|
|
loginDialog.openUrl(link);
|
|
bodyLoader.setSource("CantAccessBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
|
|
}
|
|
}
|
|
HifiControlsUit.Button {
|
|
id: continueButton;
|
|
width: emailField.width;
|
|
height: d.minHeightButton
|
|
color: hifi.buttons.none;
|
|
anchors {
|
|
top: cantAccessText.bottom
|
|
topMargin: hifi.dimensions.contentSpacing.y
|
|
left: emailField.left
|
|
}
|
|
text: qsTr("CONTINUE WITH STEAM")
|
|
fontFamily: linkAccountBody.fontFamily
|
|
fontSize: linkAccountBody.fontSize
|
|
fontBold: linkAccountBody.fontBold
|
|
buttonGlyph: hifi.glyphs.steamSquare
|
|
buttonGlyphRightMargin: 10
|
|
onClicked: {
|
|
if (loginDialog.isOculusStoreRunning()) {
|
|
linkAccountBody.withOculus = true;
|
|
loginDialog.loginThroughSteam();
|
|
} else if (loginDialog.isSteamRunning()) {
|
|
linkAccountBody.withSteam = true;
|
|
loginDialog.loginThroughSteam();
|
|
}
|
|
|
|
bodyLoader.setSource("LoggingInBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader,
|
|
"withSteam": linkAccountBody.withSteam, "withOculus": linkAccountBody.withOculus, "linkSteam": linkAccountBody.linkSteam });
|
|
}
|
|
Component.onCompleted: {
|
|
if (linkAccountBody.linkSteam) {
|
|
continueButton.visible = false;
|
|
return;
|
|
}
|
|
if (loginDialog.isOculusStoreRunning()) {
|
|
continueButton.text = qsTr("CONTINUE WITH OCULUS");
|
|
continueButton.buttonGlyph = hifi.glyphs.oculus;
|
|
} else if (loginDialog.isSteamRunning()) {
|
|
continueButton.text = qsTr("CONTINUE WITH STEAM");
|
|
continueButton.buttonGlyph = hifi.glyphs.steamSquare;
|
|
} else {
|
|
continueButton.visible = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
Item {
|
|
id: signUpContainer
|
|
width: loginContainer.width
|
|
height: signUpTextMetrics.height
|
|
visible: !linkAccountBody.linkSteam
|
|
anchors {
|
|
left: loginContainer.left
|
|
top: loginContainer.bottom
|
|
topMargin: 0.05 * parent.height
|
|
}
|
|
TextMetrics {
|
|
id: signUpTextMetrics
|
|
font: signUpText.font
|
|
text: signUpText.text
|
|
}
|
|
Text {
|
|
id: signUpText
|
|
text: qsTr("Don't have an account?")
|
|
anchors {
|
|
left: parent.left
|
|
}
|
|
lineHeight: 1
|
|
color: "white"
|
|
font.family: linkAccountBody.fontFamily
|
|
font.pixelSize: 18
|
|
verticalAlignment: Text.AlignVCenter
|
|
horizontalAlignment: Text.AlignHCenter
|
|
}
|
|
|
|
HifiStylesUit.ShortcutText {
|
|
id: signUpShortcutText
|
|
z: 10
|
|
font.family: linkAccountBody.fontFamily
|
|
font.pixelSize: 18
|
|
anchors {
|
|
left: signUpText.right
|
|
leftMargin: hifi.dimensions.contentSpacing.x
|
|
}
|
|
|
|
text: "<a href='https://highfidelity.com'>Sign Up</a>"
|
|
|
|
linkColor: hifi.colors.blueAccent
|
|
onLinkActivated: {
|
|
Tablet.playSound(TabletEnums.ButtonClick);
|
|
bodyLoader.setSource("SignUpBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader,
|
|
"errorString": "", "linkSteam": linkAccountBody.linkSteam });
|
|
}
|
|
}
|
|
}
|
|
TextMetrics {
|
|
id: dismissButtonTextMetrics
|
|
font: loginErrorMessage.font
|
|
text: dismissButton.text
|
|
}
|
|
HifiControlsUit.Button {
|
|
id: dismissButton
|
|
width: dismissButtonTextMetrics.width
|
|
height: d.minHeightButton
|
|
anchors {
|
|
bottom: parent.bottom
|
|
right: parent.right
|
|
margins: 3 * hifi.dimensions.contentSpacing.y
|
|
}
|
|
color: hifi.buttons.noneBorderlessWhite
|
|
text: qsTr("No thanks, take me in-world! >")
|
|
fontCapitalization: Font.MixedCase
|
|
fontFamily: linkAccountBody.fontFamily
|
|
fontSize: linkAccountBody.fontSize
|
|
fontBold: linkAccountBody.fontBold
|
|
visible: loginDialog.getLoginDialogPoppedUp() && !linkAccountBody.linkSteam;
|
|
onClicked: {
|
|
if (loginDialog.getLoginDialogPoppedUp()) {
|
|
console.log("[ENCOURAGELOGINDIALOG]: user dismissed login screen")
|
|
var data = {
|
|
"action": "user dismissed login screen"
|
|
};
|
|
UserActivityLogger.logAction("encourageLoginDialog", data);
|
|
loginDialog.dismissLoginDialog();
|
|
}
|
|
root.tryDestroy();
|
|
}
|
|
}
|
|
}
|
|
|
|
onFocusChanged: {
|
|
emailField.focus = focus;
|
|
}
|
|
|
|
Component.onCompleted: {
|
|
//but rise Tablet's one instead for Tablet interface
|
|
root.keyboardEnabled = HMD.active;
|
|
root.keyboardRaised = Qt.binding( function() { return keyboardRaised; })
|
|
root.text = "";
|
|
d.resize();
|
|
init();
|
|
}
|
|
|
|
Keys.onPressed: {
|
|
if (!visible) {
|
|
return;
|
|
}
|
|
|
|
switch (event.key) {
|
|
case Qt.Key_Enter:
|
|
case Qt.Key_Return:
|
|
event.accepted = true;
|
|
Settings.setValue("keepMeLoggedIn/savedUsername", emailField.text);
|
|
linkAccountBody.login();
|
|
break;
|
|
}
|
|
}
|
|
}
|