From 043a00126c8d362917eb000f1dbdaf8f34578428 Mon Sep 17 00:00:00 2001 From: ttjoe Date: Fri, 24 Feb 2023 19:26:14 +0000 Subject: [PATCH 01/10] Complete Logout functionalities --- backend/index.js | 4 +-- backend/routes/logout.js | 18 ++++++++++++ frontend/{.env => .env.development} | 2 ++ frontend/src/config/config.env | 6 ++++ frontend/src/pages/Home/Home.jsx | 5 +++- frontend/src/pages/account/Logout.jsx | 41 +++++++++++++++++++++++++++ frontend/src/pages/station/Create.jsx | 4 +-- frontend/vite.config.js | 4 +++ 8 files changed, 78 insertions(+), 6 deletions(-) rename frontend/{.env => .env.development} (60%) create mode 100644 frontend/src/config/config.env create mode 100644 frontend/src/pages/account/Logout.jsx diff --git a/backend/index.js b/backend/index.js index 320bf3f..632e3e0 100644 --- a/backend/index.js +++ b/backend/index.js @@ -5,9 +5,7 @@ const passport = require("passport"); const session = require("express-session"); const cookieParser = require("cookie-parser"); const cors = require("cors"); -const dotenv = require("dotenv").config({ - path: "./config/config.env", -}); +const dotenv = require("dotenv").config({path: "./config/config.env",}); const port = process.env.PORT; //MIDDLEWARE diff --git a/backend/routes/logout.js b/backend/routes/logout.js index e6c952d..9d29c31 100644 --- a/backend/routes/logout.js +++ b/backend/routes/logout.js @@ -7,4 +7,22 @@ router.get("/", (req, res) => { res.send("Logged out"); }); +router.delete("/", (req, res, next) => { + req.logout(function(err) { + if(err) { return next(err)} + res.send({ + message: "logout!" + }) + }) +}) + +router.post("/", (req, res, next) => { + req.logout(function(err) { + if(err) { return next(err)} + res.send({ + message: "logout!" + }) + }) +}) + module.exports = router; diff --git a/frontend/.env b/frontend/.env.development similarity index 60% rename from frontend/.env rename to frontend/.env.development index 49770df..1a538b2 100644 --- a/frontend/.env +++ b/frontend/.env.development @@ -2,3 +2,5 @@ PORT = 8021 NODE_ENV = "development" BACKEND_URI = "http://localhost:8020" FRONTEND_URI = "http://localhost:8021" +CLIENT_URL = "http://localhost:8021" +SERVER_URL = "http://localhost:8020" diff --git a/frontend/src/config/config.env b/frontend/src/config/config.env new file mode 100644 index 0000000..1a538b2 --- /dev/null +++ b/frontend/src/config/config.env @@ -0,0 +1,6 @@ +PORT = 8021 +NODE_ENV = "development" +BACKEND_URI = "http://localhost:8020" +FRONTEND_URI = "http://localhost:8021" +CLIENT_URL = "http://localhost:8021" +SERVER_URL = "http://localhost:8020" diff --git a/frontend/src/pages/Home/Home.jsx b/frontend/src/pages/Home/Home.jsx index 78823d4..69f1e66 100644 --- a/frontend/src/pages/Home/Home.jsx +++ b/frontend/src/pages/Home/Home.jsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react' import { Link } from 'react-router-dom' import { useLocation } from 'react-router-dom' import UserContext from '@contexts/UserDetails' - +import Logout from "@pages/account/Logout" function Home() { const location = useLocation() const { isAuth, profile } = useContext(UserContext) @@ -12,7 +12,10 @@ function Home() {
Signup
+ { isAuth && new} +
new station + { profile &&

Welcome {profile.fullname} - {profile.uuid}

} diff --git a/frontend/src/pages/account/Logout.jsx b/frontend/src/pages/account/Logout.jsx new file mode 100644 index 0000000..9dcfd8e --- /dev/null +++ b/frontend/src/pages/account/Logout.jsx @@ -0,0 +1,41 @@ +import React from 'react' +import axios from 'axios' +import { useLocation, useNavigate } from 'react-router-dom' +// import dotenv from "dotenv" +// // dotenv.config() +const LOGOUT_URL = "http://localhost:8020/logout" + +function Logout() { + + const location = useLocation() + const navigate = useNavigate() + + const handleLogout = () => { + axios.delete(LOGOUT_URL, { withCredentials: true }) + .then(res => { + console.log(res) + const tokative_sid = "tokative_sid" + document.cookie = tokative_sid + "=;expires=Thu, 01 Jan 1970 00:00:01 GMT;"; + // localStorage.clear() + location.state = null + navigate('/') + }) + .catch(err => { + console.log(err) + }) + } + return ( + + ) +} + + + +/** + * SEND A REQUEST TO THE BACKEND TO LOGOUT THE USER + * CLEAR THE LOCAL STORAGE + * CLEAR THE USELOCATION STATE + * REDIRECT TO THE LOGIN PAGE + */ + +export default Logout \ No newline at end of file diff --git a/frontend/src/pages/station/Create.jsx b/frontend/src/pages/station/Create.jsx index 7b43108..51d8f92 100644 --- a/frontend/src/pages/station/Create.jsx +++ b/frontend/src/pages/station/Create.jsx @@ -25,7 +25,7 @@ const STATION_URI = "http://localhost:8020/station"; function Station() { useTitle("Tokative - Create a New Station") const location = useLocation() - const {USER} = useContext(UserContext) + const {isAuth, profile} = useContext(UserContext) // const user = location.state?.user || null; const [loading, setLoading] = useState(false) const [disable, setDisable] = useState(false) @@ -43,7 +43,7 @@ function Station() { station: "", frequency: "", bio: "", - owner: USER?.uuid || "" + owner: profile?.uuid || "" }) const { setError, register, handleSubmit, formState: { errors } } = useForm() diff --git a/frontend/vite.config.js b/frontend/vite.config.js index 5b33c84..37033f4 100644 --- a/frontend/vite.config.js +++ b/frontend/vite.config.js @@ -35,6 +35,10 @@ export default defineConfig({ find: "@contexts", replacement: path.resolve(__dirname, "src/contexts"), }, + { + find: "@config", + replacement: path.resolve(__dirname, "src/config"), + }, ], }, server: { From 94f6da2a41650deb406d6ae049004a73a305923d Mon Sep 17 00:00:00 2001 From: ttjoe Date: Sat, 25 Feb 2023 06:52:30 +0000 Subject: [PATCH 02/10] Created protected route --- frontend/src/App.jsx | 10 +++------- frontend/src/components/Protected.jsx | 15 ++++++++++----- frontend/src/hooks/useAuth.js | 10 +--------- frontend/src/hooks/useData.js | 12 ++++++++++++ frontend/src/pages/Home/Home.jsx | 3 ++- frontend/src/pages/station/Create.jsx | 14 +++++++++----- frontend/src/utils/withRouter.js | 14 ++++++++++++++ 7 files changed, 51 insertions(+), 27 deletions(-) create mode 100644 frontend/src/hooks/useData.js create mode 100644 frontend/src/utils/withRouter.js diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx index 3615bcb..71d629a 100644 --- a/frontend/src/App.jsx +++ b/frontend/src/App.jsx @@ -11,8 +11,6 @@ import UserContext from '@contexts/UserDetails' axios.defaults.withCredentials = true; function App() { - // const [isAuth, setIsAuth] = useState(false) - // const [user, setUser] = useState(null) const { isAuth, profile } = useContext(UserContext) return ( @@ -21,11 +19,9 @@ function App() { } /> } /> } /> - - - - } /> + } /> + diff --git a/frontend/src/components/Protected.jsx b/frontend/src/components/Protected.jsx index 4b26922..0ba5aae 100644 --- a/frontend/src/components/Protected.jsx +++ b/frontend/src/components/Protected.jsx @@ -1,10 +1,15 @@ -import React from 'react' -import { Navigate } from "react-router-dom"; +import React, { useContext } from 'react' +import { Outlet, Navigate } from "react-router-dom"; +import UserContext from '@contexts/UserDetails' -const Protected = ({ isAuth, children }) => { +const Protected = ({children, ...rest}) => { + const { isAuth } = useContext(UserContext) if (!isAuth) { - return ; + return + } else { + return children } - return children; + }; + export default Protected; \ No newline at end of file diff --git a/frontend/src/hooks/useAuth.js b/frontend/src/hooks/useAuth.js index b4798fa..905d9cd 100644 --- a/frontend/src/hooks/useAuth.js +++ b/frontend/src/hooks/useAuth.js @@ -2,14 +2,6 @@ import React from 'react' import React, { useState } from 'react' import axios from 'axios' -function useAuth() { - const [isAuth, setIsAuth] = useState(false) - //TODO: FETCH DATABASE - - - return ( -
useAuth
- ) +const useAuth = () => { } - export default useAuth \ No newline at end of file diff --git a/frontend/src/hooks/useData.js b/frontend/src/hooks/useData.js new file mode 100644 index 0000000..4fd45dd --- /dev/null +++ b/frontend/src/hooks/useData.js @@ -0,0 +1,12 @@ +import React, {useState, useEffect} from "react" +import axios from "axios" +import {useLocation} from "react-router-dom" +const DATA_URL = "http://localhost:8021/user/" +/** + * Fetch data from the data + * return the data + */ + +const useData = () => { + +} \ No newline at end of file diff --git a/frontend/src/pages/Home/Home.jsx b/frontend/src/pages/Home/Home.jsx index 69f1e66..c4dd110 100644 --- a/frontend/src/pages/Home/Home.jsx +++ b/frontend/src/pages/Home/Home.jsx @@ -14,7 +14,8 @@ function Home() {
{ isAuth && new}
- new station + new station +
{ profile &&

Welcome {profile.fullname} - {profile.uuid}

diff --git a/frontend/src/pages/station/Create.jsx b/frontend/src/pages/station/Create.jsx index 51d8f92..dda720a 100644 --- a/frontend/src/pages/station/Create.jsx +++ b/frontend/src/pages/station/Create.jsx @@ -22,11 +22,11 @@ import UserContext from '@contexts/UserDetails'; const STATION_URI = "http://localhost:8020/station"; -function Station() { +function Create() { useTitle("Tokative - Create a New Station") const location = useLocation() - const {isAuth, profile} = useContext(UserContext) - // const user = location.state?.user || null; + // const {isAuth, profile} = useContext(UserContext) + const {isAuth, profile} = location.state const [loading, setLoading] = useState(false) const [disable, setDisable] = useState(false) const [slideIn, setSlideIn] = useState(false) @@ -83,6 +83,9 @@ function Station() { return ( + { + isAuth && "isAuthenticated." + }
@@ -104,6 +107,7 @@ function Station() { onChange={handleChange} InputLabelProps={{ shrink: true }} fullWidth + required /> +

+ + +

+Results are shown in the Javascript console + \ No newline at end of file diff --git a/backend/node_modules/peerjs/LICENSE b/backend/node_modules/peerjs/LICENSE new file mode 100644 index 0000000..fca73bd --- /dev/null +++ b/backend/node_modules/peerjs/LICENSE @@ -0,0 +1,22 @@ +Copyright (c) 2015 Michelle Bu and Eric Zhang, http://peerjs.com + +(The MIT License) + +Permission is hereby granted, free of charge, to any person obtaining +a copy of this software and associated documentation files (the +"Software"), to deal in the Software without restriction, including +without limitation the rights to use, copy, modify, merge, publish, +distribute, sublicense, and/or sell copies of the Software, and to +permit persons to whom the Software is furnished to do so, subject to +the following conditions: + +The above copyright notice and this permission notice shall be +included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF +MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE +LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION +OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION +WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/backend/node_modules/peerjs/README.md b/backend/node_modules/peerjs/README.md new file mode 100644 index 0000000..1e38809 --- /dev/null +++ b/backend/node_modules/peerjs/README.md @@ -0,0 +1,259 @@ +# PeerJS: Simple peer-to-peer with WebRTC + +### https://t.me/joinchat/VWI0UBxnG7f7_DV7 + +[![Backers on Open Collective](https://opencollective.com/peer/backers/badge.svg)](#backers) +[![Sponsors on Open Collective](https://opencollective.com/peer/sponsors/badge.svg)](#sponsors) + +PeerJS provides a complete, configurable, and easy-to-use peer-to-peer API built on top of WebRTC, supporting both data channels and media streams. + +## Live Example + +Here's an example application that uses both media and data connections: https://glitch.com/~peerjs-video. The example also uses its own [PeerServer](https://github.com/peers/peerjs-server). + +## Setup + +**Include the library** + +with npm: +`npm install peerjs` + +with yarn: +`yarn add peerjs` + +```js +// The usage - +import { Peer } from "peerjs"; +``` + +**Create a Peer** + +```javascript +const peer = new Peer("pick-an-id"); +// You can pick your own id or omit the id if you want to get a random one from the server. +``` + +## Data connections + +**Connect** + +```javascript +const conn = peer.connect("another-peers-id"); +conn.on("open", () => { + conn.send("hi!"); +}); +``` + +**Receive** + +```javascript +peer.on("connection", (conn) => { + conn.on("data", (data) => { + // Will print 'hi!' + console.log(data); + }); + conn.on("open", () => { + conn.send("hello!"); + }); +}); +``` + +## Media calls + +**Call** + +```javascript +navigator.mediaDevices.getUserMedia( + { video: true, audio: true }, + (stream) => { + const call = peer.call("another-peers-id", stream); + call.on("stream", (remoteStream) => { + // Show stream in some