Password Quality Checker for React Native

PasswordQuality.js

// 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} />