Merge remote-tracking branch 'github/development'

8 files changed, 190 insertions, 64 deletions

diff --git a/assets/email-24px.svg b/assets/email-24px.svg
new file mode 100644
index 0000000..1ed4686
--- /dev/null
+++ b/assets/email-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M22 6c0-1.1-.9-2-2-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6zm-2 0l-8 5-8-5h16zm0 12H4V8l8 5 8-5v10z"/></svg>
\ No newline at end of file
diff --git a/assets/lock-24px.svg b/assets/lock-24px.svg
new file mode 100644
index 0000000..1dbceea
--- /dev/null
+++ b/assets/lock-24px.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="M0 0h24v24H0V0z"/><path opacity=".87" d="M0 0h24v24H0V0z"/></g><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10zm-6-3c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2z"/></svg>
\ No newline at end of file
diff --git a/assets/user-24px.svg b/assets/user-24px.svg
new file mode 100644
index 0000000..3eff6de
--- /dev/null
+++ b/assets/user-24px.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
+    <title>username-24</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M12,2 C6.48,2 2,6.48 2,12 C2,17.52 6.48,22 12,22 L17,22 L17,20 L12,20 C7.66,20 4,16.34 4,12 C4,7.66 7.66,4 12,4 C16.34,4 20,7.66 20,12 L20,13.43 C20,14.22 19.29,15 18.5,15 C17.71,15 17,14.22 17,13.43 L17,12 C17,9.24 14.76,7 12,7 C9.24,7 7,9.24 7,12 C7,14.76 9.24,17 12,17 C13.38,17 14.64,16.44 15.54,15.53 C16.19,16.42 17.31,17 18.5,17 C20.47,17 22,15.4 22,13.43 L22,12 C22,6.48 17.52,2 12,2 Z M12,15 C10.34,15 9,13.66 9,12 C9,10.34 10.34,9 12,9 C13.66,9 15,10.34 15,12 C15,13.66 13.66,15 12,15 Z" id="path-1"></path>
+    </defs>
+    <g id="username-24" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <mask id="mask-2" fill="white">
+            <use xlink:href="#path-1"></use>
+        </mask>
+        <use id="icon/communication/alternate_email_24px" fill-opacity="0.9" fill="#000000" fill-rule="nonzero" xlink:href="#path-1"></use>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/kelakon.qrc b/kelakon.qrc
index 3c41d42..d6837c0 100644
--- a/kelakon.qrc
+++ b/kelakon.qrc
@@ -27,5 +27,10 @@
         <file>assets/chevron-right-24px.svg</file>
         <file>assets/add-24px.svg</file>
         <file>assets/profile-24px.svg</file>
+        <file>pages/Username.qml</file>
+        <file>pages/UsernameForm.ui.qml</file>
+        <file>assets/user-24px.svg</file>
+        <file>assets/email-24px.svg</file>
+        <file>assets/lock-24px.svg</file>
     </qresource>
 </RCC>
diff --git a/pages/CreateProfileForm.ui.qml b/pages/CreateProfileForm.ui.qml
index 76f0da9..45087e1 100644
--- a/pages/CreateProfileForm.ui.qml
+++ b/pages/CreateProfileForm.ui.qml
@@ -61,44 +61,92 @@ Rectangle {
             }
         }
     }
-    Rectangle {
+    RowLayout {
         id: userEmail
-        height: 48
-        anchors.top: profilePicture.bottom
-        anchors.topMargin: 16
-        anchors.right: parent.right
-        anchors.rightMargin: 16
-        anchors.left: parent.left
-        anchors.leftMargin: 16
+        height: 56
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: usernameRowLayout.bottom
+        width: parent.width
+        spacing: 8
+
+        Image {
+            width: 24
+            height: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "../assets/email-24px.svg"
+            antialiasing: true
+        }
 
         Label {
             id: emailAddressLabel
-            anchors.right: parent.right
-            anchors.rightMargin: 16
-            anchors.left: parent.left
-            anchors.leftMargin: 16
-            anchors.verticalCenter: parent.verticalCenter
-
+            Layout.fillWidth: true
             text: qsTr("your@email.com")
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            verticalAlignment: Text.AlignVCenter
             font.family: "Google Sans"
             font.pointSize: 16
             color: "#99000000"
         }
     }
+    RowLayout {
+        id: fullnameRowLayout
+        height: 56
+        anchors.horizontalCenter: parent.horizontalCenter
+        anchors.top: profilePicture.bottom
+        anchors.topMargin: 32
+        width: parent.width
+        Image {
+            width: 24
+            height: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "../assets/profile-24px.svg"
+            antialiasing: true
+        }
 
-    TextField {
-        id: enterFullName
-        anchors.top: userEmail.bottom
+        TextField {
+            id: enterFullName
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            font.pointSize: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Full name")
+            Layout.alignment: Qt.AlignVCenter
+        }
+    }
+    RowLayout {
+        id: usernameRowLayout
+        height: 56
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        Layout.alignment: Qt.AlignVCenter
+        anchors.top: fullnameRowLayout.bottom
         anchors.topMargin: 16
-        font.pointSize: 16
-        font.family: "Google Sans"
-        Layout.fillWidth: true
-        placeholderText: qsTr("Full name")
-        anchors.right: parent.right
-        anchors.rightMargin: 16
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        Layout.maximumHeight: 56
+
+        Image {
+            width: 24
+            height: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "../assets/user-24px.svg"
+            antialiasing: true
+        }
+
+        TextField {
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            font.pointSize: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Username")
+            Layout.alignment: Qt.AlignVCenter
+        }
     }
 
     RoundButton {
@@ -141,11 +189,9 @@ Rectangle {
     }
 }
 
-
-
-
-/*##^## Designer {
-    D{i:0;autoSize:true;height:480;width:640}D{i:1;anchors_width:640}D{i:7;anchors_height:48;anchors_y:143}
-D{i:9;anchors_y:322}D{i:11;anchors_y:54}
+/*##^##
+Designer {
+    D{i:0;autoSize:true;height:480;width:640}D{i:1;anchors_width:640}
 }
- ##^##*/
+##^##*/
+
diff --git a/pages/PasswordForm.ui.qml b/pages/PasswordForm.ui.qml
index 887bf01..8936ccd 100644
--- a/pages/PasswordForm.ui.qml
+++ b/pages/PasswordForm.ui.qml
@@ -63,48 +63,68 @@ Rectangle {
         font.pointSize: 34
     }
 
-    Rectangle {
+    RowLayout {
         id: userEmail
-        height: 48
-        anchors.right: parent.right
-        anchors.rightMargin: 16
-        anchors.left: parent.left
-        anchors.leftMargin: 16
+        height: 56
+        anchors.horizontalCenterOffset: 0
+        anchors.horizontalCenter: parent.horizontalCenter
+        width: parent.width
+        spacing: 8
         anchors.bottom: passTextField.top
         anchors.bottomMargin: 16
 
+        Image {
+            width: 24
+            height: 24
+            Layout.leftMargin: 16
+            Layout.alignment: Qt.AlignVCenter
+            fillMode: Image.PreserveAspectFit
+            source: "../assets/email-24px.svg"
+            antialiasing: true
+        }
+
         Label {
             id: emailAddressLabel
-            anchors.right: parent.right
-            anchors.rightMargin: 16
-            anchors.left: parent.left
-            anchors.leftMargin: 16
-            anchors.verticalCenter: parent.verticalCenter
-
+            Layout.fillWidth: true
             text: qsTr("your@email.com")
+            Layout.leftMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
             font.family: "Google Sans"
             font.pointSize: 16
             color: "#99000000"
         }
     }
-
-    TextField {
+    RowLayout {
         id: passTextField
-        y: 501
-        font.pointSize: 16
+        anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottom: createPassButton.top
         anchors.bottomMargin: 16
-        font.family: "Google Sans"
-        Layout.fillWidth: true
-        placeholderText: qsTr("Password")
-        anchors.right: parent.right
-        anchors.rightMargin: 16
-        anchors.left: parent.left
-        anchors.leftMargin: 16
-        Layout.maximumHeight: 56
-        echoMode: TextInput.Password
-    }
+        width: parent.width
+        spacing: 8
+        height: 56
+
+        Image {
+            width: 24
+            height: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            Layout.leftMargin: 16
+            fillMode: Image.PreserveAspectFit
+            source: "../assets/lock-24px.svg"
+            antialiasing: true
+        }
 
+        TextField {
+            Layout.rightMargin: 16
+            Layout.leftMargin: 24
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+            font.pointSize: 16
+            anchors.bottomMargin: 16
+            font.family: "Google Sans"
+            Layout.fillWidth: true
+            placeholderText: qsTr("Password")
+            echoMode: TextInput.Password
+        }
+    }
     RoundButton {
         id: createPassButton
         x: 34
@@ -124,10 +144,9 @@ Rectangle {
     }
 }
 
-
-
-
-/*##^## Designer {
+/*##^##
+Designer {
     D{i:0;autoSize:true;height:480;width:640}
 }
- ##^##*/
+##^##*/
+
diff --git a/pages/Username.qml b/pages/Username.qml
new file mode 100644
index 0000000..c523226
--- /dev/null
+++ b/pages/Username.qml
@@ -0,0 +1,4 @@
+import QtQuick 2.4
+
+UsernameForm {
+}
diff --git a/pages/UsernameForm.ui.qml b/pages/UsernameForm.ui.qml
new file mode 100644
index 0000000..3771959
--- /dev/null
+++ b/pages/UsernameForm.ui.qml
@@ -0,0 +1,35 @@
+import QtQuick 2.12
+import QtQuick.Controls 2.12
+import QtQuick.Layouts 1.12
+
+RowLayout {
+
+    id: userName
+    width: fillWidth
+    height: 54
+    anchors.topMargin: 8
+    anchors.right: parent.right
+    anchors.rightMargin: 0
+    anchors.left: parent.left
+    anchors.leftMargin: 0
+    spacing: 16
+
+    Image {
+        id: icon
+        width: 24
+        height: 24
+        Layout.leftMargin: 16
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+        fillMode: Image.PreserveAspectFit
+        source: "../assets/user-24px.svg"
+    }
+
+    TextField {
+        id: textField
+        Layout.alignment: Qt.AlignHCenter | Qt.AlignVCenter
+        font.pointSize: 16
+        font.family: "Google Sans"
+        Layout.fillWidth: true
+        placeholderText: qsTr("Username")
+    }
+}