# JavaScript and RxJS Password Strength Indicator

This is my first time using RxJS (or any observable library). It seems to work okay but I'm not sure about best practices.

The thing that I am most unsure about is subscribing to the observable multiple times. I couldn't decide if it would be better to subscribe to it once with one big function, or to use many smaller subscribers.

CodePen Demo

### Markup

<div class="field">
<div class="control has-icons-left">
<span class="icon is-small is-left">
<i class="fa fa-lock"></i>
</span>
</div>
</div>
<div class="field">
<progress id="passwordStrength" class="progress is-danger" value="0" max="5" />
</div>


### Script

const { fromEvent } = rxjs
const { map, filter } = rxjs.operators

const passwordChanged$= fromEvent(passwordInput, 'input') .pipe( map(x => x.target.value), map(zxcvbn) ) passwordChanged$
.subscribe(state => {
passwordInput.className = input is-${state} passwordStrength.className = progress is-${state}
})

passwordChanged$.subscribe(password => { passwordHelp.innerHTML = password.feedback.warning }) passwordChanged$
})


Each subscribe(...) invocation results in creating and returning a new Subscription unless special measures are taken (like .publish(), .share()...)

Subscribing to observables

Remember, observables are lazy. If you don’t subscribe nothing is going to happen. It’s good to know that when you subscribe to an observer, each call of subscribe() will trigger it’s own independent execution for that given observer. Subscribe calls are not shared among multiple subscribers to the same observable. — Luuk Gruijs

Each Subscription

• eats up a bit of resources;
• is processed separately from the others;
• and needs to be unsubscribed separately to release the resources.

Therefore, if you have no special reasons, you should subscribe the least number of times. In your case, a single subscription is sufficient. You can still use separate functions to delegate them the actual work (setClassNames(), setWarning(), setStrength()).

const { fromEvent } = rxjs
const { map, filter } = rxjs.operators

const passwordChanged$= fromEvent(passwordInput, 'input') .pipe( map(x => x.target.value), map(zxcvbn) ) const setClassNames = password => { const state = password.score > 2 ? 'success' : 'danger'; passwordInput.className = input is-${state}
passwordStrength.className = progress is-${state} }; const setWarning = password => { passwordHelp.innerHTML = password.feedback.warning }; const setStrength = password => { passwordStrength.setAttribute('value', password.score + 1) }; passwordChanged$