-
Notifications
You must be signed in to change notification settings - Fork 12
/
PasswordValidatorIndicator.jsx
53 lines (48 loc) · 1.77 KB
/
PasswordValidatorIndicator.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import React from 'react';
import { useTranslation } from 'react-i18next'
import {
CheckCircle as CorrectIcon, Cancel as WrongIcon
} from '@mui/icons-material';
import { ERROR_RED, BLUE } from '../../common/constants';
import { merge } from 'lodash';
const correctIcon = <CorrectIcon color='primary' fontSize='inherit'/>;
const incorrectIcon = <WrongIcon fontSize='inherit' style={{color: ERROR_RED}}/>;
const Indicator = (predicate, label) => {
const { t } = useTranslation()
const commonSpanStyles = {marginLeft: '5px'}
const getStyles = predicate => predicate ? {color: BLUE} : {color: ERROR_RED};
return (
<div className='flex-vertical-center'>
{
predicate ? correctIcon : incorrectIcon
}
<span style={merge(commonSpanStyles, getStyles(predicate))}>
{label}
</span>
</div>
)}
const PasswordValidatorIndicator = ({password, strength, minStrength, minStrengthLabel}) => {
const hasMinLength = Boolean(password && password.length >= 8)
const hasNumber = Boolean(password && password.match(new RegExp(/[0-9]/g)))
const hasAlphabet = Boolean(password && password.match(new RegExp(/[a-zA-Z]/g)))
const isMinStrength = strength >= minStrength
return (
<React.Fragment>
<div className='col-md-12 no-side-padding' style={{fontSize: '12px'}}>
{
Indicator(hasMinLength, t('user.auth.password_length_error'))
}
{
Indicator(hasNumber, t('user.auth.password_number_error'))
}
{
Indicator(hasAlphabet, t('user.auth.password_alpha_error'))
}
{
minStrength && Indicator(isMinStrength, t('user.auth.password_strength_error', {strength: minStrengthLabel}))
}
</div>
</React.Fragment>
)
}
export default PasswordValidatorIndicator;