PeachCloud
/
peach-workspace
3
2
Fork 1
Code Issues 17 Pull Requests Projects Releases Wiki Activity

update templates to use theme variables and classes

This commit is contained in:
glyph 2022-02-03 16:31:17 +02:00
parent 62191e5509
commit 4e6bb15a23
12 changed files with 104 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
peach-web/src/context/dns.rs
View File

@ -11,6 +11,7 @@ pub struct ConfigureDNSContext {
pub title: Option<String>,
pub flash_name: Option<String>,
pub flash_msg: Option<String>,
pub theme: Option<String>,
}
impl ConfigureDNSContext {
@ -31,6 +32,7 @@ impl ConfigureDNSContext {
title: None,
flash_name: None,
flash_msg: None,
theme: None,
}
}
}

11
peach-web/templates/help.html.tera
View File

@ -2,16 +2,9 @@
{%- block card %}
<!-- HELP MENU -->
<div class="card center">
<div class="card-container">
<div class="capsule capsule-container border-info">
<!-- FLASH MESSAGE -->
<!-- check for flash message and display accordingly -->
{%- if flash_msg and flash_name == "success" %}
<!-- display success message -->
<div class="center-text flash-message font-success" style="padding-left: 5px;">{{ flash_msg }}.</div>
{%- elif flash_msg and flash_name == "error" %}
<!-- display error message -->
<div class="center-text flash-message font-failure" style="padding-left: 5px;">{{ flash_msg }}.</div>
{%- endif %}
{% include "snippets/flash_message" %}
</div>
</div>
{%- endblock card -%}

26
peach-web/templates/home.html.tera
View File

@ -5,27 +5,39 @@
<!-- top-left -->
<!-- PEERS LINK AND ICON -->
<a class="top-left" href="/scuttlebutt/peers" title="Scuttlebutt Peers">
<div class="circle circle-small">
<div class="circle circle-small border-circle-small border-ssb">
<img class="icon-medium" src="/icons/users.svg">
</div>
</a>
<!-- top-middle -->
<!-- CURRENT USER LINK AND ICON -->
<a class="top-middle" href="/scuttlebutt/profile" title="Profile">
<div class="circle circle-small">
<div class="circle circle-small border-circle-small border-ssb">
<img class="icon-medium" src="/icons/user.svg">
</div>
</a>
<!-- top-right -->
<!-- MESSAGES LINK AND ICON -->
<a class="top-right" href="/scuttlebutt/private" title="Private Messages">
<div class="circle circle-small">
<div class="circle circle-small border-circle-small border-ssb">
<img class="icon-medium" src="/icons/envelope.svg">
</div>
</a>
<!-- middle -->
<a class="middle">
<div class="circle circle-large {% if sbot_status.state == "active" %}circle-success{% else %}circle-error{% endif %}"></div>
{% if sbot_status.state == "active" %}
<div class="circle circle-large circle-success">
<p style="font-size: 4rem; color: var(--near-black);">^_^</p>
</div>
{% elif sbot_status.state == "inactive" %}
<div class="circle circle-large circle-warning">
<p style="font-size: 4rem; color: var(--near-black);">z_z</p>
</div>
{% else %}
<div class="circle circle-large circle-error">
<p style="font-size: 4rem; color: var(--near-black);">x_x</p>
</div>
{% endif %}
</a>
<!-- bottom-left -->
<!-- SYSTEM STATUS LINK AND ICON -->
@ -34,21 +46,21 @@
{% else -%}
<a class="bottom-left" href="/status" title="Status">
{%- endif -%}
<div class="circle circle-small">
<div class="circle circle-small border-circle-small {% if sbot_status.state == "active" %}border-success{% elif sbot_status.state == "inactive" %}border-warning{% else %}border-danger{% endif %}">
<img class="icon-medium" src="/icons/heart-pulse.svg">
</div>
</a>
<!-- bottom-middle -->
<!-- PEACHCLOUD GUIDEBOOK LINK AND ICON -->
<a class="bottom-middle" href="/help" title="Help Menu">
<div class="circle circle-small">
<div class="circle circle-small border-circle-small border-info">
<img class="icon-medium" src="/icons/book.svg">
</div>
</a>
<!-- bottom-right -->
<!-- SYSTEM SETTINGS LINK AND ICON -->
<a class="bottom-right" href="/settings" title="Settings Menu">
<div class="circle circle-small">
<div class="circle circle-small border-circle-small border-settings">
<img class="icon-medium" src="/icons/cog.svg">
</div>
</a>

8
peach-web/templates/login.html.tera
View File

@ -3,7 +3,7 @@
<!-- LOGIN FORM -->
<div class="card center">
<div class="card-container">
<form id="login_form" action="/login" method="post">
<form id="login_form" class="center" action="/login" method="post">
<!-- input for username -->
<input id="username" name="username" class="center input" type="text" placeholder="Username" title="Username for authentication" autofocus/>
<!-- input for password -->
@ -12,12 +12,10 @@
<input id="loginUser" class="button button-primary center" title="Login" type="submit" value="Login">
</div>
</form>
<!-- FLASH MESSAGE -->
{% include "snippets/flash_message" %}
<div class="center-text" style="margin-top: 25px;">
<a href="/settings/admin/forgot_password" class="label-small link">Forgot Password?</a>
<div class="center-text" style="margin-top: 25px;">
<a href="/settings/admin/forgot_password" class="label-small link font-gray">Forgot Password?</a>
</div>
</div>
</div>

18
peach-web/templates/nav.html.tera
View File

@ -17,13 +17,25 @@
<!-- Bottom nav bar -->
<nav class="nav-bar">
<a class="nav-item" href="https://scuttlebutt.nz/">
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="/icons/hermies.png" alt="Secure Scuttlebutt">
<img class="icon-medium nav-icon-left" title="Scuttlebutt Website" src="/icons/hermies_hex{% if theme and theme == "dark" %}_light{% endif %}.svg" alt="Secure Scuttlebutt">
</a>
<a class="nav-item" href="/">
<img class="icon nav-icon-left" src="/icons/peach-icon.png" alt="PeachCloud" title="Home">
</a>
<a class="nav-item" href="/power">
<img class="icon-medium nav-icon-right icon-active" title="Shutdown" src="/icons/power.svg" alt="Power switch">
{# only render a theme-switcher icon if the `theme` variable has been set #}
{% if theme and theme == "light" %}
<a class="nav-item" href="/theme?theme=dark">
<img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/moon.png" alt="Moon">
</a>
{% elif theme and theme == "dark" %}
<a class="nav-item" href="/theme?theme=light">
<img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/sun.png" alt="Sun">
</a>
{% else %}
{# render hidden element to maintain correctly alignment of other bottom nav icons #}
<a class="nav-item" style="visibility: hidden;" href="/theme?theme=light">
<img class="icon-medium nav-icon-right icon-active" title="Toggle theme" src="/icons/sun.png" alt="Sun">
</a>
{% endif %}
</nav>
{%- endblock nav -%}

2
peach-web/templates/scuttlebutt/messages.html.tera
View File

@ -2,7 +2,7 @@
{%- block card %}
<!-- SCUTTLEBUTT MESSAGES -->
<div class="card center">
<div class="card-container">
<div class="capsule capsule-container border-ssb">
<!-- FLASH MESSAGE -->
{% include "snippets/flash_message" %}
</div>

6
peach-web/templates/scuttlebutt/profile.html.tera
View File

@ -5,7 +5,7 @@
<!-- PROFILE INFO BOX -->
<div class="capsule capsule-profile" title="Scuttlebutt account profile information">
<!-- edit profile button -->
<img id="editProfile" class="icon-small nav-icon-right" src="/icons/pencil.svg" alt="Profile picture">
<img id="editProfile" class="icon-small icon-active nav-icon-right" src="/icons/pencil.svg" alt="Profile picture">
<!-- PROFILE BIO -->
<!-- profile picture -->
<img id="profilePicture" class="icon-large" src="{ image_path }" alt="Profile picture">
@ -15,14 +15,14 @@
<p id="profileDescription" style="margin-top: 1rem" class="card-text" title="Description">{ description }</p>
</div>
<!-- PUBLIC POST FORM -->
<form id="postForm" action="/scuttlebutt/post" method="post">
<form id="postForm" class="center" action="/scuttlebutt/post" method="post">
<!-- input for message contents -->
<textarea id="publicPost" class="center input message-input" title="Compose Public Post"></textarea>
<input id="publishPost" class="button button-primary center" title="Publish" type="submit" value="Publish">
</form>
<!-- BUTTONS -->
<!-- TODO: each of these buttons needs to be a form with a public key -->
<div id="buttons">
<div id="buttons" style="margin-top: 2rem;">
<a id="followPeer" class="button button-primary center" href="/scuttlebutt/follow" title="Follow Peer">Follow</a>
<a id="blockPeer" class="button button-warning center" href="/scuttlebutt/block" title="Block Peer">Block</a>
<a id="privateMessage" class="button button-primary center" href="/scuttlebutt/private_message" title="Private Message">Private Message</a>

2
peach-web/templates/settings/admin/change_password.html.tera
View File

@ -2,7 +2,7 @@
{%- block card %}
<!-- CHANGE PASSWORD FORM -->
<div class="card center">
<form id="changePassword" action="/settings/admin/change_password" method="post">
<form id="changePassword" class="center" action="/settings/admin/change_password" method="post">
<!-- input for current password -->
<input id="currentPassword" class="center input" name="current_password" type="password" placeholder="Current password" title="Current password" autofocus>
<!-- input for new password -->

4
peach-web/templates/settings/admin/configure_admin.html.tera
View File

@ -3,9 +3,9 @@
<!-- CONFIGURE ADMIN PAGE -->
<div class="card center">
<div class="text-container">
<h4> Current Admins </h4>
<h4 class="font-normal">Current Admins</h4>
{% if not ssb_admin_ids %}
<div>
<div class="card-text">
There are no currently configured admins.
</div>
{% else %}

74
peach-web/templates/settings/scuttlebutt/configure_sbot.html.tera
View File

@ -15,57 +15,59 @@
<!-- SBOT CONFIGURATION FORM -->
<div class="card center">
<form id="sbotConfig" class="center" action="/settings/scuttlebutt/configure" method="post">
<div class="center" style="display: flex; flex-direction: column;" title="Number of hops to replicate">
<label for="hops" class="label-small">HOPS</label>
<div class="center" style="display: flex; flex-direction: column; margin-bottom: 2rem;" title="Number of hops to replicate">
<label for="hops" class="label-small font-gray">HOPS</label>
<div id="hops" style="display: flex; justify-content: space-evenly;">
<input type="radio" id="hops_0" name="hops" value="0"{% if hops == 0 %} checked{% endif %}>
<label for="hops_0">0</label>
<input type="radio" id="hops_1" name="hops" value="1"{% if hops == 1 %} checked{% endif %}>
<label for="hops_1">1</label>
<input type="radio" id="hops_2" name="hops" value="2"{% if hops == 2 %} checked{% endif %}>
<label for="hops_2">2</label>
<input type="radio" id="hops_3" name="hops" value="3"{% if hops == 3 %} checked{% endif %}>
<label for="hops_3">3</label>
<input type="radio" id="hops_4" name="hops" value="4"{% if hops == 4 %} checked{% endif %}>
<label for="hops_4">4</label><br>
<div>
<input type="radio" id="hops_0" name="hops" value="0"{% if hops == 0 %} checked{% endif %}>
<label class="font-normal" for="hops_0">0</label>
</div>
<div>
<input type="radio" id="hops_1" name="hops" value="1"{% if hops == 1 %} checked{% endif %}>
<label class="font-normal" for="hops_1">1</label>
</div>
<div>
<input type="radio" id="hops_2" name="hops" value="2"{% if hops == 2 %} checked{% endif %}>
<label class="font-normal" for="hops_2">2</label>
</div>
<div>
<input type="radio" id="hops_3" name="hops" value="3"{% if hops == 3 %} checked{% endif %}>
<label class="font-normal" for="hops_3">3</label>
</div>
<div>
<input type="radio" id="hops_4" name="hops" value="4"{% if hops == 4 %} checked{% endif %}>
<label class="font-normal" for="hops_4">4</label>
</div>
</div>
</div>
<br>
<div class="center" style="display: flex; justify-content: space-between;">
<div style="display: flex; flex-direction: column; width: 60%;" title="IP address on which the sbot runs">
<label for="ip" class="label-small">IP ADDRESS</label>
<div style="display: flex; flex-direction: column; width: 60%; margin-bottom: 2rem;" title="IP address on which the sbot runs">
<label for="ip" class="label-small font-gray">IP ADDRESS</label>
<input type="text" id="ip" name="lis_ip" value="{{ listen_addr.0 }}">
</div>
<div style="display: flex; flex-direction: column; width: 20%;" title="Port on which the sbot runs">
<label for="port" class="label-small">PORT</label>
<div style="display: flex; flex-direction: column; width: 20%; margin-bottom: 2rem;" title="Port on which the sbot runs">
<label for="port" class="label-small font-gray">PORT</label>
<input type="text" id="port" name="lis_port" value="{{ listen_addr.1 }}">
</div>
</div>
<br>
<div class="center" style="display: flex; flex-direction: column;" title="Network key (aka 'caps key') to define the Scuttleverse in which the sbot operates in">
<label for="network_key" class="label-small">NETWORK KEY</label>
<div class="center" style="display: flex; flex-direction: column; margin-bottom: 2rem;" title="Network key (aka 'caps key') to define the Scuttleverse in which the sbot operates in">
<label for="network_key" class="label-small font-gray">NETWORK KEY</label>
<input type="text" id="network_key" name="shscap" value="{{ sbot_config.shscap }}">
</div>
<br>
<div class="center" style="display: flex; flex-direction: column;" title="Directory in which the sbot database is saved">
<label for="database_dir" class="label-small">DATABASE DIRECTORY</label>
<div class="center" style="display: flex; flex-direction: column; margin-bottom: 2rem;" title="Directory in which the sbot database is saved">
<label for="database_dir" class="label-small font-gray">DATABASE DIRECTORY</label>
<input type="text" id="database_dir" name="repo" value="{{ sbot_config.repo }}">
</div>
<br>
<div class="center">
<input type="checkbox" id="lanBroadcast" name="localadv"{% if sbot_config.localadv == true %} checked{% endif %}>
<label for="lanBroadcast" title="Broadcast the IP and port of this sbot instance so that local peers can discovery it and attempt to connect">Enable LAN Broadcasting</label><br>
<br>
<input type="checkbox" id="lanDiscovery" name="localdiscov"{% if sbot_config.localdiscov == true %} checked{% endif %}>
<label for="lanDiscovery" title="Listen for the presence of local peers and attempt to connect if found">Enable LAN Discovery</label><br>
<br>
<input type="checkbox" id="startup" name="startup"{% if run_on_startup == "enabled" %} checked{% endif %}>
<label for="startup" title="Run the pub automatically on system startup">Run pub on system startup</label><br>
<br>
<input type="checkbox" id="lanBroadcast" style="margin-bottom: 1rem;" name="localadv"{% if sbot_config.localadv == true %} checked{% endif %}>
<label class="font-normal" for="lanBroadcast" title="Broadcast the IP and port of this sbot instance so that local peers can discovery it and attempt to connect">Enable LAN Broadcasting</label><br>
<input type="checkbox" id="lanDiscovery" style="margin-bottom: 1rem;" name="localdiscov"{% if sbot_config.localdiscov == true %} checked{% endif %}>
<label class="font-normal" for="lanDiscovery" title="Listen for the presence of local peers and attempt to connect if found">Enable LAN Discovery</label><br>
<input type="checkbox" id="startup" style="margin-bottom: 1rem;" name="startup"{% if run_on_startup == "enabled" %} checked{% endif %}>
<label class="font-normal" for="startup" title="Run the pub automatically on system startup">Run pub when computer starts</label><br>
<input type="checkbox" id="repair" name="repair"{% if sbot_config.repair == true %} checked{% endif %}>
<label for="repair" title="Attempt to repair the filesystem before starting the pub">Attempt filesystem repair when pub starts</label><br>
<label class="font-normal" for="repair" title="Attempt to repair the filesystem when starting the pub">Attempt filesystem repair when pub starts</label>
</div>
<br>
<!-- hidden input elements for all other config variables -->
<input type="hidden" id="debugdir" name="debugdir" value="{{ sbot_config.debugdir }}">
<input type="hidden" id="hmac" name="hmac" value="{{ sbot_config.hmac }}">
@ -75,7 +77,7 @@
<input type="hidden" id="promisc" name="promisc" value="{{ sbot_config.promisc }}">
<input type="hidden" id="nounixsock" name="nounixsock" value="{{ sbot_config.nounixsock }}">
<!-- BUTTONS -->
<input id="saveConfig" class="button button-primary center" type="submit" title="Save configuration parameters to file" value="Save">
<input id="saveConfig" class="button button-primary center" style="margin-top: 2rem;" type="submit" title="Save configuration parameters to file" value="Save">
<input id="saveRestartConfig" class="button button-primary center" type="submit" title="Save configuration parameters to file and then (re)start the pub" value="Save & Restart" formaction="/settings/scuttlebutt/configure?restart=true">
<a id="restoreDefaults" class="button button-warning center" href="/settings/scuttlebutt/configure/default" title="Restore default configuration parameters and save them to file">Restore Defaults</a>
</form>

8
peach-web/templates/snippets/flash_message.html.tera
View File

@ -1,11 +1,11 @@
<!-- check for flash message and display accordingly -->
{% if flash_msg and flash_name == "success" %}
<!-- display success message -->
<div class="capsule center-text flash-message font-success">{{ flash_msg }}.</div>
<div class="capsule center-text flash-message font-normal border-success">{{ flash_msg }}.</div>
{%- elif flash_msg and flash_name == "info" %}
<!-- display info message -->
<div class="capsule center-text flash-message font-info">{{ flash_msg }}.</div>
<div class="capsule center-text flash-message font-normal border-info">{{ flash_msg }}.</div>
{%- elif flash_msg and flash_name == "error" %}
<!-- display error message -->
<div class="capsule center-text flash-message font-failure">{{ flash_msg }}.</div>
{%- endif -%}
<div class="capsule center-text flash-message font-normal border-danger">{{ flash_msg }}.</div>
{%- endif -%}

23
peach-web/templates/status/scuttlebutt.html.tera
View File

@ -6,21 +6,26 @@
{% set mem = sbot_status.memory / 1024 / 1024 | round -%}
{%- else -%}
{% set mem = "X" -%}
{%- endif -%}
{%- if sbot_status.blobstore -%}
{% set blobs = sbot_status.blobstore / 1024 / 1024 | round -%}
{%- else -%}
{% set blobs = "X" -%}
{%- endif -%}
<!-- SCUTTLEBUTT STATUS -->
<div class="card center">
<!-- SBOT INFO BOX -->
<div class="capsule capsule-container {% if sbot_status.state == "active" %}success-border{% else %}warning-border{% endif %}">
<div class="capsule capsule-container {% if sbot_status.state == "active" %}border-success{% elif sbot_status.state == "inactive" %}border-warning{% else %}border-danger{% endif %}">
<!-- SBOT STATUS GRID -->
<div class="two-grid" title="go-sbot process state">
<!-- top-right config icon -->
<a class="link two-grid-top-right" href="/settings/scuttlebutt" title="Configure Scuttlebutt settings">
<img id="configureNetworking" class="icon-small" src="/icons/cog.svg" alt="Configure">
<img id="configureNetworking" class="icon-small icon-active" src="/icons/cog.svg" alt="Configure">
</a>
<!-- left column -->
<!-- go-sbot state icon with label -->
<div class="grid-column-1">
<img id="sbotStateIcon" class="center icon {% if sbot_status.state == "inactive" %}icon-inactive{% endif %}" src="/icons/hermies.svg" alt="Hermies">
<img id="sbotStateIcon" class="center icon {% if sbot_status.state == "active" %}icon-active{% else %}icon-inactive{% endif %}" src="/icons/hermies.svg" alt="Hermies">
<label id="sbotStateLabel" for="sbotStateIcon" class="center label-small font-gray" style="margin-top: 0.5rem;" title="Sbot state">{{ sbot_status.state | upper }}</label>
</div>
<!-- right column -->
@ -78,25 +83,25 @@
<!-- THREE-ACROSS STACK -->
<div class="three-grid card-container" style="margin-top: 1rem;">
<div class="stack">
<img class="icon" title="Hops" src="/icons/orbits.png">
<img class="icon icon-active" title="Hops" src="/icons/orbits.png">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Replication hops">{{ sbot_config.hops }}</label>
</div>
<label class="label-small font-gray">HOPS</label>
</div>
<div class="stack">
<img class="icon" title="Blobs" src="/icons/image-file.png">
<img class="icon icon-active" title="Blobs" src="/icons/image-file.png">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium" style="padding-right: 3px;" title="Blobstore size in MB">163</label>
<label class="label-small font-near-black">MB</label>
<label class="label-medium{% if sbot_status.state == "inactive" %} font-gray{% endif %}" style="padding-right: 3px;" title="Blobstore size in MB">{{ blobs }}</label>
<label class="label-small{% if sbot_status.state == "inactive" %} font-gray{% else %} font-normal{% endif %}">MB</label>
</div>
<label class="label-small font-gray">BLOBSTORE</label>
</div>
<div class="stack">
<img class="icon{% if not sbot_status.memory %} icon-inactive{% endif %}" title="Memory" src="/icons/ram.png">
<img class="icon{% if sbot_status.memory %} icon-active{% else %} icon-inactive{% endif %}" title="Memory" src="/icons/ram.png">
<div class="flex-grid" style="padding-top: 0.5rem;">
<label class="label-medium{% if sbot_status.state == "inactive" %} font-gray{% endif %}" style="padding-right: 3px;" title="Memory usage of the go-sbot process in MB">{{ mem }}</label>
<label class="label-small {% if sbot_status.state == "inactive" %}font-gray{% else %}font-near-black{% endif %}">MB</label>
<label class="label-small{% if sbot_status.state == "inactive" %} font-gray{% else %} font-normal{% endif %}">MB</label>
</div>
<label class="label-small font-gray">MEMORY</label>
</div>