Custom login page

@adam

what do you think about custom login page + authentication method.

This need came to my mind because I have one project running which is an JSON REST API + coresponding Powershell module.
The authentication just needs an server URI and the API Key in order to use the related Powershell module login function.
For this reason it would be great to have a custom login form (own designed) - in my case ServerUri dropdown + APIKey textfield.
This information will be passed to the UDAuthenticationMethod as raw object after pressing the login button - the validation can be done in the function itself as it is currently for forms (https://docs.universaldashboard.io/security/authentication/forms)

Another use case could be a custom OpenStack dashboard.

For the login define username + password + domain (select) + project (select)

I think this is a great idea. The login page hasn’t gotten much love in a while and maybe it’s time to fix that . :wink:

We actually have a GitHub issue tracking this so I’d love for you to chime in and add some details on what you’d like see: https://github.com/ironmansoftware/universal-dashboard/issues/1335

@adam or anyone else who has an idea:

I still have a short question about adjustments to the login page.

I know that you want to offer the possibility with 2.9 to use css classes for customizing the login page, you wrote that in my Github Issue or the login button. (https://github.com/ironmansoftware/universal-dashboard/issues/1479#issuecomment-581619904)
Is there a way to customize the login page as of now? For example with a background image instead of the background color? Or is it generally possible to adjust more content on the login page than the current parameters allow?
I need to implement the corporate design of our company in the dashboard(s) and this is currently possible with the standard options for the login background and the login form, but this is not sufficient (and very limited) for our marketing and corporate design collegues ;-).

I will also write some desires in the open Github Issue (for example a login page background image).

Thanks

It’s really not possible at the moment. You might be able to adjust the background image through CSS but I haven’t done so myself. I can ensure that the GH issue gets implemented in 2.9.

@adam
I just downloaded and tested the 2.9.0, what is the name of the defined theme property for the login form?

I could use the class div .card .card-content or div .card .card-action, but of course this also has effects on all other UDCards.

ThemeService.cs

Are the options for Login-Page and Login-Card missing here?

_cssMap.Add("udcard", ToClasses(".ud-card"));
_cssMap.Add("udchart", ToClasses(".ud-chart"));
_cssMap.Add("udcollapsible", ToClasses(".ud-collapsible"));
_cssMap.Add("udcollapsibleitem", ToClasses(".ud-collapsible-item"));
_cssMap.Add("udcolumn", ToClasses(".ud-column"));
_cssMap.Add("udcounter", ToClasses(".ud-counter"));
_cssMap.Add("uddashboard", ToClasses(".ud-dashboard"));
_cssMap.Add("udfooter", ToClasses(".ud-footer"));
_cssMap.Add("udgrid", ToClasses(".ud-grid"));
_cssMap.Add("udimage", ToClasses(".ud-image"));
_cssMap.Add("udinput", ToClasses(".ud-input", ".datepicker-table td.is-today", ".datepicker-table td.is-selected", ".datepicker-date-display", ".datepicker-modal", ".datepicker-controls", ".datepicker-done", ".datepicker-cancel"));
_cssMap.Add("udlink", ToClasses(".ud-link"));
_cssMap.Add("udmonitor", ToClasses(".ud-monitor"));
_cssMap.Add("udnavbar", ToClasses(".ud-navbar"));
_cssMap.Add("udpagenavigation", ToClasses(".ud-page-navigation"));
_cssMap.Add("udrow", ToClasses(".ud-row"));
_cssMap.Add("udtable", ToClasses(".ud-table"));
_cssMap.Add("udtabs", ToClasses("nav.mdc-tab-bar", ".mdc-tab-bar"));
_cssMap.Add("udtab", ToClasses(".mdc-tab.mdc-tab__text-label"));
_cssMap.Add("udtabactive", ToClasses("button.mdc-tab--active.mdc-ripple-upgraded.mdc-ripple-upgraded--background-focused.mdc-tab--active.mdc-tab", "button.mdc-tab--active.mdc-ripple-upgraded.mdc-tab--active.mdc-tab > div.mdc-tab__content > span", "button.mdc-tab--active.mdc-ripple-upgraded.mdc-tab--active.mdc-tab"));
_cssMap.Add("udtabindicator", ToClasses(".mdc-tab-indicator--active .mdc-tab-indicator__content"));
_cssMap.Add("udtabicon", ToClasses(".mdc-tab.mdc-tab__icon"));
_cssMap.Add("udtabactiveicon", ToClasses("button.mdc-tab--active.mdc-ripple-upgraded.mdc-tab--active.mdc-tab > div.mdc-tab__content > i", ".mdc-tab .mdc-tab__icon"));
_cssMap.Add("udimagecarouselindicator", ToClasses(".slider .indicators .indicator-item", ".slider .indicators .indicator-item.active"));
_cssMap.Add("udimagecarouselindicatoractive", ToClasses(".slider .indicators .indicator-item.active"));

Edit:

I have changed the font color, background-color and hover color “for” the login form using the .card .card-content and .card .card-action classes (see first screenshot) (And also the input field border-bottom). This works, but unfortunately it also changes all other UDCards inside my dashboard, see second screenshot as example.

login_ud_forum

Thanks

1 Like

Hello, how do you customize your login page? What parameters in CSS code did you change?
Thank you!

@devon.ziemer

At the moment i am using a mix of css code and the parameters of the New-UDLoginPage. Raw CSS is not working for me.
I have not taken a closer look at it for time reasons and because it works like this at the moment.

New-UDLoginPage:

The content of the variables are located in a config file that get’s imported on startup.

# Create the UDLoginPAge with Colors, Logo, and Authentication + Authorization method
$LoginPage = New-UDLoginPage -AuthenticationMethod $AuthenticationMethod `
  -Logo $logo `
  -PageBackgroundColor $Cache:Config.Theme.LoginBGColor `
  -Title $Cache:Config.Theme.LoginTitle `
  -WelcomeText $Cache:Config.Theme.WelcomeText `
  -LoadingText $Cache:Config.Theme.LoginLoadingText `
  -AuthorizationPolicy $AuthorizationPolicies `
  -LoginFormBackgroundColor $Cache:Config.Theme.LoginFormBGColor `
  -LoginFormFontColor $Cache:Config.Theme.LoginFormFontColor `
  -LoginButtonBackgroundColor $Cache:Config.Theme.LoginButtonBGColor `
  -LoginButtonFontColor $Cache:Config.Theme.LoginButtonFontColor

CSS:

I hope this part is the whole part that is also responsible for some parts of the login-page.
If that is not enough for you, I can take a closer look at it
Be Aware! This will also customize your other dashboard components like buttons, input-fields, cards, etc.

# Buttons - Hover, Focus, Background and FontColor in all situations
'.btn' = @{
        'background-color' = '#b5b6b7'
        color              = '#1c1c1c'
}
'.btn:hover' = @{
        'background-color' = '#b5b6b7'
        color              = '#e3000f'
}
'.btn-flat:hover' = @{
        color = '#e3000f !important'
}
'.btn-flat' = @{
        color = '#003452'
}
'.btn-floating:focus, .btn-large:focus, .btn-small:focus, .btn:focus' = @{
        'background-color' = '#b5b6b7'
}
'button:focus' = @{
        'background-color' = '#FFFFFF'
        color              = '#e3000f'
}
# Override Card-action styles also used on login page
'div .card .card-action' = @{
        color = '#FFFFFF !important'
}
'div .card .card-action a:hover' = @{
        color = '#e3000f !important'
}
# Override placeholder color for better readability on a mix of dark and light backgrounds
'::placeholder' = @{
        color = '#b5b6b7'
}
# Textbox text color and 'underline' color before clicking
'.input-field > [type = text]' = @{
        color          = 'white'
        'border-color' = 'white'
}
# Textbox 'underline' color after clicking - Also used on login page
'.input-field > [type = text]::focus' = @{
        'border-color' = '#e3000f'
}
'.input-field .prefix.active' = @{
        color = '#e3000f'
}