import { Formik } from "formik"; import React from "react"; import { useMutation } from "react-query"; import { TextField } from "../../form-fields/TextField"; import { defaultMutationFn } from "../../Providers"; import { FormSpacer } from "../../ui/FormSpacer"; import { KeyboardAwareScrollView } from "../../ui/KeyboardAwareScrollView"; import { LoadingButton } from "../../ui/LoadingButton"; import { MyButton } from "../../ui/MyButton"; import { ScreenWrapper } from "../../ui/ScreenWrapper"; import { AuthStackNav } from "./AuthNav"; const yup = require("yup"); interface EmailLoginProps {} const schema = yup.object().shape({ email: yup.string().required(), password: yup.string().required(), }); export const EmailLogin: React.FC<AuthStackNav<"EmailLogin">> = ({ navigation, }) => { const [mutate, { isLoading }] = useMutation(defaultMutationFn); return ( <ScreenWrapper> <KeyboardAwareScrollView keyboardShouldPersistTaps="handled"> <Formik validationSchema={schema} validateOnBlur={false} validateOnChange={false} initialValues={{ email: "", password: "" }} onSubmit={async (values) => { const tokens = await mutate(["/email/login", values, "POST"]); navigation.navigate("tokens", tokens); }} > {({ handleSubmit }) => ( <> <FormSpacer> <TextField label="email" textContentType="emailAddress" autoCapitalize="none" name="email" /> </FormSpacer> <FormSpacer> <TextField autoCapitalize="none" label="password" secureTextEntry textContentType="password" name="password" /> </FormSpacer> <LoadingButton isLoading={isLoading} onPress={() => handleSubmit()} > login </LoadingButton> </> )} </Formik> </KeyboardAwareScrollView> </ScreenWrapper> ); };