Roundcube Community Forum

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








" style="margin:0 11px" />

" />

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 (http://trac.roundcube.net/wiki/Plugin_Repository)

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 (...)?

Title: Custom login page
Post by: JohnDoh on February 27, 2010, 07:03:19 AM

are you trying to make a select box for the imap server? this can be done from the config ([rc root]/config/main.inc.php)

Quote$rcmail_config['default_host'] = array("host" => "name");

otherwise if you look in rcube_tamplate.php, a little above where you got the bit of code from you'll see

Quote$input_host = new html_select(array('name' => '_host', 'id' => 'rcmloginhost'));

            foreach ($default_host as $key => $value) {
                if (!is_array($value)) {
                    $input_host->add($value, (is_numeric($key) ? $value : $key));
                }
                else {
                    $input_host = null;
                    break;
                }
            }

this creates an html select object and adds options to it

Title: Custom login page
Post by: furman12 on February 27, 2010, 07:53:33 AM

I have next question. I must write in login [email protected], and select the same host. I want do write only username

Title: Custom login page
Post by: furman12 on February 27, 2010, 08:56:17 AM

I want somethink else
Login = [email protected]
value = username

option = host.com

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

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

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.

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?

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


Everything else is css..

Thanks again! :)

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:

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


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>:
<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:

$(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!  :)

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:

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


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

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

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

My mistake you'll want to switch out the roundcube:include object for a script object:
<script type="text/javascript" src="/includes/custom-login.js"></script>

Hello again.

That's great. The script now loads and is visible in source code.
But placeholders are not yet visible.

So I wonder if there must be some extra line of code to execute the script?

Many thanks

The problem is the script to load the placeholder text is using jQuery and jQuery hasn't been loaded when you include the script. Move the <script> tag to the bottom of the file and it should work.

Great! That indeed solved it.
Many many thanks.  ;D :D