[ABANDONED] React/Redux front end for the Flexor social network.
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
import React, { FC, ReactNode } from 'react' import { useSelector, useDispatch } from 'react-redux' import zxcvbn from 'zxcvbn' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faKey } from '@fortawesome/free-solid-svg-icons' import { useTheme } from '../../hooks' import { setFieldValue } from '../../actions/forms' import { getFieldValue, getFieldNotification } from '../../selectors/forms' import { AppState, FormNotification, NotificationType } from '../../types'
import FieldLabel from '../../components/controls/field-label' import FormNotificationComponent from '../../components/form-notification'
export interface Props { placeholder?: string userInputs?: string[] showStrength?: boolean }
const PasswordField: FC<Props> = ({ placeholder, userInputs = [], showStrength = true, }) => { const theme = useTheme() const value = useSelector<AppState, string>(state => getFieldValue<string>(state, 'password', '')) const notification = useSelector<AppState, FormNotification | undefined>(state => getFieldNotification(state, 'password')) const dispatch = useDispatch()
let passwordMessage: ReactNode | undefined let successState = false let errorState = false
if (value && showStrength) { const { score } = zxcvbn(value, userInputs)
switch (score) { case 0: errorState = true passwordMessage = <span>Strength: <span style={{ color: theme.red }}>Unusable</span></span> break case 1: errorState = true passwordMessage = <span>Strength: <span style={{ color: theme.red }}>Not good</span></span> break case 2: passwordMessage = <span>Strength: <span>OK</span></span> break case 3: successState = true passwordMessage = <span>Strength: <span style={{ color: theme.green }}>Good!</span></span> break case 4: successState = true passwordMessage = <span>Strength: <span style={{ color: theme.green }}>LIT</span></span> break } }
if (notification) { switch (notification.type) { case NotificationType.Success: errorState = false successState = true case NotificationType.Error: errorState = true successState = false } }
const color = successState ? theme.green : errorState ? theme.red : theme.primary
const helpText = () => { if (notification) return <FormNotificationComponent notification={notification} /> if (passwordMessage) return <p className="help">{passwordMessage}</p> }
return ( <div className="field"> <FieldLabel>Password</FieldLabel> <div className="control-container"> <div className="control-icon" style={{ backgroundColor: color, color: theme.primaryAlternate }}> <FontAwesomeIcon icon={faKey} /> </div> <div className="control"> <input style={{ backgroundColor: theme.backgroundSecondary, borderColor: color, color: theme.text }} type="password" placeholder={placeholder} value={value} onChange={e => dispatch(setFieldValue('password', e.target.value))} /> </div> </div> {helpText()} </div> ) }
export default PasswordField
|