Commit recent changes

README.md

@@ -17,6 +17,12 @@ Recommended:
  - sass-stylesheets-bulma (needed if the web front-end is to be used)
  - libxapp-gtk3-module
 
+On Debian-based systems, you should get everything with the following:
+
+```
+apt install python3-flask python3-command-runner  python3-pytest python3-dmm gettext libjs-htmx sass-stylesheets-bulma fonts-fork-awesome
+```
+
 ## Development
 
 **Please Note:** This project is in early development, and if you have stumbled across this page, please note that it is nowhere near ready for production use yet. Hopefully that changes over the next few months!

src/.gitignore

@@ -0,0 +1,2 @@
+__pycache__
+.swp

src/yasi-webclient

@@ -4,6 +4,14 @@ import webview
 
 LOCATION = "http://localhost:9274/welcome"
 
+class Api():
+    def log(self, value):
+        print(value)
+        
+    def close(self):
+        window.destroy()
+
+
 def on_closed():
     """
     Actions to take when System Installer is closed.
@@ -12,15 +20,17 @@ def on_closed():
 
 
 window = webview.create_window('System Installer', LOCATION,
-                      transparent=True, easy_drag=True, frameless=True,
+                      transparent=True, easy_drag=False, frameless=True,
-                      width=1050, focus=True, zoomable=True,
+                      width=1050, height=650, focus=True, zoomable=True,
-                      confirm_close=True, resizable=True, shadow=True
+                      confirm_close=False, resizable=True, shadow=True,
+                      text_select=False, draggable=True, js_api=Api()
                       )
 
 webview.settings = {
   'ALLOW_DOWNLOADS': False,
   'ALLOW_FILE_URLS': False,
-  'DRAG_REGION_SELECTOR': 'pywebview-drag-region',
+  'DRAG_REGION_SELECTOR': '.pywebview-drag-region',
+  'DRAG_REGION_DIRECT_TARGET_ONLY': True,
   'OPEN_EXTERNAL_LINKS_IN_BROWSER': True,
   'OPEN_DEVTOOLS_IN_DEBUG': True,
   'IGNORE_SSL_ERRORS': False,
@@ -28,5 +38,13 @@ webview.settings = {
   'SHOW_DEFAULT_MENUS': True
 }
 
+
+def custom_logic(window):
+    pass
+    #window.toggle_fullscreen()
+    #window.evaluate_js('alert("Nice one brother")')
+    #window.destroy()
+
 window.events.closed += on_closed
-webview.start(icon='/usr/share/icons/yasi.png')
+#webview.start(icon='/usr/share/icons/yasi.png')
+webview.start(custom_logic, window)

src/yasi_applets/disks/__init__.py

@@ -1,7 +1,9 @@
 from flask import Blueprint
 
 bp = Blueprint('disks', __name__,
-               template_folder='')
+               template_folder='',
+               static_folder='static',
+               static_url_path='/disks/static')
 
 from yasi_applets.disks import routes
 

src/yasi_applets/disks/disks_advanced.html

@@ -1,36 +1,7 @@
 {% extends "layout.html" %}
 {% block body %}
 
-<div style="">
-
-<p><b>How would you like to install Debian?</b></p>
-
 <br>
-
-<div class="radios">
-  <label class="radio">
-    <input selected type="radio" name="rsvp" />
-    Preconfigured partitioning &nbsp;
-<!-- Let's hide these babies for the initial release.
-  <label class="radio">
-    <input type="radio" name="rsvp" disabled />
-    Erase entire disk
-  </label>
-  <label class="radio">
-    <input type="radio" name="rsvp" disabled />
-    Install alongside another operating system
-  </label>
-  <label class="radio">
-    <input type="radio" name="rsvp" disabled />
-    Edit existing partitions
-  </label>
-</div>
--->
-
-<div class="columns" width="100%">
-	<div class="column"><p> <br>Current layout: </p></div>
-</div>
-
 <!--
 <div style=""> 
 <div style="background-color: gray; padding: 4px 6px 7px 6px; border-radius: 10px;">
@@ -66,7 +37,7 @@
 -->
 
 
-{% for disk in blockdevs["blockdevices"] if disk["name"] != "zram0" and disk["name"] != "loop0" and disk["name"] != "sr0" %} 
+{% for disk in blockdevs["blockdevices"] if disk["name"] != "zram0" and "loop" not in disk["name"] and disk["name"] != "sr0" %} 
 
 <!--
 <h1> Raw data </h1>
@@ -88,33 +59,57 @@ fssize: {{ child['fssize'] }}
 <div style=""> <!-- partition bars -->
 <div style="background-color: gray; padding: 4px 6px 7px 6px; border-radius: 10px;">
 <p> <span style="width: 100%; border-radius: 8px 8px 0 0;" class="tag is-black">
-    <small><small>{{ disk['name'] }} ({{(disk['size']/1024000000)|round(0)|int }} GB) - Serial: {{ disk['serial'] }}</small></small>
+	<b>{{ disk['name'] }}: &nbsp; </b>  {{ disk['model'] }} - {{ disk['tran'] }} disk ({{(disk['size']/1024000000)|round(0)|int }} GB) - Serial: {{ disk['serial'] }} </p>
-<div class="columns">
+    <center style="padding: 5px; padding-bottom: 5px;">
-{% for child in disk['children'] %}
+     <td><a hx-get="/disks/details/{{ disk['name'] }}" hx-swap="outerHTML"><span class="tag is-link"> Disk Details </span></a></td>
-  <a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML"/>
+      <td><a hx-get="/disks/wipe_table/{{ disk['name'] }}" hx-swap="outerHTML"><span class="tag is-link"> Wipe Disk </span></a></td>
-  <div class="column is-narrow is-primary">
+      <td><a hx-get="/disks/new_partition/{{ disk['name'] }}" hx-swap="outerHTML"><span class="tag is-link"> New Partition </span></a></td>
-    <div class="box" style="min-width: 220px; border-radius: 0 0 0px 5px; height: 60px; padding-top: 5px;">
+      <td><a hx-get="/disks/replicate/{{ disk['name'] }}" hx-swap="outerHTML"><span class="tag is-link"> Replicate Layout </span></a></td>
-    <p class="is-tiny">{{ child['name'] }} ({{ (child['size']/1024000000)|round(2) }} GiB)  </p>
+      <td><a hx-get="/disks/diagnostics/{{ disk['name'] }}" hx-swap="outerHTML"><span class="tag is-link"> Diagnostics </span></a></td>
-    <p class="title is-5"><span class="tag is-black">{{ child['mountpoint'] }}</span>
+    </center>
-    <span class="tag is-link">{{ child['fstype'] }}</span>
+
-    </p>
-    </div>
-  </div>
-  </a>
-{% endfor %}
   {% if disk['maj:min'] == "252:0" %}
-  <div class="column is-narrow is-primary">
+  <div class="column">
     <div class="box" style="width: 100%; border-radius: 0 0 0px 5px; height: 60px; padding-top: 5px; right: 0px;">
-    <p class="is-tiny"> {{ disk['name'] }} ({{ (disk['size']/1024000000)|round(2) }} GiB)  </p>
-    <p class="title is-5"><span class="tag is-black">/dev/{{ disk['name'] }}</span>
     <span class="tag is-link">swap</span>
     </p>
     </div>
     </div>
   {% endif %}
+
+{% set colors = ['teal', '#E69F00', '#56B4E9', '#009E73', '#0072B2', '#D55E00', '#CC79A7'] %}
+
+<div id="percentagebar" style="width: 100%; height: 50px; background-color: transparent; display: inline-block; margin: 5; padding: 5; overflow: hidden; display: flex;">
+	{% for child in disk['children'] %}
+	<a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML">
+	<div style="min-width: 100px; width: {{ (((child['size'] / disk['size'])*100)|round(0)|int) }}%; height: 100%; background-color: {{ colors[loop.index0 % colors|length] }}; display: inline-block; margin: 1; padding: 1; border-radius: 8px;">
+		&nbsp; <a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML"> <font color="white">{{ child['name'] }} </font>
+	</div></a>
+	{% endfor %}
+</div>
+
+<table width="100%">
+	<th>Partition</th>
+	<th>Type</th>
+	<th>Mount Point</th>
+	<th>Label</th>
+	<th>Size</th>
+	<th>Used</th>
+{% for child in disk['children'] %}
+<tr>
+    <td><a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML"><span class="tag is-link">{{ child['name'] }}</span></a></td>
+    <td>{{ child['fstype'] }}</td>
+    <td>{{ child['mountpoint'] }}</td>
+    <td>{{ child['label'] }} </td>
+    <td>{{ (child['size']/1024000000)|round(2) }} GiB </td>
+</tr>
+{% endfor %}
+</table>
+
 </div>
 </div>
 
+<br />
 <!--
 <p> Diskname: {{ disk['name'] }} </p>
 <p> Model: {{ disk['model'] }} </p>
@@ -128,6 +123,7 @@ fssize: {{ child['fssize'] }}
 <p> There are {{ disk['children']|count }} Children </p>
 -->
 
+
 <!--
 {% for child in disk['children'] %}
 <br>
@@ -148,14 +144,28 @@ fssize: {{ child['fssize'] }}
 	<div class="column"><p> <br>Proposed partitioning: </p></div>
 </div>
 
+<div style=""> <!-- partition bars -->
+<div style="background-color: gray; padding: 4px 6px 7px 6px; border-radius: 10px;">
+<p> <span style="width: 100%; border-radius: 8px 8px 0 0;" class="tag is-black">
+    <small><small> New GPT Partition Table</small></small>
+<div class="columns">
 {% for partition in partitions %}
-<ul>
+  {% if "mkpart" in partition['command'] %}
-<li> {{ partition }} </li>
+  <a hx-get="/disks/partition/{{ partition['device'] }}" hx-swap="outerHTML"/ style="{% if "100%" in partition['command'] %}width: 100%; {% endif %}">
-<ul>
+  <div class="column is-narrow is-primary">
-
+    <div class="box" style="min-width: 220px; border-radius: 0 0 0px 5px; height: 60px; padding-top: 5px;">
-<!-- {% set commands = partition.split(' ') %} -->
+    <p class="is-tiny"> {{ partition['device'] }} </p>
-
+    <p class="title is-5"><span class="tag is-black"> {{ partition['mountpoint'] }} </span>
+    <span class="tag is-link"> {{ partition['fstype'] }} </span>
+    </p>
+    </div>
+  </div>
+  </a>
+  {% endif %}
 {% endfor %}
+</div>
+</div>
+
 
 </div>
 </div>

src/yasi_applets/disks/disks_details.html

@@ -0,0 +1,40 @@
+<div class="modal is-active">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+
+    <div style="background-color: #424242; padding: 15px; border-radius: 15px; boders: none; color: white;">
+    <h1 class="is-size-4"> Disk: {{ disk }} </h1>
+
+<p>
+
+{% for pdisk in blockdevs["blockdevices"] if pdisk["name"] != "zram0" and "loop" not in pdisk["name"] and pdisk["name"] != "sr0" %}
+{% if pdisk['name'] == disk %}
+
+<p> Model: {{ pdisk['model'] }} </p>
+<p> Revision: {{ pdisk['rev'] }} </p>
+<p> Serial: {{ pdisk['serial'] }} </p>
+<p> Link: {{ pdisk['id-link'] }} </p>
+<p> Path: {{ pdisk['path'] }} </p>
+<p> Label: {{ pdisk['label'] }} </p>
+<p> Partition type: {{ pdisk['pttype'] }} </p>
+<p> Interface: {{ pdisk['tran'] }} </p>
+<p> Size: {{ pdisk['size'] }} </p>
+<p> Flags: {{ pdisk['flags'] }} </p>
+<p> UUID: {{ pdisk['uuid'] }} </p>
+<p> Partitions: {{ pdisk['children']|count }} </p>
+
+{% endif %}
+{% endfor %}
+
+
+</p>
+
+    <div class="columns">
+      <a href="/disks">
+           <div class="column"><button class="button is-light">Cancel</button></div>
+      </a>
+      <a href="/disks"><div class="column"><button class="button is-link">Continue</button></div></a>
+    </div>
+  </div>
+</div>
+</div>

src/yasi_applets/disks/disks_erase_confirmed.html

@@ -0,0 +1,105 @@
+{% extends "layout.html" %}
+{% block body %}
+
+<p><b>The following disk will be erased:</b></p>
+
+{% for disk in blockdevs["blockdevices"] if disk["name"] == diskname %}
+{% set disk_size = disk['size'] %}
+
+<div style="padding-top: 20px;"> <!-- partition bars -->
+<div style="background-color: gray; padding: 4px 6px 7px 6px; border-radius: 10px;">
+<p> <span style="width: 100%; border-radius: 8px 8px 0 0;" class="tag is-black">
+        <b>{{ disk['name'] }}: &nbsp; </b>  {{ disk['model'] }} - {{ disk['tran'] }} disk ({{(disk['size']/1024000000)|round(0)|int }} GB) - Serial: {{ disk['serial'] }} </p>
+    <center style="padding: 5px; padding-bottom: 5px;">
+    </center>
+
+  {% if disk['maj:min'] == "252:0" %}
+  <div class="column">
+    <div class="box" style="width: 100%; border-radius: 0 0 0px 5px; height: 60px; padding-top: 5px; right: 0px;">
+    <span class="tag is-link">swap</span>
+    </p>
+    </div>
+    </div>
+  {% endif %}
+
+{% set colors = ['teal', '#E69F00', '#56B4E9', '#009E73', '#0072B2', '#D55E00', '#CC79A7'] %}
+
+<div id="percentagebar" style="width: 100%; height: 50px; background-color: transparent; display: inline-block; margin: 5; padding: 5; overflow: hidden; display: flex;">
+        {% for child in disk['children'] %}
+        <a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML">
+        <div style="min-width: 100px; width: {{ (((child['size'] / disk['size'])*100)|round(0)|int) }}%; height: 100%; background-color: {{ colors[loop.index0 % colors|length] }}; display: inline-block; margin: 1; padding: 1; border-radius: 8px;">
+                &nbsp; <a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML"> <font color="white">{{ child['name'] }} </font>
+        </div></a>
+        {% endfor %}
+</div>
+
+<table width="100%">
+        <th>Partition</th>
+        <th>Type</th>
+        <th>Mount Point</th>
+        <th>Label</th>
+        <th>Size</th>
+{% for child in disk['children'] %}
+<tr>
+    <td><a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML"><span class="tag is-link">{{ child['name'] }}</span></a></td>
+    <td>{{ child['fstype'] }}</td>
+    <td>{{ child['mountpoint'] }}</td>
+    <td>{{ child['label'] }} </td>
+    <td>{{ (child['size']/1024000000)|round(2) }} GiB </td>
+</tr>
+{% endfor %}
+</table>
+</div>
+</div>
+{% endfor %}
+
+<br>
+
+<p><b>This layout will be created:</b></p>
+
+{% for disk in blockdevs["blockdevices"] if disk["name"] == diskname %}
+{% set disk_size = disk['size'] %}
+<div style="padding-top: 20px;"> <!-- partition bars -->
+<div style="background-color: gray; padding: 4px 6px 7px 6px; border-radius: 10px;">
+<p> <span style="width: 100%; border-radius: 8px 8px 0 0;" class="tag is-black">
+	<b>New GPT Partition Table on {{ disk['name'] }} </b> </p>
+        <!-- TODO: Unhardcode that, it might be a BIOS or other type of partition -->
+    <center style="padding: 5px; padding-bottom: 5px;">
+    </center>
+
+{% set colors = ['teal', '#E69F00', '#56B4E9', '#009E73', '#0072B2', '#D55E00', '#CC79A7'] %}
+
+<div id="percentagebar" style="width: 100%; height: 50px; background-color: transparent; display: inline-block; margin: 5; padding: 5; overflow: hidden; display: flex;">
+        {% for partition in partitions['command_set'] if partition['action-type'] == 'newpart' %}
+        <a hx-get="/disks/partition/" hx-swap="outerHTML">
+		<div style="min-width: 100px; width: {{ partition['size']}}; display: inline-block; margin: 1; padding: 1; border-radius: 8px; background-color: {{ colors[loop.index0 % colors|length] }}; display: inline-block; margin: 1; padding: 1; border-radius: 8px;">
+		<!-- TODO: That is totally wrong, but works for POC -->
+		&nbsp; <a hx-get="/disks/partition/" hx-swap="outerHTML"> <font color="white"> {{ partition['device'] }} </font>
+        </div></a>
+        {% endfor %}
+</div>
+
+<table width="100%">
+        <th>Partition</th>
+        <th>Type</th>
+        <th>Mount Point</th>
+        <th>Label</th>
+        <th>Size</th>
+{% for partition in partitions['command_set'] if partition['action-type'] == 'newpart' %}
+<tr>
+    <td><a hx-get="/disks/partition/{{ partition['device']}}" hx-swap="outerHTML"><span class="tag is-link">{{ partition['device'] }}</span></a></td>
+    <td>{{ partition['fstype'] }}</td>
+    <td>{{ partition['mountpoint'] }}</td>
+    <td>{{ partition['label'] }}  </td>
+    <td>{{ partition['size'] }} </td>
+</tr>
+{% endfor %}
+</table>
+</div>
+</div>
+{% endfor %}
+
+
+<BR>
+
+{% endblock %}

src/yasi_applets/disks/disks_erase_menu.html

@@ -0,0 +1,58 @@
+{% extends "layout.html" %}
+{% block body %}
+
+<p><b>Please confirm the disk to erase:</b></p>
+
+{% for disk in blockdevs["blockdevices"] if disk["name"] != "zram0" and "loop" not in disk["name"] and disk["name"] != "sr0" %}
+
+<div style="padding-top: 20px;"> <!-- partition bars -->
+<div style="background-color: gray; padding: 4px 6px 7px 6px; border-radius: 10px;">
+<p> <span style="width: 100%; border-radius: 8px 8px 0 0;" class="tag is-black">
+        <b>{{ disk['name'] }}: &nbsp; </b>  {{ disk['model'] }} - {{ disk['tran'] }} disk ({{(disk['size']/1024000000)|round(0)|int }} GB) - Serial: {{ disk['serial'] }} </p>
+    <center style="padding: 5px; padding-bottom: 5px;">
+     <td><a href="/disks/choose_disk_erase_chosen/{{ disk['name'] }}"><span class="tag is-link"> Select Disk  </span></a></td>
+    </center>
+
+  {% if disk['maj:min'] == "252:0" %}
+  <div class="column">
+    <div class="box" style="width: 100%; border-radius: 0 0 0px 5px; height: 60px; padding-top: 5px; right: 0px;">
+    <span class="tag is-link">swap</span>
+    </p>
+    </div>
+    </div>
+  {% endif %}
+
+{% set colors = ['teal', '#E69F00', '#56B4E9', '#009E73', '#0072B2', '#D55E00', '#CC79A7'] %}
+
+<div id="percentagebar" style="width: 100%; height: 50px; background-color: transparent; display: inline-block; margin: 5; padding: 5; overflow: hidden; display: flex;">
+        {% for child in disk['children'] %}
+        <a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML">
+        <div style="min-width: 100px; width: {{ (((child['size'] / disk['size'])*100)|round(0)|int) }}%; height: 100%; background-color: {{ colors[loop.index0 % colors|length] }}; display: inline-block; margin: 1; padding: 1; border-radius: 8px;">
+                &nbsp; <a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML"> <font color="white">{{ child['name'] }} </font>
+        </div></a>
+        {% endfor %}
+</div>
+
+<table width="100%">
+        <th>Partition</th>
+        <th>Type</th>
+        <th>Mount Point</th>
+        <th>Label</th>
+        <th>Size</th>
+        <th>Used</th>
+{% for child in disk['children'] %}
+<tr>
+    <td><a hx-get="/disks/partition/{{ child['name'] }}" hx-swap="outerHTML"><span class="tag is-link">{{ child['name'] }}</span></a></td>
+    <td>{{ child['fstype'] }}</td>
+    <td>{{ child['mountpoint'] }}</td>
+    <td>{{ child['label'] }} </td>
+    <td>{{ (child['size']/1024000000)|round(2) }} GiB </td>
+</tr>
+{% endfor %}
+</table>
+</div>
+</div>
+
+{% endfor %}
+
+{% endblock %}

src/yasi_applets/disks/disks_partition.html

@@ -11,12 +11,11 @@
     <div class="select">
          <select>
          <option>Local file system</option>
-         <option>Remote file system</option>
          <option>Logical volume for ZFS zpool</option>
          <option>Logical volume for LVM</option>
          <option>Logical volume for LUKS encryption</option>
 	 <option>Logical volume for Linux (mdadm) RAID</option>
-	 <option>Logical volume for Microsoft LDM RAID</option>
+	 <option>Logical volume for (existing) Microsoft LDM RAID</option>
          <option>Swap partition</option>
          <option>Do not configure</option>
          </select>
@@ -49,9 +48,6 @@
          <option>jfs</option>
          <option>ntfs</option>
          <option>vfat</option>
-         <option>nfs</option>
-         <option>nbd</option>
-         <option>samba</option>
          </select>
     </div>
     </div>

src/yasi_applets/disks/disks_welcome.html

@@ -0,0 +1,60 @@
+{% extends "layout.html" %}
+{% block body %}
+
+<p><b>How would you like to install Debian?</b></p>
+
+<br>
+
+<center>
+
+<a href="">
+<div style="width: 200px; float: left; padding: 10px; color: white;">
+<img width="130px;" src="/disks/static/img/install_alongside.png"><br>
+Install next to existing partition
+</div>
+</a>
+
+<a href="/disks/choose_partition_erase">
+<div style="width: 200px; float: left; padding: 10px; color: white;">
+<img width="130px;" src="/disks/static/img/erase_partition.png"><br>
+Replace a partition
+</div>
+</a>
+
+<a href="/disks/choose_disk_erase">
+<div style="width: 200px; float: left; padding: 10px; color: white;">
+<img width="130px;" src="/disks/static/img/erase_disk.png"><br>
+Erase entire disk
+</div>
+</a>
+
+<a href="/disks/advanced">
+<div style="width: 200px; float: left; padding: 10px; color: white;">
+<img width="130px;" src="/disks/static/img/advanced_partitioning.png"><br>
+Advanced partitioning
+</div>
+</a>
+
+<a href="">
+<div style="width: 200px; float: left; padding: 10px; color: white;">
+<img width="130px;" src="/disks/static/img/preconfigured_partitioning.png"><br>
+Preconfigured Partitioning
+</div>
+</a>
+
+</center>
+
+<div style="float: none;">
+<p> <b>The following devices have been detected:</b>
+
+<br><br>
+
+<ul>
+{% for disk in blockdevs["blockdevices"] if disk["name"] != "zram0" and "loop" not in disk["name"] and disk["name"] != "sr0" %}
+<li>{{ disk['name'] }}
+{% endfor %}
+</ul>
+
+{% endblock %}
+
+</div>

src/yasi_applets/disks/disks_wipe_partition.html

@@ -0,0 +1,24 @@
+<div class="modal is-active">
+  <div class="modal-background"></div>
+  <div class="modal-content">
+
+    <div style="background-color: #424242; padding: 15px; border-radius: 15px; boders: none; color: white;">
+    <h1 class="is-size-4"> Wipe partition: {{ disk }} </h1>
+
+    <p>Warning: wiping the partition table effectively destroys all data on the disk.</p>
+
+    <p>What kind of partition would you like to create? </p>
+
+    <p>DOS/MBR (Only use for legacy purposes, disks smaller than 2TB</p>
+    <p>GPT (Usable on all disk sizes, modern systems)</p>
+
+
+    <div class="columns">
+      <a href="/disks">
+           <div class="column"><button class="button is-light">Cancel</button></div>
+      </a>
+      <a href="/disks"><div class="column"><button class="button is-link">Continue</button></div></a>
+    </div>
+  </div>
+</div>
+</div>

src/yasi_applets/disks/routes.py

@@ -5,6 +5,84 @@ import dmm.lsblk as lsblk
 from flask import current_app
 
 @bp.route('/disks')
+def disks_welcome():
+    """
+    Welcome menu for partitioning
+    """
+    menu = current_app.config['CONFIG']['settings']['menu_order'].split(" ")
+    next_step_url = menu[menu.index("disks")+1]
+    if menu[menu.index("disks")] == 1:
+        previous_step_url = False
+    else:
+        previous_step_url = menu[menu.index("disks")-1]
+
+    blockdevs = lsblk.list_block_devices()
+
+    return render_template('disks_welcome.html',
+                           menu=current_app.config['CONFIG']
+                                                  ['settings']['menu'],
+                           menu_order=current_app.config['CONFIG']
+                                                        ['settings']
+                                                        ['menu_order'].split(),
+                           previous_step=previous_step_url,
+                           next_step=next_step_url, blockdevs=blockdevs
+                           )
+
+
+@bp.route('/disks/choose_disk_erase')
+def disks_choose_disk_erase():
+    """
+    Choose a disk to erase
+    """
+    menu = current_app.config['CONFIG']['settings']['menu_order'].split(" ")
+    next_step_url = menu[menu.index("disks")+1]
+    if menu[menu.index("disks")] == 1:
+        previous_step_url = False
+    else:
+        previous_step_url = menu[menu.index("disks")-1]
+
+    blockdevs = lsblk.list_block_devices()
+
+    return render_template('disks_erase_menu.html',
+                           menu=current_app.config['CONFIG']
+                                                  ['settings']['menu'],
+                           menu_order=current_app.config['CONFIG']
+                                                        ['settings']
+                                                        ['menu_order'].split(),
+	                       previous_step = previous_step_url,
+                           next_step=next_step_url, blockdevs=blockdevs
+                           )
+
+
+@bp.route('/disks/choose_disk_erase_chosen/<disk>')
+def disks_choose_disk_erase_confirm(disk):
+    """
+    Disk chosen, show before and after of disk configuration.
+    """
+
+    partitions = current_app.config['CONFIG']['recipe']['create_partitions']
+
+    menu = current_app.config['CONFIG']['settings']['menu_order'].split(" ")
+    next_step_url = menu[menu.index("disks")+1]
+    if menu[menu.index("disks")] == 1:
+        previous_step_url = False
+    else:
+        previous_step_url = menu[menu.index("disks")-1]
+    blockdevs = lsblk.list_block_devices()
+
+    return render_template('disks_erase_confirmed.html',
+                           menu=current_app.config['CONFIG']
+                                                  ['settings']['menu'],
+                           menu_order=current_app.config['CONFIG']
+                                                        ['settings']
+                                                        ['menu_order'].split(),
+                           previous_step = previous_step_url,
+                           next_step=next_step_url, blockdevs=blockdevs,
+                           diskname=disk, partitions=partitions
+                           )
+
+
+@bp.route('/disks/advanced')
 def disks():
     """
     Disks screen for the webui.
@@ -25,12 +103,12 @@ def disks():
     bottom_menu = ""
     build_summary()
 
-    return render_template('disks.html', blockdevs=blockdevs,
+    return render_template('disks_advanced.html', blockdevs=blockdevs,
         menu=current_app.config['CONFIG']['settings']['menu'],
 	menu_order=current_app.config['CONFIG']['settings']['menu_order'].split(),
 	previous_step = previous_step_url,
 	next_step=next_step_url,
-	partitions=current_app.config['CONFIG']['recipe']['create_partitions']['commands'],
+	partitions=current_app.config['CONFIG']['recipe']['create_partitions']['command_set'],
 	format_partitions=current_app.config['CONFIG']['recipe']['format_partitions'],
 	bottom_menu=bottom_menu)
 
@@ -47,6 +125,23 @@ def disks_partition(part):
 	partition=partition)
 
 
+@bp.route('/disks/details/<disk>')
+def disks_details(disk):
+    """
+    Show some details about a disk.
+    """
+    blockdevs = lsblk.list_block_devices()
+    return render_template('disks_details.html', disk=disk, blockdevs=blockdevs)
+
+
+@bp.route('/disks/wipe_table/<disk>')
+def disks_wipe_table(disk):
+    """
+    Create a new partition table
+    """
+    return render_template('disks_wipe_partition.html', disk=disk)
+
+
 def build_menu():
     """
     Define menu items and paths.

src/yasi_applets/install/__init__.py

@@ -3,7 +3,7 @@ from flask import Blueprint
 bp = Blueprint('install', __name__,
                template_folder='',
                static_folder='static',
-               static_url_path='/welcome/static')
+               static_url_path='/install/static')
 
 from yasi_applets.install import routes
 

src/yasi_applets/install/routes.py

@@ -43,7 +43,7 @@ def run_script():
     status["status"] = "running"
 
     process = subprocess.Popen(
-        ["bash", "/data/jonathan/devel/highvoltage/system-installer/daemon/src/fake-install-shell.sh"],
+        ["bash", "/home/jonathan/devel/highvoltage/yasi/yasi-daemon/src/fake-install-shell.sh"],
         stdout = subprocess.PIPE,
         stderr = subprocess.STDOUT,
         text = True)

src/yasi_applets/main/header.html

@@ -4,7 +4,6 @@
 <!-- drag region class: -->
 <div id="titlebar" class="pywebview-drag-region" style="padding: 15px; margin: -15px; padding-bottom: 30px;">
 
-
 <!--
 You might be tempted to replace the unicode character by a fa-code as in the
 alternate commend below. Don't do it, it causes all kinds of artifacts and
@@ -22,7 +21,7 @@ than a proper webapp.
 
 <div style="position: absolute; top: 15px; right: 15px;">
     <a hx-get="/main/help" hx-swap="outerHTML"/> <button class="button is-light"> <i class="fa fa-question" aria-hidden="true"></i>  </button></a>
-    <a hx-get="/main/quit" hx-swap="outerHTML"/><button onclick="closeApp()" class="button is-danger" >  🗙 </button></a>
+    <a hx-trigger="click, keydown[altKey&&code=='F4'] from:body" hx-get="/main/quit" hx-swap="outerHTML"/><button class="button is-danger" >  🗙 </button></a>
 </div>
 
 </div> <!-- end pywebview-drag-region -->

src/yasi_applets/main/help.html

@@ -11,8 +11,8 @@
     <p>Some keyboard tips:<p>
     <br>
     <ul>
-    <li>ALT+n or CTRL+PGDn moves to the next page.</li>
+	<li><button>ALT</button> + <button>n</button> or <button>CTRL</button>+<button>PGDn</button> moves to the next page.</li>
-    <li>ALT+p or CTRL+PGUp moves to the previous page.</li>
+	<li><button>ALT</button> + <button>p</button> or <button>CTRL</button>+<button>PGUp</button> moves to the previous page.</li>
     </ul>
 
     <br>

src/yasi_applets/main/menu.html

@@ -2,7 +2,8 @@
   <div class="modal-background"></div>
   <div class="modal-content">
 
-    <div style="background-color: #424242;  padding: 15px; border-radius: 15px; borders: none; color: white;">
+    <div style="background-color: #424242; height: 180px;  padding: 15px; border-radius: 15px; borders: none; color: white; position: fixed; left: 15px; top: 15px; bottom: 15px;">
+
     <h1 class="is-size-4"> Main menu </h1>
 
     <br />

src/yasi_applets/main/quit.html

@@ -4,15 +4,14 @@
 
     <div style="background-color: #424242; padding: 15px; border-radius: 15px; boders: none; color: white;">
     <h1 class="is-size-4"> Exit system installer </h1>
-    <br /><p class="title is-6"><span class="tag is-danger">Quitting is not yet implemented.</span>
 
-    <br />
+    <br>
+    <p> Are you sure you want to quit? </p>
+    <br>
 
-    <p> ALT+F4 will bring up a dialog that works though. </p>
-
-    <br />
     <div class="columns">
-      <a href="/welcome"><div class="column"><button class="button is-link">Continue</button></div></a>
+      <a href="/welcome"><div class="column"><button class="button is-link">Back</button></div></a>
+      <a href=""><div class="column"><button onclick='pywebview.api.close()' class="button is-danger">Quit</button></div></a>
     </div>
   </div>
 </div>

src/yasi_applets/main/routes.py

@@ -4,7 +4,18 @@ from flask import Flask, request, session, redirect, \
 # we use this neat little trick to get config data from the main app
 from flask import current_app
 import gettext
-import dmm.lsblk as lsblk
+
+# Set up Gettext
+def set_language(LANG):
+    """
+    Sets language for this applet
+    """
+    # TODO: unhardcode this path
+    translations = gettext.translation("welcome", '/usr/share/yasi-daemon/yasi_applets/welcome/locales',
+                                       fallback=True, languages=[LANG])
+    translations.install()
+    _ = translations.gettext
+
 
 @bp.route('/')
 def index():
@@ -16,16 +27,7 @@ def index():
             "Version: Unavailable")
 
 
-@bp.route('/api/v0')
+@bp.route('/main/help',methods=['GET'])
-def apihome():
-    """
-    Not sure what this function should do, but have
-    a feeling that it should exist.
-    """
-    return ("0")
-
-
-@bp.route('/main/help',methods=['GET', 'POST', 'PUT'])
 def main_welcome():
     """
     Manages the main help system.
@@ -33,7 +35,7 @@ def main_welcome():
     return render_template('help.html')
 
 
-@bp.route('/main/quit',methods=['GET', 'POST', 'PUT'])
+@bp.route('/main/quit',methods=['GET'])
 def main_quit():
     """
     Manages the quit dialog.
@@ -41,9 +43,20 @@ def main_quit():
     return render_template('quit.html')
 
 
-@bp.route('/main/menu',methods=['GET', 'POST', 'PUT'])
+@bp.route('/main/menu',methods=['GET'])
 def main_menu():
     """
     Manages the main menu.
     """
     return render_template('menu.html')
+
+
+def build_stringlist():
+    """
+    Return all the strings that is used in this applet.
+    """
+    string_dict = {}
+    string_dict['next_text'] = _("Next")
+    string_dict['previous_text'] = _("Previous")
+    return string_dict
+

src/yasi_applets/main/static/icons/keyboard.svg

@@ -1,53 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   width="16"
-   height="16"
-   version="1.1"
-   id="svg2"
-   sodipodi:docname="keyboard.svg"
-   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <defs
-     id="defs2" />
-  <sodipodi:namedview
-     id="namedview2"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:zoom="52.375"
-     inkscape:cx="8"
-     inkscape:cy="8"
-     inkscape:window-width="1236"
-     inkscape:window-height="1041"
-     inkscape:window-x="662"
-     inkscape:window-y="199"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg2" />
-  <g
-     font-weight="400"
-     fill="#474747"
-     id="g2"
-     style="fill:#c0bfbc">
-    <path
-       d="M3.702 1C2.17 1 .984 2.32.984 3.844v8.344c0 1.524 1.185 2.843 2.718 2.843h8.58c1.532 0 2.75-1.32 2.75-2.844V3.845c0-1.525-1.218-2.844-2.75-2.844zm.782 1.031c3.526.256 5.317.134 7.047 0 .754-.058 1.532.616 1.532 1.438v7.375c0 .665-.532 1.095-1.188 1.187-2.836.397-4.753.44-7.673 0-.655-.099-1.187-.522-1.187-1.187V3.5c0-.822.714-1.524 1.469-1.469z"
-       style="line-height:normal;-inkscape-font-specification:'Bitstream Vera Sans';text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none;fill:#c0bfbc"
-       color="#bebebe"
-       font-family="Bitstream Vera Sans"
-       overflow="visible"
-       id="path1" />
-    <path
-       d="M10.564 5.977l-2.939.044.016 1 2.879-.043c.2.018.33.076.396.135.067.06.105.121.105.293l-.008.604H8.517l.037.002a1.457 1.457 0 00-1.164.43 1.558 1.558 0 00-.416 1.023c-.013.367.092.75.352 1.053.26.303.687.496 1.162.482h3.482l.051-3.59v-.004c0-.402-.16-.786-.435-1.035-.276-.249-.63-.364-.998-.393zM8.48 9.01h2.519l-.014.99H8.457c-.22.007-.302-.051-.371-.133a.553.553 0 01-.112-.367.587.587 0 01.141-.371c.079-.083.163-.134.363-.12zm2.862-5.985l-3 1 .316.95 3-1z"
-       style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none;fill:#c0bfbc"
-       color="#000"
-       font-family="sans-serif"
-       overflow="visible"
-       id="path2" />
-  </g>
-</svg>

src/yasi_applets/main/static/icons/language.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M192 64C209.7 64 224 78.3 224 96L224 128L352 128C369.7 128 384 142.3 384 160C384 177.7 369.7 192 352 192L342.4 192L334 215.1C317.6 260.3 292.9 301.6 261.8 337.1C276 345.9 290.8 353.7 306.2 360.6L356.6 383L418.8 243C423.9 231.4 435.4 224 448 224C460.6 224 472.1 231.4 477.2 243L605.2 531C612.4 547.2 605.1 566.1 589 573.2C572.9 580.3 553.9 573.1 546.8 557L526.8 512L369.3 512L349.3 557C342.1 573.2 323.2 580.4 307.1 573.2C291 566 283.7 547.1 290.9 531L330.7 441.5L280.3 419.1C257.3 408.9 235.3 396.7 214.5 382.7C193.2 399.9 169.9 414.9 145 427.4L110.3 444.6C94.5 452.5 75.3 446.1 67.4 430.3C59.5 414.5 65.9 395.3 81.7 387.4L116.2 370.1C132.5 361.9 148 352.4 162.6 341.8C148.8 329.1 135.8 315.4 123.7 300.9L113.6 288.7C102.3 275.1 104.1 254.9 117.7 243.6C131.3 232.3 151.5 234.1 162.8 247.7L173 259.9C184.5 273.8 197.1 286.7 210.4 298.6C237.9 268.2 259.6 232.5 273.9 193.2L274.4 192L64.1 192C46.3 192 32 177.7 32 160C32 142.3 46.3 128 64 128L160 128L160 96C160 78.3 174.3 64 192 64zM448 334.8L397.7 448L498.3 448L448 334.8z"/></svg>

src/yasi_applets/main/static/system-installer-dark.css

@@ -10,6 +10,7 @@ body {
     overflow: hidden;
     min-width: 1050px;
     min-height: 600px;
+    user-select: none;
 }
 
 html, body {margin: 0; height: 100%; overflow: hidden;}
@@ -23,6 +24,7 @@ html, body {margin: 0; height: 100%; overflow: hidden;}
     position: absolute;
     top: 0px;
     bottom: 0px;
+    user-select: none;
 }
 
 .applet a:link a:hover a:active {
@@ -36,7 +38,7 @@ html, body {margin: 0; height: 100%; overflow: hidden;}
 
 .applet {
     width: 100%;
-    height: 442px;
+    height: 512px;
     overflow-y: scroll;
     overflow-x: hidden;
     overflow: -moz-scrollbars-none;
@@ -45,3 +47,8 @@ html, body {margin: 0; height: 100%; overflow: hidden;}
 .radio:hover {
     color: #f1f1f1;
 }
+
+.pywebview-drag-region {
+    width: 100%;
+    height: 85px;
+}

src/yasi_applets/users/routes.py

@@ -10,7 +10,7 @@ def set_language(LANG):
     """
     Sets language for this applet
     """
-    translations = gettext.translation("users", './applets/users/locales',
+    translations = gettext.translation("users", './yasi_applets/users/locales',
                                        fallback=True, languages=[LANG])
     translations.install()
     _ = translations.gettext
@@ -101,6 +101,8 @@ def build_stringlist():
     string_dict['password_confirm'] = _("Password (confirm)")
     string_dict['password_nomatch'] = _("These passwords do now match")
     string_dict['password_tooshort'] = _("This password is too short")
+    string_dict['next_text'] = _("Next")
+    string_dict['back_text'] = _("Back")
     return string_dict
 
 

src/yasi_applets/welcome/locales/af/LC_MESSAGES/welcome.po

@@ -12,6 +12,33 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: UTF-8\n"
 
+msgid "Welcome"
+msgstr "Welkom"
+
+msgid "Users"
+msgstr "Gebruikers"
+
+msgid "Disks"
+msgstr "Skywe"
+
+msgid "Software"
+msgstr "Sagteware"
+
+msgid "Summary"
+msgstr "Opsomming"
+
+msgid "Power"
+msgstr "Krag"
+
+msgid "Internet"
+msgstr "Internet"
+
+msgid "Back"
+msgstr "Terug"
+
+msgid "Next"
+msgstr "Volgende"
+
 #: routes.py:27
 msgid "Welcome! This setup program will install Debian on to your system."
 msgstr "Welkom! Hierdie program sal jou deur die proses lei om Debian te installeer na jou sisteem."

src/yasi_applets/welcome/routes.py

@@ -14,7 +14,8 @@ def set_language(LANG):
     """
     Sets language for this applet
     """
-    translations = gettext.translation("welcome", './applets/welcome/locales',
+    # TODO: unhardcode this path
+    translations = gettext.translation("welcome", './yasi_applets/welcome/locales',
                                        fallback=True, languages=[LANG])
     translations.install()
     _ = translations.gettext
@@ -40,6 +41,7 @@ def welcome_index():
     global lang
     lang = current_app.config['CONFIG']['settings']['language']
     set_language(lang)
+    global string_dict
     string_dict = build_stringlist()
     blkid = lsblk.list_scsi_devices()
     build_menu()
@@ -54,8 +56,8 @@ def welcome_index():
     else:
         previous_step_url = menu[menu.index("users")-1]
 
-    power_button = '<button id="powerbutton" hx-get="/welcome/battery/button" hx-trigger="load, every 1s" hx-target="#powerbutton" class="button is-dark"> <span style="color: #ffffff;"> <i class="fa fa-question" aria-hidden="true"></i></span> &nbsp; Power </button>'
+    power_button = '<button id="powerbutton" hx-get="/welcome/battery/button" hx-trigger="load, every 1s" hx-target="#powerbutton" class="button is-dark"> <span style="color: #ffffff;"> <i class="fa fa-question" aria-hidden="true"></i></span> &nbsp;</button>'
-    internet_button = '&nbsp; <button id="internetbutton" class="button is-dark" hx-get="/welcome/internet/button" hx-trigger="load, every 1s" hx-target="#internetbutton"><span style="color: #ffffff;"> <i class="fa fa-question" aria-hidden="true"></i></span> &nbsp; Internet </button>'
+    internet_button = '&nbsp; <button id="internetbutton" class="button is-dark" hx-get="/welcome/internet/button" hx-trigger="load, every 1s" hx-target="#internetbutton"><span style="color: #ffffff;"> <i class="fa fa-question" aria-hidden="true"></i></span> &nbsp;</button>'
     bottom_menu = power_button + internet_button
 
 
@@ -99,7 +101,7 @@ def welcome_battery_button():
     if on_battery:
         power_button = '<button id="powerbutton hx-get="/welcome/battery/button" hx-trigger="load, every 1s" hx-target="#powerbutton" class="button is-dark"> <span style="color: #ffa45c;"> <i class="fa fa-warning" aria-hidden="true"></i></span> &nbsp; Power: Battery: ' + percentage + '%</button>'
     else:
-        power_button = '<button id="powerbutton hx-get="/welcome/battery/button" hx-trigger="load, every 1s" hx-target="#powerbutton" class="button is-dark"> <span style="color: #a0ff98;"> <i class="fa fa-check" aria-hidden="true"></i></span> &nbsp; Power </button>'
+        power_button = """<button id="powerbutton hx-get="/welcome/battery/button" hx-trigger="load, every 1s" hx-target="#powerbutton" class="button is-dark"> <span style="color: #a0ff98;"> <i class="fa fa-check" aria-hidden="true"></i></span> &nbsp;""" +  string_dict["power_text"] + "</button>"""
     return str(power_button)
 
 
@@ -135,12 +137,21 @@ def build_stringlist():
     """
     string_dict = {}
     string_dict['menu_item'] = _("Welcome")
+    # In the future, these will be loaded from their own modules
+    string_dict['menu_item_users'] = _("Users")
+    string_dict['menu_item_disks'] = _("Disks")
+    string_dict['menu_item_software'] = _("Software")
+    string_dict['menu_item_summary'] = _("Summary")
     string_dict['welcome_text'] = _("Welcome! This setup program will install Debian on to your system.")
     string_dict['confirm_text'] = _("Please confirm the following details:")
     string_dict['language_text'] = _("Language:")
     string_dict['keylayout_text'] = _("Keyboard Layout:")
     string_dict['timezone_text'] = _("Time Zone:")
     string_dict['basicsettings_text'] = _("Basic Settings:")
+    string_dict['power_text'] = _("Power")
+    string_dict['internet_text'] = _("Internet")
+    string_dict['next_text'] = _("Next")
+    string_dict['back_text'] = _("Back")
     lang_dict = {}
     lang_dict['af'] = _("Afrikaans")
     lang_dict['en'] = _("English (International)")
@@ -157,6 +168,12 @@ def build_menu():
     """
     current_app.config['CONFIG']['settings']['menu']['welcome'] = (build_stringlist()['menu_item'], "/welcome", 10)
 
+    #TODO: temporary hack: We need an automated way to translate all menu items
+    current_app.config['CONFIG']['settings']['menu']['users'] = (build_stringlist()['menu_item_users'], "/users", 20)
+    current_app.config['CONFIG']['settings']['menu']['disks'] = (build_stringlist()['menu_item_disks'], "/disks", 30)
+    current_app.config['CONFIG']['settings']['menu']['software'] = (build_stringlist()['menu_item_software'], "/software", 40)
+    current_app.config['CONFIG']['settings']['menu']['summary'] = (build_stringlist()['menu_item_summary'], "/summary", 50)
+
 
 def build_summary():
     """

src/yasi_applets/welcome/static/img/lang.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+  <defs id="defs3051">
+    <style type="text/css" id="current-color-scheme">
+      .ColorScheme-Text {
+        color:#232629;
+      }
+      </style>
+  </defs>
+  <g transform="translate(1,1)">
+    <path style="fill:currentColor" d="M 8 3 L 8 5 L 3 5 L 3 7 L 11.6 7 C 11.1 8.5 10.3 9.4 9.1855469 10.681641 C 8.4665869 9.885369 7.8700275 8.91997 7.3984375 8 L 5.8535156 8 C 6.4178656 9.26012 7.1899 10.542606 8.15625 11.617188 L 4.2207031 15.498047 L 5.3183594 16.595703 L 9.1855469 12.730469 L 11.589844 15.134766 L 12.175781 13.558594 L 10.212891 11.617188 L 10.236328 11.59375 C 11.581488 10.09397 12.43566 8.82447 13 7 L 15 7 L 15 5 L 10 5 L 10 3 L 8 3 z M 14.982422 10 L 11.503906 19 L 13.050781 19 L 13.916016 16.595703 L 17.587891 16.595703 L 18.460938 19 L 20.007812 19 L 16.529297 10 L 14.982422 10 z M 15.755859 11.703125 L 17.007812 15.050781 L 14.503906 15.050781 L 15.755859 11.703125 z " class="ColorScheme-Text"/>
+  </g>
+</svg>

src/yasi_applets/welcome/static/img/lang_w.svg

@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 24 24"
+   width="24"
+   height="24"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="lang_w.svg"
+   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="48.375"
+     inkscape:cx="11.989664"
+     inkscape:cy="12"
+     inkscape:window-width="2560"
+     inkscape:window-height="1364"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <defs
+     id="defs3051">
+    <style
+       type="text/css"
+       id="current-color-scheme">
+      .ColorScheme-Text {
+        color:#232629;
+      }
+      </style>
+  </defs>
+  <g
+     transform="translate(1,1)"
+     id="g1"
+     style="fill:#deddda">
+    <path
+       style="fill:#deddda"
+       d="M 8 3 L 8 5 L 3 5 L 3 7 L 11.6 7 C 11.1 8.5 10.3 9.4 9.1855469 10.681641 C 8.4665869 9.885369 7.8700275 8.91997 7.3984375 8 L 5.8535156 8 C 6.4178656 9.26012 7.1899 10.542606 8.15625 11.617188 L 4.2207031 15.498047 L 5.3183594 16.595703 L 9.1855469 12.730469 L 11.589844 15.134766 L 12.175781 13.558594 L 10.212891 11.617188 L 10.236328 11.59375 C 11.581488 10.09397 12.43566 8.82447 13 7 L 15 7 L 15 5 L 10 5 L 10 3 L 8 3 z M 14.982422 10 L 11.503906 19 L 13.050781 19 L 13.916016 16.595703 L 17.587891 16.595703 L 18.460938 19 L 20.007812 19 L 16.529297 10 L 14.982422 10 z M 15.755859 11.703125 L 17.007812 15.050781 L 14.503906 15.050781 L 15.755859 11.703125 z "
+       class="ColorScheme-Text"
+       id="path1" />
+  </g>
+</svg>

src/yasi_applets/welcome/welcome.html

@@ -5,34 +5,56 @@
      src="/welcome/static/img/banner.png"
      alt="Debian Image banner" />
 
+<!-- This odd, yet very efficient mechanism ensures that translations,
+     settings and summaries for each page gets loaded -->
+<div hx-get="/users" hx-target="#none" hx-trigger="load"></div>
+<div hx-get="/disks" hx-target="#none" hx-trigger="load"></div>
+<div hx-get="/software" hx-target="#none" hx-trigger="load"></div>
+<div hx-get="/summary" hx-target="#none" hx-trigger="load"></div>
+<!-- TODO: Add hook to fix next tab again after loading summary -->
+
+<div style="display: none;" id="none"></div>
+
 <p><b> {{ string_dict['welcome_text'] }} </b></p>
 <p>{{ string_dict['confirm_text'] }} </p> <br />
 
-<form action="/welcome" method="POST">
+<!-- pywebview api example
-<i class="fa fa-language" aria-hidden="true"></i> {{ string_dict['language_text'] }}
+<button onclick='pywebview.api.log("Woah dude")'>Click me</button>
-<div class="control is-link" width="180px">
+-->
+
+<div style="left: 25px; display: flex; align-items: center; gap: 1rem;">
+  <img style="width: 80px;" src="/welcome/static/img/lang_w.svg" alt="Language icon" />
+  <form action="/welcome" method="POST" style="display: flex; flex-direction: column; gap: 0.5rem;">
+  <label for="lang">{{ string_dict['language_text'] }}</label>
+  <div class="control is-link">
     <div class="select">
-    <select hx-post="/welcome" hx-target="body" name="lang" style="width: 220px">
+      <select id="lang" name="lang" hx-post="/welcome" hx-target="body" style="width: 220px;">
           {% for lang in string_dict['lang_list'] %}
-      <option value="{{lang}}" {% if lang == selected_lang %} selected=selected {% endif %}>{{ string_dict['lang_list'][lang] }}</option>
+        <option value="{{ lang }}" {% if lang == selected_lang %} selected {% endif %}>
+          {{ string_dict['lang_list'][lang] }}
+        </option>
         {% endfor %}
       </select>
     </div>
   </div>
 </form>
-<br>
+</div>
 
-<form>
+<br />
-<i class="fa fa-keyboard-o" aria-hidden="true"></i> {{ string_dict['keylayout_text'] }}
+
+<div style="left: 25px; display: flex; align-items: center; gap: 1rem;">
+  <img style="width: 80px;" src="/welcome/static/img/keyboard.svg" alt="Language icon" />
+  <form action="/welcome" method="POST" style="display: flex; flex-direction: column; gap: 0.5rem;">
+  <label for="keyboard">{{ string_dict['keylayout_text'] }}</label>
   <div class="control is-link">
     <div class="select">
-    <select hx-post="/welcome" hx-target="body" name="keyboard" style="width: 220px">
+      <select name="keyboard" hx-post="/welcome" hx-target="body" style="width: 220px;">
       <option>en-us</option>
       <option>en-uk</option>
       </select>
     </div>
   </div>
 </form>
-<br />
+</div>
 
 {% endblock %}