Navbar overhaul

accounts/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.

accounts/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.

accounts/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>

accounts/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>

accounts/static/style.css

@@ -15,6 +15,10 @@
     color: #eee;
   }
 
+  .shadow-lg {
+    box-shadow: 0 1rem 3rem rgba(0,0,0,.75) !important;
+  }
+
   .jumbotron {
     background-color: #333 !important;
   }
@@ -115,3 +119,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;
+}

accounts/templates/fragments/navbar.j2

@@ -0,0 +1,21 @@
+<nav class="navbar navbar-expand-lg sticky-top navbar-dark bg-dark">
+    <div class="navbar-brand">My Account</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 request.path != url_for('auth.login') %}
+            <a class="btn btn-sm btn-primary" style="margin-left: 1rem;" href="{{ url_for('auth.logout') }}" role="button">Logout</a>
+        {% endif %}
+    </form>
+</nav>

accounts/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 Account</div>
-</nav>
+{% include "fragments/navbar.j2" %}
 {% endblock %}
 
 {% block content %}
+    <iframe id="apps" src="http://localhost:5000/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>
@@ -27,12 +27,16 @@
         </div>
         {% endif %}
 
-        {# <form role="form" action="{{ url_for('auth.login') }}" method="post">
-            {{ form.csrf_token }}
-            <div class="form-group">{{ form.username.label }}: {{ form.username() }}</div><br>
-            <div class="form-group">{{ form.password.label }}: {{ form.password() }}</div><br>
-            <button type="submit" class="btn btn-primary">Log In</button>
-        </form> #}
         {{wtf.quick_form(form, novalidate=True)}}
     </div>
+{% endblock %}
+
+{% block scripts %}
+{{ super () }}
+<script>
+function showApps () {
+    $("#apps").toggle();
+    $("#overlay").toggle();
+}
+</script>
 {% endblock %}

accounts/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 Account</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="http://localhost:5000/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!
@@ -279,5 +271,10 @@ function showSuccess(message) {
 function hideSuccess() {
     $('#success-alert').hide();
 }
+
+function showApps () {
+    $("#apps").toggle();
+    $("#overlay").toggle();
+}
 </script>
 {% endblock %}