modals/auth: add show password option

fixes #1311

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)
+    minimumSize: Qt.size(460, 220)
-    maximumSize: Qt.size(420, calculatedHeight)
+    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.margins: Theme.spacingM
-            anchors.rightMargin: Theme.spacingM
+            height: Math.max(titleColumn.implicitHeight, windowButtonRow.implicitHeight)
-            anchors.topMargin: Theme.spacingM
+
-            height: Math.max(titleColumn.height, buttonRow.height)
+            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 {
+                StyledText {
-                        text: currentFlow?.message ?? ""
+                    text: currentFlow?.supplementaryMessage ?? ""
-                        font.pixelSize: Theme.fontSizeMedium
+                    font.pixelSize: Theme.fontSizeSmall
-                        color: Theme.surfaceTextMedium
+                    color: (currentFlow?.supplementaryIsError ?? false) ? Theme.error : Theme.surfaceTextMedium
-                        width: parent.width
+                    width: parent.width
-                        wrapMode: Text.Wrap
+                    wrapMode: Text.Wrap
-                    }
+                    maximumLineCount: 2
-
+                    elide: Text.ElideRight
-                    StyledText {
+                    opacity: (currentFlow?.supplementaryIsError ?? false) ? 1 : 0.8
-                        visible: (currentFlow?.supplementaryMessage ?? "") !== ""
+                    visible: text !== ""
-                        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
-                    }
                 }
             }
 
             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.margins: Theme.spacingM
-            anchors.rightMargin: Theme.spacingM
+            spacing: Theme.spacingS
-            anchors.bottomMargin: Theme.spacingM
-            spacing: Theme.spacingM
 
             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: currentFlow?.failed ?? false
-                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
-                    }
-                }
             }
 
             Item {
                 width: parent.width
-                height: 40
+                height: 36
 
                 Row {
                     anchors.right: parent.right

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

quickshell/Widgets/DankTextField.qml

@@ -32,6 +32,8 @@ StyledRect {
     property color leftIconColor: Theme.surfaceVariantText
     property color leftIconFocusedColor: Theme.primary
     property bool showClearButton: false
+    property bool showPasswordToggle: false
+    property bool passwordVisible: false
     property color backgroundColor: Theme.withAlpha(Theme.surfaceContainerHigh, Theme.popupTransparency)
     property color focusedBorderColor: Theme.primary
     property color normalBorderColor: Theme.outlineMedium
@@ -40,7 +42,14 @@ StyledRect {
     property int focusedBorderWidth: 2
     property real cornerRadius: Theme.cornerRadius
     readonly property real leftPadding: Theme.spacingM + (leftIconName ? leftIconSize + Theme.spacingM : 0)
-    readonly property real rightPadding: Theme.spacingM + (showClearButton && text.length > 0 ? 24 + Theme.spacingM : 0)
+    readonly property real rightPadding: {
+        let p = Theme.spacingM;
+        if (showPasswordToggle)
+            p += 24 + Theme.spacingS;
+        if (showClearButton && text.length > 0)
+            p += 24 + Theme.spacingS;
+        return p;
+    }
     property real topPadding: Theme.spacingM
     property real bottomPadding: Theme.spacingM
     property bool ignoreLeftRightKeys: false
@@ -97,8 +106,8 @@ StyledRect {
 
         anchors.left: leftIcon.visible ? leftIcon.right : parent.left
         anchors.leftMargin: Theme.spacingM
-        anchors.right: clearButton.visible ? clearButton.left : parent.right
+        anchors.right: rightButtonsRow.left
-        anchors.rightMargin: Theme.spacingM
+        anchors.rightMargin: rightButtonsRow.visible ? Theme.spacingS : Theme.spacingM
         anchors.top: parent.top
         anchors.topMargin: root.topPadding
         anchors.bottom: parent.bottom
@@ -151,33 +160,64 @@ StyledRect {
         }
     }
 
-    StyledRect {
+    Row {
-        id: clearButton
+        id: rightButtonsRow
 
-        width: 24
-        height: 24
-        radius: 12
-        color: clearArea.containsMouse ? Theme.outlineStrong : "transparent"
         anchors.right: parent.right
         anchors.rightMargin: Theme.spacingM
         anchors.verticalCenter: parent.verticalCenter
-        visible: showClearButton && text.length > 0
+        spacing: Theme.spacingXS
+        visible: showPasswordToggle || (showClearButton && text.length > 0)
 
-        DankIcon {
+        StyledRect {
-            anchors.centerIn: parent
+            id: passwordToggleButton
-            name: "close"
+
-            size: 16
+            width: 24
-            color: clearArea.containsMouse ? Theme.outline : Theme.surfaceVariantText
+            height: 24
+            radius: 12
+            color: passwordToggleArea.containsMouse ? Theme.outlineStrong : "transparent"
+            visible: showPasswordToggle
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: passwordVisible ? "visibility_off" : "visibility"
+                size: 16
+                color: passwordToggleArea.containsMouse ? Theme.outline : Theme.surfaceVariantText
+            }
+
+            MouseArea {
+                id: passwordToggleArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: passwordVisible = !passwordVisible
+            }
         }
 
-        MouseArea {
+        StyledRect {
-            id: clearArea
+            id: clearButton
 
-            anchors.fill: parent
+            width: 24
-            hoverEnabled: true
+            height: 24
-            cursorShape: Qt.PointingHandCursor
+            radius: 12
-            onClicked: {
+            color: clearArea.containsMouse ? Theme.outlineStrong : "transparent"
-                textInput.text = "";
+            visible: showClearButton && text.length > 0
+
+            DankIcon {
+                anchors.centerIn: parent
+                name: "close"
+                size: 16
+                color: clearArea.containsMouse ? Theme.outline : Theme.surfaceVariantText
+            }
+
+            MouseArea {
+                id: clearArea
+
+                anchors.fill: parent
+                hoverEnabled: true
+                cursorShape: Qt.PointingHandCursor
+                onClicked: textInput.text = ""
             }
         }
     }