Implement cards the correct way. card-action outside of card-content

app/templates/auth/account.html.j2

@@ -2,10 +2,10 @@
 
 {% block page_content %}
 <div class="col s12">
-  <div class="card large">
-    <div class="card-content">
-      <span class="card-title">Change account information</span>
-      <form method="POST">
+  <h2>Change account information</h2>
+  <div class="card">
+    <form method="POST">
+      <div class="card-content">
         {{ form.hidden_tag() }}
         <div class="input-field ">
           <i class="material-icons prefix">email</i>
@@ -40,11 +40,11 @@
             <span class="helper-text" style="color:red;">{{ error }}</span>
           {% endfor %}
         </div>
-        <div class="card-action">
-          {{ form.submit(class='btn right') }}
-        </div>
-      </form>
-    </div>
+      </div>
+      <div class="card-action right-align">
+        {{ form.submit(class='btn') }}
+      </div>
+    </form>
   </div>
 </div>
 {% endblock %}

app/templates/auth/login.html.j2

@@ -9,29 +9,34 @@
     </div>
     <div class="card-content">
       <p>Sign in into an exisiting account or register a new one!</p>
-      <br>
-      <div class="card-action">
-        <a class="btn" href="{{url_for('auth.register')}}">Register</a>
-      </div>
+    </div>
+    <div class="card-action">
+      <a class="btn" href="{{url_for('auth.register')}}">Register</a>
     </div>
   </div>
 </div>
 
 <div class="col s12 m6">
   <div class="card medium">
-    <div class="card-content">
-      <span class="card-title">Log In</span>
-      <form method="POST">
+    <form method="POST">
+      <div class="card-content">
+        <span class="card-title">Log In</span>
         {{ form.hidden_tag() }}
         <div class="input-field">
           <i class="material-icons prefix">person</i>
           {{ form.login(class='validate') }}
           {{ form.login.label }}
+          {% for error in form.login.errors %}
+            <span class="helper-text" style="color:red;">{{ error }}</span>
+          {% endfor %}
         </div>
         <div class="input-field">
           <i class="material-icons prefix">vpn_key</i>
           {{ form.password(class='validate') }}
           {{ form.password.label }}
+          {% for error in form.password.errors %}
+            <span class="helper-text" style="color:red;">{{ error }}</span>
+          {% endfor %}
         </div>
         <div class="switch left">
           <label>
@@ -41,11 +46,11 @@
           </label>
         </div>
         <a href="{{ url_for('auth.password_reset_request') }}" class="right">Forgot Password?</a>
-        <div class="card-action">
-          {{ form.submit(class='btn right') }}
-        </div>
-      </form>
-    </div>
+      </div>
+      <div class="card-action">
+        {{ form.submit(class='btn right') }}
+      </div>
+    </form>
   </div>
 </div>
 {% endblock %}

app/templates/auth/register.html.j2

@@ -2,10 +2,10 @@
 
 {% block page_content %}
 <div class="col s12">
-  <div class="card large">
-    <div class="card-content">
-      <span class="card-title">Register</span>
-      <form method="POST">
+  <div class="card">
+    <form method="POST">
+      <div class="card-content">
+        <span class="card-title">Register</span>
         {{ form.hidden_tag() }}
         <div class="input-field">
           <i class="material-icons prefix">account_circle</i>
@@ -39,11 +39,11 @@
             <span class="helper-text" style="color:red;">{{ error }}</span>
           {% endfor %}
         </div>
-        <div class="card-action">
-          {{ form.submit(class='btn right') }}
-        </div>
-      </form>
-    </div>
+      </div>
+      <div class="card-action right-align">
+        {{ form.submit(class='btn') }}
+      </div>
+    </form>
   </div>
 </div>
 {% endblock %}

app/templates/auth/reset_password.html.j2

@@ -2,18 +2,18 @@
 
 {% block page_content %}
 <div class="col s12 m8 offset-m2">
-  <div class="card small">
-    <div class="card-content">
-      <span class="card-title">Reset Your Password</span>
-      <form method="POST">
+  <div class="card">
+    <form method="POST">
+      <div class="card-content">
+        <span class="card-title">Reset Your Password</span>
         {{ form.hidden_tag() }}
-        {% if form.email is defined %}
         <div class="input-field">
           {{ form.email(class='validate', type='email') }}
           {{ form.email.label }}
+          {% for error in form.email.errors %}
+            <span class="helper-text" style="color:red;">{{ error }}</span>
+          {% endfor %}
         </div>
-        {% endif %}
-        {% if form.password is defined %}
         <div class="input-field">
           {{ form.password(class='validate', type='password') }}
           {{ form.password.label }}
@@ -21,18 +21,18 @@
             <span class="helper-text" style="color:red;">{{ error }}</span>
           {% endfor %}
         </div>
-        {% endif %}
-        {% if form.password2 is defined %}
         <div class="input-field">
           {{ form.password2(class='validate', type='password') }}
           {{ form.password2.label }}
+          {% for error in form.password2.errors %}
+            <span class="helper-text" style="color:red;">{{ error }}</span>
+          {% endfor %}
         </div>
-        {% endif %}
-        <div class="card-action">
-          {{ form.submit(class='btn right') }}
-        </div>
-      </form>
-    </div>
+      </div>
+      <div class="card-action">
+        {{ form.submit(class='btn right') }}
+      </div>
+    </form>
   </div>
 </div>
 {% endblock %}