Exercise: Password Strength

Inside the directory you created for this course on React, create a new folder called Exercise-14-Password-Strength and put the .js solution files for this exercise within it.

First, let's get done with the general structure of PasswordInput before proceeding forward.

By this point in this course, we should be more than comfortable with setting up basic, controlled input fields.

Here's the code:

import { useState } from 'react';

function PasswordInput({
   value: initialValue = '',
   interactive = false
}) {
   const [value, setValue] = useState(initialValue);

   return (
      <div>
         <input type="password" value={value} onChange={e => setValue(e.target.value)} />
         <button>Show</button>
      </div>
   );
}

Perfect! Let's now dive into the real business.

There are essentially two parts to implementing the PasswordInput component:

• The password show/hide toggler.
• The strength indicator, to be shown only when the interactive prop is true.

We'll begin with the first part which is fairly easy to code.

Start off by laying out an <input> field whose type is determined conditionally, depending on the state value shown. This state value is initially false (the password's characters are initially hidden), and is udpated — or better to say, toggled — by the given button.

Following is the code we get in the end:

import { useState } from 'react';

function PasswordInput({
   value: initialValue = '',
   interactive = false
}) {
   const [value, setValue] = useState(initialValue);
   const [shown, setShown] = useState(false);

   return (
      <div>
         <input type={shown ? 'text' : 'password'} value={value} onChange={e => setValue(e.target.value)} />
         <button>{shown ? 'Hide' : 'Show'}</button>
      </div>
   );
}

Now over to implementing the second part, which is slightly more involved to implement.

But before we code, let's spare a few minutes in thinking about how to approach creating the strength indicator.

The five strength level segments could easily be created by mapping over a dummy 5-element array, to prevent repetition and make the segment-filling logic a little bit easier (we'll see how).

The entire <div> element containing these segments could be called .pwd-strength, with an additional modifier class added to it to denote a particular level; let's call this .pwd-strength--{level}, where {level} is the strength level.

In that respect, each strength level segment therein could be called .pwd-strength_bar (being a <span> element). When a segment is filled, it would have a child (<span>) element in it called .pwd-strength_bar_filled.

In the following CSS code, we implement the styles of all these classes:

.pwd-strength_bar,
.pwd-strength_bar_filled {
   background-color: lightgrey;
   width: 20px;
   height: 4px;
}

.pwd-strength_bar {
   margin-right: 3px;
   display: inline-block;
}

.pwd-strength_bar_filled {
   margin-right: 0;
   display: block;
}

.pwd-strength--1 .pwd-strength_bar_filled {
   background-color: red;
}
.pwd-strength--2 .pwd-strength_bar_filled {
   background-color: orange;
}
.pwd-strength--3 .pwd-strength_bar_filled {
   background-color: greenyellow;
}
.pwd-strength--4 .pwd-strength_bar_filled {
   background-color: green;
}
.pwd-strength--5 .pwd-strength_bar_filled {
   background-color: purple;
}

This completes our thought process for the design and structure of the strength indicator; we still have to crack its logic.

That is, how do we determine the strength level and its corresponding text?

Well, let's think, think and think... After all, programming is mainly thinking and less so coding.

The solution that we come up with is to employ a custom hook to compute all the necessary information of a given password value, i.e. its strength level (as a number) and the corresponding text (as a string), and then return that information.

Let's call this hook useStrength().

Its first argument would be the interactive prop (to determine whether we even need to process the given password value for its strength or not) while its second argument would be value.

To keep the discussion short, let's first see the definition of useStrength() and then reason about the code:

function useStrength(interactive, value) {
   if (!interactive) {
      return [];
   }
   const strengthText = ['-', 'Weak', 'Average', 'Good', 'Very good', 'Ultimate'];
   const patterns = [/[a-z]/, /[A-Z]/, /\d/, /[^a-zA-Z0-9]/, /.{15,}/];

   let level = 0;
   for (var pattern of patterns) {
      if (pattern.test(value)) {
         level++;
      }
   }
   return [level, strengthText[level]];
}

The main points to note here are as follows:

• When interactive is false, no further processing is done; the function immediately returns an empty array. An array is returned because the return value of useStrength() is destructured in PasswordInput — if we don't return an array above, the destructuring operation would fail.
• strengthText provides an array of strings representing the text that corresponds to each strength level (as mentioned in the description above).
• patterns provides an array of regular expressions to use to test for each of the given criteria (as mentioned in the description above).
• level specifies the strength level, starting at 0.
• A for...of loop iterates over each pattern in patterns, and tests the given password, value, against it. If the pattern is found, level is incremented.

With this custom hook made, now we just ought to go back to our PasswordInput component and code it to completion, for we now have all the information we need to complete the component.

Consider the following code:

import { useState } from 'react';

function useStrength(interactive, value) { /* ... */ }

function PasswordInput({
   value: initialValue = '',
   interactive = false
}) {
   const [value, setValue] = useState(initialValue);
   const [shown, setShown] = useState(false);
   const [level, text] = useStrength(interactive, value);

   return (
      <div>
         <input type={shown ? 'text' : 'password'} value={value} onChange={e => setValue(e.target.value)} />
         <button>{shown ? 'Hide' : 'Show'}</button>

         {interactive && (
            <div className={'pwd-strength pwd-strength--' + level}>
               {new Array(5).fill(0).map((_, i) => (
                  <span className="pwd-strength_bar">
                     {i <= (level - 1) && <span className="pwd-strength_bar_filled"></span>}
                  </span>
               ))}
               {text}
            </div>
         )}
      </div>
   );
}

Let's quickly see what's happening here:

• The entire password strength indicator section is conditionally rendered, when interactive is true.
• new Array(5).fill(0) creates a dummy array of five elements. This is done purely to allow us to use map() to produce a collection of five <span> elements, corresponding to the five strength level segments.
• i <= (level - 1) decides whether the current segment should be filled. The filling is performed by adding a .pwd-strength_bar_filled element (which is also a <span>) inside the current segment.
• Right after this sequence of 5 segments, we render text (recall that it holds the text corresponding to the current strength level of the password).

And this is pretty much everything we need in order to completely and successfully implement PasswordInput.

Live Example

No doubt that this exercise was quite an involved one but it was surely worth the effort. We got to learn a diverse set of concepts, including the crucially important concept of custom hooks in React.

Custom hooks is a really powerful pattern — in fact, a desirable pattern — to use in React apps. Many React libraries heavily use custom hooks to simplify complex logic and to provide developers with a wide range of functionality to hook their components into.