Added show password button to Backup/Restore

The button shows the password while pressed
(emulating common password practices).

fixes QubesOS/qubes-issues#6076

icons/eye-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye-off"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"></path><line x1="1" y1="1" x2="23" y2="23"></line></svg>

icons/eye.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-eye"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path><circle cx="12" cy="12" r="3"></circle></svg>

qubesmanager/backup.py

@@ -121,6 +121,9 @@ class BackupVMsWindow(ui_backupdlg.Ui_Backup, QtWidgets.QWizard):
         self.unrecognized_config_label.setVisible(False)
         self.load_settings()
 
+        self.show_passwd_button.pressed.connect(self.show_password)
+        self.show_passwd_button.released.connect(self.hide_password)
+
         selected = self.vms_to_include()
         self.__fill_vms_list__(selected)
 
@@ -130,6 +133,14 @@ class BackupVMsWindow(ui_backupdlg.Ui_Backup, QtWidgets.QWizard):
         self.dispatcher = dispatcher
         dispatcher.add_handler('backup-progress', self.on_backup_progress)
 
+    def show_password(self):
+        self.passphrase_line_edit.setEchoMode(QtWidgets.QLineEdit.Normal)
+        self.show_passwd_button.setIcon(QtGui.QIcon(':/eye.svg'))
+
+    def hide_password(self):
+        self.passphrase_line_edit.setEchoMode(QtWidgets.QLineEdit.Password)
+        self.show_passwd_button.setIcon(QtGui.QIcon(':/eye-off.svg'))
+
     def setup_application(self):
         self.qt_app.setApplicationName(self.tr("Qubes Backup VMs"))
         self.qt_app.setWindowIcon(QtGui.QIcon.fromTheme("qubes-manager"))

qubesmanager/restore.py

@@ -110,6 +110,17 @@ class RestoreVMsWindow(ui_restoredlg.Ui_Restore, QtWidgets.QWizard):
 
         backup_utils.fill_appvms_list(self)
 
+        self.passwd_show_button.pressed.connect(self.show_password)
+        self.passwd_show_button.released.connect(self.hide_password)
+
+    def show_password(self):
+        self.passphrase_line_edit.setEchoMode(QtWidgets.QLineEdit.Normal)
+        self.passwd_show_button.setIcon(QtGui.QIcon(':/eye.svg'))
+
+    def hide_password(self):
+        self.passphrase_line_edit.setEchoMode(QtWidgets.QLineEdit.Password)
+        self.passwd_show_button.setIcon(QtGui.QIcon(':/eye-off.svg'))
+
     def setup_application(self):
         self.qt_app.setApplicationName(self.tr("Qubes Restore VMs"))
         self.qt_app.setWindowIcon(QtGui.QIcon.fromTheme("qubes-manager"))

resources.qrc

@@ -1,5 +1,7 @@
 <RCC>
   <qresource>
+    <file alias='eye.svg'>icons/eye.svg</file>
+    <file alias='eye-off.svg'>icons/eye-off.svg</file>
     <file alias="apps.png">icons/apps.png</file>
     <file alias="settings.png">icons/settings.png</file>
     <file alias="firewall.png">icons/wall.png</file>

ui/backupdlg.ui

@@ -256,38 +256,46 @@
       <property name="title">
        <string>Backup security</string>
       </property>
-      <layout class="QFormLayout" name="formLayout">
+      <layout class="QGridLayout" name="gridLayout">
-       <property name="fieldGrowthPolicy">
+       <item row="2" column="0">
-        <enum>QFormLayout::AllNonFixedFieldsGrow</enum>
-       </property>
-       <item row="1" column="0">
-        <widget class="QLabel" name="label_12">
-         <property name="text">
-          <string>&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p&gt;Encryption / Verification&lt;br/&gt;passphrase:&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
-         </property>
-        </widget>
-       </item>
-       <item row="1" column="1">
-        <widget class="QLineEdit" name="passphrase_line_edit">
-         <property name="echoMode">
-          <enum>QLineEdit::Password</enum>
-         </property>
-        </widget>
-       </item>
-       <item row="4" column="0">
         <widget class="QLabel" name="label_11">
          <property name="text">
           <string>&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p&gt;Reenter passphrase:&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
          </property>
         </widget>
        </item>
-       <item row="4" column="1">
+       <item row="0" column="0">
+        <widget class="QLabel" name="label_12">
+         <property name="text">
+          <string>&lt;html&gt;&lt;head/&gt;&lt;body&gt;&lt;p&gt;Encryption / Verification&lt;br/&gt;passphrase:&lt;/p&gt;&lt;/body&gt;&lt;/html&gt;</string>
+         </property>
+        </widget>
+       </item>
+       <item row="0" column="1">
+        <widget class="QLineEdit" name="passphrase_line_edit">
+         <property name="echoMode">
+          <enum>QLineEdit::Password</enum>
+         </property>
+        </widget>
+       </item>
+       <item row="2" column="1">
         <widget class="QLineEdit" name="passphrase_line_edit_verify">
          <property name="echoMode">
           <enum>QLineEdit::Password</enum>
          </property>
         </widget>
        </item>
+       <item row="0" column="2">
+        <widget class="QPushButton" name="show_passwd_button">
+         <property name="text">
+          <string/>
+         </property>
+         <property name="icon">
+          <iconset resource="../resources.qrc">
+           <normaloff>:/eye-off</normaloff>:/eye-off</iconset>
+         </property>
+        </widget>
+       </item>
       </layout>
      </widget>
     </item>

ui/restoredlg.ui

@@ -142,6 +142,13 @@
        <string>Security options</string>
       </property>
       <layout class="QGridLayout" name="gridLayout_4">
+       <item row="0" column="0">
+        <widget class="QLabel" name="label_4">
+         <property name="text">
+          <string>Encrypted backup:</string>
+         </property>
+        </widget>
+       </item>
        <item row="0" column="1">
         <widget class="QCheckBox" name="encryption_checkbox">
          <property name="text">
@@ -152,10 +159,10 @@
          </property>
         </widget>
        </item>
-       <item row="0" column="0">
+       <item row="1" column="1">
-        <widget class="QLabel" name="label_4">
+        <widget class="QLineEdit" name="passphrase_line_edit">
-         <property name="text">
+         <property name="echoMode">
-          <string>Encrypted backup:</string>
+          <enum>QLineEdit::Password</enum>
          </property>
         </widget>
        </item>
@@ -166,10 +173,14 @@
          </property>
         </widget>
        </item>
-       <item row="1" column="1">
+       <item row="1" column="2">
-        <widget class="QLineEdit" name="passphrase_line_edit">
+        <widget class="QPushButton" name="passwd_show_button">
-         <property name="echoMode">
+         <property name="text">
-          <enum>QLineEdit::Password</enum>
+          <string/>
+         </property>
+         <property name="icon">
+          <iconset resource="../resources.qrc">
+           <normaloff>:/eye-off</normaloff>:/eye-off</iconset>
          </property>
         </widget>
        </item>
@@ -288,6 +299,8 @@ p, li { white-space: pre-wrap; }
   <tabstop>commit_text_edit</tabstop>
   <tabstop>showFileDialog</tabstop>
  </tabstops>
- <resources/>
+ <resources>
+  <include location="../resources.qrc"/>
+ </resources>
  <connections/>
 </ui>