Redesign start page

app/auth/forms.py

@@ -6,7 +6,7 @@ from wtforms.validators import DataRequired, Email, EqualTo, Length, Regexp
 
 
 class LoginForm(FlaskForm):
-    login = StringField('Login', validators=[DataRequired(), Length(1, 64)])
+    user = StringField('Email address or username', validators=[DataRequired(), Length(1, 64)])
     password = PasswordField('Password', validators=[DataRequired()])
     remember_me = BooleanField('Keep me logged in')
     submit = SubmitField('Log In')

app/auth/views.py

@@ -3,32 +3,13 @@ from app.email import send_email
 from app.models import User
 from flask import (current_app, flash, redirect, render_template, request,
                    url_for)
-from flask_login import current_user, login_required, login_user, logout_user
+from flask_login import current_user, login_required, logout_user
 from . import auth
-from .forms import (LoginForm, PasswordResetForm, PasswordResetRequestForm,
+from .forms import (PasswordResetForm, PasswordResetRequestForm,
                     RegistrationForm)
 import os
 
 
-@auth.route('/login', methods=['GET', 'POST'])
-def login():
-    if current_user.is_authenticated:
-        return redirect(url_for('main.index'))
-    form = LoginForm()
-    if form.validate_on_submit():
-        user = User.query.filter_by(email=form.login.data).first()
-        if user is None:
-            user = User.query.filter_by(username=form.login.data).first()
-        if user is not None and user.verify_password(form.password.data):
-            login_user(user, form.remember_me.data)
-            next = request.args.get('next')
-            if next is None or not next.startswith('/'):
-                next = url_for('main.dashboard')
-            return redirect(next)
-        flash('Invalid username or password.')
-    return render_template('auth/login.html.j2', form=form, title='Log in')
-
-
 @auth.route('/logout')
 @login_required
 def logout():

app/main/views.py

@@ -1,11 +1,26 @@
-from flask import render_template
-from flask_login import login_required
+from app.auth.forms import LoginForm
+from app.models import User
+from flask import flash, redirect, render_template, request, url_for
+from flask_login import login_required, login_user
 from . import main
 
 
-@main.route('/')
+@main.route('/', methods=['GET', 'POST'])
 def index():
-    return render_template('main/index.html.j2', title='nopaque')
+    login_form = LoginForm(prefix='login-form')
+    if login_form.validate_on_submit():
+        user = User.query.filter_by(email=login_form.user.data).first()
+        if user is None:
+            user = User.query.filter_by(username=login_form.user.data).first()
+        if user is not None and user.verify_password(login_form.password.data):
+            login_user(user, login_form.remember_me.data)
+            next = request.args.get('next')
+            if next is None or not next.startswith('/'):
+                next = url_for('main.dashboard')
+            return redirect(next)
+        flash('Invalid username or password.')
+    return render_template('main/index.html.j2', login_form=login_form,
+                           title='nopaque')
 
 
 @main.route('/dashboard')

app/templates/main/index.html.j2

@@ -4,18 +4,57 @@
 {% set roadmap = False %}
 
 {% block page_content %}
+{% if current_user.is_anonymous %}
 <div class="col s12 m4">
-  <h3>Lorem ipsum</h3>
+  <h3>No account?</h3>
   <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,</p>
+  <a class="btn" href="{{ url_for('auth.register') }}"><i class="material-icons left">person_add</i>Register</a>
 </div>
 
 <div class="col s12 m8">
   <div class="card">
+    <form method="POST">
       <div class="card-content">
-      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
+        <span class="card-title">Log in</span>
+        {{ login_form.hidden_tag() }}
+        <div class="input-field">
+          <i class="material-icons prefix">person</i>
+          {{ login_form.user(class='validate') }}
+          {{ login_form.user.label }}
+          {% for error in login_form.user.errors %}
+            <span class="helper-text red-text">{{ error }}</span>
+          {% endfor %}
         </div>
+        <div class="input-field">
+          <i class="material-icons prefix">vpn_key</i>
+          {{ login_form.password(class='validate') }}
+          {{ login_form.password.label }}
+          {% for error in login_form.password.errors %}
+            <span class="helper-text red-text">{{ error }}</span>
+          {% endfor %}
+        </div>
+        <div class="row" style="margin-bottom: 0;">
+          <div class="col s6 left-align">
+            <a href="{{ url_for('auth.password_reset_request') }}">Forgot your password?</a>
+          </div>
+          <div class="col s6 right-align">
+            <div class="switch">
+              <label>
+                Remember me
+                {{ login_form.remember_me() }}
+                <span class="lever"></span>
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="card-action right-align">
+        <button class="btn waves-effect waves-light" id="login-form-submit" name="login-form-submit" type="submit">Log in<i class="material-icons right">send</i></button>
+      </div>
+    </form>
   </div>
 </div>
+{% endif %}
 
 <div class="col s12">
   <p>&nbsp;</p>

app/templates/nopaque.html.j2

@@ -51,7 +51,7 @@
         <li><a href="{{ url_for('profile.index') }}"><i class="material-icons">settings</i>Settings</a></li>
         <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
         {% else %}
-        <li><a href="{{ url_for('auth.login') }}"><i class="material-icons">person</i>Log in</a></li>
+        <li><a href="{{ url_for('main.index') }}"><i class="material-icons">person</i>Log in</a></li>
         <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</i>Register</a></li>
         {% endif %}
       </ul>
@@ -77,7 +77,7 @@
         <li><a href="{{ url_for('profile.index') }}"><i class="material-icons">settings</i>Settings</a></li>
         <li><a href="{{ url_for('auth.logout') }}"><i class="material-icons">power_settings_new</i>Log out</a></li>
         {% else %}
-        <li><a href="{{ url_for('auth.login') }}"><i class="material-icons">person</i>Log in</a></li>
+        <li><a href="{{ url_for('main.index') }}"><i class="material-icons">person</i>Log in</a></li>
         <li><a href="{{ url_for('auth.register') }}"><i class="material-icons">person_add</i>Register</a></li>
         {% endif %}
         {% if current_user.is_administrator() %}
@@ -172,5 +172,23 @@
         {% endfor %}
       });
     </script>
+    {% if not current_user.is_authenticated %}
+    <script>
+      document.getElementById("slide-out").classList.add("hide");
+    </script>
+    <style>
+      header, main, footer {
+        padding-left: 0;
+      }
+
+      .modal:not(.bottom-sheet) {
+        left: 0;
+      }
+
+      .navbar-fixed > nav {
+        width: 100%;
+      }
+    </style>
+    {% endif %}
   </body>
 </html>