Flask WTF overhaul + sign in page

OpenLearn/templates/public/register.html

@@ -50,25 +50,33 @@
 {% block main %}
     <div class="siimple-content--fluid siimple--bg-primary siimple--py-5" id="form-section">
         <div id="form-container" class="siimple--display-inline-flex">
-            <div class="siimple-form siimple--bg-light siimple--py-5 siimple--px-5 siimple--rounded" id="room-code-form">
-                <div class="siimple-form-title">Sign In</div>
-                <div class="siimple-form-detail">Don't have an account? <a href="" class="siimple-link">Register Here</a></div>
+            <form method="post" action="{{ url_for("public.register") }}" class="siimple-form siimple--bg-light siimple--py-5 siimple--px-5 siimple--rounded"
+                  id="room-code-form">
+                {{ form.hidden_tag() }}
+                <div class="siimple-form-title">Register</div>
+                <div class="siimple-form-detail">Already have an account? <a href="{{ url_for("public.sign_in") }}"
+                                                                             class="siimple-link">Sign In Here</a></div>
                 <div class="siimple-form-field">
-                    <label for="username" class="siimple-form-field-label">Username</label>
-                    <input type="text" id="username" name="username" class="siimple-input siimple-input--fluid siimple--bg-primary siimple--color-white">
+                    {{ form.username.label(class_="siimple-form-field-label") }}
+                    {{ form.username(class_="siimple-input siimple-input--fluid siimple--bg-primary siimple--color-white", maxlength=25, minlength=3) }}
                 </div>
                 <div class="siimple-form-field">
-                    <label for="password" class="siimple-form-field-label">Password</label>
-                    <input type="password" id="password" name="password" class="siimple-input siimple-input--fluid siimple--bg-primary siimple--color-white">
+                    {{ form.password.label(class_="siimple-form-field-label") }}
+                    {{ form.password(class_="siimple-input siimple-input--fluid siimple--bg-primary siimple--color-white", minlength=6) }}
                 </div>
                 <div class="siimple-form-field">
-                    <button id="submit-btn"
-                            class="siimple-btn siimple-btn--success siimple-btn--big siimple-btn--disabled siimple-btn--fluid"
-                            disabled>Sign In
-                    </button>
+                    {{ form.confirm_password.label(class_="siimple-form-field-label") }}
+                    {{ form.confirm_password(class_="siimple-input siimple-input--fluid siimple--bg-primary siimple--color-white") }}
                 </div>
-                <div id="room-code-status" class="siimple-alert siimple-alert--error siimple--display-none"></div>
-            </div>
+                <div class="siimple-form-field">
+                    <input type="submit"
+                           class="siimple-btn siimple-btn--success siimple-btn--big siimple-btn--fluid"
+                           value="Register"/>
+                </div>
+                <div id="room-code-status" class="siimple-alert siimple-alert--error{% if form.errors|length == 0 %} siimple--display-none{% endif %}">
+                    {{ form.errors.values()|first|first }}
+                </div>
+            </form>
         </div>
     </div>
 {% endblock %}

OpenLearn/templates/public/sign-in.html

@@ -1 +1,78 @@
-{% extends "./layout.html" %}
+{% extends "./layout.html" %}
+
+{% set footer_color = "blue" %}
+
+{% block styles %}
+    {{ super() }}
+    <style>
+        html, body {
+            height: 100%;
+            width: 100%;
+            margin: 0;
+            padding: 0;
+        }
+
+        body {
+        {# I know. *sigh* #} /**/
+            display: flex;
+            flex-direction: column;
+        }
+
+        main {
+            flex-grow: 2;
+            display: flex;
+            flex-direction: column;
+        }
+
+        #form-section {
+            flex-grow: 2;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+
+        #room-code-input, #form-container {
+            max-width: 450px;
+            width: 100%;
+            margin: 0;
+        }
+
+        .siimple-footer-link {
+            color: white;
+        }
+
+        .siimple-footer-link:hover {
+            color: rgba(255, 255, 255, 0.4) !important;
+        }
+    </style>
+{% endblock %}
+
+{% block main %}
+    <div class="siimple-content--fluid siimple--bg-primary siimple--py-5" id="form-section">
+        <div id="form-container" class="siimple--display-inline-flex">
+            <div class="siimple-form siimple--bg-light siimple--py-5 siimple--px-5 siimple--rounded"
+                 id="room-code-form">
+                <div class="siimple-form-title">Sign In</div>
+                <div class="siimple-form-detail">Don't have an account? <a href="{{ url_for("public.register") }}"
+                                                                           class="siimple-link">Register Here</a></div>
+                <div class="siimple-form-field">
+                    {{ form.username.label(class_="siimple-form-field-label") }}
+                    {{ form.username(class_="siimple-input siimple-input--fluid siimple--bg-primary siimple--color-white", maxlength=25) }}
+                </div>
+                <div class="siimple-form-field">
+                    {{ form.password.label(class_="siimple-form-field-label") }}
+                    {{ form.password(class_="siimple-input siimple-input--fluid siimple--bg-primary siimple--color-white") }}
+                </div>
+                <div class="siimple-form-field">
+                    <input type="submit"
+                           class="siimple-btn siimple-btn--success siimple-btn--big siimple-btn--fluid"
+                           value="Sign In"/>
+                </div>
+                <div id="room-code-status"
+                     class="siimple-alert siimple-alert--error{% if form.errors|length == 0 %} siimple--display-none{% endif %}">
+                    {{ form.errors.values()|first|first }}
+                </div>
+            </div>
+        </div>
+    </div>
+{% endblock %}

OpenLearn/templates/student/join.html

@@ -156,20 +156,21 @@
         <div id="form-container">
             <div class="siimple-form" id="room-code-form">
                 <div class="siimple-form-field">
-                    <div class="siimple-form-field-label siimple--color-light">Room Code</div>
-                    <input type="text" id="room-code-input" name="room-code" class="siimple-input"
-                           placeholder="0000-0000" minlength="9"
-                           maxlength="9" required pattern="([A-Z0-9]){4}-([A-Z0-9]){4}">
+                    {{ form.room_code.label(class_="siimple-form-field-label siimple--color-light") }}
+                    {{ form.room_code(id="room-code-input", class_="siimple-input", placeholder="0000-0000", minlength="9",
+                            maxlength="9", pattern="([A-Z0-9]){4}-([A-Z0-9]){4}", autocomplete="off") }}
                 </div>
                 <div class="siimple-form-field">
                     <button id="submit-btn"
                             class="siimple-btn siimple-btn--success siimple-btn--big siimple-btn--disabled siimple-btn--fluid"
                             disabled>Join
                     </button>
                 </div>
-                <div id="room-code-status" class="siimple-alert siimple-alert--error siimple--display-none"></div>
+                <div id="room-code-status"
+                     class="siimple-alert siimple-alert--error{% if form.errors|length == 0 %} siimple--display-none{% endif %}">
+                    {{ form.errors.values()|first|first }}
+                </div>
             </div>
         </div>
     </div>
-
 {% endblock %}

OpenLearn/views/public/controller.py

@@ -3,12 +3,10 @@
 from flask import (
     Blueprint,
     current_app,
-    flash,
-    redirect,
     render_template,
-    request,
-    url_for,
-    abort)
+    abort, redirect)
+
+from .forms import RegisterForm, LoginForm
 
 blueprint = Blueprint("public", __name__, static_folder="../../static", template_folder="../../templates/public")
 
@@ -28,4 +26,15 @@ def index():
 
 @blueprint.route("/sign-in")
 def sign_in():
-    return render_template("sign-in.html")
+    form = LoginForm()
+    if form.validate_on_submit():
+        return redirect("/success")
+    return render_template("sign-in.html", form=form)
+
+
+@blueprint.route("/register", methods=["GET", "POST"])
+def register():
+    form = RegisterForm()
+    if form.validate_on_submit():
+        return redirect("/success")
+    return render_template("register.html", form=form)

OpenLearn/views/public/forms.py

@@ -0,0 +1,28 @@
+# -*- coding: utf-8 -*-
+from flask_wtf import FlaskForm
+from wtforms import StringField, PasswordField
+from wtforms.validators import Length, EqualTo, InputRequired
+
+
+class LoginForm(FlaskForm):
+    username = StringField("Username", validators=[
+        InputRequired(message="You must enter your username"),
+        Length(min=3, max=25, message="Username does not exist")
+    ])
+    password = PasswordField("Password", validators=[
+        InputRequired(message="You must enter your username")
+    ])
+
+
+class RegisterForm(FlaskForm):
+    username = StringField("Username", validators=[
+        InputRequired(),
+        Length(min=3, max=25, message="Username must be between 3-25 characters")
+    ])
+    password = PasswordField("Password", validators=[
+        InputRequired(message="You must provide a password"),
+        Length(min=6, message="Password must be at least 6 characters")
+    ])
+    confirm_password = PasswordField("Repeat Password", validators=[
+        EqualTo('password', message="Passwords must match")
+    ])

OpenLearn/views/student/controller.py

@@ -2,25 +2,30 @@
 """The controller for all views related to students"""
 from flask import (
     Blueprint,
-    current_app,
-    flash,
-    redirect,
     render_template,
     request,
-    url_for,
     jsonify)
 
+from .forms import JoinRoomForm
+
 blueprint = Blueprint("student", __name__, static_folder="../../static", template_folder="../../templates/student")
 
 
 @blueprint.route("/join", methods=["GET", "POST"])
 def join_room():
+    form = JoinRoomForm()
     if request.method == "GET":
-        return render_template("join.html")
+        return render_template("join.html", form=form)
     else:
-        code = request.form["room-code"]
+        exists = False
+        message = ""
+        if form.validate():
+            exists = True
+        else:
+            message = list(form.errors)[0][0]
 
         return jsonify({
-            "roomCode": code,
-            "exists": False
+            "roomCode": form.room_code.data,
+            "exists": exists,
+            "message": message
         }), 200

OpenLearn/views/student/forms.py

@@ -0,0 +1,30 @@
+# -*- coding: utf-8 -*-
+from typing import Optional
+
+from flask_wtf import FlaskForm
+from wtforms import StringField
+from wtforms.validators import InputRequired, Length, Regexp
+
+from OpenLearn.database import Room
+
+
+class JoinRoomForm(FlaskForm):
+    room_code = StringField("Room Code", validators=[
+        InputRequired(message="Malformed Room Code"),
+        Length(min=9, max=9, message="Malformed Room Code"),
+        Regexp("([A-Z0-9]){4}-([A-Z0-9]){4}", message="Malformed Room Code")
+    ])
+
+    def __init__(self, *args, **kwargs):
+        """Create instance."""
+        super().__init__(*args, **kwargs)
+        self.room: Optional[Room] = None
+
+    def validate(self):
+        initial_validation = super().validate()
+        if not initial_validation:
+            return False
+
+        # TODO: Room Logic
+        self.room_code.errors.append("Invalid Code")
+        return False