From e2dabc1e8497cd016244eb318a2cd653955e2004 Mon Sep 17 00:00:00 2001 From: johndoe6345789 Date: Thu, 19 Mar 2026 08:44:52 +0000 Subject: [PATCH] =?UTF-8?q?feat(qt6):=20redesign=20login=20page=20?= =?UTF-8?q?=E2=80=94=20MD3=20card,=20quick=20credential=20buttons,=20cente?= =?UTF-8?q?red=20layout?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Remove CCard (was causing anchors.fill sizing issues) - Clean tonal surface container with radius 16 - Username/password fields with CTextField (no floating label weirdness) - 2x2 quick access grid with one-click login (User/Admin/God/Super God) - Level badges with accent colors matching frontpage - Back to home button - Centered text throughout Co-Authored-By: Claude Opus 4.6 (1M context) --- frontends/qt6/LoginView.qml | 173 +++++++++++++++++++++++++++++------- 1 file changed, 142 insertions(+), 31 deletions(-) diff --git a/frontends/qt6/LoginView.qml b/frontends/qt6/LoginView.qml index a2c958e7f..ee1a5c97f 100644 --- a/frontends/qt6/LoginView.qml +++ b/frontends/qt6/LoginView.qml @@ -10,49 +10,66 @@ Rectangle { property string errorMessage: "" property bool loggingIn: false + property bool isDark: Theme.mode === "dark" - DBALProvider { - id: dbal - } + DBALProvider { id: dbal } + + readonly property color accentBlue: "#6366F1" + readonly property color accentCyan: "#06B6D4" + readonly property color accentViolet: "#8B5CF6" + readonly property color accentRose: "#F43F5E" + readonly property color surfaceContainerHigh: isDark ? Qt.rgba(1, 1, 1, 0.08) : Qt.rgba(0.31, 0.31, 0.44, 0.10) ColumnLayout { anchors.centerIn: parent - width: 400 - spacing: 20 + width: 420 + spacing: 24 - CCard { + // Title + CText { + text: "Sign in to MetaBuilder" + font.pixelSize: 26 + font.weight: Font.Bold Layout.fillWidth: true + horizontalAlignment: Text.AlignHCenter + } + + CText { + text: "Enter your credentials to access higher levels" + font.pixelSize: 14 + color: Theme.textSecondary + Layout.fillWidth: true + horizontalAlignment: Text.AlignHCenter + } + + // Login card + Rectangle { + Layout.fillWidth: true + implicitHeight: formCol.implicitHeight + 48 + radius: 16 + color: surfaceContainerHigh + border.color: isDark ? Qt.rgba(1, 1, 1, 0.06) : Qt.rgba(0, 0, 0, 0.08) + border.width: 1 ColumnLayout { - anchors.fill: parent - anchors.margins: 32 + id: formCol + anchors.left: parent.left + anchors.right: parent.right + anchors.top: parent.top + anchors.margins: 24 spacing: 16 - CText { - variant: "h3" - text: "Sign in to MetaBuilder" - Layout.alignment: Qt.AlignHCenter - } - - CText { - variant: "body2" - text: "Enter your credentials to access higher levels" - Layout.alignment: Qt.AlignHCenter - } - CTextField { id: usernameField Layout.fillWidth: true - label: "Username" - placeholderText: "demo, admin, god, or super" + placeholderText: "Username" enabled: !loggingIn } CTextField { id: passwordField Layout.fillWidth: true - label: "Password" - placeholderText: "Enter password" + placeholderText: "Password" echoMode: TextInput.Password enabled: !loggingIn onAccepted: doLogin() @@ -72,18 +89,113 @@ Rectangle { enabled: !loggingIn onClicked: doLogin() } + } + } - CDivider { Layout.fillWidth: true } + // Quick login credentials + CText { + text: "Quick Access" + font.pixelSize: 14 + font.weight: Font.DemiBold + color: Theme.textSecondary + Layout.fillWidth: true + horizontalAlignment: Text.AlignHCenter + } - CText { - variant: "caption" - text: "Default accounts: demo/demo (L2) \u00b7 admin/admin (L3) \u00b7 god/god123 (L4) \u00b7 super/super123 (L5)" - wrapMode: Text.Wrap + GridLayout { + Layout.fillWidth: true + columns: 2 + columnSpacing: 10 + rowSpacing: 10 + + Repeater { + model: [ + { user: "demo", pass: "demo", label: "User", level: 2, accent: accentBlue }, + { user: "admin", pass: "admin", label: "Admin", level: 3, accent: accentCyan }, + { user: "god", pass: "god123", label: "God", level: 4, accent: accentViolet }, + { user: "super", pass: "super123", label: "Super God", level: 5, accent: accentRose } + ] + delegate: Rectangle { Layout.fillWidth: true - horizontalAlignment: Text.AlignHCenter + Layout.preferredHeight: 52 + radius: 12 + color: qcMA.containsMouse ? Qt.rgba(modelData.accent.r, modelData.accent.g, modelData.accent.b, 0.08) : surfaceContainerHigh + border.color: qcMA.containsMouse ? modelData.accent : (isDark ? Qt.rgba(1, 1, 1, 0.06) : Qt.rgba(0, 0, 0, 0.08)) + border.width: 1 + + Behavior on color { ColorAnimation { duration: 150 } } + Behavior on border.color { ColorAnimation { duration: 150 } } + + MouseArea { + id: qcMA + anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onClicked: { + usernameField.text = modelData.user + passwordField.text = modelData.pass + appWindow.login(modelData.user, modelData.pass) + } + } + + RowLayout { + anchors.fill: parent + anchors.leftMargin: 12 + anchors.rightMargin: 12 + spacing: 10 + + Rectangle { + width: 28 + height: 28 + radius: 8 + color: Qt.rgba(modelData.accent.r, modelData.accent.g, modelData.accent.b, isDark ? 0.2 : 0.15) + + CText { + anchors.centerIn: parent + text: "L" + modelData.level + font.pixelSize: 11 + font.weight: Font.Bold + font.family: "monospace" + color: modelData.accent + } + } + + ColumnLayout { + Layout.fillWidth: true + spacing: 1 + + CText { + text: modelData.label + font.pixelSize: 14 + font.weight: Font.DemiBold + } + CText { + text: modelData.user + " / " + modelData.pass + font.pixelSize: 11 + font.family: "monospace" + color: Theme.textSecondary + } + } + + CText { + text: "\u2192" + font.pixelSize: 16 + color: Theme.textSecondary + opacity: qcMA.containsMouse ? 1.0 : 0.3 + Behavior on opacity { NumberAnimation { duration: 150 } } + } + } } } } + + CButton { + text: "\u2190 Back to home" + variant: "text" + size: "sm" + Layout.alignment: Qt.AlignHCenter + onClicked: appWindow.currentView = "frontpage" + } } function loginWithDBAL(username, password) { @@ -101,7 +213,6 @@ Rectangle { appWindow.currentView = "dashboard" loggingIn = false } else { - // DBAL failed — fall back to local seed user auth loggingIn = false if (appWindow.login(username, password)) { errorMessage = ""