From 96b98251a1340123df65b98673289880dc709196 Mon Sep 17 00:00:00 2001
From: Ali Mirjamali <ali@mirjamali.com>
Date: Tue, 11 Feb 2025 21:07:58 +0330
Subject: [PATCH] Mark inactive "create" button as gray

Also red border for missing qube name

resolves: https://github.com/QubesOS/qubes-issues/issues/9768
---
 .gitignore                            |  4 ++++
 qubes_config/new_qube.glade           |  6 +++---
 qubes_config/new_qube/new_qube_app.py |  8 +++++++-
 qubes_config/qubes-new-qube-base.css  | 12 ++++++++++++
 4 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2f0373a7..839fcc8f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -93,3 +93,7 @@ ENV/
 *.swp
 
 *.~undo-tree~
+
+# GTK glade temporary files
+*.glade~
+*.glade#
diff --git a/qubes_config/new_qube.glade b/qubes_config/new_qube.glade
index 70023171..c439c65d 100644
--- a/qubes_config/new_qube.glade
+++ b/qubes_config/new_qube.glade
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<!-- Generated with glade 3.38.2 -->
+<!-- Generated with glade 3.40.0 -->
 <interface>
   <requires lib="gtk+" version="3.24"/>
   <!-- interface-css-provider-path qubes-new-qube-light.css -->
@@ -424,10 +424,10 @@
                           <object class="GtkEntry" id="qube_name">
                             <property name="visible">True</property>
                             <property name="can-focus">True</property>
-                            <property name="tooltip-text" translatable="yes">The name of the qube can contain letters from a to z and underscore.</property>
+                            <property name="tooltip-text" translatable="yes">Qube name can have up to 63 characters: A-Z, a-z, numbers and underscores</property>
                             <property name="max-length">64</property>
                             <property name="width-chars">32</property>
-                            <property name="placeholder-text" translatable="yes">enter qube name</property>
+                            <property name="placeholder-text" translatable="yes">enter qube name (required)</property>
                           </object>
                           <packing>
                             <property name="expand">False</property>
diff --git a/qubes_config/new_qube/new_qube_app.py b/qubes_config/new_qube/new_qube_app.py
index 6d68cfb4..1a68b6b0 100644
--- a/qubes_config/new_qube/new_qube_app.py
+++ b/qubes_config/new_qube/new_qube_app.py
@@ -182,6 +182,7 @@ def perform_setup(self):
         )
 
         self.qube_name.connect("changed", self._name_changed)
+        self.qube_name.connect("focus-out-event", self._name_changed)
 
         self.progress_bar_dialog.update_progress(0.1)
 
@@ -218,6 +219,8 @@ def perform_setup(self):
         self.progress_bar_dialog.update_progress(1)
         self.progress_bar_dialog.hide()
 
+        self.main_window.set_focus(self.qube_name)
+
     def _quit(self, *_args):
         self.quit()
 
@@ -232,11 +235,14 @@ def register_signals():
             (str,),
         )
 
-    def _name_changed(self, entry: Gtk.Entry):
+    def _name_changed(self, entry: Gtk.Entry, event=None):
+        # pylint: disable=unused-argument
         if not entry.get_text():
             self.create_button.set_sensitive(False)
+            self.qube_name.get_style_context().add_class("invalid_entry")
         else:
             self.create_button.set_sensitive(True)
+            self.qube_name.get_style_context().remove_class("invalid_entry")
 
     def _type_selected(self, button: Gtk.RadioButton):
         button_name = button.get_name()
diff --git a/qubes_config/qubes-new-qube-base.css b/qubes_config/qubes-new-qube-base.css
index 96ffcce5..9d4d3e42 100644
--- a/qubes_config/qubes-new-qube-base.css
+++ b/qubes_config/qubes-new-qube-base.css
@@ -53,6 +53,18 @@ radiobutton:checked radio {
     color: @text-color;
 }
 
+.flat_button:disabled {
+    background: @dark-gray;
+}
+
+.invalid_entry {
+    border-color: red;
+}
+
+.invalid_entry:focus {
+    box-shadow: none;
+}
+
 #applications {
     background: @top-background;
     margin-top: 10px;