Skip to content

Commit ed150ad

Browse files
Tushar3099Tushar3099
committed
adding google login
1 parent e62599d commit ed150ad

File tree

12 files changed

+361
-57
lines changed

12 files changed

+361
-57
lines changed

‎client/.eslintcache‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
[{"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/home/Home.js":"1","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/home/Terminal.js":"2","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/Editor.js":"3","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/utils/languages/c.js":"4","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/utils/languages/cpp.js":"5","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/utils/languages/python.js":"6","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/utils/languages/java.js":"7","/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/utils/code-settings.js":"8"},{"size":1283,"mtime":1610472734488,"results":"9","hashOfConfig":"10"},{"size":4683,"mtime":1610543401152,"results":"11","hashOfConfig":"10"},{"size":6118,"mtime":1610689192056,"results":"12","hashOfConfig":"10"},{"size":125,"mtime":1610687255932,"results":"13","hashOfConfig":"10"},{"size":148,"mtime":1610687225256,"results":"14","hashOfConfig":"10"},{"size":66,"mtime":1610687414332,"results":"15","hashOfConfig":"10"},{"size":159,"mtime":1610687801544,"results":"16","hashOfConfig":"10"},{"size":862,"mtime":1610689035860,"results":"17","hashOfConfig":"10"},{"filePath":"18","messages":"19","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1ld0h7m",{"filePath":"20","messages":"21","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"22","messages":"23","errorCount":0,"warningCount":5,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},{"filePath":"24","messages":"25","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"26","messages":"27","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"28","messages":"29","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"30","messages":"31","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"32","messages":"33","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/home/Home.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/home/Terminal.js",["34","35"],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/Editor.js",["36","37","38","39","40"],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/utils/languages/c.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/utils/languages/cpp.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/utils/languages/python.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/utils/languages/java.js",[],"/home/tomarviii88/Desktop/remote-code-executor/client/src/components/code-editor/utils/code-settings.js",[],{"ruleId":"41","severity":1,"message":"42","line":4,"column":20,"nodeType":"43","messageId":"44","endLine":4,"endColumn":24},{"ruleId":"41","severity":1,"message":"45","line":30,"column":7,"nodeType":"43","messageId":"44","endLine":30,"endColumn":11},{"ruleId":"41","severity":1,"message":"46","line":25,"column":7,"nodeType":"43","messageId":"44","endLine":25,"endColumn":10},{"ruleId":"41","severity":1,"message":"47","line":44,"column":10,"nodeType":"43","messageId":"44","endLine":44,"endColumn":22},{"ruleId":"48","severity":1,"message":"49","line":70,"column":6,"nodeType":"50","endLine":70,"endColumn":8,"suggestions":"51"},{"ruleId":"48","severity":1,"message":"52","line":92,"column":6,"nodeType":"50","endLine":92,"endColumn":8,"suggestions":"53"},{"ruleId":"41","severity":1,"message":"54","line":99,"column":9,"nodeType":"43","messageId":"44","endLine":99,"endColumn":18},"no-unused-vars","'User' is defined but never used.","Identifier","unusedVar","'Body' is assigned a value but never used.","'Row' is assigned a value but never used.","'windowHeight' is assigned a value but never used.","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'language'. Either include it or remove the dependency array. You can also replace multiple useState variables with useReducer if 'setCode' needs the current value of 'language'.","ArrayExpression",["55"],"React Hook useEffect has a missing dependency: 'dispatch'. Either include it or remove the dependency array.",["56"],"'getOutput' is assigned a value but never used.",{"desc":"57","fix":"58"},{"desc":"59","fix":"60"},"Update the dependencies array to be: [language]",{"range":"61","text":"62"},"Update the dependencies array to be: [dispatch]",{"range":"63","text":"64"},[2151,2153],"[language]",[2667,2669],"[dispatch]"]
1+
[{"D:\\Webdev\\remote-code-executor\\client\\src\\components\\home\\Header.js":"1","D:\\Webdev\\remote-code-executor\\client\\src\\reducers\\actions\\index.js":"2","D:\\Webdev\\remote-code-executor\\client\\src\\components\\home\\Modal.js":"3"},{"size":2726,"mtime":1610883574576,"results":"4","hashOfConfig":"5"},{"size":408,"mtime":1610835459540,"results":"6","hashOfConfig":"5"},{"size":1661,"mtime":1610883492826,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"j0ormm",{"filePath":"10","messages":"11","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"warningCount":2,"fixableErrorCount":0,"fixableWarningCount":0,"source":null},"D:\\Webdev\\remote-code-executor\\client\\src\\components\\home\\Header.js",["14","15"],"D:\\Webdev\\remote-code-executor\\client\\src\\reducers\\actions\\index.js",[],"D:\\Webdev\\remote-code-executor\\client\\src\\components\\home\\Modal.js",["16","17"],{"ruleId":"18","severity":1,"message":"19","line":51,"column":20,"nodeType":"20","messageId":"21","endLine":51,"endColumn":22},{"ruleId":"22","severity":1,"message":"23","line":75,"column":15,"nodeType":"24","endLine":79,"endColumn":17},{"ruleId":"25","severity":1,"message":"26","line":23,"column":6,"nodeType":"27","endLine":23,"endColumn":11,"suggestions":"28"},{"ruleId":"22","severity":1,"message":"23","line":32,"column":7,"nodeType":"24","endLine":36,"endColumn":9},"eqeqeq","Expected '===' and instead saw '=='.","BinaryExpression","unexpected","jsx-a11y/alt-text","img elements must have an alt prop, either with meaningful text, or an empty string for decorative images.","JSXOpeningElement","react-hooks/exhaustive-deps","React Hook useEffect has a missing dependency: 'unclick'. Either include it or remove the dependency array. If 'unclick' changes too often, find the parent component that defines it and wrap that definition in useCallback.","ArrayExpression",["29"],{"desc":"30","fix":"31"},"Update the dependencies array to be: [ref, unclick]",{"range":"32","text":"33"},[727,732],"[ref, unclick]"]

‎client/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@
1414
"react": "^17.0.1",
1515
"react-dom": "^17.0.1",
1616
"react-feather": "^2.0.9",
17+
"react-google-login": "^5.2.2",
18+
"react-icons": "^4.1.0",
1719
"react-redux": "^7.2.2",
1820
"react-router-dom": "^5.2.0",
1921
"react-scripts": "4.0.1",

‎client/src/components/code-editor/Editor.js‎

Lines changed: 45 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import React, { useRef, useState, useEffect } from 'react';
2-
import { ControlledEditor } from '@monaco-editor/react';
3-
import { executeCode, setLoadingTrue } from '../../actions/code';
4-
import { useDispatch, useSelector } from 'react-redux';
5-
import Input from './Input';
6-
import Submit from './Submit';
7-
import Split from 'react-split';
8-
import styled from 'styled-components';
9-
import styles from './styles/editor.module.css';
10-
import './styles/style.css';
11-
import io from 'socket.io-client';
12-
import { Play } from 'react-feather';
1+
import React, { useRef, useState, useEffect } from "react";
2+
import { ControlledEditor } from "@monaco-editor/react";
3+
import { executeCode, setLoadingTrue } from "../../actions/code";
4+
import { useDispatch, useSelector } from "react-redux";
5+
import Input from "./Input";
6+
import Submit from "./Submit";
7+
import Split from "react-split";
8+
import styled from "styled-components";
9+
import styles from "./styles/editor.module.css";
10+
import "./styles/style.css";
11+
import io from "socket.io-client";
12+
import { Play } from "react-feather";
1313
import {
1414
getDefaultCode,
1515
setLanguageLocalStorage,
1616
getLanguageLocalStorage,
1717
setCodeLocalStorage,
18-
getCodeLocalStorage
19-
} from './utils/code-settings';
18+
getCodeLocalStorage,
19+
} from "./utils/code-settings";
2020

21-
const ENDPOINT = 'http://localhost:3000';
21+
const ENDPOINT = "http://localhost:3000";
2222

2323
const socket = io(ENDPOINT);
2424

@@ -34,26 +34,26 @@ const OutputWindow = styled.div`
3434
box-sizing: border-box;
3535
overflow: auto;
3636
flex: 1;
37-
color: ${props => (props.error ? 'red' : 'black')};
37+
color: ${(props) => (props.error ? "red" : "black")};
3838
`;
3939

4040
const CodeEditor = ({ theme }) => {
41-
const loading = useSelector(state => state.code.isFetching);
41+
const loading = useSelector((state) => state.code.isFetching);
4242
const [isEditorReady, setIsEditorReady] = useState(false);
4343
const [windowWidth, setWindowWidth] = useState(window.innerWidth);
4444
const [windowHeight, setWindowHeight] = useState(window.innerHeight);
45-
const [language, setLanguage] = useState('java');
46-
const [input, setInput] = useState('');
45+
const [language, setLanguage] = useState("java");
46+
const [input, setInput] = useState("");
4747
// const [output, setOutput] = useState("");
48-
const [code, setCode] = useState('');
48+
const [code, setCode] = useState("");
4949
const dispatch = useDispatch();
5050
const valueGetter = useRef();
51-
let output = useSelector(state => state.code.output);
51+
let output = useSelector((state) => state.code.output);
5252

53-
let error = useSelector(state => state.code.error);
53+
let error = useSelector((state) => state.code.error);
5454

5555
useEffect(() => {
56-
window.addEventListener('resize', updateWindowDimensions);
56+
window.addEventListener("resize", updateWindowDimensions);
5757

5858
if (getLanguageLocalStorage()) {
5959
setLanguage(getLanguageLocalStorage());
@@ -65,7 +65,7 @@ const CodeEditor = ({ theme }) => {
6565
}
6666

6767
return () => {
68-
window.removeEventListener('resize', updateWindowDimensions);
68+
window.removeEventListener("resize", updateWindowDimensions);
6969
};
7070
}, []);
7171

@@ -75,23 +75,23 @@ const CodeEditor = ({ theme }) => {
7575
};
7676

7777
useEffect(() => {
78-
console.log('socket: browser says ping (1)');
79-
socket.on('setLanguage', function(data) {
78+
console.log("socket: browser says ping (1)");
79+
socket.on("setLanguage", function (data) {
8080
// console.log(data);
8181
setLanguage(data);
8282
});
83-
socket.on('setInput', data => {
83+
socket.on("setInput", (data) => {
8484
setInput(data);
8585
});
86-
socket.on('setOutput', data => {
86+
socket.on("setOutput", (data) => {
8787
dispatch(data);
8888
});
89-
socket.on('setCodeExec', data => {
89+
socket.on("setCodeExec", (data) => {
9090
setCode(data);
9191
});
9292
}, []);
9393

94-
const handleEditorDidMount = _valueGetter => {
94+
const handleEditorDidMount = (_valueGetter) => {
9595
setIsEditorReady(true);
9696
valueGetter.current = _valueGetter;
9797
};
@@ -104,7 +104,7 @@ const CodeEditor = ({ theme }) => {
104104

105105
const onChangeCode = (newValue, e) => {
106106
// console.log("onChange" + e);
107-
socket.emit('getCodeExec', e);
107+
socket.emit("getCodeExec", e);
108108
setCodeLocalStorage(e);
109109
setCode(e);
110110
};
@@ -114,26 +114,26 @@ const CodeEditor = ({ theme }) => {
114114
const res = await executeCode(code, language, input);
115115
dispatch(res);
116116
// getOutput();
117-
socket.emit('getOutput', res);
117+
socket.emit("getOutput", res);
118118
};
119119

120-
const changeLanguage = e => {
120+
const changeLanguage = (e) => {
121121
setLanguageLocalStorage(e.target.value);
122122
setCode(getDefaultCode(e.target.value));
123123
setCodeLocalStorage(getDefaultCode(e.target.value));
124-
socket.emit('getLanguage', e.target.value);
124+
socket.emit("getLanguage", e.target.value);
125125
setLanguage(e.target.value);
126126
};
127127
return (
128128
<>
129129
<div className={styles.row}>
130130
<Split
131-
direction={windowWidth > 800 ? 'horizontal' : 'vertical'}
131+
direction={windowWidth > 800 ? "horizontal" : "vertical"}
132132
sizes={[60, 40]}
133133
minSize={windowWidth > 800 ? 0 : 500}
134134
snapOffset={windowWidth > 800 ? 200 : 0}
135135
gutterSize={20}
136-
gutterAlign='center'
136+
gutterAlign="center"
137137
className={styles.splitHor}
138138
>
139139
<div className={styles.left}>
@@ -144,8 +144,8 @@ const CodeEditor = ({ theme }) => {
144144
onClick={SubmitCode}
145145
disabled={!isEditorReady}
146146
>
147-
{loading ? 'Loading..' : 'Run Code'}
148-
<Play style={{ paddingLeft: 10, fontSize: '1em' }} />
147+
{loading ? "Loading.." : "Run Code"}
148+
<Play style={{ paddingLeft: 10, fontSize: "1em" }} />
149149
</div>
150150
</div>
151151
{/* <Editor
@@ -156,9 +156,9 @@ const CodeEditor = ({ theme }) => {
156156
/> */}
157157
<ControlledEditor
158158
// wrapperClassName="editor"
159-
className='editor'
159+
className="editor"
160160
language={language}
161-
theme={theme === 'dark' ? 'vs-dark' : 'light'}
161+
theme={theme === "dark" ? "vs-dark" : "light"}
162162
editorDidMount={handleEditorDidMount}
163163
value={code}
164164
onChange={onChangeCode}
@@ -167,20 +167,20 @@ const CodeEditor = ({ theme }) => {
167167
<div className={styles.right}>
168168
<div className={styles.column}>
169169
<Split
170-
direction='vertical'
170+
direction="vertical"
171171
sizes={windowWidth > 800 ? [75, 25] : [100, 0]}
172172
minSize={0}
173173
snapOffset={windowWidth > 800 ? 100 : 0}
174174
gutterSize={20}
175-
gutterAlign='center'
175+
gutterAlign="center"
176176
className={styles.splitVer}
177177
>
178178
<div className={styles.output}>
179179
<div className={styles.outputHead}>Output</div>
180-
<OutputWindow error={error === '' ? false : true}>
180+
<OutputWindow error={error === "" ? false : true}>
181181
{output ? console.log(output) : null}
182-
<pre style={{ width: '100%' }}>
183-
{output === '' ? error : output}
182+
<pre style={{ width: "100%" }}>
183+
{output === "" ? error : output}
184184
</pre>
185185
</OutputWindow>
186186
</div>

‎client/src/components/home/Header.js‎

Lines changed: 86 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,94 @@
1-
import React from 'react';
2-
import Footer from '../code-editor/Footer';
3-
import styles from './styles/header.module.css';
1+
import React, { useEffect, useState } from "react";
2+
import Footer from "../code-editor/Footer";
3+
import styles from "./styles/header.module.css";
4+
import { GoogleLogin } from "react-google-login";
5+
import { useDispatch, useSelector } from "react-redux";
6+
import { setUser } from "../../reducers/actions";
7+
import { FcGoogle } from "react-icons/fc";
8+
import Modal from "./Modal";
49

510
const Header = () => {
11+
const dispatch = useDispatch();
12+
const user = useSelector((state) => state.user);
13+
const [clicked, setClicked] = useState(false);
14+
15+
const responseGoogle = (res) => {
16+
if (res.error) {
17+
console.log(res.error);
18+
return;
19+
}
20+
console.log(res);
21+
const user = {
22+
email: res.profileObj.email,
23+
name: res.profileObj.name,
24+
image: res.profileObj.imageUrl,
25+
};
26+
dispatch(setUser(user));
27+
};
28+
29+
const logout = () => {
30+
console.log("User logged Out");
31+
const user = {
32+
email: "",
33+
name: "",
34+
image: "",
35+
};
36+
dispatch(setUser(user));
37+
setClicked(false);
38+
};
39+
40+
useEffect(() => {
41+
console.log(user);
42+
}, [user]);
43+
44+
const handleClick = () => {
45+
setClicked(!clicked);
46+
};
47+
648
return (
749
<>
850
<div className={styles.header_container}>
9-
<button className={styles.header_button}>Login</button>
51+
{user.name == "" ? (
52+
<GoogleLogin
53+
clientId="356951841595-6v3gpur9sleddtq4l350j62gf8dp8mfj.apps.googleusercontent.com"
54+
buttonText="Google Login"
55+
render={(renderProps) => (
56+
<div className={styles.loginButton}>
57+
<FcGoogle style={{ marginRight: 10, fontSize: "1.5em" }} />
58+
<span
59+
className={styles.login}
60+
onClick={renderProps.onClick}
61+
disabled={renderProps.disabled}
62+
>
63+
Login with Google
64+
</span>
65+
</div>
66+
)}
67+
onSuccess={responseGoogle}
68+
onFailure={responseGoogle}
69+
isSignedIn={true}
70+
cookiePolicy={"single_host_origin"}
71+
/>
72+
) : (
73+
<>
74+
<div className={styles.profileImage}>
75+
<img
76+
onClick={handleClick}
77+
src={user.image}
78+
className={styles.image}
79+
/>
80+
{clicked ? (
81+
<Modal
82+
user={user}
83+
logout={logout}
84+
unclick={() => setClicked(false)}
85+
/>
86+
) : null}
87+
</div>
88+
</>
89+
)}
90+
91+
{/* <button className={styles.header_button}>Login</button> */}
1092
</div>
1193
<Footer />
1294
</>

‎client/src/components/home/Modal.js‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React, { useRef, useEffect } from "react";
2+
import { GoogleLogout } from "react-google-login";
3+
import styles from "./styles/header.module.css";
4+
5+
function useOutsideAlerter(ref, unclick) {
6+
useEffect(() => {
7+
/**
8+
* Alert if clicked on outside of element
9+
*/
10+
function handleClickOutside(event) {
11+
if (ref.current && !ref.current.contains(event.target)) {
12+
// alert("You clicked outside of me!");
13+
unclick();
14+
}
15+
}
16+
17+
// Bind the event listener
18+
document.addEventListener("mousedown", handleClickOutside);
19+
return () => {
20+
// Unbind the event listener on clean up
21+
document.removeEventListener("mousedown", handleClickOutside);
22+
};
23+
}, [ref]);
24+
}
25+
26+
function Modal({ user, logout, unclick }) {
27+
const wrapperRef = useRef(null);
28+
useOutsideAlerter(wrapperRef, unclick);
29+
30+
return (
31+
<div ref={wrapperRef} className={styles.modal}>
32+
<img
33+
className={styles.modalImage}
34+
src={user.image}
35+
// className={styles.image}
36+
/>
37+
<h3 className={styles.modalName}>{user.name}</h3>
38+
<h4 className={styles.modalEmail}>{user.email}</h4>
39+
<GoogleLogout
40+
clientId="356951841595-6v3gpur9sleddtq4l350j62gf8dp8mfj.apps.googleusercontent.com"
41+
buttonText="Logout"
42+
render={(renderProps) => (
43+
<div
44+
className={styles.logout}
45+
onClick={renderProps.onClick}
46+
disabled={renderProps.disabled}
47+
>
48+
Logout
49+
</div>
50+
)}
51+
onLogoutSuccess={logout}
52+
></GoogleLogout>
53+
</div>
54+
);
55+
}
56+
57+
export default Modal;

‎client/src/components/home/Terminal.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const Terminal = () => {
4949
transition: {
5050
delay: i * 0.3,
5151
ease: "easeOut",
52-
duration: i * 5,
52+
duration: i * 1,
5353
repeat: "Infinity",
5454
},
5555
}),
@@ -64,7 +64,7 @@ const Terminal = () => {
6464
transition: {
6565
when: "beforeChildren",
6666
staggerChildren: 0.3,
67-
delay: i * 0.5,
67+
delay: i * 0.1,
6868
},
6969
}),
7070
hidden: {

0 commit comments

Comments
 (0)