A bug on the login.xhtml page in Mozilla

Post Reply
alexanderdm
Posts: 16
Joined: 02 Mar 2014, 12:26

28 Mar 2020, 07:44

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.

mert.sincan
Posts: 4591
Joined: 29 Jun 2013, 12:38

01 Apr 2020, 20:18

Hi,

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

Best Regards,

alexanderdm
Posts: 16
Joined: 02 Mar 2014, 12:26

07 Apr 2020, 05:57

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

alexanderdm
Posts: 16
Joined: 02 Mar 2014, 12:26

09 Apr 2020, 04:17

Now I shared my video to primetek.

Thank you and kind regards:Alex

mert.sincan
Posts: 4591
Joined: 29 Jun 2013, 12:38

09 Apr 2020, 13:22

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,

alexanderdm
Posts: 16
Joined: 02 Mar 2014, 12:26

14 Apr 2020, 05:34

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

mert.sincan
Posts: 4591
Joined: 29 Jun 2013, 12:38

20 Apr 2020, 06:02

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,

alexanderdm
Posts: 16
Joined: 02 Mar 2014, 12:26

26 Apr 2020, 06:04

Dear aragorn,

Thank you!
That solved the problem!

Kind regards: Alex

mert.sincan
Posts: 4591
Joined: 29 Jun 2013, 12:38

27 Apr 2020, 12:42

Glad to hear, thanks a lot for the update!

Best Regards,

Post Reply

Return to “Sapphire - PrimeFaces”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest