mirror of
https://github.com/overte-org/overte.git
synced 2025-04-25 19:15:56 +02:00
305 lines
10 KiB
QML
305 lines
10 KiB
QML
//
|
|
// LoginDialog.qml
|
|
//
|
|
// Created by David Rowe on 3 Jun 2015
|
|
// 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.4
|
|
import "controls"
|
|
import "styles"
|
|
import "windows"
|
|
|
|
Window {
|
|
id: root
|
|
HifiConstants { id: hifi }
|
|
objectName: "LoginDialog"
|
|
height: loginDialog.implicitHeight
|
|
width: loginDialog.implicitWidth
|
|
// FIXME make movable
|
|
anchors.centerIn: parent
|
|
destroyOnInvisible: false
|
|
visible: false
|
|
|
|
LoginDialog {
|
|
id: loginDialog
|
|
implicitWidth: backgroundRectangle.width
|
|
implicitHeight: backgroundRectangle.height
|
|
readonly property int inputWidth: 500
|
|
readonly property int inputHeight: 60
|
|
readonly property int borderWidth: 30
|
|
readonly property int closeMargin: 16
|
|
readonly property real tan30: 0.577 // tan(30°)
|
|
readonly property int inputSpacing: 16
|
|
|
|
Rectangle {
|
|
id: backgroundRectangle
|
|
width: loginDialog.inputWidth + loginDialog.borderWidth * 2
|
|
height: loginDialog.inputHeight * 6 + loginDialog.closeMargin * 2
|
|
radius: loginDialog.closeMargin * 2
|
|
color: "#2c86b1"
|
|
opacity: 0.85
|
|
}
|
|
|
|
Column {
|
|
id: mainContent
|
|
width: loginDialog.inputWidth
|
|
spacing: loginDialog.inputSpacing
|
|
anchors {
|
|
horizontalCenter: parent.horizontalCenter
|
|
verticalCenter: parent.verticalCenter
|
|
}
|
|
|
|
Item {
|
|
// Offset content down a little
|
|
width: loginDialog.inputWidth
|
|
height: loginDialog.closeMargin
|
|
}
|
|
|
|
Rectangle {
|
|
width: loginDialog.inputWidth
|
|
height: loginDialog.inputHeight
|
|
radius: height / 2
|
|
color: "#ebebeb"
|
|
|
|
Image {
|
|
source: "../images/login-username.svg"
|
|
width: loginDialog.inputHeight * 0.65
|
|
height: width
|
|
sourceSize: Qt.size(width, height);
|
|
anchors {
|
|
verticalCenter: parent.verticalCenter
|
|
left: parent.left
|
|
leftMargin: loginDialog.inputHeight / 4
|
|
}
|
|
}
|
|
|
|
TextInput {
|
|
id: username
|
|
anchors {
|
|
fill: parent
|
|
leftMargin: loginDialog.inputHeight
|
|
rightMargin: loginDialog.inputHeight / 2
|
|
}
|
|
|
|
helperText: "username or email"
|
|
color: hifi.colors.text
|
|
|
|
KeyNavigation.tab: password
|
|
KeyNavigation.backtab: password
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: loginDialog.inputWidth
|
|
height: loginDialog.inputHeight
|
|
radius: height / 2
|
|
color: "#ebebeb"
|
|
|
|
Image {
|
|
source: "../images/login-password.svg"
|
|
width: loginDialog.inputHeight * 0.65
|
|
height: width
|
|
sourceSize: Qt.size(width, height);
|
|
anchors {
|
|
verticalCenter: parent.verticalCenter
|
|
left: parent.left
|
|
leftMargin: loginDialog.inputHeight / 4
|
|
}
|
|
}
|
|
|
|
TextInput {
|
|
id: password
|
|
anchors {
|
|
fill: parent
|
|
leftMargin: loginDialog.inputHeight
|
|
rightMargin: loginDialog.inputHeight / 2
|
|
}
|
|
|
|
helperText: "password"
|
|
echoMode: TextInput.Password
|
|
color: hifi.colors.text
|
|
|
|
KeyNavigation.tab: username
|
|
KeyNavigation.backtab: username
|
|
onFocusChanged: {
|
|
if (password.focus) {
|
|
password.selectAll()
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
width: loginDialog.inputWidth
|
|
height: loginDialog.inputHeight / 2
|
|
|
|
Text {
|
|
id: messageText
|
|
|
|
visible: loginDialog.statusText != "" && loginDialog.statusText != "Logging in..."
|
|
|
|
width: loginDialog.inputWidth
|
|
height: loginDialog.inputHeight / 2
|
|
horizontalAlignment: Text.AlignHCenter
|
|
verticalAlignment: Text.AlignVCenter
|
|
|
|
text: loginDialog.statusText
|
|
color: "white"
|
|
}
|
|
|
|
Row {
|
|
id: messageSpinner
|
|
|
|
visible: loginDialog.statusText == "Logging in..."
|
|
onVisibleChanged: visible ? messageSpinnerAnimation.restart() : messageSpinnerAnimation.stop()
|
|
|
|
spacing: 24
|
|
anchors {
|
|
verticalCenter: parent.verticalCenter
|
|
horizontalCenter: parent.horizontalCenter
|
|
}
|
|
|
|
Rectangle {
|
|
id: spinner1
|
|
width: 10
|
|
height: 10
|
|
color: "#ebebeb"
|
|
opacity: 0.05
|
|
}
|
|
|
|
Rectangle {
|
|
id: spinner2
|
|
width: 10
|
|
height: 10
|
|
color: "#ebebeb"
|
|
opacity: 0.05
|
|
}
|
|
|
|
Rectangle {
|
|
id: spinner3
|
|
width: 10
|
|
height: 10
|
|
color: "#ebebeb"
|
|
opacity: 0.05
|
|
}
|
|
|
|
SequentialAnimation {
|
|
id: messageSpinnerAnimation
|
|
running: messageSpinner.visible
|
|
loops: Animation.Infinite
|
|
NumberAnimation { target: spinner1; property: "opacity"; to: 1.0; duration: 1000 }
|
|
NumberAnimation { target: spinner2; property: "opacity"; to: 1.0; duration: 1000 }
|
|
NumberAnimation { target: spinner3; property: "opacity"; to: 1.0; duration: 1000 }
|
|
NumberAnimation { target: spinner1; property: "opacity"; to: 0.05; duration: 0 }
|
|
NumberAnimation { target: spinner2; property: "opacity"; to: 0.05; duration: 0 }
|
|
NumberAnimation { target: spinner3; property: "opacity"; to: 0.05; duration: 0 }
|
|
}
|
|
}
|
|
}
|
|
|
|
Rectangle {
|
|
width: loginDialog.inputWidth
|
|
height: loginDialog.inputHeight
|
|
radius: height / 2
|
|
color: "#353535"
|
|
|
|
TextInput {
|
|
anchors.fill: parent
|
|
text: "Login"
|
|
color: "white"
|
|
horizontalAlignment: Text.AlignHCenter
|
|
}
|
|
|
|
MouseArea {
|
|
anchors.fill: parent
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: {
|
|
loginDialog.login(username.text, password.text)
|
|
}
|
|
}
|
|
}
|
|
|
|
Item {
|
|
anchors { left: parent.left; right: parent.right; }
|
|
height: loginDialog.inputHeight
|
|
|
|
Image {
|
|
id: hifiIcon
|
|
source: "../images/hifi-logo-blackish.svg"
|
|
width: loginDialog.inputHeight
|
|
height: width
|
|
sourceSize: Qt.size(width, height);
|
|
anchors { verticalCenter: parent.verticalCenter; horizontalCenter: parent.horizontalCenter }
|
|
}
|
|
|
|
Text {
|
|
anchors { verticalCenter: parent.verticalCenter; right: hifiIcon.left; margins: loginDialog.inputSpacing }
|
|
text: "Password?"
|
|
scale: 0.8
|
|
font.underline: true
|
|
color: "#e0e0e0"
|
|
MouseArea {
|
|
anchors { fill: parent; margins: -loginDialog.inputSpacing / 2 }
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: loginDialog.openUrl(loginDialog.rootUrl + "/users/password/new")
|
|
}
|
|
}
|
|
|
|
Text {
|
|
anchors { verticalCenter: parent.verticalCenter; left: hifiIcon.right; margins: loginDialog.inputSpacing }
|
|
text: "Register"
|
|
scale: 0.8
|
|
font.underline: true
|
|
color: "#e0e0e0"
|
|
|
|
MouseArea {
|
|
anchors { fill: parent; margins: -loginDialog.inputSpacing / 2 }
|
|
cursorShape: Qt.PointingHandCursor
|
|
onClicked: loginDialog.openUrl(loginDialog.rootUrl + "/signup")
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
onVisibleChanged: {
|
|
if (!visible) {
|
|
username.text = ""
|
|
password.text = ""
|
|
loginDialog.statusText = ""
|
|
} else {
|
|
username.forceActiveFocus()
|
|
}
|
|
}
|
|
|
|
Keys.onPressed: {
|
|
switch (event.key) {
|
|
case Qt.Key_Escape:
|
|
case Qt.Key_Back:
|
|
root.visible = false;
|
|
event.accepted = true;
|
|
break;
|
|
|
|
case Qt.Key_Enter:
|
|
case Qt.Key_Return:
|
|
if (username.activeFocus) {
|
|
event.accepted = true
|
|
password.forceActiveFocus()
|
|
} else if (password.activeFocus) {
|
|
event.accepted = true
|
|
if (username.text == "") {
|
|
username.forceActiveFocus()
|
|
} else {
|
|
loginDialog.login(username.text, password.text)
|
|
}
|
|
}
|
|
break
|
|
}
|
|
}
|
|
}
|