register.html

{% extends "base.html" %}
{% block content %}
    <!-- codes below from materializecss.com and CI tutorials -->
    <h3 class="center-align blue-grey-text text-lighten-5">Register</h3>

    <div class="row container">
        <form class="col s12" method="POST" action="{{ url_for('register') }}">
            <!-- username input -->
            <div class="card-panel blue-grey lighten-5">
                <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-user-plus prefix grey-text text-darken-4"></i>
                        <input id="username" name="username" type="text" minlength="5"
                            maxlength="15" pattern="^[a-zA-Z0-9]{5-15}" class="validate" required>
                        <label for="username">Username</label>
                    </div>
                </div>
                <!-- password input -->
                <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-user-lock prefix grey-text text-darken-4"></i>
                        <input id="password" name="password" type="password" minlength="5"
                            maxlength="15" pattern="^[a-zA-Z0-9]{5-15}" class="validate" required>
                        <label for="password">Password</label>
                    </div>
                </div>
                <!-- password confirmation input -->
                <div class="row">
                    <div class="input-field col s12">
                        <i class="fas fa-user-lock prefix grey-text text-darken-4"></i>
                        <input id="password_confirmation" name="password_confirmation" type="password" minlength="5"
                            maxlength="15" pattern="^[a-zA-Z0-9]{5-15}" class="validate" required>
                        <label for="password_confirmation">Repeat Password</label>
                    </div>
                </div>
                <!-- checkbox  -->
                <div class="row">
                    <div class="col s12">
                        <label for="terms">
                            <input id="terms" type="checkbox" required>
                            <span>I have read the rules of the content posting on the site.</span>
                        </label>
                        <!-- Modal Trigger -->
                        <a class="modal-trigger" href="#modal1">here!</a>
                        <!-- Modal Structure -->
                        <div id="modal1" class="modal">
                            <div class="modal-content">
                                <h4>Rules</h4>
                                <p>We want to make sure that everybody is welcome. Please, post with the respect to all of the visitors.</p>
                                <ol>
                                    <li>Use the appropriate language</li>
                                    <li>No racial, gender, nationality related or other insulting comments.</li>
                                    <li>Post with the respect to all of the visitors.</li>
                                    <li>...Other rule...</li>
                                    <li>...Other rule...</li>
                                </ol>
                            </div>
                            <div class="modal-footer">
                                <a href="#agree-terms" class="modal-close btn-flat blue-grey-text text-lighten-5 grey darken-2">Close</a>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- register -->
                <div class="row">
                    <div class="col s12 center-align">
                        <button type="submit" class="col s12 waves-effect waves-light btn-large blue-grey-text text-lighten-5 grey darken-2 z-depth-3">
                            Register <i class="fas fa-sign-in-alt"></i>
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>

    <div class="row s12 container">
        <div class="col s12">
            <p class="center-align blue-grey-text text-lighten-5">
                <i class="fas fa-hand-peace"></i> Already registered? 
                <a href="{{ url_for('login') }}" class="red-text text-darken-3"><strong>Log In</strong></a>
            </p>
        </div>
    </div>

{% endblock %}