Added flask wtforms with login and register pages

requirements-linux.txt

@@ -1,9 +1,12 @@
 Click==7.0
 Flask==1.1.1
 Flask-SQLAlchemy==2.4.1
+Flask-WTF==0.14.3
 gunicorn==19.9.0
 itsdangerous==1.1.0
 Jinja2==2.10.3
 MarkupSafe==1.1.1
+pkg-resources==0.0.0
 SQLAlchemy==1.3.11
 Werkzeug==0.16.0
+WTForms==2.2.1

requirements-windows.txt

@@ -1,9 +1,11 @@
 Click==7.0
 Flask==1.1.1
 Flask-SQLAlchemy==2.4.1
+Flask-WTF==0.14.3
 itsdangerous==1.1.0
 Jinja2==2.10.3
 MarkupSafe==1.1.1
 SQLAlchemy==1.3.11
 waitress==1.4.3
 Werkzeug==0.16.0
+WTForms==2.2.1

src/core/__init__.py

@@ -6,8 +6,12 @@ app.config['SQLALCHEMY_DATABASE_URI'] = "sqlite:///static/db/database.db"
 app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
 app.config['TITLE'] = ':::APP TITLE:::'
 
+# For csrf...change!!
+app.config['SECRET_KEY'] = '48e80dcf4ed6ea952ca1b7b564be22d665e6e178f7fda84828fdd5e7cdca097a'
 
 from core.models import db
 db.init_app(app)
 
+
+from core.forms import RegisterForm, LoginForm
 from core import routes

src/core/forms.py

@@ -0,0 +1,19 @@
+from flask_wtf import FlaskForm
+from wtforms import StringField, PasswordField, SubmitField
+from wtforms.validators import DataRequired, Length, Email, EqualTo
+
+
+
+class RegisterForm(FlaskForm):
+    username = StringField('Username', validators=[DataRequired(), Length(min=4, max=24)])
+    email    = StringField('Email', validators=[DataRequired(), Email()])
+    password = PasswordField('Password', validators=[DataRequired(), Length(min=8)])
+    confirm_password = PasswordField('Confirm Password',
+                                        validators=[DataRequired(), EqualTo('password', message="Passwords must match!")])
+    submit   = SubmitField("Sign Up")
+
+
+class LoginForm(FlaskForm):
+    username = StringField('Username', validators=[DataRequired(), Length(min=4, max=24)])
+    password = PasswordField('Password', validators=[DataRequired(), Length(min=8, max=32)])
+    submit   = SubmitField("Login")

src/core/models.py

@@ -4,10 +4,17 @@ db = SQLAlchemy()
 
 
 class Table(db.Model):
-    # title = db.Column(db.String, nullable=False)
-    # icon  = db.Column(db.String, nullable=False)
-    # link  = db.Column(db.String, nullable=False)
     id = db.Column(db.Integer, nullable=False, primary_key=True, unique=True, autoincrement=True)
 
     def __repr__(self):
         return f"['{self.title}', '{self.icon}', '{self.link}', '{self.id}']"
+
+
+class User(db.Model):
+    username = db.Column(db.String, nullable=False)
+    email    = db.Column(db.String, nullable=False)
+    password = db.Column(db.String, nullable=False)
+    id       = db.Column(db.Integer, nullable=False, primary_key=True, unique=True, autoincrement=True)
+
+    def __repr__(self):
+        return f"['{self.username}', '{self.email}', '{self.password}', '{self.id}']"

src/core/routes/Routes.py

@@ -22,3 +22,14 @@ def root():
     return render_template('error.html',
                             title='Error!',
                             message='Must use GET request type...')
+
+
+@app.route('/about', methods=['GET', 'POST'])
+def about():
+    if request.method == 'GET':
+        return render_template('about.html',
+                                title=TITLE)
+
+    return render_template('error.html',
+                            title='Error!',
+                            message='Must use GET request type...')

src/core/routes/__init__.py

@@ -1,2 +1,2 @@
 from . import Routes
-from .pages import Login
+from .pages import Login, Register

src/core/routes/pages/Login.py

@@ -4,7 +4,7 @@
 from flask import request, render_template
 
 # App imports
-from core import app, db
+from core import app, db, LoginForm
 from core.MessageHandler import MessageHandler   # Get simple message processor
 
 
@@ -14,8 +14,10 @@ TITLE      = app.config['TITLE']
 @app.route('/login', methods=['GET', 'POST'])
 def login():
     if request.method == 'GET':
+        _form = LoginForm()
         return render_template('login.html',
-                                title=TITLE)
+                                title=TITLE,
+                                form=_form)
 
     return render_template('error.html',
                             title='Error!',

src/core/routes/pages/Register.py

@@ -0,0 +1,24 @@
+# Python imports
+
+# Lib imports
+from flask import request, render_template
+
+# App imports
+from core import app, db, RegisterForm
+from core.MessageHandler import MessageHandler   # Get simple message processor
+
+
+msgHandler = MessageHandler()
+TITLE      = app.config['TITLE']
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'GET':
+        _form = RegisterForm()
+        return render_template('register.html',
+                                title=TITLE,
+                                form=_form)
+
+    return render_template('error.html',
+                            title='Error!',
+                            message='Must use GET request type...')

src/core/templates/about.html

@@ -0,0 +1,25 @@
+{% extends "layout.html" %}
+
+{% block body_header_additional %}
+{% endblock body_header_additional %}
+
+{% block body_content %}
+    <div class="container">
+        <div class="row">
+            <div class="col justify-content-center text-center">
+                <p>Login stub...</p>
+            </div>
+        </div>
+    </div>
+{% endblock body_content %}
+
+
+{% block body_footer_additional %}
+{% endblock body_footer_additional %}
+
+{% block body_scripts_additional %}
+    <script src="{{ url_for('static', filename='js/ui-logic.js')}}"></script>
+    <script src="{{ url_for('static', filename='js/post-ajax.js')}}"></script>
+    <script src="{{ url_for('static', filename='js/ajax.js')}}"></script>
+    <script src="{{ url_for('static', filename='js/events.js')}}"></script>
+{% endblock body_scripts_additional %}

src/core/templates/body-header.html

@@ -4,7 +4,7 @@
         <div class="navbar-brand justify-content-center text-center">
             <div class="site-branding">
                 <h1 class="site-title">
-                    <a href="#" title="TITLE" rel="home">
+                    <a href="{{ url_for('root') }}" title="TITLE" rel="home">
                         Hello World!
                     </a>
                 </h1>
@@ -17,11 +17,23 @@
         <!-- Links -->
         <ul class="navbar-nav">
             <li class="nav-item">
-                <a class="nav-link" href="#">
+                <a class="nav-link" href="{{ url_for('root') }}">
-                    <i class="fab fa-youtube"></i>&nbsp;&nbsp;Home</a>
+                    <i class="fas fa-home"></i>&nbsp;&nbsp;Home</a>
             </li>
 
             <!-- Dropdowns -->
+            <li class="nav-item dropdown">
+                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
+                    Account
+                </a>
+                <div class="dropdown-menu">
+                    <a class="dropdown-item" href="{{ url_for('login') }}">
+                        <i title="Send Us an Email" class="fas fa-user"></i>&nbsp;&nbsp;Login</a>
+                    <a class="dropdown-item" href="{{ url_for('register') }}">
+                        <i title="Find Us on Twitter" class="fas fa-user-plus"></i>&nbsp;&nbsp;Register</a>
+                </div>
+            </li>
+
             <!-- Others Dropdown -->
             <li class="nav-item dropdown">
                 <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
@@ -56,16 +68,16 @@
                 </a>
                 <div class="dropdown-menu">
                     <a class="dropdown-item" href="#">
-                        <i title="Find Us on LinkedIn" class="fab fa-patreon"></i> Patreon</a>
+                        <i title="Donate via Patreon" class="fab fa-patreon"></i> Patreon</a>
                     <a class="dropdown-item" href="#">
-                        <i title="Find Us on LinkedIn" class="fab fa-paypal"></i> Paypal</a>
+                        <i title="Donate via Paypal" class="fab fa-paypal"></i> Paypal</a>
                 </div>
             </li>
 
             <!-- End Dropdowns -->
 
             <li class="nav-item">
-                <a class="nav-link" href="#">
+                <a class="nav-link" href="{{ url_for('about') }}">
                     <i class="far fa-address-card"></i> About</a>
             </li>
         </ul>

src/core/templates/login.html

@@ -6,8 +6,26 @@
 {% block body_content %}
     <div class="container">
         <div class="row">
-            <div class="col justify-content-center text-center">
+            <div class="col">
-                <p>Login stub...</p>
+            <!-- <div class="col justify-content-center text-center"> -->
+                <form action="" method="POST">
+                    {{ form.hidden_tag() }}
+                    <fieldset class="form-group">
+                        <legend class="border-bottom mb-4">Login</legend>
+                        <a href="/register">Register</a>
+                        <div class="form-group">
+                            {{ form.username.label(class="form-control-label") }}
+                            {{ form.username(class="form-control form-control-sm", autocomplete="off") }}
+                        </div>
+                        <div class="form-group">
+                            {{ form.password.label(class="form-control-label") }}
+                            {{ form.password(class="form-control form-control-sm", autocomplete="off") }}
+                        </div>
+                    </fieldset>
+                    <div class="form-group justify-content-right text-right">
+                        {{ form.submit(class="btn btn-success") }}
+                    </div>
+                </form>
             </div>
         </div>
     </div>

src/core/templates/register.html

@@ -0,0 +1,53 @@
+{% extends "layout.html" %}
+
+{% block body_header_additional %}
+{% endblock body_header_additional %}
+
+{% block body_content %}
+    <div class="container">
+        <div class="row">
+            <div class="col">
+            <!-- <div class="col justify-content-center text-center"> -->
+                <form action="" method="POST">
+                    {{ form.hidden_tag() }}
+                    <fieldset class="form-group">
+                        <legend class="border-bottom mb-4">Create Account</legend>
+                        <div class="form-group">
+                            {{ form.username.label(class="form-control-label") }}
+                            {{ form.username(class="form-control form-control-sm", autocomplete="off") }}
+                        </div>
+                        <div class="form-group">
+                            {{ form.email.label(class="form-control-label") }}
+                            {{ form.email(class="form-control form-control-sm", autocomplete="off") }}
+                        </div>
+                        <div class="form-group">
+                            {{ form.password.label(class="form-control-label") }}
+                            {{ form.password(class="form-control form-control-sm", autocomplete="off") }}
+                        </div>
+                        <div class="form-group">
+                            {{ form.confirm_password.label(class="form-control-label") }}
+                            {{ form.confirm_password(class="form-control form-control-sm", autocomplete="off") }}
+                        </div>
+                    </fieldset>
+                    <div class="form-group justify-content-right text-right">
+                        {{ form.submit(class="btn btn-success") }}
+                    </div>
+                </form>
+                <div class="border-top pt-3">
+                    <small>Already Have An Account? <a class="ml-2" href="{{ url_for('login') }}">Login!</a></small>
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock body_content %}
+
+
+{% block body_footer_additional %}
+{% endblock body_footer_additional %}
+
+{% block body_scripts_additional %}
+    <script src="{{ url_for('static', filename='js/ui-logic.js')}}"></script>
+    <script src="{{ url_for('static', filename='js/post-ajax.js')}}"></script>
+    <script src="{{ url_for('static', filename='js/ajax.js')}}"></script>
+    <script src="{{ url_for('static', filename='js/events.js')}}"></script>
+{% endblock body_scripts_additional %}