Some more initial UI work, initial translation support

src/applets/disks/disks.html

@@ -26,7 +26,9 @@
 
 <div class="columns" width="100%">
 	<div class="column"><p> Proposed layout: </p></div>
-	<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 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>