Cleanup UI resources

.github/workflows/main.yml

@@ -36,7 +36,7 @@ jobs:
             curl git build-essential \
             libgtk-4-dev libclang-dev libdbus-1-dev libssl-dev libudev-dev libnfc-dev \
             libpcsclite-dev libxml2-utils \
-            blueprint-compiler desktop-file-utils gettext ninja-build python3-pip \
+            desktop-file-utils gettext ninja-build python3-pip \
             udev zip
 
       - name: Set up mold as default linker
@@ -45,7 +45,32 @@ jobs:
       - name: Install Meson
         run: |
           # Newer version needed for --interactive flag needed below
-          python3 -m pip install --user -v 'meson==1.5.0'
+          python3 -m pip install --user -v 'meson==1.8.5'
+
+      - name: Install blueprint-compiler
+        run: |
+          git clone \
+            -c advice.detachedHead=false \
+            --depth 1 \
+            --branch v0.20.4 \
+            https://gitlab.gnome.org/GNOME/blueprint-compiler.git \
+            ${{ runner.temp }}/blueprint-compiler
+          cd ${{ runner.temp }}/blueprint-compiler
+          # pinned hash of 0.20.4
+          git checkout --detach 31b62c24a72c1670d2d93dcdf2d130f1ae12778e
+          echo "Making zipapp of blueprint-compiler"
+          mkdir build
+          echo "from blueprintcompiler import main; main.main('0.24.0', None, None)" > build/__main__.py
+          cp -vr blueprintcompiler build/
+          cd build
+          zip -r blueprint-compiler.zip __main__.py blueprintcompiler/
+          echo "#!/usr/bin/env python3" | cat - blueprint-compiler.zip > blueprint-compiler
+          chmod +x ./blueprint-compiler
+          rm -rf blueprintcompiler blueprint-compiler.zip
+          mkdir -p ~/.local/bin
+          cp ./blueprint-compiler ~/.local/bin
+          echo ~/.local/bin >> $GITHUB_PATH
+
       - name: Setup meson project
         run: meson setup -Dprofile=development -Dcargo_locked=true build
 

credentialsd-ui/data/resources/meson.build

@@ -1,3 +1,5 @@
+subdir('ui')
+
 # Resources
 resources = gnome.compile_resources(
   'resources',
@@ -6,4 +8,5 @@ resources = gnome.compile_resources(
   source_dir: meson.current_build_dir(),
   install: true,
   install_dir: pkgdatadir,
+  dependencies: blueprint_templates,
 )

credentialsd-ui/data/resources/resources.gresource.xml

@@ -1,8 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <gresources>
   <gresource prefix="/xyz/iinuwa/credentialsd/CredentialsUi/">
-    <!-- see https://gtk-rs.org/gtk4-rs/git/docs/gtk4/struct.Application.html#automatic-resources -->
-    <file compressed="true" preprocess="xml-stripblanks" alias="gtk/help-overlay.ui">ui/shortcuts.ui</file>
     <file compressed="true" preprocess="xml-stripblanks">ui/window.ui</file>
     <file compressed="true">style.css</file>
   </gresource>

credentialsd-ui/data/resources/ui/meson.build

@@ -0,0 +1,14 @@
+blueprint_compiler = find_program('blueprint-compiler', version: '>= 0.20.4')
+
+blueprint_templates = custom_target(
+  'blueprints',
+  input: files('window.blp'),
+  output: '.',
+  command: [
+    blueprint_compiler,
+    'batch-compile',
+    '@OUTPUT@',
+    '@CURRENT_SOURCE_DIR@',
+    '@INPUT@',
+  ],
+)

credentialsd-ui/data/resources/ui/window.blp

@@ -0,0 +1,151 @@
+using Gtk 4.0;
+
+template $CredentialsUiWindow: ApplicationWindow {
+  [titlebar]
+  HeaderBar headerbar {}
+
+  Box {
+    orientation: vertical;
+    spacing: 10;
+
+    Label {
+      label: bind template.view-model as <$CredentialManagerViewModel>.title;
+
+      styles [
+        "title-header",
+      ]
+    }
+
+    Separator {}
+
+    Label {
+      wrap: true;
+      use-markup: true;
+      label: bind template.view-model as <$CredentialManagerViewModel>.subtitle;
+
+      styles [
+        "subtitle-header",
+      ]
+    }
+
+    Separator {}
+
+    Stack stack {
+      StackPage {
+        name: "choose_device";
+        title: _("Choose device");
+
+        child: Box {
+          orientation: vertical;
+
+          Label {
+            label: _("Devices");
+          }
+
+          ScrolledWindow {
+            vexpand: true;
+            max-content-height: 256;
+            child: bind template.view-model as <$CredentialManagerViewModel>.devices;
+          }
+        };
+      }
+
+      StackPage {
+        name: "usb_or_nfc";
+        title: _("Connect a security key");
+
+        child: Box {
+          orientation: vertical;
+
+          Image {
+            icon-name: "media-removable-symbolic";
+
+            accessibility {
+              labelled-by: security_key_label;
+            }
+          }
+
+          Label security_key_label {
+            label: bind template.view-model as <$CredentialManagerViewModel>.prompt;
+          }
+
+          PasswordEntry usb_nfc_pin_entry {
+            activate => $handle_usb_nfc_pin_entered() swapped;
+            visible: bind template.view-model as <$CredentialManagerViewModel>.usb_nfc_pin_entry_visible;
+            placeholder-text: _("Enter your device PIN");
+          }
+        };
+      }
+
+      StackPage {
+        name: "hybrid_qr";
+        title: _("Scan the QR code to connect your device");
+
+        child: Box {
+          orientation: vertical;
+
+          Spinner {
+            visible: bind template.view-model as <$CredentialManagerViewModel>.qr_spinner_visible;
+          }
+
+          Picture qr_code_pic {
+            visible: bind template.view-model as <$CredentialManagerViewModel>.qr_code_visible;
+
+            accessibility {
+              label: "FIDO QR Code";
+            }
+          }
+
+          Label {
+            label: bind template.view-model as <$CredentialManagerViewModel>.prompt;
+          }
+        };
+      }
+
+      StackPage {
+        name: "choose_credential";
+        title: _("Choose credential");
+
+        child: Box {
+          orientation: vertical;
+
+          Label {
+            label: _("Choose credential");
+          }
+
+          ScrolledWindow {
+            vexpand: true;
+            max-content-height: 256;
+            child: bind template.view-model as <$CredentialManagerViewModel>.credentials;
+          }
+        };
+      }
+
+      StackPage {
+        name: "completed";
+        title: _("Complete");
+
+        child: Box {
+          orientation: vertical;
+
+          Label {
+            label: _("Done!");
+          }
+        };
+      }
+
+      StackPage {
+        name: "failed";
+        title: _("Something went wrong.");
+
+        child: Box {
+          orientation: vertical;
+
+          Label {
+            label: bind template.view-model as <$CredentialManagerViewModel>.prompt;
+          }
+        };
+      }
+    }
+  }
+}