Add template control flow to display login & sign or username

- Also commit the relevant TTF font for the myspace logo in the previous commit

app.py

@@ -17,34 +17,48 @@ def index():  # put application's code here
 def about():
     return render_template('pages/about.html', user=user)
 
+
 @app.route('/users')
 def browse():
     return render_template('pages/browse.html', user=user)
 
+
 @app.route('/feed')
 def feed():
     return render_template('pages/feed.html', user=user)
 
+
 @app.route('/messages')
 def messages():
     return render_template('pages/messages.html', user=user)
 
+
 @app.route('/search')
 def search():
     return render_template('pages/search.html', user=user)
 
+
 @app.route('/user/<username>')
 def user(username: str):
     return render_template('pages/about.html', user=user)
 
+
 @app.route('/blogs')
 def blogs():
     return render_template('pages/blogs.html', user=user)
 
+
 @app.route('/groups')
 def groups():
     return render_template('pages/groups.html', user=user)
 
+@app.route('/login')
+def login():
+    return render_template('pages/login.html', user=user)
+
+@app.route('/signup')
+def signup():
+    return render_template('pages/signup.html', user=user)
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', debug=True)

templates/layouts/header.html

@@ -2,7 +2,11 @@
     <div class="header-primary">
         <span id="logo">runnerspace</span>
         <div class="header-login">
+            {% if logged_in %}
             Logged in as <a href="/user/{{ user.username }}" class="username">{{ user.username }}</a>
+            {% else %}
+                <a href="/login">Login</a> or <a href="/signup">Sign-up</a>!
+            {% endif %}
         </div>
     </div>
     <nav class="header-secondary">

templates/pages/login.html

@@ -0,0 +1,37 @@
+{% extends 'layouts/index.html' %}
+{% block content %}
+    <div class="content-inner">
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                <div class="notification is-danger">
+                    {{ messages[0] }}
+                </div>
+            {% endif %}
+        {% endwith %}
+        <form method="POST" action="/login" class="login-form">
+            <div class="field">
+                <div class="control">
+                    Username
+                    <input class="input is-large" type="text" name="username" placeholder="Username" autofocus="true">
+                </div>
+            </div>
+
+            <div class="field">
+                <div class="control">
+                    Password
+                    <input class="input is-large" type="password" name="password" placeholder="Password">
+                </div>
+            </div>
+            <div class="field">
+                <label class="checkbox">
+                    <input type="checkbox">
+                    Remember me
+                </label>
+            </div>
+            <button class="button">Login</button>
+        </form>
+        <p class="form-subtext">
+            Don't have a login? <a href="/signup">Sign-up</a> instead!
+        </p>
+    </div>
+{% endblock content %}

templates/pages/signup.html

@@ -0,0 +1,40 @@
+{% extends 'layouts/index.html' %}
+
+{% block content %}
+    <div class="content-inner">
+        {% with messages = get_flashed_messages() %}
+            {% if messages %}
+                <div class="notification is-danger">
+                    {{ messages[0] }}. Go to <a href="{{ url_for('auth.login') }}">login page</a>.
+                </div>
+            {% endif %}
+        {% endwith %}
+        <form method="POST" action="/signup" class="login-form">
+            <div class="field">
+                <div class="control">
+                    Email
+                    <input class="input is-large" type="email" name="email" placeholder="Email" autofocus="">
+                </div>
+            </div>
+
+            <div class="field">
+                <div class="control">
+                    Name
+                    <input class="input is-large" type="text" name="name" placeholder="Name" autofocus="">
+                </div>
+            </div>
+
+            <div class="field">
+                <div class="control">
+                    Password
+                    <input class="input is-large" type="password" name="password" placeholder="Password">
+                </div>
+            </div>
+            <button>Sign Up</button>
+        </form>
+
+        <p class="form-subtext">
+            Already have a login? <a href="/login">Login</a> instead!
+        </p>
+    </div>
+{% endblock content %}