@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
180 lines (179 loc) • 6.33 kB
JavaScript
"use strict";
import { useRef } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
import TextField from '../../components/internal/TextField';
import { useI18n } from '../../hooks/useI18n';
import { STEP_INNER_GAP, stepStyles } from '../../styles/spacing';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const SignUpSecurityStep = ({
colors,
styles,
nextStep,
prevStep,
password,
confirmPassword,
setPassword,
setConfirmPassword,
showPassword,
showConfirmPassword,
setShowPassword,
setShowConfirmPassword,
setErrorMessage,
validatePassword
}) => {
const passwordRef = useRef(null);
const {
t
} = useI18n();
const baseStyles = stepStyles;
const handlePasswordChange = text => {
setPassword(text);
setErrorMessage('');
};
const handleConfirmPasswordChange = text => {
setConfirmPassword(text);
setErrorMessage('');
};
const handleNext = () => {
if (!password) {
setErrorMessage(t('signup.password.required') || 'Please enter a password');
setTimeout(() => passwordRef.current?.focus(), 0);
return;
}
if (!validatePassword(password)) {
setErrorMessage(t('signup.password.minLength') || 'Password must be at least 8 characters long');
return;
}
if (!confirmPassword) {
setErrorMessage(t('signup.password.confirmRequired') || 'Please confirm your password');
return;
}
if (password !== confirmPassword) {
setErrorMessage(t('signup.password.mismatch') || 'Passwords do not match');
return;
}
nextStep();
};
const passwordError = password && !validatePassword(password) ? t('signup.password.minLength') || 'Password must be at least 8 characters long' : undefined;
const confirmPasswordError = confirmPassword && password !== confirmPassword ? t('signup.password.mismatch') || 'Passwords do not match' : undefined;
return /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsxs(View, {
style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.header],
children: [/*#__PURE__*/_jsx(Text, {
style: [styles.modernTitle, baseStyles.title, {
color: colors.text,
marginBottom: 0,
marginTop: 0
}],
children: t('signup.security.title')
}), /*#__PURE__*/_jsx(Text, {
style: [styles.modernSubtitle, baseStyles.subtitle, {
color: colors.secondaryText,
marginBottom: 0,
marginTop: 0
}],
children: t('signup.security.subtitle')
})]
}), /*#__PURE__*/_jsxs(View, {
style: [baseStyles.container, baseStyles.sectionSpacing, {
gap: STEP_INNER_GAP
}],
children: [/*#__PURE__*/_jsx(TextField, {
ref: passwordRef,
label: t('common.labels.password'),
leading: /*#__PURE__*/_jsx(Ionicons, {
name: "lock-closed-outline",
size: 24,
color: colors.secondaryText
}),
trailing: /*#__PURE__*/_jsx(TouchableOpacity, {
onPress: () => setShowPassword(!showPassword),
style: stylesheet.iconButton,
children: /*#__PURE__*/_jsx(Ionicons, {
name: showPassword ? 'eye-off-outline' : 'eye-outline',
size: 20,
color: colors.secondaryText
})
}),
value: password,
onChangeText: handlePasswordChange,
secureTextEntry: !showPassword,
passwordStrength: true,
autoCapitalize: "none",
autoCorrect: false,
testID: "signup-password-input",
variant: "filled",
error: passwordError,
helperText: t('signup.password.helper') || 'At least 8 characters',
onSubmitEditing: handleNext,
autoFocus: true,
accessibilityLabel: t('common.labels.password'),
accessibilityHint: t('signup.password.helper') || 'Enter a password, at least 8 characters long',
style: {
marginBottom: 0
}
}), /*#__PURE__*/_jsx(TextField, {
label: t('common.labels.confirmPassword'),
leading: /*#__PURE__*/_jsx(Ionicons, {
name: "lock-closed-outline",
size: 24,
color: colors.secondaryText
}),
trailing: /*#__PURE__*/_jsx(TouchableOpacity, {
onPress: () => setShowConfirmPassword(!showConfirmPassword),
style: stylesheet.iconButton,
children: /*#__PURE__*/_jsx(Ionicons, {
name: showConfirmPassword ? 'eye-off-outline' : 'eye-outline',
size: 20,
color: colors.secondaryText
})
}),
value: confirmPassword,
onChangeText: handleConfirmPasswordChange,
secureTextEntry: !showConfirmPassword,
autoCapitalize: "none",
autoCorrect: false,
testID: "signup-confirm-password-input",
variant: "filled",
error: confirmPasswordError,
helperText: confirmPassword && password !== confirmPassword ? t('signup.password.mismatch') || 'Passwords do not match' : undefined,
onSubmitEditing: handleNext,
accessibilityLabel: t('common.labels.confirmPassword'),
accessibilityHint: t('signup.password.confirmHint') || 'Re-enter your password to confirm',
style: {
marginBottom: 0
}
})]
}), /*#__PURE__*/_jsx(View, {
style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer],
children: /*#__PURE__*/_jsx(GroupedPillButtons, {
buttons: [{
text: t('common.actions.back'),
onPress: prevStep,
icon: 'arrow-back',
variant: 'transparent'
}, {
text: t('common.actions.next'),
onPress: handleNext,
icon: 'arrow-forward',
variant: 'primary',
disabled: !password || !confirmPassword || password !== confirmPassword
}],
colors: colors
})
})]
});
};
export default SignUpSecurityStep;
const stylesheet = StyleSheet.create({
iconButton: {
padding: 4
},
helperText: {
fontSize: 12,
marginTop: 0
}
});
//# sourceMappingURL=SignUpSecurityStep.js.map