Customising the login pane for Webmin / Virtualmin?

9 posts / 0 new
Last post
#1 Sun, 12/18/2016 - 08:51
ireland

Customising the login pane for Webmin / Virtualmin?

Hi folks,

I'm running WM + VM here and I'm using the Authentic theme globally

I've been hoping to tweak the login pane slightly from the default and while I have added my own logo through the theme configuration within Webmin, I'd like to go a step further and perhaps remove the "Webmin" heading and logo (security by obscurity!) and add some support details also

However, after looking around online and having a dig through the server files here, I'm not making any inroads. All I've managed to ascertain (and I could be wrong here) is that the server calls "session_login.cgi" upon loading the login / logged out pane. My limited knowledge tells me that .CGI is an executable of sorts so I assume that this is calling on other files which makeup the layout and contents of the login pane

Can anyone advise what files I should be looking at to customise the login pane?

Also, if I do customise the pane, I assume any future theme updates will over-ride my customisation?

Thanks,

Conor

Fri, 12/23/2016 - 00:51
Joe
Joe's picture

So, you're right on how things are generated.

Have you already figured out the adding a logo part? That's included as a standard feature in the UI. It acts a little differently in Authentic Theme than in older themes (which used the Webmin standard configuration options for customizing the look and feel, but was limited and very, very old-fashioned). Anyway, you can add logo to either the login page or to the sidebar, or both. Here's a video about it:

https://www.youtube.com/watch?v=kH7LhqdHgRA

Or, if you don't want to invest the time in a video, you can find it in the Theme Configuration (gear icon beside the Authentic version in the sysinfo dashboard) and click "Theme Logos" at the bottom of the theme options. Logo for authenticated users puts it into the sidebar, logo for unauthenticated users puts it on the login page (and maybe some other pages, though I can't think of any user-facing unauthenticated pages at the moment).

To get rid of the Webmin logo, you'd probably need to hit the file directly, I think. But, that shouldn't be necessary. We should ask Ilia to make the login page a wee bit more customizable. Would having this feature about a month from now be too late for your project (that's when our next big Webmin+Virtualmin release is scheduled, and would include a theme update)? If not, we can dig in on how to make a copy of the theme with you customizations (you wouldn't want to edit it directly in the authentic theme directory, as it would get overwritten with every update).

--

Check out the forum guidelines!

Fri, 12/23/2016 - 17:47 (Reply to #3)
ireland

Hi Joe,

Thanks for the comprehensive response

Yes, I'm familiar with managing the logos through the theme settings interface in Webmin and I have a logo added to the login pane and the sidebar. A side note on this - the logo on the sidebar doesn't seem to "stick" to the bottom of the sidebar and sometimes it rides up over the tabs when scrolling the sidebar. This issue seems to be present on both desktop and mobile. It's only an observation for now but I will document it a little better in the coming days

As for further customising the login pane itself - I've been playing around with session_login.cgi located at /usr/share/webmin/authentic-theme and I've very crudely managed to remove the Webmin heading and logo by taking out the block below

print '<i class="wbm-webmin"></i><h2 class="form-signin-heading">
     <span>'
    . (
      &get_product_name() eq 'webmin'
    ? $Atext{'theme_xhred_titles_wm'}
    : $Atext{'theme_xhred_titles_um'}
    ) . '</span></h2>' . "\n";

This works and now the top of the form is the login logo

For asthetics, I removed the "must enter username and password..." text block by removing the line:

print '<p class="form-signin-paragraph">' . &Atext('login_message') . '<strong> ' . $host . '</strong></p>' . "\n";

I'd like to go further and replace the "Login to Webmin" in the browser tab title and then finally add a little blurb about contacting support below the Sign In and Reset buttons. To be honest though, I've no idea what sort of code this is and from studying the file itself, it seems that it even calls for the actual text content that appears from elsewhere - as in the file only contains the calls e.g. "$Atext{'login_warning'}"... the content for 'login_warning' being stored elsewhere I guess. This sort of stuff doesn't suit a cut-&-paste guy like myself :)

As for for adding the functionallity to edit the login pane into Webmin ... this is not in anyway a requirement for me! I'm just playing around here and getting a feel for Webmin at the moment. Yes it would be nice to have some tickboxes and perhaps a field to add some custom text but again... not a show-stopper for me anyways

Sat, 01/07/2017 - 21:03
Joe
Joe's picture

I've filed a ticket for Ilia about adding some customization to the login page here: https://github.com/qooob/authentic-theme/issues/639

And, to answer your question:

$Atext is a localization variable (as is $text). It allows for user-selected language files to be used for the text.

If you are customizing your own theme (e.g. you've copied the Authentic theme to a new directory and have selected it for all of your users), and you don't need to ever provide other languages on that page, you would not need to use those variables, and could insert your preferred text directly. e.g.

print '<p class="form-signin-paragraph">Doot doot, this is my login message! <strong>' . $host . '</strong></p>' . "\n";

That'd work fine. We have to provide localization features, but most web hosting providers probably don't, since most of your customers are probably speaking the same language you are.

--

Check out the forum guidelines!

Sun, 01/08/2017 - 02:35
Ilia
Ilia's picture

[dupe from GitHub]

Hi,

You don't need anything at the moment to make your login screen look completely different.

Theme is fully `hackable`. All you need is to use theme extensions editor for CSS.

This is how you could make Webmin Logo and its text from not showing:


.session_login form[method="post"] > i,
.session_login form[method="post"] > i + h2 {
display:none;
}

You can even change the look of login screen utterly. (I noticed that custom scripts (extensions: js) are not embedded for login page. That will be fixed.)

In the future, I hope, I will be able to find time to make selectable skins for login page.

Ilia

Sun, 01/08/2017 - 02:52
Ilia
Ilia's picture

..and one more.

If you want to override the default text labels, first of all - find the desired key in lang file of the module/theme.

Let's say that you want to change word Webmin on login page of Authentic Theme from Webmin to Supermin, then we take theme_xhred_titles_wm=Webmin from /usr/(libexec|share)/webmin/authentic-theme/lang/en.UTF8.

Later, create custom-lang file in configuration directory /etc/webmin/authentic-theme of the theme. (or other module if you want to tweak that)

To see what I mean just run on the console the following:

echo "theme_xhred_titles_wm=Supermin" > /etc/webmin/authentic-theme/custom-lang

This kind of customization will survive updates and you would need to do it only once.

Good luck ;)

Ilia

Mon, 01/09/2017 - 02:57
ireland

Thanks Joe and Ilia for taking a lead on this

I'll hopefully get back to the login form in a few days as busy with site related stuff at the moment. I did notice however that the changes I had made to the login form were - as expected - cleared when I updated Webmin just now so I'll revisit and hopefully do something that'll stick

I note the method Joe mentions about taking a copy of the Authentic theme and making this my own, customised theme. This I can do but I'll need to figure out a procedure for applying updates to the original Authentic theme onto my own copy, while maintaining my changes

Thanks again folks and as before, unless others here are requesting the feature to change the login form, I wouldn't expend any great effort getting it added to Webmin. I've no doubt that there is a list of feature requests that have a much higher priority than this

Keep up the great work :)

Wed, 05/03/2017 - 03:01
volk

If you are doing this for security reasons you may also change the default port, as anyone will figure out its Virtualmin otherwise. Not that it really means something as fingerprinting the server is still possible but I suspect you just want to do this for the regular users (branding?)

Mon, 06/24/2019 - 08:31
Riv33bx

For the login page, according to /usr/share/webmin/authentic-theme/authentic-lib.pm (line 1740) , the translation text variable is session_header ( my $title = $text{'session_header'}; ) , so it should be overriden by custom-lang as described in this thread.

Cheers.

Topic locked