Password Strength Meter
Password Strength Meter
Registration form is like the first step that user needs to take to use your web application.It’s interesting how often it is not optimal part of the app.Having an unfriendly registration form may hurt(and usually hurts)the conversion rate of your service badly.
That’s why dynamic features are often starting with forms.On-the-fly validations,popovers and so on-all of these are common in the modern web.All to increase chance of signing up by an user. Apart from the sole signing up,a good registration form needs to make sure that an user does not do anything wrong-like setting too simple password.Password strength meters are a great way to show an user how his password should be constructed to be secure. Requirements
This example will use React-Bootstrap¹components.Remember that React-Bootstrap must be installed separately-visit the main page of the project for installation details.Using React Bootstrap simplifies the example because common UI elements like progress bars don’t need to be created from scratch.
Apart from this,a tiny utility called classnames²will be used.It allows you to express CSS class set with conditionals in an easy way.
Of course the last element is the React library itself.
Recipe
In this example you don’t need to make any assumptions about how the password strength meter will work.There is the static HTML mockup ready to reference how the strength meter will look and ¹react-bootstrap.github.io
²www.npmjs/package/classnames
behave,based on the password input.It is written using the Bootstrap CSS framework,so elements presented will align well with components that React-Bootstrap provides.
Password Strength Meter States
1<div class="container">
2<div class="row">
3<div class="col-md-8">
4<div class="form-group has-success has-feedback">
5<label class="control-label"
6for="password-input">Password</label>
7<input type="password"
8class="form-control"
9id="password-input"
10value="FW&$2iVaFt3va6bGu4Bd"
11placeholder="Password"/>
12<span class="glyphicon glyphicon-ok form-control-feedback"
13aria-hidden="true"></span>
14</div>
15</div>
16<div class="col-md-4">
17<div class="panel panel-default">
18<div class="panel-body">
19<div class="progress">
20<div class="progress-bar progress-bar-success"
21></div>
22</div>
23<h5>A good password is:</h5>
24<ul>
25<li class="text-success">
26<small>
276+characters
28</small>
29</li>
30<li class="text-success">
31<small>
32with at least one digit
33</small>
34</li>
35<li class="text-success">
36<small>
37with at least one special character
38</small>
39</li>
40</ul>
41</div>
42</div>
43</div>
44<!--Rest -->
45</div>
46</div>
This piece of HTML defines the whole structure that will be duplicated.All“creative”work that needs to be done here is to attach the dynamic behaviour and state transitions.
There are some principles that states how a good password should look like.You can think that a password satisfies or not those principles.That will be important later-your behaviour will be built around this concept.
As you can see,there are three states of the strength meter UI:
•Awful password-progress bar is red and an input is in“red”state(1/3or less principles
satisfied)
•Mediocre password-progress bar is yellow and an input is in“yellow”state(1/3to2/3
principles satisfied)
•Great password-progress bar is green and an input is in“green”state(2/3or more principles
bootstrap 5
satisfied)
Since you got a HTML mockup,after each step you can compare output produced by React with HTML markup of the static example.Another approach(see Prefixer example if you want to see
this approach in action)is to copy this HTML and then attach the dynamic behaviour to it.In this example the code will start from the top.First an empty component will be created and then the logical parts of this UI will be defined.After those steps there will be iterations to finish with the markup desired.
Enough said,let’s start with an empty component:
1class PasswordInput extends React.Component{
2render(){return null;}
3}
Let’s think about what logical parts this part of UI has.On the highest level it has a strength meter and a password field.A strength meter consist of principles progress and principles list.
Annotated Password Strength Meter
This concepts will map directly to React components that you’ll create.A static markup is also placed inside the grid.You can use Grid,Row and Col to create a HTML markup like this:
1<div class="container">
2<div class="row">
3<div class="col-md-8">
<
5</div>
6<div class="col-md-4">
<
8</div>
9</div>
10</div>
Which maps directly into:

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。