Author Topic: Placeholder for login form  (Read 8383 times)

Offline xyr123

  • Jr. Member
  • **
  • Posts: 11
Placeholder for login form
« on: September 15, 2012, 03:20:00 PM »
Hi,
I'd like to use a placeholder for the login form. Can anyone point me in the right direction?

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,880
    • SKaero - Custom Roundcube development
Re: Placeholder for login form
« Reply #1 on: September 15, 2012, 05:51:30 PM »
What do you mean by placeholder?

Offline xyr123

  • Jr. Member
  • **
  • Posts: 11
Re: Placeholder for login form
« Reply #2 on: September 15, 2012, 07:35:27 PM »
Like this:

<td class="input">
<input id="rcmloginuser" type="text" autocapitalize="off" size="40" name="_user" placeholder="Your email">
</td>

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,880
    • SKaero - Custom Roundcube development
Re: Placeholder for login form
« Reply #3 on: September 16, 2012, 02:44:58 PM »
Probably the simplest way is to make a plugin to include a javascript file and add it that way.

Offline xyr123

  • Jr. Member
  • **
  • Posts: 11
Re: Placeholder for login form
« Reply #4 on: September 16, 2012, 07:21:11 PM »
oh, I have no experience with js or php, so that would be a bit difficult for me.. Anyone here that would try to make such a plugin?

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,880
    • SKaero - Custom Roundcube development
Re: Placeholder for login form
« Reply #5 on: September 17, 2012, 09:20:13 AM »
This is just a shot in the dark, completely untested.

Plugin file:
Code: [Select]
<?php
class placeholder extends rcube_plugin {
    public function 
init() {
        
$this->include_script("placeholder.js");
    }
}

JS file:
Code: [Select]
$('input[name="_user"]').attr('placeholder', '<username>');
$('input[name="_pass"]').attr('placeholder', '<password>');

Replace the <username> and <password> in the JS file with the placeholders you want.

Offline xyr123

  • Jr. Member
  • **
  • Posts: 11
Re: Placeholder for login form
« Reply #6 on: September 18, 2012, 09:57:23 AM »
Thanks SKaero.

Just tested the code, but it didn't work

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,880
    • SKaero - Custom Roundcube development
Re: Placeholder for login form
« Reply #7 on: September 18, 2012, 12:47:31 PM »
Did it load the js file?

Offline xyr123

  • Jr. Member
  • **
  • Posts: 11
Re: Placeholder for login form
« Reply #8 on: September 18, 2012, 07:46:06 PM »
No, I do not think so..

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,880
    • SKaero - Custom Roundcube development
Re: Placeholder for login form
« Reply #9 on: September 19, 2012, 08:06:42 AM »
Did you make the placeholder.php and placeholder.js files in a folder named placeholder in the plugins directory and activate the plugin in the main.inc.php?

Offline xyr123

  • Jr. Member
  • **
  • Posts: 11
Re: Placeholder for login form
« Reply #10 on: September 19, 2012, 01:08:43 PM »
Yes, or I use plugin manager from myroundcube so I activate it from the config in plugin_manager. I can try to activate it from the main.inc.php instead.

Offline xyr123

  • Jr. Member
  • **
  • Posts: 11
Re: Placeholder for login form
« Reply #11 on: September 19, 2012, 01:54:33 PM »
I just added placeholder to main.inc.php, and it loads the js, but its still not working.

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,880
    • SKaero - Custom Roundcube development
Re: Placeholder for login form
« Reply #12 on: September 19, 2012, 02:15:03 PM »
Any error messages in the browser js console?

Offline xyr123

  • Jr. Member
  • **
  • Posts: 11
Re: Placeholder for login form
« Reply #13 on: September 19, 2012, 02:22:44 PM »
No, none..

Offline SKaero

  • Administrator
  • Hero Member
  • *****
  • Posts: 5,880
    • SKaero - Custom Roundcube development
Re: Placeholder for login form
« Reply #14 on: September 19, 2012, 02:40:51 PM »
Try changing the JS file to the following:
Code: [Select]
$(function() {
  $('input[name="_user"]').attr('placeholder', '<username>');
  $('input[name="_pass"]').attr('placeholder', '<password>');
});