overte-JulianGro/interface/resources/qml/LoginDialog/LoggingInBody.qml
2018-12-05 10:16:48 -08:00

288 lines
11 KiB
QML

//
// LoggingInBody.qml
//
// Created by Wayne Chen on 10/18/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.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
Item {
id: loggingInBody
property int textFieldHeight: 31
property int loggingInGlyphRightMargin: 10
property string fontFamily: "Raleway"
property int fontSize: 15
property bool fontBold: true
property bool withSteam: withSteam
property bool withOculus: withOculus
property bool linkSteam: linkSteam
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
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;
}
}
// timer to kill the dialog upon login success
Timer {
id: successTimer
interval: 1000;
running: false;
repeat: false;
onTriggered: {
loginDialog.dismissLoginDialog();
root.tryDestroy();
}
}
function init() {
// For the process of logging in.
loggingInText.wrapMode = Text.NoWrap;
if (loggingInBody.withSteam) {
loggingInGlyph.visible = true;
loggingInText.text = "Logging in to Steam";
loggingInText.x = loggingInHeader.width/2 - loggingInTextMetrics.width/2 + loggingInGlyphTextMetrics.width/2;
} else if (loggingInBody.withOculus) {
loggingInGlyph.visible = true;
loggingInGlyph.text = hifi.glyphs.oculus;
loggingInText.text = "Logging in to Oculus";
loggingInText.x = loggingInHeader.width/2 - loggingInTextMetrics.width/2 + loggingInGlyphTextMetrics.width/2;
} else {
loggingInText.text = "Logging in";
loggingInText.anchors.bottom = loggingInHeader.bottom;
loggingInText.anchors.bottomMargin = hifi.dimensions.contentSpacing.y;
}
loggingInSpinner.visible = true;
}
function loadingSuccess() {
loggingInSpinner.visible = false;
if (loggingInBody.linkSteam) {
loggingInText.text = "Linking to Steam";
loginDialog.linkSteam();
return;
}
if (loggingInBody.withSteam) {
// reset the flag.
loggingInGlyph.visible = false;
loggingInText.text = "You are now logged into Steam!"
loggingInText.anchors.centerIn = loggingInHeader;
loggingInText.anchors.bottom = loggingInHeader.bottom;
loggedInGlyph.visible = true;
} else if (loggingInBody.withOculus) {
// reset the flag.
loggingInGlyph.visible = false;
loggingInText.text = "You are now logged into Oculus!"
loggingInText.anchors.centerIn = loggingInHeader;
loggingInText.anchors.bottom = loggingInHeader.bottom;
loggedInGlyph.text = hifi.glyphs.oculus;
loggedInGlyph.visible = true;
} else {
loggingInText.text = "You are now logged in!";
}
successTimer.start();
}
Item {
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.7
color: "black"
}
Item {
id: bannerContainer
width: parent.width
height: banner.height
anchors {
top: parent.top
topMargin: 0.18 * parent.height
}
Image {
id: banner
anchors.centerIn: parent
source: "../../images/high-fidelity-banner.svg"
horizontalAlignment: Image.AlignHCenter
}
}
Item {
id: loggingInContainer
width: parent.width
height: parent.height
onHeightChanged: d.resize(); onWidthChanged: d.resize();
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: loggingInBody.loggingInGlyphRightMargin
anchors.bottom: parent.bottom;
anchors.bottomMargin: hifi.dimensions.contentSpacing.y
// Alignment
horizontalAlignment: Text.AlignHCenter;
verticalAlignment: Text.AlignVCenter;
visible: loggingInBody.withSteam;
}
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: loggingInBody.fontFamily
font.pixelSize: loggingInBody.fontSize
font.bold: loggingInBody.fontBold
wrapMode: Text.NoWrap
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: loggingInSpinner
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;
// color
color: "white"
// 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: false;
}
}
}
}
Component.onCompleted: {
d.resize();
loggingInBody.init();
}
Connections {
target: loginDialog
onHandleLinkCompleted: {
console.log("Link Succeeded");
loggingInBody.linkSteam = false;
loadingSuccess();
}
onHandleLinkFailed: {
console.log("Link Failed: " + error);
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "linkSteam": true, "errorString": error });
}
onHandleLoginCompleted: {
console.log("Login Succeeded");
loadingSuccess();
}
onHandleLoginFailed: {
console.log("Login Failed")
loggingInSpinner.visible = false;
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("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."
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": errorString });
}
else {
errorString = "Username or password is incorrect.";
bodyLoader.setSource("LinkAccountBody.qml", { "loginDialog": loginDialog, "root": root, "bodyLoader": bodyLoader, "errorString": errorString });
}
}
}
}