Merge pull request #17 from 001elijah/auth

Auth Folder

package.json

@@ -23,6 +23,7 @@
     "react": "^18.1.0",
     "react-datepicker": "^4.14.0",
     "react-dom": "^18.1.0",
+    "react-image-file-resizer": "^0.4.8",
     "react-redux": "^8.1.0",
     "react-responsive": "^9.0.2",
     "react-router-dom": "^6.13.0",

src/components/App.jsx

@@ -6,7 +6,8 @@ import WelcomePage from 'pages/WelcomePage';
 import AuthPage from '../pages/AuthPage';
 import { HomePage } from 'pages/HomePage';
 import { BoardPage } from 'pages/BoardPage';
-import { PrivateRoute, PublicRoute } from './AuthForm/route';
+
+import { PrivateRoute, PublicRoute } from './Route/route';
 
 import { currentUser } from 'redux/Auth/authOperations';
 import { Loader } from './Loader/Loader';

src/components/AuthWindows/AuthWindows.jsx

@@ -1,8 +1,8 @@
 import { NavLink, useParams } from 'react-router-dom';
 import clsx from 'clsx';
 
-import { Login } from 'components/AuthForm/Login/Login';
-import { Register } from 'components/AuthForm/Register/Register';
+import { Login } from 'components/LoginForm/Login';
+import { Register } from 'components/RegisterForm/Register';
 
 import s from './AuthWindows.module.scss';
 

src/components/AuthForm/ButtonAuth/ButtonAuth.jsx → src/components/ButtonAuth/ButtonAuth.jsx

@@ -1,10 +1,14 @@
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
+import { selectorTheme } from 'redux/Auth/authSelectors';
+
 import s from './ButtonAuth.module.scss';
 
 export const ButtonAuth = ({ title }) => {
+  const thema = useSelector(selectorTheme);
   return (
-    <button type="submit" className={s.button}>
+    <button type="submit" className={`${s.button} ${s[thema]}`}>
       {title}
     </button>
   );

src/components/AuthForm/ButtonAuth/ButtonAuth.module.scss → src/components/ButtonAuth/ButtonAuth.module.scss

@@ -1,5 +1,5 @@
-@import 'assets/styles/vars';
-@import 'assets/styles/mixins';
+@import '../../assets/styles/vars';
+@import '../../assets/styles/mixins';
 
 .button {
   width: 100%;
@@ -19,6 +19,11 @@
 
   cursor: pointer;
 
+  &.colorful {
+    background-color: $accent-bright-color;
+    color: $white-text-color;
+  }
+
   @include mobile {
     min-width: 288px;
   }

src/components/AuthForm/Login/Login.jsx → src/components/LoginForm/Login.jsx

@@ -3,10 +3,10 @@ import { useState } from 'react';
 import { useDispatch } from 'react-redux';
 
 import { ButtonAuth } from '../ButtonAuth/ButtonAuth';
-import { validationSchemaLogin } from '../schemaValidation';
+import { validationSchemaLogin } from '../SchemaValidation/schemaValidation';
 import { loginUser } from 'redux/Auth/authOperations';
 
-import icons from 'assets/icons/sprite.svg';
+import icons from '../../assets/icons/sprite.svg';
 import y from './Login.module.scss';
 
 export const Login = () => {

src/components/AuthForm/Login/Login.module.scss → src/components/LoginForm/Login.module.scss

@@ -1,4 +1,4 @@
-@import 'assets/styles/vars';
+@import '../../assets/styles/vars';
 
 .error {
   position: absolute;

src/components/Modal/Modal.module.scss

@@ -1,18 +1,6 @@
 @import '../../assets/styles/vars';
 @import '../../assets/styles/mixins';
 
-.modalBackdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: rgba(0, 0, 0, 0.5);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
 .title {
   font-family: 'Poppins-Medium';
   font-style: normal;
@@ -34,13 +22,20 @@
 }
 
 .modal {
-  padding: 0 0 24px 24px;
-  border-radius: 4px;
+  padding: 24px;
+
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
-  width: 100%;
-  max-width: 335px;
+
   border-radius: 8px;
 
+  @include mobile {
+    width: 335px;
+  }
+
+  @include tablet {
+    width: 400px;
+  }
+
   &.dark {
     background-color: $black-text-color;
   }

src/components/ModalEditProfile/ModalEditProfile.jsx

@@ -0,0 +1,157 @@
+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 { ButtonAuth } from '../ButtonAuth/ButtonAuth';
+import { validationSchemaRegister } from '../SchemaValidation/schemaValidation';
+import { updateUser } from 'redux/Auth/authOperations';
+import { selectorTheme } from 'redux/Auth/authSelectors';
+
+import icons from '../../assets/icons/sprite.svg';
+import s from './ModalEditProfile.module.scss';
+import y from '../LoginForm/Login.module.scss';
+
+export const ModalEditProfile = ({ onClose }) => {
+  const dispatch = useDispatch();
+
+  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 thema = useSelector(selectorTheme);
+
+  const toggleShowPassword = () => setShowPassword(!showPassword);
+
+  const formik = useFormik({
+    initialValues: {
+      userName: name,
+      email: email,
+      password: '',
+      // avatarUrl: null,
+    },
+    validationSchema: validationSchemaRegister,
+    onSubmit: values => {
+      onClose();
+      console.log(values);
+      dispatch(updateUser(values));
+    },
+  });
+
+  //   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 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}>
+        <div>
+          {imageFile ? (
+            <img src={imageFile} alt="Selected Avatar" className={s.image} />
+          ) : (
+            <svg className={s.avatar}>
+              <use href={`${icons}#icon-user-${thema || 'light'}`}></use>
+            </svg>
+          )}
+        </div>
+        {/* <svg className={s.avatar}>
+        </svg> */}
+        <div className={`${s.buttonPlus} ${s[thema]}`}>
+          +
+          {/* <svg className={s.buttonPlus}>
+            
+          <use href={`${icons}#icon-plus`}></use>
+        </svg> */}
+        </div>
+        {/* {imageFile && <img src={imageFile} alt="Selected Avatar" />} */}
+        <input
+          className={s.isHidden}
+          id="image"
+          name="image"
+          type="file"
+          onChange={handleImageChange}
+        />
+      </label>
+
+      <label className={s.label} htmlFor="userName">
+        <input
+          className={`${s.input} ${s[thema]}`}
+          id="userName"
+          name="userName"
+          type="text"
+          onChange={formik.handleChange}
+          value={formik.values.userName}
+          placeholder="Enter your name"
+        />
+        {formik.touched.userName && formik.errors.userName && (
+          <p className={y.error}>{formik.errors.userName}</p>
+        )}
+      </label>
+      <label className={s.label} htmlFor="email">
+        <input
+          className={`${s.input} ${s[thema]}`}
+          id="email"
+          name="email"
+          type="email"
+          onChange={formik.handleChange}
+          value={formik.values.email}
+          placeholder={email}
+        />
+        {formik.touched.email && formik.errors.email && (
+          <p className={y.error}>{formik.errors.email}</p>
+        )}
+      </label>
+      <label className={s.label} htmlFor="password">
+        <input
+          className={`${s.input} ${s[thema]}`}
+          id="password"
+          name="password"
+          type={showPassword ? 'text' : 'password'}
+          onChange={formik.handleChange}
+          value={formik.values.password}
+          placeholder="Password"
+        />
+        <svg className={y.eye} onClick={toggleShowPassword}>
+          <use
+            href={showPassword ? `${icons}#icon-eye` : `${icons}#icon-antiEye`}
+          ></use>
+        </svg>
+        {formik.touched.password && formik.errors.password && (
+          <p className={y.error}>{formik.errors.password}</p>
+        )}
+      </label>
+      <ButtonAuth title="Send" />
+    </form>
+  );
+};
+
+ModalEditProfile.propTypes = {
+  onClose: PropTypes.node.isRequired,
+};