@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
185 lines (184 loc) • 6.98 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _vectorIcons = require("@expo/vector-icons");
var _GroupedPillButtons = _interopRequireDefault(require("../../components/internal/GroupedPillButtons"));
var _TextField = _interopRequireDefault(require("../../components/internal/TextField"));
var _useI18n = require("../../hooks/useI18n");
var _spacing = require("../../styles/spacing");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const SignUpSecurityStep = ({
colors,
styles,
nextStep,
prevStep,
password,
confirmPassword,
setPassword,
setConfirmPassword,
showPassword,
showConfirmPassword,
setShowPassword,
setShowConfirmPassword,
setErrorMessage,
validatePassword
}) => {
const passwordRef = (0, _react.useRef)(null);
const {
t
} = (0, _useI18n.useI18n)();
const baseStyles = _spacing.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.header],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.modernTitle, baseStyles.title, {
color: colors.text,
marginBottom: 0,
marginTop: 0
}],
children: t('signup.security.title')
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [styles.modernSubtitle, baseStyles.subtitle, {
color: colors.secondaryText,
marginBottom: 0,
marginTop: 0
}],
children: t('signup.security.subtitle')
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: [baseStyles.container, baseStyles.sectionSpacing, {
gap: _spacing.STEP_INNER_GAP
}],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextField.default, {
ref: passwordRef,
label: t('common.labels.password'),
leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "lock-closed-outline",
size: 24,
color: colors.secondaryText
}),
trailing: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
onPress: () => setShowPassword(!showPassword),
style: stylesheet.iconButton,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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__*/(0, _jsxRuntime.jsx)(_TextField.default, {
label: t('common.labels.confirmPassword'),
leading: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.Ionicons, {
name: "lock-closed-outline",
size: 24,
color: colors.secondaryText
}),
trailing: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
onPress: () => setShowConfirmPassword(!showConfirmPassword),
style: stylesheet.iconButton,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_vectorIcons.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__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [baseStyles.container, baseStyles.sectionSpacing, baseStyles.buttonContainer],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_GroupedPillButtons.default, {
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
})
})]
});
};
var _default = exports.default = SignUpSecurityStep;
const stylesheet = _reactNative.StyleSheet.create({
iconButton: {
padding: 4
},
helperText: {
fontSize: 12,
marginTop: 0
}
});
//# sourceMappingURL=SignUpSecurityStep.js.map