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. https://i.sstatic.net/b0pgb.png

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

What is the best method for creating a top margin that is dependent on the height of the browser?

How to use Javascript to pause an HTML5 video when closed

The contenteditable div's selectAll feature doesn't function properly when it gains focus

"Disappearing Act: The Mysterious Vanishing of the JS

Customizing Material UI Stepper styles using CSS API

Transforming the current date() into a distinctive format, encompassing the utilization of T

Utilizing the Node -r flag within npm scripts on Azure App Service: A step-by-step guide

Executing Selenium WebDriver to interact with a hidden element

Learn how to troubleshoot and resolve a bug in the mobile Chrome browser that pertains to the position fixed feature

How can I make a checkbox checked in AngularJS?

Using React Native to submit FormData to a C# API

The TD border is slicing through the div and is placed on the table in IE standards, causing it

The importance of manually loading extensions and utilizing Ajax effectively for renderPartial

How can I make a recently added row clickable in an HTML table?

Tips for making a slide-in animation that doesn't require adjusting the browser size

Stop the duplication of the HTML content to ensure only one copy is saved

A URL that quickly updates live content from a backend script

Ways to eliminate text following a string substitution

My ng-view html is unexpectedly displaying as plain string. What steps should I take to resolve this issue?

What is the best way to show the initial 20 words on the screen, followed by the next 20 words using