auth form

package.json

@@ -8,6 +8,7 @@
   ],
   "main": "src/index.js",
   "dependencies": {
+    "classnames": "^2.5.1",
     "dom-to-image": "^2.6.0",
     "react": "17.0.2",
     "react-colorful": "^5.5.1",
@@ -20,7 +21,7 @@
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "axios": "^0.26.0",
+    "axios": "^0.26.1",
     "prettier": "2.5.1"
   },
   "scripts": {

src/App.js

@@ -2,11 +2,13 @@ import './styles.css';
 import Field from './components/Field.js';
 import { connect } from 'react-redux';
 import { Header } from './components/Header';
+import Auth from './components/Auth';
 
 const App = (props) => {
   return (
     <div className="App">
       <Header username={props.username} />
+      <Auth />
       <Field />
     </div>
   );

src/components/Auth.js

@@ -0,0 +1,49 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+
+const Auth = () => {
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+  const [isLogin, setIsLogin] = useState(true);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    const endpoint = isLogin ? '/auth/login' : '/auth/register';
+    try {
+      const response = await axios.post(endpoint, { username, password });
+      console.log('Response:', response.data);
+      if (isLogin) {
+        localStorage.setItem('token', response.data.token);
+      }
+    } catch (error) {
+      console.error('Error:', error.response ? error.response.data : error.message);
+    }
+  };
+
+  return (
+    <div>
+      <h2>{isLogin ? 'Login' : 'Register'}</h2>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="text"
+          placeholder="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <input
+          type="password"
+          placeholder="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <button type="submit">{isLogin ? 'Login' : 'Register'}</button>
+      </form>
+      <button onClick={() => setIsLogin(!isLogin)}>
+        {isLogin ? 'Switch to Register' : 'Switch to Login'}
+      </button>
+    </div>
+  );
+};
+
+export default Auth;

src/components/Brush.js

@@ -1,74 +1,40 @@
 import React from 'react';
 import { connect } from 'react-redux';
+import classnames from 'classnames';
 import fill from './icons/fill.png';
 import random from './icons/random.jpeg';
 import colorpicker from './icons/colorpicker.png';
 
-function Brush(props) {
-  const { changeBrush, fieldRandomBrush, brush } = props;
+const Brush = ({ changeBrush, fieldRandomBrush, brush }) => {
+  const brushTypes = [
+    { type: 'dot', label: '▣' },
+    { type: 'horizontal', label: '↔' },
+    { type: 'vertical', label: '↕' },
+    { type: 'cross', label: '✚' },
+    { type: 'fill', label: <img src={fill} className="img-icon-btn" alt="icon-fill" /> },
+    { type: 'fillPart', label: 'fillPart' },
+    { type: 'mirrorH', label: '═' },
+    { type: 'mirrorV', label: '||' },
+    { type: 'color-picker', label: <img src={colorpicker} className="img-icon-btn" alt="icon-colorpicker" /> }
+  ];
+
   return (
     <div className="brush-block">
-      <button
-        className={`btn-reg ${brush === 'dot' ? 'btn-pushed' : ''}`}
-        onClick={() => changeBrush('dot')}
-      >
-        ▣
-      </button>
-      <button
-        className={`btn-reg ${brush === 'horizontal' ? 'btn-pushed' : ''}`}
-        onClick={() => changeBrush('horizontal')}
-      >
-        ↔
-      </button>
-      <button
-        className={`btn-reg ${brush === 'vertical' ? 'btn-pushed' : ''}`}
-        onClick={() => changeBrush('vertical')}
-      >
-        ↕
-      </button>
-      <button
-        className={`btn-reg ${brush === 'cross' ? 'btn-pushed' : ''}`}
-        onClick={() => changeBrush('cross')}
-      >
-        ✚
-      </button>
-      <button
-        className={`btn-reg ${brush === 'fill' ? 'btn-pushed' : ''}`}
-        onClick={() => changeBrush('fill')}
-      >
-        <img src={fill} className="img-icon-btn" alt="icon-fill" />
-      </button>
-      <button
-        className={`btn-reg ${brush === 'fillPart' ? 'btn-pushed' : ''}`}
-        onClick={() => changeBrush('fillPart')}
-      >
-        fillPart
-        {/* <img src={fill} className="img-icon-btn" /> */}
-      </button>
-      <button
-        className={`btn-reg ${brush === 'mirrorH' ? 'btn-pushed' : ''}`}
-        onClick={() => changeBrush('mirrorH')}
-      >
-        ═
-      </button>
-      <button
-        className={`btn-reg ${brush === 'mirrorV' ? 'btn-pushed' : ''}`}
-        onClick={() => changeBrush('mirrorV')}
-      >
-        ||
-      </button>
-      <button
-        className={`btn-reg ${brush === 'color-picker' ? 'btn-pushed' : ''}`}
-        onClick={() => changeBrush('color-picker')}
-      >
-        <img src={colorpicker} className="img-icon-btn" alt="icon-colorpicker" />
-      </button>
+      {brushTypes.map(({ type, label }) => (
+        <button
+          key={type}
+          className={classnames('btn-reg', { 'btn-pushed': brush === type })}
+          onClick={() => changeBrush(type)}
+        >
+          {label}
+        </button>
+      ))}
       <button className="btn-reg" onClick={fieldRandomBrush}>
         <img src={random} className="img-icon-btn" alt="icon-random" />
       </button>
     </div>
   );
-}
+};
 
 const mapStateToProps = (state) => ({
   brush: state.brush
@@ -77,9 +43,7 @@ const mapStateToProps = (state) => ({
 const mapDispatchToProps = (dispatch) => ({
   changeBrush: (brush) => dispatch({
     type: 'CHANGE_BRUSH',
-    payload: {
-      brush
-    }
+    payload: { brush }
   }),
   fieldRandomBrush: () => dispatch({
     type: 'FILL_RANDOM_BRUSH',

src/components/ColorHistory.js

@@ -1,28 +1,24 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
-import { v4 as uuidv4 } from 'uuid';
 import history_del from './icons/history_del.png';
 
-const HistoryColor = (props) => {
-  const { historyColor, changeColor, deleteColorHistory } = props;
-
+const HistoryColor = ({ historyColor, changeColor, deleteColorHistory }) => {
   return (
     <div className="container">
       <div className="color-history">
-        {historyColor.map((el, i) => (
+        {historyColor.map((color, index) => (
           <div
-            key={uuidv4()}
+            key={index}
             className="pixel-history"
-            style={{ background: el }}
-            onClick={() => changeColor(el)}
+            style={{ background: color }}
+            onClick={() => changeColor(color)}
           >
             {' '}
           </div>
         ))}
-
         <div>
           <button onClick={deleteColorHistory} className="btn-reg warn">
-            <img src={history_del} className="img-icon-btn" />
+            <img src={history_del} className="img-icon-btn" alt="delete history" />
           </button>
         </div>
       </div>
@@ -38,11 +34,9 @@ const mapDispatchToProps = (dispatch) => ({
   changeColor: (color) =>
     dispatch({
       type: 'CHANGE_CURRENT_COLOR',
-      payload: {
-        color,
-      },
+      payload: { color },
     }),
-  deleteColorHistory: (color) =>
+  deleteColorHistory: () =>
     dispatch({
       type: 'DELETE_COLOR_HISTORY',
     }),

src/components/CurrentColor.js

@@ -1,19 +1,16 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { HexColorPicker } from 'react-colorful';
-
 import { connect } from 'react-redux';
 
-const CurrentColor = (props) => {
-  return (
-    <div className="custom-pointers">
-      <HexColorPicker
-        className="mg-0-a"
-        color={props.currentColor}
-        onChange={(color) => props.changeColor(color)}
-      />
-    </div>
-  );
-};
+const CurrentColor = ({ currentColor, changeColor }) => (
+  <div className="custom-pointers">
+    <HexColorPicker
+      className="mg-0-a"
+      color={currentColor}
+      onChange={changeColor}
+    />
+  </div>
+);
 
 const mapStateToProps = (state) => ({
   currentColor: state.currentColor,
@@ -23,10 +20,8 @@ const mapDispatchToProps = (dispatch) => ({
   changeColor: (color) =>
     dispatch({
       type: 'CHANGE_CURRENT_COLOR',
-      payload: {
-        color,
-      },
+      payload: { color },
     }),
 });
 
-export default connect(mapStateToProps, mapDispatchToProps)(CurrentColor);
+export default connect(mapStateToProps, mapDispatchToProps)(CurrentColor);