|
|
// password-field.tsx
// Copyright (C) 2020 Dwayne Harris
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <https://www.gnu.org/licenses/>.
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
|