refactor(view): make things a little more pretty

src/httpaste/controller/ui/__init__.py

@@ -7,7 +7,10 @@ def search(**kwargs):
 
     variables = {
         'paste_index_url': '/ui/paste',
-        'man_page': man_page
+        'user_index_url': '/ui/user',
+        'man_page': man_page,
+        'user': kwargs.get('user'),
+        'delete_session_url': '/ui/user/session/delete'
     }
 
     return template.render(**variables), 200

src/httpaste/controller/ui/paste/__init__.py

@@ -5,6 +5,9 @@ from connexion import request
 
 from httpaste.helper.template import views
 from httpaste.helper.url import url_query_string, url_append_query_param
+from httpaste.helper.syntax import syntax_shortnames, format_shortnames
+from httpaste.helper.http import mime_types
+
 from httpaste.controller.paste import post as post_raw
 from httpaste.controller.paste import get as get_raw
 
@@ -54,8 +57,6 @@ def get(**kwargs):
 
     template = views.get_template("viewport/ui/paste/get.html")
 
-
-
     base_path = f'paste/public/{kwargs["id"]}'
 
     if kwargs.get('user'):
@@ -86,7 +87,10 @@ def get(**kwargs):
             'syntax': kwargs.get('syntax', ''),
             'mime': kwargs.get('mime', ''),
             'preview': kwargs.get('preview', True)
-        }
+        },
+        'syntax_shortnames': syntax_shortnames(),
+        'format_shortnames': format_shortnames(),
+        'mime_types': mime_types()
     }
 
     return template.render(**variables)

src/httpaste/controller/ui/user/__init__.py

@@ -0,0 +1,12 @@
+from httpaste.helper.template import views
+from httpaste import __doc__ as man_page
+
+def search(**kwargs):
+
+    template = views.get_template("viewport/ui/user/search.html")
+
+    variables = {
+        'delete_session_url': '/ui/user/session/delete'
+    }
+
+    return template.render(**variables), 200

src/httpaste/helper/http.py

@@ -1,3 +1,4 @@
+from mimetypes import types_map as mime_types_map
 
 class BadRequestError(RuntimeError):
     def __init__(self, msg=None):
@@ -62,3 +63,11 @@ class NotFoundError(RuntimeError):
             "status": 404,
             "title": "Not Found",
         }, 404
+
+
+def mime_types():
+
+    types = list(set(mime_types_map.values()))
+    types.sort()
+
+    return types

src/httpaste/helper/syntax.py

@@ -1,5 +1,5 @@
-from pygments.lexers import get_lexer_by_name, find_lexer_class_by_name
+from pygments.lexers import (get_lexer_by_name, find_lexer_class_by_name, get_all_lexers)
-from pygments.formatters import find_formatter_class, HtmlFormatter
+from pygments.formatters import (find_formatter_class, HtmlFormatter, get_all_formatters)
 
 
 def highlight(
@@ -18,3 +18,13 @@ def highlight(
         formatter = find_formatter_class(format_alias)(linenos=linenos)
 
     return highlight(data, get_lexer_by_name(lexer_alias), formatter)
+
+
+def syntax_shortnames():
+
+    return {l[0]:l[1][0] for l in get_all_lexers() if len(l[1]) > 0}
+
+
+def format_shortnames():
+
+    return [f.aliases[0] for f in get_all_formatters()]

src/httpaste/helper/template.py

@@ -1,6 +1,6 @@
 from jinja2 import Environment, PackageLoader, select_autoescape
 
 views = Environment(
-    loader=PackageLoader("httpaste", "views"),
+    loader=PackageLoader("httpaste", "view"),
     autoescape=select_autoescape()
 )

src/httpaste/schema/httpaste.openapi.json

@@ -388,6 +388,9 @@
                     },
                     {
                         "$ref": "#/components/parameters/mime"
+                    },
+                    {
+                        "$ref": "#/components/parameters/ui_preview"
                     }
                 ],
                 "responses": {
@@ -422,6 +425,22 @@
                 }
             }
         },
+        "/ui/user": {
+            "get": {
+                "description": "get a public paste",
+                "security": [
+                    {}
+                ],
+                "responses": {
+                    "200": {
+                        "description": "paste data. content type may vary.",
+                        "content": {
+                            "text/html": {}
+                        }
+                    }
+                }
+            }
+        },
         "/ui/user/session/delete": {
             "get": {
                 "description": "get a public paste",

src/httpaste/view/container/get_paste_form.html

@@ -0,0 +1,39 @@
+<form class="color-theme font-theme" action="{{preview_url}}" method="get" enctype="multipart/form-data">
+    <details>
+        <summary>
+            <label for="syntax">Syntax</label>
+            <!--<input type="text" name="syntax" value="{{ query['syntax'] }}"/>-->
+
+            <select name="syntax">
+                <option {{ 'selected=""'if not query['syntax'] }} value>Disabled</option>
+                {% for name, shortname in syntax_shortnames.items() %}
+                <option value="{{shortname}}" {{ 'selected=""'if query['syntax'] == shortname }}>{{ name }}</option>
+            {% endfor %}</select>
+        </summary>
+        <small>language to highlight syntax for</small>
+    </details>
+    <details>
+        <summary>
+            <label for="format">Format</label>
+            <select name="format">
+                <option {{ 'selected=""'if not query['format'] }} value>Disabled</option>
+                {% for shortname in format_shortnames %}
+                <option value="{{shortname}}" {{ 'selected=""'if query['format'] == shortname }}>{{ shortname }}</option>
+            {% endfor %}</select>
+        </summary>
+        <small>output format of highlighted syntax</small>
+    </details>
+    <details>
+        <summary>
+            <label for="mime">Content-Type (MIME)</label>
+            <select name="mime">
+                <option {{ 'selected=""'if not query['mime'] }} value>Disabled</option>
+                {% for mime in mime_types %}
+                <option value="{{mime}}" {{ 'selected=""'if query['mime'] == mime }}>{{ mime }}</option>
+            {% endfor %}</select>
+        </summary>
+        <small>content-type Header the server should return</small>
+    </details>
+    <input type="text" name="preview" value="{{ query['preview'] }}" style="display: none"/>
+    <input type="submit" value="☝ Refresh"/>
+</form>

src/httpaste/view/container/post_paste_form.html

@@ -0,0 +1,26 @@
+<form class="color-theme font-theme" action="{{paste_form_url}}" method="post" enctype="multipart/form-data" target="_top">
+    <details>
+        <summary>
+            <label for="data">Data
+                <textarea name="data" cols="60" rows="10" style="width:100%"></textarea><br/>
+                <input type="file" id="myfile" name="data"/>
+            </label>
+        </summary>
+        <small>
+            Either supply a past text, or upload a file.
+        </small>
+    </details>
+    <details>
+        <summary>
+            <label for="lifetime">Lifetime
+                <input type="number" id="lname" name="lifetime" value="5">
+            </label>
+        </summary>
+        <small>
+            Set a paste’s lifetime to make it expire after a specified amount of time.
+            The lifetime must be provided in minutes and cannot be less than 1 (, unless lesser than 0).
+            A lifetime of 0 will evaluate to a lifetime 1. A lifetime of less than 0 will make the paste expire after first read.
+        </small>
+    </details>
+    <input type="submit" value="☝ Paste"/>
+</form>

src/httpaste/view/frame/base.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title></title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        
+        <style>
+
+        </style>
+    </head>
+    <body>
+        <main>
+            {% block content %}{% endblock %}
+        </main>
+    </body>
+</html>

src/httpaste/view/frame/decorated.html

@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title></title>
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <style>
+
+            html {
+                background-color: #DDD;
+                padding: 0 1em 0 1em;
+                font-size: 100%;
+            }
+
+            form > *, menu > li {
+                margin-bottom: 1em;
+            }
+
+        </style>
+    </head>
+    <body>
+        <header>
+            {% block header %}{% endblock %}
+        </header>
+        <hr/>
+        <main>
+            {% block content %}{% endblock %}
+        </main>
+    </body>
+</html>

src/httpaste/view/viewport/ui/paste/get.html

@@ -0,0 +1,36 @@
+{% extends 'frame/decorated.html' %}
+{% block header %}
+<h1><a href="/">httpaste</a> - <a href="/ui/paste">Paste</a> - Conditioner</h1>
+    <p>
+    Preview and conditon an existing paste
+    </p>
+{% endblock %}
+{% block content %}
+
+    {% if query['preview'] %}
+    Preview
+    <iframe src="{{paste_url}}" title="as" style="resize:both; width: 100%"></iframe>
+    {% else %}
+    <p><b>Preview is disabled.</b>
+        <br/>
+        This probably happened because the paste is set to expire after read.
+        <br/>
+        <i>You can still proceed to condition the paste URL.</i>
+    </p>
+    {% endif %}
+    {% include 'container/get_paste_form.html' %}
+    <hr/>
+    <figure>
+        <figcaption><strong>URLs</strong></figcaption>
+        <dl>
+            <dt>Formatted</dt>
+            <dd>
+                <a href="{{paste_url}}" target="_blank">{{paste_url}}</a>
+            </dd>
+            <dt>Raw</dt>
+            <dd>
+                <a href="{{raw_paste_url}}" target="_blank">{{raw_paste_url}}</a>
+            </dd>
+        </dl>
+    </figure>
+{% endblock %}

src/httpaste/view/viewport/ui/paste/private/search.html

@@ -0,0 +1,14 @@
+{% extends 'frame/decorated.html' %}
+
+{% block header %}
+<h1><a href="/">httpaste</a> - <a href="/ui/paste">Paste</a> - Private</h1>
+
+        <p>
+        Private pastes are authenticated
+        </p>
+{% endblock %}
+{% block content %}
+{% include 'container/post_paste_form.html' %}
+
+
+{% endblock %}

src/httpaste/view/viewport/ui/paste/public/search.html

@@ -0,0 +1,14 @@
+{% extends 'frame/decorated.html' %}
+
+{% block header %}
+<h1><a href="/">httpaste</a> - <a href="/ui/paste">Paste</a> - Public</h1>
+        <p>
+        Public pastes are not indexed and can only be accessed by knowing their respective
+        paste id.
+        </p>
+{% endblock %}
+{% block content %}
+{% include 'container/post_paste_form.html' %}
+
+
+{% endblock %}

src/httpaste/view/viewport/ui/paste/search.html

@@ -0,0 +1,36 @@
+{% extends 'frame/decorated.html' %}
+
+{% block header %}
+<h1><a href="/">httpaste</a> - Paste</h1>
+
+        <p>
+        All pastes are symetrically encrypted server-side with an HMAC derived key
+        and SHA-256 hashing, a server-side salt and a randomly generated password.
+        Public paste’s passwords are derived from their ids. Private paste’s passwords
+        are randomly generated and stored inside a symetrically encrypted personal database,
+        with the encryption key also being derived through the same HMAC mechanism,
+        where a HTTP basic authentication act as the master password.
+        Paste ids, usernames, and any other identifiable attributes are only stored
+        inside the storage backend as keyed and salted BLAKE2 hashes.
+        </p>
+        <p><strong>Note:</strong>
+            The initial creation of a private paste will prompt for login credentials.
+            If the login credentials are not known, they will be created automatically.
+            If it is required to authenticate with other credentials, clear your local
+            HTTP authentication cache.
+        </p>
+{% endblock %}
+{% block content %}
+<figure>
+    <figcaption><strong>Navigation</strong></figcaption>
+    <menu>
+        <li>
+            <a href="{{create_private_paste_url}}">Create a Private Paste</a>
+        </li>
+        <li>
+            <a href="{{create_public_paste_url}}">Create a Public Paste</a>
+        </li>
+    </menu>
+</figure>
+
+{% endblock %}

src/httpaste/view/viewport/ui/search.html

@@ -0,0 +1,41 @@
+{% extends 'frame/decorated.html' %}
+
+{% block header %}
+<h1><a href="/">httpaste</a> - versatile HTTP pastebin</h1>
+<p>
+    This is the user interface of the hosted version of <a href="https://victorykit.bitbucket.io/httpaste" target="_blank">httpaste</a>, 
+    a program which offers an HTTP interface for storing public and private data (a.k.a. pastes),
+    commonly referred to as a pastebin application. It is inspired by 
+    <a href='http://sprunge.us' target='_blank'>sprunge.us</a> and <a href='http://ix.io' target="_blank">ix.io</a>.
+    It aims for a higher degree of privacy control than available commercial pastebin products.
+</p>
+<p>
+    httpaste features include:
+    <ul>
+        <li>Authenticated private and unlisted public pasting</li>
+        <li>Lifetime control (including Burn-After-Read expiration)</li>
+        <li>Encoded and Binary Data Upload</li>
+        <li>Syntax Higlighting</li>
+        <li>Output Formatting</li>
+        <li>Output Content-Type Control</li>
+    </ul>
+</p>
+<p>
+    A pseudo man page for CLI usage is available via HTTP GET of this host's root document.
+    (e.g. `<code>$ curl httpaste.it</code>`)
+</p>
+{% endblock %}
+
+{% block content %}
+    <figure>
+        <figcaption><strong>Navigation</strong></figcaption>
+        <menu>
+            <li>
+                <a href="{{paste_index_url}}">Paste</a>
+            </li>
+            <li>
+                <a href="{{user_index_url}}">User</a>
+            </li>
+        </menu>
+    </figure>
+{% endblock %}

src/httpaste/view/viewport/ui/user/search.html

@@ -0,0 +1,16 @@
+{% extends 'frame/decorated.html' %}
+
+{% block header %}
+<h1><a href="/">httpaste</a> - User</h1>
+{% endblock %}
+{% block content %}
+<figure>
+    <figcaption><strong>Navigation</strong></figcaption>
+    <menu>
+        <li>
+            <a href="{{delete_session_url}}" target="_blank">Clear Local HTTP Authentication Cache</a>
+        </li>
+    </menu>
+</figure>
+
+{% endblock %}

src/httpaste/views/container/get_paste_form.html

@@ -1,26 +0,0 @@
-<form class="color-theme font-theme" action="{{preview_url}}" method="get" enctype="multipart/form-data">
-    <details>
-        <summary>
-            <label for="syntax">Syntax</label>
-            <input type="text" name="syntax" value="{{ query['syntax'] }}"/>
-            
-        </summary>
-        <a href="https://pygments.org/docs/lexers/" target="_blank">Pygments lexer short name</a> <i>(e.g. 'terraform', 'python')</i>
-    </details>
-    <details>
-        <summary>
-            <label for="format">Format</label>
-            <input type="text" name="format" value="{{ query['format'] }}"/>
-        </summary>
-        <a href="https://pygments.org/docs/formatters/" target="_blank">Pygments formatter short name</a> <i>(e.g. 'html', 'terminal256')</i>
-    </details>
-    <details>
-        <summary>
-            <label for="mime">Content-Type (MIME)</label>
-            <input type="text" name="mime" value="{{ query['mime'] }}"/>
-        </summary>
-        Content-Type Header the server should return
-    </details>
-    <input type="text" name="preview" value="{{ query['preview'] }}" class="hidden"/>
-    <input type="submit" value="☝ Refresh"/>
-</form>

src/httpaste/views/container/post_paste_form.html

@@ -1,21 +0,0 @@
-<form class="color-theme font-theme" action="{{paste_form_url}}" method="post" enctype="multipart/form-data" target="_top">
-    <details>
-        <summary>
-            <label for="data">Data</label>
-            <div><textarea name="data" cols="60" rows="10" style="width:100%"></textarea><br/>
-            <input type="file" id="myfile" name="data"/>
-            </div>
-        </summary>
-        Either supply a past text, or upload a file.
-    </details>
-    <details>
-        <summary>
-            <label for="lifetime">Lifetime</label>
-            <input type="number" id="lname" name="lifetime" value="5">
-        </summary>
-        Set a paste’s lifetime to make it expire after a specified amount of time.<br/>
-        The lifetime must be provided in minutes and cannot be less than 1<br/>(, unless lesser than 0).<br/>
-        A lifetime of 0 will evaluate to a lifetime 1.
-    </details>
-    <input type="submit" value="☝ Paste"/>
-</form>

src/httpaste/views/frame/base.html

@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <title></title>
-        <style>
-            
-            html, body {
-                margin: 0;
-                height: 100%;
-                width: 100%;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-            }
-
-            form {
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: left;
-            }
-
-            .hidden {
-                display: none;
-            }
-
-            .color-theme details {
-                background-color: #EEE;
-            }
-
-            .font-theme details {
-                font-style: italic;
-            }
-
-            .color-theme details > summary {
-                background-color: white;
-            }
-            
-            .font-theme details > summary {
-                font-style: normal;
-            }
-
-            details {
-                margin-bottom: 1em;
-            }
-
-            details > summary {
-                list-style-type: '?';
-            }
-        </style>
-    </head>
-    <body>
-        <main>
-            {% block content %}{% endblock %}
-        </main>
-    </body>
-</html>

src/httpaste/views/frame/decorated.html

@@ -1,31 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <title></title>
-        <style>
-            html, body {
-                margin: 0;
-                height: 100%;
-                width: 100%;
-                display: flex;
-            }
-
-            main {
-                width: 100%;
-                display: flex;
-                flex-direction: column;
-            }
-
-            .iframe {
-                width: 100%;
-                flex-grow: 1;
-                border: none;
-            }
-        </style>
-    </head>
-    <body>
-        <main>
-            {% block content %}{% endblock %}
-        </main>
-    </body>
-</html>

src/httpaste/views/viewport/ui/paste/get.html

@@ -1,27 +0,0 @@
-{% extends 'frame/base.html' %}
-
-{% block content %}
-
-    <a href="/">Return</a>
-    <h1>Paste Conditioner</h1>
-    {% if query['preview'] %}
-    Preview
-    <iframe src="{{paste_url}}" title="as" style="resize:both; width: 100%"></iframe>
-    <hr/>
-    {% else %}
-    <p><b>Preview is disabled.</b>
-        <br/>
-        This probably happened because the paste is set to expire after read.
-        <br/>
-        <i>You can still proceed to condition the paste URL.</i>
-    </p>
-    {% endif %}
-    {% include 'container/get_paste_form.html' %}
-    <div style="justify-content: center">
-    <hr/>
-    <h3>Paste URLs</h3>
-    Formatted: <a href="{{paste_url}}" target="_top">{{paste_url}}</a>
-    <br/>
-    Raw: <a href="{{raw_paste_url}}" target="_top">{{raw_paste_url}}</a>
-    </div>
-{% endblock %}

src/httpaste/views/viewport/ui/paste/private/search.html

@@ -1,5 +0,0 @@
-{% extends 'frame/base.html' %}
-
-{% block content %}
-    {% include 'container/post_paste_form.html' %}
-{% endblock %}

src/httpaste/views/viewport/ui/paste/public/search.html

@@ -1,5 +0,0 @@
-{% extends 'frame/base.html' %}
-
-{% block content %}
-    {% include 'container/post_paste_form.html' %}
-{% endblock %}

src/httpaste/views/viewport/ui/paste/search.html

@@ -1,29 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <title></title>
-        <style>
-            html, body {
-                height: 100%;
-                width: 100%;
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-                justify-content: center;
-            }
-        </style>
-    </head>
-    <body>
-        <p>
-            <a href="{{create_private_paste_url}}">Create a Private Paste</a>
-        </p>
-        <p>
-            <a href="{{create_public_paste_url}}">Create a Public Paste</a>
-        </p>
-        <p>
-            <a href="{{ delete_session_url }}" target="_blank" style="text-align: center">
-                Flush Local HTTP Authentication Cache
-            </a>
-        </p>
-    </body>
-</html>

src/httpaste/views/viewport/ui/search.html

@@ -1,11 +0,0 @@
-{% extends 'frame/decorated.html' %}
-
-{% block content %}
-    <header style="display: flex; justify-content: center">
-        <details>
-            <summary style="text-align: center"><a href="/">httpaste - versatile HTTP pastebin (User Interface)</a></summary>
-            <textarea readonly="true" style="width: 100%">{{ man_page }}</textarea>
-        </details>
-    </header>
-    <iframe src="{{ paste_index_url }}" title="" class="iframe"></iframe>
-{% endblock %}