Working register and login in store app with django modal forms

PDMI/PDMI/settings.py

@@ -11,6 +11,7 @@ https://docs.djangoproject.com/en/3.0/ref/settings/
 """
 
 import os
+from django.urls import reverse_lazy
 
 # Build paths inside the project like this: os.path.join(BASE_DIR, ...)
 BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
@@ -40,6 +41,8 @@ INSTALLED_APPS = [
     'store',
     'doc',
     'front',
+    'bootstrap_modal_forms',
+    'widget_tweaks',
 ]
 
 MIDDLEWARE = [
@@ -123,3 +126,11 @@ USE_TZ = True
 # https://docs.djangoproject.com/en/3.0/howto/static-files/
 
 STATIC_URL = '/static/'
+
+# Logout redirect url
+
+LOGOUT_REDIRECT_URL = reverse_lazy('store_front_page')
+
+# Login redirect url
+
+LOGIN_REDIRECT_URL = reverse_lazy('store_front_page')

PDMI/PDMI/urls.py

@@ -21,5 +21,5 @@ urlpatterns = [
     path('admin/', admin.site.urls),
     path('', include('front.urls'), name='front'),
     path('store/', include('store.urls'), name='store'),
-    path('doc/', include('doc.urls'), name='doc')
+    path('doc/', include('doc.urls'), name='doc'),
 ]

PDMI/front/templates/front/index.html

@@ -24,31 +24,6 @@
 
 
     <div class="container">
-        <!-- Example row of columns -->
-<!--        <div class="row">
-            <div class="col-md-4">
-                <h2>Heading</h2>
-                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
-                    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
-                    mollis euismod. Donec sed odio dui. </p>
-                <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
-            </div>
-            <div class="col-md-4">
-                <h2>Heading</h2>
-                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor
-                    mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna
-                    mollis euismod. Donec sed odio dui. </p>
-                <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
-            </div>
-            <div class="col-md-4">
-                <h2>Heading</h2>
-                <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
-                    porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
-                    ut fermentum massa justo sit amet risus.</p>
-                <p><a class="btn btn-secondary" href="#" role="button">View details &raquo;</a></p>
-            </div>
-        </div> -->
-
         <div class="row">
             {% for i in '123'|make_list %}
             <div class="col-md-4 my-3">

PDMI/store/forms.py

@@ -0,0 +1,14 @@
+from django.contrib.auth.forms import UserCreationForm, AuthenticationForm
+from django.contrib.auth.models import User
+from bootstrap_modal_forms.mixins import PopRequestMixin, CreateUpdateAjaxMixin
+
+class CustomUserCreationForm(PopRequestMixin, CreateUpdateAjaxMixin,
+                             UserCreationForm):
+    class Meta:
+        model = User
+        fields = ['username', 'email', 'password1', 'password2']
+
+class CustomAuthenticationForm(AuthenticationForm):
+    class Meta:
+        model = User
+        fields = ['username', 'password']

PDMI/store/templates/store/index.html

@@ -80,4 +80,9 @@
         </div>
     </div>
 </main>
+
+<!-- Boostrap login and register modals -->
+
+{% include "store/modal.html" %}
+
 {% endblock body %}

PDMI/store/templates/store/login.html

@@ -0,0 +1,41 @@
+{% load widget_tweaks %}
+
+<form method="post" action="">
+  {% csrf_token %}
+
+  <div class="modal-header">
+    <h3 class="modal-title">Log in</h3>
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <div class="modal-body">
+
+    <div class="{% if form.non_field_errors %}invalid{% endif %} mb-2">
+      {% for error in form.non_field_errors %}
+        {{ error }}
+      {% endfor %}
+    </div>
+
+    {% for field in form %}
+      <div class="form-group">
+        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+        {% render_field field class="form-control" placeholder=field.label %}
+        <div class="{% if field.errors %} invalid{% endif %}">
+          {% for error in field.errors %}
+            <p class="help-block">{{ error }}</p>
+          {% endfor %}
+        </div>
+      </div>
+    {% endfor %}
+
+    <!-- Hidden input field for custom redirection after successful login -->
+    <input type="hidden" name="next" value="{{ success_url }}">
+  </div>
+
+  <div class="modal-footer">
+    <button type="button" class="submit-btn btn btn-primary">Log in</button>
+  </div>
+
+</form>

PDMI/store/templates/store/modal.html

@@ -0,0 +1,5 @@
+<div class="modal fade" tabindex="-1" role="dialog" id="modal">
+  <div class="modal-dialog">
+    <div class="modal-content"></div>
+  </div>
+</div>

PDMI/store/templates/store/signup.html

@@ -0,0 +1,38 @@
+{% load widget_tweaks %}
+
+<form method="post" action="">
+  {% csrf_token %}
+
+  <div class="modal-header">
+    <h3 class="modal-title">Sign up</h3>
+    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+      <span aria-hidden="true">&times;</span>
+    </button>
+  </div>
+
+  <div class="modal-body">
+
+    <div class="{% if form.non_field_errors %}invalid{% endif %} mb-2">
+      {% for error in form.non_field_errors %}
+        {{ error }}
+      {% endfor %}
+    </div>
+
+    {% for field in form %}
+      <div class="form-group">
+        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
+        {% render_field field class="form-control" placeholder=field.label %}
+        <div class="{% if field.errors %} invalid{% endif %}">
+          {% for error in field.errors %}
+            <p class="help-block">{{ error }}</p>
+          {% endfor %}
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+
+  <div class="modal-footer">
+    <button type="button" class="submit-btn btn btn-primary">Sign up</button>
+  </div>
+
+</form>

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

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

PDMI/store/urls.py

@@ -15,7 +15,12 @@ Including another URLconf
 """
 from django.urls import path
 from django.views.generic import TemplateView
+from django.contrib.auth.views import LoginView, LogoutView
+from . import views
 
 urlpatterns = [
-    path('', TemplateView.as_view(template_name="store/index.html"), name='store_front_page'),
+    path('', TemplateView.as_view(template_name='store/index.html'), name='store_front_page'),
+    path('login/', views.CustomLoginView.as_view(), name='login'),
+    path('signup/', views.SignUpView.as_view(), name='signup'),
+    path('logout/', LogoutView.as_view())
 ]

PDMI/store/views.py

@@ -1,3 +1,16 @@
 from django.shortcuts import render
+from django.urls import reverse_lazy
+from bootstrap_modal_forms.generic import BSModalCreateView, BSModalLoginView
+from .forms import CustomUserCreationForm, CustomAuthenticationForm
 
-# Create your views here.
+class SignUpView(BSModalCreateView):
+    form_class = CustomUserCreationForm
+    template_name = 'store/signup.html'
+    success_message = 'Success: Sign up succeeded. You can now Log in.'
+    success_url = reverse_lazy('store_front_page')
+
+class CustomLoginView(BSModalLoginView):
+    authentication_form = CustomAuthenticationForm
+    template_name = 'store/login.html'
+    success_message = 'Success: You were successfully logged in.'
+    extra_content = dict(success_url=reverse_lazy('index'))

PDMI/templates/base/base.html

@@ -15,7 +15,10 @@
         integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
         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="{% 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://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 </head>
 <body class="pt-5">
     {% block navbar %}