Add QR code for wifi on index page, some responsive design fixes

app/forms.py

@@ -14,7 +14,7 @@ class LoginForm(FlaskForm):
 class SettingsForm(FlaskForm):
     # Access point settings
     ssid = StringField('SSID', validators=[DataRequired()])
-    wifi_password = PasswordField(_l('WiFi Password'))
+    wifi_password = StringField(_l('WiFi Password'))
     enable_access_point = BooleanField(_l('Enable Access Point'))
     # Customisation settings
     butterbox_name = StringField(_l('Butterbox Name'), validators=[DataRequired()])

app/routes.py

@@ -15,6 +15,8 @@ import secrets
 import string
 import glob
 import time
+import qrcode
+from datetime import datetime
 
 def gen_username() -> str:
     words = top_n_list("en", 5000)
@@ -38,6 +40,12 @@ def get_file_icon_url(path: str) -> str:
                       'ppt', 'pptx']:
             return url_for("static", filename=f"images/extension-icons/ext-{suffix}.svg")
     return url_for("static", filename=f"images/extension-icons/ext-unknown.svg")
+def get_last_modified(path: str) -> str:
+    mod_time = time.ctime(os.path.getmtime(path))
+    #print(mod_time)
+    #dt = datetime.strptime(mod_time, "%a %b %d %H:%M:%S %Y")
+    #formatted_time = dt.strftime("%Y-%m-%d %H:%M")
+    return mod_time
 
 def get_files_in_path(path: str):
     file_list = []
@@ -46,7 +54,7 @@ def get_files_in_path(path: str):
         file_list = [
             {"name": x.replace(path, "").strip("/"), "path": x, "is_file": os.path.isfile(x),
              "is_dir": os.path.isdir(x),
-             "filetype": get_file_suffix(x), "last_modified": time.ctime(os.path.getmtime(x)),
+             "filetype": get_file_suffix(x), "last_modified": get_last_modified(x),
              "icon_url": get_file_icon_url(x),
              "relative_path": x.replace(app.config["BUTTERBOX_USB_PATH"], "")} for x
             in list_of_files]
@@ -71,6 +79,16 @@ def dump_settings(filename: str) -> None:
 @app.route('/')
 @app.route('/index')
 def index():
+    display_wifi_password = False
+    wifi_password = get_setting("wifi_password")
+    if wifi_password:
+        wifi_ssid = get_setting("ssid")
+        wifi_encryption_type = "WPA2"
+        img = qrcode.make(f"WIFI:T:{wifi_encryption_type};S:{wifi_ssid};P:{wifi_password};;")
+        img.save("app/static/images/wifi_qr_code.png")
+        display_wifi_password = True
+    else:
+        os.remove("app/static/images/wifi_qr_code.png")
     enable_chat = get_setting("enable_chat")
     enable_app_store = get_setting("enable_app_store")
     enable_map_viewer = get_setting("enable_map_viewer")
@@ -98,7 +116,7 @@ def index():
                              "name": name,
                              "image": url_for("static", filename="images/explore-icon.svg"),
                              "url": url_for("files", path=""),})
-    return render_template('index.html', title='Home', get_setting=get_setting, services=service_array)
+    return render_template('index.html', title='Home', get_setting=get_setting, services=service_array, display_wifi_password=display_wifi_password)
 
 @app.route('/files/', defaults={'path': ''})
 @app.route('/files/<path:path>')

app/static/butter_styles.css

@@ -19,3 +19,10 @@
     padding: 10px;
   }
 }
+@media (max-width: 468px) {
+
+  .file-viewer-date-modified {
+        display: none;
+    }
+
+}

app/templates/admin.html

@@ -1,10 +1,16 @@
 {% extends "base.html" %}
 
 {% block content %}
-    <h1>{{ _('Application Settings') }}</h1>
+    <h1 class="title is-large butter-title">{{ _('Application Settings') }}</h1>
+
 {% import "bulma_wtf.html" as wtf %}
     <form action="" method="post" enctype="multipart/form-data" novalidate >
         {{ form.hidden_tag() }}
+        <p> {{ form.submit( class="button is-link") }}
+            {% if config['SETTINGS_CHANGED'] %}
+            {{ form.apply_changes(class="button is-warning") }}
+            {% endif %}
+        </p>
         <div class="field">
             {{ wtf.form_input_field(form.ssid) }}
             <p class="help"> This is the name of the advertised Wi-Fi network. Current SSID: {{ get_setting('ssid') }}</p>
@@ -56,11 +62,7 @@
             <p class="help">This is the logo shown in the UI. Current logo: <br>
         <img src="{{ get_setting('butterbox_logo') }}" style="height: 50px"> </p>
         </div>
-        <p> {{ form.submit( class="button is-link") }}
-            {% if config['SETTINGS_CHANGED'] %}
-            {{ form.apply_changes(class="button is-warning") }}
-            {% endif %}
-        </p>
+
     </form>
 
     <a href="{{ url_for('logout') }}">Logout</a>

app/templates/base.html

@@ -19,7 +19,7 @@
         <p style="display: inline; padding-inline-start: 10px;">{{ get_setting('butterbox_name') }}</p>
     </div>
 
-<div class="content"> {% block content %}{% endblock %} </div>
+<div class="content"> </div>
     {% with messages = get_flashed_messages() %}
         {% if messages %}
     <div class="notification">
@@ -31,6 +31,9 @@
         </div>
         {% endif %}
         {% endwith %}
+
+    {% block content %}{% endblock %}
+
 </div>
     </body>
 </html>

app/templates/index.html

@@ -3,6 +3,7 @@
 {% block content %}
     <h1 class="title is-large butter-title">Hi, welcome to the {{get_setting('butterbox_name')}}.</h1>
     <p class="subtitle butter-title"> View and download the information you want from this offline box.</p>
+
 <div class="grid">
     {% for service in services %}
         <a class="cell button is-large is-responsive butter-service" href={{ service.url }}>
@@ -11,7 +12,14 @@
         </div>
      </a>
     {% endfor %}
-
-
 </div>
+</hr>
+    {% if display_wifi_password %}
+    <div class="block" style="align-content: center; text-align: center;">
+        <p>Connect to this box with wifi:
+        <img class="image is-128x128" style="margin: 0 auto" src="{{ url_for('static', filename='images/wifi_qr_code.png') }}">
+        </p>
+    </div>
+    {% endif %}
+
 {% endblock %}

app/templates/messaging.html

@@ -1,6 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
+    <h1 class="title is-large butter-title">{{ _('Secure Messaging') }}</h1>
 
 <div class="block">
     <p> To use secure messaging, install Delta Chat and then return to this page to create your local offline account</p>

app/templates/usb-file-viewer.html

@@ -1,13 +1,15 @@
 {% extends "base.html" %}
 
 {% block content %}
+    <h1 class="title is-large butter-title">{{ _('File Viewer') }}</h1>
+
 <div>
-<table class="table">
+<table class="table" style="margin: 0 auto">
   <thead>
     <tr>
        <th></th>
       <th>File Name</th>
-      <th>Date modified</th>
+      <th class="file-viewer-date-modified">Date modified</th>
         <th>Download</th>
     </tr>
   </thead>
@@ -23,7 +25,7 @@
         <td>{{ f.name}}</td>
         {% endif %}
 
-        <td>{{ f.last_modified}}</td>
+        <td class="file-viewer-date-modified">{{ f.last_modified}}</td>
           {% if f.is_file %}
            <td><a href="{{ url_for('serve_file', filepath=f.path) }}">Download</a></td>
           {% endif %}