Overview

In this exercise, you will create a React component that allows a user to toggle the visibility of a password input field between a visible and hidden state.

Instructions

1. Create a new React component named PasswordInput that includes a password input field and a toggle button.

2. Add state to the component to keep track of whether the password input is currently visible or hidden.

3. Use CSS to style the password input field and the toggle button.

4. When the toggle button is clicked, update the component's state to toggle the visibility of the password input field.

5. When the password input field is visible, the user should be able to see the password they are typing. When it is hidden, the password should be obscured.

6. Test your component to ensure that it works as expected.

Bonus Requirements

1. Add a "forgot password" link to the component that redirects the user to a password reset page.

2. Allow the user to choose whether the password input is hidden or visible by default.

3. Use a custom icon for the toggle button.

Before you dive into the final output, I want to encourage you to take some time to work through the exercise yourself. I believe that active learning is the most effective way to learn and grow as a developer.

So, grab a pen and paper, fire up your code editor, and get ready to dive into the React Password Show/Hide exercise. Once you have completed the exercise, feel free to return to this blog post to compare your solution to mine.

Output for the Password Show/Hide exercise

import React, { useState } from 'react';
import './PasswordInput.css';

function PasswordInput() {
  const [passwordVisible, setPasswordVisible] = useState(false);
  const togglePasswordVisibility = () => {
    setPasswordVisible(!passwordVisible);
  };

  return (
    <div className="password-input">
      <label>Password</label>
      <div className="password-input-container">
        <input
          type={passwordVisible ? 'text' : 'password'}
          placeholder="Enter password"
        />
        <button onClick={togglePasswordVisibility}>
          {passwordVisible ? 'Hide' : 'Show'}
        </button>
      </div>
      <a href="/forgot-password">Forgot Password?</a>
    </div>
  );
}

export default PasswordInput;

.password-input {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

.password-input label {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.password-input-container {
  display: flex;
  align-items: center;
}

.password-input-container input {
  flex: 1;
  height: 40px;
  border: none;
  border-bottom: 2px solid #ccc;
  font-size: 16px;
  padding: 5px;
}

.password-input-container button {
  margin-left: 10px;
  background: none;
  border: none;
  font-size: 16px;
  color: #333;
  cursor: pointer;
}

.password-input-container button:hover {
  text-decoration: underline;
}

.password-input a {
  font-size: 14px;
  margin-top: 10px;
  color: #333;
  text-align: right;
}

.password-input a:hover {
  text-decoration: underline;
}

import React from 'react';
import PasswordInput from './PasswordInput';

function App() {
  return (
    <div className="App">
      <PasswordInput />
    </div>
  );
}

export default App;

The purpose of this component is to provide a way for users to toggle the visibility of a password input field between a visible and hidden state. This can be useful in situations where a user needs to enter a password but may want to double-check that they are typing it correctly before submitting it. By allowing the user to toggle the visibility of the password input field, they can easily check that they have entered the correct characters without having to type the password twice.

It's important to keep in mind that while the React Password Show/Hide component can be useful in certain situations, it may not be appropriate for all use cases. In particular, it's important to consider security implications when using a password input field that can be toggled between visible and hidden states. For example, if the password input field is visible when the user is typing in their password, someone looking over their shoulder may be able to see the password. As such, it's important to use this component judiciously and in a way that is appropriate for the specific use case.

Thanks for taking this JavaScript exercise!

I hope you found this exercise helpful and enjoyable, and that it has deepened your understanding of React development. Keep practising and experimenting with React, and you'll be well on your way to becoming a skilled React developer!

If you have any questions or comments, feel free to reach out to me on Twitter(@rajeshtomjoe), or follow me for more updates.

And if you'd like to receive more exercise on JavaScript, be sure to subscribe to my blog.