54 lines
2.0 KiB
JavaScript
54 lines
2.0 KiB
JavaScript
import React, { useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Text, TextInput, View } from 'react-native';
|
|
|
|
import styles from '../Profile.styles.js';
|
|
|
|
const STRINGS = {
|
|
HINT: `Password must be at least 8 characters and contain a minimum of one lowercase and one uppercase letter, a number, and a symbol. Spaces are allowed. Be memorable and secure!`,
|
|
MATCH: `That's a match!`,
|
|
NO_MATCH: `Well that's not a match...`,
|
|
PLACEHOLDER_PASSWORD: 'password',
|
|
PLACEHOLDER_VERIFY: 're-enter password',
|
|
};
|
|
|
|
export default function PasswordInput({ handleValidPasswordEntry }) {
|
|
const [password, setPassword] = useState(null);
|
|
const [doPasswordsMatch, setPasswordMatch] = useState(null);
|
|
|
|
const _doesVerificationPasswordMatch = (text) => {
|
|
if (!password || password.length < text.length) {
|
|
setPasswordMatch(null);
|
|
return;
|
|
}
|
|
|
|
const result = password === text;
|
|
handleValidPasswordEntry(result && password);
|
|
setPasswordMatch(result);
|
|
};
|
|
|
|
return (
|
|
<View style={[styles.sectionWrap, styles.password, styles.requiredWrap]}>
|
|
<Text style={styles.hintText}>{STRINGS.HINT}</Text>
|
|
<TextInput
|
|
onChangeText={setPassword}
|
|
placeholder={STRINGS.PLACEHOLDER_PASSWORD}
|
|
secureTextEntry
|
|
style={[styles.textInput, styles.requiredInput]}
|
|
/>
|
|
<TextInput
|
|
onChangeText={_doesVerificationPasswordMatch}
|
|
placeholder={STRINGS.PLACEHOLDER_VERIFY}
|
|
secureTextEntry
|
|
style={[styles.textInput, styles.requiredInput]}
|
|
/>
|
|
{doPasswordsMatch === true && <Text style={{ color: 'green' }}>{STRINGS.MATCH}</Text>}
|
|
{doPasswordsMatch === false && <Text style={{ color: 'red' }}>{STRINGS.NO_MATCH}</Text>}
|
|
</View>
|
|
);
|
|
}
|
|
|
|
PasswordInput.propTypes = {
|
|
handleValidPasswordEntry: PropTypes.func.isRequired,
|
|
};
|