Like last week's version, 3.0.75, version 3.0.76 focuses on attending to and resolving GitHub issue reports, as we work towards our next master version. Expect this to continue in the next couple of weeks as well. This week we've got new versions of the Uikit 3 admin theme, a new version of ProCache with SCSS and LESS support, plus a brand new module that provides user login, new user registration and a user profile editor, all for the front-end of your site.
Update to AdminThemeUikit module
I'd been waiting for Uikit 3 to reach a non-beta before we start merging our admin theme and site profile based on it, into the core. Currently Uikit is at beta 30 and it seems quite stable in use. I suspect that they are working to cover a few more remaining components from Uikit 2 (like sideshow) before declaring it out of beta. The remaining components are not ones that we need for either our admin theme or our site profile. Given that, I've been planning to jump back into the AdminThemeUikit project. There doesn't seem like any good reason to wait, and there's plenty of good reasons to move forward. The same goes for our Regular site profile, which is also based on Uikit 3.
This week I pushed an update to AdminThemeUikit which upgrades the Uikit version to beta 30, and also contains several small tweaks and adjustments. We'll work through issue reports in that GitHub repository and begin experimenting with skinning this theme. We're going to start with building a version that feels like part of the AdminThemeReno family.
ProCache 3.1.7 adds support for SCSS and LESS
This new version of ProCache adds support for compilation of SCSS/SASS files and LESS files. Anywhere that you could previously supply a CSS file to ProCache, you can now also supply an SCSS or LESS file, and it will automatically compile it before minifying and merging it. That's all that's necessary to begin using it with ProCache 3.1.7 or newer.
If using ProCache CSS merge/minify, you might be familiar with the
$procache->css() method or the
$procache->link() method. These methods now support SCSS and LESS files in addition to CSS files. The following renders a new CSS file that compiles, merges and minifies a CSS file, SCSS file and LESS file, all into one CSS file:
<?php $files = [ 'styles/a.css', 'styles/b.scss', 'styles/c.less' ]; ?> <link rel="stylesheet" href="<?= $procache->css($files) ?>">
The following renders a single
<link> tag that essentially does the same as the above:
$files = [ 'styles/a.css', 'styles/b.scss', 'styles/c.less', ]; echo $procache->link($files);
When given relative paths (like above) it is assumed relative to /site/templates/. You can supply a full URL if you prefer.
If you aren't using the
$procache API for your CSS files, and instead relying on ProCache to detect them from your stylesheet
<link> tags, you are also in luck. You can simply reference your CSS, SCSS or LESS file directly from the
<link> tags and it will take care of compiling, merging and minifying them for you:
<link rel="stylesheet" href="/site/templates/styles/main.scss">
ProCache detects when your CSS, SCSS or LESS files have changed and then re-compiles them. Furthermore, it detects when any SCSS or LESS files referenced from an
@import statement have changed. So no matter what part of your styles have changed, or no matter what file they are in, ProCache will re-compile them. As a result, you may find the SCSS/LESS support to be quite handy in the development environment too.
This new version is now available for download in the ProCache support board (requires login).
Front-end login, register, profile
What it does
LoginRegister is a new module for ProcessWire 3.x that provides a self contained process for rendering and processing login forms, new user registration forms, new account confirmation by email, and the ability for a registered user to edit their profile… all on the front-end of your site. The module is very simple to use: it does all of this with a single API call.
In addition, you can configure what fields appear on your account registration form and profile edit form, directly from the module configuration screen. It's basically a turn-key system for handling users on the front-end. For those that have more than basic needs, this module also serves as a good proof-of-concept for further development and integration. Though there's a good chance it might already do everything you need.
While I coded this module, the specifications and support for making it happen come from Michael Barón, who also worked with me on the LoginFacebook module (which can be used together with this module as well).
If you've ever had the need to maintain a front-end login form, new user registration, or the ability for users to edit their profile on the front-end, I'd encourage you to give this module a try. I've installed a copy on one of our demo sites if you'd like to try it out.
How it works
What features the module provides are specified from the module configuration screen:
You decide where the module's output should go. The module has a public
execute() method that generates the appropriate output depending on the state of the user. You don't need to do anything other than call this method, and it takes care of the rest:
<?= $modules->get('LoginRegister')->execute() ?>
When presented to a guest user (not logged in) it will display a login form and a registration link. From there, the user can login or register for a new account.
If the user registers for a new account, the account won't actually be created in ProcessWire until the user validates it from an email that is sent to them. They receive a validation code, which can be used as a link from the email, or as a code they paste into the screen that appears after registering for an account. Once validated, the user is automatically logged in to ProcessWire.
New accounts receive the role "login-register", but you can specify different role(s) in the module configuration, should you want to. The module specifically disallows creation of accounts that have admin (page-edit) access, as that would not be safe.
Note: you can style the forms however you want. What's seen above is just the default, and these are just standard Inputfield forms.
If the user is already logged in, they will get a welcome screen giving them options to edit their profile or logout. Of course, you may want to detect
if($user->isLoggedin()) and do something else specific to the needs of your site. For example, you might redirect to a page that is only accessible to logged in users, or perhaps display some content that only a logged in user can see.
Login by name or by email
The LoginRegister module supports using either the user "name" field or the "email" field for registration and login. If you configure it to use email, then the account name will be automatically generated from the email address.
As a matter of security, the module does not allow accounts to be registered with email addresses that already exist, nor will it let a user change their email address to one that is already in the system. If the same email address is already used by more than one account in the system (perhaps from before the module was installed), then the module will not let that account login on the front-end.
If you want to support a “forgot password” feature, install the core ProcessForgotPassword module. Once installed, this module will provide the behavior by way of that module.
This module will likely continue to evolve and expand. The goal is to have a solid, easy-to-use, and secure boilerplate system for providing basic front-end login, registration and profile editing functions. We've got the basics in place and working quite well, and we'll continue to improve upon it. Please let us know how it works for you.
Download and try it out
LoginRegister requires ProcessWire 3.x or newer, and can be downloaded now from the GitHub repository. Consider it beta for now. We'll be adding it to our modules directory soon as well. If you'd like to test it out on the front end, we've installed a copy at the Regular demo site, here.
Thanks for reading! Have a great weekend and enjoy reading the ProcessWire Weekly.
Your e-mail is kept confidential and not included with your comment. Website is optional.