Custom login page

furman12 · February 08, 2010, 11:20:57 AM

Hey,
I want make my own login page,
I found only this in skins/default/templates/login.html, but it isn't normal form. Can u help me with creating login page?
I want to delete server form and add my own<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><roundcube:object name="pagetitle" /></title>
<meta name="Robots" content="noindex,nofollow" />
<roundcube:include file="/includes/links.html" />
</head>
<body>

<img src="/images/roundcube_logo.png" border="0" alt="<roundcube:object name='productname' />" style="margin:0 11px" />

<roundcube:object name="message" id="message" />

<div id="login-form">
<div class="boxtitle"><roundcube:label name="welcome" /></div>
<div class="boxcontent">

<form name="form" action="./" method="post">
<roundcube:object name="loginform" form="form" autocomplete="off" />

<p style="text-align:center;"><input type="submit" class="button mainaction" value="<roundcube:label name='login' />" /></p>

</form>
</div>
</div>

</body>
</html>

SKaero · February 08, 2010, 11:43:05 AM

RoundCube generates the login forum, you should be able to fully edit it useing css, if you want to create a forum to login to RoundCube from else where try using the Autologin plugin Plugin_Repository ? Roundcube Webmail

furman12 · February 27, 2010, 06:42:12 AM

I found this:// add host selection row
        if (is_object($input_host)) {
            $table->add('title', html::label('rcmloginhost', Q(rcube_label('server'))));
            $table->add(null, $input_host->show(get_input_value('_host', RCUBE_INPUT_POST)));
        }

How to change it to html option = host.com

Login = $_POST['1']."@".$_POST['2'];
and host = $_POST['2'];

Tomasci · January 30, 2016, 05:51:47 AM

Hello,

I would also like to make a custom login page. But I want to change the login form that is generated.
I do not want to use labels, but placeholders, like you can see in the attachment.

How can I change this?

Thank you

SKaero · January 30, 2016, 06:28:09 AM

What you want to do is unfortunately not simple. The only way I can think to do it without modifying core files is creating a javascript file that adds the placeholder text to the input fields.

Tomasci · January 30, 2016, 06:45:34 AM

Hi, thank you for assistance.

So I will have to include a new js file <roundcube:include file="/includes/newfile.js"> ?
I understand correct?

But what to put in that file? I am newbie to coding, only got basics CSS and HTML right now.

Would it be something like this?

Code Select


<script>
document.getElementById("rcmloginuser").placeholder = "Name";
document.getElementById("rcmloginpwd").placeholder = "Password";
</script>

Everything else is css..

Thanks again!

SKaero · January 30, 2016, 07:42:17 AM

Thats about right, you don't need the script tags in the js file and you probably want to make sure the dom is ready before you try to add the placeholder. Roundcube has jQuery so you should be able do it with the following:

Code Select


$(function() {
    document.getElementById("rcmloginuser").placeholder = "Name";
    document.getElementById("rcmloginpwd").placeholder = "Password";
});

Tomasci · February 01, 2016, 05:50:19 AM

Hello again. I am truelly newbie in this. Played around a bit in JS but did not get it to work.

Please advise:

On my login.html I added below line, just before the </head>:

Code Select

<roundcube:include file="/includes/custom-login.js" />

Then I created the file custom-login.js in my skins folder /includes (not using Larry).
You can see I also try to use the language string as a placeholder. That is not necessary but it would be nice.
This is what I got so far in custom-login.js:

Code Select


$(document).ready(function){
$(function() {
    document.getElementById("rcmloginuser").placeholder = "<roundcube:label name="username" />";
    document.getElementById("rcmloginpwd").placeholder = "<roundcube:label name="password" />";
});
}

Thanks again for helping on this matter. Much appreciated!

SKaero · February 01, 2016, 10:21:11 AM

Your Javascript code is invalid because of the document ready that you added. You also wont be able to access the roundcube:label object since that is only used by the Roundcube templating engine. The following should work:

Code Select


$(function() {
    document.getElementById("rcmloginuser").placeholder = "Username";
    document.getElementById("rcmloginpwd").placeholder = "Password";
});

Tomasci · February 01, 2016, 12:01:56 PM

So this would be the only code in custom-login.js?

Sadly that doesn't work. It was the first thing I tried.

Did I include the file correct?
Any other changes need to made in login.html?

Thanks again

SKaero · February 01, 2016, 12:57:30 PM

Can you send me a test link to the Roundcube install where you have this setup?

Tomasci · February 01, 2016, 01:37:21 PM

I have send the link to roundcube in private message.

You can see that the content of custom-login.js shows on top of the page. So the file is called. It just does not perform the function.

UPDATE: When I put everything between <script> tags, it does not show. But it also does not execute the function.

Thanks again