Created
October 23, 2017 02:05
-
-
Save amackintosh/257fd44fac2c425167fdb619a6387d27 to your computer and use it in GitHub Desktop.
Password Quality Checker for React Native
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Password Quality Checker | |
// Inspired by Amy - @thecrafty_coder on Twitter | |
import React from 'react' | |
import { View, Text } from 'react-native' | |
const testPassword = (p) => { | |
const hasSpecial = /[^a-zA-Z0-9]/.test(p) | |
const hasNumber = /[0-9]/.test(p) | |
const hasMixedCase = /[A-Z]/.test(p) && /[a-z]/.test(p) | |
// TOO SHORT | |
if (p.length < 8) return 0 | |
// WEAK | |
if (p.length <= 10) { | |
if (hasSpecial && hasNumber && hasMixedCase) return 3 | |
if (hasSpecial || hasNumber || hasMixedCase) return 2 | |
if (!hasSpecial && !hasNumber && !hasMixedCase) return 1 | |
} | |
// OKAY | |
if (p.length <= 12) { | |
if (hasSpecial && hasNumber && hasMixedCase) return 6 | |
if (hasSpecial || hasNumber || hasMixedCase) return 5 | |
if (!hasSpecial && !hasNumber && !hasMixedCase) return 4 | |
} | |
// GOOD | |
if (p.length <= 14) { | |
if (hasSpecial && hasNumber && hasMixedCase) return 9 | |
if (hasSpecial || hasNumber || hasMixedCase) return 8 | |
if (!hasSpecial && !hasNumber && !hasMixedCase) return 7 | |
} | |
// EXCELLENT | |
if (p.length > 14) { | |
if (hasSpecial && hasNumber && hasMixedCase) return 12 | |
if (hasSpecial || hasNumber || hasMixedCase) return 11 | |
if (!hasSpecial && !hasNumber && !hasMixedCase) return 10 | |
} | |
} | |
export const PasswordQuality = ({ test }) => { | |
if (!test) return null | |
const score = testPassword(test) | |
const quality = { | |
0: { label: 'Too short', color: '#FF0000' }, | |
1: { label: 'Weak', color: '#FF2300' }, | |
2: { label: 'Weak', color: '#FF4600' }, | |
3: { label: 'Weak', color: '#FF6900' }, | |
4: { label: 'Okay', color: '#FFAF00' }, | |
5: { label: 'Okay', color: '#FFD300' }, | |
6: { label: 'Okay', color: '#FFF600' }, | |
7: { label: 'Good', color: '#E5FF00' }, | |
8: { label: 'Good', color: '#9FFF00' }, | |
9: { label: 'Good', color: '#7CFF00' }, | |
10: { label: 'Excellent', color: '#68FF00' }, | |
11: { label: 'Excellent', color: '#45FF00' }, | |
12: { label: 'Excellent', color: '#00FF00' }, | |
} | |
return ( | |
<View style={{ flex: 0, height: 15, flexDirection: 'row', border: 1 }}> | |
<View style={{ flex: +score, backgroundColor: quality[score].color }}> | |
<Text style={{ fontSize: 11 }}>{quality[score].label}</Text> | |
</View> | |
<View style={{ flex: 12 - score }} /> | |
</View> | |
) | |
} | |
// const passwords = [ | |
// // small | |
// 'Pass\$word1', '!Passwor2d', 'Passwo3\$rd', '4Password%', 'Password', 'Password1', 'password', 'PASSWORD1', 'P%wor1', 'Short1-', 'allLetters', | |
// 'nocaps123-.', 'Valid-Password-1', | |
// // medium | |
// 'Pass\$word1Pass\$word1', '!Passwor2d!Passwor2d', 'Passwo3\$rdPasswo3\$rd', '4Password%4Password%', 'PasswordPassword', 'Password1Password1', | |
// 'passwordpassword', 'PASSWORD1PASSWORD1', 'P%wor1P%wor1', 'Short1-Short1-', 'allLettersallLetters', 'nocaps123-.nocaps123-.', | |
// 'Valid-Password-1Valid-Password-1', | |
// // large | |
// 'Pass\$word1Pass\$word1Pass\$word1', '!Passwor2d!Passwor2dPasswor2d', 'Passwo3\$rdPasswo3\$rdPasswo3\$rd', '4Password%4Password%4Password%', | |
// 'PasswordPasswordPassword', 'Password1Password1Password1', 'passwordpasswordpassword', 'PASSWORD1PASSWORD1PASSWORD1', 'P%wor1P%wor1P%wor1', | |
// 'Short1-Short1-Short1-', 'allLettersallLettersallLetters', 'nocaps123-.nocaps123-.nocaps123-.', 'Valid-Password-1Valid-Password-1Valid-Password-1', | |
// ] | |
// passwords.forEach((pwd) => | |
// console.log('Password: ' + pwd, '=> ' + testPassword(pwd)) | |
// ) | |
// USAGE: | |
// Step 1: Be in your component, rendering | |
// Step 2: | |
// <PasswordQuality test={this.props.password} /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment