diff --git a/client/package-lock.json b/client/package-lock.json index 65e9880..6f53dec 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -56,6 +56,7 @@ "socket.io": "^4.7.5", "socket.io-client": "^4.8.1", "sort-by": "^0.0.2", + "twilio": "^5.3.5", "uuid": "^11.0.2", "yup": "^1.4.0" }, @@ -2118,6 +2119,18 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/agent-base": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz", + "integrity": "sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==", + "license": "MIT", + "dependencies": { + "debug": "4" + }, + "engines": { + "node": ">= 6.0.0" + } + }, "node_modules/ajv": { "version": "6.12.6", "dev": true, @@ -2562,6 +2575,12 @@ "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7" } }, + "node_modules/buffer-equal-constant-time": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz", + "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==", + "license": "BSD-3-Clause" + }, "node_modules/call-bind": { "version": "1.0.7", "license": "MIT", @@ -3011,6 +3030,15 @@ "dev": true, "license": "MIT" }, + "node_modules/ecdsa-sig-formatter": { + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz", + "integrity": "sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==", + "license": "Apache-2.0", + "dependencies": { + "safe-buffer": "^5.0.1" + } + }, "node_modules/electron-to-chromium": { "version": "1.5.45", "dev": true, @@ -3996,6 +4024,8 @@ }, "node_modules/firebase": { "version": "10.14.1", + "resolved": "https://registry.npmjs.org/firebase/-/firebase-10.14.1.tgz", + "integrity": "sha512-0KZxU+Ela9rUCULqFsUUOYYkjh7OM1EWdIfG6///MtXd0t2/uUIf0iNV5i0KariMhRQ5jve/OY985nrAXFaZeQ==", "license": "Apache-2.0", "dependencies": { "@firebase/analytics": "0.10.8", @@ -4388,6 +4418,19 @@ "version": "0.5.8", "license": "MIT" }, + "node_modules/https-proxy-agent": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz", + "integrity": "sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==", + "license": "MIT", + "dependencies": { + "agent-base": "6", + "debug": "4" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/idb": { "version": "7.1.1", "license": "ISC" @@ -4953,6 +4996,40 @@ "node": ">=6" } }, + "node_modules/jsonwebtoken": { + "version": "9.0.2", + "resolved": "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz", + "integrity": "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==", + "license": "MIT", + "dependencies": { + "jws": "^3.2.2", + "lodash.includes": "^4.3.0", + "lodash.isboolean": "^3.0.3", + "lodash.isinteger": "^4.0.4", + "lodash.isnumber": "^3.0.3", + "lodash.isplainobject": "^4.0.6", + "lodash.isstring": "^4.0.1", + "lodash.once": "^4.0.0", + "ms": "^2.1.1", + "semver": "^7.5.4" + }, + "engines": { + "node": ">=12", + "npm": ">=6" + } + }, + "node_modules/jsonwebtoken/node_modules/semver": { + "version": "7.6.3", + "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz", + "integrity": "sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==", + "license": "ISC", + "bin": { + "semver": "bin/semver.js" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/jsx-ast-utils": { "version": "3.3.5", "dev": true, @@ -4967,6 +5044,27 @@ "node": ">=4.0" } }, + "node_modules/jwa": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz", + "integrity": "sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==", + "license": "MIT", + "dependencies": { + "buffer-equal-constant-time": "1.0.1", + "ecdsa-sig-formatter": "1.0.11", + "safe-buffer": "^5.0.1" + } + }, + "node_modules/jws": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz", + "integrity": "sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==", + "license": "MIT", + "dependencies": { + "jwa": "^1.4.1", + "safe-buffer": "^5.0.1" + } + }, "node_modules/keyv": { "version": "4.5.4", "dev": true, @@ -5070,6 +5168,42 @@ "version": "4.0.8", "license": "MIT" }, + "node_modules/lodash.includes": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz", + "integrity": "sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==", + "license": "MIT" + }, + "node_modules/lodash.isboolean": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz", + "integrity": "sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==", + "license": "MIT" + }, + "node_modules/lodash.isinteger": { + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz", + "integrity": "sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==", + "license": "MIT" + }, + "node_modules/lodash.isnumber": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz", + "integrity": "sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==", + "license": "MIT" + }, + "node_modules/lodash.isplainobject": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz", + "integrity": "sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==", + "license": "MIT" + }, + "node_modules/lodash.isstring": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz", + "integrity": "sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==", + "license": "MIT" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "license": "MIT" @@ -5079,6 +5213,12 @@ "dev": true, "license": "MIT" }, + "node_modules/lodash.once": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz", + "integrity": "sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==", + "license": "MIT" + }, "node_modules/lodash.reduce": { "version": "4.6.0", "license": "MIT" @@ -5304,7 +5444,6 @@ }, "node_modules/object-inspect": { "version": "1.13.2", - "dev": true, "license": "MIT", "engines": { "node": ">= 0.4" @@ -5832,6 +5971,21 @@ "node": ">=6" } }, + "node_modules/qs": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.0.tgz", + "integrity": "sha512-+38qI9SOr8tfZ4QmJNplMUxqjbe7LKvvZgWdExBOmd+egZTtjLB67Gu0HRX3u/XOq7UU2Nx6nsjvS16Z9uwfpg==", + "license": "BSD-3-Clause", + "dependencies": { + "side-channel": "^1.0.6" + }, + "engines": { + "node": ">=0.6" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, "node_modules/queue-microtask": { "version": "1.2.3", "dev": true, @@ -7137,6 +7291,12 @@ "loose-envify": "^1.1.0" } }, + "node_modules/scmp": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/scmp/-/scmp-2.1.0.tgz", + "integrity": "sha512-o/mRQGk9Rcer/jEEw/yw4mwo3EU/NvYvp577/Btqrym9Qy5/MdWGBqipbALgd2lrdWTJ5/gqDusxfnQBxOxT2Q==", + "license": "BSD-3-Clause" + }, "node_modules/scroll-into-view-if-needed": { "version": "3.1.0", "license": "MIT", @@ -7205,7 +7365,6 @@ }, "node_modules/side-channel": { "version": "1.0.6", - "dev": true, "license": "MIT", "dependencies": { "call-bind": "^1.0.7", @@ -7635,6 +7794,24 @@ "version": "2.8.0", "license": "0BSD" }, + "node_modules/twilio": { + "version": "5.3.5", + "resolved": "https://registry.npmjs.org/twilio/-/twilio-5.3.5.tgz", + "integrity": "sha512-f/sA1Yd6TyIzfcq0u4QDGU+93afwswsJB+rf3T08tvBAMobBDVR3DfGREwJr5jp8xUic0qWa7GbJidk16NA4bg==", + "license": "MIT", + "dependencies": { + "axios": "^1.7.4", + "dayjs": "^1.11.9", + "https-proxy-agent": "^5.0.0", + "jsonwebtoken": "^9.0.2", + "qs": "^6.9.4", + "scmp": "^2.1.0", + "xmlbuilder": "^13.0.2" + }, + "engines": { + "node": ">=14.0" + } + }, "node_modules/type-check": { "version": "0.4.0", "dev": true, @@ -8077,6 +8254,15 @@ } } }, + "node_modules/xmlbuilder": { + "version": "13.0.2", + "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-13.0.2.tgz", + "integrity": "sha512-Eux0i2QdDYKbdbA6AM6xE4m6ZTZr4G4xF9kahI2ukSEMCzwce2eX9WlTI5J3s+NU7hpasFsr8hWIONae7LluAQ==", + "license": "MIT", + "engines": { + "node": ">=6.0" + } + }, "node_modules/xmlhttprequest-ssl": { "version": "2.1.2", "engines": { diff --git a/client/package.json b/client/package.json index d4a1f73..df5e27c 100644 --- a/client/package.json +++ b/client/package.json @@ -58,6 +58,7 @@ "socket.io": "^4.7.5", "socket.io-client": "^4.8.1", "sort-by": "^0.0.2", + "twilio": "^5.3.5", "uuid": "^11.0.2", "yup": "^1.4.0" }, diff --git a/client/src/App.jsx b/client/src/App.jsx index 2a0844e..75a1835 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -37,8 +37,9 @@ import AOS from "aos"; import "aos/dist/aos.css"; import Collab from "./component/Collab"; import CreateBlog from "./component/CreateBlog"; +import LoginOTP from "./component/LoginPhone"; import UploadProject from "./component/UploadProject"; -import DiscussionForum from "./component/DiscussionForum"; + const Layout = ({ children, mode, setProgress, toggleMode, showAlert }) => { return ( @@ -120,6 +121,7 @@ function App() { + setProgress(0)} />
@@ -130,6 +132,7 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> @@ -137,20 +140,24 @@ function App() { } /> } /> } /> + } /> } /> } /> } /> } /> } /> + } /> + } /> } /> } /> } /> } /> + } /> } /> - } /> } /> +
diff --git a/client/src/component/Login.jsx b/client/src/component/Login.jsx index 99f9569..688887d 100644 --- a/client/src/component/Login.jsx +++ b/client/src/component/Login.jsx @@ -15,7 +15,8 @@ import { useAuth } from '../contexts/authContext'; const VITE_SERVER_PORT = import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com"; -const Login = ({ mode, isloggedin, setloggedin }) => { +const Login = ({ mode, showAlert, loggedin, setloggedin }) => { + const [credentials, setCredentials] = useState({ email: "", password: "" }); const [loading, setLoading] = useState(false); const navigate = useNavigate(); @@ -59,11 +60,12 @@ const Login = ({ mode, isloggedin, setloggedin }) => { } const json = await response.json(); - + console.log(json); + if (json.success) { localStorage.setItem("token", json.authtoken); - toast.success("Login successful!"); - setloggedin(!isloggedin); + toast.success("Login Successfully!"); + setloggedin(!loggedin) navigate("/"); } else { toast.error(json.message || "Login failed! Invalid credentials."); @@ -112,7 +114,7 @@ const Login = ({ mode, isloggedin, setloggedin }) => { toast.error("Google sign-in failed. Please try again."); setloggedin(false); } - }; + }; return (
@@ -181,13 +183,28 @@ const Login = ({ mode, isloggedin, setloggedin }) => { handleRememberMe(e)} />
- + + + + + @@ -259,7 +276,8 @@ const Login = ({ mode, isloggedin, setloggedin }) => { Login.propTypes = { mode: PropTypes.string.isRequired, - isloggedin: PropTypes.bool.isRequired, + showAlert: PropTypes.func.isRequired, + loggedin: PropTypes.bool.isRequired, setloggedin: PropTypes.func.isRequired, }; diff --git a/client/src/component/LoginPhone.jsx b/client/src/component/LoginPhone.jsx new file mode 100644 index 0000000..ffc96f4 --- /dev/null +++ b/client/src/component/LoginPhone.jsx @@ -0,0 +1,234 @@ +import PropTypes from "prop-types"; +import { useState } from "react"; +import { useNavigate, Link } from "react-router-dom"; +import { Input, Button, Spin } from "antd"; +import { + UserOutlined, + LockOutlined, + EyeInvisibleOutlined, + EyeTwoTone, + PhoneFilled +} from "@ant-design/icons"; +import "../css/Login.css"; +import toast from "react-hot-toast"; +import { useAuth } from '../contexts/authContext/index' + +const VITE_SERVER_PORT = + import.meta.env.VITE_SERVER_PORT || "https://bitbox-uxbo.onrender.com"; + +const LoginOTP = ({ mode, showAlert, loggedin, setloggedin }) => { + const [number, setNumber] = useState("") + const [loading, setLoading] = useState(false); + const [otpSent, setOtpSent] = useState(false); + const [otp, setOtp] = useState(""); + const credentials = "" + + const navigate = useNavigate(); + + const handleSubmit = async (e) => { + e.preventDefault(); + setLoading(true); + + try { + + const response = await fetch(`${VITE_SERVER_PORT}/api/auth/sendotp`, { + method: "POST", + credentials: 'include', + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({number: number}), + }); + + const res = await response.json() + + if(res.success){ + toast.success("OTP sent successfully") + setOtpSent(true); + } else { + toast.error("Error sending otp"); + console.log("error sending otp"); + } + } catch (error) { + toast.error(error) + } + + setLoading(false) + }; + + + const { userLoggedIn, setUserLoggedIn } = useAuth() + + const handleOtpSubmit = async (e) => { + e.preventDefault() + console.log("hii"); + + setLoading(true); + + try { + + const response = await fetch(`${VITE_SERVER_PORT}/api/auth/verifyotp`, { + method: "POST", + credentials: 'include', + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({otp: otp}), + }); + + const res = await response.json() + + if(!res.success){ + toast.error("incorrect OTP") + console.log("incorrect otp"); + } else { + // alert("User signed in successfully!"); + toast.success("User signed in successfully!") + setUserLoggedIn(true) + setloggedin(!loggedin) + navigate("/") + } + + } catch (error) { + console.log(error); + toast.error(error) + } + + setLoading(false) + + } + + return ( +
+ {userLoggedIn && navigate('/')} +
+
+
+

Login Using OTP

+ {/* Title Line */} + + + { + !otpSent && <> +
+ } + placeholder="Phone number" + name="phone" + value={number} + onChange={(e)=>setNumber(e.target.value)} + autoComplete="on" + className="h-10 text-xl" + style={{ + backgroundColor: mode === "dark" ? "black" : "white", + color: mode === "dark" ? "white" : "black", + }} + required + + /> +
+ + + + } + + { + otpSent && <> +
+ } + placeholder="OTP" + name="otp" + value={otp} + onChange={(e)=>setOtp(e.target.value)} + autoComplete="on" + className="h-10 text-xl" + style={{ + backgroundColor: mode === "dark" ? "black" : "white", + color: mode === "dark" ? "white" : "black", + }} + required + /> +
+ + + + } + +

+ Don't have an account? + + + {" "} Sign Up + +

+ + + +
+ +
+

+ WELCOME +
+ BACK! +

+

+ Please Sign In here +
+ with your real info +

+
+
+
+ ); +}; + +LoginOTP.propTypes = { + mode: PropTypes.string.isRequired, + showAlert: PropTypes.func.isRequired, + loggedin: PropTypes.bool.isRequired, + setloggedin: PropTypes.func.isRequired, +}; + +export default LoginOTP; diff --git a/client/src/component/Navbar.jsx b/client/src/component/Navbar.jsx index 456047e..278dbc0 100644 --- a/client/src/component/Navbar.jsx +++ b/client/src/component/Navbar.jsx @@ -16,11 +16,9 @@ function Navbar(props) { const navigate = useNavigate(); const location = useLocation(); - // Get the current user from the context - const { currentUser } = useAuth(); + const { currentUser, userLoggedIn, setUserLoggedIn } = useAuth(); + const [isScrolled, setIsScrolled] = useState(false); // State to keep track of whether page has been scrolled - // eslint-disable-next-line - const [isScrolled, setIsScrolled] = useState(false); // eslint-disable-next-line const [isOpen, setIsOpen] = useState(false); // State to control the sidebar visibility @@ -86,6 +84,7 @@ function Navbar(props) { try { doSignOut(); localStorage.removeItem("token"); + setUserLoggedIn(false) navigate("/login"); } catch (error) { console.error(error); @@ -241,7 +240,7 @@ function Navbar(props) { {/* Right Links for Mobile Screen */}
- {localStorage.getItem("token") ? ( + {localStorage.getItem("token") || userLoggedIn ? ( <>