modals/auth: add show password option

fixes #1311
2026-01-24 21:42:51 -05:00 · 2026-01-09 22:19:50 -05:00
parent e37135f80d
commit c60cd3a341
3 changed files with 144 additions and 173 deletions
--- a/quickshell/Modals/PolkitAuthModal.qml
+++ b/quickshell/Modals/PolkitAuthModal.qml
@@ -11,7 +11,6 @@ FloatingWindow {
    property var currentFlow: PolkitService.agent?.flow
    property bool isLoading: false
    readonly property int inputFieldHeight: Theme.fontSizeMedium + Theme.spacingL * 2
-    property int calculatedHeight: Math.max(240, headerRow.implicitHeight + mainColumn.implicitHeight + Theme.spacingM * 3)

    function focusPasswordField() {
        passwordField.forceActiveFocus();
@@ -37,15 +36,19 @@ FloatingWindow {
    }

    function cancelAuth() {
-        if (!currentFlow || isLoading)
+        if (isLoading)
            return;
-        currentFlow.cancelAuthenticationRequest();
+        if (currentFlow) {
+            currentFlow.cancelAuthenticationRequest();
+            return;
+        }
+        hide();
    }

    objectName: "polkitAuthModal"
    title: I18n.tr("Authentication")
-    minimumSize: Qt.size(420, calculatedHeight)
-    maximumSize: Qt.size(420, calculatedHeight)
+    minimumSize: Qt.size(460, 220)
+    maximumSize: Qt.size(460, 220)
    color: Theme.surfaceContainer
    visible: false

@@ -108,29 +111,24 @@ FloatingWindow {
            event.accepted = true;
        }

-        MouseArea {
-            anchors.left: parent.left
-            anchors.right: parent.right
-            anchors.top: parent.top
-            height: headerRow.height + Theme.spacingM
-            onPressed: windowControls.tryStartMove()
-            onDoubleClicked: windowControls.tryToggleMaximize()
-        }
-
        Item {
-            id: headerRow
+            id: headerSection
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.top: parent.top
-            anchors.leftMargin: Theme.spacingM
-            anchors.rightMargin: Theme.spacingM
-            anchors.topMargin: Theme.spacingM
-            height: Math.max(titleColumn.height, buttonRow.height)
+            anchors.margins: Theme.spacingM
+            height: Math.max(titleColumn.implicitHeight, windowButtonRow.implicitHeight)
+
+            MouseArea {
+                anchors.fill: parent
+                onPressed: windowControls.tryStartMove()
+                onDoubleClicked: windowControls.tryToggleMaximize()
+            }

            Column {
                id: titleColumn
                anchors.left: parent.left
-                anchors.right: buttonRow.left
+                anchors.right: windowButtonRow.left
                anchors.rightMargin: Theme.spacingM
                spacing: Theme.spacingXS

@@ -141,33 +139,34 @@ FloatingWindow {
                    font.weight: Font.Medium
                }

-                Column {
+                StyledText {
+                    text: currentFlow?.message ?? ""
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: Theme.surfaceTextMedium
                    width: parent.width
-                    spacing: Theme.spacingXS
+                    wrapMode: Text.Wrap
+                    maximumLineCount: 2
+                    elide: Text.ElideRight
+                    visible: text !== ""
+                }

-                    StyledText {
-                        text: currentFlow?.message ?? ""
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.surfaceTextMedium
-                        width: parent.width
-                        wrapMode: Text.Wrap
-                    }
-
-                    StyledText {
-                        visible: (currentFlow?.supplementaryMessage ?? "") !== ""
-                        text: currentFlow?.supplementaryMessage ?? ""
-                        font.pixelSize: Theme.fontSizeSmall
-                        color: (currentFlow?.supplementaryIsError ?? false) ? Theme.error : Theme.surfaceTextMedium
-                        width: parent.width
-                        wrapMode: Text.Wrap
-                        opacity: (currentFlow?.supplementaryIsError ?? false) ? 1 : 0.8
-                    }
+                StyledText {
+                    text: currentFlow?.supplementaryMessage ?? ""
+                    font.pixelSize: Theme.fontSizeSmall
+                    color: (currentFlow?.supplementaryIsError ?? false) ? Theme.error : Theme.surfaceTextMedium
+                    width: parent.width
+                    wrapMode: Text.Wrap
+                    maximumLineCount: 2
+                    elide: Text.ElideRight
+                    opacity: (currentFlow?.supplementaryIsError ?? false) ? 1 : 0.8
+                    visible: text !== ""
                }
            }

            Row {
-                id: buttonRow
+                id: windowButtonRow
                anchors.right: parent.right
+                anchors.top: parent.top
                spacing: Theme.spacingXS

                DankActionButton {
@@ -190,21 +189,19 @@ FloatingWindow {
        }

        Column {
-            id: mainColumn
+            id: bottomSection
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
-            anchors.leftMargin: Theme.spacingM
-            anchors.rightMargin: Theme.spacingM
-            anchors.bottomMargin: Theme.spacingM
-            spacing: Theme.spacingM
+            anchors.margins: Theme.spacingM
+            spacing: Theme.spacingS

            StyledText {
                text: currentFlow?.inputPrompt ?? ""
                font.pixelSize: Theme.fontSizeMedium
                color: Theme.surfaceText
                width: parent.width
-                visible: (currentFlow?.inputPrompt ?? "") !== ""
+                visible: text !== ""
            }

            Rectangle {
@@ -229,7 +226,8 @@ FloatingWindow {
                    font.pixelSize: Theme.fontSizeMedium
                    textColor: Theme.surfaceText
                    text: passwordInput
-                    echoMode: (currentFlow?.responseVisible ?? false) ? TextInput.Normal : TextInput.Password
+                    showPasswordToggle: !(currentFlow?.responseVisible ?? false)
+                    echoMode: (currentFlow?.responseVisible ?? false) || passwordVisible ? TextInput.Normal : TextInput.Password
                    placeholderText: ""
                    backgroundColor: "transparent"
                    enabled: !isLoading
@@ -238,38 +236,17 @@ FloatingWindow {
                }
            }

-            Item {
+            StyledText {
+                text: I18n.tr("Authentication failed, please try again")
+                font.pixelSize: Theme.fontSizeSmall
+                color: Theme.error
                width: parent.width
-                height: (currentFlow?.failed ?? false) ? failedText.implicitHeight : 0
-                visible: height > 0
-
-                StyledText {
-                    id: failedText
-                    text: I18n.tr("Authentication failed, please try again")
-                    font.pixelSize: Theme.fontSizeSmall
-                    color: Theme.error
-                    width: parent.width
-                    opacity: (currentFlow?.failed ?? false) ? 1 : 0
-
-                    Behavior on opacity {
-                        NumberAnimation {
-                            duration: Theme.shortDuration
-                            easing.type: Theme.standardEasing
-                        }
-                    }
-                }
-
-                Behavior on height {
-                    NumberAnimation {
-                        duration: Theme.shortDuration
-                        easing.type: Theme.standardEasing
-                    }
-                }
+                visible: currentFlow?.failed ?? false
            }

            Item {
                width: parent.width
-                height: 40
+                height: 36

                Row {
                    anchors.right: parent.right
--- a/quickshell/Modals/WifiPasswordModal.qml
+++ b/quickshell/Modals/WifiPasswordModal.qml
@@ -33,7 +33,6 @@ FloatingWindow {
    readonly property bool showPasswordField: fieldsInfo.length === 0
    readonly property bool showAnonField: requiresEnterprise && !isVpnPrompt
    readonly property bool showDomainField: requiresEnterprise && !isVpnPrompt
-    readonly property bool showShowPasswordCheckbox: fieldsInfo.length === 0
    readonly property bool showSavePasswordCheckbox: (isVpnPrompt || fieldsInfo.length > 0) && promptReason !== "pkcs11"

    readonly property int inputFieldHeight: Theme.fontSizeMedium + Theme.spacingL * 2
@@ -55,8 +54,6 @@ FloatingWindow {
            h += inputFieldWithSpacing;
        if (showDomainField)
            h += inputFieldWithSpacing;
-        if (showShowPasswordCheckbox)
-            h += checkboxRowHeight;
        if (showSavePasswordCheckbox)
            h += checkboxRowHeight;
        return h;
@@ -447,7 +444,8 @@ FloatingWindow {
                        anchors.fill: parent
                        font.pixelSize: Theme.fontSizeMedium
                        textColor: Theme.surfaceText
-                        echoMode: modelData.isSecret ? TextInput.Password : TextInput.Normal
+                        showPasswordToggle: modelData.isSecret
+                        echoMode: modelData.isSecret && !passwordVisible ? TextInput.Password : TextInput.Normal
                        placeholderText: getFieldLabel(modelData.name)
                        backgroundColor: "transparent"
                        enabled: root.visible
@@ -549,7 +547,8 @@ FloatingWindow {
                    font.pixelSize: Theme.fontSizeMedium
                    textColor: Theme.surfaceText
                    text: wifiPasswordInput
-                    echoMode: showPasswordCheckbox.checked ? TextInput.Normal : TextInput.Password
+                    showPasswordToggle: true
+                    echoMode: passwordVisible ? TextInput.Normal : TextInput.Password
                    placeholderText: (requiresEnterprise && !isVpnPrompt) ? I18n.tr("Password") : ""
                    backgroundColor: "transparent"
                    enabled: root.visible
@@ -628,88 +627,43 @@ FloatingWindow {
                }
            }

-            Column {
+            Row {
                spacing: Theme.spacingS
-                width: parent.width
+                visible: showSavePasswordCheckbox

-                Row {
-                    spacing: Theme.spacingS
-                    visible: showShowPasswordCheckbox
+                Rectangle {
+                    id: savePasswordCheckbox

-                    Rectangle {
-                        id: showPasswordCheckbox
+                    property bool checked: true

-                        property bool checked: false
+                    width: 20
+                    height: 20
+                    radius: 4
+                    color: checked ? Theme.primary : "transparent"
+                    border.color: checked ? Theme.primary : Theme.outlineButton
+                    border.width: 2

-                        width: 20
-                        height: 20
-                        radius: 4
-                        color: checked ? Theme.primary : "transparent"
-                        border.color: checked ? Theme.primary : Theme.outlineButton
-                        border.width: 2
-
-                        DankIcon {
-                            anchors.centerIn: parent
-                            name: "check"
-                            size: 12
-                            color: Theme.background
-                            visible: parent.checked
-                        }
-
-                        MouseArea {
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: showPasswordCheckbox.checked = !showPasswordCheckbox.checked
-                        }
+                    DankIcon {
+                        anchors.centerIn: parent
+                        name: "check"
+                        size: 12
+                        color: Theme.background
+                        visible: parent.checked
                    }

-                    StyledText {
-                        text: I18n.tr("Show password")
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.surfaceText
-                        anchors.verticalCenter: parent.verticalCenter
+                    MouseArea {
+                        anchors.fill: parent
+                        hoverEnabled: true
+                        cursorShape: Qt.PointingHandCursor
+                        onClicked: savePasswordCheckbox.checked = !savePasswordCheckbox.checked
                    }
                }

-                Row {
-                    spacing: Theme.spacingS
-                    visible: showSavePasswordCheckbox
-
-                    Rectangle {
-                        id: savePasswordCheckbox
-
-                        property bool checked: false
-
-                        width: 20
-                        height: 20
-                        radius: 4
-                        color: checked ? Theme.primary : "transparent"
-                        border.color: checked ? Theme.primary : Theme.outlineButton
-                        border.width: 2
-
-                        DankIcon {
-                            anchors.centerIn: parent
-                            name: "check"
-                            size: 12
-                            color: Theme.background
-                            visible: parent.checked
-                        }
-
-                        MouseArea {
-                            anchors.fill: parent
-                            hoverEnabled: true
-                            cursorShape: Qt.PointingHandCursor
-                            onClicked: savePasswordCheckbox.checked = !savePasswordCheckbox.checked
-                        }
-                    }
-
-                    StyledText {
-                        text: I18n.tr("Save password")
-                        font.pixelSize: Theme.fontSizeMedium
-                        color: Theme.surfaceText
-                        anchors.verticalCenter: parent.verticalCenter
-                    }
+                StyledText {
+                    text: I18n.tr("Save password")
+                    font.pixelSize: Theme.fontSizeMedium
+                    color: Theme.surfaceText
+                    anchors.verticalCenter: parent.verticalCenter
                }
            }