using placeholder="Username" instead of js on login field

[pointhi]

Auto fill of login data doesn't work well, because the login field does contain data before typing. Using the tag placeholder would solve that.

Other Idea is, removing the text Username or Password, if the input field is selected.

[PVince81]

Can you please fill the template: https://github.com/owncloud/core/blob/master/CONTRIBUTING.md

What do you mean with "auto fill" ? Please describe the exact steps in the above template.

Thanks.

[pointhi]

Expected behaviour

In normal use, password/username completion work on firefox and similar browsers by double clicking on the field. In owncload instead, is the field filled with username/password, and so the autocompletion cannot work so well as on other websites.

Actual behaviour

To use autocompletion, typing the beginn of the username is required. Furthermore a double-click mark the text, and removing of it doesn't work, because the js code write the text repeated in the input field. That is not very user friendly.

Steps to reproduce

1. Going to login page of owncloud
2. Double click (username and password must be stored in the browser)

Client configuration

Browser: Firefox 26.0

Operating system: Ubuntu 13.10

[PVince81]

CC @owncloud/designers
Not sure why we didn't use placeholder in the first place ?

[jancborchardt]

We used the label instead of the placeholder because it’s semantically incorrect to use the placeholder for labeling functions. It probably also would be worse for accessibility. And also because the placeholder wouldn’t show in many browsers (back then).

The issue is valid though and hampers fast log in.

The root of this seems to be the same as that you can not paste passwords using middle-click #1926. The reason being that the in-field-label is above the text field. We would need to put it below and somehow make it shine through. Stuff I tried and failed at before – you want to have a go @PVince81?

[PVince81]

@jancborchardt so if I understand well we should never use the "placeholder" attribute ?
We did use it already in many other fields like in the sharing dropdown, and the jquery.placeholder shim makes it work in IE8/IE9.

How about @kabum or @Kondou-ger as I'm busy with low-level bugs at the moment?

[MorrisJobke]

@PVince81 I'm not. Sorry

[jancborchardt]

@PVince81 yeah, maybe we should change to placeholder then when it poses less problems than infield-labels. It does work across all our supported browsers now with the shim, right?

[PVince81]

Yes it works with the shim, except when combined with the "show
password" plugin.
But as far as I know this one isn't used on the login page, so it should
be fine.

[jancborchardt]

@dcneiner are you aware of this issue within infieldlabel.js? The known issue with autofill overlap seems to be different from this.

[dcneiner]

@jancborchardt I am not sure I fully understand what is going wrong. I'll need to try to reproduce (I don't have it setup locally ATM)

[My1]

I think that it is particularly annoying when double-clicking on the username field (usually to open up a suggestion list for usernames or alike when it doesnt work and instead the label gets marked, so I'd personally recommend using the (yet empty) placeholder attribute of the input (which also works fine for the password, since I dont know whether or not the label uses javascript, there is a possibility, that this can also clean up a [little] bit of unneeded code and actions that must be taken by scripts)

here's what I have (login.php)

    <p class="infield grouptop">
        <input type="text" name="user" id="user" placeholder="<?php p($l->t('Username')); ?>"
               value="<?php p($_['username']); ?>"<?php p($_['user_autofocus'] ? ' autofocus' : ''); ?>
               autocomplete="on" required/>
        <img class="svg" id="user-icon" src="<?php print_unescaped(image_path('', 'actions/user.svg')); ?>" alt=""/>
    </p>

    <p class="infield groupbottom">
        <input type="password" name="password" id="password" value="" placeholder="<?php p($l->t('Password')); ?>"
               required<?php p($_['user_autofocus'] ? '' : ' autofocus'); ?> />
        <img class="svg" id="password-icon" src="<?php print_unescaped(image_path('', 'actions/password.svg')); ?>" alt=""/>
    </p>

also you need a bit CSS to re-align the user icon, (that's why I have the user-icon id.

#adminlogin+label+img, #adminpass-icon, #user+label+img, #password-icon, #user-icon {
position:absolute; left:1.25em; top:1.65em;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter:alpha(opacity=30); opacity:.3;
}
here I just added the class and there we have it...

[jancborchardt]

Please check if the move from infieldlabels to placeholders fixes this for you: #8468