Updated Signup page

MerginMaps · Dec 12, 2023 · e645246 · e645246 · inputapp-bot · Dec 12, 2023
1 parent bfd5d98
commit e645246
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 110 deletions.
diff --git 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 <a href='https://merginmaps.com'>Terms and Conditions and Privacy Policy</a>")
+          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
@@ -69,6 +69,5 @@
         <file>../app/qml/components/MMBackButton.qml</file>
         <file>../app/qml/components/MMIconCheckBoxHorizontal.qml</file>
         <file>../app/qml/components/MMIconCheckBoxVertical.qml</file>
-        <file>qml/pages/LoginPage.qml</file>
     </qresource>
 </RCC>
diff --git 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
diff --git 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}
   }
 }