diff --git a/README.md b/README.md index f768e33..862ea58 100644 --- a/README.md +++ b/README.md @@ -6,3 +6,4 @@ Currently, two official plugins are available: - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh +this dummy changes \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 72b2039..5505d58 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,9 +10,10 @@ "dependencies": { "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.2", + "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.22.3" + "react-router-dom": "^6.23.0" }, "devDependencies": { "@types/react": "^18.2.66", @@ -4040,9 +4041,9 @@ } }, "node_modules/@remix-run/router": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", - "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==", + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz", + "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==", "engines": { "node": ">=14.0.0" } @@ -5012,6 +5013,11 @@ "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==", "dev": true }, + "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/available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -5036,6 +5042,16 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -5282,6 +5298,17 @@ "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz", "integrity": "sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==" }, + "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/compute-scroll-into-view": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.0.3.tgz", @@ -5482,6 +5509,14 @@ "url": "https://github.com/sponsors/ljharb" } }, + "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/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -6431,6 +6466,25 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, + "node_modules/follow-redirects": { + "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", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -6440,6 +6494,19 @@ "is-callable": "^1.1.3" } }, + "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/framer-motion": { "version": "11.0.27", "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.27.tgz", @@ -7424,6 +7491,25 @@ "node": ">=8.6" } }, + "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/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -7808,6 +7894,11 @@ "react-is": "^16.13.1" } }, + "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/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -7968,11 +8059,11 @@ "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/react-router": { - "version": "6.22.3", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", - "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", + "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==", "dependencies": { - "@remix-run/router": "1.15.3" + "@remix-run/router": "1.16.0" }, "engines": { "node": ">=14.0.0" @@ -7982,12 +8073,12 @@ } }, "node_modules/react-router-dom": { - "version": "6.22.3", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", - "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz", + "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==", "dependencies": { - "@remix-run/router": "1.15.3", - "react-router": "6.22.3" + "@remix-run/router": "1.16.0", + "react-router": "6.23.0" }, "engines": { "node": ">=14.0.0" @@ -11858,9 +11949,9 @@ "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==" }, "@remix-run/router": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", - "integrity": "sha512-Oy8rmScVrVxWZVOpEF57ovlnhpZ8CCPlnIIumVcV9nFdiSIrus99+Lw78ekXyGvVDlIsFJbSfmSovJUhCWYV3w==" + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.0.tgz", + "integrity": "sha512-Quz1KOffeEf/zwkCBM3kBtH4ZoZ+pT3xIXBG4PPW/XFtDP7EGhtTiC2+gpL9GnR7+Qdet5Oa6cYSvwKYg6kN9Q==" }, "@rollup/pluginutils": { "version": "4.2.1", @@ -12538,6 +12629,11 @@ "integrity": "sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==", "dev": true }, + "asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, "available-typed-arrays": { "version": "1.0.7", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz", @@ -12553,6 +12649,16 @@ "integrity": "sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ==", "dev": true }, + "axios": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz", + "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==", + "requires": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -12733,6 +12839,14 @@ "resolved": "https://registry.npmjs.org/color2k/-/color2k-2.0.3.tgz", "integrity": "sha512-zW190nQTIoXcGCaU08DvVNFTmQhUpnJfVuAKfWqUQkflXKpaDdpaYoM0iluLS9lgJNHyBF58KKA2FBEwkD7wog==" }, + "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" + } + }, "compute-scroll-into-view": { "version": "3.0.3", "resolved": "https://registry.npmjs.org/compute-scroll-into-view/-/compute-scroll-into-view-3.0.3.tgz", @@ -12885,6 +12999,11 @@ "object-keys": "^1.1.1" } }, + "delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==" + }, "dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -13622,6 +13741,11 @@ } } }, + "follow-redirects": { + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==" + }, "for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -13631,6 +13755,16 @@ "is-callable": "^1.1.3" } }, + "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" + } + }, "framer-motion": { "version": "11.0.27", "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.0.27.tgz", @@ -14323,6 +14457,19 @@ "picomatch": "^2.3.1" } }, + "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" + } + }, "minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -14585,6 +14732,11 @@ "react-is": "^16.13.1" } }, + "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==" + }, "punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -14687,20 +14839,20 @@ } }, "react-router": { - "version": "6.22.3", - "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.22.3.tgz", - "integrity": "sha512-dr2eb3Mj5zK2YISHK++foM9w4eBnO23eKnZEDs7c880P6oKbrjz/Svg9+nxqtHQK+oMW4OtjZca0RqPglXxguQ==", + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.0.tgz", + "integrity": "sha512-wPMZ8S2TuPadH0sF5irFGjkNLIcRvOSaEe7v+JER8508dyJumm6XZB1u5kztlX0RVq6AzRVndzqcUh6sFIauzA==", "requires": { - "@remix-run/router": "1.15.3" + "@remix-run/router": "1.16.0" } }, "react-router-dom": { - "version": "6.22.3", - "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.22.3.tgz", - "integrity": "sha512-7ZILI7HjcE+p31oQvwbokjk6OA/bnFxrhJ19n82Ex9Ph8fNAq+Hm/7KchpMGlTgWhUxRHMMCut+vEtNpWpowKw==", + "version": "6.23.0", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.0.tgz", + "integrity": "sha512-Q9YaSYvubwgbal2c9DJKfx6hTNoBp3iJDsl+Duva/DwxoJH+OTXkxGpql4iUK2sla/8z4RpjAm6EWx1qUDuopQ==", "requires": { - "@remix-run/router": "1.15.3", - "react-router": "6.22.3" + "@remix-run/router": "1.16.0", + "react-router": "6.23.0" } }, "react-style-singleton": { diff --git a/package.json b/package.json index a1d7ba4..1de1cf9 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { "name": "inotek", + "proxy": "http://localhost:4001/", "private": true, "version": "0.0.0", "type": "module", @@ -12,9 +13,10 @@ "dependencies": { "@chakra-ui/icons": "^2.1.1", "@chakra-ui/react": "^2.8.2", + "axios": "^1.6.8", "react": "^18.2.0", "react-dom": "^18.2.0", - "react-router-dom": "^6.22.3" + "react-router-dom": "^6.23.0" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/src/App.jsx b/src/App.jsx index 7eadf73..5cea459 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,17 +1,22 @@ import { BrowserRouter, Route, Routes } from "react-router-dom"; -import LandingPage from "./pages/LandingPage" +import LandingPage from "./pages/LandingPage"; import FindJob from "./pages/FindJob"; import Chat from "./pages/Chat"; import JobDetails from "./pages/JobDetails"; +import LoginPage from "./pages/LoginPage"; +import SignUpPage from "./pages/SignUpPage"; export default function App() { return ( - }/> - }/> - }/> - }/> + } /> + } /> + } />{" "} + {/* Corrected typo here */} + } /> + } /> + } /> ); diff --git a/src/Components/FindJobNav.jsx b/src/Components/FindJobNav.jsx index d5708d7..7b3a97f 100644 --- a/src/Components/FindJobNav.jsx +++ b/src/Components/FindJobNav.jsx @@ -1,6 +1,6 @@ import { BellIcon, SettingsIcon } from "@chakra-ui/icons"; import { Box, Heading, Flex, Avatar, Square } from "@chakra-ui/react"; -import { NavLink } from "react-router-dom"; +import { NavLink,Link } from "react-router-dom"; import PropTypes from "prop-types"; export default function FindJobNav({ feature }) { @@ -15,12 +15,14 @@ export default function FindJobNav({ feature }) { color="#777" > - - Hirez - + + + Hirez + + { - async function fetchJobs() { - try { - const response = await fetch("db/db.json"); - const data = await response.json(); - setJobs(data); - } catch (error) { - console.error("Error fetching jobs:", error); +export default function FindJobSecMain() { + const [jobs, setJobs] = useState([]); + const colors = [ + "#E0FFFF", // Light Cyan + "#F0E68C", // Khaki + "#FFE4C4", // Bisque + "#F0FFF0", // Honeydew + "#FFF8DC", // Cornsilk + "#FFDAB9", // Peach Puff + "#F5DEB3", // Wheat + "#FAFAD2", // Light Goldenrod Yellow + "#FFEFDB", // Pale Goldenrod + "#F0F8FF", // Alice Blue + "#F0FFFF", // Azure + "#F5F5DC", // Beige + ]; + const getindex = ()=>{ + return Math.floor(Math.random()*12) + } + useEffect(() => { + const fetchJobs = async () => { + try { + const response = await fetch("http://localhost:4001/api/vacancy/"); + if (!response.ok) { + throw new Error("Failed to fetch jobs"); } + const data = await response.json(); + setJobs(data.vacancies); + console.log(data.vacancies); + } catch (error) { + console.error("Error fetching jobs:", error); } + }; - fetchJobs(); - }, []); - + fetchJobs(); + }, []); return ( @@ -36,7 +50,7 @@ export default function FindJobSecMain() { borderRadius="20px" fontWeight="bold" > - 69 + {jobs.length} @@ -58,15 +72,18 @@ export default function FindJobSecMain() { > {jobs.map((job, index) => ( - + { + job.company && + + } ))} diff --git a/src/Components/JobCard.jsx b/src/Components/JobCard.jsx index 19c478b..9d2914e 100644 --- a/src/Components/JobCard.jsx +++ b/src/Components/JobCard.jsx @@ -32,8 +32,10 @@ export default function JobCard({ Save - - {company_name} + + {company_logo && ( + {company_name} + )} {company_name} @@ -55,7 +57,7 @@ export default function JobCard({ {" "} {/* Push buttons to bottom */} - - Hirez - + + Hirez + - - + + + + + + - + + diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx new file mode 100644 index 0000000..8e81d46 --- /dev/null +++ b/src/pages/LoginPage.jsx @@ -0,0 +1,162 @@ +import { useState } from "react"; +import axios from "axios"; +import { + Box, + Flex, + FormControl, + FormLabel, + Input, + Heading, + Alert, + AlertIcon, + Button, + Modal, + ModalOverlay, + ModalContent, + ModalHeader, + ModalBody, + ModalCloseButton, +} from "@chakra-ui/react"; +import styles from "./LoginPage.module.css"; +import { Link } from "react-router-dom"; +import JobDetailNav from "../Components/JobDetailNav"; + +const LoginPage = () => { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [error, setError] = useState(""); + const [successMessage, setSuccessMessage] = useState(""); + const [isLoginSuccess, setIsLoginSuccess] = useState(false); + const [showModal, setShowModal] = useState(false); // State for modal + + const handleSubmit = async (e) => { + e.preventDefault(); + + try { + const response = await axios.post( + "http://localhost:4001/api/user/login", + { + email, + password, + } + ); + + const data = response.data; + + if (response.status === 200) { + localStorage.setItem("userId", data.user._id); + setSuccessMessage(data.message); + setError(""); + setIsLoginSuccess(true); + + // Show modal after successful login + setShowModal(true); + } else { + setError(data.message); + setSuccessMessage(""); + setIsLoginSuccess(false); + } + } catch (error) { + console.error("Error:", error); + setError("An error occurred while logging in."); + setSuccessMessage(""); + setIsLoginSuccess(false); + } + }; + + return ( + + + + + + Login + + + {error && ( + + + {error} + + )} + {successMessage && ( + + + {successMessage} + + )} +
+ + Email address + setEmail(e.target.value)} + color="whitesmoke" + focusBorderColor="#00dbde" + /> + + + Password + setPassword(e.target.value)} + color="whitesmoke" + focusBorderColor="#fc00ff" + /> + + + + + + + +
+ + + + + {/* Modal */} + setShowModal(false)}> + + + Success! + + +

You have successfully logged in.

+ + + + + + + + ); +}; + +export default LoginPage; diff --git a/src/pages/LoginPage.module.css b/src/pages/LoginPage.module.css new file mode 100644 index 0000000..1ffda7f --- /dev/null +++ b/src/pages/LoginPage.module.css @@ -0,0 +1,67 @@ +.body { + background: radial-gradient(circle at -8.9% calc(51.2% + 10vh), rgb(255, 124, 0) 0%, rgb(255, 124, 0) 15.9%, rgb(255, 163, 77) 15.9%, rgb(255, 163, 77) 24.4%, rgb(19, 30, 37) 24.5%, rgb(19, 30, 37) 66%); +} + +.container { + background: rgba( 255, 255, 255, 0.25 ); +box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); +backdrop-filter: blur( 4px ); +-webkit-backdrop-filter: blur( 4px ); +border-radius: 10px; +border: 1px solid rgba( 255, 255, 255, 0.18 ); +} +.btn { + position: relative; + width: 120px; + height: 40px; + background-color: #000; + display: flex; + align-items: center; + color: white; + flex-direction: column; + justify-content: center; + border: none; + padding: 10px 20px; + gap: 12px; + border-radius: 8px; + cursor: pointer; + margin-top: 40px; +} + +.btn::before { + content: ''; + position: absolute; + inset: 0; + left: -4px; + top: -1px; + margin: auto; + width: 128px; + height: 48px; + border-radius: 10px; + background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% ); + z-index: -10; + pointer-events: none; + transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.btn::after { + content: ""; + z-index: -1; + position: absolute; + inset: 0; + background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% ); + transform: translate3d(0, 0, 0) scale(0.95); + filter: blur(20px); +} + +.btn:hover::after { + filter: blur(30px); +} + +.btn:hover::before { + transform: rotate(-180deg); +} + +.btn:active::before { + scale: 0.7; +} diff --git a/src/pages/SignUpPage.jsx b/src/pages/SignUpPage.jsx new file mode 100644 index 0000000..b0efac7 --- /dev/null +++ b/src/pages/SignUpPage.jsx @@ -0,0 +1,149 @@ +import { useState } from "react"; +import { + Box, + Flex, + FormControl, + FormLabel, + Input, + Heading, + Alert, + AlertIcon, +} from "@chakra-ui/react"; +import styles from "./SignUpPage.module.css"; +import { Link } from "react-router-dom"; +import axios from "axios"; // Import Axios +import JobDetailNav from "../Components/JobDetailNav"; + +const SignUpPage = () => { + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + const [name, setName] = useState(""); + const [phone, setPhone] = useState(""); + const [error, setError] = useState(""); + const [successMessage, setSuccessMessage] = useState(""); + + const handleSubmit = async (e) => { + e.preventDefault(); + if (email && password && name && phone) { + try { + const response = await axios.post( + "http://localhost:4001/api/user/signup", + { + name, + email, + phoneNo: parseInt(phone), + password, + } + ); + console.log("Sign-up successful", response.data); + setSuccessMessage("Sign-up successful. Redirecting to sign-in page..."); + setTimeout(() => { + setSuccessMessage(""); + }, 2000); // Hide the success message after 2 seconds + } catch (error) { + setError("Sign-up failed. Please try again."); // Handle errors if any + } + } else { + setError("Please fill in all fields"); + } + }; + + return ( + + + + + + Sign Up + + + {error && ( + + + {error} + + )} + {successMessage && ( + + + {successMessage} + + )} +
+ + Email address + setEmail(e.target.value)} + color="whitesmoke" + focusBorderColor="#00dbde" + /> + + + Password + setPassword(e.target.value)} + color="whitesmoke" + focusBorderColor="#fc00ff" + /> + + + Name + setName(e.target.value)} + color="whitesmoke" + focusBorderColor="#00dbde" + /> + + + Phone number + setPhone(e.target.value)} + color="whitesmoke" + focusBorderColor="#fc00ff" + /> + + + + + + + +
+ + + + + ); +}; + +export default SignUpPage; diff --git a/src/pages/SignUpPage.module.css b/src/pages/SignUpPage.module.css new file mode 100644 index 0000000..5b42d7a --- /dev/null +++ b/src/pages/SignUpPage.module.css @@ -0,0 +1,67 @@ +.body { + background: radial-gradient(circle at calc(108% + 0vh) 60.2%, rgb(255, 124, 0) 0%, rgb(255, 124, 0) 15.9%, rgb(255, 163, 77) 15.9%, rgb(255, 163, 77) 24.4%, rgb(19, 30, 37) 24.5%, rgb(19, 30, 37) 66%); +} + +.container { + background: rgba( 255, 255, 255, 0.25 ); +box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); +backdrop-filter: blur( 4px ); +-webkit-backdrop-filter: blur( 4px ); +border-radius: 10px; +border: 1px solid rgba( 255, 255, 255, 0.18 ); +} +.btn { + position: relative; + width: 120px; + height: 40px; + background-color: #000; + display: flex; + align-items: center; + color: white; + flex-direction: column; + justify-content: center; + border: none; + padding: 10px 20px; + gap: 12px; + border-radius: 8px; + cursor: pointer; + margin-top: 40px; +} + +.btn::before { + content: ''; + position: absolute; + inset: 0; + left: -4px; + top: -1px; + margin: auto; + width: 128px; + height: 48px; + border-radius: 10px; + background: linear-gradient(-45deg, #e81cff 0%, #40c9ff 100% ); + z-index: -10; + pointer-events: none; + transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275); +} + +.btn::after { + content: ""; + z-index: -1; + position: absolute; + inset: 0; + background: linear-gradient(-45deg, #fc00ff 0%, #00dbde 100% ); + transform: translate3d(0, 0, 0) scale(0.95); + filter: blur(20px); +} + +.btn:hover::after { + filter: blur(30px); +} + +.btn:hover::before { + transform: rotate(-180deg); +} + +.btn:active::before { + scale: 0.7; +}