Add registration form, view, template

app/auth/forms.py

@@ -14,7 +14,25 @@ class LoginForm(FlaskForm):
 
 
 class RegistrationForm(FlaskForm):
-    email = StringField('Email', validators=[DataRequired(), Length(1, 64), Email()])
+    email = StringField('Email', validators=[DataRequired(), Length(1, 64),
+                                             Email()])
+    username = StringField('Username', validators=[
+        DataRequired(), Length(1, 64),
+        Regexp('^[A-Za-z][A-Za-z0-9_.]*$', 0,
+               'Usernames must have only letters, numbers, dots or '
+               'underscores')])
+    password = PasswordField('Password', validators=[
+        DataRequired(), EqualTo('password2', message='Passwords must match.')])
+    password2 = PasswordField('Confirm password', validators=[DataRequired()])
+    submit = SubmitField('Register')
+
+    def validate_email(self, field):
+        if User.query.filter_by(email=field.data.lower()).first():
+            raise ValidationError('Email already registered.')
+
+    def validate_username(self, field):
+        if User.query.filter_by(username=field.data).first():
+            raise ValidationError('Username already in use.')
 
 
 class PasswordResetRequestForm(FlaskForm):

app/templates/auth/login.html.j2

@@ -10,9 +10,9 @@
     <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 class="card-action">
+        <a class="btn" href="{{url_for('auth.register')}}">Register</a>
+      </div>
     </div>
   </div>
 </div>

app/templates/auth/register.html.j2

@@ -2,33 +2,47 @@
 
 {% block page_content %}
 <div class="col s12">
-  <div class="row">
-    <div class="card medium">
-      <div class="card-content">
-        <span class="card-title">Register</span>
-        <form>
-          <div class="input-field col s6">
-            <input id="first-name" type="text" class="validate">
-            <label for="first-name">First Name</label>
-          </div>
-          <div class="input-field col s6">
-            <input id="last-name" type="text" class="validate">
-            <label for="last-name">Last Name</label>
-          </div>
-          <div class="row">
-            <div class="input-field col s12">
-              <input id="password" type="password" class="validate">
-              <label for="password">Password</label>
-            </div>
-          </div>
-          <div class="row">
-            <div class="input-field col s12">
-              <input id="email" type="email" class="validate">
-              <label for="email">Email</label>
-            </div>
-          </div>
-        </form>
-      </div>
+  <div class="card large">
+    <div class="card-content">
+      <span class="card-title">Register</span>
+      <form method="POST">
+        {{ form.hidden_tag() }}
+        <div class="input-field">
+          <i class="material-icons prefix">account_circle</i>
+          {{ form.username(class='validate') }}
+          {{ form.username.label }}
+          {% for error in form.username.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="input-field">
+          <i class="material-icons prefix">vpn_key</i>
+          {{ form.password2(class='validate') }}
+          {{ form.password2.label }}
+          {% for error in form.password2.errors %}
+            <span class="helper-text" style="color:red;">{{ error }}</span>
+          {% endfor %}
+        </div>
+        <div class="input-field ">
+          <i class="material-icons prefix">email</i>
+          {{ 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>
+        <div class="card-action">
+          {{ form.submit(class='btn right') }}
+        </div>
+      </form>
     </div>
   </div>
 </div>

app/templates/base.html.j2

@@ -25,6 +25,7 @@
         <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">chevron_left</i>Log out</a></li>
         {% else %}
         <li><a href="{{ url_for('auth.login') }}"><i class="material-icons">chevron_right</i>Log in</a></li>
+        <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">chevron_right</i>Register</a></li>
         {% endif %}
       </ul>
       <div id="nav-settings-dropdown" class="dropdown-content grey-text text-darken-4">