Show password requirement error during input

[Ashesh3]

Fixes #3907

@coronasafe/care-fe-code-reviewers @coronasafe/code-reviewers

[netlify]

✅ Deploy Preview for care-egov-staging ready!

Name	Link
🔨 Latest commit	f3bb9c1
🔍 Latest deploy log	https://app.netlify.com/sites/care-egov-staging/deploys/636bf8d567547d0009d475ab
😎 Deploy Preview	https://deploy-preview-3934--care-egov-staging.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
care-storybook	✅ Ready (Inspect)	Visit Preview	Nov 9, 2022 at 7:02PM (UTC)

[nihal467]

@Ashesh3 the PR LGTM, and it serve the purpose.

Iam marking it team discussion required since i feel like making it similar to the username validation is good, don't work on this comment until it is approved in today's EOD

[nihal467]

@Ashesh3 as we discussed in the EOD, make the requirement of password been shown similar to the username

[Ashesh3]

@nihal467 Done.

[nihal467]

@Ashesh3

even if the password column is empty, it is saying confirmed. can you fix it, like someone type a single character, then only this condition start coming

[Ashesh3]

@nihal467 Done.

[nihal467]

test approved

[khavinshankar]

@Ashesh3 can you make a separate component or function for the validation rules, something like,

const validationRule = (valid, content) => {
return (
  <div>
      {valid ? (
        <i className="fas fa-circle-xmark text-red-500" />
      ) : (
        <i className="fas fa-circle-check text-green-500" />
      )}{" "}
      <span
        className={clsx(
          valid
            ? "text-red-500"
            : "text-primary-500"
        )}
      >
        {content}
      </span>
    </div>
)
}

[github-actions]

👋 Hi, @Ashesh3,
Conflicts have been detected against the base branch. Please rebase your branch against the base branch.

---

This message is automatically generated by prince-chrismc/label-merge-conflicts-action so don't hesitate to report issues/improvements there.

[Ashesh3]

@Ashesh3 can you make a separate component or function for the validation rules, something like,

const validationRule = (valid, content) => {
return (
  <div>
      {valid ? (
        <i className="fas fa-circle-xmark text-red-500" />
      ) : (
        <i className="fas fa-circle-check text-green-500" />
      )}{" "}
      <span
        className={clsx(
          valid
            ? "text-red-500"
            : "text-primary-500"
        )}
      >
        {content}
      </span>
    </div>
)
}

That's a good suggestion, definitely makes the code cleaner. Done!

[sonarcloud]

SonarCloud Quality Gate failed.   

0 Bugs
0 Vulnerabilities
1 Security Hotspot
0 Code Smells

No Coverage information
0.1% Duplication