Register form tweaked

asset-bundles.json

@@ -44,6 +44,13 @@
                     "onCollision": "merge"
                 }
             }
+        },
+        "js/pages/register": {
+            "scripts": [
+                "vendor/speakingurl/speakingurl.min.js",
+                "userfrosting/js/uf-captcha.js",
+                "uf-tweaks/js/pages/register.js"
+            ]
         }
     }
 }

assets/uf-tweaks/js/pages/register.js

@@ -0,0 +1,96 @@
+/**
+ * Page-specific Javascript file.  Should generally be included as a separate asset bundle in your page template.
+ * example: {{ assets.js('js/pages/sign-in-or-register') | raw }}
+ *
+ * This script depends on validation rules specified in pages/partials/page.js.twig.
+ *
+ * Target page: account/register
+ */
+$(document).ready(function() {
+    // TOS modal
+    $(this).find('.js-show-tos').click(function(e) {
+        e.preventDefault();
+
+        $("body").ufModal({
+            sourceUrl: site.uri.public + "/modals/account/tos",
+            msgTarget: $("#alerts-page")
+        });
+    });
+
+    // Auto-generate username when name is filled in
+    var autoGenerate = true;
+    $("#register").find('input[name=first_name], input[name=last_name]').on('input change', function() {
+        if (!autoGenerate) {
+            return;
+        }
+
+        var form = $("#register");
+
+        var firstName = form.find('input[name=first_name]').val().trim();
+        var lastName = form.find('input[name=last_name]').val().trim();
+
+        if (!firstName && !lastName) {
+            return;
+        }
+
+        var userName = getSlug(firstName + ' ' + lastName, {
+            separator: '.'
+        });
+        // Set slug
+        form.find('input[name=user_name]').val(userName);
+    });
+
+    // Autovalidate username field on a delay
+    var timer;
+    $("#register").find('input[name=first_name], input[name=last_name], input[name=user_name]').on('input change', function() {
+        clearTimeout(timer); // Clear the timer so we don't end up with dupes.
+        timer = setTimeout(function() { // assign timer a new timeout 
+            $("#register").find('input[name=user_name]').valid();
+        }, 500);
+    });
+
+    // Enable/disable username suggestions in registration page
+    $("#register").find('#input-register-username-suggest').on('click', function(e) {
+        e.preventDefault();
+        var form = $("#register");
+        $.getJSON(site.uri.public + '/account/suggest-username')
+        .done(function (data) {
+            // Set suggestion
+            form.find('input[name=user_name]').val(data.user_name);
+        });
+    });
+
+    // Turn off autogenerate when someone enters stuff manually in user_name
+    $("#register").find('input[name=user_name]').on('input', function() {
+        autoGenerate = false;
+    });
+
+    // Add remote rule for checking usernames on the fly
+    var registrationValidators = $.extend(
+        true,               // deep extend
+        page.validators.register,
+        {
+            rules: {
+                user_name: {
+                    remote: {
+                        url: site.uri.public + '/account/check-username',
+                        dataType: 'text'
+                    }
+                }
+            }
+        }
+    );
+
+    // Handles form submission
+    $("#register").ufForm({
+        validator: registrationValidators,
+        msgTarget: $("#alerts-page"),
+        keyupDelay: 500
+    }).on("submitSuccess.ufForm", function() {
+        // Reload to clear form and show alerts
+        window.location.reload();
+    }).on("submitError.ufForm", function() {
+        // Reload captcha
+        $("#captcha").captcha();
+    });
+});

src/Controller/AccountController.php

@@ -108,4 +108,80 @@ class AccountController extends UFAccountController
             ],
         ]);
     }
+
+    /**
+     * Render the account registration page for UserFrosting.
+     *
+     * This allows new (non-authenticated) users to create a new account for themselves on your website (if enabled).
+     * By definition, this is a "public page" (does not require authentication).
+     *
+     * AuthGuard: false
+     * checkEnvironment
+     * Route: /account/register
+     * Route Name: register
+     * Request type: GET
+     *
+     * @param Request  $request
+     * @param Response $response
+     * @param array    $args
+     *
+     * @throws NotFoundException If site registration is disabled
+     */
+    public function pageRegister(Request $request, Response $response, $args)
+    {
+        /** @var \UserFrosting\Support\Repository\Repository $config */
+        $config = $this->ci->config;
+
+        if (!$config['site.registration.enabled']) {
+            throw new NotFoundException();
+        }
+
+        /** @var \UserFrosting\Sprinkle\Account\Authenticate\Authenticator $authenticator */
+        $authenticator = $this->ci->authenticator;
+
+        // Redirect if user is already logged in
+        if ($authenticator->check()) {
+            $redirect = $this->ci->get('redirect.onAlreadyLoggedIn');
+
+            return $redirect($request, $response, $args);
+        }
+
+        // Load validation rules
+        $schema = new RequestSchema('schema://requests/register.yaml');
+        $schema->set('password.validators.length.min', $config['site.password.length.min']);
+        $schema->set('password.validators.length.max', $config['site.password.length.max']);
+        $schema->set('passwordc.validators.length.min', $config['site.password.length.min']);
+        $schema->set('passwordc.validators.length.max', $config['site.password.length.max']);
+        $validatorRegister = new JqueryValidationAdapter($schema, $this->ci->translator);
+
+        // Get locale information
+        $currentLocale = $this->ci->translator->getLocale()->getIdentifier();
+
+        // Get a list of all locales
+        $locales = $this->ci->locale->getAvailableOptions();
+
+        // Hide the locale field if there is only 1 locale available
+        $fields = [
+            'hidden'   => [],
+            'disabled' => [],
+        ];
+        if (count($locales) <= 1) {
+            $fields['hidden'][] = 'locale';
+        }
+
+        return $this->ci->view->render($response, 'pages/register.html.twig', [
+            'page' => [
+                'validators' => [
+                    'register' => $validatorRegister->rules('json', false),
+                ],
+            ],
+            'form' => [
+                'fields'  => $fields,
+            ],
+            'locales' => [
+                'available' => $locales,
+                'current'   => $currentLocale,
+            ],
+        ]);
+    }
 }

templates/forms/inputs/register-captcha.html.twig

@@ -0,0 +1,17 @@
+{% block input_user_locale %}
+{% if site.registration.captcha %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group">
+            <label class="sr-only" for="input-register-captcha">{{translate('CAPTCHA.VERIFY')}}</label>
+            <div class="row">
+                <div class="col-md-6">
+                    <input type="text" id="input-register-captcha" name="captcha" placeholder="{{translate('CAPTCHA.SPECIFY')}}" class="form-control">
+                </div>
+                <div class="col-md-6 form-col-captcha">
+                    <img src="{{site.uri.public}}/account/captcha" id="captcha" data-target="#input-register-captcha">
+                </div>
+            </div>
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}
+{% endblock %}

templates/forms/inputs/register-locale.html.twig

@@ -0,0 +1,17 @@
+{% block input_register_locale %}
+{% if 'locale' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group">
+            <label for="r-form-locale" class="control-label">{{translate("LOCALE")}}</label>
+            <select id="r-form-locale" class="form-control js-select2" name="locale">
+                {% for option, label in locales.available %}
+                    {% if label is not empty %}
+                        <option value="{{option}}" {% if (option == locales.current) %}selected{% endif %}>{{label}}</option>
+                    {% endif %}
+                {% endfor %}
+            </select>
+            <p class="help-block">{{translate("LOCALE.ACCOUNT")}}.</p>
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}
+{% endblock %}

templates/forms/inputs/register-name_email.html.twig

@@ -0,0 +1,28 @@
+{% block input_user_locale %}
+{% if 'locale' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+    <label for="input-register-first_name">{{translate('NAME_AND_EMAIL')}}</label>
+    <div class="row">
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="sr-only control-label" for="input-register-first_name">{{translate('FIRST_NAME')}}</label>
+                <input type="text" id="input-register-first_name" name="first_name" placeholder="{{translate('FIRST_NAME')}}" class="form-control" autocomplete="off">
+            </div>
+        </div>
+        <div class="col-md-6">
+            <div class="form-group">
+                <label class="sr-only control-label" for="input-register-last_name">{{translate('LAST_NAME')}}</label>
+                <input type="text" id="input-register-last_name" name="last_name" placeholder="{{translate('LAST_NAME')}}" class="form-control" autocomplete="off">
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-12">
+            <div class="form-group">
+                <input type="text" id="input-register-email" name="email" placeholder="{% if site.registration.require_email_verification %}{{translate('EMAIL.VERIFICATION_REQUIRED')}}{% else %}{{translate('EMAIL.YOUR')}}{% endif %}" class="form-control">
+            </div>
+        </div>
+    </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}
+{% endblock %}

templates/forms/inputs/register-password.html.twig

@@ -0,0 +1,14 @@
+{% block input_user_password %}
+{% if 'password' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group">
+            <label for="input-register-password" class="control-label">{{translate('PASSWORD')}}</label>
+            <input type="password" id="input-register-password" name="password" placeholder="{{translate('PASSWORD.BETWEEN', {min: site.password.length.min, max: site.password.length.max})}}" class="form-control">
+        </div>
+        <div class="form-group">
+            <label class="sr-only control-label" for="input-register-passwordc">{{translate('PASSWORD.CONFIRM')}}</label>
+            <input type="password" id="input-register-passwordc" name="passwordc" placeholder="{{translate('PASSWORD.CONFIRM')}}" class="form-control">
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}
+{% endblock %}

templates/forms/inputs/register-user_name.html.twig

@@ -0,0 +1,11 @@
+{% block input_register_user_name %}
+{% if 'user_name' not in form.fields.hidden %}
+    {% if col_width %}<div class="{{col_width}}">{% endif %}
+        <div class="form-group">
+            <label for="input-register-username" class="control-label">{{translate('USERNAME')}}</label>
+            <span class="pull-right"><a href="#" id="input-register-username-suggest">[{{translate('SUGGEST')}}]</a></span>
+            <input type="text" id="input-register-username" name="user_name" placeholder="{{translate('USERNAME.CHOOSE')}}" class="form-control" autocomplete="off">
+        </div>
+    {% if col_width %}</div>{% endif %}
+{% endif %}
+{% endblock %}

templates/forms/register.html.twig

@@ -0,0 +1,43 @@
+<form id="register" role="form" action="{{site.uri.public}}/account/register" method="post" class="r-form">
+    {% include "forms/csrf.html.twig" %}
+    <div class="form-alerts" id="alerts-page"></div>
+
+    <div class="row">
+        {% block register_form %}
+
+            {% include "forms/inputs/register-name_email.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+            {% include "forms/inputs/register-user_name.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+            {% include "forms/inputs/register-password.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+            {% include "forms/inputs/register-locale.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+            {% include "forms/inputs/register-captcha.html.twig" with { 'col_width': 'col-sm-12' } %}
+
+            <div class="col-sm-12 collapse">
+                <label>Spiderbro: Don't change me bro, I'm tryin'a catch some flies!</label>
+                <input name="spiderbro" id="spiderbro" value="http://"/>
+            </div>
+
+            <div class="col-sm-12 text-left">
+                <p>
+                    {{translate('TOS_AGREEMENT', {
+                        'site_title' : site.title,
+                        'link_attributes' : 'class="js-show-tos" href="#" data-toggle="modal"'
+                    }) | raw}}
+                </p>
+            </div>
+        {% endblock %}
+    </div>
+
+    <div>
+        <button type="submit" class="btn btn-block btn-primary">{{translate('REGISTER_ME')}}</button>
+    </div>
+    
+    <div style="padding-top: 10px;">
+        {{translate('SIGN_IN_HERE', {
+            'url' : site.uri.public ~'/account/sign-in'
+        }) | raw}}
+    </div>
+</form>

templates/pages/register.html.twig

@@ -0,0 +1,19 @@
+{% extends "@account/pages/register.html.twig" %}
+
+{% block content %}
+<div class="login-box">
+    <div class="login-logo">
+        <a href="{{site.uri.public}}">{{site.title}}</a>
+    </div>
+    <!-- /.login-logo -->
+
+    <div class="login-box-body register-form">
+        <p class="login-box-msg"><strong>{{translate('REGISTER')}}</strong></p>
+
+        {% include "forms/register.html.twig" %}
+    </div>
+    <!-- /.login-box-body -->
+
+</div>
+<!-- /.login-box -->
+{% endblock %}