butter/butter-portal
7
0
Fork 0
Code Issues 16 Pull requests Projects Releases Packages Wiki Activity Actions

Update first time setup flow; update strings, include strings from figma

Browse source
This commit is contained in:
Ana Custura 2026-03-29 17:17:47 +01:00
parent 9937cc8884
commit 4c25aeabf9
23 changed files with 1451 additions and 245 deletions
Download patch file Download diff file Expand all files Collapse all files

15
app/templates/admin.html
View file

@ -19,11 +19,6 @@
<label class="label is-large">Services</label>
<div class="field checkbox" style="display: none">
{{ wtf.form_bool_field(form.enable_map_viewer) }}
<p class="help butter-form-margin">Whether map services are enabled.</p>
</div>
<div class="field checkbox">
{{ wtf.form_bool_field(form.enable_chat) }}
<p class="help butter-form-margin">Whether Matrix chat services are enabled.</p>
@ -36,10 +31,7 @@
{{ wtf.form_bool_field(form.enable_file_viewer) }}
<p class="help butter-form-margin">Whether files services via USB are enabled.</p>
</div>
<div class="field checkbox" style="display: none">
{{ wtf.form_bool_field(form.enable_app_store) }}
<p class="help">Whether app store services are enabled.</p>
</div>
<hr>
<label class="label is-large">Branding and name</label>
@ -49,11 +41,6 @@
<p class="help">This is the name shown in the UI.
Current name: {{ get_setting('butterbox_name') }}, accessed at {{ get_setting('butterbox_name') }}.local.</p>
</div>
<div class="field">
{{ wtf.form_input_field(form.butterbox_hostname, form.butterbox_hostname.errors) }}
<p class="help">This is the URL used to access the box by adding .local in your browser.
Current hostname: {{ get_setting('butterbox_hostname') }}.local.</p>
</div>
<div class="field">
<label class="label">{{ form.butterbox_logo.label }} </label>
<div class="control block">{{ form.butterbox_logo(class='label', style="width: 280px") }}</div>

23
app/templates/admin_setup.html Normal file
View file

@ -0,0 +1,23 @@
{% extends "base.html" %}
{% block content %}
{% import "bulma_wtf.html" as wtf %}
<div class="block"><h1 class="title is-large">{{ _("Admin Settings")}}</h1></div>
<div class="block grid">
<a class="cell button is-large is-responsive butter-service" href={{ url_for("step1") }}>
<div class="butter-service__content"> <p style="text-wrap: wrap;">01 {{ _("Choose Services") }}</p>
</div></a>
<a class="cell button is-large is-responsive butter-service" href={{ url_for("step2") }}>
<div class="butter-service__content"> <p style="text-wrap: wrap;">02 {{ _("Customise Portal") }}</p>
</div></a>
<a class="cell button is-large is-responsive butter-service" href={{ url_for("step3") }}>
<div class="butter-service__content"> <p style="text-wrap: wrap;">03 {{ _("Secure Portal") }}</p>
</div></a>
<a class="cell button is-large is-responsive butter-service" href={{ url_for("step4") }}>
<div class="butter-service__content"> <p style="text-wrap: wrap;">04 {{ _("Secure Admin Settings") }}</p>
</div></a>
</div>
{% endblock %}

2
app/templates/base.html
View file

@ -31,7 +31,7 @@
<div id="navbarBasic" class="navbar-menu">
<div class="navbar-start">
<a href="{{ url_for('admin') }}" class="navbar-item">Admin
<a href="{{ url_for('admin') }}" class="navbar-item">{{ _("Admin Settings") }}
</a>
</div>
<div class="navbar-end">

2
app/templates/bulma_wtf.html
View file

@ -11,8 +11,8 @@
{% macro form_bool_field(field) %}
<div class="control block">
{{ field(class='checkbox', type="checkbox", style="display: inline") }}
{{ field.label(class='label')}}
{{ field(class='checkbox', type="checkbox") }}
{% for error in errors %}
<p class="help is-danger">{{ error }}</p>
{% endfor %}

16
app/templates/first_setup_main_page.html Normal file
View file

@ -0,0 +1,16 @@
{% extends "base.html" %}
{% block content %}
{% import "bulma_wtf.html" as wtf %}
<div class="block"><h1 class="title is-large">{{ _("Set up your box")}}</h1></div>
<div class="block">
<p class="grey">{{ _("Version")}} 1.0.1</p>
</div>
<div class="block">
<p class="subtitle">{{ _("You have full control over the services on this box and its security. Continue to Admin Settings to personalize your setup.")}}</p>
<button class="button butter-centered"><a href={{ url_for("admin_setup") }}> {{ _("Continue")}}</a></button>
</div>
{% endblock %}

5
app/templates/index.html
View file

@ -1,8 +1,9 @@
{% extends "base.html" %}
{% block content %}
<div class="block"><h1 class="title is-large butter-title">Welcome.</h1></div>
<div class="block"><p class="subtitle butter-title"> View and download the information you want from this offline box.</p></div>
<div class="block"><h1 class="title is-large butter-title">{{ _("Welcome.") }}</h1></div>
<div class="block"><p class="subtitle butter-title"> {{ _("View and download the information you want from this offline
box.")}}</p></div>
<div class="block grid">
{% for service in services %}

2
app/templates/login.html
View file

@ -3,7 +3,7 @@
{% block content %}
{% import "bulma_wtf.html" as wtf %}
<h1>Sign In</h1>
<h1>{{ _("Sign In")}}</h1>
<form action="" method="post" novalidate>
{{ form.hidden_tag() }}
<div class="field">{{ wtf.form_input_field(form.username) }}</div>

8
app/templates/messaging.html
View file

@ -1,19 +1,19 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title is-large butter-title">{{ _('Secure Messaging') }}</h1>
<h1 class="title is-large butter-title">{{ _('Secure Messenger') }}</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>
<p> {{ _("To use secure messaging, install Delta Chat and then return to this page to create your local offline account.")}}</p>
</div>
<a href="{{ url_for('static', filename='DeltaChat_2.35.0_APKPure.apk') }}"><button class="button is-link is-fullwidth block">
<p>Step 1<br> Download and install</p>
<p>{{ _("Step 1") }}<br> {{ _("Download and install") }}</p>
</button>
</a>
<div class="block"></div>
<form action="{{ url_for('generate_random_deltachat_credentials') }}" method="post">
<button type="submit" class="button is-link is-fullwidth block">
<p>Step 2 <br> Create offline account </p>
<p>{{ _("Step 2") }} <br> {{ _("Create offline account") }} </p>
</button>
</form>
{% endblock %}

11
app/templates/setup_complete.html Normal file
View file

@ -0,0 +1,11 @@
{% extends "base.html" %}
{% block content %}
<div class="block"><h1 class="title is-large">{{ _("Changes have been applied ") }}.</h1></div>
<div class="block">
<p class="subtitle"> {{ _("Continue to your box portal. The portal is the view others will see when they connect to the box hotspot.") }}</p>
<button class="button butter-centered"><a href={{ url_for("index") }}> {{ _("Continue to Portal")}}</a></button>
</div>
{% endblock %}

8
app/templates/share.html
View file

@ -1,16 +1,16 @@
{% extends "base.html" %}
{% block content %}
<h1 class="title is-large butter-title">Share access to {{get_setting('butterbox_name')}}.</h1>
<h1 class="title is-large butter-title">{{ _("Share access to")}} {{get_setting('butterbox_name')}}.</h1>
<div class="block butter-centered">
{% if display_wifi_password %}
<p>Connect to WiFi name: "{{ get_setting('ssid') }}" with password: "{{ get_setting('wifi_password') }}".</p>
<p>{{ _("Connect to WiFi name:")}} "{{ get_setting('ssid') }}" {{ _("with password:")}} "{{ get_setting('wifi_password') }}".</p>
{% else %}
<p>Your WiFi name is "{{ get_setting('ssid') }}". You will be able to join without a password.</p>
<p>{{ _("Your WiFi name is")}} "{{ get_setting('ssid') }}". {{ _("You will be able to join without a password.")}}</p>
{% endif %}
<p>You can also use the following QR code to join:</p>
<p>{{ _("You can also use the following QR code to join:")}}</p>
</div>
<div class="block butter-centered">
<img class="image is-256x256" style="margin: 0 auto" src="{{ url_for('static', filename='images/wifi_qr_code.png') }}">

31
app/templates/step1.html Normal file
View file

@ -0,0 +1,31 @@
{% extends "base.html" %}
{% block content %}
<div class="block"><h1 class="title is-large">{{ _("Choose Services") }}.</h1></div>
<div class="block"><p class="subtitle"> {{ _("To learn more about individual services and what is required to run them, visit the Help Center. You can change the services anytime.") }}</p></div>
<div class="block grid">
{% import "bulma_wtf.html" as wtf %}
<form action="" method="post" enctype="multipart/form-data" novalidate >
{{ form.hidden_tag() }}
<div class="field checkbox">
{{ wtf.form_bool_field(form.enable_chat) }}
<p class="help butter-form-margin">{{ _("Whether Matrix chat services are enabled.")}}</p>
</div>
<div class="field checkbox">
{{ wtf.form_bool_field(form.enable_deltachat) }}
<p class="help butter-form-margin">{{ _("Whether messaging using DeltaChat is enabled.")}}</p>
</div>
<div class="field checkbox">
{{ wtf.form_bool_field(form.enable_file_viewer) }}
<p class="help butter-form-margin">{{ _("Whether files services via USB are enabled.")}}</p>
</div>
<div class="control block">
<button class="button"> <a href={{ url_for("admin_setup") }}>{{ _("Back") }}</a></button>
{{ form.submit( class="button is-link") }}
</div>
</form>
</div>
{% endblock %}

35
app/templates/step2.html Normal file
View file

@ -0,0 +1,35 @@
{% extends "base.html" %}
{% block content %}
<div class="block"><h1 class="title is-large">{{ _("Customise Portal") }}.</h1></div>
<div class="block"><p class="subtitle"> {{ _("The URL is the address users will enter into a browser after they connect to the box network. From here, they can view the portal. This cannot be changed later.") }}</p></div>
<div class="block grid">
{% import "bulma_wtf.html" as wtf %}
<form action="" method="post" enctype="multipart/form-data" novalidate >
{{ form.hidden_tag() }}
<div class="field">
{{ wtf.form_input_field(form.butterbox_name, form.butterbox_name.errors) }}
<p class="help">{{ _("This is the name shown in the UI.
Current name:")}} {{ get_setting('butterbox_name') }}, {{ _("accessed at")}} {{ get_setting('butterbox_name') }}.local.</p>
</div>
<div class="field">
{{ wtf.form_input_field(form.butterbox_hostname, form.butterbox_hostname.errors) }}
<p class="help">{{ _("This is the URL used to access the box by adding .local in your browser.
Current hostname:")}} {{ get_setting('butterbox_hostname') }}.local.</p>
</div>
<div class="field">
<label class="label">{{ form.butterbox_logo.label }} </label>
<div class="control block">{{ form.butterbox_logo(class='label', style="width: 280px") }}</div>
{{ wtf.field_errors(form.butterbox_logo.errors) }}
<div class="block"><p class="help">{{ _("This is the logo shown in the UI. Current logo:")}}</p></div>
<img src="{{ get_setting('butterbox_logo') }}" style="height: 50px">
</div>
<div class="control block">
<button class="button"> <a href={{ url_for("step1") }}>{{ _("Back") }}</a></button>
{{ form.submit( class="button is-link") }}
</div>
</form>
</div>
{% endblock %}

59
app/templates/step3.html Normal file
View file

@ -0,0 +1,59 @@
{% extends "base.html" %}
{% block content %}
<div class="block"><h1 class="title is-large">{{ _("Secure Portal") }}.</h1></div>
<div class="block grid">
{% import "bulma_wtf.html" as wtf %}
<form action="" method="post" enctype="multipart/form-data" novalidate >
{{ form.hidden_tag() }}
{% if raspap_installed %}
<div class="field">
{{ wtf.form_input_field(form.ssid, form.ssid.errors) }}
<p class="help"> {{ _("This is the name of the advertised Wi-Fi network. Current SSID:")}} {{ get_setting('ssid') }}</p>
</div>
<div class="field password">
{{ wtf.form_input_field(form.wifi_password, form.wifi_password.errors) }}
<p class="help"> {{ _("This is the secret key needed to connect to the Wi-Fi network. By default, this is not set
and everyone can join.
Current password:")}} {{ get_setting('wifi_password') or _('Not set') }}</p>
</div>
<div class="field checkbox">
{{ wtf.form_bool_field(form.enable_access_point) }}
<p class="butter-form-margin help">{{ _("Whether this box will advertise a Wi-Fi network.")}}</p>
</div>
<div class="field checkbox">
{{ wtf.form_bool_field(form.enable_wifi_sharing) }}
<p class="butter-form-margin help">{{ _("Whether a share button for the Wi-Fi network is available.")}}</p>
</div>
{% else %}
<div class="block"><p class="subtitle"> {{ _("Access point is only enabled when using a Raspberry Pi.") }} </p></div>
<div style="display: none">
<div class="field">
{{ wtf.form_input_field(form.ssid, form.ssid.errors) }}
<p class="help"> This is the name of the advertised Wi-Fi network. Current SSID: {{ get_setting('ssid') }}</p>
</div>
<div class="field password">
{{ wtf.form_input_field(form.wifi_password, form.wifi_password.errors) }}
<p class="help"> This is the secret key needed to connect to the Wi-Fi network. By default, this is not set and everyone can join.
Current password: {{ get_setting('wifi_password') or 'Not set' }}</p>
</div>
<div class="field checkbox">
{{ wtf.form_bool_field(form.enable_access_point) }}
<p class="butter-form-margin help">Whether this box will advertise a Wi-Fi network.</p>
</div>
<div class="field checkbox">
{{ wtf.form_bool_field(form.enable_wifi_sharing) }}
<p class="butter-form-margin help">Whether a share button for the Wi-Fi network is available.</p>
</div>
</div>
{% endif %}
<div class="control block">
<button class="button"> <a href={{ url_for("step2") }}>{{ _("Back") }}</a></button>
{{ form.submit( class="button is-link") }}
</div>
</form>
</div>
{% endblock %}

60
app/templates/step4.html Normal file
View file

@ -0,0 +1,60 @@
{% extends "base.html" %}
{% block content %}
<div class="block"><h1 class="title is-large">{{ _("Secure Admin Settings") }}.</h1></div>
<div class="block grid">
{% import "bulma_wtf.html" as wtf %}
<form action="" method="post" enctype="multipart/form-data" novalidate >
{{ form.hidden_tag() }}
<div class="control field">
{{ wtf.form_password_field(form.admin_password, form.admin_password.errors) }}
<p class="block help">{{ _("Password for accessing this admin interface.")}}</p>
</div>
<div class="control block">
<label class="label">{{ form.root_account_settings.label }} </label>
{% for subfield in form.root_account_settings %}
<label class="radio butter-form-margin">
{% if get_setting('root_account_settings') == subfield._value() %}
<input id='{{subfield.id}}' type='radio' name='{{subfield.name}}' value='{{subfield._value()}}' checked/>
{% else %}
<input id='{{subfield.id}}' type='radio' name='{{subfield.name}}' value='{{subfield._value()}}'/>
{% endif %}
{{ subfield.label }}
</label>
{% endfor %}
{{ wtf.field_errors(form.root_account_settings.errors)}}
<p class="block help">{{ _("You need to set a root password, and choose whether you want to lock the root
account.")}}</p>
</div>
<div class="control field">
{{ wtf.form_password_field(form.root_password, form.root_password.errors) }}
<p class="help">{{ _("Password for accessing the root account.")}}</p>
</div>
<div class="control block">
<label class="label">{{ form.ssh_access_settings.label }} </label>
{% for subfield in form.ssh_access_settings %}
<label class="radio butter-form-margin">
{% if get_setting('ssh_access_settings') == subfield._value() %}
<input id='{{subfield.id}}' type='radio' name='{{subfield.name}}' value='{{subfield._value()}}' checked/>
{% else %}
<input id='{{subfield.id}}' type='radio' name='{{subfield.name}}' value='{{subfield._value()}}'/>
{% endif %}
{{ subfield.label }}
</label>
{% endfor %}
{{ wtf.field_errors(form.ssh_access_settings.errors) }}
</div>
<div class="control block">
<button class="button"> <a href={{ url_for("step3") }}>{{ _("Back") }}</a></button>
{{ form.submit( class="button is-link") }}
</div>
</form>
</div>
{% endblock %}

11
app/templates/usb-file-viewer.html
View file

@ -8,9 +8,9 @@
<thead>
<tr>
<th></th>
<th>File Name</th>
<th class="file-viewer-date-modified">Date modified</th>
<th>Download</th>
<th>{{ _("File Name")}}</th>
<th class="file-viewer-date-modified">{{ _("Date modified")}}</th>
<th>{{ _("Download") }}</th>
</tr>
</thead>
<tbody>
@ -27,7 +27,7 @@
<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>
<td><a href="{{ url_for('serve_file', filepath=f.path) }}">{{ _("Download") }}</a></td>
{% endif %}
{% if f.is_dir %}
<td></td>
@ -36,9 +36,10 @@
{% endfor %}
{% if not render_files %}
<tr>
<td colspan="4"> <p class="butter-centered has-text-grey">Directory is empty</p></td>
<td colspan="4"> <p class="butter-centered has-text-grey">{{ _("Directory is empty") }}</p></td>
</tr>
{% endif %}
</tbody>
</table>
</div>
{% endblock %}