Skip to content

Instantly share code, notes, and snippets.

@ahmadmarafa
Created October 18, 2020 18:35
Show Gist options
  • Save ahmadmarafa/4daec079d7492bdf7eff4f3809ec2253 to your computer and use it in GitHub Desktop.
Save ahmadmarafa/4daec079d7492bdf7eff4f3809ec2253 to your computer and use it in GitHub Desktop.
react circular password strength indicator
import React, { Component } from 'react'
const PasswordPower = (props) => {
const tests = [
[/^(?=.*[\d])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*])[\w!@#$%^&*]{8,}$/, 'strong password', '✓', '#a5dc86' , 0],
[/^((?=.*[a-z])(?=.*[A-Z])(?=.*[0-9]).{6,})$/, "medium", "!", '#f8bb86' , 16],
[/^[a-zA-Z0-9\-\_!@#$%^&*\.\(\)]{1,}$/, "week password", "❌", '#f27474' , 50]
]
if (props.password) {
for (let test of tests) {
if (props.password.match(test[0])) {
return <div style={{width: '35px' , height: '35px' }} title={test[1]}>
<svg height="100%" width="100%" viewBox="0 0 32 32" >
<circle cx="50%" cy="50%" fill="none" strokeWidth="2" r="9" stroke="#E6ECF0"></circle>
<text x="50%" y="50%" fontSize="8" fill={test[3]} textAnchor="middle" dy=".3em">{test[2]}</text>
<circle cx="50%" cy="50%" fill="none" strokeWidth="2" r="9" stroke={test[3]} strokeLinecap="round" style={{
strokeDashoffset: test[4],
strokeDasharray: 56.5487
}}></circle>
</svg>
</div>;
}
}
}
return null
};
// usage <PasswordPower password={this.state.password} />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment