app/forgot.tsx - master - Muip/ProBody

app/forgot.tsx
118 строк4 KB
chmerev
new
14 авг 2024, 12:02
14 авг 2024, 12:02595f266
/* eslint-disable no-useless-escape */
/* eslint-disable no-shadow */
import React, { useState } from 'react';
import AView from '../components/AView';
import ASafeAreaView from '../components/ASafeAreaView';
import AButton from '../components/AButton';
import AInput from '../components/AInput';
import AText from '../components/AText';
import ATextSecondary from '../components/ATextSecondary';
import { TouchableOpacity, StyleSheet } from 'react-native';
import ASeparator from '../components/Space';
import { useRouter } from 'expo-router';
import Colors from '../constants/Colors';
import { Image } from 'expo-image';
import Logo from '../assets/images/logo-main.png';
import ATextHeader from '../components/ATextHeader';
import useApi from '../hooks/useApi';
import * as yup from 'yup';
import { useFormik } from 'formik';
import EmailIcon from '../assets/images/icons/email.svg';
import Background from '../assets/images/background.png'

const Forgot: React.FC = () => {
	const router = useRouter();
	const api = useApi();
	const [isReset, setIsReset] = useState(false);

	const initialValues: { email: string } = { email: '' };

	const validationSchema = yup.object().shape({
		email: yup.string().trim().lowercase()
			.matches(/^[a-zA-Z0-9][a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-.]{0,61}[a-zAZ0-9])?)$/, 'Введите корректный email')
			.required('Email необходим'),
	});

	const handleSubmit = async (values: { email: string }) => {
		try {
			await validationSchema.validate(values);
		} catch (error) {
			// Handle validation errors
			return;
		}

		// Validation passed, submit the form
		try {
			await api.user.forgotPassword({ email: values.email });
			setIsReset(true);
		} catch (error) {
			// Handle API request errors
		}
	};

	const formik = useFormik({
		initialValues,
		validationSchema,
		onSubmit: handleSubmit,
	});

	return (
		<>
			<ASafeAreaView style={{ flex: 1, paddingTop: 0 }}>
				<AView style={{ flex: 1, padding: 18, position: 'relative', height: '100%' }}>
					<Image source={Background} style={styles.backgroundImage} contentFit='fill' />
					<AView style={{ display: 'flex', backgroundColor: 'transparent', alignItems: 'center', marginTop: 40 }}>
						<Image source={Logo} style={{ width: 29, height: 52, marginTop: 20 }} />
						<ASeparator size="small" />
						<ATextHeader style={{ textAlign: 'center' }}>
              Сброс пароля
						</ATextHeader>
						<ASeparator size="small" />

						{!isReset && (
							<>
								<ATextSecondary style={{ textAlign: 'center' }}>
                  Введите адрес электронной почты, который указывали при регистрации и мы вышлем ссылку для сброса пароля.
								</ATextSecondary>
								<ASeparator />

								<AInput
									name="email"
									placeholder="Введите e-mail"
									keyboardType="email-address"
									textContentType="emailAddress"
									onChangeText={formik.handleChange('email')}
									value={formik.values.email}
									autoCorrect={false}
									error={formik.touched.email ? formik.errors.email : ''}
									icon={<EmailIcon width='19px' height='16px' />}
									onBlur={formik.handleBlur('email')}
								/>

								{/* {formik.touched.email && formik.errors.email && (
									<AText style={{ color: 'red', marginTop: 5 }}>{formik.errors.email}</AText>
								)} */}
								
								<ASeparator size="medium" />
								<AButton onPress={formik.handleSubmit} text="Сбросить пароль" />
							</>
						)}
						<ASeparator size="small" />
						<TouchableOpacity onPress={() => router.push('/login')} >
							<AText style={{ color: Colors.link, textAlign: 'center' }}>Вернуться на вход</AText>
						</TouchableOpacity>
					</AView>
				</AView>
			</ASafeAreaView>
		</>
	);
};


export default Forgot;

const styles = StyleSheet.create({
	backgroundImage: {
		position: 'absolute', width: '120%', height: '120%', top: 0, left: 0
	},
});