Se creó la página para resetear la contraseña

import { useEffect, useState, useCallback } from "react";

import { SlideControl } from "../../common/components/slide_control";

import { ResetPasswordForm } from "../components/reset_password_form";

import { View, StyleSheet } from "react-native";

import { CodeForm } from "../components/code_form";

import { useDataContext } from "../../common/contexts/data_context";

import { useForm } from "react-hook-form";

import { ApiRequestStatus } from "../../common/constants/api_request_states";

import { PasswordForm } from "../components/password_form";

interface ResetPasswordSlide {

  slide: JSX.Element;

  callback: () => Promise<void>;

  onError?: () => void;

}

export interface ResetPasswordFormValues {

  email: string;

  newPassword: string;

  code: string;

}

export const useResetPassword = () => {

  const { authRepository } = useDataContext();

  const { control, handleSubmit, getValues, setError, setValue } = useForm<ResetPasswordFormValues>({

    defaultValues: {

      email: "",

      newPassword: "",

      code: "",

    }

  });

  const [status, setStatus] = useState(ApiRequestStatus.IDLE);

  const setLoading = async () => {

    setStatus(ApiRequestStatus.LOADING);

  };

  const getResetCode = async () => {

    await setLoading();

    if (getValues().email) {

      setError("email", { type: "manual", message: "Email is required" });

      throw new Error("Email is required");

    }

    await authRepository!.getResetCode(getValues().email);

    setStatus(ApiRequestStatus.SUCCESS);

  };

  const validSubmit = async (data: ResetPasswordFormValues) => {

    console.log("Valid Submit", data);

  };

  const errorSubmit = async () => {

  };

  const onSubmit = async () => {

    await setLoading();

    await handleSubmit(validSubmit, errorSubmit)();

  };

  return {

    control,

    getResetCode,

    setValue,

    onSubmit

  };

}

const useResetPasswordControl = () => {

  const { control, getResetCode, setValue, onSubmit } = useResetPassword();

  const slides: ResetPasswordSlide[] = [

    {

      slide: <ResetPasswordForm control={control}/>,

      callback: async () => {

        //await getResetCode();

      }

    },

    {

      slide: <CodeForm setValue={setValue}/>,

      callback: async () => {

        console.log("Reset Password 1");

      }

    },

    {

      slide: <PasswordForm control={control}/>,

      callback: async () => {

        onSubmit();

      }

    }

  ];

  const [step, setStep] = useState(0);

  const [slide, setSlide] = useState(slides[step]);

  const [isLast, setIsLast] = useState(step === slides.length - 1);

  const [isFirst, setIsFirst] = useState(step === 0);

  const onNext = async () => {

    try {

      await slide.callback();

      setStep(step + 1);

    } catch (error) {

      console.log(error);

      slide.onError && slide.onError();

    }

  };

  const onPrevious = () => {

    setStep(step - 1);

  };

  const onFinish = () => {

    try {

      slide.callback();

    } catch (e) {

      slide.onError && slide.onError();

    }

  };

  useEffect(() => {

    setSlide(slides[step]);

    setIsFirst(step === 0);

    setIsLast(step === slides.length - 1);

  }, [step]);

  return { onNext, onFinish, slide: slide.slide, isFirst, isLast, onPrevious };

};

export const ResetPasswordPage = () => {

  const { onNext, onFinish, slide, isFirst, isLast, onPrevious } =

    useResetPasswordControl();

  return (

    <View style={styles.mainContainer}>

      {slide}

      <SlideControl

        onFinish={onFinish}

        onNext={onNext}

        onPrevious={onPrevious}

        isFirst={isFirst}

        isLast={isLast}

      ></SlideControl>

    </View>

  );

};

const styles = StyleSheet.create({

  mainContainer: {

    flex: 1,

    alignItems: "center",

    padding: 20,

  },

});