Address #657

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Change Log
 
+## v4.0.12-Alpha
+- Separate out the registration and sign-in pages (https://github.com/userfrosting/UserFrosting/issues/657) **BC**
+- Slightly change behavior of form validation icons
+
 ## v4.0.11-Alpha
 - Fix [#663](https://github.com/userfrosting/UserFrosting/issues/663)
 - Adding more Twig `blocks`

app/sprinkles/account/assets/local/pages/js/forgot-password.js

@@ -14,6 +14,6 @@ $(document).ready(function() {
         msgTarget: $("#alerts-page")
     }).on("submitSuccess.ufForm", function() {
         // Forward to login page on success
-        window.location.replace(site.uri.public + "/account/sign-in-or-register");
+        window.location.replace(site.uri.public + "/account/sign-in");
     });
 });

app/sprinkles/account/assets/local/pages/js/sign-in-or-register.js → app/sprinkles/account/assets/local/pages/js/register.js

@@ -4,55 +4,14 @@
  *
  * This script depends on validation rules specified in components/page.js.twig.
  *
- * Target page: account/sign-in-or-register
+ * Target page: account/register
  */
 $(document).ready(function() {
-
-    // Fetch and render any alerts on the login panel
-    // This is needed, for example, when we are redirected from another page.
-    $("#alerts-login").ufAlerts();
-    $("#alerts-login").ufAlerts('fetch').ufAlerts('render');
-
-    function toggleRegistrationForm() {
-		$('.login-form').fadeOut('fast', function() {
-			$('.register-form').fadeIn('fast');
-			$("#captcha").captcha();
-		});
-    }
-
-    function toggleLoginForm() {
-    	$('.register-form').fadeOut('fast', function() {
-			$('.login-form').fadeIn('fast');
-		});
-    }
-
-    /**
-     * If there is a redirect parameter in the query string, redirect to that page.
-     * Otherwise, if there is a UF-Redirect header, redirect to that page.
-     * Otherwise, redirect to the home page.
-     */
-    function redirectOnLogin(jqXHR) {
-        var components = URI.parse(window.location.href);
-        var query = URI.parseQuery(components['query']);
-
-        if (query && query['redirect']) {
-            window.location.replace(site.uri.public + '/' + query['redirect']);
-        } else if (jqXHR.getResponseHeader('UF-Redirect')) {
-            window.location.replace(jqXHR.getResponseHeader('UF-Redirect'));
-        } else {
-            window.location.replace(site.uri.public);
-        }
-    }
-
-    $('.show-register-form').on('click', toggleRegistrationForm);
-
-    $('.show-login-form').on('click', toggleLoginForm);
-
     // TOS modal
     $(this).find('.js-show-tos').click(function() {
         $("body").ufModal({
             sourceUrl: site.uri.public + "/modals/account/tos",
-            msgTarget: $("#alerts-register")
+            msgTarget: $("#alerts-page")
         });
     });
 
@@ -89,7 +48,8 @@ $(document).ready(function() {
     });
 
     // Enable/disable username suggestions in registration page
-    $("#register").find('#form-register-username-suggest').on('click', function() {
+    $("#register").find('#form-register-username-suggest').on('click', function(e) {
+        e.preventDefault();
         var form = $("#register");
         $.getJSON(site.uri.public + '/account/suggest-username')
         .done(function (data) {
@@ -122,29 +82,13 @@ $(document).ready(function() {
     // Handles form submission
     $("#register").ufForm({
         validators: registrationValidators,
-        msgTarget: $("#alerts-register"),
+        msgTarget: $("#alerts-page"),
         keyupDelay: 500
     }).on("submitSuccess.ufForm", function() {
-        // Show login on success
-        toggleLoginForm();
-        // Show success messages
-        // TODO: destroy method for simpler initialization
-        if (!$("#alerts-login").data('ufAlerts')) {
-            $("#alerts-login").ufAlerts();
-        } else {
-            $("#alerts-login").ufAlerts('clear');
-        }
-
-        $("#alerts-login").ufAlerts('fetch').ufAlerts('render');
+        // Reload to clear form and show alerts
+        window.location.reload();
     }).on("submitError.ufForm", function() {
         // Reload captcha
         $("#captcha").captcha();
     });
-
-    $("#sign-in").ufForm({
-        validators: page.validators.login,
-        msgTarget: $("#alerts-login")
-    }).on("submitSuccess.ufForm", function(event, data, textStatus, jqXHR) {
-        redirectOnLogin(jqXHR);
-    });
 });

app/sprinkles/account/assets/local/pages/js/resend-verification.js

@@ -14,6 +14,6 @@ $(document).ready(function() {
         msgTarget: $("#alerts-page")
     }).on("submitSuccess.ufForm", function() {
         // Forward to login page on success
-        window.location.replace(site.uri.public + "/account/sign-in-or-register");
+        window.location.replace(site.uri.public + "/account/sign-in");
     });
 });

app/sprinkles/account/assets/local/pages/js/set-or-reset-password.js

@@ -14,6 +14,6 @@ $(document).ready(function() {
     }).on("submitSuccess.ufForm", function() {
         // Forward to home page on success
         // TODO: forward to landing/last page
-        window.location.replace(site.uri.public + "/account/sign-in-or-register");
+        window.location.replace(site.uri.public + "/account/sign-in");
     });
 });

app/sprinkles/account/assets/local/pages/js/sign-in.js

@@ -0,0 +1,34 @@
+/**
+ * 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 components/page.js.twig.
+ *
+ * Target page: account/sign-in
+ */
+$(document).ready(function() {
+    /**
+     * If there is a redirect parameter in the query string, redirect to that page.
+     * Otherwise, if there is a UF-Redirect header, redirect to that page.
+     * Otherwise, redirect to the home page.
+     */
+    function redirectOnLogin(jqXHR) {
+        var components = URI.parse(window.location.href);
+        var query = URI.parseQuery(components['query']);
+
+        if (query && query['redirect']) {
+            window.location.replace(site.uri.public + '/' + query['redirect']);
+        } else if (jqXHR.getResponseHeader('UF-Redirect')) {
+            window.location.replace(jqXHR.getResponseHeader('UF-Redirect'));
+        } else {
+            window.location.replace(site.uri.public);
+        }
+    }
+
+    $("#sign-in").ufForm({
+        validators: page.validators.login,
+        msgTarget: $("#alerts-page")
+    }).on("submitSuccess.ufForm", function(event, data, textStatus, jqXHR) {
+        redirectOnLogin(jqXHR);
+    });
+});

app/sprinkles/account/bundle.config.json

@@ -48,12 +48,24 @@
                 }
             }
         },
-        "js/pages/sign-in-or-register": {
+        "js/pages/register": {
             "scripts": [
                 "vendor/speakingurl/speakingurl.min.js",
-                "vendor/urijs/src/URI.js",
                 "local/core/js/uf-captcha.js",
-                "local/pages/js/sign-in-or-register.js"
+                "local/pages/js/register.js"
+            ],
+            "options": {
+                "result": {
+                    "type": {
+                        "scripts": "plain"
+                    }
+                }
+            }
+        },
+        "js/pages/sign-in": {
+            "scripts": [
+                "vendor/urijs/src/URI.js",
+                "local/pages/js/sign-in.js"
             ],
             "options": {
                 "result": {

app/sprinkles/account/locale/en_US/messages.php

@@ -52,8 +52,9 @@
     ],
 
     "EMAIL" => [
-        "INVALID"   => "There is no account for '{{email}}'.",
-        "IN_USE"    => "Email '{{email}}' is already in use."
+        "INVALID"               => "There is no account for '{{email}}'.",
+        "IN_USE"                => "Email '{{email}}' is already in use.",
+        "VERIFICATION_REQUIRED" => "Email (verification required - use a real address!)"
     ],
 
     "EMAIL_OR_USERNAME" => "Username or email address",
@@ -80,6 +81,8 @@
 
     "NAME" => "Name",
 
+    "NAME_AND_EMAIL" => "Name and email",
+
     "PAGE" => [
         "LOGIN" => [
             "DESCRIPTION"   => "Sign in to your {{site_name}} account, or register for a new account.",

app/sprinkles/account/routes/routes.php

@@ -24,10 +24,14 @@
 
     $this->get('/set-password/deny', 'UserFrosting\Sprinkle\Account\Controller\AccountController:denyResetPassword');
 
+    $this->get('/register', 'UserFrosting\Sprinkle\Account\Controller\AccountController:pageRegister')
+        ->add('checkEnvironment')
+        ->setName('login');
+
     $this->get('/settings', 'UserFrosting\Sprinkle\Account\Controller\AccountController:pageSettings')
         ->add('authGuard');
 
-    $this->get('/sign-in-or-register', 'UserFrosting\Sprinkle\Account\Controller\AccountController:pageSignInOrRegister')
+    $this->get('/sign-in', 'UserFrosting\Sprinkle\Account\Controller\AccountController:pageSignIn')
         ->add('checkEnvironment')
         ->setName('login');
 

app/sprinkles/account/src/Controller/AccountController.php

@@ -403,6 +403,41 @@ public function pageForgotPassword($request, $response, $args)
         ]);
     }
 
+
+    /**
+     * 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).
+     * Request type: GET
+     */
+    public function pageRegister($request, $response, $args)
+    {
+        /** @var Config $config */
+        $config = $this->ci->config;
+
+        /** @var UserFrosting\Sprinkle\Account\Authenticate\Authenticator $authenticator */
+        $authenticator = $this->ci->authenticator;
+
+        // Forward to dashboard if user is already logged in
+        // TODO: forward to user's landing page or last visited page
+        if ($authenticator->check()) {
+            return $response->withRedirect($this->ci->router->pathFor('dashboard'), 302);
+        }
+
+        // Load validation rules
+        $schema = new RequestSchema("schema://register.json");
+        $validatorRegister = new JqueryValidationAdapter($schema, $this->ci->translator);
+
+        return $this->ci->view->render($response, 'pages/register.html.twig', [
+            "page" => [
+                "validators" => [
+                    "register" => $validatorRegister->rules('json', false)
+                ]
+            ]
+        ]);
+    }
+
     /**
      * Render the "resend verification email" page.
      *
@@ -523,37 +558,33 @@ public function pageSettings($request, $response, $args)
     }
 
     /**
-     * Render the account registration/sign-in page for UserFrosting.
+     * Render the account sign-in page for UserFrosting.
      *
-     * This allows existing users to sign in, and new (non-authenticated) users to create a new account for themselves on your website (if enabled).
+     * This allows existing users to sign in.
      * By definition, this is a "public page" (does not require authentication).
      * Request type: GET
      */
-    public function pageSignInOrRegister($request, $response, $args)
+    public function pageSignIn($request, $response, $args)
     {
         $config = $this->ci->config;
 
         /** @var UserFrosting\Sprinkle\Account\Authenticate\Authenticator $authenticator */
         $authenticator = $this->ci->authenticator;
 
-        // Forward to home page if user is already logged in
+        // Forward to dashboard if user is already logged in
         // TODO: forward to user's landing page or last visited page
         if ($authenticator->check()) {
-            return $response->withRedirect($config['site.uri.public'], 302);
+            return $response->withRedirect($this->ci->router->pathFor('dashboard'), 302);
         }
 
         // Load validation rules
         $schema = new RequestSchema("schema://login.json");
         $validatorLogin = new JqueryValidationAdapter($schema, $this->ci->translator);
 
-        $schema = new RequestSchema("schema://register.json");
-        $validatorRegister = new JqueryValidationAdapter($schema, $this->ci->translator);
-
-        return $this->ci->view->render($response, 'pages/sign-in-or-register.html.twig', [
+        return $this->ci->view->render($response, 'pages/sign-in.html.twig', [
             "page" => [
                 "validators" => [
-                    "login"    => $validatorLogin->rules('json', false),
-                    "register" => $validatorRegister->rules('json', false)
+                    "login"    => $validatorLogin->rules('json', false)
                 ]
             ]
         ]);

app/sprinkles/account/templates/components/default/main-nav.html.twig

@@ -5,7 +5,7 @@
     {{parent()}}
     {% if not checkAuthenticated() %}
         <li>
-            <a href="{{site.uri.public}}/account/sign-in-or-register" class="nav-highlight">{{translate("SIGNIN")}}</a>
+            <a href="{{site.uri.public}}/account/sign-in" class="nav-highlight">{{translate("SIGNIN")}}</a>
         </li>
     {% else %}
         {% include "components/user-card.html.twig" %}

app/sprinkles/account/templates/pages/error/compromised.html.twig

@@ -4,4 +4,4 @@
 
 {% block page_description %}{{ translate('ACCOUNT.SESSION_COMPROMISED_TITLE') }}{% endblock %}
 
-{% block heading %}<i class="fa fa-warning text-yellow"></i> Someone may have used your login information to acccess this page.  For your safety, all sessions were logged out. Please <a href="{{site.uri.public}}/account/sign-in-or-register">log in</a> and check your account for suspicious activity.  You may also wish to change your password.{% endblock %}
+{% block heading %}<i class="fa fa-warning text-yellow"></i> Someone may have used your login information to acccess this page.  For your safety, all sessions were logged out. Please <a href="{{site.uri.public}}/account/sign-in">log in</a> and check your account for suspicious activity.  You may also wish to change your password.{% endblock %}

app/sprinkles/account/templates/pages/forgot-password.html.twig

@@ -20,7 +20,7 @@
         <p class="login-box-msg"><strong>{{translate("PASSWORD.FORGOTTEN")}}</strong></p>
         <p class="login-box-msg">{{translate("PASSWORD.FORGET.EMAIL")}}</p>
 
-        <div class="alerts" id="alerts-page"></div>
+        <div class="form-alerts" id="alerts-page"></div>
 
         <form id="request-password-reset" role="form" action="{{site.uri.public}}/account/forgot-password" method="post" class="r-form">
             {% include "components/csrf.html.twig" %}