PrevProcessWire 3.0.75 and a new version of ProDrafts
A new version of ProcessWire on the dev branch, and a new version of ProDrafts that adds repeater support and workflow support. More
ProcessWire 3.0.76
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.
Module updates
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.
Account registration
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.
Existing accounts
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.
Forgot password
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.
Going forward
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.
Comments
NextUikit 3 admin theme updates
This week we've got another update to the new Uikit 3 based admin theme, AdminThemeUikit. It now has the flavor of Tom Reno's fantastic AdminThemeReno, and we think you'll like the result. In this post we take a closer look with screenshots and more. More
jacmaes
- 7 years ago
- 212
★★★★★A million thanks for the login/register module. I’ve had the need for it for many years, yet never felt totally sure that what I had coded (with great help from the forum) was secure, best practice and user-friendly enough. This made my day –no, wait, my week.
Reply
ryan
The module lets you toggle whatever features you want, and place your login form wherever you want. The output is displayed with an API call, which you can place on a page of your choice (hidden or otherwise). If you find the module doesn't do exactly what you need from the get-go, be sure to have a look at all the hooks it includes In addition, it's designed to be extended or modified. For some it will be a turnkey solution, for others it'll be a good starting point for further modification.
Reply
szabesz
I see! Thanks for pointing it out, I will definitely give it a try. As the module is hookable I will probably be hooked to it as well :)
Reply
Chria
- 7 years ago
- 110
★★★★★Amazing addition Ryan. Things just keeo getting better and better
Reply
ryan
The support in ProCache probably isn't going to replace your custom development setup that you've fine tuned specifically to your needs. I think it's going to be more useful to people that may not already be maintaining an custom environment for it, or may want a common setup between servers that has no external dependencies. For instance, it's pretty darn useful if you need to make a quick fix to something and you can just edit the file, make an SCSS adjustment and know that it will be detected and re-compiled automatically without you having to do anything else. No need to fire up the IDE or maintain any background tasks or watchers, etc. It benefits from the fact that ProCache is already watching your CSS (SCSS/LESS) files to determine when things need to be re-merged and minified. However, you can tweak and customize more if you are maintaining your own compilation setup like you might be doing with Gulp. In your case, chances are you'll want to keep using the environment/setup that you already are.
The intention with the SCSS/LESS compilers in ProCache are to have something self contained with no external dependencies. As far as I can tell Autoprefixer and UnCSS are external dependencies you'd install with npm, and probably outside the scope of what ProCache could add. Though if there were PHP-based versions of those tools then we could. I can look if there are ways we could provide hooks for such things.
Reply
Nils
Hi Ryan,
Thanks for further explaining the approach for SCCS/LESS support in ProCache! I see that implementing specific frontend workflows into ProCache might be out of scope.
But maybe, in the long run, a routine that checks the rendered HTML files and removes unused CSS from the stylesheets could fit quite well to ProCache, since it could further strip down the CSS file size. However, coming from the frontend world, I have no idea how complicated such a feature would be and if there are any PHP-based solutions. But if you also think an UnCSS-like filter is a feature worth thinking about for ProCache, I can also do some research on that topic…
Reply
Mustafa Onlin
- 7 years ago
- 71
★★★★★Login/Register Module, I love this
Reply
Rafa?
- 7 years ago
- 30
★★★★★Great thanks for these new features ...
It was a missing piece of the big Processwire ...
Reply
szabesz
- 7 years ago
- 30
★★★★★Thanks a lot Ryan!
I already have a feature request :) I'm working on a site which supports private membership only, so a prominent public registration form does not really fit the bill, except if it can be "hidden" somehow. Meaning it would be great to be able to (optionally) render the login form without the "Register for an account" link, and only the site administrator should be able to provide the actual link of the registration form (by manually sending it via email, for example). B2B wholesale webshops often need something like this too.
Reply
Nils
Sass support in ProCache — that sounds amazing and should make it very easy to drop in and compile just the specific Sass components a subpage needs (and not the complete compiled CSS file).
I usually use some Gulp plug-ins during Sass compilation, especially Autoprefixer and UnCSS (to detect & delete unused CSS rules). Will anything like that be supported in ProCache or can I add it manually?
Reply
pwFoo
- 7 years ago
- 20
★★★★★Frontend register / login module! :) Awesome. No need to rewrite / maintain my custom module anymore.
I'll take a look later about hook / extent it.
Reply
Marcel
- 7 years ago
- 30
★★★★★Thank you very, very much. That's exactly what i need for a next project. You guys are awesome. To handle modern, individual Webprojects with Processwire makes simply fun!
Reply
Paul Carnevale
- 7 years ago
- 50
★★★★★This CMS is such a breath of fresh air. So simple to learn and use. Thank you for the fantastic product!
Reply
Horst
Thanks a lot Ryan! Exactly what I need too for a Project right now.
Rock'n Roll!
Reply
Noel
Just amazed at how much you code, the quality and the articles you write. To me it's kind of a mystery (in part) why PW is not wider known! Thank you so much, it's pure joy to work with PW and the modules there are!
Reply