Mark inactive "create" button as gray

Also red border for missing qube name

resolves: QubesOS/qubes-issues#9768

Author: alimirjamali

.gitignore

@@ -93,3 +93,7 @@ ENV/
 *.swp
 
 *.~undo-tree~
+
+# GTK glade temporary files
+*.glade~
+*.glade#

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>

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,13 @@ def register_signals():
             (str,),
         )
 
-    def _name_changed(self, entry: Gtk.Entry):
+    def _name_changed(self, entry: Gtk.Entry, event=None):
         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()

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;