Working shortener with some style

Dockerfile

@@ -6,10 +6,10 @@ RUN apk update && apk add su-exec \
 COPY . /app
 WORKDIR /app
 
+RUN pipenv install
+
 ENV FLASK_APP=snip
 ENV FLASK_ENV=production
 
-RUN pipenv install
-
 EXPOSE 5000
 CMD ["pipenv", "run", "flask", "run", "--host=0.0.0.0"]

package.json

@@ -3,10 +3,20 @@
     "version": "1.0.0",
     "description": "A tiny url shortener",
     "private": true,
+    "watch": {
+        "build_scss": {
+            "patterns": [
+                "templates/"
+            ],
+            "extensions": "scss"
+        },
+        "build_webpack": "templates/*.js"
+    },
     "scripts": {
-        "build": "webpack --config webpack.dev.js",
+        "build_scss": "node-sass snip/templates -o snip/static",
-        "watch": "webpack --watch --config webpack.dev.js",
+        "build_webpack": "webpack --config webpack.dev.js",
-        "publish": "webpack --config webpack.prod.js"
+        "watch": "npm-watch",
+        "publish": "node-sass snip/templates -o snip/static && webpack --config webpack.prod.js"
     },
     "repository": {
         "type": "git",
@@ -18,6 +28,8 @@
         "clean-webpack-plugin": "^3.0.0",
         "css-loader": "^4.2.2",
         "gulp": "^4.0.2",
+        "node-sass": "^4.14.1",
+        "npm-watch": "^0.7.0",
         "sass": "^1.26.10",
         "sass-loader": "^10.0.2",
         "style-loader": "^1.2.1",
@@ -26,7 +38,11 @@
         "webpack-merge": "^5.1.3"
     },
     "dependencies": {
+        "@popperjs/core": "^2.5.3",
+        "jquery": "^3.5.1",
+        "lodash": "^4.17.20",
         "loglevel": "^1.7.0",
-        "reset-css": "^5.0.1"
+        "reset-css": "^5.0.1",
+        "tippy.js": "^6.2.7"
     }
 }

snip/forms.py

@@ -3,9 +3,11 @@ from flask_wtf import FlaskForm
 from wtforms import StringField
 from wtforms import validators
 
+from .urlvalidator import URLValidator
+
 class SnipForm(FlaskForm):
     # The URL validator from wtforms is rather simple and only used as a first
     # line of defense here. The URL is later validated again by urlvalidator.py
     # in snipper.py which can lead to a UrlValidationError.
     url = StringField('url', validators=[validators.InputRequired(),
-                                         validators.URL(require_tld=False, message="Not a valid URL")])
+                                         URLValidator(message='Please enter a URL like "https://example.com/example"')])

snip/snipper.py

@@ -1,5 +1,4 @@
 from . import db
-from .urlvalidator import URLValidator
 from .models import Snip
 
 import logging
@@ -10,9 +9,6 @@ log = logging.getLogger(__name__)
 
 
 def snip(url: str, reusable=False) -> str:
-    url_validator = URLValidator()
-    url_validator(url)
-
     if reusable:
         log.debug("Snipping is marked reusable. Looking for existing reusable snips.")
         reusable_snip = Snip.query.filter(Snip.url == url,

snip/static/index.css

@@ -0,0 +1,85 @@
+html, body {
+  height: 100%;
+  height: 100vh;
+  margin: 0;
+  padding: 0; }
+
+.errors {
+  list-style: none;
+  font-size: smaller;
+  color: grey;
+  padding: 0; }
+
+.box {
+  display: flex; }
+  .box-v {
+    flex-direction: row; }
+  .box-h {
+    flex-direction: column; }
+  .box.center {
+    justify-content: center;
+    align-items: center; }
+
+.grab-h {
+  min-height: 100%; }
+
+.grab-v {
+  width: 100%; }
+
+.input-group {
+  display: flex;
+  align-items: stretch;
+  border: solid 1px;
+  border-color: #e0e0e0;
+  border-radius: 5px;
+  padding: 1px; }
+  .input-group.invalid {
+    border: solid 1px;
+    border-color: #FD490D;
+    box-shadow: 0 0 0 1px rgba(253, 73, 13, 0.25); }
+    .input-group.invalid > input, .input-group.invalid > button {
+      color: #FD490D; }
+  .input-group:focus-within:not(.invalid) {
+    border: solid 1px;
+    border-color: #0d6efd;
+    box-shadow: 0 0 0 1px rgba(13, 110, 253, 0.25); }
+  .input-group input[type="text"] {
+    flex: 1 1 auto;
+    border: unset; }
+    .input-group input[type="text"]:focus {
+      outline: unset; }
+    .input-group input[type="text"]:invalid {
+      outline: none;
+      border: none;
+      box-shadow: none; }
+  .input-group .input-group-append {
+    background-color: white;
+    border: unset;
+    cursor: pointer; }
+    .input-group .input-group-append:focus {
+      outline: unset; }
+
+form {
+  width: 100%;
+  display: flex;
+  justify-content: center; }
+
+input[type="text"] {
+  font-style: bold;
+  padding: 10px;
+  width: 50%;
+  margin: auto; }
+
+button {
+  /* reset browser style */
+  border: none;
+  background: none;
+  /* snip style */
+  font-size: 2em;
+  text-align: center;
+  /* vertical-align: middle; */
+  /* transform: translate(-1.3em); */ }
+
+.fa-angle-right {
+  line-height: unset;
+  font-style: oblique; }

snip/static/normalize.css

@@ -0,0 +1,349 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Document
+   ========================================================================== */
+
+/**
+ * 1. Correct the line height in all browsers.
+ * 2. Prevent adjustments of font size after orientation changes in iOS.
+ */
+
+html {
+  line-height: 1.15; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Remove the margin in all browsers.
+ */
+
+body {
+  margin: 0;
+}
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1.15; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}

snip/templates/index.html

@@ -1,27 +1,36 @@
 <!DOCTYPE html>
-
 <html>
 
-    <head>
+<head>
-        <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-        <title>Snip!</title>
+    <title>Snip!</title>
-        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+    <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
-    </head>
 
-    <body>
+    <link rel="stylesheet" href="{{ url_for('static', filename='normalize.css') }}">
-        <form method="post" action="{{ url_for('submit_snip') }}">
+    <link rel="stylesheet" href="{{ url_for('static', filename='fontawesome/css/all.min.css') }}">
-            {{ form.csrf_token }}
+    <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
-            {{ form.url }}
-            <button type="submit">Snip!</button>
-        </form>
-        {% if form.url.errors %}
-        <ul class=errors>
-            {% for error in form.url.errors %}
-            <li>{{ error }}</li>
-            {% endfor %}
-        </ul>
-        {% endif %}
-    </body>
 
     <script src="{{ url_for('static', filename='dist/snip.bundle.js') }}"></script>
+</head>
+
+<body>
+    <div class="box box-h grab-h grab-v center">
+        <form method="post" action="{{ url_for('submit_snip') }}">
+            {{ form.csrf_token }}
+            <div id="snip-input" class="input-group {% if form.url.errors %}invalid{% endif %}">
+                {{ form.url }}
+                <button type="submit" class="input-group-append"><i class="fas fa-angle-right"></i></button>
+            </div>
+        </form>
+    </div>
+
+    {% if form.url.errors %}
+    <ul class=errors>
+        {% for error in form.url.errors %}
+        <li>{{ error }}</li>
+        {% endfor %}
+    </ul>
+    {% endif %}
+</body>
+
 </html>

snip/templates/index.js

@@ -1 +1,41 @@
-console.log("Hello World");
+import $ from 'jquery';
+import { createPopper } from '@popperjs/core';
+
+$("document").ready(() => {
+    addInvalidOnInvalid();
+    removeInvalidOnChange();
+
+ });
+
+let errorPopper = null;
+
+let addInvalidOnInvalid = () => {
+    $("input[type='text']").on('invalid', (ev) => {
+        if(ev.target.parentNode) {
+            $(ev.target.parentNode).addClass("invalid");
+            removeInvalidOnChange();
+        }
+    });
+
+    if ($('.errors').get(0)) {
+        errorPopper = createPopper($('.box > form').get(0), $('.errors').get(0), {
+            placement: 'bottom',
+            modifiers: [
+                { name: 'offset', options: { offset: [0, 8]}}
+            ]
+        });
+    }
+};
+
+let removeInvalidOnChange = () => {
+    $("input[type='text']").one('input', (ev) => {
+        if(ev.target.parentNode) {
+            $(ev.target.parentNode).removeClass("invalid");
+        }
+
+        if (errorPopper) {
+            errorPopper.destroy();
+            errorPopper = null;
+        }
+    });
+};

snip/templates/index.scss

@@ -0,0 +1,109 @@
+html, body{
+    height:100%;
+    height: 100vh;
+    margin:0;
+    padding:0
+}
+
+.errors {
+    list-style: none;
+    font-size: smaller;
+    color: grey;
+    padding: 0;
+}
+
+.box {
+    display: flex;
+    &-v { flex-direction: row; }
+    &-h { flex-direction: column; }
+
+    &.center {
+        justify-content: center;
+        align-items: center;
+    }
+}
+
+.grab {
+    &-h {min-height: 100%;}
+    &-v {width: 100%;}
+}
+
+.input-group {
+    display: flex;
+    align-items: stretch;
+    border: solid 1px;
+    border-color: rgb(224, 224, 224);
+    border-radius: 5px;
+    padding: 1px;
+
+    &.invalid {
+        border: solid 1px;
+        border-color: #FD490D;
+        box-shadow: 0 0 0 1px rgba(#FD490D, 0.25);
+
+        & > input, & > button {
+            color: #FD490D;
+        }
+    }
+
+    &:focus-within:not(.invalid) {
+        border: solid 1px;
+        border-color: #0d6efd;
+        box-shadow: 0 0 0 1px rgba(#0d6efd, 0.25);
+    }
+
+    input[type="text"] {
+        flex: 1 1 auto;
+        border: unset;
+
+        &:focus {
+            outline: unset;
+        }
+
+        &:invalid {
+            outline: none;
+            border: none;
+            box-shadow: none;
+        }
+    }
+
+    .input-group-append {
+        background-color: white;
+        border: unset;
+        cursor: pointer;
+
+        &:focus {
+            outline: unset;
+        }
+    }
+}
+
+form {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+
+input[type="text"] {
+    font-style: bold;
+    padding: 10px;
+    width: 50%;
+    margin: auto;
+}
+
+button {
+    /* reset browser style */
+    border: none;
+    background: none;
+
+    /* snip style */
+    font-size: 2em;
+    text-align: center;
+    /* vertical-align: middle; */
+    /* transform: translate(-1.3em); */
+}
+
+.fa-angle-right {
+    line-height: unset;
+    font-style: oblique;
+}

snip/templates/success.html

@@ -6,10 +6,16 @@
         <meta charset="UTF-8">
         <title>Snip!</title>
         <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
+
+        <link rel="stylesheet" href="{{ url_for('static', filename='normalize.css') }}">
+        <link rel="stylesheet" href="{{ url_for('static', filename='index.css') }}">
     </head>
 
     <body>
-        <a href=" {{ url_for('snip_to', snip=snip) }}">test</a>
+        <div class="box box-h grab-h grab-v center">
+            <span>Here's your URL:</span>
+            <a href=" {{ url_for('snip_to', snip=snip) }}">{{ request.url_root }}{{ url_for('snip_to', snip=snip)[1:] }}</a>
+        </div>
     </body>
 
     <script src="{{ url_for('static', filename='dist/snip.bundle.js') }}"></script>

snip/urlvalidator.py

@@ -6,8 +6,9 @@ https://github.com/django/django/blob/83fbaa92311dd96e330496a0e443ea71b9c183e2/d
 import re
 import ipaddress
 from urllib.parse import urlsplit, urlunsplit
+from wtforms.validators import ValidationError
 
-class UrlValidationError(Exception):
+class UrlValidationError(ValidationError):
     def __init__(self, message, code, params):
         self.message = message
         self.code = code
@@ -87,12 +88,25 @@ class URLValidator(RegexValidator):
     message = 'Enter a valid URL.'
     schemes = ['http', 'https', 'ftp', 'ftps']
 
-    def __init__(self, schemes=None, **kwargs):
+    def __init__(self, schemes=None, message=None, **kwargs):
         super().__init__(**kwargs)
         if schemes is not None:
             self.schemes = schemes
+        if message is not None:
+            self.message = message
+
+    def __call__(self, form, field):
+        if not field.raw_data or not field.raw_data[0]:
+            if self.message is None:
+                message = field.gettext('This field is required.')
+            else:
+                message = self.message
+
+            field.errors[:] = []
+            raise UrlValidationError(message, code=self.code, params=[])
+
+        value = field.raw_data[0] if field.raw_data else None
 
-    def __call__(self, value):
         if not isinstance(value, str):
             raise UrlValidationError(self.message, code=self.code, params={'value': value})
         # Check if the scheme is valid.

snip/views.py

@@ -1,4 +1,5 @@
-from flask import render_template, redirect, url_for
+from flask import render_template, redirect, url_for, session, request
+from werkzeug.datastructures import MultiDict
 
 from . import app
 from .forms import SnipForm
@@ -7,7 +8,13 @@ from . import snipper
 
 @app.route('/')
 def index():
-    form = SnipForm()
+    if session.get('formdata'):
+        form = SnipForm(MultiDict(session.get('formdata')))
+        form.validate()
+        session.pop('formdata')
+    else:
+        form = SnipForm()
+
     return render_template('index.html', form=form)
 
 @app.route('/snip', methods=['POST'])
@@ -16,7 +23,8 @@ def submit_snip():
     if form.validate_on_submit():
         snip = snipper.snip(form.url.data, reusable=False)
         return render_template('success.html', snip=snip)
-    return render_template('index.html', form=form)
+    session['formdata'] = request.form
+    return redirect(url_for('index'))
 
 
 @app.route('/<snip>')

webpack.common.js

@@ -13,16 +13,26 @@ module.exports = {
         path: path.resolve(__dirname, 'snip', 'static', 'dist')
     },
     module: {
-        rules: [{
+        rules: [
-            test: /\.s[ac]ss$/i,
+            {
-            use: [
+                test: /\.css$/i,
-                // Creates `style` nodes from JS strings
+                use: [
-                'style-loader',
+                    // Creates `style` nodes from JS strings
-                // Translates CSS into CommonJS
+                    'style-loader',
-                'css-loader',
+                    // Translates CSS into CommonJS
-                // Compiles Sass to CSS
+                    'css-loader'
-                'sass-loader',
+                ]
-            ]
+            },
-        }]
+            {
+                test: /\.s[ac]ss$/i,
+                use: [
+                    // Creates `style` nodes from JS strings
+                    'style-loader',
+                    // Translates CSS into CommonJS
+                    'css-loader',
+                    // Compiles Sass to CSS
+                    'sass-loader',
+                ]
+            }]
     }
 };

webpack.prod.js

@@ -3,5 +3,9 @@ const { merge } = require('webpack-merge');
 const path = require('path');
 
 module.exports = merge(common, {
-    mode: 'production'
+    mode: 'production',
+    output: {
+        filename: '[name].bundle.js',
+        path: path.resolve(__dirname, 'snip', 'static', 'dist')
+    },
 });