diff --git a/app/qml/onboarding/MMSignUp.qml b/app/qml/onboarding/MMSignUp.qml
index 53696f95a..179e1e358 100644
--- a/app/qml/onboarding/MMSignUp.qml
+++ b/app/qml/onboarding/MMSignUp.qml
@@ -16,66 +16,132 @@ import "../inputs"
Page {
id: root
+ width: parent.width
+
signal backClicked
signal signInClicked
signal signUpClicked
+ signal changeServerClicked
+ signal forgotPasswordClicked
- Column {
- id: layout
-
+ // background as Drawer design
+ Rectangle {
anchors.fill: parent
+ color: __style.whiteColor
- MMHeader {
- headerTitle: qsTr("Sign Up")
- onBackClicked: root.backClicked()
+ Rectangle {
+ width: parent.width
+ height: 20 * __dp
+ color: __style.forestColor
}
- MMInput {
- title: qsTr("Username")
+ Rectangle {
+ width: parent.width
+ height: 40 * __dp
+ color: __style.whiteColor
+ radius: height / 2
}
+ }
+
+ ScrollView {
+ width: parent.width
+ height: parent.height
+
+ ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+ ScrollBar.vertical.policy: ScrollBar.AlwaysOff
+
+ Column {
+ id: mainColumn
+
+ width: root.width
+ spacing: 20 * __dp
+ padding: 20 * __dp
+
+ MMHeader {
+ width: parent.width - 2 * mainColumn.padding
+ headerTitle: qsTr("Sign Up")
+ titleFont: __style.h3
+ backColor: __style.lightGreenColor
- MMPasswordInput {
- id: password
- title: qsTr("Password")
- regexp: '(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])(?=.{6,})'
- errorMsg: qsTr("Password must contain at least 6 characters\nMinimum 1 number, uppercase and lowercase letter and special character.")
- msgShowBehaviour: MMPasswordInput.Never
- onTextEdited: {
- msgShowBehaviour = MMPasswordInput.OnNotMatchingRegex
+ onBackClicked: root.backClicked()
}
- }
- MMPasswordInput {
- id: confirmPassword
- title: qsTr("Confirm Password")
- errorMsg: qsTr("Passwords do not match")
- onTextEdited: {
- if (password.text === confirmPassword.text)
- msgShowBehaviour = MMPasswordInput.Never
- else
- msgShowBehaviour = MMPasswordInput.Always
+ Item { width: 1; height: 1 }
+
+ MMInputEditor {
+ width: parent.width - 2 * mainColumn.padding
+ title: qsTr("Username")
+ bgColor: __style.lightGreenColor
}
- }
- MMCheckBox {
- // TODO external links
- small: false
- text: qsTr("I accept the terms and Conditions and Privacy Policy")
- }
+ MMInputEditor {
+ width: parent.width - 2 * mainColumn.padding
+ title: qsTr("Email address")
+ bgColor: __style.lightGreenColor
+ }
- MMButton {
- text: qsTr("Sign up")
+ MMPasswordEditor {
+ width: parent.width - 2 * mainColumn.padding
+ title: qsTr("Password")
+ bgColor: __style.lightGreenColor
+ }
- onClicked: root.signUpClicked()
- }
+ MMPasswordEditor {
+ width: parent.width - 2 * mainColumn.padding
+ title: qsTr("Confirm password")
+ bgColor: __style.lightGreenColor
+ }
- MMHlineText {
- title: qsTr("Already have an account?")
- }
- MMLinkButton {
- text: qsTr("Sign in")
+ Row {
+ width: parent.width
+ spacing: 10 * __dp
- onClicked: root.signInClicked()
+ MMCheckBox {
+ id: checkbox
+
+ width: 24 * __dp
+ anchors.verticalCenter: parent.verticalCenter
+ }
+
+ Text {
+ width: parent.width - checkbox.width - parent.spacing - 2 * mainColumn.padding
+ anchors.verticalCenter: parent.verticalCenter
+
+ text: qsTr("I accept the Mergin Terms and Conditions and Privacy Policy")
+ font: __style.p5
+ color: __style.nightColor
+ linkColor: __style.forestColor
+ wrapMode: Text.WordWrap
+ lineHeight: 1.5
+
+ onLinkActivated: function(link) {
+ Qt.openUrlExternally(link)
+ }
+ }
+ }
+
+ Item { width: 1; height: 1 }
+
+ MMButton {
+ width: parent.width - 2 * mainColumn.padding
+ text: qsTr("Sign up")
+
+ onClicked: root.signUpClicked()
+ }
+
+ Item { width: 1; height: 1 }
+
+ MMHlineText {
+ width: parent.width - 2 * mainColumn.padding
+ title: qsTr("Already have an account?")
+ }
+
+ MMLinkButton {
+ width: parent.width - 2 * mainColumn.padding
+ text: qsTr("Sign in")
+
+ onClicked: root.signUpClicked()
+ }
}
}
}
diff --git a/gallery/qml.qrc b/gallery/qml.qrc
index 2ceee73be..63e48064a 100644
--- a/gallery/qml.qrc
+++ b/gallery/qml.qrc
@@ -69,6 +69,5 @@
../app/qml/components/MMBackButton.qml
../app/qml/components/MMIconCheckBoxHorizontal.qml
../app/qml/components/MMIconCheckBoxVertical.qml
- qml/pages/LoginPage.qml
diff --git a/gallery/qml/Main.qml b/gallery/qml/Main.qml
index d1a4b31cb..ecabb9d3b 100644
--- a/gallery/qml/Main.qml
+++ b/gallery/qml/Main.qml
@@ -169,10 +169,6 @@ ApplicationWindow {
title: "Onboarding"
source: "OnboardingPage.qml"
}
- ListElement {
- title: "Login page"
- source: "LoginPage.qml"
- }
}
ScrollIndicator.vertical: ScrollIndicator {}
diff --git a/gallery/qml/pages/LoginPage.qml b/gallery/qml/pages/LoginPage.qml
deleted file mode 100644
index 9e428f594..000000000
--- a/gallery/qml/pages/LoginPage.qml
+++ /dev/null
@@ -1,21 +0,0 @@
-/***************************************************************************
- * *
- * This program is free software; you can redistribute it and/or modify *
- * it under the terms of the GNU General Public License as published by *
- * the Free Software Foundation; either version 2 of the License, or *
- * (at your option) any later version. *
- * *
- ***************************************************************************/
-
-import QtQuick
-import QtQuick.Controls
-import QtQuick.Controls.Basic
-
-import "../../app/qml/onboarding"
-
-MMLogin {
- onBackClicked: console.log("Back button clicked")
- onSignInClicked: console.log("Sign in clicked")
- onSignUpClicked: console.log("Sign up clicked")
- onChangeServerClicked: console.log("Change server clicked")
-}
diff --git a/gallery/qml/pages/OnboardingPage.qml b/gallery/qml/pages/OnboardingPage.qml
index 510c617f8..ddcfbde74 100644
--- a/gallery/qml/pages/OnboardingPage.qml
+++ b/gallery/qml/pages/OnboardingPage.qml
@@ -17,109 +17,121 @@ Page {
id: pane
function hideAll() {
- acceptInvitation.visible = false
- createWorkspace = false
- howYouFoundUs = false
- login = false
- signUp = false
- whichIndustry = false
+ acceptInvitation.visible = false
+ createWorkspace = false
+ howYouFoundUs = false
+ login = false
+ signUp = false
+ whichIndustry = false
}
Column {
id: layout
+ padding: 20
+ spacing: 10
- Label {
+ Text {
text: "Onboarding (Login, Sign Up, ...)"
+ color: "green"
}
Button {
onClicked: {
- login.visible = true
+ login.visible = true
}
text: "Login"
}
Button {
onClicked: {
- signUp.visible = true
+ signUp.visible = true
}
text: "Sign Up"
}
Button {
onClicked: {
- createWorkspace.visible = true
+ createWorkspace.visible = true
}
text: "Create Workspace"
}
Button {
onClicked: {
- acceptInvitation.visible = true
+ acceptInvitation.visible = true
}
text: "Accept Invitation"
}
Button {
onClicked: {
- howYouFoundUs.visible = true
+ howYouFoundUs.visible = true
}
text: "How You Found Us"
}
Button {
onClicked: {
- whichIndustry.visible = true
+ whichIndustry.visible = true
}
text: "Which Industry"
}
}
- MMAcceptInvitation {
- id: acceptInvitation
- anchors.fill: parent
- visible: false
+ MMLogin {
+ id: login
- onBackClicked: {visible=false}
+ anchors.fill: parent
+ visible: false
+
+ onSignInClicked: console.log("Sign in clicked")
+ onSignUpClicked: console.log("Sign up clicked")
+ onChangeServerClicked: console.log("Change server clicked")
+ onBackClicked: visible = false
}
- MMCreateWorkspace {
- id: createWorkspace
- anchors.fill: parent
- visible: false
+ MMSignUp {
+ id: signUp
+
+ anchors.fill: parent
+ visible: false
- onContinueClicked: {visible=false}
+ onSignInClicked: console.log("Sign in clicked")
+ onSignUpClicked: console.log("Sign up clicked")
+ onBackClicked: visible = false
}
- MMHowYouFoundUs {
- id: howYouFoundUs
- anchors.fill: parent
- visible: false
- onBackClicked: {visible=false}
+
+ MMAcceptInvitation {
+ id: acceptInvitation
+ anchors.fill: parent
+ visible: false
+
+ onBackClicked: {visible=false}
}
- MMLogin {
- id: login
- anchors.fill: parent
- visible: false
+ MMCreateWorkspace {
+ id: createWorkspace
+ anchors.fill: parent
+ visible: false
- onBackClicked: {visible=false}
+ onContinueClicked: {visible=false}
}
- MMSignUp {
- id: signUp
- anchors.fill: parent
- visible: false
+ MMHowYouFoundUs {
+ id: howYouFoundUs
+ anchors.fill: parent
+ visible: false
- onBackClicked: {visible=false}
+ onBackClicked: {visible=false}
}
MMWhichIndustry {
- id: whichIndustry
- anchors.fill: parent
- visible: false
+ id: whichIndustry
+ anchors.fill: parent
+ visible: false
- onBackClicked: {visible=false}
+ onBackClicked: {visible=false}
}
}