Remake: sign in page

CURA-6132

resources/qml/Account/AccountDetails.qml

@@ -1,8 +1,8 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.7
-import QtQuick.Controls 2.1
+import QtQuick 2.10
+import QtQuick.Controls 2.3
 
 import UM 1.4 as UM
 import Cura 1.1 as Cura
@@ -16,38 +16,6 @@ Column
     padding: UM.Theme.getSize("wide_margin").height
     spacing: UM.Theme.getSize("wide_margin").height
 
-    AvatarImage
-    {
-        id: avatar
-        width: UM.Theme.getSize("avatar_image").width
-        height: UM.Theme.getSize("avatar_image").height
-        anchors.horizontalCenter: parent.horizontalCenter
-        source:
-        {
-            if(loggedIn)
-            {
-                if(profileImage)
-                {
-                    return profileImage
-                }
-                return UM.Theme.getImage("avatar_no_user")
-            }
-            return UM.Theme.getImage("avatar_no_user")
-        }
-        outlineColor: loggedIn ? UM.Theme.getColor("account_widget_outline_active") : UM.Theme.getColor("lining")
-    }
-
-    Label
-    {
-        id: information
-        anchors.horizontalCenter: parent.horizontalCenter
-        horizontalAlignment: Text.AlignHCenter
-        renderType: Text.NativeRendering
-        text: loggedIn ? profile["username"] : catalog.i18nc("@label", "Please log in or create an account to\nenjoy all features of Ultimaker Cura.")
-        font: loggedIn ? UM.Theme.getFont("large_bold") : UM.Theme.getFont("default")
-        color: UM.Theme.getColor("text")
-    }
-
     Loader
     {
         id: accountOperations

resources/qml/Account/GeneralOperations.qml

@@ -1,31 +1,87 @@
 // Copyright (c) 2018 Ultimaker B.V.
 // Cura is released under the terms of the LGPLv3 or higher.
 
-import QtQuick 2.2
-import QtQuick.Controls 1.1
+import QtQuick 2.10
+import QtQuick.Controls 2.3
 
 import UM 1.4 as UM
 import Cura 1.1 as Cura
 
-Row
+Column
 {
     spacing: UM.Theme.getSize("default_margin").width
 
-    Cura.SecondaryButton
+    Image
+    {
+        id: machinesImage
+        anchors.horizontalCenter: parent.horizontalCenter
+        source: UM.Theme.getIcon("sign_in_to_cloud")
+        horizontalAlignment: Image.AlignHCenter
+        verticalAlignment: Image.AlignVCenter
+    }
+
+    Label
+    {
+        id: title
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
+        renderType: Text.NativeRendering
+        text: catalog.i18nc("@label", "Ultimaker Cloud")
+        font: UM.Theme.getFont("large_bold")
+        color: UM.Theme.getColor("text")
+    }
+
+    Label
+    {
+        id: generalInformation
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
+        renderType: Text.NativeRendering
+        text: catalog.i18nc("@label", "Enjoy a more powerful 3D printing experience.")
+        font: UM.Theme.getFont("default")
+        color: UM.Theme.getColor("text")
+    }
+
+    Label
+    {
+        id: generalInformationPoints
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignLeft
+        renderType: Text.NativeRendering
+        text: {
+            var t = " - Send prints to your Ultimaker printer from anywhere\n"
+                  + " - Access your Ultimaker Cura Settings worldwide\n"
+                  + " - Enhance your workflow with advanced material profiles"
+            return catalog.i18nc("@label", t)
+        }
+        lineHeight: 1.4
+        font: UM.Theme.getFont("default")
+        color: UM.Theme.getColor("text")
+    }
+
+    // placeholder
+    Label
     {
+        text: " "
+    }
+
+    Cura.PrimaryButton
+    {
+        anchors.horizontalCenter: parent.horizontalCenter
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height
-        text: catalog.i18nc("@button", "Create account")
-        onClicked: Qt.openUrlExternally(CuraApplication.ultimakerCloudAccountRootUrl + "/app/create")
+        text: catalog.i18nc("@button", "Sign in")
+        onClicked: Cura.API.account.login()
         fixedWidthMode: true
     }
 
-    Cura.PrimaryButton
+    Cura.SecondaryButton
     {
+        anchors.horizontalCenter: parent.horizontalCenter
         width: UM.Theme.getSize("account_button").width
         height: UM.Theme.getSize("account_button").height
-        text: catalog.i18nc("@button", "Login")
-        onClicked: Cura.API.account.login()
+        text: catalog.i18nc("@button", "Create account")
+        onClicked: Qt.openUrlExternally(CuraApplication.ultimakerCloudAccountRootUrl + "/app/create")
         fixedWidthMode: true
     }
 }

resources/themes/cura-light/icons/sign_in_to_cloud.svg

@@ -0,0 +1,36 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="78px" height="58px" viewBox="0 0 78 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+    <title>Group-cloud</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Sign-in-/Message-restyle" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Sign-in-open" transform="translate(-1013.000000, -128.000000)">
+            <g id="Group-cloud" transform="translate(1013.000000, 128.000000)">
+                <g id="Icon/-group-printer/-connected">
+                    <g id="printer-group">
+                        <g id="Group-Copy" transform="translate(0.000000, 2.122786)" fill="#08073F" fill-rule="nonzero">
+                            <g id="UM3">
+                                <path d="M34.2044094,0.202170085 L0.287432013,0.202170085 C0.164246864,0.202170085 0.0410617159,0.323472136 0.0410617159,0.444774187 L0.0410617159,38.5740521 C0.0410617159,38.6953542 0.164246864,38.8166563 0.287432013,38.8166563 L2.50476467,38.8166563 C2.99750527,38.8166563 3.49024586,38.7357883 3.73661615,38.3314482 L3.98298644,38.088844 C4.31148018,37.8058059 4.76315904,37.6440697 5.21483793,37.6036358 L29.2770035,37.6036358 C29.7697441,37.6036358 30.2624847,37.6845038 30.508855,38.088844 L30.7552253,38.3314482 C31.0837189,38.6144862 31.5353978,38.7762222 31.9870768,38.8166563 L34.2044094,38.8166563 C34.3275946,38.8166563 34.4507797,38.6953542 34.4507797,38.5740521 L34.4507797,0.444774187 C34.4507797,0.323472136 34.3275946,0.202170085 34.2044094,0.202170085 Z M30.6731017,29.4763984 C30.6731017,30.6085509 29.7286825,31.5385333 28.5789543,31.5385333 L5.83076366,31.5385333 C4.68103562,31.5385333 3.73661615,30.6085509 3.73661615,29.4763984 L3.73661615,4.44774187 C3.73661615,4.0434017 4.06510989,3.67949555 4.51678875,3.67949555 L29.9339908,3.67949555 C30.3446081,3.67949555 30.7141636,4.00296768 30.7141636,4.44774187 L30.7141636,29.4763984 L30.6731017,29.4763984 Z" id="Shape"></path>
+                            </g>
+                        </g>
+                        <g id="Group-Copy-4" transform="translate(43.114802, 2.122786)" fill="#08073F" fill-rule="nonzero">
+                            <g id="UM3">
+                                <path d="M34.2044094,0.202170085 L0.287432013,0.202170085 C0.164246864,0.202170085 0.0410617159,0.323472136 0.0410617159,0.444774187 L0.0410617159,38.5740521 C0.0410617159,38.6953542 0.164246864,38.8166563 0.287432013,38.8166563 L2.50476467,38.8166563 C2.99750527,38.8166563 3.49024586,38.7357883 3.73661615,38.3314482 L3.98298644,38.088844 C4.31148018,37.8058059 4.76315904,37.6440697 5.21483793,37.6036358 L29.2770035,37.6036358 C29.7697441,37.6036358 30.2624847,37.6845038 30.508855,38.088844 L30.7552253,38.3314482 C31.0837189,38.6144862 31.5353978,38.7762222 31.9870768,38.8166563 L34.2044094,38.8166563 C34.3275946,38.8166563 34.4507797,38.6953542 34.4507797,38.5740521 L34.4507797,0.444774187 C34.4507797,0.323472136 34.3275946,0.202170085 34.2044094,0.202170085 Z M30.6731017,29.4763984 C30.6731017,30.6085509 29.7286825,31.5385333 28.5789543,31.5385333 L5.83076366,31.5385333 C4.68103562,31.5385333 3.73661615,30.6085509 3.73661615,29.4763984 L3.73661615,4.44774187 C3.73661615,4.0434017 4.06510989,3.67949555 4.51678875,3.67949555 L29.9339908,3.67949555 C30.3446081,3.67949555 30.7141636,4.00296768 30.7141636,4.44774187 L30.7141636,29.4763984 L30.6731017,29.4763984 Z" id="Shape"></path>
+                            </g>
+                        </g>
+                        <g id="Group-Copy-2" transform="translate(19.401661, 0.000000)">
+                            <rect id="Rectangle" fill="#FFFFFF" x="4.31148018" y="0" width="30.1803611" height="36.0873602"></rect>
+                            <g id="UM3" fill="#08073F" fill-rule="nonzero">
+                                <path d="M38.4799606,0.227441345 L0.323361012,0.227441345 C0.184777722,0.227441345 0.0461944303,0.363906153 0.0461944303,0.50037096 L0.0461944303,43.3958088 C0.0461944303,43.5322734 0.184777722,43.6687383 0.323361012,43.6687383 L2.81786025,43.6687383 C3.37219342,43.6687383 3.92652659,43.5777618 4.20369316,43.122879 L4.48085976,42.8499495 C4.8504152,42.5315316 5.35855393,42.3495785 5.86669267,42.3040902 L32.936629,42.3040902 C33.4909621,42.3040902 34.0452952,42.3950669 34.3224619,42.8499495 L34.5996285,43.122879 C34.9691838,43.4412969 35.4773225,43.62325 35.9854612,43.6687383 L38.4799606,43.6687383 C38.6185438,43.6687383 38.7571272,43.5322734 38.7571272,43.3958088 L38.7571272,0.50037096 C38.7571272,0.363906153 38.6185438,0.227441345 38.4799606,0.227441345 Z M34.5072395,33.1609482 C34.5072395,34.4346197 33.4447677,35.4808499 32.1513237,35.4808499 L6.55960911,35.4808499 C5.26616507,35.4808499 4.20369316,34.4346197 4.20369316,33.1609482 L4.20369316,5.0037096 C4.20369316,4.54882691 4.57324863,4.13943248 5.08138736,4.13943248 L33.6757398,4.13943248 C34.1376842,4.13943248 34.5534339,4.50333865 34.5534339,5.0037096 L34.5534339,33.1609482 L34.5072395,33.1609482 Z" id="Shape"></path>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+                <g id="Group" transform="translate(40.578299, 25.035294)">
+                    <ellipse id="Oval-Copy" stroke="#FFFFFF" stroke-width="3.5636363" fill="#3282FF" cx="15.6684507" cy="15.5040369" rx="15.5251417" ry="15.3630911"></ellipse>
+                    <path d="M22.3562041,13.3374471 C22.1651254,11.6632641 20.7320354,10.3830065 19.0123274,10.3830065 C18.5346308,10.3830065 18.1524734,10.4814879 17.7703161,10.6784506 C16.9104621,9.29971165 15.3818327,8.41337947 13.7576641,8.41337947 C11.0825627,8.41337947 8.98069738,10.5799693 8.98069738,13.3374471 C8.98069738,13.3374471 8.98069738,13.3374471 8.98069738,13.4359285 C7.3565287,13.6328912 6.11451736,15.1101115 6.11451736,16.7842945 C6.11451736,18.6554402 7.64314671,20.2311419 9.45839405,20.2311419 C10.8914841,20.2311419 20.1587994,20.2311419 21.8785074,20.2311419 C23.6937548,20.2311419 25.2223841,18.6554402 25.2223841,16.7842945 C25.2223841,15.0116302 23.9803728,13.6328912 22.3562041,13.3374471 Z" id="Path" fill="#FFFFFF"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

resources/themes/cura-light/theme.json

@@ -445,7 +445,7 @@
 
         "stage_menu": [0.0, 4.0],
 
-        "account_button": [12, 3],
+        "account_button": [12, 2.5],
 
         "print_setup_widget": [38.0, 30.0],
         "print_setup_mode_toggle": [0.0, 2.0],