search

vaadin-component-factory / vcf-password-strength

Component for visualisation of password's strength
Apache License 2.0
0 stars 1 forks source link

Bars appear twice #1

Open vilmosnagy opened 3 years ago

vilmosnagy commented 3 years ago

Hi,

If I use this component with the java's PasswordField component, the bars are appearing twice (there are 10 bars at the end):

image

(I use the Kotlin DSL to create this UI)

init {
        ui {
            verticalLayout {
                width = "100%"
                height = "100%"
                justifyContentMode = FlexComponent.JustifyContentMode.CENTER
                val registrationForm = formLayout {
                    maxWidth = "calc(var(--lumo-size-m) * 10)"
                    emailField = emailField(label = "Email Address") {
                        width = "100%"
                    }
                    passwordField = passwordField(label = "Password") {
                        width = "100%"
                        addValueChangeListener(this@RegistrationView::onPasswordChangedEvent)
                    }
                    passwordAgainField = passwordField(label = "Password again") {
                        width = "100%"
                        addValueChangeListener(this@RegistrationView::onPasswordChangedEvent)
                    }
                    passwordStrength = init(PasswordStrength())
                    errorLabel = text("") {
                        width = "100%"
                        style["color"] = "red"
                    }
                    horizontalLayout {
                        button(text = "Register") {
                            width = "100%"
                            themeNames += "primary"
                        }
                        button(text = "Cancel") {
                            width = "100%"
                        }
                    }
                }
                setHorizontalComponentAlignment(FlexComponent.Alignment.CENTER, registrationForm)
            }
        }
    }

If I debug this correctly, the connectedCallback() called twice, see the stacktraces here:

One stacktrace:

connectedCallback (vcf-password-strength.js?46e0:102)
rw (FlowClient.js?2d7e:927)
qw (FlowClient.js?2d7e:1017)
fx (FlowClient.js?2d7e:1025)
Ev (FlowClient.js?2d7e:816)
Gv (FlowClient.js?2d7e:747)
Cw (FlowClient.js?2d7e:856)
Hw (FlowClient.js?2d7e:675)
ow (FlowClient.js?2d7e:999)
Vw (FlowClient.js?2d7e:688)
Py (FlowClient.js?2d7e:1025)
tB (FlowClient.js?2d7e:941)
zr (FlowClient.js?2d7e:1020)
Qr (FlowClient.js?2d7e:1025)
pk (FlowClient.js?2d7e:427)
rr (FlowClient.js?2d7e:1022)
sr (FlowClient.js?2d7e:1002)
Ht (FlowClient.js?2d7e:1025)
ZB (FlowClient.js?2d7e:1025)
(anonymous) (FlowClient.js?2d7e:594)
sb (FlowClient.js?2d7e:435)
vb (FlowClient.js?2d7e:888)
(anonymous) (FlowClient.js?2d7e:612)
XMLHttpRequest.send (async)
XB (FlowClient.js?2d7e:935)
WB (FlowClient.js?2d7e:577)
zt (FlowClient.js?2d7e:947)
as (FlowClient.js?2d7e:975)
Zr (FlowClient.js?2d7e:946)
cs (FlowClient.js?2d7e:911)
qt (FlowClient.js?2d7e:555)
ut (FlowClient.js?2d7e:1025)
yt (FlowClient.js?2d7e:1025)
Ob (FlowClient.js?2d7e:969)
Hb (FlowClient.js?2d7e:677)
Sb (FlowClient.js?2d7e:1025)
Mb (FlowClient.js?2d7e:205)
sb (FlowClient.js?2d7e:435)
vb (FlowClient.js?2d7e:888)
eval (FlowClient.js?2d7e:612)
d (FlowClient.js?2d7e:713)
setTimeout (async)
Pb (FlowClient.js?2d7e:714)
Jb (FlowClient.js?2d7e:718)
ao (FlowClient.js?2d7e:585)
rt (FlowClient.js?2d7e:692)
gt (FlowClient.js?2d7e:520)
jt (FlowClient.js?2d7e:897)
nv (FlowClient.js?2d7e:1025)
eval (FlowClient.js?2d7e:985)
sb (FlowClient.js?2d7e:435)
vb (FlowClient.js?2d7e:888)
eval (FlowClient.js?2d7e:612)
eval (Flow.ts?7483:174)
flowNavigate (Flow.ts?7483:157)
container.onBeforeEnter (Flow.ts?7483:122)
runCallbackIfPossible (vaadin-router.js?28c7:1366)
eval (vaadin-router.js?28c7:1377)
eval (vaadin-router.js?28c7:2011)
Promise.then (async)
__runOnBeforeEnterCallbacks (vaadin-router.js?28c7:2008)
__runOnBeforeCallbacks (vaadin-router.js?28c7:1971)
__amendWithOnBeforeCallbacks (vaadin-router.js?28c7:1910)
eval (vaadin-router.js?28c7:1882)
Promise.then (async)
eval (vaadin-router.js?28c7:1873)
Promise.then (async)
__fullyResolveChain (vaadin-router.js?28c7:1842)
eval (vaadin-router.js?28c7:1762)
Promise.then (async)
render (vaadin-router.js?28c7:1762)
__onNavigationEvent (vaadin-router.js?28c7:2227)
setRoutes (vaadin-router.js?28c7:1714)
eval (index.ts?6d68:33)
../target/index.ts (vaadin-bundle-c4f2bf0d2e40ae147bb0.cache.js:236)
__webpack_require__ (vaadin-bundle-c4f2bf0d2e40ae147bb0.cache.js:64)
(anonymous) (vaadin-bundle-c4f2bf0d2e40ae147bb0.cache.js:199)
(anonymous) (vaadin-bundle-c4f2bf0d2e40ae147bb0.cache.js:202)

The other stacktrace:

connectedCallback (vcf-password-strength.js?46e0:102)
__addAppearingContent (vaadin-router.js?28c7:2110)
(anonymous) (vaadin-router.js?28c7:1793)
Promise.then (async)
render (vaadin-router.js?28c7:1764)
__onNavigationEvent (vaadin-router.js?28c7:2227)
setRoutes (vaadin-router.js?28c7:1714)
eval (index.ts?6d68:33)
../target/index.ts (vaadin-bundle-c4f2bf0d2e40ae147bb0.cache.js:236)
__webpack_require__ (vaadin-bundle-c4f2bf0d2e40ae147bb0.cache.js:64)
(anonymous) (vaadin-bundle-c4f2bf0d2e40ae147bb0.cache.js:199)
(anonymous) (vaadin-bundle-c4f2bf0d2e40ae147bb0.cache.js:202)

image

vilmosnagy commented 3 years ago

It was reported here as well.

I'd fix this with something like:

  connectedCallback() {
    super.connectedCallback();
    if (!this.initialized) {
      for (let i = 0; i < this.barsCount; i++) {
        const barElement = document.createElement('div');
        barElement.setAttribute('part', 'bar');
        this.$.bars.appendChild(barElement);
        this.push('_bars', barElement);
      }
      this.initialized = true;
    }
  }

Would you merge this PR?