[NO TESTS] WIP

projects/tentacles/config.toml

@@ -1,2 +1,4 @@
+SECRET_KEY = "SgvzxsO5oPBGInmqsyyGQWAJXkS9"
+
 [db]
 uri = "tentacles.sqlite3"

projects/tentacles/src/python/tentacles/__main__.py

@@ -37,8 +37,13 @@ def user_session():
         _, gid, name, _ = current_app.db.fetch_user(uid)
         request.gid = gid
         request.username = name
+        request.is_admin = gid == 0
     else:
-        request.sid = request.uid = request.gid = request.username = None
+        request.sid = None
+        request.uid = None
+        request.gid = None
+        request.username = None
+        request.is_admin = False
 
 
 @cli.command()

projects/tentacles/src/python/tentacles/blueprints/ui.py

@@ -14,6 +14,7 @@ from flask import (
     render_template,
     session,
     url_for,
+    flash,
 )
 
 BLUEPRINT = Blueprint("ui", __name__)
@@ -41,14 +42,18 @@ def login():
 
     elif request.method == "POST":
         if sid := current_app.db.try_login(
-            request.form["username"], request.form["password"], timedelta(days=1)
+            username := request.form["username"],
+            request.form["password"],
+            timedelta(days=1),
         ):
             resp = redirect("/")
             resp.set_cookie("sid", sid)
+            flash(f"Welcome, {username}", category="success")
             return resp
 
         else:
-            return render_template("login.html.j2", error="Incorrect username/password")
+            flash("Incorrect username/password", category="error")
+            return render_template("login.html.j2")
 
     else:
         return render_template("login.html.j2")
@@ -63,18 +68,19 @@ def register():
             if uid := current_app.db.try_create_user(
                 request.form["username"], request.form["password"]
             ):
-                return render_template(
+                flash(
-                    "login.html.j2", message="Success, please log in"
+                    "Please check your email for a verification request",
+                    category="success",
                 )
+                return render_template("register.html.j2")
         except:
             pass
 
-        return render_template(
+        flash("Unable to register that username", category="error")
-            "login.html.j2", error="Unable to register that username"
+        return render_template("register.html.j2")
-        )
 
     else:
-        return render_template("login.html.j2")
+        return render_template("register.html.j2")
 
 
 @BLUEPRINT.route("/logout")

projects/tentacles/src/python/tentacles/static/css/style.scss

@@ -10,7 +10,7 @@ $secondary_blue: #288BC2;
 $secondary_green: #A5C426;
 $secondary_light_grey: #CACBCA;
 $secondary_dark_grey: #9A9A9A;
-
+$clear: rgba(255, 255, 255, 255);
 
 @font-face {
   font-family: 'Aaux Next';
@@ -37,6 +37,12 @@ $secondary_dark_grey: #9A9A9A;
   src: local('Aaux Next'), url('https://fonts.cdnfonts.com/s/60597/aauxnextmdwebfont.woff') format('woff');
 }
 
+@import url(https://fonts.googleapis.com/css?family=Raleway);
+
+.color-yellow {
+  color: $yellow;
+}
+
 html {
   font-family: 'Aaux Next', sans-serif;
   background-color: $beige;
@@ -44,21 +50,41 @@ html {
   display: flex;
 }
 
-body {
+html, body {
-  width: 100vw;
+  margin: 0;
+  height: 100%;
+  width: 100%;
+  min-width: 400px;
+}
+
+a {
+  color: $secondary_blue;
+  text-decoration: none;
 }
 
 *, *::before, *::after {
-  box-sizing: inherit;
   margin: 0;
   padding: 0;
 }
 
 nav {
-  width: 100%;
+  background-color: $beige;
-  border-bottom: $orange 10px solid;
+  box-shadow: 0px 10px 0px $red,
-  padding-left: 30px;
+              0px 12px 0px $clear,
-  padding-right: 10px;
+              0px 22px 0px $orange,
+              0px 24px 0px $clear,
+              0px 34px 0px $yellow;
+  margin-bottom: 34px;
+
+  .logo {
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 60px;
+
+    img {
+      height: 56px;
+    }
+  }
 }
 
 .nav-links {
@@ -68,8 +94,6 @@ nav {
 .nav-item a {
   display: inline-block;
   padding: 10px 15px;
-  text-decoration: none;
-  color: $secondary_green;
 }
 
 .nav-item:hover {
@@ -80,13 +104,127 @@ nav {
   color: $secondary_blue;
 }
 
-.logo {
+$navbar_height: 50px;
-  text-decoration: none;
+$navbar_padding: 10px;
-  font-weight: bold;
+.navbar {
-  font-size: 60px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  color: #FFF;
+  padding-left: $navbar_padding;
+  padding-right: $navbar_padding;
+  margin-top: $navbar_padding;
+}
 
-  img {
+.menu {
-    width: 60px;
+  display: flex;
-    height: 60px;
+  flex-direction: row;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu > li {
+  margin: 0 1rem;
+  overflow: hidden;
+}
+
+.menu-button-container {
+  display: none;
+  height: 100%;
+  width: 30px;
+  cursor: pointer;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+#menu-toggle {
+  display: none;
+}
+
+.menu-button,
+.menu-button::before,
+.menu-button::after {
+  display: block;
+  background-color: $red;
+  position: absolute;
+  height: 4px;
+  width: 30px;
+  transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  border-radius: 2px;
+}
+
+.menu-button::before {
+  content: '';
+  margin-top: -8px;
+}
+
+.menu-button::after {
+  content: '';
+  margin-top: 8px;
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button::before {
+  margin-top: 0px;
+  transform: rotate(405deg);
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button {
+  background: rgba(255, 255, 255, 0);
+}
+
+#menu-toggle:checked + .menu-button-container .menu-button::after {
+  margin-top: 0px;
+  transform: rotate(-405deg);
+}
+
+@media (max-width: 700px) {
+  .menu-button-container {
+    display: flex;
+  }
+  .menu {
+    position: absolute;
+    top: 0;
+    margin-top: $navbar_height + ($navbar_padding * 3);
+    left: 0;
+    flex-direction: column;
+    width: 100%;
+    justify-content: left;
+    align-items: center;
+  }
+  #menu-toggle ~ .menu li {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+  #menu-toggle:checked ~ .menu li {
+    height: 2.5em;
+    padding: 0.5em;
+    transition: height 400ms cubic-bezier(0.23, 1, 0.32, 1);
+  }
+  .menu > li {
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0.5em 0;
+    width: 100%;
+    color: $secondary_blue;
+    background-color: $beige;
+  }
+  #menu-toggle:checked ~ .menu > li {
+    border-top: 1px solid #444;
+  }
+  #menu-toggle:checked ~ .menu > li:last-child {
+    border-bottom: 1px solid #444;
   }
 }
+
+.content {
+  padding-top: 1em;
+  padding-left: 10%;
+  padding-right: 10%;
+}

projects/tentacles/src/python/tentacles/static/tentacles.svg

@@ -1,8 +1,8 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg
-   width="512px"
+   width="469.78101"
-   height="512px"
+   height="488.44904"
-   viewBox="0 0 512 512"
+   viewBox="-8 -18.4 469.78101 488.44904"
    version="1.1"
    id="svg166"
    sodipodi:docname="tentacles.svg"
@@ -24,8 +24,8 @@
      inkscape:deskcolor="#d1d1d1"
      showgrid="false"
      inkscape:zoom="3.6699219"
-     inkscape:cx="256"
+     inkscape:cx="225.20915"
-     inkscape:cy="256"
+     inkscape:cy="231.20383"
      inkscape:window-width="3840"
      inkscape:window-height="2130"
      inkscape:window-x="0"
@@ -33,27 +33,27 @@
      inkscape:window-maximized="1"
      inkscape:current-layer="svg166" />
   <path
-     d="m 188.998,334.327 c -6.704,6.107 -13.19,12.418 -19.393,18.956 -36.282,38.255 -62.823,83.734 -67.52,141.51 H 213.86 c -4.61,-50.868 9.03,-91.18 32.585,-123.242 -16.34,-12.562 -34.394,-23.805 -52.687,-34.48 -1.585,-0.924 -3.173,-1.827 -4.76,-2.744 z"
+     d="m 158.12845,309.31456 c -6.704,6.107 -13.19,12.418 -19.393,18.956 -36.282,38.255 -62.823002,83.734 -67.520002,141.51 H 182.99045 c -4.61,-50.868 9.03,-91.18 32.585,-123.242 -16.34,-12.562 -34.394,-23.805 -52.687,-34.48 -1.585,-0.924 -3.173,-1.827 -4.76,-2.744 z"
      id="path894"
-     fill="#CA4F1F" />
+     fill="#ca4f1f" />
   <path
-     d="m 118.664,292.047 c -17.003,13.064 -32.44,27.7 -45.414,44.28 -30.797,39.36 -48.285,89.58 -40.56,158.466 h 50.654 c 4.796,-63.304 34.116,-113.686 72.7,-154.37 5.162,-5.44 10.488,-10.716 15.946,-15.84 -18.737,-10.664 -37.06,-21.14 -53.326,-32.536 z"
+     d="m 87.794448,267.03456 c -17.003,13.064 -32.44,27.7 -45.414,44.28 -30.797,39.36 -48.2850001,89.58 -40.5600001,158.466 H 52.474448 c 4.796,-63.304 34.116,-113.686 72.700002,-154.37 5.162,-5.44 10.488,-10.716 15.946,-15.84 -18.737,-10.664 -37.06,-21.14 -53.326002,-32.536 z"
      id="path892"
-     fill="#EDB822" />
+     fill="#edb822" />
   <path
-     d="m 161.51,219.652 c 4.17,8.77 10.877,17.174 19.603,25.903 19.714,19.717 49.5,38.93 78.616,60.564 29.114,21.632 57.785,45.835 74.77,77.458 16.173,30.112 20.78,67.03 4.98,111.215 h 143.217 c -0.466,-56.115 -19.36,-97.476 -48.385,-129.98 -30.6,-34.266 -72.642,-58.623 -115.423,-77.752 -42.782,-19.13 -86.084,-32.968 -119.335,-47.164 -14.927,-6.372 -27.85,-12.76 -38.045,-20.244 z"
+     d="m 130.64045,194.63956 c 4.17,8.77 10.877,17.174 19.603,25.903 19.714,19.717 49.5,38.93 78.616,60.564 29.114,21.632 57.785,45.835 74.77,77.458 16.173,30.112 20.78,67.03 4.98,111.215 h 143.217 c -0.466,-56.115 -19.36,-97.476 -48.385,-129.98 -30.6,-34.266 -72.642,-58.623 -115.423,-77.752 -42.782,-19.13 -86.084,-32.968 -119.335,-47.164 -14.927,-6.372 -27.85,-12.76 -38.045,-20.244 z"
      id="path890"
-     fill="#BB2D2E" />
+     fill="#bb2d2e" />
   <path
-     d="m 397.926,139.499 c -2.875,7.71 -8.12,14.696 -14.764,20.61 -11.546,10.275 -27.447,18.74 -46.318,27.195 -30.636,13.725 -69.24,27.188 -108.647,43.98 14.082,5.43 29.61,11.113 45.862,17.3 6.587,-4.173 13.103,-8.248 19.48,-12.212 45.03,-27.987 83.65,-52.007 98.067,-72.623 6.244,-8.93 8.348,-16.06 6.32,-24.25 z"
+     d="m 367.05645,114.48656 c -2.875,7.71 -8.12,14.696 -14.764,20.61 -11.546,10.275 -27.447,18.74 -46.318,27.195 -30.636,13.725 -69.24,27.188 -108.647,43.98 14.082,5.43 29.61,11.113 45.862,17.3 6.587,-4.173 13.103,-8.248 19.48,-12.212 45.03,-27.987 83.65,-52.007 98.067,-72.623 6.244,-8.93 8.348,-16.06 6.32,-24.25 z"
      id="path888"
-     fill="#EDB822" />
+     fill="#edb822" />
   <path
-     d="m 213.124,101.469 c -1.223,-0.017 -2.45,-0.016 -3.685,0 -6.577,0.092 -13.303,0.65 -20.065,1.67 -27.05,4.09 -54.462,15.528 -74.797,32.592 -20.335,17.065 -33.595,39.232 -34.338,66.258 -0.73,26.587 12.66,45.837 35.547,64.514 22.886,18.677 54.888,35.46 87.39,54.426 32.5,18.965 65.604,40.2 90.624,69.19 16.576,19.203 29.33,42.048 35.682,69.275 3.974,-26.167 -1.076,-47.67 -11.445,-66.975 -14.675,-27.324 -41.03,-50.18 -69.455,-71.3 -28.424,-21.118 -58.69,-40.352 -80.686,-62.352 -21.995,-22 -35.936,-48.92 -27.003,-80.432 l 0.05,0.014 c 2.402,-11.49 10.965,-21.01 21.676,-28.418 12.418,-8.59 28.5,-14.85 45.898,-18.026 26.118,-4.766 56,-2.45 78.94,12.588 -4.537,-14.195 -13.64,-24.224 -26.005,-31.363 -13.038,-7.528 -30.003,-11.43 -48.33,-11.66 z"
+     d="m 182.25445,76.456562 c -1.223,-0.017 -2.45,-0.016 -3.685,0 -6.577,0.092 -13.303,0.65 -20.065,1.67 -27.05,4.09 -54.462,15.528 -74.797002,32.591998 -20.335,17.065 -33.595,39.232 -34.338,66.258 -0.73,26.587 12.66,45.837 35.547,64.514 22.886002,18.677 54.888002,35.46 87.390002,54.426 32.5,18.965 65.604,40.2 90.624,69.19 16.576,19.203 29.33,42.048 35.682,69.275 3.974,-26.167 -1.076,-47.67 -11.445,-66.975 -14.675,-27.324 -41.03,-50.18 -69.455,-71.3 -28.424,-21.118 -58.69,-40.352 -80.686,-62.352 -21.995,-22 -35.936,-48.92 -27.003,-80.432 l 0.05,0.014 c 2.402,-11.49 10.965,-21.01 21.676,-28.418 12.418,-8.59 28.5,-14.85 45.898,-18.026 26.118,-4.766 56,-2.45 78.94,12.588 -4.537,-14.195 -13.64,-24.223998 -26.005,-31.362998 -13.038,-7.528 -30.003,-11.43 -48.33,-11.66 z"
      id="path886"
-     fill="#EDB822" />
+     fill="#edb822" />
   <path
-     d="m 309.014,25.014 c -23.568,0.1 -44.934,5.207 -60.383,15.144 -14.905,9.588 -25.017,23.102 -27.68,42.838 0.827,0.05 1.65,0.112 2.474,0.176 25.06,-19.447 60.447,-23.536 92.1,-18.772 20.404,3.072 39.644,9.75 54.843,19.106 l 0.278,-0.416 c 23.215,15.532 37.425,30.063 43.492,45.81 6.067,15.748 2.28,31.98 -7.215,45.56 -18.992,27.157 -58.648,49.897 -103.516,77.784 -2.518,1.565 -5.102,3.196 -7.65,4.79 10.143,4.06 20.443,8.352 30.762,12.966 9.08,4.06 18.176,8.382 27.193,12.984 33.81,-20.84 66.768,-39.722 89.993,-60.554 24.847,-22.287 38.456,-45.19 33.977,-77.64 C 473.138,111.867 453.932,84.77 427.125,64.438 400.319,44.104 366.01,30.926 333.18,26.586 324.972,25.501 316.87,24.98 309.016,25.014 Z"
+     d="m 278.14445,0.0015619 c -23.568,0.1 -44.934,5.207 -60.383,15.1440001 -14.905,9.588 -25.017,23.102 -27.68,42.838 0.827,0.05 1.65,0.112 2.474,0.176 25.06,-19.447 60.447,-23.536 92.1,-18.772 20.404,3.072 39.644,9.75 54.843,19.106 l 0.278,-0.416 c 23.215,15.532 37.425,30.063 43.492,45.809998 6.067,15.748 2.28,31.98 -7.215,45.56 -18.992,27.157 -58.648,49.897 -103.516,77.784 -2.518,1.565 -5.102,3.196 -7.65,4.79 10.143,4.06 20.443,8.352 30.762,12.966 9.08,4.06 18.176,8.382 27.193,12.984 33.81,-20.84 66.768,-39.722 89.993,-60.554 24.847,-22.287 38.456,-45.19 33.977,-77.64 -4.544,-32.922998 -23.75,-60.019998 -50.557,-80.351998 -26.806,-20.334 -61.115,-33.5120001 -93.945,-37.8520001 -8.208,-1.085 -16.31,-1.606 -24.164,-1.572 z"
      id="path164"
-     fill="#CA4F1F" />
+     fill="#ca4f1f" />
 </svg>

projects/tentacles/src/python/tentacles/templates/base.html.j2

@@ -1,38 +1,54 @@
 <!DOCTYPE html>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1">
 <html lang="en">
 <head>
     {% block head %}
     <link rel="stylesheet" href="/static/css/style.css" />
+    <link rel="icon" href="/static/tentacles.svg" type="image/svg+xml">
     <title>Tentacles{% block title %}{% endblock %}</title>
     {% endblock %}
 </head>
 <body>
   <nav class="navbar">
-    <a href="https://tentacles.tirefireind.us" class="logo"><img src="/static/tentacles.svg" alt="Tentacles"><span>Tentacles; A TireFire Industries production</span></a>
+    <span class="logo">
+      <a href="https://tentacles.tirefireind.us"><img src="/static/tentacles.svg" alt="Tentacles"></a>
+      <span class="color-yellow">Tentacles</span>
+    </span>
 
-    <ul class="nav-links">
+    <input id="menu-toggle" type="checkbox" />
-      <li class="nav-item"><a href="#">Curriculum</a></li>
+    <label class="menu-button-container" for="menu-toggle">
-      <li class="nav-item"><a href="#">Forum</a></li>
+      <div class="menu-button">
-      <li class="nav-item"><a href="#">News</a></li>
+      </div>
-      <li class="nav-item"><a href="#">Sign in</a></li>
+    </label>
+
+    <ul class="menu">
+      {% if not request.uid %}
+      <li><a href="/login">Log in</a></li>
+      <li><a href="/register">Register</a></li>
+      {% else %}
+      {% if request.is_admin %}
+      <li><a href="/printers">Settings</a></li>
+      {% endif %}
+      <li><a href="/settings">Settings</a></li>
+      <li><a href="/logout">Log out</a></li>
+      {% endif %}
     </ul>
   </nav>
   </div>
-  {% with messages = get_flashed_messages() %}
+  {% with messages = get_flashed_messages(with_categories=True) %}
   {% if messages %}
-    <div id="flashes">
+    <div class="flashes">
-      <ul class=flashes>
+      {% for category, message in messages %}
-        {% for message in messages %}
+        <div class="flash-{{ category }}">{{ message }}</div>
-          <li>{{ message }}</li>
+      {% endfor %}
-        {% endfor %}
-      </ul>
     </div>
   {% endif %}
   {% endwith %}
-  <div id="content">
+  <div class="content">
     {% block content %}Oops, an empty page :/{% endblock %}
   </div>
-  <div id="footer">
+  <div class="footer">
     {% block footer %}
       &copy; Copyright 2023 by <a href="https://arrdem.com/">@arrdem</a>.
     {% endblock %}