diff --git a/index.html b/index.html index 7f2abc5..955206c 100644 --- a/index.html +++ b/index.html @@ -2,9 +2,9 @@ - + - Vite + React + Skillov.ai
diff --git a/package-lock.json b/package-lock.json index 3384e4f..cfc4841 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,13 +10,16 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^6.4.1", "@mui/material": "^6.4.1", "@reduxjs/toolkit": "^2.5.1", "axios": "^1.7.9", + "formik": "^2.4.6", "react": "^18.3.1", "react-dom": "^18.3.1", "react-redux": "^9.2.0", - "react-router-dom": "^7.1.3" + "react-router-dom": "^7.1.3", + "yup": "^1.6.1" }, "devDependencies": { "@eslint/js": "^9.17.0", @@ -1171,6 +1174,32 @@ "url": "https://opencollective.com/mui-org" } }, + "node_modules/@mui/icons-material": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.4.1.tgz", + "integrity": "sha512-wsxFcUTQxt4s+7Bg4GgobqRjyaHLmZGNOs+HJpbwrwmLbT6mhIJxhpqsKzzWq9aDY8xIe7HCjhpH7XI5UD6teA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.26.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^6.4.1", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mui/material": { "version": "6.4.1", "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.4.1.tgz", @@ -1735,6 +1764,16 @@ "dev": true, "license": "MIT" }, + "node_modules/@types/hoist-non-react-statics": { + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.6.tgz", + "integrity": "sha512-lPByRJUer/iN/xa4qpyL0qmL11DqNW81iU/IG1S3uvRUq4oKagz8VCxZjiWkumgt66YT3vOdDgZ0o32sGKtCEw==", + "license": "MIT", + "dependencies": { + "@types/react": "*", + "hoist-non-react-statics": "^3.3.0" + } + }, "node_modules/@types/json-schema": { "version": "7.0.15", "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz", @@ -2422,6 +2461,15 @@ "dev": true, "license": "MIT" }, + "node_modules/deepmerge": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz", + "integrity": "sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==", + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/define-data-property": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz", @@ -3093,6 +3141,31 @@ "node": ">= 6" } }, + "node_modules/formik": { + "version": "2.4.6", + "resolved": "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz", + "integrity": "sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==", + "funding": [ + { + "type": "individual", + "url": "https://opencollective.com/formik" + } + ], + "license": "Apache-2.0", + "dependencies": { + "@types/hoist-non-react-statics": "^3.3.1", + "deepmerge": "^2.1.1", + "hoist-non-react-statics": "^3.3.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "react-fast-compare": "^2.0.1", + "tiny-warning": "^1.0.2", + "tslib": "^2.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/fsevents": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", @@ -3972,6 +4045,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", + "license": "MIT" + }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==", + "license": "MIT" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -4389,6 +4474,12 @@ "react-is": "^16.13.1" } }, + "node_modules/property-expr": { + "version": "2.0.6", + "resolved": "https://registry.npmjs.org/property-expr/-/property-expr-2.0.6.tgz", + "integrity": "sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==", + "license": "MIT" + }, "node_modules/proxy-from-env": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", @@ -4430,6 +4521,12 @@ "react": "^18.3.1" } }, + "node_modules/react-fast-compare": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz", + "integrity": "sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==", + "license": "MIT" + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -5051,6 +5148,30 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tiny-case": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-case/-/tiny-case-1.0.3.tgz", + "integrity": "sha512-Eet/eeMhkO6TX8mnUteS9zgPbUMQa4I6Kkp5ORiBD5476/m+PIRiumP5tmh5ioJpH7k51Kehawy2UDfsnxxY8Q==", + "license": "MIT" + }, + "node_modules/tiny-warning": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz", + "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==", + "license": "MIT" + }, + "node_modules/toposort": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/toposort/-/toposort-2.0.2.tgz", + "integrity": "sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==", + "license": "MIT" + }, + "node_modules/tslib": { + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz", + "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==", + "license": "0BSD" + }, "node_modules/turbo-stream": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/turbo-stream/-/turbo-stream-2.4.0.tgz", @@ -5070,6 +5191,18 @@ "node": ">= 0.8.0" } }, + "node_modules/type-fest": { + "version": "2.19.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-2.19.0.tgz", + "integrity": "sha512-RAH822pAdBgcNMAfWnCBU3CFZcfZ/i1eZjwFU/dsLKumyuuP3niueg2UAukXYF0E2AAoc82ZSSf9J0WQBinzHA==", + "license": "(MIT OR CC0-1.0)", + "engines": { + "node": ">=12.20" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/typed-array-buffer": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz", @@ -5437,6 +5570,18 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/yup": { + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/yup/-/yup-1.6.1.tgz", + "integrity": "sha512-JED8pB50qbA4FOkDol0bYF/p60qSEDQqBD0/qeIrUCG1KbPBIQ776fCUNb9ldbPcSTxA69g/47XTo4TqWiuXOA==", + "license": "MIT", + "dependencies": { + "property-expr": "^2.0.5", + "tiny-case": "^1.0.3", + "toposort": "^2.0.2", + "type-fest": "^2.19.0" + } } } } diff --git a/package.json b/package.json index e8c9537..47afaef 100644 --- a/package.json +++ b/package.json @@ -12,13 +12,16 @@ "dependencies": { "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", + "@mui/icons-material": "^6.4.1", "@mui/material": "^6.4.1", "@reduxjs/toolkit": "^2.5.1", "axios": "^1.7.9", + "formik": "^2.4.6", "react": "^18.3.1", "react-dom": "^18.3.1", "react-redux": "^9.2.0", - "react-router-dom": "^7.1.3" + "react-router-dom": "^7.1.3", + "yup": "^1.6.1" }, "devDependencies": { "@eslint/js": "^9.17.0", diff --git a/src/App.jsx b/src/App.jsx index 2a7ff79..a280b4c 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -11,20 +11,20 @@ import { darkTheme, lightTheme } from './theme'; const App = () => { const [darkMode, setDarkMode] = useState(false); - const toggleDarkMode = () => setDarkMode(!darkMode); + // const toggleDarkMode = () => setDarkMode(!darkMode); return ( - + */} } /> } /> diff --git a/src/assets/fav1.png b/src/assets/fav1.png new file mode 100644 index 0000000..14fdf19 Binary files /dev/null and b/src/assets/fav1.png differ diff --git a/src/assets/favicon.jpg b/src/assets/favicon.jpg deleted file mode 100644 index 6056ca3..0000000 Binary files a/src/assets/favicon.jpg and /dev/null differ diff --git a/src/assets/index.js b/src/assets/index.js new file mode 100644 index 0000000..5a62e86 --- /dev/null +++ b/src/assets/index.js @@ -0,0 +1,3 @@ +import interviewImg from './interviewImg.jpeg'; +import skillovLogo from './fav1.png' +export { interviewImg, skillovLogo }; \ No newline at end of file diff --git a/src/assets/interviewImg.jpeg b/src/assets/interviewImg.jpeg new file mode 100644 index 0000000..2144366 Binary files /dev/null and b/src/assets/interviewImg.jpeg differ diff --git a/src/assets/react.svg b/src/assets/react.svg deleted file mode 100644 index 6c87de9..0000000 --- a/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx index e565ac8..2190c80 100644 --- a/src/pages/LoginPage.jsx +++ b/src/pages/LoginPage.jsx @@ -1,52 +1,168 @@ -import React, { useState } from 'react'; -import { useDispatch } from 'react-redux'; -import { loginSuccess, setError } from '../features/auth/authSlice'; -import { Box, Button, TextField, Typography, Alert } from '@mui/material'; +import React, { useState } from "react"; +import { Box, Button, Typography, Stack, InputLabel, OutlinedInput, InputAdornment, IconButton, FormControlLabel, Checkbox } from "@mui/material"; +import Grid from "@mui/material/Grid2"; +import { interviewImg } from "../assets/index"; +import RemoveRedEyeOutlinedIcon from '@mui/icons-material/RemoveRedEyeOutlined'; +import VisibilityOffOutlinedIcon from '@mui/icons-material/VisibilityOffOutlined'; +import { Formik } from "formik"; +import { Link } from "react-router-dom"; const LoginPage = () => { - const [email, setEmail] = useState(''); - const [password, setPassword] = useState(''); - const [error, setErrorState] = useState(null); - const dispatch = useDispatch(); + // States + const [showPassword, setShowPassword] = useState(false); + const [checked, setChecked] = useState(false); - const handleLogin = () => { - if (!email || !password) { - setErrorState('Email and Password are required.'); - return; - } - // Simulate login API call - try { - dispatch(loginSuccess({ email })); // Replace with actual API response - } catch (err) { - dispatch(setError(err.message)); - setErrorState('Invalid credentials.'); - } + // Functions + const handleClickShowPassword = () => { + const input = document.getElementById('password-login'); + const cursorPosition = input.selectionStart; + setShowPassword((prev) => !prev); + setTimeout(() => { + input.focus(); + input.setSelectionRange(cursorPosition, cursorPosition); + }, 0); }; return ( - - Login - {error && {error}} - setEmail(e.target.value)} - /> - setPassword(e.target.value)} - /> - - + + {/* Left Side (Image Section) */} + + + {/* Right Side (Login Form Section) */} + + + + Welcome to Skillov.ai + + + { + ({ values, errors, touched, handleChange, handleBlur, handleSubmit, isSubmitting }) => ( +
+ + + + Email + + + {touched.email && errors.email && ( + + {errors.email} + + )} + + + + + Create Password + + + + {showPassword ? : } + + + } + placeholder="Enter password" + /> + {touched?.password && errors?.password && ( + + {errors.password} + + )} + + + + + + setChecked(event.target.checked)} + name="checked" + color="primary" + size="small" + /> + } + label={'Remember me'} + /> + + + + + + + +
+ ) + } + + + + Don't have an account? Create an account + + + + + ); }; diff --git a/src/theme.js b/src/theme.js index 6219be2..2c0e64f 100644 --- a/src/theme.js +++ b/src/theme.js @@ -4,10 +4,10 @@ const lightTheme = createTheme({ palette: { mode: 'light', primary: { - main: '#2196f3', // Light Blue + main: '#B2A5FF', // Light purple }, secondary: { - main: '#90caf9', // Lighter Blue + main: '#DAD2FF', // Lighter purple }, background: { default: '#f5f5f5', // Light Gray @@ -27,10 +27,10 @@ const darkTheme = createTheme({ palette: { mode: 'dark', primary: { - main: '#2196f3', // Light Blue + main: '#B2A5FF', // Light purple }, secondary: { - main: '#64b5f6', // Slightly Lighter Blue + main: '#DAD2FF', // Slightly Lighter purple }, background: { default: '#121212', // Black