Registration

bluepages/app/models.py

@@ -362,7 +362,7 @@ def contact_address(self):
         return address
 
     def clean(self):
-        if self.contact and self.status == 'Pending':
+        if not self.pk and self.contact and self.status == 'Pending':
             matches = ContactSuggestion.objects.filter(contact=self.contact, user=self.user, status=self.status)
             if matches.count() > 0:
                 raise ValidationError('You already have a suggested edit peding for this contact. Please edit your existing suggestion.')
@@ -381,7 +381,7 @@ class RecordSuggestion(RecordBase):
     status = models.CharField(max_length=20, default='Pending', choices=SUGGESTION_STATUS_CHOICES, verbose_name="Suggestion status", help_text="Has suggestion been approved or declined?")
 
     def clean(self):
-        if self.contact_suggestion.status == 'Pending' and self.status == 'Pending':
+        if not self.pk and self.contact_suggestion.status == 'Pending' and self.status == 'Pending':
             matches = RecordSuggestion.objects.filter(contact_suggestion=self.contact_suggestion, topic=self.topic, status=self.status)
             if matches.count() > 0:
                 raise ValidationError('You already have a suggested edit peding for this contact for this topic. Please edit your existing suggestion.')

bluepages/app/static/app/js/app/src/app.js

@@ -2,6 +2,144 @@ import { Modal } from 'bootstrap';
 import * as $ from 'jquery';
 import DataTable from 'datatables';
 
+app.showAccountModal = function() {
+    app.suggestionMenuModal.hide();
+    app.suggestionModal.hide();
+    app.recordSuggestionModal.hide();
+    app.accountModal.show();
+}
+
+app.showSuggestionMenuModal = function() {
+    app.accountModal.hide();
+    app.suggestionModal.hide();
+    app.recordSuggestionModal.hide();
+    app.suggestionMenuModal.show();
+}
+
+app.showSuggestionFormModal = function() {
+    app.accountModal.hide();
+    app.suggestionMenuModal.hide();
+    app.recordSuggestionModal.hide();
+    app.suggestionModal.show();
+}
+
+app.showRecordSuggestionFormModal = function() {
+    app.accountModal.hide();
+    app.suggestionMenuModal.hide();
+    app.suggestionModal.hide();
+    app.recordSuggestionModal.show();
+}
+
+app.checkRegistrationFormValidity = function() {
+    if ($('#registration-form').checkValidity()) {
+        $('#registration-form-submit').removeAttribute('disabled');
+    } else {
+        $('#registration-form-submit').setAttribute('disabled', 'disabled');
+    }
+}
+
+app.loadRegistrationForm = function() {
+    $.ajax({
+        url: "/accounts/register/",
+        success: function(registration_form) {
+            $("#accountModalWrapper").html(registration_form);
+            $("#registration-form").change(app.checkRegistrationFormValidity);
+            app.showAccountModal();
+        }
+    });
+}
+
+app.submitRegistrationForm = function() {
+    let registration_form = $("#registration-form");
+    let submitAction = registration_form.attr('action');
+
+    $.post(submitAction, registration_form.serialize(), app.handleRegistrationReturn)
+}
+
+app.handleRegistrationReturn = function(result) {
+    if (result.indexOf('id="registration-form">') < 0) {
+        $("#accountModalWrapper").html("Registration successful! You will now be logged in...");
+        window.setTimeout(
+            function() {
+                window.location.reload();
+            },
+            1000
+        );
+    } else {
+        $("#accountModalWrapper").html(result);
+        app.showAccountModal();
+
+    }
+}
+
+app.loadForgotCredentials = function() {
+    $.ajax({
+        url: "/accounts/forgot/",
+        success: function(forgot_result) {
+            $("#accountModalWrapper").html(forgot_result);
+            // $("#registration-form").change(app.checkRegistrationFormValidity);
+            app.showAccountModal();
+        }
+    });
+}
+
+app.submitPasswordReset = function() {
+    let reset_form = $("#password-reset-form");
+    let submitAction = reset_form.attr('action');
+
+    $.post(submitAction, reset_form.serialize(), app.handlePasswordResetReturn)
+}
+
+app.handlePasswordResetReturn = function(result) {
+    $("#accountModalWrapper").html(
+        '<div class="content">' +
+            '<div id="content" class="colM">' +
+                '<h1>Password reset sent</h1>' +
+                '<p>We’ve emailed you instructions for setting your password, if an account exists with the email you entered. You should receive them shortly.</p>' +
+                '<p>If you don’t receive an email, please make sure you’ve entered the address you registered with, and check your spam folder.</p>' +
+            '</div>' +
+        '</div>'
+    );
+}
+
+app.loadLoginForm = function() {
+    $.ajax({
+        url: "/accounts/login/",
+        success: function(login_form) {
+            $("#accountModalWrapper").html(login_form);
+            app.showAccountModal();
+        }
+    });
+}
+
+app.handleLoginReturn = function(result) {
+    if (result.indexOf('id="login-form">') < 0) {
+        $("#accountModalWrapper").html("Login successful!");
+        window.setTimeout(
+            function() {
+                window.location.reload();
+            },
+            1000
+        );
+    } else {
+        $("#accountModalWrapper").html(result);
+        app.showAccountModal();
+    }
+}
+
+app.submitLoginForm = function() {
+    let login_form = $("#login-form");
+    let submitAction = login_form.attr('action');
+
+    $.post(submitAction, login_form.serialize(), app.handleLoginReturn);
+}
+
+app.logoutRUS = function() {
+    let html = "<div id='logout-rus'><p>Are you sure you wish to log out?</p><button class='btn btn-primary' data-bs-dismiss='modal'>Nevemind</button><a href='/accounts/logout/'><button class='btn btn-primary'>Yes, log me out</button></a></div>";
+    $("#accountModalWrapper").html(html);
+    app.showAccountModal();
+}
+
 app.loadSuggestionForm = function(contact_suggestion_id) {
     let url = "/suggestion_form/";
     if (contact_suggestion_id) {
@@ -11,9 +149,7 @@ app.loadSuggestionForm = function(contact_suggestion_id) {
         url: url,
         success: function(form){
             $("#suggestionModalWrapper").html(form);
-            app.recordSuggestionModal.hide();
-            app.suggestionMenuModal.hide();
-            app.suggestionModal.show();
+            app.showSuggestionFormModal();
         }
     })
 }
@@ -42,16 +178,12 @@ app.submitContactSuggestion = function() {
 }
 
 app.loadSuggestionMenu = function() {
-    // app.suggestionMenuModal.hide();
-    // $("#suggestionMenuModalWrapper").html('')
     $.ajax({
         url: "/get_suggestion_menu/",
         success: function(data) {
             if (typeof(data) == 'string') {
                 $("#suggestionMenuModalWrapper").html(data)
-                app.suggestionModal.hide();
-                app.recordSuggestionModal.hide();
-                app.suggestionMenuModal.show();
+                app.showSuggestionMenuModal();
             } else {
                 // result not HTML, meaning no existing suggestion records were found
                 app.loadSuggestionForm();
@@ -75,9 +207,7 @@ app.prepContactMenuModal = function(data) {
 
 app.loadContactMenuModal = function(form_html) {
     $('#suggestionMenuModalWrapper').html(form_html);
-    app.suggestionModal.hide();
-    app.recordSuggestionModal.hide();
-    app.suggestionMenuModal.show();
+    app.showSuggestionMenuModal();
 }
 
 app.prepRecordSuggestions = function(contact_id, record_id) {
@@ -93,12 +223,10 @@ app.prepRecordSuggestions = function(contact_id, record_id) {
 
 app.loadRecordSuggestionModal = function(data) {
     if (typeof(data) == 'string') {
-        app.suggestionModal.hide();
-        app.suggestionMenuModal.hide();
         $('#recordSuggestionModalWrapper').html(data);
         $("#topicSuggestionContactName").html(app.suggested_contact.contact_name);
         app.loadRecordSuggestionForm();
-        app.recordSuggestionModal.show();
+        app.showRecordSuggestionFormModal();
     } else {
         app.suggested_contact = data.contact_suggestion;
         $.ajax({
@@ -109,8 +237,9 @@ app.loadRecordSuggestionModal = function(data) {
 
 }
 
-app.suggestionModal = new Modal(document.getElementById('suggestionModal'), {});
+app.accountModal = new Modal(document.getElementById('accountModal'), {});
 app.suggestionMenuModal = new Modal(document.getElementById('suggestionMenuModal'), {});
+app.suggestionModal = new Modal(document.getElementById('suggestionModal'), {});
 app.recordSuggestionModal = new Modal(document.getElementById('recordSuggestionModal'), {});
 
 

bluepages/app/static/app/scss/bluepages.scss

@@ -41,7 +41,7 @@ header {
 }
 
 .header-user {
-  min-width: 150px;
+  min-width: 235px;
   padding: 2rem;
 }
 
@@ -90,5 +90,9 @@ header {
   background-color: $color;
 }
 
-
+#logout-rus {
+  button{
+    margin:0.5rem;
+  } 
+}
 

bluepages/app/templates/django_registration/registration_closed.html

@@ -0,0 +1,8 @@
+<h3>Self-registration is currently closed.</h3>
+<p>
+    If you would like to register and contribute to Blue Pages, please 
+    <a href="mailto:john@westcoastoceanalliance.org?subject=Blue Pages Registration Request">
+        reach out to John Hansen (john@westcoastoceanalliance.org)
+    </a> 
+    with your request.
+</p>

bluepages/app/templates/django_registration/registration_complete.html

@@ -0,0 +1,2 @@
+<p>Registration Successful.</p>
+<a href="/"><button class="btn button-primary" onclick="window.location.reload()" >Proceed</button></a>

bluepages/app/templates/django_registration/registration_form.html

@@ -0,0 +1,7 @@
+<form method="post" action="/accounts/register/" id="registration-form">
+    {% csrf_token %}
+    {{ form.as_p }}
+    <button type="button" class="btn btn-primary modal-submit-button" onclick="app.submitRegistrationForm()">Submit</button>
+</form>
+
+<div><p>Already have an account? <a href="#" onclick="app.loadLoginForm()"">log in here</a></p></div>

bluepages/app/templates/generic_form.html

@@ -0,0 +1,14 @@
+<form method="post" action="{{action}}" id="{{ form_id }}">
+    <h3>{{ generic_form_header }}</h3>
+    {% csrf_token %}
+    {{ form }}
+    <br />
+    <br />
+    {% if submit_function %}
+        <button type="button" class="btn btn-primary" onclick="{{ submit_function }}">
+            Submit
+        </button>
+    {% else %}
+        <input type="submit" class="btn btn-primary" value="Submit"/>
+    {% endif %}
+</form>

bluepages/app/templates/header.html

@@ -16,9 +16,11 @@ <h1>West Coast Blue Pages</h1>
     </div>
     <div class="header-user">
         {% if user.is_authenticated %}
-            <a href="/account">Account</a>
+            <button class="btn btn-primary">Account</button>
+            <button class="btn btn-primary" onclick="app.logoutRUS()">Logout</button>
         {% else %}
-            <a href="/account">login/register</a>
+            <button class="btn btn-primary" onclick="app.loadRegistrationForm()">Register</button>
+            <button class="btn btn-primary" onclick="app.loadLoginForm()">Login</button>
         {% endif %}
     </div>
 </div>

bluepages/app/templates/modals.html

@@ -1,3 +1,19 @@
+<div class="modal fade" id="accountModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="accountModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <div id="accountModalWrapper"></div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="modal fade" id="suggestionModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="suggestionModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">
@@ -12,7 +28,6 @@ <h5 class="modal-title" id="suggestionModalLabel">Suggest a Contact</h5>
     </div>
 </div>
 
-<!-- TODO: This will be for users to manage their suggestions -->
 <div class="modal fade" id="suggestionMenuModal" data-bs-backdrop="static" tabindex="-1" aria-labelledby="suggestionMenuModalLabel" aria-hidden="true">
     <div class="modal-dialog">
         <div class="modal-content">

bluepages/app/templates/registration/login.html

@@ -0,0 +1,8 @@
+<form method="post" action="/accounts/login/" id="login-form">
+    {% csrf_token %}
+    {{ form.as_p }}
+    <button type="button" class="btn btn-primary modal-submit-button" onclick="app.submitLoginForm()">Log in</button>
+</form>
+
+<div><p>Don't have an account? <a href="#" onclick="app.loadRegistrationForm()"">Register for a free account</a></p></div>
+<div><p>Forgot your username or password? <a href="#" onclick="app.loadForgotCredentials()"">Reclaim your account</a></p></div>

bluepages/app/urls.py

@@ -5,6 +5,7 @@
 
 """
 from django.urls import path, re_path, include
+from django.contrib.auth.views import PasswordResetView
 from app.views import home, regionJSON, regionPicker, wireframe, getSuggestionMenu, contactSuggestionMenu, contactSuggestionForm, recordSuggestionForm, deleteSuggestedContact, deleteSuggestedRecord
 
 
@@ -19,8 +20,16 @@
     path('record_suggestion_form/<int:contact_id>/', recordSuggestionForm),
     path('delete_suggested_contact/<int:contact_id>/', deleteSuggestedContact),
     path('delete_suggested_record/<int:record_id>/', deleteSuggestedRecord),
+    path('accounts/forgot/', PasswordResetView.as_view(template_name='generic_form.html', extra_context={
+        'action': '/accounts/forgot/',
+        'form_id': 'password-reset-form',
+        'submit_function': 'app.submitPasswordReset()',
+        'generic_form_header': 'Reset your password:'
+    })),
+    path('accounts/', include('django_registration.backends.one_step.urls')),
+    path('accounts/', include('django.contrib.auth.urls')),
 
     re_path(r'^region_picker', regionPicker),
     re_path(r'^wireframe', wireframe),
-    re_path(r'', home),
+    re_path(r'^$', home),
 ]

bluepages/app/views.py

@@ -1,5 +1,4 @@
 from django.conf import settings
-from django.forms import modelformset_factory
 from django.http import JsonResponse
 from django.shortcuts import render
 import json
@@ -16,7 +15,7 @@ def home(request):
     #   https://www.enterprisedb.com/postgres-tutorials/how-implement-faceted-search-django-and-postgresql
     if request.user.is_authenticated or not settings.REQUIRE_ACCOUNT:
         filters = {
-            'Entities': getEntityFeacetFilters(contacts),
+            'Entities': getEntityFacetFilters(contacts),
             'Topics': getTopicFacetFilters(contacts),
             'Regions': getRegionFacetFilters(contacts)
         }
@@ -35,7 +34,7 @@ def home(request):
 
     return render(request, "welcome.html", context)
 
-def getEntityFeacetFilters(contacts=None):
+def getEntityFacetFilters(contacts=None):
     if not contacts:
         contacts = Contact.objects.all()
 

bluepages/bluepages/local_settings.py.template

@@ -19,4 +19,5 @@ SECRET_KEY = 'button_mash_to_your_hearts_content_you_will_never_need_to_enter_th
 DEBUG = True
 DEBUG_JS = DEBUG
 
-REQUIRE_ACCOUNT = False
+REQUIRE_ACCOUNT = False
+REGISTRATION_OPEN = False