+ Welcome, {currentUser.displayName}
+
+ );
+};
+
+export default Header;
diff --git a/src/components/css/EditorComponent.css b/src/components/css/EditorComponent.css
index 37144a5..f7bcb7c 100644
--- a/src/components/css/EditorComponent.css
+++ b/src/components/css/EditorComponent.css
@@ -1,3 +1,4 @@
+/* EditorComponent.css */
.editor-container {
display: flex;
@@ -31,68 +32,3 @@
height: 70vh;
}
}
-
-
-.flex {
- display: flex;
- align-items: center;
-}
-
-.items-center {
- align-items: center;
-}
-
-.space-x-2 > *:not(:last-child) {
- margin-right: 8px;
-}
-
-.welcome-text {
- color: #000;
- font-weight: bold;
-}
-
-.signout-container {
- display: flex;
- align-items: center;
- border: 1px solid #D1D1D1; /* border-gray-300 */
- border-radius: 4px;
- padding: 4px 8px;
- background-color: #fff;
- transition: background-color 0.25s;
-}
-
-.signout-container:hover {
- background-color: #fff;
-
- transition: 0.5s all ease;
-}
-
-.signout-button {
- font-weight: bold;
- color: #4A4A4A; /* text-gray-700 */
- background: none;
- border: none;
- cursor: pointer;
-}
-
-.signout-button span:hover {
- color: #000; /* Black text */
-
-}
-
-/* Dark mode styles */
-@media (prefers-color-scheme: dark) {
- .welcome-text {
- color: #fff; /* text-white */
- }
-
- .signout-container {
- background-color: #000; /* dark:bg-black */
- color: #fff ;
- border-color: #666; /* dark:border-gray-500 */
- }
-
- .signout-button span {
- color: #fff;
- }
-}
diff --git a/src/components/css/GithubSignIn.css b/src/components/css/GithubSignIn.css
index efa87cb..6474b10 100644
--- a/src/components/css/GithubSignIn.css
+++ b/src/components/css/GithubSignIn.css
@@ -1,34 +1,34 @@
.github-sign-in-button {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.5rem 1rem;
- border: 1px solid #e2e8f0;
- border-radius: 0.5rem;
- color: #334155;
- background-color: black;
- transition: all 150ms ease-in-out;
- cursor: pointer;
-}
-
-.github-sign-in-button:hover {
- border-color: #94a3b8;
- color: #0f172a;
- box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-}
-
-.github-logo {
- width: 1.5rem;
- height: 1.5rem;
-}
-
-/* Dark mode styles */
-@media (prefers-color-scheme: dark) {
- .github-sign-in-button {
- color: #ffffff;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+ border: 1px solid #e2e8f0;
+ border-radius: 0.5rem;
+ color: #334155;
+ background-color: black;
+ transition: all 150ms ease-in-out;
+ cursor: pointer;
}
-
+
.github-sign-in-button:hover {
- color: #f1f5f9;
+ border-color: #94a3b8;
+ color: #0f172a;
+ box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+ }
+
+ .github-logo {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
+
+ /* Dark mode styles */
+ @media (prefers-color-scheme: dark) {
+ .github-sign-in-button {
+ color: #ffffff;
+ }
+
+ .github-sign-in-button:hover {
+ color: #f1f5f9;
+ }
}
-}
\ No newline at end of file
diff --git a/src/components/css/Landingpage.css b/src/components/css/Landingpage.css
new file mode 100644
index 0000000..ed08f35
--- /dev/null
+++ b/src/components/css/Landingpage.css
@@ -0,0 +1,74 @@
+/* General Styles */
+.app-container {
+ background-color: black;
+ color: white;
+ height: 100vh;
+ width: 100%;
+ padding:1rem;
+ font-family: "Arial", sans-serif;
+ overflow-y: hidden;
+}
+
+
+/* Create Room Section */
+.create-room-container {
+ display: flex;
+ width: 40%;
+ align-items: center;
+}
+
+.create-btn {
+ background-color: #d2b48c;
+ /* Coffee-like color */
+ color: black;
+ border: 2px solid #d2b48c;
+ border-radius: 5px;
+ margin: 0px 0.5rem;
+ cursor: pointer;
+ font-size: 1rem;
+ padding: 0.1rem 0.3rem;
+}
+
+.create-btn:hover {
+ background-color: #c6a377;
+}
+
+/* Available Rooms Section */
+.available-rooms-container {
+ width: 60%;
+ height:75vh;
+ overflow-y: scroll;
+}
+
+.room-block {
+ background-color: #f5deb3;
+ position: relative;
+ height: fit-content;
+ width:90%;
+ color: black;
+ margin: 1rem 0;
+ padding: 1rem;
+ border-radius: 5px;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+/* Join Room Section */
+
+.join-btn {
+ background-color: #d2b48c;
+ color: black;
+ border: 2px solid #d2b48c;
+ border-radius: 5px;
+ padding: 0.5rem 1rem;
+ margin-right: 1rem;
+ margin-bottom: 1rem;
+ cursor: pointer;
+ font-size: 1rem;
+ position: absolute;
+ right:0;
+ bottom: 0;
+}
+
+.join-btn:hover {
+ background-color: #c6a377;
+}
diff --git a/src/components/css/index.css b/src/components/css/index.css
index 9a9ab99..c05c850 100644
--- a/src/components/css/index.css
+++ b/src/components/css/index.css
@@ -2,5 +2,7 @@
body {
margin: 0;
+ padding: 0;
+ box-sizing: border-box;
font-family: 'Poppins';
}
diff --git a/src/components/firebase.js b/src/components/firebase.js
index 158657d..fcd24bd 100644
--- a/src/components/firebase.js
+++ b/src/components/firebase.js
@@ -5,12 +5,13 @@ import { getAuth, GoogleAuthProvider, GithubAuthProvider, signInWithPopup } from
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
- apiKey: process.env.REACT_APP_FIREBASE_API_KEY,
- authDomain: process.env.REACT_APP_FIREBASE_AUTH_DOMAIN,
- projectId: process.env.REACT_APP_FIREBASE_PROJECT_ID,
- storageBucket: process.env.REACT_APP_FIREBASE_STORAGE_BUCKET,
- messagingSenderId: process.env.REACT_APP_FIREBASE_MESSAGING_SENDER_ID,
- appId: process.env.REACT_APP_FIREBASE_APP_ID
+ apiKey: "AIzaSyD1hSaR5PzPXYs90AhuFshIE85ZGBsWT3I",
+ authDomain: "codelive-503da.firebaseapp.com",
+ projectId: "codelive-503da",
+ storageBucket: "codelive-503da.appspot.com",
+ messagingSenderId: "52006541158",
+ appId: "1:52006541158:web:5cdc1584e3bcd5d1c19aa7",
+ measurementId: "G-HB4DLV7RBZ"
};
diff --git a/src/components/js/ToggleTheme.js b/src/components/js/ToggleTheme.js
index c4eaf63..3fc1ee7 100644
--- a/src/components/js/ToggleTheme.js
+++ b/src/components/js/ToggleTheme.js
@@ -62,7 +62,7 @@ function ToggleTheme() {
const { mode, setMode } = useColorScheme();
const changeMode = () => {
- mode == "dark" ? setMode("light") : setMode("dark");
+ mode === "dark" ? setMode("light") : setMode("dark");
};
return (
<>
diff --git a/src/constants/constants.js b/src/constants/constants.js
index e065c0c..194c91d 100644
--- a/src/constants/constants.js
+++ b/src/constants/constants.js
@@ -3,7 +3,8 @@ import JavaLogo from "../components/images/JavaLogo";
import JavascriptLogo from "../components/images/JavaScriptLogo";
import PythonLogo from "../components/images/PythonLogo";
-export const judge0SubmitUrl = process.env.REACT_APP_RAPID_API_URL;
+export const judge0SubmitUrl =
+ process.env.JUDGE0_SUMBISSION_URL || process.env.REACT_APP_RAPID_API_URL;
export const rapidApiHost = process.env.REACT_APP_RAPID_API_HOST;
export const rapidApiKey = process.env.REACT_APP_RAPID_API_KEY;
diff --git a/src/context/AuthContext.js b/src/context/AuthContext.js
index d8e351c..ac9c941 100644
--- a/src/context/AuthContext.js
+++ b/src/context/AuthContext.js
@@ -28,6 +28,7 @@ export function AuthProvider({ children }) {
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (user) => {
+ console.log(user);
setCurrentUser(user);
});
@@ -35,5 +36,6 @@ export function AuthProvider({ children }) {
}, [currentUser]);
+
return Custom Code Editor
+ {currentUser ? ( + <> +
+
+
+
+ ) : (
+ ""
+ )}
+
- {getLanguageLogoById(languageDetails.ID)}
- ({
- marginLeft: "5px",
- marginTop: "1rem",
- padding: "10px 20px",
- bgcolor: theme.palette.text.primary,
- color: theme.palette.background.default,
- border: "none",
- borderRadius: "5px",
- fontSize: "0.8em",
- cursor: "pointer",
- boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
- }),
- ]}
- onClick={submitCode}
- variant="contained"
- color="primary"
- disabled={loading}
- >
-
- {loading ?
-
-
- {languageDetails.LANGUAGE_NAME}
-
-
-
-
-
- {result}
;
- })}
-
-
-
-
- );
+ const handleSignOut = async () => {
+ try {
+ await logOut();
+ window.location.href='/'
+ } catch (error) {
+ console.log(error);
+ }
+ };
+
+ const WelcomeText = styled("span")(({ theme }) => ({
+ color: theme.palette.text.primary,
+ fontWeight: "bold",
+ }));
return (
+ <>
Please sign in to use the Code Editor
--
-
- {currentUser ? (
+ {currentUser ? (
<>
Welcome, {currentUser.displayName}
) : (
- <>
+ {getLanguageLogoById(languageDetails.ID)}
+ ({
+ marginLeft: "5px",
+ marginTop: "1rem",
+ padding: "10px 20px",
+ bgcolor: theme.palette.text.primary,
+ color: theme.palette.background.default,
+ border: "none",
+ borderRadius: "5px",
+ fontSize: "0.8em",
+ cursor: "pointer",
+ boxShadow: "0 4px 6px rgba(0, 0, 0, 0.1)",
+ }),
+ ]}
+ onClick={submitCode}
+ variant="contained"
+ color="primary"
+ disabled={loading}
+ >
+
+ {loading ?
+
+
+ {languageDetails.LANGUAGE_NAME}
+
+
+
+
+
+ {result}
;
+ })}
+
+
+
+ );
+}
+function Landingpage() {
+ const [rooms, setRooms] = useState();
+ const [togglePopUp, setTogglePopUp] = useState(false);
+ const { currentUser } = useAuth();
+
+ useEffect(() => {
+ const getAllRooms = async () => {
+ try {
+ const res = await axios.get(`${process.env.REACT_APP_BACKEND}/api/room/allrooms`);
+ console.log(res.data.rooms);
+ setRooms(res.data.rooms);
+ } catch (err) {
+ console.log(err);
+ }
+ }
+ getAllRooms();
+ }, [])
+
+ const handleJoinRoom = async (room) => {
+
+ try {
+ const res = await axios.post(`${process.env.REACT_APP_BACKEND}/api/room/joinroom/`, { roomId: room._id });
+ if (res.data) {
+ window.location.href = `/editor/${res.data.room._id}`
+ }
+ } catch (err) {
+ console.log(err);
+ }
+ }
+
+ const renderUnauthenticatedContent = () => (
+
+
+ Create Room
+ setRoomName(e.target.value)} /> +
+
+
+
+
+
+
+ );
+
+ return (
+ <>
+ Please sign in to use the Code Editor
++
+
+
+
+ {togglePopUp ?
+
+
+
+
+
+ Wanna Create a room?
+ +
+
+ List of available rooms
+ {rooms && rooms.map((room, index) => ( +
+
+ ))}
+ Room Name: {room.roomName}
+ +