Skip to content

Commit

Permalink
Update RegisterForm.jsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mich47
Mich47 committed May 4, 2023
1 parent f3f49a8 commit c935fc2
Showing 1 changed file with 176 additions and 161 deletions.
337 changes: 176 additions & 161 deletions src/components/RegisterForm/RegisterForm.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { useDispatch } from 'react-redux';
import { useDispatch, useSelector } from 'react-redux';
import { toast } from 'react-toastify';
import * as Yup from 'yup';
import { signupUser } from '../../redux/auth/auth.operations';
Expand All @@ -13,6 +13,8 @@ import { AuthNavigate } from 'components/AuthNavigate/AuthNavigate';
import { NAME_REGEX, PASSWORD_REGEX } from '../../constants/joiRegex';
import { useState } from 'react';
import icon from '../../images/sprite.svg';
import { selectIsLoading } from 'redux/auth/auth.selectors';
import { Loader } from 'components/Loader/Loader';

const RegisterValidationSchema = Yup.object().shape({
name: Yup.string()
Expand All @@ -39,176 +41,189 @@ export const RegisterForm = () => {
const [passwordValidationCompleted, setPasswordValidationCompleted] =
useState(false);

const isLoading = useSelector(selectIsLoading);

return (
<>
<Formik
initialValues={{ name: '', email: '', password: '' }}
validationSchema={RegisterValidationSchema}
onSubmit={async (values, { setSubmitting, resetForm }) => {
try {
await dispatch(
signupUser({
name: values.name,
email: values.email,
password: values.password,
})
).unwrap();
setSubmitting(false);
resetForm();
} catch (error) {
setSubmitting(false);
toast.error(
error || "It seems like your goose didn't fly. Please try again."
);
}
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
}) => (
<STC.Box>
<STC.Container>
<STC.Form onSubmit={handleSubmit} autoComplete="on">
<STC.Title>Sign Up</STC.Title>
<STC.Label htmlFor="name">
<STC.Span error={errors.name} touched={touched.name}>
Name
</STC.Span>
<STC.Input
id="name"
name="name"
type="text"
onBlur={event => {
handleBlur(event);
setNameValidationCompleted(true);
}}
value={values.name}
onChange={handleChange}
placeholder="Enter your name"
error={errors.name}
touched={touched.name}
/>
<STC.Errors error={errors.name && touched.name}>
{nameValidationCompleted &&
(errors.name && touched.name ? (
<span>{errors.name}</span>
) : (
<span>This is an CORRECT name</span>
))}
</STC.Errors>
</STC.Label>
{isLoading && <Loader />}
{!isLoading && (
<Formik
initialValues={{ name: '', email: '', password: '' }}
validationSchema={RegisterValidationSchema}
onSubmit={async (values, { setSubmitting, resetForm }) => {
try {
await dispatch(
signupUser({
name: values.name,
email: values.email,
password: values.password,
})
).unwrap();
setSubmitting(false);
resetForm();
} catch (error) {
setSubmitting(false);
toast.error(
error ||
"It seems like your goose didn't fly. Please try again."
);
}
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
<STC.Box>
<STC.Container>
<STC.Form onSubmit={handleSubmit} autoComplete="on">
<STC.Title>Sign Up</STC.Title>
<STC.Label htmlFor="name">
<STC.Span error={errors.name} touched={touched.name}>
Name
</STC.Span>
<STC.Input
id="name"
name="name"
type="text"
onBlur={event => {
handleBlur(event);
setNameValidationCompleted(true);
}}
value={values.name}
onChange={handleChange}
placeholder="Enter your name"
error={errors.name}
touched={touched.name}
/>
<STC.Errors error={errors.name && touched.name}>
{nameValidationCompleted &&
(errors.name && touched.name ? (
<span>{errors.name}</span>
) : (
<span>This is an CORRECT name</span>
))}
</STC.Errors>
</STC.Label>

<STC.Label htmlFor="email">
<STC.Span error={errors.email} touched={touched.email}>
Email
</STC.Span>
<STC.Input
id="email"
name="email"
type="email"
value={values.email}
onBlur={event => {
handleBlur(event);
setEmailValidationCompleted(true);
}}
onChange={handleChange}
placeholder="Enter email"
error={errors.email}
touched={touched.email}
/>
<STC.Errors error={errors.email && touched.email}>
{emailValidationCompleted &&
(errors.email && touched.email ? (
<span>{errors.email}</span>
) : (
<span>This is an CORRECT email</span>
))}
</STC.Errors>
</STC.Label>
<STC.Label htmlFor="email">
<STC.Span error={errors.email} touched={touched.email}>
Email
</STC.Span>
<STC.Input
id="email"
name="email"
type="email"
value={values.email}
onBlur={event => {
handleBlur(event);
setEmailValidationCompleted(true);
}}
onChange={handleChange}
placeholder="Enter email"
error={errors.email}
touched={touched.email}
/>
<STC.Errors error={errors.email && touched.email}>
{emailValidationCompleted &&
(errors.email && touched.email ? (
<span>{errors.email}</span>
) : (
<span>This is an CORRECT email</span>
))}
</STC.Errors>
</STC.Label>

<STC.Label
htmlFor="password"
// error={errors.password && touched.password}
>
<STC.Span error={errors.password} touched={touched.password}>
Password
</STC.Span>
<STC.Input
id="password"
name="password"
type={isPass ? 'password' : 'text'}
required
autoComplete="off"
placeholder="Enter password"
value={values.password}
onChange={handleChange}
onBlur={event => {
handleBlur(event);
setPasswordValidationCompleted(true);
}}
<STC.Label
htmlFor="password"
// error={errors.password && touched.password}
error={errors.password}
touched={touched.password}
/>
<STC.Errors error={errors.password && touched.password}>
{passwordValidationCompleted &&
(errors.password && touched.password ? (
<span>{errors.password}</span>
>
<STC.Span
error={errors.password}
touched={touched.password}
>
Password
</STC.Span>
<STC.Input
id="password"
name="password"
type={isPass ? 'password' : 'text'}
required
autoComplete="off"
placeholder="Enter password"
value={values.password}
onChange={handleChange}
onBlur={event => {
handleBlur(event);
setPasswordValidationCompleted(true);
}}
// error={errors.password && touched.password}
error={errors.password}
touched={touched.password}
/>
<STC.Errors error={errors.password && touched.password}>
{passwordValidationCompleted &&
(errors.password && touched.password ? (
<span>{errors.password}</span>
) : (
<span>This is an CORRECT password</span>
))}
</STC.Errors>

<STC.ButtonEye
type="button"
onClick={() => {
isPass ? setIsPass(false) : setIsPass(true);
}}
>
{isPass ? (
<STC.SvgEye>
<use xlinkHref={`${icon}#closed-eye`}></use>
</STC.SvgEye>
) : (
<span>This is an CORRECT password</span>
))}
</STC.Errors>
<STC.SvgEye>
<use xlinkHref={`${icon}#opened-eye`}></use>
</STC.SvgEye>
)}
</STC.ButtonEye>
</STC.Label>

<STC.ButtonEye
type="button"
onClick={() => {
isPass ? setIsPass(false) : setIsPass(true);
}}
<STC.Button
type="submit"
disabled={isSubmitting || isLoading}
>
{isPass ? (
<STC.SvgEye>
<use xlinkHref={`${icon}#closed-eye`}></use>
</STC.SvgEye>
) : (
<STC.SvgEye>
<use xlinkHref={`${icon}#opened-eye`}></use>
</STC.SvgEye>
)}
</STC.ButtonEye>
</STC.Label>

<STC.Button type="submit">
<STC.BtnSpan>Sign Up</STC.BtnSpan>
<STC.Svg>
<use href={`${logInIcon}#log-in`} />
</STC.Svg>
</STC.Button>
</STC.Form>
<STC.BtnSpan>Sign Up</STC.BtnSpan>
<STC.Svg>
<use href={`${logInIcon}#log-in`} />
</STC.Svg>
</STC.Button>
</STC.Form>

<AuthNavigate route="/login" title="Log In" />
<AuthNavigate route="/login" title="Log In" />

<LoginImg
alt="LoginGoose"
src={`${LoginGoose}`}
width="353"
height="330"
/>
<LoginImg2 width="50" height="50">
<use xlinkHref={`${logInCloud}#${'login-cloud'}`} />
</LoginImg2>
<Text>
Quickly <Span>register</Span> and familiarize yourself with the
application!
</Text>
</STC.Container>
</STC.Box>
)}
</Formik>
<LoginImg
alt="LoginGoose"
src={`${LoginGoose}`}
width="353"
height="330"
/>
<LoginImg2 width="50" height="50">
<use xlinkHref={`${logInCloud}#${'login-cloud'}`} />
</LoginImg2>
<Text>
Quickly <Span>register</Span> and familiarize yourself with
the application!
</Text>
</STC.Container>
</STC.Box>
)}
</Formik>
)}
</>
);
};

0 comments on commit c935fc2

Please sign in to comment.