From 3388406984988b2893f8775ed33071263ee55309 Mon Sep 17 00:00:00 2001 From: David Rowe Date: Thu, 4 Jun 2015 18:48:21 -0700 Subject: [PATCH] Add basic username, password, login, and error functionality and styling --- interface/resources/qml/LoginDialog.qml | 180 +++++++++++++++++++----- interface/src/ui/LoginDialog.cpp | 4 +- 2 files changed, 148 insertions(+), 36 deletions(-) diff --git a/interface/resources/qml/LoginDialog.qml b/interface/resources/qml/LoginDialog.qml index 6db56d21bf..75adc30a1c 100644 --- a/interface/resources/qml/LoginDialog.qml +++ b/interface/resources/qml/LoginDialog.qml @@ -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; } } } diff --git a/interface/src/ui/LoginDialog.cpp b/interface/src/ui/LoginDialog.cpp index 4ed338c7db..a326d6a6d1 100644 --- a/interface/src/ui/LoginDialog.cpp +++ b/interface/src/ui/LoginDialog.cpp @@ -56,7 +56,7 @@ void LoginDialog::handleLoginCompleted(const QUrl&) { } void LoginDialog::handleLoginFailed() { - setStatusText("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); }