@oxyhq/services
Version:
Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀
139 lines (138 loc) • 4.28 kB
JavaScript
"use strict";
import { View, Text, StyleSheet } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import GroupedPillButtons from '../../components/internal/GroupedPillButtons';
import PinInput from '../../components/internal/PinInput';
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 RecoverVerifyStep = ({
colors,
styles,
nextStep,
prevStep,
verificationCode,
setVerificationCode,
errorMessage,
setErrorMessage,
successMessage,
setSuccessMessage,
isLoading,
setIsLoading,
identifier
}) => {
const {
t
} = useI18n();
const baseStyles = stepStyles;
const handleVerifyCode = async () => {
setErrorMessage('');
setSuccessMessage('');
if (verificationCode.length !== 6) {
setErrorMessage(t('recover.enterCode'));
return;
}
// For recovery via TOTP, proceed to reset step; server will validate during reset
nextStep();
};
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('recover.verify.title')
}), /*#__PURE__*/_jsx(Text, {
style: [styles.modernSubtitle, baseStyles.subtitle, {
color: colors.secondaryText,
marginBottom: 0,
marginTop: 0
}],
children: t('recover.enterCode')
})]
}), /*#__PURE__*/_jsxs(View, {
style: [baseStyles.container, baseStyles.sectionSpacing],
children: [/*#__PURE__*/_jsx(View, {
style: stylesheet.pinInputWrapper,
children: /*#__PURE__*/_jsx(PinInput, {
value: verificationCode,
onChange: setVerificationCode,
length: 6,
disabled: isLoading,
autoFocus: true,
colors: colors
})
}), successMessage && /*#__PURE__*/_jsxs(View, {
style: [stylesheet.messageContainer, {
backgroundColor: colors.success + '10',
borderColor: colors.success + '30'
}],
children: [/*#__PURE__*/_jsx(Ionicons, {
name: "checkmark-circle",
size: 20,
color: colors.success
}), /*#__PURE__*/_jsx(Text, {
style: [styles.footerText, {
color: colors.success,
fontSize: 14
}],
children: successMessage
})]
}), errorMessage && /*#__PURE__*/_jsxs(View, {
style: [stylesheet.messageContainer, {
backgroundColor: colors.error + '10',
borderColor: colors.error + '30'
}],
children: [/*#__PURE__*/_jsx(Ionicons, {
name: "alert-circle",
size: 20,
color: colors.error
}), /*#__PURE__*/_jsx(Text, {
style: [styles.footerText, {
color: colors.error,
fontSize: 14
}],
children: errorMessage
})]
})]
}), /*#__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('recover.verify.action'),
onPress: handleVerifyCode,
icon: 'checkmark-circle-outline',
variant: 'primary',
loading: isLoading,
disabled: isLoading || verificationCode.length !== 6
}],
colors: colors
})
})]
});
};
export default RecoverVerifyStep;
const stylesheet = StyleSheet.create({
pinInputWrapper: {
marginBottom: 0,
marginTop: 0
},
messageContainer: {
flexDirection: 'row',
alignItems: 'center',
marginTop: STEP_INNER_GAP,
padding: STEP_INNER_GAP,
borderRadius: 8,
borderWidth: 1,
gap: STEP_INNER_GAP
}
});
//# sourceMappingURL=RecoverVerifyStep.js.map