Overhaul navbar

app.py

@@ -6,6 +6,7 @@ from flask_sqlalchemy import SQLAlchemy
 from flask_login import LoginManager, login_manager, current_user, login_user, \
     logout_user, login_required
 from flask_wtf import FlaskForm
+from flask_cache_buster import CacheBuster
 from wtforms import StringField, PasswordField, BooleanField, SubmitField
 from wtforms.validators import DataRequired
 from flask_bootstrap import Bootstrap
@@ -48,6 +49,15 @@ login_manager.login_view = 'login'
 
 db.create_all()
 
+config = {
+     'extensions': ['.js', '.css', '.csv'],
+     'hash_size': 10
+}
+
+cache_buster = CacheBuster(config=config)
+cache_buster.register_cache_buster(app)
+
+
 server = Server(app.config['LDAP_HOST'])
 conn = Connection(server, app.config['LDAP_USERNAME'], app.config['LDAP_PASSWORD'], auto_bind=True)
 
@@ -57,12 +67,10 @@ class User(db.Model):
 
     id = db.Column(db.Integer, primary_key=True)
     username = db.Column(db.String(100))
-    password = db.Column(db.String(128))
     authenticated = db.Column(db.Boolean, default=False)
  
-    def __init__(self, username, password):
+    def __init__(self, username):
         self.username = username
-        self.password = password
  
     @staticmethod
     def try_login(username, password):

requirements.txt

@@ -7,3 +7,4 @@ ldap3==2.8.1
 short_url==1.2.2
 Flask-SQLAlchemy==2.4.4
 Flask-WTF==0.14.3
+Flask-Cache-Buster==1.0.1

static/icons/feathericons/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2013-2017 Cole Bemis
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

static/icons/lucide-icons/LICENSE

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) 2020, Lucide Contributors
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

static/icons/lucide-icons/gamepad-2.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+  <line x1="6" y1="11" x2="10" y2="11"></line>
+  <line x1="8" y1="9" x2="8" y2="13"></line>
+  <line x1="15" y1="12" x2="15.01" y2="12"></line>
+  <line x1="18" y1="10" x2="18.01" y2="10"></line>
+  <path d="M17.32 5H6.68a4 4 0 0 0-3.978 3.59c-.006.052-.01.101-.017.152C2.604 9.416 2 14.456 2 16a3 3 0 0 0 3 3c1 0 1.5-.5 2-1l1.414-1.414A2 2 0 0 1 9.828 16h4.344a2 2 0 0 1 1.414.586L17 18c.5.5 1 1 2 1a3 3 0 0 0 3-3c0-1.545-.604-6.584-.685-7.258-.007-.05-.011-.1-.017-.151A4 4 0 0 0 17.32 5z"></path>
+</svg>

static/icons/lucide-icons/snowflake.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+<defs>
+<symbol id="snowflake" viewBox="0 0 24 24">
+  <line x1="2" y1="12" x2="22" y2="12"></line>
+  <line x1="12" y1="2" x2="12" y2="22"></line>
+  <path d="M20 16l-4-4 4-4"></path>
+  <path d="M4 8l4 4-4 4"></path>
+  <path d="M16 4l-4 4-4-4"></path>
+  <path d="M8 20l4-4 4 4"></path>
+</symbol>
+</defs>
+</svg>

static/style.css

@@ -115,3 +115,23 @@
     opacity: 1;
   }
 }
+
+.overlay-frame {
+  z-index: 1050;
+  position: fixed;
+  top: 55px;
+  right: 10px;
+  border-radius: .25rem;
+  border: 1px solid #6c757d;
+}
+
+#overlay {
+  width: 100%;
+  height: 100%;
+  z-index: 1040;
+  background-color: rgba(0, 0, 0, 0);
+  position: fixed;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+}

templates/fragments/navbar.j2

@@ -0,0 +1,35 @@
+<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
+    <div class="navbar-brand d-none d-md-block">TI Link Shortener</div>
+    <form class="form-inline ml-auto">
+        <a onclick="showApps();" style="cursor: pointer;">
+            <svg
+                width="24"
+                height="24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                style="vertical-align: middle;">
+                <use xlink:href="{{url_for('.static', filename='icons/feathericons/feather-sprite.svg')}}#grid"/>
+            </svg>
+        </a>
+        {% if current_user.is_authenticated %}
+            <a href="https://account.technicalincompetence.club" style="color: white;">
+                <svg
+                    width="24"
+                    height="24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    style="vertical-align: middle; margin-left: 1rem;">
+                    <use xlink:href="{{url_for('.static', filename='icons/feathericons/feather-sprite.svg')}}#user"/>
+                </svg>
+            </a>
+        {% else %}
+            <a class="btn btn-sm btn-primary" style="margin-left: 1rem;" href="https://account.technicalincompetence.club" role="button">Sign In</a>
+        {% endif %}
+    </form>
+</nav>

templates/login.j2

@@ -8,12 +8,12 @@
 {% endblock %}
 
 {% block navbar %}
-<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
-    <div class="navbar-brand">Technical Incompetence Link Shortener</div>
-</nav>
+{% include "fragments/navbar.j2" %}
 {% endblock %}
 
 {% block content %}
+    <iframe id="apps" src="https://technicalincompetence.club/frame" width="305" height="400" class="shadow-lg overlay-frame" style="display: none;"></iframe>
+    <div id="overlay" style="display: none;" onclick="showApps();"></div>
     <div class="container" style="margin-top: 15px">
         <div class="jumbotron">
             <h1>Sign in for our awesome service</h1>
@@ -29,4 +29,14 @@
 
         {{wtf.quick_form(form, novalidate=True)}}
     </div>
+{% endblock %}
+
+{% block scripts %}
+{{ super () }}
+<script>
+function showApps () {
+    $("#apps").toggle();
+    $("#overlay").toggle();
+}
+</script>
 {% endblock %}

templates/profile.j2

@@ -7,20 +7,12 @@
 {% endblock %}
 
 {% block navbar %}
-<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
-    <div class="navbar-brand">Technical Incompetence Link Shortener</div>
-    <form class="form-inline ml-auto">
-        {# <div class="custom-control custom-switch">
-            <input type="checkbox" class="custom-control-input" id="darkSwitch" />
-            <label class="custom-control-label" for="darkSwitch">Dark Mode</label>
-        </div>
-        <div class="navbar-text" style="margin-right: 20px; ">{{ user['userName'] }}</div> #}
-        <a class="btn btn-primary" href="/logout" role="button">Logout</a>
-    </form>
-</nav>
+{% include "fragments/navbar.j2" %}
 {% endblock %}
 
 {% block content %}
+    <iframe id="apps" src="https://technicalincompetence.club/frame" width="305" height="400" class="shadow-lg overlay-frame" style="display: none;"></iframe>
+    <div id="overlay" style="display: none;" onclick="showApps();"></div>
 <div class="container" style="margin-top: 15px">
     <div id="success-alert" class="alert alert-success" role="alert" style="display: none;">
         This is a success alert—check it out!
@@ -85,5 +77,10 @@ function hideError(error) {
 function hideSuccess(error) {
     $('#success-alert').hide();
 }
+
+function showApps () {
+    $("#apps").toggle();
+    $("#overlay").toggle();
+}
 </script>
 {% endblock %}