TL;DR
This feature automatically logs in a user who checks the "remember me" box at login. It has been implemented in Dotkernel Frontend starting from Release 3.3.0, and requires changes across the login form, a new entity/migration, a new middleware, config, and the user service/repository/controller.
Add remember me button to user interface
Navigate to src/User/templates/user/login.html.twig and, under the password element, add:
<div class="checkbox remember-me-checkbox">
{% set rememberMe = form.get('rememberMe') %}
{{ formElement(rememberMe) }}
<p>Remember me</p>
</div>
Then navigate to src/User/src/Form/LoginForm.php and add the following element to your form:
$this->add([
'name' => 'rememberMe',
'type' => 'checkbox',
'attributes' => [
'class' => 'tooltips',
'data-toggle' => 'tooltip',
'title' => 'Remember me',
],
]);
Then navigate to src/User/src/InputFilter/LoginInputFilter.php and add a filter for the new element:
$this->add([
'name' => 'rememberMe',
'filters' => [
['name' => 'StringTrim']
],
'validators' => [
[
'name' => 'NotEmpty',
'break_chain_on_failure' => true,
]
]
]);
To style the button, navigate to src/App/assets/scss/components/_profile.scss and add:
.remember-me-checkbox {
input {
display: block;
float: left;
margin: 4px 6px 10px 0;
width: auto;
height: auto;
}
}
After making the changes, compile the CSS so the button styling takes effect:
npm run prod
Add functionality to remember me button
- Navigate to
src/User/src/Entity, create a new entity namedUserRememberMe.php, modeled on UserRememberMe. - Create a migration file for the new table:
vendor/bin/phinx create --configuration=config/migrations.php RememberUserSchema - Modify the generated migration file as in user_remember_schema, then run it against the database:
The table generated by the migration is used to store data from the cookie, which helps log the user in automatically.vendor/bin/phinx migrate --configuration=config/migrations.php - Create a new middleware at
src/App/src/Middleware/RememberMeMiddleware.php, modeled on RememberMeMiddleware. - Register the middleware in
config/pipeline.phpas shown in pipeline. - To generate the cookie, add a new key to
config/autoload/local.php:'rememberMe' => [ 'cookie' => [ 'name' => 'rememberMe', 'lifetime' => 3600 * 24 * 30, 'samesite' => 'Lax', 'secure' => false, 'httponly' => true ] ], - Edit
src/User/src/Service/UserService.php: add two new properties,$defaultSessionManager(to get config) and$repository(to get repository), then add the methodsgetRepository(),addRememberMeToken(),deleteRememberMeCookie()as in UserService (and add the new methods to the interface if needed). - Edit
src/User/src/Repository/UserRepository.phpand add the methodssaveRememberUser(),getRememberUser(),findRememberMeUser(),deleteExpiredCookies(),removeRememberUser()as in UserRepository. - Edit
src/User/src/Controller/UserController.php: add a new property called$config, and editloginAction()andlogoutAction()as in UserController.
Frequently Asked Questions
Since which release is Remember Me implemented in Dotkernel? +
It's implemented in Dotkernel Frontend starting from Release 3.3.0.
How do you add the Remember Me checkbox to the login UI? +
In src/User/templates/user/login.html.twig, under the password element, render the rememberMe element retrieved via form.get('rememberMe') with formElement().
What form and validation changes are needed? +
A 'rememberMe' checkbox element must be added to src/User/src/Form/LoginForm.php, and a StringTrim filter plus a NotEmpty validator must be added for it in src/User/src/InputFilter/LoginInputFilter.php.
What backend pieces implement the actual remember-me functionality? +
A new UserRememberMe entity, a database migration (created and run with phinx) for its table, a new RememberMeMiddleware registered in config/pipeline.php, a rememberMe cookie configuration block added to config/autoload/local.php, and new methods added to UserService, UserRepository, and UserController (including loginAction() and logoutAction()).
What does the UserRememberMe table store? +
It's used to store data from the cookie, which helps log the user in automatically.
How do you apply the new remember-me button styles? +
Add the CSS to src/App/assets/scss/components/_profile.scss, then run npm run prod to compile the CSS so the button styling takes effect.