implement base navigation

.gitignore

@@ -127,3 +127,6 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+instance/
+.idea/

flask_app/__init__.py

@@ -0,0 +1,30 @@
+import os
+from flask import Flask
+
+test_config = None
+
+app = Flask(__name__, instance_relative_config=True)
+app.config.from_mapping(
+    SECRET_KEY='dev',
+)
+
+if test_config is None:
+    # load the instance config, if it exists, when not testing
+    app.config.from_pyfile('config.py', silent=True)
+else:
+    # load the test config if passed in
+    app.config.from_mapping(test_config)
+
+# ensure the instance folder exists
+try:
+    os.makedirs(app.instance_path)
+except OSError:
+    pass
+
+from . import auth
+from . import form
+app.register_blueprint(auth.bp)
+app.register_blueprint(form.bp)
+app.add_url_rule('/', endpoint='index')
+
+

flask_app/auth.py

@@ -0,0 +1,49 @@
+import functools
+
+from flask import Blueprint, flash, g, redirect, render_template, request, session, url_for
+from flask_app.utils.forms import LoginForm
+from flask_app.utils.tools import verify_pass
+bp = Blueprint('auth', __name__, url_prefix='/auth')
+
+
+@bp.route("/login", methods=["GET", "POST"])
+def login():
+    print('LAKAD MATATAAAAAAAAAG')
+    form = LoginForm()
+    user = form.user_id.data
+    if form.validate_on_submit():
+        if verify_pass(user, form.password.data):
+            print('NORMALIN NORMALIN', url_for("index"))
+            session.clear()
+            session["user"] = user
+            return redirect(url_for("index"))
+        else:
+            flash("Authentication failed", "danger")
+    return render_template("auth/login.html", title="Login", form=form)
+
+
+@bp.before_app_request
+def load_logged_in_user():
+    user_id = session.get('user_id')
+
+    if user_id is None:
+        g.user = None
+    else:
+        g.user = user_id
+
+
+@bp.route('/logout')
+def logout():
+    session.clear()
+    return redirect(url_for('index'))
+
+
+def login_required(view):
+    @functools.wraps(view)
+    def wrapped_view(**kwargs):
+        if g.user is None:
+            return redirect(url_for('auth.login'))
+
+        return view(**kwargs)
+
+    return wrapped_view

flask_app/form.py

@@ -0,0 +1,23 @@
+from time import time
+from flask import (
+    Blueprint, flash, g, redirect, render_template, request, url_for
+)
+from flask_app.utils.forms import MainForm, LoginForm
+from werkzeug.exceptions import abort
+
+from flask_app.auth import login_required
+
+bp = Blueprint('form', __name__)
+
+
+@login_required
+@bp.route('/', methods=["GET", "POST"])
+def index():
+    form = MainForm()
+    if form.validate_on_submit():
+        payload = {
+            "id": form.mandatory_string_field.data,
+            "gate": form.optional_string_field.data,
+            "issued_at": int(time()),
+        }
+    return render_template("main/index.html", title="Create Token", form=form)

flask_app/static/style.css

@@ -0,0 +1,91 @@
+body {
+  background: #fafafa;
+  color: #333333;
+  margin-top: 5rem;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  color: #444444;
+}
+
+.bg-steel {
+  background-color: #5f788a;
+}
+
+.site-header .navbar-nav .nav-link {
+  color: #cbd5db;
+}
+
+.site-header .navbar-nav .nav-link:hover {
+  color: #ffffff;
+}
+
+.site-header .navbar-nav .nav-link.active {
+  font-weight: 500;
+}
+
+.content-section {
+  background: #ffffff;
+  padding: 10px 20px;
+  border: 1px solid #dddddd;
+  border-radius: 3px;
+  margin-bottom: 20px;
+}
+
+.article-title {
+  color: #444444;
+}
+
+a.article-title:hover {
+  color: #428bca;
+  text-decoration: none;
+}
+
+.article-content {
+  white-space: pre-line;
+}
+
+.article-img {
+  height: 65px;
+  width: 65px;
+  margin-right: 16px;
+}
+
+.article-metadata {
+  padding-bottom: 1px;
+  margin-bottom: 4px;
+  border-bottom: 1px solid #e3e3e3
+}
+
+.article-metadata a:hover {
+  color: #333;
+  text-decoration: none;
+}
+
+.article-svg {
+  width: 25px;
+  height: 25px;
+  vertical-align: middle;
+}
+
+.account-img {
+  height: 125px;
+  width: 125px;
+  margin-right: 20px;
+  margin-bottom: 16px;
+}
+
+.account-heading {
+  font-size: 2.5rem;
+}
+
+.modal-content {
+  background-color: #F0FFFF;
+  z-index: 1;
+  margin: auto; /* 15% from the top and centered */
+  padding: 20px;
+  border: none;
+  border-radius: 0.25rem;
+  box-shadow: 0 0.0625rem 0.1875rem rgba(0,0,0,0.12), 0 0.0625rem 0.125rem rgba(0,0,0,0.24);
+  width: 80%; /* Could be more or less, depending on screen size */
+}

flask_app/templates/auth/login.html

@@ -0,0 +1,63 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <html lang="en">
+    <head>
+      <title>Bootstrap Example</title>
+      <meta charset="utf-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
+      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
+      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
+    </head>
+    <body>
+    <div class="content-section">
+        <form method="POST" action="">
+            {{ form.hidden_tag() }}
+            <fieldset class="form-group">
+                <legend class="border-bottom mb-4">Log In</legend>
+                <div class="form-group">
+                    {{ form.user_id.label(class="form-control-label") }}
+                    {% if form.user_id.errors %}
+                        {{ form.user_id(class="form-control form-control-lg is-invalid") }}
+                        <div class="invalid-feedback">
+                            {% for error in form.user_id.errors %}
+                                <span>{{ error }}</span>
+                            {% endfor %}
+                        </div>
+                    {% else %}
+                        {{ form.user_id(class="form-control form-control-lg") }}
+                    {% endif %}
+                </div>
+                <div class="form-group">
+                    {{ form.password.label(class="form-control-label") }}
+                    {% if form.password.errors %}
+                        {{ form.password(class="form-control form-control-lg is-invalid") }}
+                        <div class="invalid-feedback">
+                            {% for error in form.password.errors %}
+                                <span>{{ error }}</span>
+                            {% endfor %}
+                        </div>
+                    {% else %}
+                        {{ form.password(class="form-control form-control-lg") }}
+                    {% endif %}
+                </div>
+            </fieldset>
+            <div class="form-group">
+                {{ form.submit(class="btn btn-outline-info") }}
+            </div>
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    {% for category, message in messages %}
+                        {% if category == "success" %}
+                            Copy the token from below
+                        {% endif %}
+                        <div class="alert alert-{{ category }}" style='padding: 3px; width: 500px; word-break: break-all; word-wrap: break-word;'>
+                            {{ message }}
+                        </div>
+                    {% endfor %}
+                {% endif %}
+            {% endwith %}
+        </form>
+    </div>
+{% endblock content %}

flask_app/templates/base.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<title>{% block title %}{% endblock %} - Flask App</title>
+<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+<nav>
+  <h1>Flask App</h1>
+</nav>
+<section class="content">
+  <header>
+    {% block header %}{% endblock %}
+  </header>
+  {% for message in get_flashed_messages() %}
+    <div class="flash">{{ message }}</div>
+  {% endfor %}
+  {% block content %}{% endblock %}
+</section>

flask_app/templates/main/index.html

@@ -0,0 +1,71 @@
+{% extends 'base.html' %}
+
+{% block content %}
+    <header class="site-header">
+      <nav class="navbar navbar-expand-md navbar-dark bg-steel fixed-top">
+        <div class="container">
+            <div class="navbar-nav">
+                <a class="nav-item nav-link" href="{{ url_for('auth.logout') }}">Logout</a>
+            </div>
+        </div>
+      </nav>
+    </header>
+    <div class="modal-content">
+        <form method="POST" action="">
+            {{ form.hidden_tag() }}
+            <fieldset class="form-group">
+                <legend class="border-bottom mb-4">Payload</legend>
+                <div class="form-group">
+                    <label class="form-control-label" for="user_id">User ID</label>
+                    <input class="form-control" type="text" placeholder="{{ session.user }}" readonly>
+                </div>
+                <div class="form-group">
+                    {{ form.mandatory_string_field.label(class="form-control-label") }}
+                    {% if form.mandatory_string_field.errors %}
+                        {{ form.mandatory_string_field(class="form-control form-control is-invalid") }}
+                        <div class="invalid-feedback">
+                            {% for error in form.mandatory_string_field.errors %}
+                                <span>{{ error }}</span>
+                            {% endfor %}
+                        </div>
+                    {% else %}
+                        {{ form.mandatory_string_field(class="form-control form-control") }}
+                    {% endif %}
+                </div>
+                <div class="form-group">
+                    {{ form.optional_string_field.label(class="form-control-label") }}
+                    {% if form.optional_string_field.errors %}
+                        {{ fform.optional_string_field(class="form-control form-control is-invalid") }}
+                        <div class="invalid-feedback">
+                            {% for error in form.optional_string_field.errors %}
+                                <span>{{ error }}</span>
+                            {% endfor %}
+                        </div>
+                    {% else %}
+                        {{ form.optional_string_field(class="form-control form-control") }}
+                    {% endif %}
+                </div>
+            </fieldset>
+            <div class="form-group">
+                {{ form.submit(class="btn btn-outline-info") }}
+            </div>
+            {% with messages = get_flashed_messages(with_categories=true) %}
+                {% if messages %}
+                    {% for category, message in messages %}
+                        {% if category == "success" %}
+                            Congratulations! Your form has been submitted successfully!
+                        {% endif %}
+                        <div class="alert alert-{{ category }}" style='padding: 3px; width: 500px; word-break: break-all; word-wrap: break-word;'>
+                            {{ message }}
+                        </div>
+                    {% endfor %}
+                {% endif %}
+            {% endwith %}
+        </form>
+    </div>
+    <div class="border-top pt-3">
+        <small class="text-muted">
+            Not sure what you're looking at? <a class="ml-2" href="google.com">Go to the docs!</a>
+        </small>
+    </div>
+{% endblock content %}

flask_app/utils/forms.py

@@ -0,0 +1,15 @@
+from flask_wtf import FlaskForm
+from wtforms import StringField, PasswordField, SubmitField
+from wtforms.validators import DataRequired
+
+
+class LoginForm(FlaskForm):
+    user_id = StringField("User ID", validators=[DataRequired()])
+    password = PasswordField("Password", validators=[DataRequired()])
+    submit = SubmitField("Log In")
+
+
+class MainForm(FlaskForm):
+    mandatory_string_field = StringField("text_field", validators=[DataRequired()])
+    optional_string_field = StringField("text_field", validators=[])
+    submit = SubmitField("SUBMIT")