Fixed duplication of users registration error

package.json

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

src/components/Auth/FlipCard.js

@@ -14,14 +14,14 @@ const FlipCard = () => {
     <div className="flip-card-container">
       <div className={`flip-card ${isFlipped ? 'flipped' : ''}`}>
         <div className="flip-card-front">
-          <h2>Login</h2>
+          <h2 className='flip-card-title'>Login</h2>
           <Login />
           <p className="toggle-link" onClick={handleFlip}>
             Don't have an account? Register here
           </p>
         </div>
         <div className="flip-card-back">
-          <h2>Register</h2>
+          <h2 className='flip-card-title'>Register</h2>
           <Register />
           <p className="toggle-link" onClick={handleFlip}>
             Already have an account? Login here

src/components/Auth/Login.js

@@ -8,7 +8,7 @@ const Login = () => {
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
-      const response = await axios.post('/auth/login', { username, password });
+      const response = await axios.post('http://localhost:8000/users/login', { username, password });
       localStorage.setItem('token', response.data.token);
       // handle login success
     } catch (error) {

src/components/Auth/Register.js

@@ -1,18 +1,27 @@
 import React, { useState } from 'react';
 import axios from 'axios';
+import CryptoJS from 'crypto-js';
 
 const Register = () => {
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
+  const [messageType, setMessageType] = useState('');
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     try {
-      await axios.post('/auth/register', { username, password, email });
-      // handle registration success
+      const encryptedPassword = CryptoJS.AES.encrypt(password, 'secret_key').toString();
+      const response = await axios.post('http://localhost:8000/users/register', { username, password: encryptedPassword, email });
+      setMessage('User registered successfully');
+      setMessageType('success');
+      setUsername('');
+      setPassword('');
+      setEmail('');
     } catch (error) {
-      console.error('Registration Error:', error.response ? error.response.data : error.message);
+      setMessage(error.response ? error.response.data.error : error.message);
+      setMessageType('error');
     }
   };
 
@@ -21,7 +30,7 @@ const Register = () => {
       <div className="input-container">
         <input
           type="text"
-          className="input-field"
+          className={`input-field ${username && 'filled'}`}
           value={username}
           onChange={(e) => setUsername(e.target.value)}
           required
@@ -31,7 +40,7 @@ const Register = () => {
       <div className="input-container">
         <input
           type="email"
-          className="input-field"
+          className={`input-field ${email && 'filled'}`}
           value={email}
           onChange={(e) => setEmail(e.target.value)}
           required
@@ -41,14 +50,15 @@ const Register = () => {
       <div className="input-container">
         <input
           type="password"
-          className="input-field"
+          className={`input-field ${password && 'filled'}`}
           value={password}
           onChange={(e) => setPassword(e.target.value)}
           required
         />
         <label className="form-label">Password</label>
       </div>
       <button type="submit" className="submit-button">Register</button>
+      {message && <p className={`message ${messageType}`}>{message}</p>}
     </form>
   );
 };

src/components/Auth/auth.css

@@ -1,5 +1,5 @@
-
 .modal-overlay {
+    display: flex;
     position: fixed;
     top: 0;
     left: 0;
@@ -12,8 +12,6 @@
     color: #414141;
 }
 
-
-
 .flip-card-container {
     perspective: 1000px;
 }
@@ -24,15 +22,20 @@
     position: relative;
     transform-style: preserve-3d;
     transition: transform 0.6s;
-
+    margin: 100px auto;
 }
 
 .flip-card.flipped {
     transform: rotateY(180deg);
 }
 
+.flip-card-title {
+    margin-bottom: 20px;
+}
+
 .flip-card-front, .flip-card-back {
     width: 100%;
+    height: 100%;
     position: absolute;
     backface-visibility: hidden;
     background: #fff;
@@ -41,7 +44,7 @@
     display: flex;
     flex-direction: column;
     align-items: center;
-    justify-content: center;
+    justify-content: space-between;
     padding: 20px;
 }
 
@@ -52,17 +55,15 @@
 .auth-form {
     display: flex;
     flex-direction: column;
-    gap: 10px;
 }
 
 .input-container {
     position: relative;
-    margin-bottom: 15px;
+    margin: 15px 0;
 }
 
 .input-field {
     padding: 10px;
-    /*margin-bottom: 20px;*/
     border: 1px solid #ccc;
     border-radius: 10px;
     transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -83,14 +84,23 @@
 }
 
 .input-field:focus ~ .form-label,
-.input-field:valid ~ .form-label {
+.input-field:valid ~ .form-label,
+.input-field.filled ~ .form-label {
     top: 0;
     transform: translateY(-100%);
     color: #90a4ae;
-    font-size: 1rem;
+    font-size: 0.9rem;
+}
+
+.label-invalid {
+    color: red;
+    top: 0;
+    transform: translateY(-100%);
+    font-size: 0.9rem;
 }
 
 .submit-button {
+    margin-top: 20px;
     padding: 10px;
     border-radius: 10px;
     font-size: 1rem;
@@ -108,4 +118,23 @@
     cursor: pointer;
     color: #0175d8;
     text-decoration: underline;
-}
+}
+
+.message {
+    margin-top: 10px;
+    font-size: 0.875rem;
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.message.success {
+    color: #1abc9c;
+    background-color: #d4edda;
+    border: 1px solid #c3e6cb;
+}
+
+.message.error {
+    color: #dc3545;
+    background-color: #f8d7da;
+    border: 1px solid #f5c6cb;
+}

src/components/Header.js

@@ -8,7 +8,6 @@ export const Header = () => {
 
   const toggleLoginModal = () => {
     setIsLoginModalOpen(!isLoginModalOpen);
-    if (isRegisterModalOpen) setIsRegisterModalOpen(false);
   };