Looking to have a minor release done on 4 so to make the CMS branding changes available, please!

https://projects.invisionapp.com/share/3PNSKZQYBJZ#/screens/321188003_CMS_-_Login_-_Start

Utilise the existing login form template

We could expect some sites to have multiple authenticators (like an optional RealMe login). We should confirm that the styling presented by login-forms is adequate and allows a developer to alter this according to their requirements.

ACs

• With login-forms installed alongside another login module (like RealMe), both login forms are available for use.
• The styling appears professional.

If a user account is created without permissions to access CMS (e.g. added to admin group), user ends up seeing an unstyled UI after submitting login details

This module is a requirement of the MFA module, but may not always be desired, particularly in existing sites, so we should build config to turn it off.

This is particularly relevant to https://github.com/silverstripe/cwp/issues/258 where for those who want to opt-out, we're likely to reference YAML config available to by-pass MFA functionality, but the site would still include the login-forms functionality.

When e.g. requesting a password reset email, the content about an email having been sent is inserted to the template via $Message $Content as opposed to $Form - which the templates currently do not allow for. This means that a user ends up staring at the site Title, and nothing more.

This is not the only flow to follow this pattern - e.g. the change password form has introductory text in the $Message $Content

Using 4.4.1 with SilverStripe 4.8.0

On Firefox and Chrome, the 'Log in' button and 'I've lost my password' link are often, but not always, moving outside of the form box, overlapping with the silverstripe logo. The same thing happens on the Lost Password form. This seems to happen when the page is first accessed, but goes away if the page is refreshed.

The .form class is set to height: 100% but with login-form__header and login-form__message above the form itself this pushes the bottom of the form off the end of the login-form.

The following two rules need a third applied also: .message.validation

When e.g. the "forgot password" form is filled in and submitted as "admin" the validation error comes back about it not being a valid email address (which is correct), however this is not shown as a validation error style (red text) in line with other error messages on the forms.

Note: In order to recreate this one must first remove required="required" via the browser dev tools.

On some resolution the last "S" in the "Silverstripe CMS" logo gets clippe in firefox. If you resize your Firefox window, the the logo gets re-rendered.

Chrome seems fin all the time.

I'm thinking we might just need to increase the viewbox for that SVG

Pull request

• #83

Hi, Thank you for all the hard work!

Sorry this is a question and not an issue as such.

Can I use this to redirect a successful login to the websites HomePage.php and not the CMS?
I need a login form for the front-end not the backend.

I hope that makes sense

Hi there,

Where should I put Security.ss if I want to override it?
I've tried
<mythemename>/templates/Security.ss
But that does not work.
I've also tried
<rootdir>/app/templates/Security.ss
No luck

Sorry, this is more a question than a issue
Thanks for your time

Affected Version

4.8.0

Description

When using the module silverstripe-mfa I noticed that the translations never kicked in though they were present.
After searching how these would kick in I noticed that the lang attribute on the html was still empty.
This results from the Security class extending the Controller class instead of the ContentController which has the required method ContentLocale

As a temporary fix i've now added the method to the Security trough the following extension:

class SecurityExtension extends Extension
{
    public function ContentLocale()
    {
        $locale = i18n::get_locale();
        return i18n::convert_rfc1766($locale);
    }
}

I don't know if it is possible or what the impact would be of extending Security on ContentController. Otherwist a ContentLocale method should be added to Security. Or the method should be moved from ContentController to the more global Controller class.

PR

• silverstripe/silverstripe-framework#10081
• #101

in dark mode the login form styling is light text on dark background, however this isn't the case for the help box

Pull request

• #98

The logo currently in place is a non-retina PNG, which appears blurry on higher resolution devices. We should replace this with an SVG in order for it to render accurately at all resolutions.

Once feature work is finished on this repository and signed off, we should add this to the supported modules list.

• Add to https://www.silverstripe.org/software/addons/silverstripe-commercially-supported-module-list site
• Add to supported-modules repo

The login form looks somewhat different when accessing via a subsite.

Subsite

Main site

Common template variables like $URLSegment or $ClassName are empty on the /Security/login page.

Currently we include the site name on the login form. It would be great to having optional but simple configuration for adding a website logo to the screen also.

https://projects.invisionapp.com/share/3PNSKZQYBJZ#/screens/322769156

Notes:

• Only styling covered in this issue
• Browser support information would be pulled from firesphere/bootstrapmfa

If a member has been locked out as a result of failed login attempts, the email and password input fields should be disabled to make the lockout obvious.

Note

• I've opted to raise here instead of in silverstripe/admin, as the hope is this module code will eventually make it to core

Given this is primarily a front-end facing module, it would be nice to include screenshots in the readme so it's easy to see what the module does.

In SilverStripe 4 we can use Bootstrap styles since they're already in the silverstripe/admin CSS bundle, which you'd be downloading in the browser by using the CMS anyway, so there's no extra overhead there.

In 3.x we'd need to include it with login-forms, but that's OK IMO.

Pros:

• Consistency with admin design patterns
• Consistency with admin colours
• No custom CSS

Cons:

• Larger bundle for SS3

Hi,

I have the problem that i must have different login styles for different subsites. So i can set the config globally with "login_themes" but i can't set a theme by default and a login theme for a subsite.

As possible workaround i've added some lines of code to add the subsite theme priority.

I'm not sure if there would be a better workaround to get this problem done.

Take a look at the line beginning with "if (class_exists(Subsite::class) === true) {", there are the lines which i would change/add:

    public function beforeCallActionHandler()
    {
        $config = Config::inst();
        /** @var Security $owner */
        $owner = $this->getOwner();
        $action = $owner->getAction();
        $allowedActions = $config->get(Security::class, 'allowed_actions');
        $excludedActions = $config->get(self::class, 'excluded_actions');
        $themeActions = array_diff($allowedActions ?? [], $excludedActions);
        if (in_array($action, $themeActions ?? [])) {
            if (class_exists(Subsite::class) === true) {
                $themes = $config->get(self::class, 'login_themes');

                array_unshift($themes, Subsite::currentSubsite()->Theme);

                SSViewer::set_themes($themes);
            } else {
                SSViewer::set_themes($config->get(self::class, 'login_themes'));
            }
        }
        $this->defaultPageClass = $config->get(Security::class, 'page_class');
        Config::modify()->remove(Security::class, 'page_class');
    }

If this workaround will be approved by you i also can make a pull request :)

Better ideas are welcome :) :)

Scrutinizer has been enabled for this repository - see https://scrutinizer-ci.com/g/silverstripe/silverstripe-login-forms/ -, however it needs to be configured correctly.

I added .scrutinizer.yml in #10 (not yet merged at the time of writing) to allow us to update the configuration. Unfortunately, I don't know how to enable yarn properly.

The Scrutinizer documentation suggests using their GUI, but unfortunately I do not have access permissions.

• We'll need to take the admin CSS out (for SS4) and replace with bootstrap - but only what we need, e.g buttons, etc
• Move templates

The new prefers-color-scheme media query has shipped in Safari, with other browsers to follow in the near future. While creating a dark mode for the CMS itself is a significant undertaking that likely won't see the light of day for a while, implementing one for the login UI is a quick win and a good place to start.

Hey team,

Including requirements in the PageController init function causes an error when trying to load the login form:
e.g.

protected function init()
{
    parent::init();
    Requirements::themedJavascript('dist/app');
}

Causes the following:

[Emergency] Uncaught InvalidArgumentException: The javascript file doesn't exist. Please check if the file dist/app.js exists in any context or search for themedJavascript references calling this file in your templates

You can work around this by setting the LoginForms login_theme in your config.yml:

SilverStripe\LoginForms\EnablerExtension:
  login_themes:
    - app

The login form should be completely isolated from any theme or external Controller, so the fix could probably be to stop it from even calling PageController::init().

Implementation notes

• We'll be looking to proceed along the lines of @Cheddam's recommendations: #44 (comment)
• This issue will focus on resolving it for v4 only.

Pull requests

• #70

We have new designs and configuration to apply to this module, which are currently in PR. This issue covers the remaining work to get these merged.

While I do appreciate the extra effort that has been made to add dark mode to this module. I find it quite a jarring experience when neither the website or CMS support dark mode, as you end up with a login screen which looks completely different to both.

I'd like to be able to easily disable/enable the dark mode feature so that if the website supports it (or already uses dark styles) I can enable it, and for sites that don't, leave it disabled for a consistent experience from site to CMS.

Once the CMS support dark mode, then it would make sense for it to be enabled by default (by that I mean if the user has dark mode enabled, then display the dark theme).

https://projects.invisionapp.com/share/3PNSKZQYBJZ#/screens/321189816

ACs:

• Styling as per wireframe
• User has the ability to 'Set up later' (whether MFA is mandatory or not)
• 'Set up later' links to CMS
• User will not be presented with this screen again when it is not mandatory
• 'Set up later' link is hidden when MFA is mandatory and the grace period has ended

Notes:

• 'Find out more' link should direct to user docs. Use placeholder link for now.
• Setup later link invokes the bootstrapmfa skip functionality
• Exposing the grace period has been split to #8

When following the instructions in the docs to add a custom logo, the current layout styles are not very accommodating to different logo sizes or proportions resulting in the logo often displaying badly and requiring manual CSS adjustments in order to make it work.

Can I suggest adjusting the layout styles to set maximum widths and heights for any logo image, and to also automatically adjust the height of the logo grid cell appropriately, rather than setting it to fixed height in a CSS variable? This would then allow developers to much more easily add a custom logo.

e.g. currently, you end up with something like this:

But if we set the height of the cell to auto instead of calc(var(--sizing-app-brand-height) + (var(--spacing-app-brand) * 2)) and set the max-width and max-height of any logo image something like 300px and 150px, we get this:

This same CSS works with other logo shapes without any adjustment required, e.g.:

This would also make it possible to make the logo URL a simple config option, rather than requiring a template override.

Or have I missed something? Is there a particular reason it has been done the way it has?

I have

Silverstripe\Security\Security:
default_login_dest: '/home'

in my config.yml and it was working before but now it's not.
Basically I've want 'administator' users to go to admin/pages like normal and then users that belong to another group to go to /home (front-end users). I hope that makes sense.
Thank you for your time

When changing my temporary password set by my admin when first logging in, from mfaDemo2019 to Hellodemo@2019, I get an error saying to add an Uppercase and punctuation to my password.

Maybe it's too similar to the previous password?

View issue: http://app.toyboxsystems.com/magic/qtfyB2jxqVYT

Update: this issue occurs for new users that are required to change their passwords on Cluster2-uat as well

As a CMS user who has not yet set up MFA, I want to see how much time is remaining with the grace period, so that I know how much time is remaining before I cannot skip setup.

ACs

• If MFA is mandatory, the the grace period is exposed to the user on the initial Get Started MFA screen

Following the latest release of this module, there's been enough feedback come through that the 'Need help' link built into the template won't always be helpful.

Where projects use the login form for non-CMS members to authenticate, it is of no relevance to them to display a help link to the CMS Userhelp guides.

Options have been discussed to make the help link configurable depending on whether the developer wants to point the user to either the CMS Userhelp or some other support source, but this is unlikely to be top of mind to update and ultimately, providing help links for a login screen provides limited value.

This issue proposes the 'Need help' link is removed completely.

PRs

• #95

Replication steps:

• Change your site title to something very long
• Logout and access the login screen

Expected results: The site title on the login screen get broken into many lines
Actual results: The site title is displayed over one line and the login form wrapper expand to be the same width as the title

https://projects.invisionapp.com/share/3PNSKZQYBJZ#/screens/321189815

This issue is to build the template only.

ACs:

• There is a selected state for verification methods
• Authentication methods are displayed for selection as defined in firesphere/bootstrapmfa
• The template has an area to display information on the authentication methods (including 'Find out more' link) which will be surfaced from the authentication modules
• The 'Next' button is disabled until a selection is made

The 'lost password' email is another thing often forgets to have styling applied.

It would be great if this module provided a nice lost password email too, and any other emails that are generated by default by our login system.

Up to date DSM link: https://projects.invisionapp.com/dsm/silver-stripe/silver-stripe/section/components/5b9ef26205bd76001ba35b4d

Utilises existing forgot password form.

Overview

A new help icon and tooltip test was recently added to support users in using the 'keep me signed in' feature.

See: #86

The wording added to this tooltip makes mention that "Authenticated devices can be managed in your profile.". This text will not always be accurate to a project with this module installed, as that functionality also relies on having another module installed (silverstripe/session-manager).

This wording needs to be updated to meet all use cases. At the same time, feedback from @clarkepaul on the original pull request was that a popover would provide a better UX over a tooltip. This issue can focus on that too.

Use this design as a reference for following tasks.

So, to do:

1. Replace tooltip with a popover
2. Update the wording to remove reference to "Authenticated devices can be managed in your profile."

Acceptance Criteria

• The tooltip functionality is removed and replaced with a popover
• The popover is called when the icon is clicked
• Clicking outside of the popover will close it
• The popover and checkbox wording is updated to meet the following designs (also linked above)
• Tabbing functionality can be used on the ? icon to trigger the popover
• The "Need help?" link should align with the bottom of the Login title

PRs

• #91
• silverstripe/silverstripe-framework#9918

Messages added to the login form with the Security::setSessionMessage API are not showing on the new login forms.

Looking into the code these session messages are added to the $Content template variable but that's omitted from the template we provide:

This should be added. We can also improve upon the existing form my using $Message instead and using the $MessageType template variable to accommodate nicer contextual styling:

https://github.com/silverstripe/silverstripe-framework/blob/f842ee2eec984002fce944157837251fea193b20/src/Security/Security.php#L941-L948

https://github.com/silverstripe/silverstripe-framework/blob/6e589aac7598878d60490a390537c4a12c24f619/src/ORM/ValidationResult.php#L22-L40

Should use new Silverstripe CMS logo: https://www.silverstripe.org/blog/new-silverstripe-logos-and-brand-family/

impact/critical

With #93 closed, we should do a new module release to make this change available.

ERROR [Emergency]: Uncaught InvalidArgumentException: Can't find module 'silverstripe/login-forms', the composer.json file may be missing from the modules installation directory
IN GET dev/build
Line 106 in vendor/silverstripe/framework/src/Core/Manifest/ModuleResourceLoader.php

I get this error after removing the module in composer and running dev/build

I've tried removing the composer.lock and regenerating but same issue.

Does this module do something somewhere that is irreversible?

At the moment, there is this line in the template

which means the default template doesn't work without the silverstripe/admin module. Since it isn't specified in the composer.json file, I think it would be nice if these styles were made optional. I've removed that line and it doesn't seem to have much impact anyway on the layout.

I guess in a recent release some code has changed. In the documentation you say we can disable dark mode by using:

Requirements::block("silverstripe/login-forms: client/dist/styles/darkmode.css");

but it looks like all the CSS has been combined in the bundle.css file.

Any updates on this issue?