Implement login form in template and add support for flash messages via a toast.

app/templates/auth/login.html.j2

@@ -21,19 +21,20 @@
   <div class="card medium">
     <div class="card-content">
       <span class="card-title">Log In</span>
-      <form>
+      <form method="POST">
+        {{ form.hidden_tag() }}
         <div class="input-field">
-          <input id="username" type="text" class="validate">
-          <label for="username">Username</label>
+          {{ form.email(class='validate', type='email') }}
+          {{ form.email.label }}
         </div>
         <div class="input-field">
-          <input id="password" type="password" class="validate">
-          <label for="password">Password</label>
+          {{ form.password(class='validate') }}
+          {{ form.password.label }}
         </div>
         <a href="#!">Forgot Password?</a>
         <br><br>
         <div class="card-action">
-          <input class="btn right" type="submit" value="Log In" data-_extension-text-contrast="">
+          {{ form.submit(class='btn right') }}
         </div>
       </form>
     </div>

app/templates/base.html.j2

@@ -93,7 +93,6 @@
       </div>
     </footer>
 
-    <!--JavaScript at end of body for optimized loading-->
     <script type="text/javascript" src="{{ url_for('static', filename='js/materialize.min.js') }}"></script>
     <script>
         M.AutoInit();
@@ -105,6 +104,9 @@
           document.getElementById("nav-settings"),
           {"alignment": "right", "constrainWidth": false, "coverTrigger": false}
         );
+        {% for message in get_flashed_messages() %}
+        M.toast({html: '{{ message }}'})
+        {% endfor %}
     </script>
   </body>
 </html>