@oxyhq/services/lib/commonjs/ui/screens/RecoverAccountScreen.js

Reusable OxyHQ module to handle authentication, user management, karma system, device-based session management and more 🚀

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = require("react");
var _useI18n = require("../hooks/useI18n");
var _styles = require("../styles");
var _StepBasedScreen = _interopRequireDefault(require("../components/StepBasedScreen"));
var _RecoverRequestStep = _interopRequireDefault(require("./steps/RecoverRequestStep"));
var _RecoverVerifyStep = _interopRequireDefault(require("./steps/RecoverVerifyStep"));
var _RecoverSuccessStep = _interopRequireDefault(require("./steps/RecoverSuccessStep"));
var _RecoverResetPasswordStep = _interopRequireDefault(require("./steps/RecoverResetPasswordStep"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
// Constants
const PIN_LENGTH = 6;

// Main component
const RecoverAccountScreen = ({
  navigate,
  goBack,
  theme,
  oxyServices
}) => {
  const colors = (0, _styles.useThemeColors)(theme);
  const {
    t
  } = (0, _useI18n.useI18n)();

  // Form state
  const [identifier, setIdentifier] = (0, _react.useState)('');
  const [verificationCode, setVerificationCode] = (0, _react.useState)('');
  const [password, setPassword] = (0, _react.useState)('');
  const [confirmPassword, setConfirmPassword] = (0, _react.useState)('');
  const [isLoading, setIsLoading] = (0, _react.useState)(false);
  const [errorMessage, setErrorMessage] = (0, _react.useState)('');
  const [successMessage, setSuccessMessage] = (0, _react.useState)('');

  // Handle back navigation
  const handleBack = (0, _react.useCallback)(() => {
    navigate('SignIn');
  }, [navigate]);

  // Step configurations
  const steps = [{
    id: 'request',
    component: _RecoverRequestStep.default,
    canProceed: () => identifier.trim().length >= 3,
    onEnter: () => {
      // Reset messages when entering request step
      setErrorMessage('');
      setSuccessMessage('');
    }
  }, {
    id: 'verify',
    component: _RecoverVerifyStep.default,
    canProceed: () => verificationCode.length === PIN_LENGTH,
    onEnter: () => {
      setIsLoading(false);
      setSuccessMessage(t('recover.enterCode'));
    }
  }, {
    id: 'reset',
    component: _RecoverResetPasswordStep.default,
    canProceed: () => true
  }, {
    id: 'success',
    component: _RecoverSuccessStep.default,
    canProceed: () => true,
    onEnter: () => {
      setSuccessMessage(t('recover.resetSuccess'));
    }
  }];

  // Handle completion
  const handleComplete = (0, _react.useCallback)(stepData => {
    // Final step completed - could navigate to password reset
    console.log('Account recovery completed');
  }, []);

  // Step data for the reusable component
  const stepData = [
  // Request step
  {
    identifier,
    setIdentifier,
    errorMessage,
    setErrorMessage,
    isLoading,
    setIsLoading
  },
  // Verify step
  {
    verificationCode,
    setVerificationCode,
    errorMessage,
    setErrorMessage,
    successMessage,
    setSuccessMessage,
    isLoading,
    setIsLoading,
    identifier
  },
  // Reset step
  {
    identifier,
    verificationCode,
    password,
    confirmPassword,
    setPassword,
    setConfirmPassword,
    errorMessage,
    setErrorMessage,
    isLoading,
    setIsLoading,
    oxyServices
  },
  // Success step
  {
    successMessage
  }];
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepBasedScreen.default, {
    steps: steps,
    stepData: stepData,
    onComplete: handleComplete,
    navigate: navigate,
    goBack: handleBack,
    theme: theme,
    oxyServices: oxyServices,
    showProgressIndicator: true,
    enableAnimations: true
  });
};
var _default = exports.default = RecoverAccountScreen;
//# sourceMappingURL=RecoverAccountScreen.js.map