Basic login form.

bikeshop_project/bikeshop/urls.py

@@ -15,11 +15,13 @@ Including another URLconf
 """
 from django.conf.urls import include, url
 from django.contrib import admin
+from django.contrib.auth.views import login
 from core import urls as core_urls
 from registration import urls as member_urls
 
 urlpatterns = [
     url(r'^', include(core_urls)),
+    url(r'^login/', login, {'template_name': 'login.html'}),
     url(r'^member/', include(member_urls)),
     url(r'^admin/', admin.site.urls),
 ]

bikeshop_project/registration/templates/login.html

@@ -1,31 +1,68 @@
 {% extends 'base.html' %}
 
+{% load staticfiles compress %}
+
+{% block styles %}
+    {{ block.super }}
+    {% compress css %}
+    <link href="{% static 'vendor/material-design-lite/src/icon-toggle/_icon-toggle.scss' %}" rel="stylesheet" type="text/x-scss">
+    {% endcompress %}
+{% endblock %}
+
+{% block scripts %}
+    {{ block.super }}
+    <script>
+    var passwordToggle = document.getElementById('icon-toggle-1');
+    passwordToggle.addEventListener('change', function () {
+        toggle();
+    });
+
+    var passwordField = document.getElementById('password');
+
+    var toggle = function () {
+        if (passwordToggle.checked) {
+            passwordField.type = 'password';
+            passwordToggle.nextElementSibling.textContent = 'visibility_off'
+        }
+        else {
+            passwordField.type = 'text';
+            passwordToggle.nextElementSibling.textContent = 'visibility'
+        }
+    }
+    </script>
+{% endblock %}
+
+
+
 {% block content %}
 <div class="demo-graphs mdl-shadow--2dp mdl-color--white mdl-cell mdl-cell--8-col mdl-shadow--2dp">
     <h2 class="mdl-card__title-text">Welcome</h2>
-    <form action="#">
+    <form method="post">
+        {% if form.non_field_errors %}
+            <div>
+                <span class="error">{{ form.non_field_errors }}</span>
+            </div>
+        {% endif %}
+        {% csrf_token %}
       <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-        <input class="mdl-textfield__input" type="text" id="sample3">
+        <input class="mdl-textfield__input" type="text" id="username" name="username">
-        <label class="mdl-textfield__label" for="sample3">Text...</label>
+        <label class="mdl-textfield__label" for="username">Email address</label>
       </div>
+    <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
+        <input class="mdl-textfield__input" type="password" id="password" name="password">
+        <label class="mdl-textfield__label" for="password">Password</label>
+    </div>
+    <label class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect" for="icon-toggle-1">
+        <input type="checkbox" id="icon-toggle-1" class="mdl-icon-toggle__input" checked>
+        <i class="mdl-icon-toggle__label material-icons">visibility_off</i>
+    </label>
+    <div>
+        <button type="submit" class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
+            Login
+        </button>
+        <a href="{% url 'signup' %}">Become a Member</a>
+    </div>
     </form>
-    <!-- Numeric Textfield with Floating Label -->
+
-    <form action="#">
-      <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
-        <input class="mdl-textfield__input" type="text" pattern="-?[0-9]*(\.[0-9]+)?" id="sample4">
-        <label class="mdl-textfield__label" for="sample4">Number...</label>
-        <span class="mdl-textfield__error">Input is not a number!</span>
-      </div>
-    </form>
-  <div class="mdl-card__actions mdl-card--border">
-    <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect">
-      Get Started
-    </a>
-  </div>
-  <div class="mdl-card__menu">
-    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
-      <i class="material-icons">share</i>
-    </button>
-  </div>
 </div>
 {% endblock %}