65 | {isLoading ? 
70 |
84 | );
85 | }
86 |
87 | /*
88 |
89 | Receive from '/id/ endpoint:
90 |
91 | userID = {
92 | username: String,
93 | userURL: String,
94 | }
95 |
96 | **keep username in session storage**
97 |
98 | on go to chat, submit username to '/id/pick/' (will register in redis)
99 |
100 | */
101 |
--------------------------------------------------------------------------------
/src/server/ws/ws.js:
--------------------------------------------------------------------------------
1 | const { getIDAndPictureByUsername, saveMessageToDB } = require('../utils/dbUtils');
2 | const moment = require('moment');
3 | const redis = require('../redis/redis');
4 | moment().format();
5 |
6 | module.exports = (http) => {
7 | const io = require('socket.io')(http);
8 |
9 | let userCount = 0
10 | let userList = []
11 |
12 | io.on('connect', (socket) => {
13 | console.log('a user connected');
14 |
15 |
16 | socket.on('message', async ({ message, username }) => {
17 | const { user_id, userURL } = await getIDAndPictureByUsername(username);
18 | const timestamp = moment();
19 | // creates a message for broadcast to all open sockets
20 | const newMessage = { message: message, username, userURL, timestamp };
21 | // creates a message formatted for database storage
22 | const dbMessage = { user_id, message };
23 | try {
24 | //
25 | await saveMessageToDB(dbMessage);
26 | // send the message to all open sockets
27 | io.emit('newMessage', newMessage);
28 | } catch (err) {
29 | console.error(err);
30 | }
31 | });
32 |
33 | socket.on('signin', ({ username }) => {
34 | userCount++
35 | console.log(userCount)
36 | io.emit('count', userCount)
37 |
38 | userList.push(username)
39 | io.emit('userlist', userList)
40 | // assigns the anon username to the socketID
41 | redis.set(socket.id.toString(), username);
42 | // console.log(socket.id.toString(),'socketid',username2,'username')
43 |
44 | // claims the anon username as in-use
45 | redis.set(username, 'true');
46 |
47 | redis.get(username, (data) => {
48 | console.log(data)
49 | })
50 |
51 | redis.keys('*', (err, data) => {
52 | console.log(data.length, data)
53 | socket.emit('data', data)
54 | })
55 |
56 | });
57 |
58 | socket.on('disconnect', () => {
59 |
60 |
61 |
62 | // retrieves the username attached to the socketID on disconnect
63 | redis.get(socket.id.toString(), (err, username) => {
64 | if (err) return console.error(err);
65 | console.log(username,'testing')
66 | console.log(username, 'disconnected');
67 |
68 | if (!username) return;
69 | //frees the username and socketID from the in-use storage
70 |
71 |
72 | redis.del(socket.id.toString());
73 | redis.del(username);
74 |
75 | userCount--
76 | io.emit('count', userCount)
77 | userList = userList.filter((user) => {
78 | console.log(user, username)
79 | return user !== username
80 | })
81 | redis.keys('*', (err, data) => {
82 | console.log(data.length, data)
83 | })
84 | console.log(userList)
85 | io.emit('userlist', userList)
86 | });
87 | });
88 | });
89 | return io;
90 | };
91 |
92 | /* messageObject = {
93 | message: String,
94 | username: String,
95 | userURL: String,
96 | timestamp: String
97 | }
98 | */
99 |
100 | /*
101 | sendMessage = {
102 | username: String,
103 | message: String,
104 | }
105 | */
--------------------------------------------------------------------------------
/src/client/styles/index.scss:
--------------------------------------------------------------------------------
1 | @use 'variables' as *; //this is only supported by Dart SASS, so must use sass npm package instead of node-sass
2 | //node-sass uses LibSass
3 |
4 | body {
5 | margin: 0;
6 | font-family: $font-family;
7 | }
8 |
9 | .mainContainer {
10 | display: flex;
11 | background-color: $medium-grey;
12 | height: 100vh;
13 | color: white;
14 | }
15 |
16 | .btn, button:not([type=submit]) {
17 | color: white;
18 | background-color: $blue;
19 | text-decoration: none;
20 | padding: 1rem;
21 | border-radius: $border-radius;
22 | border: none;
23 | font-size: 1rem;
24 | }
25 |
26 | .mainContainer.signInPage {
27 | flex-direction: column;
28 | align-items: center;
29 | justify-content: center;
30 | }
31 |
32 | .mainContainer.anonChoice {
33 | flex-direction: column;
34 | align-items: center;
35 | justify-content: center;
36 |
37 | img {
38 | width: 200px;
39 | height: auto;
40 | }
41 | .row {
42 | display: flex;
43 | }
44 | .btn, button {
45 | margin: 0.5rem;
46 | }
47 | }
48 |
49 | .mainContainer.mainChat {
50 | display: flex;
51 | height: 100vh;
52 |
53 | .sidebar {
54 | display: flex;
55 | flex-direction: column;
56 | justify-content: flex-start;
57 | align-items: center;
58 | flex: 0 0 250px;
59 | background-color: $dark-grey;
60 | color: white;
61 | }
62 | .chatContainer {
63 | flex: 1 1 100%;
64 | display: flex;
65 | flex-direction: column;
66 | justify-content: flex-end;
67 | align-items: center;
68 | background-color: $medium-grey;
69 | box-sizing: border-box;
70 |
71 | .chat {
72 | flex: 0 1 100%;
73 | overflow-y: auto;
74 | padding: 0.5rem;
75 | box-sizing: border-box;
76 | width: 100%;
77 |
78 | .messageContainer {
79 | display: flex;
80 | align-items: center;
81 | .textContainer {
82 | display: flex;
83 | flex-direction: column;
84 | align-items: flex-start;
85 | max-width: 80%;
86 | }
87 | p {
88 | position: relative;
89 | margin: 0;
90 | background-color: $blue;
91 | border-radius: $border-radius;
92 | padding: 0.5rem;
93 | box-sizing: border-box;
94 | color: white;
95 | overflow-wrap: break-word;
96 | max-width: 50vw;
97 | font-size: 0.9rem;
98 | box-shadow: 0 1px 6px 2px rgba(54, 62, 70, 0.5), 0 1px 1px 1px rgba(54, 62, 70, 0.7);
99 | }
100 | span {
101 | margin-bottom: 5px;
102 | color: $very-light-grey;
103 | font-size: 0.7rem;
104 | }
105 | img {
106 | border-radius: 50%;
107 | width: 100px;
108 | height: auto;
109 | }
110 | }
111 | .messageContainer.self {
112 | flex-direction: row-reverse;
113 | align-self: flex-end;
114 | .textContainer {
115 | align-items: flex-end;
116 | text-align: right;
117 | }
118 | }
119 | }
120 |
121 | .form, form {
122 | display: flex;
123 | flex-direction: row;
124 | width: calc(100% - 1rem);
125 | padding: 0.7rem;
126 | box-sizing: border-box;
127 | background-color: $light-grey;
128 | margin: 1rem;
129 | border-radius: $border-radius;
130 | color: $very-light-grey;
131 |
132 | input {
133 | background-color: transparent;
134 | color: white;
135 | flex: 0 1 100%;
136 | border: none;
137 | font-size: 0.9rem;
138 | }
139 | input::placeholder {
140 | color: $very-light-grey;
141 | }
142 | input:focus {
143 | outline: none;
144 | }
145 | button {
146 | background-color: transparent;
147 | border: none;
148 | color: $very-light-grey;
149 | padding: 0 10px;
150 | }
151 | }
152 | }
153 | }
--------------------------------------------------------------------------------
/src/client/components/MainChat.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useRef, useContext, useLayoutEffect } from 'react';
2 | import SocketContext from '../context/SocketContext';
3 |
4 | export default function MainChat(props) {
5 | const [messageData, setMessageData] = useState([]);
6 | const [users, setUsers] = useState(0)
7 | const [userlist, setUserList] = useState([])
8 | const inputMessageRef = useRef(null);
9 | const chatRef = useRef(null);
10 | const socket = useContext(SocketContext);
11 | const inputSearchRef = useRef(null)
12 |
13 | const handleSearch = (e) => {
14 | if (inputSearchRef.current.value.length !== 0) {
15 | const matchedMessages = [];
16 | socket.disconnect(true)
17 | messageData.forEach((element) => {
18 | const lowerCasedMassage = element.message.toLowerCase()
19 | if (lowerCasedMassage.search(inputSearchRef.current.value) !== -1) {
20 | matchedMessages.push(element)
21 | }
22 | })
23 | setMessageData(matchedMessages)
24 | }
25 | else {
26 | getData()
27 | socket.disconnect(false)
28 | }
29 | e.preventDefault()
30 | }
31 | const handleSendClick = (e) => {
32 | if (inputMessageRef.current.value.length > 1) {
33 | e.preventDefault();
34 | const data = {
35 | message: inputMessageRef.current.value,
36 | username: props.location.state.username,
37 | };
38 | inputMessageRef.current.value = '';
39 | socket.emit('message', data);
40 | }
41 | };
42 |
43 | socket.on('count', (data) => {
44 | setUsers(data)
45 | })
46 |
47 | socket.on('userlist', (data) => {
48 | setUserList(data)
49 | })
50 |
51 | socket.on('data', (data) => {
52 | console.log(data)
53 | })
54 |
55 | socket.on('newMessage', (data) => {
56 | //{username, userURL, timestamp, message}
57 | const newArr = [...messageData];
58 | newArr.push(data);
59 | setMessageData(newArr);
60 | });
61 |
62 | //TODO: add function for request more messages on scroll up
63 | //TODO: not scrolling to bottom on initial load
64 | const getData = () => {
65 | fetch('/messages/all')
66 | .then((res) => res.json())
67 | .then((res) => {
68 | setMessageData(res);
69 | })
70 | }
71 |
72 | if (messageData.length === 0) {
73 | getData()
74 | }
75 |
76 | //make sure the 'chat' div is scrolled to the bottom with every render
77 | useLayoutEffect(() => {
78 | chatRef.current.scrollTop = chatRef.current.scrollHeight;
79 | })
80 |
81 | return (
82 | Loading...
: ( 66 | <> 67 | {/* TODO: add log out functionality */} 68 | {/**/} 69 |{anonId.username}
71 |
72 |
73 |
78 | Go to chat
79 |
80 |
81 |
82 | )}
83 |
83 |
112 | );
113 | }
114 |
115 | function Message(props) {
116 | const className = 'messageContainer' + (props.yourName === props.username ? ' self' : '');
117 | return (
118 |
84 | 
86 |
92 |
93 | {props.location.state.username}
85 |Users: {users}
87 | {userlist.map((el) => ({el}
))}
88 | {/* TODO: add log out functionalities */}
89 | {/*
90 | */}
91 |
94 |
111 |
95 |
96 |
97 |
98 | {/* assumes most recent message is at the end of the array */}
99 | {messageData.map((message) => (
100 |
105 |
110 |
119 | 
120 |
125 | );
126 | }
127 |
--------------------------------------------------------------------------------
/src/server/github/controllers/githubController.js:
--------------------------------------------------------------------------------
1 | const dotenv = require("dotenv").config(); // loads the .env file onto the process.env object
2 | const jwt = require("jsonwebtoken");
3 | const bcrypt = require("bcrypt");
4 |
5 | const githubController = {};
6 |
7 | const { requestToken, requestUser, checkMembership } = require("./requests");
8 |
9 | const db = require("../../models/elephantsql");
10 |
11 | // loads the information from the .env file
12 | const CLIENT_ID = process.env.CLIENT_ID;
13 | const JWT_SECRET = process.env.JWT_SECRET;
14 |
15 | githubController.redirect = (req, res, next) => {
16 | const baseURL = "https://github.com/login/oauth/authorize";
17 | // VERY IMPORTANT TO DEFINE SCOPES!!!!!!!!!
18 | // https://developer.github.com/apps/building-oauth-apps/understanding-scopes-for-oauth-apps/
19 | // const scope = 'user';
20 | const scope = "read:org";
21 | res.redirect(`${baseURL}?client_id=${CLIENT_ID}&scope=${scope}`);
22 | };
23 |
24 | githubController.callback = (req, res, next) => {
25 | // github returns a code in a query param
26 | const { code } = req.query;
27 | console.log("code", code);
28 | if (!code) {
29 | return next({
30 | error: { code: 403, message: "User Not Authorized By Github" },
31 | });
32 | }
33 |
34 | requestToken(code).then((result) =>
35 | requestUser(result, res)
36 | .then(({ body }) => {
37 | // console.log(body);
38 | res.locals.login = body.login;
39 | // console.log(res.locals)
40 | return next();
41 | })
42 | .catch((err) => {
43 | console.log(err.status);
44 | console.log(err.message);
45 | return next(err);
46 | })
47 | );
48 | };
49 |
50 | githubController.approveUser = async (req, res, next) => {
51 | const githubHandle = res.locals.login;
52 | checkMembership(githubHandle, res.locals.access_token)
53 | .then((response) => {
54 | // should give 204 status in response
55 | // if yes - good to go, allowed to access chat (member of the organization)
56 | console.log(response.status);
57 | if (response.status === 204) {
58 | res.locals.user = githubHandle;
59 | return next();
60 | }
61 | else res.redirect('/signin');
62 | })
63 | .catch((err) => {
64 | res.redirect('/signin');
65 | //console.log(err.status);
66 | //console.log(err.message);
67 | //return next(err);
68 | });
69 |
70 | // get all rows of the hash table
71 | // const queryString = `SELECT bcrypt_hash FROM hash_table`;
72 | // db.query(queryString)
73 | // .then((result) => {
74 | // if (!result.rows.length) {
75 | // res.status(403).json({ error: { message: 'Hash table error' } });
76 | // } else {
77 | // // for each item in the hash_table
78 | // for (let i = 0; i < result.rows.length; i++) {
79 | // // check if the plaintext github handle matches the hashed_handle
80 | // let match = bcrypt.compare(githubHandle, result.rows[i].bcrypt_hash);
81 | // if (match) {
82 | // // res.locals.user = result.rows[i].bcrypt_hash;
83 | // return next();
84 | // }
85 | // }
86 | // }
87 | // //TODO: Redirect to /signin route if no match
88 | // next();
89 | // })
90 | // .catch((err) => next(err));
91 | };
92 |
93 | githubController.createJWT = async (req, res, next) => {
94 | const hashedHandle = res.locals.user;
95 | jwt.sign({ username: hashedHandle }, JWT_SECRET, (err, token) => {
96 | if (err) return next(err);
97 | res.locals.token = token;
98 | next();
99 | });
100 | };
101 |
102 | githubController.setCookie = (req, res, next) => {
103 | const token = res.locals.token;
104 | res.cookie("token", token);
105 | console.log('set cookie is running')
106 | next();
107 | };
108 |
109 | // logic to guard all protected routes
110 | githubController.cookieVerifier = (req, res, next) => {
111 | if (!req.cookies.token) return res.redirect("/");
112 | const { token } = req.cookies;
113 | jwt.verify(token, JWT_SECRET, (err, decoded) => {
114 | if (err) return console.error("JWT could not be verified");
115 | const queryString = `SELECT bcrypt_hash FROM hash_table WHERE bcrypt_hash = '${decoded.username}'`;
116 | db.query(queryString)
117 | .then((result) => {
118 | // if no match, redirect the user to the main page
119 | if (!result.rows.length) {
120 | res.redirect("/");
121 | } else {
122 | // if match, pass them to next middleware
123 | return next();
124 | }
125 | })
126 | .catch((err) => next(err));
127 | });
128 | };
129 |
130 | module.exports = githubController;
131 |
--------------------------------------------------------------------------------
/src/server/ids/controllers/id.js:
--------------------------------------------------------------------------------
1 | const redis = require("../../redis/redis");
2 | const db = require("../../models/elephantsql");
3 | const e = require("express");
4 |
5 | const idsController = {};
6 |
7 | const NUM_OF_POKEMON = 964; // change to fit the number of available pokemon we have
8 | // const NUM_OF_POKEMON = 100;
9 |
10 | const pickRandomPokemonNumber = () => {
11 | return Math.floor(Math.random() * NUM_OF_POKEMON);
12 | };
13 |
14 | const userIDIsTaken = (number) => {
15 | redis.get(number, (err, reply) => {
16 | if (err) return console.error("redis lookup error:", err);
17 | return Boolean(reply);
18 | });
19 | };
20 |
21 | // finds the pokemon name and pictureURL attached to the random user_id
22 | const getNameAndPicture = async (id) => {
23 | const queryString = `SELECT username, pic_url FROM users WHERE user_id = ${id}`;
24 | const result = await db.query(queryString);
25 | if (result.rows.length) {
26 | const { username, pic_url } = result.rows[0];
27 | // TEST !!!
28 | // res.cookie('username', username);
29 | return { username, userURL: pic_url };
30 | } else {
31 | console.error("no name and picture results found");
32 | }
33 | };
34 |
35 | // TEST!!!
36 | const getPic = async (username) => {
37 | const queryString = `SELECT pic_url FROM users WHERE username = '${username}'`;
38 | const result = await db.query(queryString);
39 | console.log("Result from getPic query ", result);
40 | if (result.rows.length) {
41 | return result.rows[0].pic_url;
42 | } else {
43 | console.log("no picture found in DB");
44 | }
45 | };
46 |
47 | // Query doesn't work for some reason !!!
48 | const matchUsernameToID = async (username) => {
49 | const queryString = `SELECT user_id FROM users WHERE username = "${username}"`;
50 | const response = await db.query(queryString);
51 | if (response.rows.length) {
52 | const { userID } = response.rows[0];
53 | return userID;
54 | } else {
55 | console.error("user id not found when searched by name");
56 | }
57 | };
58 |
59 | idsController.getNewID = async (req, res, next) => {
60 | // console.log('Req.session: ', req.session);
61 | let userObject;
62 | let pic;
63 | let handleImageError = Boolean(req.params.handleImageError);
64 | // const saved = req.session.cookies.username;
65 | const saved = req.session._ctx.cookies.username;
66 | // const saved = req.session._ctx.IncomingMessage.cookies.username;
67 | console.log("Username cookie was saved ", saved);
68 | // console.log('Token in cookies ', req.session.cookies.token);
69 | console.log("Token in cookies ", req.session._ctx.cookies.token);
70 | //if (!saved) { //if no username cookie is saved
71 | // let randomUserID = pickRandomPokemonNumber();
72 | // while (userIDIsTaken(randomUserID)) {
73 | // randomUserID = pickRandomPokemonNumber();
74 | // }
75 | // userObject = await getNameAndPicture(randomUserID);
76 |
77 | //}
78 | //else { //if the client has a username cookie
79 | // pic = await getPic(saved);
80 | //}
81 | //res.locals.availableID = userObject;
82 | //if (!handleImageError) res.cookie('username', username); //only set username cookie if
83 | // console.log('Cookie is set ', username);
84 | //return next();
85 | if (saved) {
86 | // userID = matchUsernameToID(req.session._ctx.cookies.username);
87 | pic = await getPic(saved);
88 | } else {
89 | userID = pickRandomPokemonNumber();
90 | while (userIDIsTaken(userID)) {
91 | const userID = pickRandomPokemonNumber();
92 | }
93 | userObject = await getNameAndPicture(userID);
94 | }
95 | if (!saved) {
96 | const { username } = userObject;
97 | res.cookie("username", username);
98 | }
99 | userObject = { username: saved, userURL: pic};
100 | console.log(userObject);
101 | res.locals.availableID = userObject;
102 | return next();
103 |
104 | // ***** BEFORE WAS:
105 | // let randomUserID = pickRandomPokemonNumber();
106 | // while (userIDIsTaken(randomUserID)) {
107 | // randomUserID = pickRandomPokemonNumber();
108 | // }
109 | // const userObject = await getNameAndPicture(randomUserID);
110 | // res.locals.availableID = userObject;
111 | // // TEST !!!
112 | // const { username } = userObject;
113 | // // TEST !
114 | // console.log('Cookie is set ', username);
115 | // res.cookie('username', username);
116 | // return next();
117 | };
118 |
119 | // TEST !!!
120 | // idsController.getSavedId = async (req, res, next) => {
121 | // const userID = matchUsernameToID(req.session.cookies.username);
122 | // const userObject = await getNameAndPicture(userID);
123 | // res.locals.availableID = userObject;
124 | // return next();
125 | // };
126 |
127 | module.exports = idsController;
128 |
--------------------------------------------------------------------------------
121 | {props.username}
122 |
124 | {props.message}
123 |