From e65594233289f199113a07bdd50fbef0545e5977 Mon Sep 17 00:00:00 2001 From: Ihor Date: Wed, 1 Mar 2023 17:03:00 +0200 Subject: [PATCH 1/3] Integrated api auth func in forms --- package-lock.json | 152 ++++++++++++++++++ package.json | 5 +- src/App.tsx | 11 +- src/features/auth/api/auth.ts | 24 +++ src/features/auth/components/LoginForm.tsx | 28 +--- src/features/auth/components/RegisterForm.tsx | 39 ++++- 6 files changed, 233 insertions(+), 26 deletions(-) create mode 100644 src/features/auth/api/auth.ts diff --git a/package-lock.json b/package-lock.json index 9797c01..f9f18b5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@mui/icons-material": "^5.11.9", "@mui/joy": "^5.0.0-alpha.67", "@mui/material": "^5.11.9", + "axios": "^1.3.4", "node-sass": "^8.0.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -1218,6 +1219,21 @@ "node": "*" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "node_modules/axios": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz", + "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==", + "dependencies": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/babel-plugin-macros": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", @@ -1522,6 +1538,17 @@ "color-support": "bin.js" } }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -1622,6 +1649,14 @@ "node": ">=0.10.0" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -2090,6 +2125,38 @@ "node": ">=8" } }, + "node_modules/follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "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==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs-minipass": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", @@ -2709,6 +2776,25 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", @@ -3467,6 +3553,11 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "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==" + }, "node_modules/quick-lru": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz", @@ -5221,6 +5312,21 @@ "resolved": "https://registry.npmjs.org/async-foreach/-/async-foreach-0.1.3.tgz", "integrity": "sha512-VUeSMD8nEGBWaZK4lizI1sf3yEC7pnAQ/mrI7pC2fBz2s/tq5jWWEngTwaf0Gruu/OoXRGLGg1XFqpYBiGTYJA==" }, + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "axios": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz", + "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==", + "requires": { + "follow-redirects": "^1.15.0", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "babel-plugin-macros": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz", @@ -5434,6 +5540,14 @@ "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz", "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==" }, + "combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "requires": { + "delayed-stream": "~1.0.0" + } + }, "concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -5510,6 +5624,11 @@ } } }, + "delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" + }, "delegates": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz", @@ -5770,6 +5889,21 @@ "path-exists": "^4.0.0" } }, + "follow-redirects": { + "version": "1.15.2", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz", + "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==" + }, + "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==", + "requires": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + } + }, "fs-minipass": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz", @@ -6249,6 +6383,19 @@ "yargs-parser": "^20.2.3" } }, + "mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==" + }, + "mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "requires": { + "mime-db": "1.52.0" + } + }, "min-indent": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz", @@ -6814,6 +6961,11 @@ } } }, + "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==" + }, "quick-lru": { "version": "4.0.1", "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz", diff --git a/package.json b/package.json index ed484b9..7595986 100644 --- a/package.json +++ b/package.json @@ -11,10 +11,11 @@ "dependencies": { "@emotion/react": "^11.10.6", "@emotion/styled": "^11.10.6", + "@mui/icons-material": "^5.11.9", "@mui/joy": "^5.0.0-alpha.67", "@mui/material": "^5.11.9", + "axios": "^1.3.4", "node-sass": "^8.0.0", - "@mui/icons-material": "^5.11.9", "react": "^18.2.0", "react-dom": "^18.2.0", "react-hook-form": "^7.43.1", @@ -30,4 +31,4 @@ "typescript": "^4.6.4", "vite": "^3.2.3" } -} \ No newline at end of file +} diff --git a/src/App.tsx b/src/App.tsx index 8351231..db964d0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { useState } from "react"; +import { useEffect, useState } from "react"; import { createPortal } from "react-dom"; import { Route, Routes } from "react-router"; import AuthForm from "./features/auth/components/AuthForm"; @@ -14,9 +14,16 @@ import { User } from "./types/User"; import CreateProject from "./pages/CreateProject"; function App() { - const [isOpen, setIsOpen] = useState(false); + const [isOpen, setIsOpen] = useState(true); const [user, setUser] = useState< User | null>(null); + useEffect(() => { + const user = localStorage.getItem("user"); + if (user) { + setUser(JSON.parse(user)); + } + }, []) + const closeModal = () => { setIsOpen(false); }; diff --git a/src/features/auth/api/auth.ts b/src/features/auth/api/auth.ts new file mode 100644 index 0000000..3598c35 --- /dev/null +++ b/src/features/auth/api/auth.ts @@ -0,0 +1,24 @@ +import axios from "axios" +import { User } from "../../../types/User"; + +export const login = async (email: string, password: string): Promise => { + const userData = await axios.post("/api/v1/user/login", { + email, + password, + }) + return userData.data; +} + +export const register = async ( + username: string, + email: string, + password: string +): Promise => { + const userData = await axios.post("/api/v1/user/new", { + email, + username, + password, + }); + + return userData.data; +}; \ No newline at end of file diff --git a/src/features/auth/components/LoginForm.tsx b/src/features/auth/components/LoginForm.tsx index f758a94..c78c65a 100644 --- a/src/features/auth/components/LoginForm.tsx +++ b/src/features/auth/components/LoginForm.tsx @@ -4,8 +4,8 @@ import TextField from "@mui/material/TextField"; import Button from "@mui/material/Button"; import { Box } from "@mui/system"; import { AuthContext } from "../context/AuthContext"; -import { useContext, useState } from "react"; -import { User } from "../../../types/User"; +import { useContext } from "react"; +import { login } from "../api/auth"; import "react-toastify/dist/ReactToastify.css"; interface ILoginFormInput { @@ -26,25 +26,12 @@ function LoginForm() { }, }); - const onSubmit: SubmitHandler = async (data) => { - const userPromise = new Promise((resolve, reject) => { - setTimeout(() => { - // resolve({ - // id: 1, - // username: "John Doe", - // email: data.email, - // avatar: "https://i.pravatar.cc/150?img=1", - // description: - // "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quod.", - // projects: [], - // }); - reject(new Error()); - }, 2000); - }); + const onSubmit: SubmitHandler = (data) => { + const loginData = login(data.email, data.password); toast .promise( - userPromise, + loginData, { pending: "Logging in...", success: "Logged in successfully", @@ -63,6 +50,7 @@ function LoginForm() { ) .then((user) => { setTimeout(() => { + localStorage.setItem("user", JSON.stringify(user)); setUser(user); }, 3000); }); @@ -93,10 +81,10 @@ function LoginForm() { type="password" {...register("password", { required: true, - pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/, + pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/, })} error={errors.password ? true : false} - helperText="Must be at least 8 characters(1 uppercase, 1 lowercase, 1 number)" + helperText="Must be at least 6 characters(1 uppercase, 1 lowercase, 1 number)" sx={{ width: "100%" }} /> {/* TODO: Google Auth */} + ); From 47f23ec2cfdf9d3291bda750a454287b67c94818 Mon Sep 17 00:00:00 2001 From: Melya Date: Wed, 1 Mar 2023 18:12:16 +0200 Subject: [PATCH 2/3] Created auth btn in header and removed timeout mocks --- src/App.tsx | 25 +- src/features/auth/components/LoginForm.tsx | 13 +- src/features/auth/components/RegisterForm.tsx | 12 +- src/features/auth/context/AuthContext.ts | 2 +- src/layout/Navbar.tsx | 372 ++++++++++-------- 5 files changed, 229 insertions(+), 195 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index db964d0..55b4960 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -12,40 +12,46 @@ import Project from "./pages/Project"; import { AuthContext } from "./features/auth/context/AuthContext"; import { User } from "./types/User"; import CreateProject from "./pages/CreateProject"; +import { ToastContainer } from "react-toastify"; +import "react-toastify/dist/ReactToastify.css"; function App() { - const [isOpen, setIsOpen] = useState(true); - const [user, setUser] = useState< User | null>(null); + const [isOpen, setIsOpen] = useState(false); + const [user, setUser] = useState(null); useEffect(() => { const user = localStorage.getItem("user"); if (user) { setUser(JSON.parse(user)); } - }, []) + }, []); const closeModal = () => { setIsOpen(false); }; + const openAuthModal = () => { + setIsOpen(true); + }; + return ( - + {/* Home Page */} - } /> + } /> {/* Project Page */} - } /> + } /> {/* Project Page */} - } /> + } /> {/* Profile Page */} - } /> + } /> {/* Not Found Page */} - } /> + } />