Merge pull request #24 from 001elijah/auth

Fix password

src/components/LoginForm/Login.jsx

@@ -49,7 +49,6 @@ export const Login = () => {
           value={formik.values.password}
           placeholder="Confirm a password"
         />
-
         <svg className={y.eye} onClick={toggleShowPassword}>
           <use
             href={showPassword ? `${icons}#icon-eye` : `${icons}#icon-antiEye`}

src/components/LoginForm/Login.module.scss

@@ -3,7 +3,7 @@
 .error {
   position: absolute;
   color: $red-error-color;
-  font-size: 12px;
+  font-size: 10px;
 }
 
 .eye {

src/components/ModalEditProfile/ModalEditProfile.jsx

@@ -2,12 +2,17 @@ import { useFormik } from 'formik';
 import { useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-// import { resizeFile } from 'react-image-file-resizer';
+import { Notify } from 'notiflix';
 
 import { ButtonAuth } from '../ButtonAuth/ButtonAuth';
-import { validationSchemaRegister } from '../SchemaValidation/schemaValidation';
+import { validationSchemaEditProfile } from '../SchemaValidation/schemaValidation';
 import { updateUser } from 'redux/Auth/authOperations';
-import { selectorTheme } from 'redux/Auth/authSelectors';
+import {
+  selectorTheme,
+  selectorUserName,
+  selectorAvatarURL,
+  selectorEmail,
+} from 'redux/Auth/authSelectors';
 
 import icons from '../../assets/icons/sprite.svg';
 import s from './ModalEditProfile.module.scss';
@@ -19,12 +24,10 @@ export const ModalEditProfile = ({ onClose }) => {
   const [showPassword, setShowPassword] = useState(false);
   const [imageFile, setImageFile] = useState(null);
 
-  // eslint-disable-next-line
-  const formData = new FormData();
-
-  const name = useSelector(state => state.auth.userName);
-  const email = useSelector(state => state.auth.email);
+  const name = useSelector(selectorUserName);
+  const email = useSelector(selectorEmail);
   const thema = useSelector(selectorTheme);
+  const avatar = useSelector(selectorAvatarURL);
 
   const toggleShowPassword = () => setShowPassword(!showPassword);
 
@@ -33,48 +36,51 @@ export const ModalEditProfile = ({ onClose }) => {
       userName: name,
       email: email,
       password: '',
-      // avatarUrl: null,
+      // avatarUrl: avatar,
     },
-    validationSchema: validationSchemaRegister,
+    validationSchema: validationSchemaEditProfile,
     onSubmit: values => {
       onClose();
-      console.log(values);
-      dispatch(updateUser(values));
+
+      const formData = new FormData();
+
+      formData.append('userName', values.userName);
+      formData.append('email', values.email);
+      formData.append('password', values.password);
+
+      if (imageFile) {
+        formData.append('avatarUrl', imageFile);
+      }
+
+      dispatch(updateUser(formData));
     },
   });
 
-  //   const handleImageChange = event => {
-  //     // formik.setFieldValue('image', event.currentTarget.files[0]);
-  //    const file = event.currentTarget.files[0];
-  //   formik.setFieldValue('image', file);
-  //   setSelectedImage(URL.createObjectURL(file));
-  //   };
-
   const handleImageChange = event => {
-    console.log(event.currentTarget.files[0]);
-    // setImageFile(event.currentTarget.files[0])
     const file = event.currentTarget.files[0];
-    setImageFile(URL.createObjectURL(file));
+    const imageFormat = ['image/png', 'image/jpeg', 'image/jpg'];
+
+    if (file) {
+      if (!imageFormat.includes(file.type)) {
+        Notify.failure('Invalid image format');
+      } else {
+        setImageFile(file);
+      }
+    }
   };
-  //     const handleImageChange = async event => {
-  //   const file = event.currentTarget.files[0];
-
-  //         try {
-  //       console.log("gogogo")
-  //     const resizedFile = await resizeFile(file, 300, 300, 'PNG', 80);
-  //     formik.setFieldValue('image', resizedFile);
-  //     setSelectedImage(URL.createObjectURL(resizedFile));
-  //   } catch (error) {
-  //     console.log('Ошибка при изменении размера изображения:', error);
-  //   }
-  // };
 
   return (
     <form onSubmit={formik.handleSubmit}>
-      <label htmlFor="image" className={s.wrapImage}>
+      <label htmlFor="avatarUrl" className={s.wrapImage}>
         <div>
           {imageFile ? (
-            <img src={imageFile} alt="Selected Avatar" className={s.image} />
+            <img
+              src={URL.createObjectURL(imageFile)}
+              alt="Selected Avatar"
+              className={s.image}
+            />
+          ) : avatar ? (
+            <img src={avatar} alt="Avatar" className={s.image} />
           ) : (
             <svg className={s.avatar}>
               <use href={`${icons}#icon-user-${thema || 'light'}`}></use>
@@ -90,11 +96,10 @@ export const ModalEditProfile = ({ onClose }) => {
           <use href={`${icons}#icon-plus`}></use>
         </svg> */}
         </div>
-        {/* {imageFile && <img src={imageFile} alt="Selected Avatar" />} */}
         <input
           className={s.isHidden}
-          id="image"
-          name="image"
+          id="avatarUrl"
+          name="avatarUrl"
           type="file"
           onChange={handleImageChange}
         />
@@ -138,7 +143,7 @@ export const ModalEditProfile = ({ onClose }) => {
           value={formik.values.password}
           placeholder="Password"
         />
-        <svg className={y.eye} onClick={toggleShowPassword}>
+        <svg className={`${s.eye} ${s[thema]}`} onClick={toggleShowPassword}>
           <use
             href={showPassword ? `${icons}#icon-eye` : `${icons}#icon-antiEye`}
           ></use>
@@ -153,5 +158,5 @@ export const ModalEditProfile = ({ onClose }) => {
 };
 
 ModalEditProfile.propTypes = {
-  onClose: PropTypes.node.isRequired,
+  onClose: PropTypes.func.isRequired,
 };

src/components/ModalEditProfile/ModalEditProfile.module.scss

@@ -7,6 +7,10 @@
   &:not(:last-of-type) {
     margin-bottom: 14px;
   }
+
+  &:focus-within .eye {
+    opacity: 0.9;
+  }
 }
 
 .avatar {
@@ -99,10 +103,26 @@
   display: block;
   width: 68px;
   height: 68px;
+  border-radius: 8px;
 }
 
-// .buttonPlus {
-//   display: block;
-//   width: 7px;
-//   height: 7px;
-// }
+.eye {
+  position: absolute;
+  width: 19px;
+  height: 19px;
+
+  stroke: currentColor;
+  fill: currentColor;
+  color: $white-text-color;
+
+  right: 18px;
+  bottom: 15px;
+
+  opacity: 0.4;
+  cursor: pointer;
+
+  &.light,
+  &.colorful {
+    color: $black-text-color;
+  }
+}

src/components/SchemaValidation/schemaValidation.jsx

@@ -12,8 +12,8 @@ export const validationSchemaLogin = yup.object().shape({
     .string()
     .matches(/^\S*$/, 'Must not contain spaces')
     .matches(
-      /^[a-zA-Z0-9]+$/,
-      'Can only contain Latin letters, numbers and signs',
+      /^[a-zA-Z0-9!"@#$%^&*()]+$/,
+      'Can only contain Latin letters, numbers, and signs',
     )
     .min(8, 'Minimum length 8 characters')
     .max(64, 'Maximum length 64 characters')
@@ -41,10 +41,40 @@ export const validationSchemaRegister = yup.object().shape({
     .string()
     .matches(/^\S*$/, 'Must not contain spaces')
     .matches(
-      /^[a-zA-Z0-9]+$/,
-      'Can only contain Latin letters, numbers and signs',
+      /^[a-zA-Z0-9!"@#$%^&*()]+$/,
+      'Can only contain Latin letters, numbers, and signs',
     )
     .min(8, 'Minimum length 8 characters')
     .max(64, 'Maximum length 64 characters')
     .required('Password required'),
 });
+
+export const validationSchemaEditProfile = yup.object().shape({
+  userName: yup
+    .string()
+    .matches(
+      /^[a-zA-Z0-9_]+( [a-zA-Z0-9_]+)?$/,
+      'Only letters, numbers, underscores, and spaces are allowed',
+    )
+    .min(2, 'Minimum length 2 characters')
+    .max(32, 'Maximum length 32 characters')
+    .required('Name required'),
+  email: yup
+    .string()
+    .matches(
+      /^[\w.%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
+      'Invalid email address. Example: [email protected]',
+    )
+    .required('Email required'),
+  password: yup
+    .string()
+    .matches(/^\S*$/, 'Must not contain spaces')
+    .matches(
+      /^[a-zA-Z0-9!"@#$%^&*()]+$/,
+      'Can only contain Latin letters, numbers, and signs',
+    )
+    .min(8, 'Minimum length 8 characters')
+    .max(64, 'Maximum length 64 characters')
+    .required('Password required'),
+  avatarUrl: yup.string(),
+});

src/pages/HomePage.jsx

@@ -7,7 +7,7 @@ import { Container } from 'components/Container';
 
 export const HomePage = () => {
   const isDesktopSize = useMediaQuery({ query: '(min-width: 1280px)' });
-  
+
   return (
     <div>
       <Container>

src/redux/Auth/authOperations.js

@@ -110,7 +110,9 @@ export const updateUser = createAsyncThunk(
   'auth/updateUser',
   async (userData, { rejectWithValue }) => {
     try {
-      const { data } = await updateUserApi(userData);
+      const data = await updateUserApi(userData);
+      Notify.success('Successful editing');
+
       return data;
     } catch (error) {
       return rejectWithValue(error.message);

src/redux/Auth/authSelectors.js

@@ -5,3 +5,5 @@ export const selectorTheme = state => state.auth.theme;
 export const selectorUserName = state => state.auth.userName;
 
 export const selectorAvatarURL = state => state.auth.avatarUrl;
+
+export const selectorEmail = state => state.auth.email;

src/services/backendAPI.js

@@ -42,7 +42,7 @@ export const themeChangeUserApi = async theme => {
 
 export const updateUserApi = async userData => {
   const { data } = await axios.patch('user/updateUserInfo', userData);
-  return data;
+  return data.user;
 };
 //---------------------------------------------BOARDS---------------------//