Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 0841bab

Browse files
shubham-covrzyshubham-covrzy
committed
added guest login
1 parent b160f3e commit 0841bab

11 files changed

Lines changed: 148 additions & 59 deletions

File tree

‎src/App.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1-
// src/App.js
2-
3-
import React from "react";
41
import { Analytics } from "@vercel/analytics/react"
52
import {
63
Route,
74
Routes,
85
BrowserRouter as Router,
96
} from "react-router-dom";
10-
import { ToastContainer, toast } from 'react-toastify';
7+
import { ToastContainer } from 'react-toastify';
118
import 'react-toastify/dist/ReactToastify.css';
129
import Home from "./pages/Home/Home";
1310
import LoginPage from "./pages/LoginPage/LoginPage";
@@ -19,20 +16,22 @@ import CreateRoom from './pages/CreateRoom/CreateRoom';
1916
import { AuthProvider } from "./contexts/AuthContext";
2017
// import { compileString } from "sass";
2118
import CodeTab from "./components/CodeTab/CodeTab";
19+
import GuestBanner from "./components/GuestBanner/GuestBanner";
2220

2321
function App() {
2422
return (
2523
<Router>
2624
<AuthProvider>
2725
<NavBar />
26+
<GuestBanner/>
2827
<Routes>
2928
<Route path="/" element={<Home />} />
3029
<Route path="/login" element={<LoginPage />} />
3130
<Route path="/register" element={<RegisterPage />} />
3231
<Route path="/createRoom" element={<Auth compo={CreateRoom} />} />
3332

3433
<Route path="/editor/:roomId" element={<RoomPage />} />
35-
<Route path="/test" element={<CodeTab />} />
34+
{/* <Route path="/test" element={<CodeTab />} /> */}
3635

3736
</Routes>
3837
</AuthProvider>

‎src/components/GuestBanner/GuestBanner.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.guest-banner {
2+
background-color: #ffcc00;
3+
color: #333;
4+
text-align: center;
5+
padding: 8px;
6+
font-size: 14px;
7+
width: 100%;
8+
}

‎src/components/GuestBanner/GuestBanner.jsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { useAuth } from '../../contexts/AuthContext';
2+
import './GuestBanner.css';
3+
4+
const GuestBanner = () => {
5+
const { authState } = useAuth();
6+
7+
if (!authState.isGuest) return null;
8+
9+
return (
10+
<div className="guest-banner">
11+
<p>You are using a guest account.</p>
12+
</div>
13+
);
14+
};
15+
16+
export default GuestBanner;

‎src/components/GuestLoginButton/GuestLoginButton.css‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.guest-login-btn {
2+
background-color: #6096B4;;
3+
margin-top: 1rem;
4+
padding: 0.5rem 1rem;
5+
border: 1px solid rgba(0, 0, 0, 0.1);
6+
border-radius: .25rem;
7+
box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
8+
color: white;
9+
cursor: pointer;
10+
display: inline-flex;
11+
transition: all 250ms;
12+
width: auto;
13+
font-size: 1.2rem;
14+
}
15+
16+
.guest-login-btn:hover {
17+
border-color: rgba(0, 0, 0, 0.15);
18+
box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
19+
}
20+
21+
.guest-login-btn:disabled {
22+
background-color: #cccccc;
23+
cursor: not-allowed;
24+
}
25+

‎src/components/GuestLoginButton/GuestLoginButton.jsx‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import { useAuth } from '../../contexts/AuthContext';
2+
import './GuestLoginButton.css';
3+
4+
const GuestLoginButton = () => {
5+
const { guestLoginHandler, loading } = useAuth();
6+
7+
return (
8+
<button
9+
className="guest-login-btn"
10+
onClick={guestLoginHandler}
11+
disabled={loading}
12+
>
13+
{loading ? 'Logging in...' : 'Try as Guest'}
14+
</button>
15+
);
16+
};
17+
18+
export default GuestLoginButton;

‎src/components/ProtectedRoutes/Auth.jsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,30 @@
1-
import React, { useEffect } from 'react'
2-
import { useAuth } from '../../contexts/AuthContext'
1+
import { useEffect } from 'react';
2+
import { useAuth } from '../../contexts/AuthContext';
33
import { useNavigate } from 'react-router-dom';
4-
import toast from 'react-hot-toast';
4+
import { toast } from 'react-toastify';
5+
56
const Auth = (props) => {
6-
const navigate=useNavigate();
7-
const {authState}=useAuth();
8-
// console.log(authState)
9-
async function isLogin(){
7+
const navigate = useNavigate();
8+
const { authState } = useAuth();
9+
10+
async function isLogin() {
1011
if (!authState?.username) {
11-
navigate('/', { state: { message: 'You need to sign in Before Creating Room'} });
12+
navigate('/', {
13+
state: { message: 'You need to sign in Before Creating Room'}
14+
});
15+
toast.info('Please sign in or use the guest login to continue');
1216
}
1317
}
14-
useEffect(()=>{
18+
19+
useEffect(() => {
1520
isLogin();
16-
},[authState.username,navigate])
21+
}, [authState.username, navigate]);
22+
1723
return (
1824
<div>
19-
<props.compo />
25+
<props.compo />
2026
</div>
21-
)
22-
}
27+
);
28+
};
2329

2430
export default Auth

‎src/contexts/AuthContext.jsx‎

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,35 @@
11
// src/contexts/AuthContext.js
22

3-
import React, { createContext, useState, useEffect, useContext } from 'react';
3+
import { createContext, useState, useContext } from 'react';
44
import { useNavigate } from 'react-router-dom';
55
import { login, register , logout} from '../utils/api';
6-
import Cookies from 'js-cookie';
76
import { toast } from 'react-toastify';
8-
import { findDOMNode } from 'react-dom';
7+
import { GUEST_CREDENTIALS } from '../utils/guestCreds';
98
const AuthContext = createContext();
109
export const useAuth=()=>useContext(AuthContext);
1110

1211
const AuthProvider = ({ children }) => {
1312
const [loading,setLoading]=useState(false);
1413
const [authState, setAuthState] = useState({
1514
username: localStorage.getItem('username'),
15+
isGuest: localStorage.getItem('isGuest') === 'true'
1616
});
1717
const reactNavigate = useNavigate();
1818

19-
useEffect(() => {
20-
const token = Cookies.get('token');
21-
if (token) {
22-
// Fetch user data if token exists
23-
// Implement fetch user logic here
24-
}
25-
}, []);
26-
2719
const loginHandler = async (credentials) => {
2820
setLoading(true);
2921
try {
30-
// console.log(credentials);
3122
const response = await login(credentials);
3223
if (response.msg === 'Login successful') {
33-
setAuthState({ username: credentials.username });
24+
setAuthState({
25+
username: credentials.username,
26+
isGuest: credentials.isGuest || false
27+
});
3428
localStorage.setItem('username', credentials.username);
35-
reactNavigate('/');
29+
if (credentials.isGuest) {
30+
localStorage.setItem('isGuest', 'true');
31+
}
32+
reactNavigate('/createRoom');
3633
toast.success('😍 Login successful');
3734
}
3835
} catch (err) {
@@ -42,44 +39,72 @@ const AuthProvider = ({ children }) => {
4239
setLoading(false);
4340
}
4441
};
42+
const guestLoginHandler = async () => {
43+
// Pick a random guest account from the list
44+
const randomIndex = Math.floor(Math.random() * GUEST_CREDENTIALS.length);
45+
const guestCredentials = GUEST_CREDENTIALS[randomIndex];
46+
47+
// Add isGuest flag to credentials
48+
const credentials = {
49+
...guestCredentials,
50+
isGuest: true
51+
};
52+
53+
// Use the regular login handler
54+
await loginHandler(credentials);
55+
};
56+
4557

4658
const registerHandler = async (credentials) => {
47-
setLoading(true)
59+
setLoading(true);
4860
try {
4961
const response = await register(credentials);
5062
if (response.msg === 'Registration successful') {
51-
setAuthState({ username: credentials.username });
63+
setAuthState({
64+
username: credentials.username,
65+
isGuest: false
66+
});
5267
localStorage.setItem('username', credentials.username);
68+
localStorage.removeItem('isGuest');
5369
reactNavigate('/');
5470
toast.success('😎 Registration successful');
5571
}
5672
} catch (err) {
5773
console.error(err.message);
58-
toast.error('Registration failed: ' + (err.response?.data?.msg || 'Server error'))
74+
toast.error('Registration failed: ' + (err.response?.data?.msg || 'Server error'));
5975
} finally {
60-
setLoading(false)
76+
setLoading(false);
6177
}
6278
};
6379

6480
const logoutHandler = async () => {
6581
setLoading(true);
6682
try {
6783
await logout(); // Call logout API
68-
setAuthState({ username: null });
84+
setAuthState({ username: null, isGuest: false });
6985
localStorage.removeItem('username');
7086
localStorage.removeItem('token');
71-
toast.success("😊 Logout Successfully")
87+
localStorage.removeItem('isGuest');
88+
toast.success("😊 Logout Successfully");
7289
reactNavigate('/');
7390
} catch (err) {
7491
console.error(err.message);
75-
toast.error('Logout failed: ' + err.response?.data?.msg || 'Server error')
92+
toast.error('Logout failed: ' + err.response?.data?.msg || 'Server error');
7693
} finally {
7794
setLoading(false);
7895
}
7996
};
8097

98+
8199
return (
82-
<AuthContext.Provider value={{ authState, loginHandler, registerHandler, logoutHandler,loading }}>
100+
<AuthContext.Provider value={{
101+
authState,
102+
loginHandler,
103+
registerHandler,
104+
logoutHandler,
105+
guestLoginHandler,
106+
loading
107+
}}>
83108
{children}
84109
</AuthContext.Provider>
85110
);

‎src/pages/CreateRoom/CreateRoom.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const CreateRoom = () => {
3030
<form autoComplete='off'>
3131
<div className='inputgroup'>
3232
<label htmlFor="roomId">Room Id ...</label>
33-
<input type="text" name="roomId" id="roomId" placeholder='Enter Room ID' value={roomId} onChange={e => setRoomId(e.target.value)} />
33+
<input type="text" name="roomId" id="roomId" placeholder='Enter Existing Room ID' value={roomId} onChange={e => setRoomId(e.target.value)} />
3434
</div>
3535
<div className='inputgroup'>
3636
<input type="submit" onClick={joinRoom} value="Enter Room" />

‎src/pages/Home/Home.jsx‎

Lines changed: 2 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
import { Link,useLocation } from "react-router-dom";
33
import React, { useEffect, useState } from "react";
44
import "./Homepage.scss";
5+
import GuestLoginButton from '../../components/GuestLoginButton/GuestLoginButton';
56

67

78
import { motion } from "framer-motion";
@@ -10,21 +11,7 @@ import { ToastContainer, toast } from 'react-toastify';
1011
import OptimizedVideo from "./Video";
1112
const Home = () => {
1213

13-
// const [joke, setjoke] = useState("Hello uncle");
14-
// async function dadJokesApi() {
15-
// const data = await fetch("https://icanhazdadjoke.com/slack");
16-
// const fetching = data.json();
17-
// // const joke = fetching.then((data) => setjoke(data.attachments[0].text));
18-
// // console.log(joke)
19-
// // setjoke(joke);
20-
// }
21-
22-
// useEffect(() => {
23-
// dadJokesApi();
24-
// }, []);
25-
2614
const location = useLocation();
27-
// console.log(location)
2815
useEffect(() => {
2916
if (location.state?.message) {
3017
toast.error(location.state.message);
@@ -121,7 +108,6 @@ const initialAnimation = () => {
121108

122109
useEffect(() => {
123110
initialAnimation();
124-
125111
}, []);
126112

127113
return (
@@ -133,15 +119,13 @@ useEffect(() => {
133119
<motion.div className="container">
134120
<motion.div className="textcont" variants={variants} initial="initial" animate="animate">
135121
<h1>Where Code Meets Collaboration.</h1>
136-
<h2 style={{ color: "red" }}>
137-
{/* {joke == "" ? <p>Loading...</p> : joke} */}
138-
</h2>
139122
<h2>
140123
Solve, Teach, and Interview: The Online Code Editor for Every
141124
Occasion...
142125
</h2>
143126
<motion.h3 variants={variants} animate="btn">
144127
<Link to={"/createRoom"} className="sharebtn" variants={variants} animate="btn" >Create New Room</Link>
128+
<GuestLoginButton />
145129
</motion.h3>
146130
</motion.div>
147131
</motion.div>

‎src/pages/Home/Homepage.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,10 @@
8888
font-weight: 400;
8989
color: aliceblue;
9090
}
91+
h3{
92+
display: flex;
93+
gap:1rem;
94+
}
9195
}
9296
}
9397
}

0 commit comments

Comments
 (0)