Custom login page

Universal Dashboard
1

@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)

2

Another use case could be a custom OpenStack dashboard.

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

3

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

4

@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

5

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.

6

@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

grafik
grafik2540Ă—1260 128 KB

Thanks

1 Like
7

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

8

@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'
}
9

Hi @adam,
I wanted to just re-rais this topic and ask if there is an update on this?
The main desired feature is: add a custom script logic for the login form.
E.g. login with an API key or Google Authenticator code.
Or an advanced use case: have a dropdown in order to select the login type (basic username password/api key/AD domain login/…)

10

I put this into the issue tracker so we can track it easier: Custom Login Logic · Issue #1469 · ironmansoftware/issues · GitHub

1 Like
11

Hi @adam,
Is there any chance this will be implemented in 3.4.0? :slight_smile:

12

Hey @augustin.ziegler im back using this product. Maybe we could team up again and find a component to build to solve this issue?

1 Like
13

Hi @psDevUK :slight_smile: would be great to work on a new component together again. :slight_smile:
But in this case its not about a new component, in my opinion or as far as I am thinking about this feature. Its more a change in the core of the login form.
I was thinking about a “login_form.ps1” in order to adjust the login form using any kind of component.
And the login is success or fails if the return value is $true or $false (just a short brain storming)

14

But there must be any kind of fallback, as if the developed “login form” is not working while developing it - you will lockout yourself :wink:

15

happy to look into this more, hopefully will be using this product myself for these type of issues, so happy to team up as mentioned :slight_smile:

1 Like