From 61c7ed523c4d0bf5beb5daf6c35f03e01a2bc7e6 Mon Sep 17 00:00:00 2001 From: bogutskii Date: Tue, 11 Jun 2024 11:13:10 -0700 Subject: [PATCH] Fixed duplication of users registration error --- package-lock.json | 84 +++++++++++++++++++++++++++------ package.json | 3 +- src/components/Auth/FlipCard.js | 4 +- src/components/Auth/Login.js | 2 +- src/components/Auth/Register.js | 22 ++++++--- src/components/Auth/auth.css | 51 +++++++++++++++----- src/components/Header.js | 1 - 7 files changed, 130 insertions(+), 37 deletions(-) diff --git a/package-lock.json b/package-lock.json index ca587626..8a411fc5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "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" } }, @@ -4505,12 +4506,28 @@ } }, "node_modules/axios": { - "version": "0.26.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz", - "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz", + "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==", "dev": true, "dependencies": { - "follow-redirects": "^1.14.8" + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, + "node_modules/axios/node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dev": true, + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" } }, "node_modules/axobject-query": { @@ -5701,6 +5718,11 @@ "node": ">= 8" } }, + "node_modules/crypto-js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==" + }, "node_modules/crypto-random-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", @@ -7726,9 +7748,9 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "node_modules/follow-redirects": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", - "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==", + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", "funding": [ { "type": "individual", @@ -14076,6 +14098,12 @@ "node": ">= 0.10" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "dev": true + }, "node_modules/psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", @@ -21130,12 +21158,27 @@ "integrity": "sha512-gd1kmb21kwNuWr6BQz8fv6GNECPBnUasepcoLbekws23NVBLODdsClRZ+bQ8+9Uomf3Sm3+Vwn0oYG9NvwnJCw==" }, "axios": { - "version": "0.26.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.26.1.tgz", - "integrity": "sha512-fPwcX4EvnSHuInCMItEhAGnaSEXRBjtzh9fOtsE6E1G6p7vl7edEeZe11QHf18+6+9gR5PbKV/sGKNaD8YaMeA==", + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.0.tgz", + "integrity": "sha512-EZ1DYihju9pwVB+jg67ogm+Tmqc6JmhamRN6I4Zt8DfZu5lbcQGw3ozH9lFejSJgs/ibaef3A9PMXPLeefFGJg==", "dev": true, "requires": { - "follow-redirects": "^1.14.8" + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + }, + "dependencies": { + "form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dev": true, + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + } } }, "axobject-query": { @@ -22044,6 +22087,11 @@ "which": "^2.0.1" } }, + "crypto-js": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/crypto-js/-/crypto-js-4.2.0.tgz", + "integrity": "sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==" + }, "crypto-random-string": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-2.0.0.tgz", @@ -23534,9 +23582,9 @@ "integrity": "sha512-WIWGi2L3DyTUvUrwRKgGi9TwxQMUEqPOPQBVi71R96jZXJdFskXEmf54BoZaS1kknGODoIGASGEzBUYdyMCBJg==" }, "follow-redirects": { - "version": "1.14.9", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.9.tgz", - "integrity": "sha512-MQDfihBQYMcyy5dhRDJUHcw7lb2Pv/TuE6xP1vyraLukNDHKbDxDNaOE3NbCAdKQApno+GPRyo1YAp89yCjK4w==" + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==" }, "forever-agent": { "version": "0.6.1", @@ -28020,6 +28068,12 @@ } } }, + "proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "dev": true + }, "psl": { "version": "1.8.0", "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz", diff --git a/package.json b/package.json index 71f5197d..d47d867a 100644 --- a/package.json +++ b/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": { diff --git a/src/components/Auth/FlipCard.js b/src/components/Auth/FlipCard.js index 78095757..3d8eee92 100644 --- a/src/components/Auth/FlipCard.js +++ b/src/components/Auth/FlipCard.js @@ -14,14 +14,14 @@ const FlipCard = () => {
-

Login

+

Login

Don't have an account? Register here

-

Register

+

Register

Already have an account? Login here diff --git a/src/components/Auth/Login.js b/src/components/Auth/Login.js index 26a62946..60be3f4f 100644 --- a/src/components/Auth/Login.js +++ b/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) { diff --git a/src/components/Auth/Register.js b/src/components/Auth/Register.js index 893ae5c8..c8416943 100644 --- a/src/components/Auth/Register.js +++ b/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 = () => {

setUsername(e.target.value)} required @@ -31,7 +40,7 @@ const Register = () => {
setEmail(e.target.value)} required @@ -41,7 +50,7 @@ const Register = () => {
setPassword(e.target.value)} required @@ -49,6 +58,7 @@ const Register = () => {
+ {message &&

{message}

} ); }; diff --git a/src/components/Auth/auth.css b/src/components/Auth/auth.css index 48a42a83..cddba065 100644 --- a/src/components/Auth/auth.css +++ b/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; -} \ No newline at end of file +} + +.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; +} diff --git a/src/components/Header.js b/src/components/Header.js index 08d0250e..e5c42bd0 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -8,7 +8,6 @@ export const Header = () => { const toggleLoginModal = () => { setIsLoginModalOpen(!isLoginModalOpen); - if (isRegisterModalOpen) setIsRegisterModalOpen(false); };