LoginView with PolymerTemplate not recognizing error parameter

Question

I have a LoginView which I basically copied from the bakery starter project.

When I run the bakery app and try to login with wrong credentials, there appears an additional div with an error message.

However, this error message div does not appear in my view. I have since adapted the template to our Corporate Design, but I can remember that this issue already existed when the two files LoginView.java and login-view.html were still exact copies from the bakery app. I double checked that .error is not just hidden by my own css - the div.error is not existing in the DOM.

Debugging the LoginView when visiting /login?error (visiting login?error=true is the same) shows that it does not recognize any queryParameters! --> Why?

My App debugged:

Bakery App debugged:

My (Spring) Security Configuration is the same too where the login is concerned:

.and()
.formLogin()
.loginPage(("/login")).permitAll()
.loginProcessingUrl("/login")
.failureUrl("/login?error")

Edit: as asked for in the comments, I'll add the relevant part of the template. However, the error is 100% not in the template - as I can see with debugging that the error occurs already in the LoginView.java in the afterNavigation method.

<dom-module id="login-view">
  <template>
    <style include="shared-styles">
        .....
    </style>
        .....
            <template is="dom-if" if="[[error]]">
              <div class="error">
                <iron-icon icon="vaadin:exclamation-circle-o" class="error__icon"></iron-icon>
                <p class="error__text">
                  Der Benutzername und/oder das Passwort stimmt nicht. Bitte überprüfe deine Angaben und versuche es erneut.
                </p>
              </div>
            </template>
      ....
  </template>

  <script>
    class LoginView extends Polymer.GestureEventListeners(Polymer.Element) {
        static get is() {
            return 'login-view';
        }

        static get properties() {
            return {
                error: {
                    type: Boolean,
                    value: false
                }
            };
        }
        ......
    }
    window.customElements.define(LoginView.is, LoginView);
  </script>
</dom-module>

Can you show the dom-if in your template where you bind to the 'error' model parameter? — vivid_voidgroup, Feb 14 '19 at 13:38
Sure, see edit. However, I think the debugging screenshots prove that the error occurs before the template comes into play (this is why I removed the template code from this post in the first place) — kscherrer, Feb 14 '19 at 14:07
When I run the app locally with `liberty:run-server` (which I have been doing always) then this behaviour occurs. I have now tried to run the app locally with `spring-boot:run` and then I see the error message! — kscherrer, Mar 08 '19 at 08:18

score 1 · Answer 1 · answered Jun 09 '21 at 19:29

While the question is quite old, it seems like the issue was somehow related to to the liberty server. There probably was something that prevented (?) the usage of the ?error query parameter in this case, as the same code works on other servers.

If the issue still persists and can be reproduced in project that can be shared, you should create an issue to the vaadin/spring repository. The LoginView implementation should not made based on a PolymerTemplate anymore, as there is a server side Java integrations that can be used, like the LoginOverlay component. Also starting from Vaadin 20, there is a Spring security configuration class VaadinWebSecurityConfigurerAdapter which provides helpers for setting up Spring security with Vaadin apps. There is more details on the documentation.

LoginView with PolymerTemplate not recognizing error parameter

1 Answers1