Some more initial UI work, initial translation support

README.md

@@ -1,20 +1,20 @@
-Dependencies
+# Welcome
+
+Welcome to System Installer, a powerful toolkit for setting up an installer for operating systems.
+
+Dependencies:
  - flask
- - flask-babel
  - pytest
  - coverage
- - libjs-htmx
- - libjs-material-design-lite
- - xapp-gtk3-module
+ - libxapp-gtk3-module
+ - gettext
 
+Recommended:
+ - libjs-htmx (needed if the web front-end is to be used)
+ - sass-stylesheets-bulma (needed if the web front-end is to be used)
 
 ## Development
 
 ### Translations
 
-Upstream PyBabel documentation:
-https://python-babel.github.io/flask-babel/index.html#translating-applications
-
-in the ./daemon directory, run the following to regenerate the translations file:
-
-```pybabel extract -F babel.cfg -o messages.pot .```
+-- TODO --

src/applets/disks/disks.html

@@ -26,7 +26,9 @@
 
 <div class="columns" width="100%">
 	<div class="column"><p> Proposed layout: </p></div>
+	<div style="position: absolute; right: 15px;">
         	<div class="column is-link"><button class="button iis-info"> <img src="/static/icons/tab-new-symbolic.svg"> &nbsp; Add Disk or Filesystem </button></div>
+	</div>
 </div>
 <div style=""> <!-- partition bars -->
 <div style="background-color: gray; padding: 10px; border-radius: 10px;">

src/applets/users/routes.py

@@ -1,11 +1,24 @@
 from applets.software import bp
 from flask import Flask, request, session, redirect, \
      url_for, render_template, flash, Blueprint
+# we use this neat little trick to get config data from the main app
+from flask import current_ap
 
 
-@bp.route('/users')
-def users_root():
+def build_stringlist():
     """
-    Users screen for the webui.
+    Return all the strings that is used in this applet.
     """
-    return render_template('users.html')
+    string_dict = {}
+    string_dict['initial_user_text'] = _("Let's set up an initial user.")
+    string_dict['full_name'] = _("Full Name")
+    string_dict['user_name'] = _("Username")
+    string_dict['user_name_available'] = _("This username is available")
+    string_dict['user_name_not_available'] = _("This username is not available")
+    string_dict['user_name_reserved'] = _("This username is reserved by the system")
+    string_dict['user_name_characters'] = _("The username must be one word, lowercase, with no special characters")
+    string_dict['password'] = _("Password")
+    string_dict['password_confirm'] = _("Password (confirm)")
+    string_dict['password_nomatch'] = _("These passwords do now match")
+    string_dict['password_tooshort'] = _("This password is too short")
+    return string_dict

src/applets/users/users.html

@@ -1,7 +1,7 @@
 {% extends "layout.html" %}
 {% block body %}
 
-<p><b> Let's set up an initial user. </b></p>
+<p><b> {{ string_dict['initial_user_text'] }} </b></p>
 
 <br>
 
@@ -10,14 +10,14 @@
 <div style="margin-left: 180px;">
 
 <div class="field">
-  <label>Full Name</label> <div class="control"><input class="input" type="text" placeholder="Text input">
+	<label>{{ string_dict['full_name'] }}</label> <div class="control"><input class="input" type="text" placeholder="Text input">
   </div>
 </div>
 
 <div class="field">
-  <label>Username</label>
+	<label>{{ string_dict['user_name'] }}</label>
   <div class="control has-icons-left has-icons-right">
-    <input class="input is-success" type="text" placeholder="Text input" value="user">
+    <input class="input is-success" type="text" placeholder="Text input" value="" hx-get="/users/username-check" hx-trigger="keyup changed delay:500ms" hx-target="#username-status">
     <span class="icon is-small is-left">
       <i class="fas fa-user"></i>
     </span>
@@ -25,20 +25,22 @@
       <i class="fas fa-check"></i>
     </span>
   </div>
-  <p class="help is-success">This username is available</p>
-</div>
-
-<div class="field">
-  <label class="password">Password</label>
-  <div class="control">
-    <input class="input" type="password" placeholder="Enter password">
+  <div id="username-status">
+  <p class="help is-success">{{ string_dict['user_name_available'] }}</p>
   </div>
 </div>
 
 <div class="field">
-  <label class="password">Password (confirm)</label>
+<label class="password">{{ string_dict['password'] }}</label>
   <div class="control">
-    <input class="input" type="password" placeholder="Enter password (confirm)">
+	  <input class="input" type="password" placeholder="{{ string_dict['password'] }}">
+  </div>
+</div>
+
+<div class="field">
+	<label class="password">{{ string_dict['password_confirm'] }}</label>
+  <div class="control">
+	  <input class="input" type="password" placeholder="{{ string_dict['password_confirm'] }}">
   </div>
 </div>
 

src/applets/welcome/routes.py

@@ -1,12 +1,21 @@
 from applets.welcome import bp
 from flask import Flask, request, session, redirect, \
      url_for, render_template, flash, Blueprint
+# 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
-en_i18n = gettext.translation("welcome", './locales', fallback=True, languages=['af', 'en'])
-en_i18n.install()
+def set_language(LANG):
+    """
+    Sets language for this applet
+    """
+    translations = gettext.translation("welcome", './applets/welcome/locales', fallback=True, languages=[LANG])
+    translations.install()
+    _ = translations.gettext
+
+set_language('en')
 
 @bp.route('/welcome',methods=['GET', 'POST', 'PUT'])
 def welcome_index():
@@ -14,9 +23,20 @@ def welcome_index():
     The page you'd get if you access the root of
     this app in a browser.
     """
+    if request.method == 'POST':
+        if "lang" in request.form.keys():
+            current_app.config['CONFIG']['global_settings']['language'] = request.form["lang"]
+            LANG = current_app.config['CONFIG']['global_settings']['language']
+            set_language(LANG)
+            FORMLANG = request.form["lang"]
+        if "keyboard" in request.form.keys():
+            print(request.form["keyboard"])
+        if "timezone" in request.form.keys():
+            print(request.form["timezone"])
+    lang = current_app.config['CONFIG']['global_settings']['language']
     blkid = lsblk.list_scsi_devices()
     string_dict = build_stringlist()
-    return render_template('welcome.html', string_dict=string_dict)
+    return render_template('welcome.html', string_dict=string_dict, selected_lang=lang)
 
 
 def build_stringlist():
@@ -29,5 +49,12 @@ def build_stringlist():
     string_dict['language_text'] = _("Language:")
     string_dict['keylayout_text'] = _("Keyboard Layout:")
     string_dict['timezone_text'] = _("Time Zone:")
+    lang_dict = {}
+    lang_dict['af'] = _("Afrikaans")
+    lang_dict['en'] = _("English (International)")
+    lang_dict['en-us'] = _("English (United States)")
+    lang_dict['en-uk'] = _("English (United Kingdom)")
+    lang_dict['en-za'] = _("English (South Africa)")
+    string_dict['lang_list'] = lang_dict
     return string_dict
 

src/applets/welcome/welcome.html

@@ -1,38 +1,43 @@
 {% extends "layout.html" %}
 {% block body %}
 
-<img style="top: 10px; width: 100%;" src="/static/applets/welcome/img/banner.png" alt="Debian Image banner" />
+<img style="width: 100%; border-radius: 8px;" src="/static/applets/welcome/img/banner.png" alt="Debian Image banner" />
+
 <p><b> {{ string_dict['welcome_text'] }} </b></p>
 <p>{{ string_dict['confirm_text'] }} </p>
 
+<form action="/welcome" method="POST">
 <img src="/static/icons/keyboard.svg" /> {{ string_dict['language_text'] }} 
 <div class="control is-link" width="180px">
   <div class="select">
-    <select style="width: 180px">
-      <option>English</option>
-      <option>Afrikaans</option>
+    <select hx-post="/welcome" hx-target="body" name="lang" 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>
+      {% endfor %}
     </select>
   </div>
 </div>
-
+</form>
 <br>
 
+<form>
 <img src="/static/icons/keyboard.svg" /> {{ string_dict['keylayout_text'] }}
 <div class="control is-link">
   <div class="select">
-    <select style="width: 180px">
+    <select hx-post="/welcome" hx-target="body" name="keyboard" style="width: 220px">
       <option>en-us</option>
       <option>en-uk</option>
     </select>
   </div>
 </div>
-
+</form>
 <br />
 
+<form>
 <img src="/static/icons/keyboard.svg" /> {{ string_dict['timezone_text'] }}
 <div class="control is-link">
   <div class="select">
-    <select style="width: 180px">
+    <select hx-post="/welcome" hx-target="body" name="timezone" style="width: 220px">
       <option>Africa/Johannesburg</option>
       <option>UTC</option>
     </select>
@@ -40,6 +45,7 @@
 </div>
 
 
+</form>
 
 </div>
 </div>

src/static/system-installer.css

@@ -1,13 +0,0 @@
-body {
-    display: flex;
-    font-family: Noto Sans;
-    min-width: 1150px;
-    min-height: 600px;
-    overflow: hidden;
-}
-
-
-html {
-    /* Overwrite the white that is set by bulma.css */
-    background-color: transparent;
-}

src/static/system-installer.css

@@ -0,0 +1 @@
+system-installer-dark.css

src/system-installer-daemon

@@ -9,24 +9,32 @@ from waitress import serve
 import logging
 import dmm.lsblk as lsblk
 import importlib
+import yaml
 
 # configuration
 VERSION = "0.00"
-BABEL_TRANSLATION_DIRECTORIES="translations"
-BABEL_DOMAIN="translations"
 SECRET_KEY = "exampls"
 DEV_MODE = True
 APPS = "main welcome users disks software summary"
+CONFIGFILE="templates/dmm-installer-template.yaml"
 
 if DEV_MODE:
     print("Note: Starting in devmode!")
     DEBUG = True
     tracebacks = True
 
+# import config
+global config
+config_contents = open(CONFIGFILE, "r")
+config = yaml.safe_load(config_contents)
+
+print(type(config))
+print(config)
+
 # create our application in flask
 app = Flask(__name__)
 app.config.from_object(__name__)
-
+app.config['CONFIG'] = config 
 
 # Register blueprints here
 for APP in APPS.split(" "):

src/system-installer-web-client

@@ -14,7 +14,7 @@ def on_closed():
 window = webview.create_window('System Installer', LOCATION,
                       transparent=True, easy_drag=False, frameless=True,
                       width=1050, focus=True, zoomable=True,
-                      confirm_close=True)
+                      confirm_close=True, resizable=True)
 
 window.events.closed += on_closed
 webview.start()

src/templates/header.html

@@ -1,14 +1,16 @@
 <!-- Header -->
-<div id="titlebar" class="pywebview-drag-region" style="padding-bottom: 10px;">
-<span>
+<div id="titlebar" class="pywebview-drag-region" style="padding: 15px; margin: -15px; padding-bottom: 30px;"> 
     <button class="button is-link"> ☰ </button>
     <a href="/welcome"><button class="button is-{% if request.path == "/welcome" %}info{% else %}dark{% endif %}">Welcome</button></a>
     <a href="/users"><button class="button is-{% if request.path == "/users" %}info{% else %}dark{% endif %}">Users</button></a>
     <a href="/disks"><button class="button is-{% if request.path == "/disks" %}info{% else %}dark{% endif %}">Disks</button></a>
     <a href="/software"><button class="button is-{% if request.path == "/software" %}info{% else %}dark{% endif %}">Software</button></a>
     <a href="/summary"><button class="button is-{% if request.path == "/summary" %}info{% else %}dark{% endif %}">Summary</button></a>
-    <button onclick="closeApp()" class="button is-danger" style="float: right;"> 🗙 </button>
-    <a href="/help"> <button class="button is-light" style="float: right; margin-right: 5px;"> <b> ? </b> </button></a>
-</span>
+
+<div style="position: absolute; top: 15px; right: 15px;">
+    <a href="/help"> <button class="button is-light"> <b> ? </b> </button></a>
+    <button onclick="closeApp()" class="button is-danger" >  🗙 </button>
+</div>
+
 </div> <!-- end pywebview-drag-region -->
 <!-- End Header -->

src/templates/layout.html

@@ -5,20 +5,22 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="/static/bulma.css" rel="stylesheet">
   <link href="/static/system-installer.css" rel="stylesheet">
+  <link rel="shortcut icon" href="/static/icons/blippie.png" type="image/x-icon">
   <script src="/static/htmx.min.js" crossorigin="anonymous"></script>
 </head>
-<body style="overflow: hidden; max-height: 450px;">
-
-<div style="width: 1050px; height: 600px; border-radius: 10px; padding: 13px; overflow: hidden;" class="notification is-dark">
+<body>
 
+<div class="frame">
 {% include "header.html" %}
 
-<div style="height: 450px; overflow-y: scroll">
+<div class="applet">
 {% block body %}
 {% endblock %}
 </div>
 
 {% include "footer.html" %}
 
+</div> <!-- class "frame" -->
+
 </body>
 </html>