Mirrors/overte
3
0
Fork 0
mirror of https://github.com/overte-org/overte.git synced 2025-04-21 17:03:58 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Add basic username, password, login, and error functionality and styling

Browse source
This commit is contained in:
David Rowe 2015-06-04 18:48:21 -07:00
parent afc2f374e5
commit 3388406984
2 changed files with 148 additions and 36 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

180
interface/resources/qml/LoginDialog.qml
View file

@ -10,7 +10,6 @@
import Hifi 1.0
import QtQuick 2.4
import QtQuick.Controls 1.3 // TODO: Needed?
import "controls"
import "styles"
@ -40,39 +39,148 @@ Dialog {
implicitWidth: isCircular() ? circularBackground.width : rectangularBackground.width
implicitHeight: isCircular() ? circularBackground.height : rectangularBackground.height
property int inputWidth: 500
property int inputHeight: 60
property int inputSpacing: isCircular() ? 24 : 16
property int borderWidth: 30
property int closeMargin: 16
Image {
id: circularBackground
visible: isCircular()
source: "../images/login-circle.svg"
width: 500
height: 500
width: loginDialog.inputWidth * 1.2
height: width
}
Image {
id: rectangularBackground
visible: !isCircular()
source: "../images/login-rectangle.svg"
width: 400
height: 400
width: loginDialog.inputWidth + loginDialog.borderWidth * 2
height: loginDialog.inputHeight * 6
}
Image {
id: closeIcon
visible: !isCircular()
source: "../images/login-close.svg"
width: 20
height: 20
anchors {
top: rectangularBackground.top
right: rectangularBackground.right
topMargin: loginDialog.closeMargin
rightMargin: loginDialog.closeMargin
}
MouseArea {
anchors.fill: parent
cursorShape: "PointingHandCursor"
onClicked: {
root.enabled = false
}
}
}
Column {
id: mainContent
width: loginDialog.inputWidth
spacing: loginDialog.inputSpacing
anchors {
horizontalCenter: parent.horizontalCenter
verticalCenter: parent.verticalCenter
}
Rectangle {
width: loginDialog.inputWidth
height: loginDialog.inputHeight
radius: height / 2
color: "#ebebeb"
TextInput {
id: username
anchors.fill: parent
anchors.leftMargin: loginDialog.inputHeight / 2
helperText: "username or email"
KeyNavigation.tab: password
KeyNavigation.backtab: password
}
}
Rectangle {
width: loginDialog.inputWidth
height: loginDialog.inputHeight
radius: height / 2
color: "#ebebeb"
TextInput {
id: password
anchors.fill: parent
anchors.leftMargin: loginDialog.inputHeight / 2
helperText: "password"
echoMode: TextInput.Password
KeyNavigation.tab: username
KeyNavigation.backtab: username
onFocusChanged: {
if (password.focus) {
password.selectAll()
}
}
}
}
Text {
id: messageText
width: loginDialog.inputWidth
height: loginDialog.inputHeight / 2
horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter
text: loginDialog.statusText
}
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: "PointingHandCursor"
onClicked: {
loginDialog.login(username.text, password.text)
}
}
}
}
Text {
id: closeText
visible: isCircular()
anchors {
horizontalCenter: parent.horizontalCenter
top: mainContent.bottom
topMargin: loginDialog.inputSpacing
}
text: "Close"
font.pixelSize: hifi.fonts.pixelSize * 0.8
font.weight: Font.Bold
color: "#175d74"
anchors {
horizontalCenter: circularBackground.horizontalCenter
bottom: circularBackground.bottom
bottomMargin: hifi.layout.spacing * 4
}
MouseArea {
anchors.fill: parent
cursorShape: "PointingHandCursor"
@ -81,29 +189,19 @@ Dialog {
}
}
}
}
Image {
id: closeIcon
visible: !isCircular()
onEnabledChanged: {
if (enabled) {
username.forceActiveFocus();
}
}
source: "../images/login-close.svg"
width: 20
height: 20
anchors {
top: rectangularBackground.top
right: rectangularBackground.right
topMargin: hifi.layout.spacing * 2
rightMargin: hifi.layout.spacing * 2
}
MouseArea {
anchors.fill: parent
cursorShape: "PointingHandCursor"
onClicked: {
root.enabled = false
}
}
onVisibleChanged: {
if (!visible) {
username.text = ""
password.text = ""
loginDialog.statusText = ""
}
}
@ -114,6 +212,20 @@ Dialog {
enabled = 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;
}
}
}

4
interface/src/ui/LoginDialog.cpp
View file

@ -56,7 +56,7 @@ void LoginDialog::handleLoginCompleted(const QUrl&) {
}
void LoginDialog::handleLoginFailed() {
setStatusText("<font color = \"#267077\">Invalid username or password.< / font>");
setStatusText("Invalid username or password");
}
void LoginDialog::setDialogFormat(const QString& dialogFormat) {
@ -95,7 +95,7 @@ QString LoginDialog::rootUrl() const {
void LoginDialog::login(const QString& username, const QString& password) {
qDebug() << "Attempting to login " << username;
setStatusText("Authenticating...");
setStatusText("Logging in...");
AccountManager::getInstance().requestAccessToken(username, password);
}