feat: add password overlay for network popout + redesign

2026-07-09 17:33:13 +02:00
parent f9eeb793db
commit a64eadd14a
13 changed files with 665 additions and 123 deletions
@@ -0,0 +1,102 @@
+import Quickshell
+import QtQuick
+import QtQuick.Layouts
+import ZShell.Components
+import qs.Config
+import qs.Components
+import qs.Helpers
+
+CustomClippingRect {
+	id: root
+
+	required property var network
+
+	color: DynamicColors.palette.m3surfaceContainer
+	implicitHeight: layout.implicitHeight + layout.anchors.margins * 2
+	implicitWidth: layout.implicitWidth + layout.anchors.margins * 2
+	radius: Appearance.rounding.large
+
+	ColumnLayout {
+		id: layout
+
+		anchors.fill: parent
+		anchors.margins: Appearance.padding.extraLarge
+		spacing: Appearance.spacing.normal
+
+		MaterialIcon {
+			Layout.alignment: Qt.AlignHCenter
+			font.pointSize: Appearance.font.size.extraLarge * 2
+			text: "lock"
+		}
+
+		CustomText {
+			Layout.alignment: Qt.AlignHCenter
+			color: DynamicColors.palette.m3onSurfaceVariant
+			text: qsTr("Connect to %1").arg(root.network.name)
+		}
+
+		CustomTextField {
+			id: passwordField
+
+			Layout.fillWidth: true
+			Layout.preferredWidth: 400
+			echoMode: CustomTextField.Password
+			errorText: qsTr("Failed to connect with given password")
+			isError: Network.failedNetwork
+			leadingIcon: "lock"
+			passwordMaskDelay: 5000
+			placeholderText: qsTr("Input password")
+		}
+
+		ButtonRow {
+			id: buttonRow
+
+			Layout.fillWidth: true
+			spacing: Appearance.spacing.smaller
+
+			IconTextButton {
+				fillWidth: true
+				font.pointSize: Appearance.font.size.normal
+				icon: "close"
+				inactiveColor: DynamicColors.layer(DynamicColors.palette.m3surfaceContainerHighest, 2)
+				inactiveOnColor: DynamicColors.palette.m3onSurfaceVariant
+				isRound: true
+				isToggle: false
+				shapeMorph: true
+				text: "Cancel"
+
+				onClicked: PopupManager.requestClose()
+			}
+
+			IconTextButton {
+				fillWidth: true
+				font.pointSize: Appearance.font.size.normal
+				icon: Network.connectingNetwork ? "" : "check"
+				inactiveColor: Network.connectingNetwork ? DynamicColors.palette.m3primaryContainer : Network.failedNetwork ? DynamicColors.palette.m3error : DynamicColors.palette.m3primary
+				inactiveOnColor: Network.connectingNetwork ? DynamicColors.palette.m3onPrimaryContainer : Network.failedNetwork ? DynamicColors.palette.m3onError : DynamicColors.palette.m3onPrimary
+				isRound: true
+				isToggle: false
+				shapeMorph: true
+				text: Network.connectingNetwork ? "" : "Apply"
+
+				onClicked: Network.requestConnect(root.network, passwordField.text)
+
+				Loader {
+					active: opacity > 0
+					anchors.centerIn: parent
+					opacity: Network.connectingNetwork ? 1 : 0
+
+					Behavior on opacity {
+						Anim {
+						}
+					}
+					sourceComponent: CircularIndicator {
+						bgColor: "transparent"
+						implicitSize: buttonRow.height - Appearance.padding.normal
+						running: true
+					}
+				}
+			}
+		}
+	}
+}