angular js trouble with password strength display

Question

I am new to angular js and writing directive to display the password strength.

Here is the fiddle - https://jsfiddle.net/user_123/3hruj8ce/12/

 <span  data-ng-show='passwordForm.password.$valid && passwordForm.password.$dirty' data-ng-class="strength">
     <li class="point"></li >      
     <li  class="point"></li>
     <li  class="point"></li>         
     <li  class="point"></li> 
</span>

I am having trouble updating the colour of li as user starts entering the password.

Any help much appreciated.

Thanks in advance.

UPDATE:

this is the updated fiddle (still not working as expected..) - https://jsfiddle.net/user_123/3hruj8ce/13/

how do you link "strength" to your directive ? how is this variable being updated ? — MayK
– MayK, Commented May 18, 2016 at 13:45

Julon Lou · Accepted Answer · 2016-05-18 15:15:31Z

1

Your strength computing formula return always 1 most of the time unless you type a crazy string as a password.

Anyway for fixing the css class (strong medium and weak), you need to change

.strong   { color: #060; border-color: #0F0;}

to

.strong > li.point   { background-color: #060; border-color: #0F0;}

and change your formula to lower the strength I believe.

update : for targeting one, two or 3 li you may add your classes to the li as follow

<li class="point weak"><li>
<li class="point weak medium"><li>
<li class="point weak medium strong"><li>

and change css to

.strong > li.strong{background-color: #060; border-color: #0F0;}
.medium > li.medium{background-color: #080; border-color: #0F0;}
.weak > li.weak{background-color: #099; border-color: #0F0;}

edited May 18, 2016 at 15:15

answered May 18, 2016 at 14:06

Julon Lou

815 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Julon Lou Over a year ago

What I wrote just fix your first fiddle not the second one.

user56690 Over a year ago

thanks for the answer. i updated the fidde - jsfiddle.net/user_123/3hruj8ce/20 .But now the problem is all the li's are turning to red when a poor password is entered, I want only the first first li to turn red and last 3 li's to remain in same color. same for other colors as well.. any idea how to achieve this?

mrk m · Accepted Answer · 2016-05-18 13:59:15Z

1

I have updated fiddle https://jsfiddle.net/3hruj8ce/14/

The li elements color should be changed by changing their class name to strong/medium/weak. Please check.

answered May 18, 2016 at 13:59

mrk m

1551 gold badge4 silver badges15 bronze badges

1 Comment

user56690 Over a year ago

hey, i see the color is changing for all the li's. i want the li's to be updated one by one as the user is typing. if it is medium first three li's should be amber and last li to remian in the same color, if weak 2 li's should be red and last 2 li's in same color, if strong all the li's should turn green

JohnDotHR · Accepted Answer · 2016-05-18 13:45:56Z

0

It seems like you haven't defined these:

.strong   { color: #060; border-color: #0F0;}
.medium   { color: #C60; border-color: #FC0;}
.weak     { color: #900; border-color: #F00;}

In your list/HTML.

answered May 18, 2016 at 13:45

JohnDotHR

12212 bronze badges

Collectives™ on Stack Overflow

angular js trouble with password strength display

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related