Add login page

PDMI/PDMI/urls.py

@@ -19,6 +19,7 @@ import store, front, doc
 
 urlpatterns = [
     path('admin/', admin.site.urls),
+    path('accounts/', include('django.contrib.auth.urls')),
     path('', include('front.urls'), name='front'),
     path('store/', include('store.urls'), name='store'),
     path('doc/', include('doc.urls'), name='doc'),

PDMI/store/templates/store/store-navbar.html

@@ -1,40 +1,43 @@
 {% extends "base/navbar.html" %}
-{% block 'navbar-right' %}
+{% block navbar-right %}
-{% if user.is_authenticated %}
+    {% if user.is_authenticated %}
-<ul class="nav navbar-nav ml-auto">
+        <ul class="nav navbar-nav ml-auto">
-    <li class="nav-item dropdown">
+            <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button"
-            <span class="fas fa-user"></span> {{ request.user.username }}
+                   data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-        </a>
+                    <span class="fas fa-user"></span> {{ request.user.username }}
-        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
+                </a>
-            <a class="dropdown-item" href="#">Profile</a>
+                <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
-            <a class="dropdown-item" href="{% url 'upload' %}">Upload module</a>
+                    <a class="dropdown-item" href="#">Profile</a>
-            <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
+                    <a class="dropdown-item" href="{% url 'upload' %}">Upload module</a>
-        </div>
+                    <a class="dropdown-item" href="{% url 'logout' %}">Logout</a>
-    </li>
+                </div>
-</ul>
+            </li>
-{% else %}
+        </ul>
-<ul class="nav navbar-nav ml-auto">
+    {% else %}
-    <li class="nav-item">
+        <ul class="nav navbar-nav ml-auto">
-        <a class="nav-link" data-toggle="modal" id="registerLink" href="#"><span class="fa fa-user"></span> Register</a>
+            <li class="nav-item">
-        <script type="text/javascript">
+                <a class="nav-link" data-toggle="modal" id="registerLink" href="#"><span class="fa fa-user"></span>
-            $(document).ready(function() {
+                    Register</a>
-                $("#registerLink").modalForm({
+                <script type="text/javascript">
-                    formURL: "{% url 'signup' %}"
+                    $(document).ready(function () {
-                });
+                        $("#registerLink").modalForm({
-            });
+                            formURL: "{% url 'signup_modal' %}"
-        </script>
+                        });
-    </li>
+                    });
-    <li class="nav-item">
+                </script>
-        <a class="nav-link" data-toggle="modal" id="loginLink" href="#"><span class="fa fa-sign-in-alt"></span> Login</a>
+            </li>
-        <script type="text/javascript">
+            <li class="nav-item">
-            $(document).ready(function() {
+                <a class="nav-link" data-toggle="modal" id="loginLink" href="#"><span class="fa fa-sign-in-alt"></span>
-                $("#loginLink").modalForm({
+                    Login</a>
-                    formURL: "{% url 'login' %}"
+                <script type="text/javascript">
-                });
+                    $(document).ready(function () {
-            });
+                        $("#loginLink").modalForm({
-        </script>
+                            formURL: "{% url 'login_modal' %}"
-    </li>
+                        });
-</ul>
+                    });
-{% endif %}
+                </script>
-{% endblock 'navbar-right' %}
+            </li>
+        </ul>
+    {% endif %}
+{% endblock %}

PDMI/store/urls.py

@@ -20,8 +20,8 @@ from . import views
 
 urlpatterns = [
     path('', TemplateView.as_view(template_name='store/index.html'), name='store_front_page'),
-    path('login/', views.CustomLoginView.as_view(), name='login'),
+    path('login/', views.CustomLoginView.as_view(), name='login_modal'),
-    path('signup/', views.SignUpView.as_view(), name='signup'),
+    path('signup/', views.SignUpView.as_view(), name='signup_modal'),
-    path('logout/', LogoutView.as_view(), name='logout'),
+    #path('logout/', LogoutView.as_view(), name='logout'),
     path('upload/', views.UploadView.as_view(), name='upload'),
 ]

PDMI/templates/base/base.html

@@ -12,21 +12,30 @@
     <link rel="shortcut icon" href="{% static 'favicon.ico' %}">
 
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
-        integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
+          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
-        crossorigin="anonymous">
+          crossorigin="anonymous">
     <link href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" rel="stylesheet">
-    <script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
+    <script src="https://code.jquery.com/jquery-3.5.0.min.js"
+            integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
     <script src="{% static 'js/jquery.bootstrap.modal.forms.min.js' %}"></script>
-    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
-    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
+            integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
+            crossorigin="anonymous"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
+            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
+            crossorigin="anonymous"></script>
     {% block extra_static %}{% endblock extra_static %}
 </head>
 <body class="pt-5">
-    {% block navbar %}
+{% block navbar %}
-        {% include "base/navbar.html" %}
+    {% include "base/navbar.html" %}
-    {% endblock navbar %}
+{% endblock navbar %}
+<main>
     {% block body %}
     {% endblock %}
+</main>
+{% block footer %}
     {% include "base/legal.html" %}
+{% endblock %}
 </body>
 </html>

PDMI/templates/base/navbar.html

@@ -1,6 +1,7 @@
 <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
     <a class="navbar-brand" href="{% url 'front_page' %}">P.D.M.I</a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault"
+            aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
     </button>
 
@@ -16,7 +17,7 @@
                 <a class="nav-link" href="#">Documentation</a>
             </li>
         </ul>
-        {% block 'navbar-right' %}
+        {% block navbar-right %}
-        {% endblock 'navbar-right' %}
+        {% endblock %}
     </div>
 </nav>

PDMI/templates/registration/login.html

@@ -0,0 +1,55 @@
+{% extends 'base/base.html' %}
+
+{% block extra_static %}
+    <style>
+    body {
+        margin: 50px;
+    }
+    </style>
+{% endblock %}
+
+{% block body %}
+    <div class="row justify-content-center align-items-center">
+        <div class="card col-md-4">
+            <div class="card-body">
+                <h4 class="card-title">Login</h4>
+                {% if form.errors %}
+                    <p>Your username and password didn't match. Please try again.</p>
+                {% endif %}
+
+                {% if next %}
+                    {% if user.is_authenticated %}
+                        <p>Your account doesn't have access to this page. To proceed,
+                            please login with an account that has access.</p>
+                    {% else %}
+                        <p>Please login to see this page.</p>
+                    {% endif %}
+                {% endif %}
+
+                <form method="post" action="{% url 'login' %}">
+                    {% csrf_token %}
+                    <div class="form-group">
+                        <label for="{{ form.username.id_for_label }}">{{ form.username.label }}:</label>
+                        <input id="{{ form.username.id_for_label }}" type="text" class="form-control"
+                               name="{{ form.username.name }}" autofocus autocapitalize="none" autocomplete="username"
+                               required
+                               placeholder="Username">
+                    </div>
+
+                    <div class="form-group">
+                        <label for="{{ form.password.id_for_label }}">{{ form.password.label }}:</label>
+                        <input id="{{ form.password.id_for_label }}" type="password" class="form-control"
+                               name="{{ form.password.name }}" required autocomplete="password"
+                               placeholder="Password">
+                        <a class="float-right" href="{% url 'password_reset' %}">Forgot?</a>
+                    </div>
+                    <input type="submit" class="btn btn-primary" value="login">
+                    <input type="hidden" name="next" value="{{ next }}">
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock %}
+
+{% block footer %}
+{% endblock %}