adding more steam login flow

This commit is contained in:
Wayne Chen 2018-12-03 16:09:10 -08:00
parent 43b5a14180
commit 5beb810604
10 changed files with 149 additions and 143 deletions

View file

@ -92,6 +92,6 @@ FocusScope {
}
Component.onCompleted: {
bodyLoader.setSource("LoginDialog/LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
bodyLoader.setSource("LoginDialog/LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "linkSteam": false });
}
}

View file

@ -131,7 +131,7 @@ Item {
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, 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;

View file

@ -26,14 +26,14 @@ Item {
readonly property int fontSize: 15
readonly property bool fontBold: true
readonly property bool withSteam: withSteam
QtObject {
id: d
readonly property int minWidth: 480
// readonly property int minWidthButton: !root.isTablet ? 256 : 174
readonly property int minWidthButton: 36
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
@ -70,7 +70,7 @@ Item {
height: banner.height
anchors {
top: parent.top
topMargin: 85
topMargin: 0.18 * parent.height
}
Image {
id: banner
@ -121,7 +121,7 @@ Item {
}
Item {
id: buttons
width: Math.max(banner.width, cancelContainer.width + profileButton.width)
width: banner.width
height: d.minHeightButton
anchors {
top: parent.top
@ -129,43 +129,24 @@ Item {
left: parent.left
leftMargin: (parent.width - banner.width) / 2
}
Item {
id: cancelContainer
width: cancelText.width
height: d.minHeightButton
HifiControlsUit.Button {
id: cancelButton
anchors {
top: parent.top
left: parent.left
}
Text {
id: cancelText
text: qsTr("Cancel");
width: (parent.width - hifi.dimensions.contentSpacing.x) / 2
height: d.minHeightButton
lineHeight: 1
color: "white"
font.family: completeProfileBody.fontFamily
font.pixelSize: completeProfileBody.fontSize
font.capitalization: Font.AllUppercase;
font.bold: completeProfileBody.fontBold
lineHeightMode: Text.ProportionalHeight
anchors.centerIn: parent
text: qsTr("CANCEL")
color: hifi.buttons.noneBorderlessWhite
fontFamily: completeProfileBody.fontFamily
fontSize: completeProfileBody.fontSize
fontBold: completeProfileBody.fontBold
onClicked: {
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
}
MouseArea {
id: cancelArea
anchors.fill: parent
hoverEnabled: true
onEntered: {
Tablet.playSound(TabletEnums.ButtonHover);
}
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
}
}
TextMetrics {
id: profileButtonTextMetrics
font: cancelText.font
text: qsTr("CREATE YOUR PROFILE")
}
HifiControlsUit.Button {
id: profileButton
@ -173,7 +154,7 @@ Item {
top: parent.top
right: parent.right
}
width: Math.max(profileButtonTextMetrics.width + 2 * hifi.dimensions.contentSpacing.x, d.minWidthButton)
width: (parent.width - hifi.dimensions.contentSpacing.x) / 2
height: d.minHeightButton
text: qsTr("Create your profile")
@ -185,8 +166,6 @@ Item {
onClicked: {
loginErrorMessage.visible = false;
loginDialog.createAccountFromSteam();
bodyLoader.setSource("LoggingInBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader,
"withSteam": true, "fromBody": "CompleteProfileBody" })
}
}
}
@ -212,7 +191,7 @@ Item {
onLinkActivated: {
loginDialog.isLogIn = true;
bodyLoader.setSource("SignInBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": "" });
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": "", "linkSteam": true });
}
}
@ -246,11 +225,26 @@ Item {
lineHeight: 1
lineHeightMode: Text.ProportionalHeight
onLinkActivated: loginDialog.openUrl(link)
onLinkActivated: loginDialog.openUrl(link);
}
}
}
Connections {
target: loginDialog
onHandleCreateCompleted: {
console.log("Create Succeeded")
loginDialog.loginThroughSteam();
bodyLoader.setSource("LoggingInBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "withSteam": true });
}
onHandleCreateFailed: {
console.log("Create Failed: " + error);
bodyLoader.setSource("UsernameCollisionBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
}
}
Component.onCompleted: {
//but rise Tablet's one instead for Tablet interface
if (root.isTablet || root.isOverlay) {

View file

@ -35,6 +35,7 @@ Item {
property bool punctuationMode: false
property bool withSteam: false
property bool linkSteam: linkSteam
property bool withOculus: false
property string errorString: errorString
@ -44,7 +45,6 @@ Item {
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
@ -73,11 +73,19 @@ Item {
loginDialog.isLogIn = true;
loginErrorMessage.text = linkAccountBody.errorString;
loginErrorMessage.visible = (linkAccountBody.errorString !== "");
loginButton.text = "Log In";
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;
}
@ -102,7 +110,7 @@ Item {
height: banner.height
anchors {
bottom: loginContainer.top
bottomMargin: 0.125 * parent.height
bottomMargin: 0.07 * parent.height
}
Image {
id: banner
@ -152,6 +160,7 @@ Item {
width: banner.width
height: linkAccountBody.textFieldHeight
font.pixelSize: linkAccountBody.textFieldFontSize
styleRenderType: Text.QtRendering
anchors {
top: parent.top
topMargin: loginErrorMessage.height
@ -189,6 +198,7 @@ Item {
width: banner.width
height: linkAccountBody.textFieldHeight
font.pixelSize: linkAccountBody.textFieldFontSize
styleRenderType: Text.QtRendering
placeholderText: "Password"
activeFocusOnPress: true
echoMode: passwordFieldMouseArea.showPassword ? TextInput.Normal : TextInput.Password
@ -269,16 +279,30 @@ Item {
}
onCheckedChanged: {
Settings.setValue("keepMeLoggedIn", checked);
if (checked) {
Settings.setValue("keepMeLoggedIn/savedUsername", Account.username);
var savedUsername = Settings.getValue("keepMeLoggedIn/savedUsername", "");
emailField.text = savedUsername === "Unknown user" ? "" : savedUsername;
} else {
Settings.setValue("keepMeLoggedIn/savedUsername", "");
}
}
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": errorString });
}
}
HifiControlsUit.Button {
@ -292,22 +316,38 @@ Item {
anchors {
top: keepMeLoggedInCheckbox.bottom
topMargin: hifi.dimensions.contentSpacing.y
left: emailField.left
}
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: 18
font.pixelSize: linkAccountBody.textFieldFontSize
text: "<a href='https://highfidelity.com/users/password/new'> Can't access your account?</a>"
@ -349,6 +389,10 @@ Item {
"withSteam": linkAccountBody.withSteam, "withOculus": linkAccountBody.withOculus, "fromBody": "LinkAccountBody" });
}
Component.onCompleted: {
if (linkAccountBody.linkSteam) {
continueButton.visible = false;
return;
}
if (loginDialog.isOculusStoreRunning()) {
continueButton.text = qsTr("CONTINUE WITH OCULUS");
continueButton.buttonGlyph = hifi.glyphs.oculus;
@ -366,10 +410,11 @@ Item {
id: signUpContainer
width: loginContainer.width
height: signUpTextMetrics.height
visible: !linkAccountBody.linkSteam
anchors {
left: loginContainer.left
top: loginContainer.bottom
// topMargin: 0.25 * parent.height
topMargin: 0.05 * parent.height
}
TextMetrics {
id: signUpTextMetrics
@ -406,7 +451,7 @@ Item {
onLinkActivated: {
Tablet.playSound(TabletEnums.ButtonClick);
bodyLoader.setSource("SignUpBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader,
"errorString": "" });
"errorString": "", "linkSteam": linkAccountBody.linkSteam });
}
}
}
@ -430,7 +475,7 @@ Item {
fontFamily: linkAccountBody.fontFamily
fontSize: linkAccountBody.fontSize
fontBold: linkAccountBody.fontBold
visible: loginDialog.getLoginDialogPoppedUp()
visible: loginDialog.getLoginDialogPoppedUp() && !linkAccountBody.linkSteam;
onClicked: {
if (loginDialog.getLoginDialogPoppedUp()) {
console.log("[ENCOURAGELOGINDIALOG]: user dismissed login screen")
@ -464,11 +509,11 @@ Item {
case Qt.Key_Return:
event.accepted = true;
Settings.setValue("keepMeLoggedIn/savedUsername", emailField.text);
linkAccountBody.login();
break;
case Qt.Key_Escape:
event.accepted = true;
root.tryDestroy();
if (linkAccountBody.linkSteam) {
linkAccountBody.linkSteam();
} else {
linkAccountBody.login();
}
break;
}
}

View file

@ -130,7 +130,7 @@ Item {
height: banner.height
anchors {
top: parent.top
topMargin: 85
topMargin: 0.18 * parent.height
}
Image {
id: banner
@ -260,8 +260,8 @@ Item {
var errorString = "";
if (loggingInBody.withSteam) {
loggingInGlyph.visible = false;
errorString = "Your Steam authentication has failed. Please make sure you are logged into Steam and try again."
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": errorString });
errorString = "Your Steam authentication has failed. Please make sure you are logged into Steam and try again.";
bodyLoader.setSource("CompleteProfileBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "withSteam": loggingInBody.withSteam, "errorString": errorString });
} else if (loggingInBody.withOculus) {
loggingInGlyph.visible = false;
errorString = "Your Oculus authentication has failed. Please make sure you are logged into Oculus and try again."
@ -269,11 +269,7 @@ Item {
}
else {
errorString = "Username or password is incorrect.";
if (loginDialog.isLogIn && loggingInBody.withSteam) {
bodyLoader.setSource("CompleteProfileBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
} else {
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": errorString });
}
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": errorString });
}
}
}

View file

@ -37,6 +37,7 @@ Item {
onKeyboardRaisedChanged: d.resize();
property string errorString: errorString
property bool linkSteam: linkSteam
QtObject {
id: d
@ -44,7 +45,6 @@ Item {
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
@ -110,7 +110,7 @@ Item {
height: banner.height
anchors {
bottom: loginContainer.top
bottomMargin: 0.125 * parent.height
bottomMargin: 0.07 * parent.height
}
Image {
id: banner
@ -163,6 +163,7 @@ Item {
height: signUpBody.textFieldHeight
placeholderText: "Username"
font.pixelSize: signUpBody.textFieldFontSize
styleRenderType: Text.QtRendering
anchors {
top: parent.top
topMargin: loginErrorMessage.height
@ -210,6 +211,7 @@ Item {
}
placeholderText: "Username or Email"
font.pixelSize: signUpBody.textFieldFontSize
styleRenderType: Text.QtRendering
activeFocusOnPress: true
Keys.onPressed: {
switch (event.key) {
@ -248,6 +250,7 @@ Item {
height: signUpBody.textFieldHeight
placeholderText: "Password"
font.pixelSize: signUpBody.textFieldFontSize
styleRenderType: Text.QtRendering
activeFocusOnPress: true
echoMode: passwordFieldMouseArea.showPassword ? TextInput.Normal : TextInput.Password
anchors {
@ -336,16 +339,12 @@ Item {
}
onCheckedChanged: {
Settings.setValue("keepMeLoggedIn", checked);
if (checked) {
Settings.setValue("keepMeLoggedIn/savedUsername", Account.username);
var savedUsername = Settings.getValue("keepMeLoggedIn/savedUsername", "");
usernameField.text = savedUsername === "Unknown user" ? "" : savedUsername;
} else {
Settings.setValue("keepMeLoggedIn/savedUsername", "");
}
}
Component.onDestruction: {
Settings.setValue("keepMeLoggedIn", checked);
if (checked) {
Settings.setValue("keepMeLoggedIn/savedUsername", emailField.text);
}
}
}
@ -370,7 +369,7 @@ Item {
fontSize: signUpBody.fontSize
fontBold: signUpBody.fontBold
onClicked: {
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "linkSteam": signUpBody.linkSteam });
}
}
HifiControlsUit.Button {

View file

@ -29,8 +29,7 @@ Item {
function create() {
mainTextContainer.visible = false
loginDialog.createAccountFromSteam(textField.text)
bodyLoader.setSource("LoggingInBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "withSteam": true, "fromBody": "UsernameCollisionBody" });
loginDialog.createAccountFromSteam(textField.text);
}
property bool keyboardEnabled: false
@ -45,7 +44,6 @@ Item {
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
@ -84,7 +82,7 @@ Item {
height: banner.height
anchors {
top: parent.top
topMargin: 85
topMargin: 0.18 * parent.height
}
Image {
id: banner
@ -110,7 +108,7 @@ Item {
}
font.family: usernameCollisionBody.fontFamily
font.pixelSize: usernameCollisionBody.fontSize - 10
font.pixelSize: usernameCollisionBody.fontSize
font.bold: usernameCollisionBody.fontBold
text: qsTr("Your Steam username is not available.")
wrapMode: Text.WordWrap
@ -130,7 +128,8 @@ Item {
topMargin: hifi.dimensions.contentSpacing.y
}
font.family: "Fira Sans"
font.pixelSize: usernameCollisionBody.fontSize - 10
font.pixelSize: usernameCollisionBody.fontSize
styleRenderType: Text.QtRendering
font.bold: usernameCollisionBody.fontBold
width: banner.width
@ -170,7 +169,7 @@ Item {
Item {
id: buttons
width: Math.max(banner.width, cancelContainer.width + profileButton.width)
width: banner.width
height: d.minHeightButton
anchors {
top: textField.bottom
@ -179,45 +178,24 @@ Item {
leftMargin: (parent.width - banner.width) / 2
}
Item {
id: cancelContainer
width: cancelText.width
height: d.minHeightButton
HifiControlsUit.Button {
id: cancelButton
anchors {
top: parent.top
left: parent.left
}
Text {
id: cancelText
text: qsTr("Cancel");
width: (parent.width - hifi.dimensions.contentSpacing.x) / 2
height: d.minHeightButton
lineHeight: 1
color: "white"
font.family: usernameCollisionBody.fontFamily
font.pixelSize: usernameCollisionBody.fontSize
font.capitalization: Font.AllUppercase;
font.bold: usernameCollisionBody.fontBold
lineHeightMode: Text.ProportionalHeight
anchors.centerIn: parent
text: qsTr("CANCEL")
color: hifi.buttons.noneBorderlessWhite
fontFamily: usernameCollisionBody.fontFamily
fontSize: usernameCollisionBody.fontSize
fontBold: usernameCollisionBody.fontBold
onClicked: {
bodyLoader.setSource("CompleteProfileBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
}
MouseArea {
id: cancelArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton
hoverEnabled: true
onEntered: {
Tablet.playSound(TabletEnums.ButtonHover);
}
onClicked: {
Tablet.playSound(TabletEnums.ButtonClick);
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
}
}
}
TextMetrics {
id: profileButtonTextMetrics
font: cancelText.font
text: qsTr("CREATE YOUR PROFILE")
}
HifiControlsUit.Button {
id: profileButton
@ -225,7 +203,7 @@ Item {
top: parent.top
right: parent.right
}
width: Math.max(profileButtonTextMetrics.width + 2 * hifi.dimensions.contentSpacing.x, d.minWidthButton)
width: (parent.width - hifi.dimensions.contentSpacing.x) / 2
height: d.minHeightButton
text: qsTr("Create your profile")
@ -241,23 +219,15 @@ Item {
}
}
Component.onCompleted: {
//dont rise local keyboard
keyboardEnabled = !root.isTablet && HMD.active;
//but rise Tablet's one instead for Tablet interface
if (root.isTablet || root.isOverlay) {
root.keyboardEnabled = HMD.active;
root.keyboardRaised = Qt.binding( function() { return keyboardRaised; })
}
root.text = "";
d.resize();
textField.focus = true;
if (usernameCollisionBody.errorString !== "") {
mainTextContainer.visible = true;
mainTextContainer.text = usernameCollisionBody.errorString;
}
}
// Component.onCompleted: {
// root.text = "";
// d.resize();
// textField.focus = true;
// if (usernameCollisionBody.errorString !== "") {
// mainTextContainer.visible = true;
// mainTextContainer.text = usernameCollisionBody.errorString;
// }
// }
Connections {
target: loginDialog

View file

@ -121,6 +121,6 @@ FocusScope {
Component.onCompleted: {
keyboardTimer.start();
bodyLoader.setSource("LoginDialog/LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": ""});
bodyLoader.setSource("LoginDialog/LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "linkSteam": false });
}
}

View file

@ -31,6 +31,7 @@ TextField {
property bool hasClearButton: false;
property string leftPermanentGlyph: "";
property string centerPlaceholderGlyph: "";
property int styleRenderType: Text.NativeRendering
placeholderText: textField.placeholderText
@ -44,8 +45,8 @@ TextField {
// workaround for https://bugreports.qt.io/browse/QTBUG-49297
Keys.onPressed: {
switch (event.key) {
case Qt.Key_Return:
case Qt.Key_Enter:
case Qt.Key_Return:
case Qt.Key_Enter:
event.accepted = true;
// emit accepted signal manually
@ -156,6 +157,7 @@ TextField {
selectionColor: hifi.colors.primaryHighlight
padding.left: hasRoundedBorder ? textField.height / 2 : ((isSearchField || textField.leftPermanentGlyph !== "") ? textField.height - 2 : 0) + hifi.dimensions.textPadding
padding.right: (hasClearButton ? textField.height - 2 : 0) + hifi.dimensions.textPadding
renderType: textField.styleRenderType
}
HifiControls.Label {

View file

@ -143,7 +143,7 @@ FocusScope {
}
Component.onCompleted: {
bodyLoader.setSource("../LoginDialog/LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader });
keyboardTimer.start();
bodyLoader.setSource("../LoginDialog/LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "linkSteam": false });
}
}