Merge pull request #63 from Yura-Platonov/forgotPass

Forgot pass
eTachkaMarketplace · Jan 4, 2024 · 5f2edd9 · 5f2edd9
2 parents 69b82c8 + 94b2939
commit 5f2edd9
Show file tree

Hide file tree

Showing 10 changed files with 375 additions and 20 deletions.
diff --git a/src/components/App.jsx b/src/components/App.jsx
@@ -12,6 +12,7 @@ import AdvertisementPage from '../pages/AdvertisementPage/AdvertisementPage';
 import { useDispatch } from 'react-redux';
 import { refresh } from 'redux/auth/authSlice';
 import SearchPage from 'pages/SearchPage/SearchPage';
+import ChangePassPage from 'pages/ChangePassPage/ChangePassPage';
 
 export function App() {
   const dispatch = useDispatch();
@@ -33,6 +34,14 @@ export function App() {
                 </PublickRoute>
               }
             />
+            <Route
+              path="/forgot-password/:code?"
+              element={
+                <PublickRoute redirectTo="/account">
+                  <ChangePassPage />
+                </PublickRoute>
+              }
+            />
             <Route path="/search" element={<SearchPage />} />
             <Route path="/AdvertisementPage" element={<AdvertisementPage />} />
             <Route path="/" element={<PrivateRoute />}>

diff --git a/src/components/ChangePass/ChangePass.jsx b/src/components/ChangePass/ChangePass.jsx
@@ -0,0 +1,3 @@
+export default function ChangePass() {
+  return <div></div>;
+}
diff --git a/src/components/ChangePass/ChangePass.styled.jsx b/src/components/ChangePass/ChangePass.styled.jsx
diff --git a/src/components/ForgotPass/ForgotPass.jsx b/src/components/ForgotPass/ForgotPass.jsx
@@ -0,0 +1,80 @@
+import { useDispatch, useSelector } from 'react-redux';
+import * as Yup from 'yup';
+import { Formik } from 'formik';
+import { Form, ErrorMessage, Field, Label, Input, Wraper, Button } from './ForgotPass.styled';
+import { ErrorSVG } from 'components/LoginForm/chackBox';
+import { useEffect, useState } from 'react';
+import { selectError } from 'redux/user/selectors';
+import { forgotPass } from 'redux/user/opetations';
+
+const userSchema = Yup.object().shape({
+  email: Yup.string()
+    .test('is-valid-email', 'Невірний формат Email адреси.', value => {
+      return (
+        value && /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/.test(value)
+      );
+    })
+    .required('Введіть Email'),
+});
+
+export default function ForgotPass() {
+  const dispatch = useDispatch();
+  const [refError, setRefError] = useState(false);
+  const requestError = useSelector(selectError);
+
+  const handleSubmit = (values, { resetForm, setSubmitting }) => {
+    const { email } = values;
+    try {
+      dispatch(forgotPass({ email }));
+      resetForm();
+      setSubmitting(false);
+    } catch (error) {
+      console.error('Error submitting form:', error);
+    }
+  };
+
+  useEffect(() => {
+    if (requestError) setRefError(true);
+  }, [requestError]);
+
+  return (
+    <Formik
+      onSubmit={handleSubmit}
+      initialValues={{ email: '' }}
+      validationSchema={userSchema}
+    >
+      {values => {
+        return (
+          <Wraper>
+            <h4 className="title">Відновлення паролю</h4>
+            <p className="text">
+              Щоб відновити пароль, введіть Ваш e-mail, який Ви вказували при
+              реєстрації
+            </p>
+            <Form>
+              <Label className={` marg24`}>
+                <Input>
+                  <Field
+                    className={refError ? 'is-invalid' : ''}
+                    type="email"
+                    name="email"
+                    placeholder="Введіть електрону пошту"
+                    value={values.email}
+                  />
+
+                  {refError ? (
+                    <span className="errorSVGemail">
+                      <ErrorSVG />
+                    </span>
+                  ) : null}
+                </Input>
+                <ErrorMessage name="email" component="div" />
+              </Label>
+              <Button type="submit">Відновити</Button>
+            </Form>
+          </Wraper>
+        );
+      }}
+    </Formik>
+  );
+}
diff --git a/src/components/ForgotPass/ForgotPass.styled.jsx b/src/components/ForgotPass/ForgotPass.styled.jsx
@@ -0,0 +1,166 @@
+import styled from 'styled-components';
+
+import {
+  Form as FormikForm,
+  Field as FormikField,
+  ErrorMessage as FormikErrorMessage,
+} from 'formik';
+
+export const Wraper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+
+  .title {
+    color: var(--text-black-dark, #141414);
+    text-align: center;
+    /* H4 */
+    font-family: 'Roboto', sans-serif;
+    font-size: 24px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
+    padding-bottom: 16px;
+    width: 454px;
+    border-bottom: 1px solid #b9b9b9;
+  }
+  .text {
+    color: var(--Text-black-2, #4b4b4b);
+
+    font-family: 'Roboto', sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+    margin-top: 24px;
+    margin-bottom: 24px;
+    width: 454px;
+  }
+`;
+export const Form = styled(FormikForm)`
+  display: flex;
+  flex-direction: column;
+  width: 454px;
+
+  background-color: white;
+  border-radius: 8px;
+  margin-top: 24px;
+
+  .errorSVGemail {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+  }
+`;
+
+export const ErrorMessage = styled(FormikErrorMessage)`
+  margin-left: 0;
+  margin-top: 8px;
+  color: #fa6666;
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+`;
+
+export const Field = styled(FormikField)`
+  box-sizing: border-box;
+  width: 100%;
+  padding: 16px;
+  height: 56px;
+  outline: none;
+  color: rgba(13, 12, 12, 0.5);
+  font-family: 'Roboto', sans-serif;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  border-radius: 8px;
+  border: 1px solid rgba(13, 12, 12, 0.3);
+  color: #141414;
+  background: #fff;
+
+  transition: var(--transition);
+  &::placeholder {
+    color: #ababab;
+    font-family: 'Roboto', sans-serif;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: normal;
+  }
+
+  &:hover,
+  &:focus {
+    border: 1px solid black;
+  }
+
+  &.is-valid {
+    border: 1px solid green;
+  }
+
+  &.is-invalid {
+    border: 1px solid red;
+  }
+`;
+
+export const Label = styled.label`
+  &.is-valid {
+    color: green;
+  }
+
+  &.is-invalid {
+    color: red;
+  }
+
+  & p {
+    margin: 0;
+    padding: 0;
+    margin-top: 8px;
+    margin-left: 18px;
+    color: green;
+  }
+
+  & .error-success {
+    position: absolute;
+    right: 16px;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+`;
+
+export const Input = styled.div`
+  position: relative;
+  margin-top: 8px;
+  transition: var(--transition);
+`;
+
+export const Button = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+
+  text-align: center;
+  font-family: 'Roboto', sans-serif;
+  font-size: 22px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  width: 454px;
+  height: 56px;
+  padding: 14px 24px;
+  gap: 4px;
+  margin-top: 24px;
+  align-self: stretch;
+  border-radius: 8px;
+  border: 0;
+  background: linear-gradient(144deg, #0040bd 19.1%, #19015b 78.89%);
+  &:hover,
+  &:focus {
+    background: linear-gradient(144deg, #0040bd 19.34%, #195b01 80.66%);
+  }
+`;
diff --git a/src/components/LoginForm/LoginForm.jsx b/src/components/LoginForm/LoginForm.jsx
@@ -17,6 +17,7 @@ import {
 } from './LoginForm.styled';
 import { ErrorSVG, ViewSVG } from './chackBox';
 import { selectError, selectIsLoading } from 'redux/auth/selectors';
+import { NavLink } from 'react-router-dom';
 
 
 const userSchema = Yup.object().shape({
@@ -52,24 +53,10 @@ try {
     }
 };
 
-
-//   const handleSubmit = async ({ email, password }, { resetForm }) => {
-//     try {
-//       await dispatch(login({ email, password }));
-//       resetForm();
-//     } catch (error) {
-//       console.error('Error submitting form:', error);
-//     }
-//   };
-
-
-
-
   const handleShowPassword = () => {
     setShowPassword(!showPassword);
   };
 
-
   useEffect(() => {
     if (requestError) setRefError(true);
   }, [requestError]);
@@ -128,9 +115,9 @@ try {
               {refError ? (
                 <p className="errorMes">Недійсна пошта або пароль</p>
               ) : null}
-              <button className="remPassBtn" type="button">
+              <NavLink className="remPassBtn" to="/forgot-password">
                 Забули пароль?
-              </button>
+              </NavLink>
               <div className="loader">
                 <PulseLoader
                   color="#0040bd"
@@ -173,3 +160,12 @@ try {
               //   </div>
               // </GBtn>
 
+
+              //   const handleSubmit = async ({ email, password }, { resetForm }) => {
+//     try {
+//       await dispatch(login({ email, password }));
+//       resetForm();
+//     } catch (error) {
+//       console.error('Error submitting form:', error);
+//     }
+//   };
diff --git a/src/pages/ChangePassPage/ChangePass.styled.jsx b/src/pages/ChangePassPage/ChangePass.styled.jsx
diff --git a/src/pages/ChangePassPage/ChangePassPage.jsx b/src/pages/ChangePassPage/ChangePassPage.jsx
@@ -0,0 +1,25 @@
+import ChangePass from 'components/ChangePass/ChangePass';
+import ForgotPass from 'components/ForgotPass/ForgotPass';
+import React, { useEffect, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router-dom';
+import { acceptCode } from 'redux/user/opetations';
+import { selectUser } from 'redux/user/selectors';
+
+export default function ChangePassPage() {
+  const [success, setSuccess] = useState(false);
+  const dispatch = useDispatch();
+  const { code } = useParams();
+  const user = useSelector(selectUser);
+  useEffect(() => {
+    if (code) {
+      try {
+        dispatch(acceptCode(code));
+        if (user) setSuccess(true);
+      } catch (error) {
+        setSuccess(false);
+      }
+    }
+  }, [code, dispatch, user]);
+  return <div>{success ? <ChangePass /> : <ForgotPass />}</div>;
+}