Join requests now present an "are you sure?" modal

assets/organisations/js/widgets/organisations.js

@@ -224,42 +224,24 @@ function bindOrganisationButtons(el, options) {
     el.find('.js-organisation-join').click(function(e) {
         e.preventDefault();
 
-        var data = {};
-        data[site.csrf.keys.name] = site.csrf.name;
-        data[site.csrf.keys.value] = site.csrf.value;
+        $("body").ufModal({
+            sourceUrl: site.uri.public + "/modals/organisations/o/" + $(this).data('slug') + "/members/confirm-join",
+            ajaxParams: {
+                slug: $(this).data('slug')
+            },
+            msgTarget: $("#alerts-page")
+        });
 
-        var url = site.uri.public + '/api/organisations/o/' + $(this).data('slug') + '/members';
-        var debugAjax = (typeof site !== "undefined") && site.debug.ajax;
+        $("body").on('renderSuccess.ufModal', function() {
+            var modal = $(this).ufModal('getModal');
+            var form = modal.find('.js-form');
 
-        return $.ajax({
-            type: "POST",
-            url: url,
-            data: data,
-            dataType: debugAjax ? 'html' : 'json',
-        }).fail(function(jqXHR) {
-            // Error messages
-            if (debugAjax && jqXHR.responseText) {
-                document.write(jqXHR.responseText);
-                document.close();
-            } else {
-                console.log("Error (" + jqXHR.status + "): " + jqXHR.responseText);
-
-                // Display errors on failure
-                // TODO: ufAlerts widget should have a 'destroy' method
-                if (!$("#alerts-page").data('ufAlerts')) {
-                    $("#alerts-page").ufAlerts();
-                } else {
-                    $("#alerts-page").ufAlerts('clear');
-                }
-
-                $("#alerts-page").ufAlerts('fetch').ufAlerts('render');
-            }
-
-            return jqXHR;
-        }).done(function(response) {
+            form.ufForm()
+                .on("submitSuccess.ufForm", function() {
                     window.location.reload();
                 });
         });
+    });
 
     // Cancel a registration request
     el.find('.js-organisation-cancelJoin').click(function(e) {

locale/en_US/messages.php

@@ -31,6 +31,10 @@ return [
         'EDIT'                           => 'Edit organistion',
         'UPDATE'                         => 'Details updated for organistion <strong>{{name}}</strong>',
 
+
+        'JOIN'                           => 'Join organisation',
+        'JOIN_CONFIRM'                   => 'Are you sure you want to join the organisation <strong>{{name}}</strong>?',
+        'JOIN_YES'                       => 'Yes, join organisation.',
         'JOIN_SUCCESSFUL'                => 'Successfully joined organisation <strong>{{name}}</strong>',
 
         'LEAVE'                          => 'Leave organisation',
@@ -93,11 +97,12 @@ return [
             'DENY'                      => 'Deny organisation registration',
         ],
         'JOIN_REQUEST' => [
-            'SUBMIT_SUCCESSFUL'         => 'Request to join organisation <strong>{{name}}</strong> sent',
-
             'ALREADY_IN_ONE'            => 'You cannot join another organisation because you are already in one (only one organisation allowed).',
 
             'REQUEST'                   => 'Request to join organisation',
+            'REQUEST_CONFIRM'           => 'Are you sure you want to request to join the organisation <strong>{{name}}</strong>?',
+            'APPROVAL_REQUIRED'         => 'Joining organisations requires approval. You will receive an email once your join request has been approved.',
+            'SUBMIT_SUCCESSFUL'         => 'Request to join organisation <strong>{{name}}</strong> sent',
 
             'CANCEL'                    => 'Cancel request to join organisation',
             'CANCEL_CONFIRM'            => 'Are you sure you want to cancel your request to join the organisation <strong>{{name}}</strong>?',

routes/organisation-members.php

@@ -37,6 +37,7 @@ $app->group('/api/organisations/o/{slug}/members', function () {
 
 
 $app->group('/modals/organisations/o/{slug}/members', function () {
+    $this->get('/confirm-join', 'UserFrosting\Sprinkle\Organisations\Controller\OrganisationMembersController:getModalConfirmJoin');
     $this->get('/confirm-leave', 'UserFrosting\Sprinkle\Organisations\Controller\OrganisationMembersController:getModalConfirmLeave');
     $this->get('/confirm-cancel', 'UserFrosting\Sprinkle\Organisations\Controller\OrganisationMembersController:getModalConfirmCancel');
     $this->get('/confirm-remove', 'UserFrosting\Sprinkle\Organisations\Controller\OrganisationMembersController:getModalConfirmRemove');

src/Controller/OrganisationMembersController.php

@@ -105,7 +105,7 @@ class OrganisationMembersController extends SimpleController
         Capsule::transaction(function () use ($organisation, $currentUser, $classMapper, $config) {
             $organisation->members()->attach($currentUser->id, [
                 'flag_admin' => false,
-                'flag_approved' => !$config['organisation']['membership']['require_approval'],
+                'flag_approved' => !$config['organisation.membership.require_approval'],
             ]);
 
             $organisation->save();
@@ -976,6 +976,55 @@ class OrganisationMembersController extends SimpleController
         return $sprunje->toResponse($response);
     }
 
+    /**
+     * Get join confirmation modal.
+     *
+     * @param Request  $request
+     * @param Response $response
+     * @param array    $args
+     *
+     * @throws NotFoundException   If organisation is not found
+     * @throws ForbiddenException  If user is not authorized to access page
+     * @throws BadRequestException
+     */
+    public function getModalConfirmJoin(Request $request, Response $response, $args)
+    {
+        /** @var \UserFrosting\Sprinkle\Account\Authorize\AuthorizationManager $authorizer */
+        $authorizer = $this->ci->authorizer;
+
+        /** @var \UserFrosting\Sprinkle\Core\Util\ClassMapper $classMapper */
+        $classMapper = $this->ci->classMapper;
+
+        /** @var \UserFrosting\Support\Repository\Repository $config */
+        $config = $this->ci->config;
+
+        /** @var \UserFrosting\Sprinkle\Account\Database\Models\Interfaces\UserInterface $currentUser */
+        $currentUser = $this->ci->currentUser;
+
+
+        $organisation = $this->getOrganisationFromParams($args);
+
+        // If the organisation no longer exists, forward to main organisation listing page
+        if (!$organisation) {
+            throw new NotFoundException();
+        }
+
+        // Access-controlled page
+        if (!$authorizer->checkAccess($currentUser, 'join_organisation', [
+            'organisation' => $organisation,
+        ])) {
+            throw new ForbiddenException();
+        }
+
+        return $this->ci->view->render($response, 'modals/confirm-join-organisation.html.twig', [
+            'organisation' => $organisation,
+            'approval_required' => $config['organisation.membership.require_approval'],
+            'form'  => [
+                'action' => "api/organisations/o/{$organisation->slug}/members",
+            ],
+        ]);
+    }
+
     /**
      * Get leave confirmation modal.
      *

templates/modals/confirm-join-organisation.html.twig

@@ -0,0 +1,24 @@
+{% extends "modals/modal.html.twig" %}
+
+{% block modal_title %}{% if approval_required %}{{translate("ORGANISATION.JOIN_REQUEST.REQUEST")}}{% else %}{{translate("ORGANISATION.JOIN")}}{% endif %}{% endblock %}
+
+{% block modal_body %}
+<form class="js-form" method="post" action="{{site.uri.public}}/{{form.action}}">
+    {% include "forms/csrf.html.twig" %}
+    <div class="js-form-alerts">
+    </div>
+    {% if approval_required %}
+    <h4>
+        {{translate("ORGANISATION.JOIN_REQUEST.REQUEST_CONFIRM", {name: organisation.name})}}
+        <small>{{translate("ORGANISATION.JOIN_REQUEST.APPROVAL_REQUIRED")}}</small>
+    </h4>
+    {% else %}
+    <h4>{{translate("ORGANISATION.JOIN_CONFIRM", {name: organisation.name})}}</h4>
+    {% endif %}
+    <br>
+    <div class="btn-group-action">
+        <button type="submit" class="btn btn-success btn-lg btn-block">{{translate("ORGANISATION.JOIN_YES")}}</button>
+        <button type="button" class="btn btn-default btn-lg btn-block" data-dismiss="modal">{{translate("CANCEL")}}</button>
+    </div>
+</form>
+{% endblock %}