Page 1 of 1

A bug on the login.xhtml page in Mozilla

Posted: 28 Mar 2020, 07:44
by alexanderdm
I found a bug in Mozilla browser on the demo cite of sapphire

https://www.primefaces.org/sapphire/login.xhtml

as follows:
1.) You enter a username and a password on the page above, whereby the password is less than 5 symbols, then you let the browser remember your username / password pair.
2.) The next time you visit the above page, Mozilla autocompletes the username and password pair for you. However, the password field does not look OK (see the attachment)
3.) On other browsers (Chrome, Opera) autocomplete of the password seems to be working OK.

Re: A bug on the login.xhtml page in Mozilla

Posted: 01 Apr 2020, 20:18
by mert.sincan
Hi,

Unfortunately, I couldn't replicate it. Please see my test video;
https://www.dropbox.com/s/h74a0ssjvj0h4 ... t.mov?dl=0

Best Regards,

Re: A bug on the login.xhtml page in Mozilla

Posted: 07 Apr 2020, 05:57
by alexanderdm
Dear developer!

Thank you for your time and efforts to help me!
Maybe I forgot to tell you that the Bug I noticed on your Primefaces site occurs on Mozilla 74.0 for Ubuntu.
I also made a small video to help you reproduce the problem:

Please note that this link will be active only in the next 14 days!

https://www.dropbox.com/l/scl/AAC4Dinkg ... GjTq1ZfeTY

Thank you and kind regards: Alex

Re: A bug on the login.xhtml page in Mozilla

Posted: 09 Apr 2020, 04:17
by alexanderdm
Now I shared my video to primetek.

Thank you and kind regards:Alex

Re: A bug on the login.xhtml page in Mozilla

Posted: 09 Apr 2020, 13:22
by mert.sincan
Thanks a lot for the attached video and your great effort to show me the problem!

I checked this issue. I think this is related to FF. Similar issue;
https://bugzilla.mozilla.org/show_bug.cgi?id=740979

Maybe, you can check password value on username text field. Could you please try the following codes;
- Please add this SCSS to src/main/webapp/resources/sass/overrides/_theme_styles.scss
//SCSS

Code: Select all

body {
    .md-inputfield {
        input:-moz-autofill ~ label {
            top:-20px;
            font-size:12px;
            color:$primaryColor;
        }
    }
}
Then, please provide new CSS files using SCSS command.

- Please add this Js code to login.xhtml

Code: Select all

...
        <title>PrimeFaces Sapphire</title>
        <h:outputScript name="js/layout.js" library="sapphire-layout" />
        <h:outputScript name="js/ripple.js" library="sapphire-layout" />

        <script type="text/javascript"> 
            function isPasswordEmpty() {.                      /* Please add this method */
                var passwordEl = $('input[type="password"]');
                setTimeout(function() {
                    if (passwordEl.val().length > 0) {
                        passwordEl.addClass('ui-state-filled');
                    }
                }, 1);
            }
        </script>
    </h:head>
   <h:body styleClass="login-body">
        <div class="login-panel ui-fluid">
            ...
            <div class="login-panel-content">
                <div class="ui-g">
                    ...
                    <div class="ui-g-12">
                        <h:panelGroup styleClass="md-inputfield">
                            <p:inputText autocomplete="off" onselect="isPasswordEmpty()"/> /* Please see this line */
                            <label>Username</label>
                        </h:panelGroup>
                    </div>
                    <div class="ui-g-12">
                        <h:panelGroup styleClass="md-inputfield">
                            <p:password autocomplete="off" />
                            <label>Password</label>
                        </h:panelGroup>
    ...
Best Regards,

Re: A bug on the login.xhtml page in Mozilla

Posted: 14 Apr 2020, 05:34
by alexanderdm
Dear aragorn,

I've implemented the changes suggested by you. Now, if I put a breakpoint in the js-function, everythink works fine. If i remove it, the login still has the same bug as before. Please see my new video here:

https://photos.app.goo.gl/toWLsoKqwQSRuCDx6

Thank you and kind regards:Alex

Re: A bug on the login.xhtml page in Mozilla

Posted: 20 Apr 2020, 06:02
by mert.sincan
Hi,

Thanks a lot for the update! Please try;

Code: Select all

<script type="text/javascript"> 
            function isPasswordEmpty() {.                      /* Please add this method */
                var passwordEl = $('input[type="password"]');
		passwordEl.addClass('ui-state-filled');
            }
        </script>
Best Regards,

Re: A bug on the login.xhtml page in Mozilla

Posted: 26 Apr 2020, 06:04
by alexanderdm
Dear aragorn,

Thank you!
That solved the problem!

Kind regards: Alex

Re: A bug on the login.xhtml page in Mozilla

Posted: 27 Apr 2020, 12:42
by mert.sincan
Glad to hear, thanks a lot for the update!

Best Regards,