Converting bullet point list to checkboxes once requirements have been satisfied

Question

Converting bullet point list to checkboxes once requirements have been satisfied

I am working on developing a password validator with specific regex conditions in Material UI that transitions from bullet points to checkboxes when the criteria are satisfied.

Initially, I attempted to use the npm library NiceInputPassword, but it did not allow me to easily update the state. As a result, I have decided to revert back to using regular Material UI components. Although I have researched documentation on lists in Material UI, I have not found any information on how to convert bullet points to checkboxes like shown in the provided image.

javascript css reactjs npm material-ui

Answer 1

Answer №1

If you want to fulfill all your needs, utilize the @mui/material and @mui/icons-material libraries in this manner:

import { TextField } from "@mui/material";
import { useEffect, useState } from "react";
import "./styles.css";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import CircleIcon from "@mui/icons-material/Circle";

function checkUppercase(str) {
  for (let i = 0; i < str.length; i++) {
    if (
      str.charAt(i) === str.charAt(i).toUpperCase() &&
      str.charAt(i).match(/[a-z]/i)
    ) {
      return true;
    }
  }
  return false;
}

const SPECIAL_CHARS = "!@#$%^&*()";

function checkSpecialChars(str) {
  const alreadyFoundChars = [];
  for (let i = 0; i < str.length; i++) {
    const currentChar = str[i];
    if (!alreadyFoundChars.includes(currentChar)) {
      if (SPECIAL_CHARS.includes(currentChar)) {
        alreadyFoundChars.push(currentChar);
      }
    }
  }
  return alreadyFoundChars.length >= 3;
}

const getIcon = (isChecked) => {
  const smallDotIcon = <CircleIcon sx={{ fontSize: "0.4rem" }} />;
  const checkCircleIcon = <CheckCircleIcon sx={{ fontSize: "0.8rem" }} />;
  const iconToBeRendered = isChecked ? checkCircleIcon : smallDotIcon;

  return (
    <div
      style={{
        height: "20px",
        width: "15px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      {iconToBeRendered}
    </div>
  );
};

const prepareHelperText = (value) => {
  const firstIcon = getIcon(value.length >= 8);
  const secondIcon = getIcon(checkUppercase(value));
  const thirdIcon = getIcon(checkSpecialChars(value));

  return (
    <div>
      <div style={{ display: "flex" }}>
        {firstIcon}
        Must contain at least 8 characters
      </div>
      <div style={{ display: "flex" }}>
        {secondIcon} Must contain at least 1 uppercase letter
      </div>
      <div style={{ display: "flex" }}>
        {thirdIcon} Must contain 3 of the 4 types of characters !@#$%^&*()
      </div>
    </div>
  );
};

export default function App() {
  const [value, setValue] = useState("");
  const [helperText, setHelperText] = useState("");

  useEffect(() => {
    setHelperText(prepareHelperText(value));
  }, [value]);

  return (
    <div className="App">
      <TextField
        type="password"
        label="Password"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        helperText={helperText}
        sx={{
          "& .Mui-focused": {
            color: "purple"
          },
          "& label.Mui-focused": {
            color: "purple !important"
          },
          "& .MuiOutlinedInput-root": {
            "&.Mui-focused fieldset": {
              borderColor: "purple"
            }
          }
        }}
      />
    </div>
  );
}

To see a demonstration of this solution in action, visit this sandbox.

Answer 2

If you want to fulfill all your needs, utilize the @mui/material and @mui/icons-material libraries in this manner:

import { TextField } from "@mui/material";
import { useEffect, useState } from "react";
import "./styles.css";
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
import CircleIcon from "@mui/icons-material/Circle";

function checkUppercase(str) {
  for (let i = 0; i < str.length; i++) {
    if (
      str.charAt(i) === str.charAt(i).toUpperCase() &&
      str.charAt(i).match(/[a-z]/i)
    ) {
      return true;
    }
  }
  return false;
}

const SPECIAL_CHARS = "!@#$%^&*()";

function checkSpecialChars(str) {
  const alreadyFoundChars = [];
  for (let i = 0; i < str.length; i++) {
    const currentChar = str[i];
    if (!alreadyFoundChars.includes(currentChar)) {
      if (SPECIAL_CHARS.includes(currentChar)) {
        alreadyFoundChars.push(currentChar);
      }
    }
  }
  return alreadyFoundChars.length >= 3;
}

const getIcon = (isChecked) => {
  const smallDotIcon = <CircleIcon sx={{ fontSize: "0.4rem" }} />;
  const checkCircleIcon = <CheckCircleIcon sx={{ fontSize: "0.8rem" }} />;
  const iconToBeRendered = isChecked ? checkCircleIcon : smallDotIcon;

  return (
    <div
      style={{
        height: "20px",
        width: "15px",
        display: "flex",
        alignItems: "center",
        justifyContent: "center"
      }}
    >
      {iconToBeRendered}
    </div>
  );
};

const prepareHelperText = (value) => {
  const firstIcon = getIcon(value.length >= 8);
  const secondIcon = getIcon(checkUppercase(value));
  const thirdIcon = getIcon(checkSpecialChars(value));

  return (
    <div>
      <div style={{ display: "flex" }}>
        {firstIcon}
        Must contain at least 8 characters
      </div>
      <div style={{ display: "flex" }}>
        {secondIcon} Must contain at least 1 uppercase letter
      </div>
      <div style={{ display: "flex" }}>
        {thirdIcon} Must contain 3 of the 4 types of characters !@#$%^&*()
      </div>
    </div>
  );
};

export default function App() {
  const [value, setValue] = useState("");
  const [helperText, setHelperText] = useState("");

  useEffect(() => {
    setHelperText(prepareHelperText(value));
  }, [value]);

  return (
    <div className="App">
      <TextField
        type="password"
        label="Password"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        helperText={helperText}
        sx={{
          "& .Mui-focused": {
            color: "purple"
          },
          "& label.Mui-focused": {
            color: "purple !important"
          },
          "& .MuiOutlinedInput-root": {
            "&.Mui-focused fieldset": {
              borderColor: "purple"
            }
          }
        }}
      />
    </div>
  );
}

To see a demonstration of this solution in action, visit this sandbox.

Answer 3

Answer №2

To achieve your desired outcome using the available libraries and components, there are a few steps involved which I will explain in detail.

When working with React-Nice-Input-Password, you can provide a custom class name for different states such as success by utilizing

<NiceInputPassword successClassName="custom-success"

. By adding this prop, you can style the bullet points accordingly using CSS selectors like

.input-password__description li.custom-success:before

. Consider experimenting with less specific selectors for customization possibilities.

The interesting part comes when styling the bullet points. You can set the background-color: transparent, then add a background image using a Data URL referencing an SVG code like the CheckCircle from MUI Icons with customized properties such as width, height, and fill color.

.input-password__description li.custom-success:before {
  background-color: transparent;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path fill="%232196F3" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>');
}

If you wish to customize the color further, you have options like adjusting the fill property or using the filter CSS property to modify specific elements.

Remember to import the CSS file appropriately into your project for the styles to take effect, like import './custom.css';.

For reference, here is a sandbox showcasing the described changes in action with varying colors for the success bullet points:

https://codesandbox.io/s/reactniceinputpassword-forked-od5r1y?fontsize=14&hidenavigation=1&theme=dark

Additional resources for further reading:

Guide on changing SVG fill color in base-64 background image data
Using Material Design Icon as CSS background-image value

Answer 4

To achieve your desired outcome using the available libraries and components, there are a few steps involved which I will explain in detail.

When working with React-Nice-Input-Password, you can provide a custom class name for different states such as success by utilizing

<NiceInputPassword successClassName="custom-success"

. By adding this prop, you can style the bullet points accordingly using CSS selectors like

.input-password__description li.custom-success:before

. Consider experimenting with less specific selectors for customization possibilities.

The interesting part comes when styling the bullet points. You can set the background-color: transparent, then add a background image using a Data URL referencing an SVG code like the CheckCircle from MUI Icons with customized properties such as width, height, and fill color.

.input-password__description li.custom-success:before {
  background-color: transparent;
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24"><path fill="%232196F3" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg>');
}

If you wish to customize the color further, you have options like adjusting the fill property or using the filter CSS property to modify specific elements.

Remember to import the CSS file appropriately into your project for the styles to take effect, like import './custom.css';.

For reference, here is a sandbox showcasing the described changes in action with varying colors for the success bullet points:

https://codesandbox.io/s/reactniceinputpassword-forked-od5r1y?fontsize=14&hidenavigation=1&theme=dark

Additional resources for further reading:

Guide on changing SVG fill color in base-64 background image data
Using Material Design Icon as CSS background-image value

Converting bullet point list to checkboxes once requirements have been satisfied

Answer №1

Answer №2

Similar questions

Rotating elements in CSS using the transform property with rotateX and rotateY values

What is the best way to render images on the server side in React?

Guide on decrypting a file encrypted with C# using Node JS

The jQuery onchange function does not have the ability to limit the input to only

Encountering a getStaticProps error while using Typescript with Next.js

Troubleshooting ng-class functionality in AngularJS

"Dynamically moving" background on canvas

Executing npm commands within a complex folder hierarchy

Using an Ajax call within an event handler function

Unit testing controllers in AngularJS with Karma often involves setting up mock services to simulate dependencies

What is the best way to choose the member variables in this specific data structure?

What is the method for incorporating a checkmark symbol into a chosen MUI React ToggleButton?

What is the best way to distribute components with varying cell heights?

How can I pass props from a page to components in Next.js using getServerSideProps?

Is there a method for enabling GPT-3's "davinci" to engage in conversation with users via a bot on Discord by utilizing discord.js?

How can you display or conceal an HTML page in Jquery Mobile?

Implementing a soft transition to intl-tel-input plugin

Executing a Node.js program using the command line without having to type out the word 'node'

Issue with undefined arrays in the Angular merge sort visualization tool

Why is it that the condition of being undefined or not functioning properly in state?