Add template for unauthenticated response

jon/templates/auth/denied.html

@@ -0,0 +1,36 @@
+
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>jon · not authenticated</title>
+    <link rel="stylesheet" href="/static/jon.css">
+  </head>
+  <body>
+    <header>
+      <h1>jon</h1>
+
+      {% if config.DEBUG %}
+      <details>
+        <summary><code>config</code></summary>
+        <pre>{% for key, value in config.items() %}{{ key }} = {{ value }}
+{% endfor %}</pre>
+      </details>
+      {% endif %}
+    </header>
+
+    <main>
+      <p>
+        Damit kein Schabernack getrieben wird müssen wir sicherstellen, dass du die Person bist die jon ausgeführt hat.
+        Gib unten das Token ein, welches jon beim Starten ausgegeben hat.
+      </p>
+      <form method="GET">
+        <div class="form-input">
+          <label for="token">Token</label>
+          <input type="password" name="token" placeholder="Token" id="token">
+        </div>
+        <button type="submit">Authentifizieren</button>
+      </form>
+    </main>
+  </body>
+</html>

jon/templates/base.html

@@ -3,73 +3,7 @@
   <head>
     <meta charset="UTF-8">
     <title>jon</title>
-    <style>
-      html {
-        font-family: Helvetica, sans-serif;
-      }
-      h1 {
-        margin: 0;
-      }
-      nav > ul {
-        padding-left: 0;
-      }
-      nav > ul > li {
-        display: inline-block;
-        list-style: none;
-      }
-      nav > ul > li + li:before {
-        content: ' · ';
-      }
-      .current-page > a {
-        position: relative;
-      }
-      .current-page > a:after {
-        content: '↓';
-        font-size: 0.8em;
-        box-sizing: border-box;
-        position: absolute;
-        display: block;
-        right: 50%;
-        top: -1em;
-        width: 1em;
-        text-align: center;
-        margin-right: -0.5em;
-        animation: wiggle 0.8s ease-in-out 0s infinite;
-        /* animation-direction: alternate; */
-      }
-      .--align-left {
-        text-align: left;
-      }
-      .--align-right {
-        text-align: right;
-      }
-      .--centered {
-        text-align: center;
-      }
-      @keyframes wiggle {
-        0%, 100% { margin-top: 0; }
-        50% { margin-top: -0.5em; }
-        /* 100% { transform: rotate(1turn); } */
-      }
-      table {
-        border-spacing: .5em 0;
-      }
-      th {
-        font-size: .8em;
-      }
-      @media print {
-        body {
-          font-size: 8px;
-        }
-      }
-      .form-input > label {
-        font-size: .8em;
-      }
-      .form-input > input:not([type=radio]),
-      .form-input > select {
-        display: block;
-      }
-    </style>
+    <link rel="stylesheet" href="/static/jon.css">
   </head>
   <body>
     <header>