`emailTextLabel.text` uses `User.name`

2 files changed, 189 insertions, 5 deletions

diff --git a/features/LoginPassword.qml b/features/LoginPassword.qml
index d12eaf1..0e73845 100644
--- a/features/LoginPassword.qml
+++ b/features/LoginPassword.qml
@@ -1,4 +1,17 @@
-import QtQuick 2.4
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
+import QtQuick.Layouts 1.12
 
 LoginPasswordForm {
+    emailTextLabel.text: User.name
+    passwordTextField.onTextChanged: {
+        if (!passwordTextField.text || !continueButton.enabled)
+            continueButton.enabled = !continueButton.enabled
+    }
 }
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
diff --git a/features/LoginPasswordForm.ui.qml b/features/LoginPasswordForm.ui.qml
index 96a8ae4..7dc7a92 100644
--- a/features/LoginPasswordForm.ui.qml
+++ b/features/LoginPasswordForm.ui.qml
@@ -1,6 +1,177 @@
-import QtQuick 2.4
+import QtQuick 2.12
+import QtQuick.Layouts 1.12
+import QtQuick.Controls 2.12
+import QtQuick.Controls.Material 2.12
 
-Item {
-    width: 400
-    height: 400
+Page {
+    id: page
+    title: qsTr("Log in")
+
+    property alias continueButton: continueButton
+    property alias emailTextLabel: emailTextLabel
+    property alias passwordTextField: passwordTextField
+
+    Text {
+        id: pageTitle
+        text: contentView.currentItem.title
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.WordWrap
+        anchors.right: parent.right
+        anchors.rightMargin: 88
+        anchors.bottom: pageInstruction.top
+        anchors.bottomMargin: 8
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        font.pointSize: 14
+        font.family: "Work Sans"
+        font.weight: Font.Medium
+    }
+    Text {
+        id: pageInstruction
+        color: "#000000"
+        text: qsTr("Enter password.")
+        verticalAlignment: Text.AlignVCenter
+        wrapMode: Text.WordWrap
+        anchors.right: parent.right
+        anchors.rightMargin: 88
+        font.family: "Work Sans"
+
+        font.pointSize: 24
+        font.weight: Font.Bold
+        anchors.left: parent.left
+        anchors.leftMargin: 16
+        anchors.bottom: emailLayout.top
+        anchors.bottomMargin: 0
+    }
+    RowLayout {
+        id: emailLayout
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.bottom: passwordLayout.top
+        anchors.bottomMargin: 16
+        spacing: 8
+        height: 56
+
+        Image {
+            width: 24
+            height: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            fillMode: Image.PreserveAspectFit
+            source: "../components/icons/email-24px.svg"
+            antialiasing: true
+        }
+
+        Label {
+            id: emailTextLabel
+            Layout.rightMargin: 16
+            Layout.leftMargin: 8
+            Layout.fillWidth: true
+            text: qsTr("your@email.com")
+            verticalAlignment: Text.AlignVCenter
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            font.pointSize: 16
+            font.family: "Work Sans"
+            color: "#8A000000"
+        }
+    }
+    RowLayout {
+        id: passwordLayout
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.bottom: continueLayout.top
+        anchors.bottomMargin: 16
+        spacing: 8
+        height: 56
+
+        Image {
+            width: 24
+            height: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            opacity: 0.54
+            sourceSize.height: 24
+            sourceSize.width: 24
+            Layout.leftMargin: 16
+            fillMode: Image.PreserveAspectFit
+            source: "../components/icons/lock-24px.svg"
+            antialiasing: true
+        }
+
+        TextField {
+            id: passwordTextField
+            Layout.rightMargin: 16
+            Layout.leftMargin: 8
+            Layout.fillWidth: true
+            placeholderText: qsTr("Enter password")
+            verticalAlignment: Text.AlignVCenter
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            font.pointSize: 16
+            font.family: "Work Sans"
+            color: "#8A000000"
+            echoMode: TextInput.Password
+        }
+    }
+    RowLayout {
+        id: continueLayout
+        height: 80
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+
+        Text {
+            id: disclaimer
+            text: qsTr("By continuing, you are agree to our Terms of Use and Privacy Policy.")
+            Layout.rightMargin: 16
+            Layout.leftMargin: 16
+            font.family: "Roboto"
+            font.pointSize: 12
+            color: "#FA000000"
+            wrapMode: Text.WordWrap
+            verticalAlignment: Text.AlignVCenter
+            rightPadding: 0
+            leftPadding: 0
+            Layout.alignment: Qt.AlignVCenter
+            Layout.fillWidth: true
+        }
+
+        RoundButton {
+            id: continueButton
+            width: 72
+            height: 72
+            Layout.preferredHeight: 64
+            Layout.preferredWidth: 64
+            Layout.minimumHeight: 64
+            Layout.minimumWidth: 64
+            Layout.rightMargin: 16
+            Layout.leftMargin: 16
+            flat: false
+            rightPadding: 0
+            leftPadding: 0
+            bottomPadding: 0
+            topPadding: 0
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Material.background: Material.primary
+            display: AbstractButton.IconOnly
+            icon.name: "arrow-forward-icon"
+            icon.source: "../components/icons/arrow-forward-24px.svg"
+            highlighted: true
+            enabled: false
+        }
+    }
 }
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}
+}
+##^##*/
+