Skip to content

Commit 0710a89

Browse files
hassanamir05hassanamir05
committed
added signout functionality.
(ow working on making a separate page for forgot password)
1 parent 4e3b64f commit 0710a89

File tree

7 files changed

+97
-50
lines changed

7 files changed

+97
-50
lines changed

‎index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,15 @@
1313
rel="stylesheet"
1414
/>
1515

16+
<!--Font Awesome CDN Link-->
17+
<link
18+
rel="stylesheet"
19+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
20+
integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg=="
21+
crossorigin="anonymous"
22+
referrerpolicy="no-referrer"
23+
/>
24+
1625
<title>Vite + React</title>
1726
</head>
1827
<body>

‎src/Components/Buttons/Button.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11

22

3-
const Button = ({ name, onCLick }) => {
3+
const Button = ({ name, onCLick, customClass = '' }) => {
44
return (
55
<button
6-
className="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none"
6+
className={`mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 transition-all duration-300 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none ${customClass}`}
77
onClick={onCLick}
88
>
99
<span className="ml-3">

‎src/Components/Buttons/GlassButton.jsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,13 @@
11

2-
const GlassButton = ({ name, onClick }) => {
2+
const GlassButton = ({ name, onClick, icon = '' }) => {
33
return (
44
<button
5-
className="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline"
5+
className="w-full max-w-xs font-bold shadow-sm rounded-lg py-3 bg-indigo-100 text-gray-800 flex items-center justify-center transition-all duration-300 ease-in-out focus:outline-none hover:shadow focus:shadow-sm focus:shadow-outline flex flex-row gap-x-2"
66
onClick={onClick}
77
>
8+
{
9+
icon != '' ? <i className="fa-brands fa-google"></i> : ''
10+
}
811
<span className="ml-4">
912
{name}
1013
</span>

‎src/Pages/Dashboard/Dashboard.jsx‎

Lines changed: 66 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,73 @@
1-
import React from 'react';
1+
//Firebase
2+
import { auth } from '../../Firebase/firebase';
3+
4+
5+
//Components
6+
import { Button } from '../../Components';
7+
8+
//Toast
9+
import { toast, ToastContainer } from "react-toastify";
10+
import 'react-toastify/dist/ReactToastify.css';
11+
12+
13+
// const contacts = ['Contact 1', 'Contact 2', 'Contact 3', 'Contact 4', 'Contact 5', 'Contact 6'];
214

3-
// Sample data for contacts
4-
const contacts = ['Contact 1', 'Contact 2', 'Contact 3', 'Contact 4', 'Contact 5', 'Contact 6'];
515

616
const Dashboard = () => {
17+
18+
19+
const handleSignout = () => {
20+
auth.signOut()
21+
toast.error(('Signing Out!'), {
22+
position: 'top-right'
23+
})
24+
setTimeout(() => {
25+
window.location.href = 'login'
26+
}, 2000)
27+
}
28+
729
return (
8-
<div className="min-h-screen flex bg-gray-100">
9-
{/* Sidebar */}
10-
<aside className="bg-white bg-opacity-10 backdrop-blur-md h-screen w-64 p-5 shadow-lg flex flex-col justify-between">
11-
<nav className="space-y-6 text-xl text-gray-800 flex flex-col gap-y-[20px]">
12-
<button className="hover:text-gray-600">Chats</button>
13-
<button className="hover:text-gray-600">Contacts</button>
14-
<button className="hover:text-gray-600">Settings</button>
15-
</nav>
16-
<button className="w-full py-3 bg-red-500 hover:bg-red-600 text-white text-lg rounded-lg">Logout</button>
17-
</aside>
18-
19-
{/* Main Section */}
20-
<main className="flex-1 flex p-6 justify-center items-center">
21-
{/* Contact List */}
22-
<section className="w-1/3 bg-white bg-opacity-10 backdrop-blur-md rounded-lg shadow-lg p-4 overflow-y-auto h-[80vh]">
23-
<h2 className="text-lg font-bold mb-4 text-center">Contacts</h2>
24-
<div className="space-y-4">
25-
{contacts.map((contact, index) => (
26-
<button key={index} className="w-full p-3 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-gray-800">
27-
{contact}
28-
</button>
29-
))}
30-
</div>
31-
</section>
32-
33-
{/* Scrollable Chat Section */}
34-
<section className="flex-1 ml-6 bg-white bg-opacity-10 backdrop-blur-md rounded-lg shadow-lg p-4 h-[80vh]">
35-
<div className="overflow-y-auto h-full">
36-
<p className="text-center text-lg text-gray-600">Scrollbar content</p>
37-
</div>
38-
</section>
39-
</main>
40-
</div>
30+
// <div className="min-h-screen flex bg-gray-100">
31+
// {/* Sidebar */}
32+
// <aside className="bg-white bg-opacity-10 backdrop-blur-md h-screen w-64 p-5 shadow-lg flex flex-col justify-between">
33+
// <nav className="space-y-6 text-xl text-gray-800 flex flex-col gap-y-[20px]">
34+
// <button className="hover:text-gray-600">Chats</button>
35+
// <button className="hover:text-gray-600">Contacts</button>
36+
// <button className="hover:text-gray-600">Settings</button>
37+
// </nav>
38+
// <button className="w-full py-3 bg-red-500 hover:bg-red-600 text-white text-lg rounded-lg">Logout</button>
39+
// </aside>
40+
41+
// {/* Main Section */}
42+
// <main className="flex-1 flex p-6 justify-center items-center">
43+
// {/* Contact List */}
44+
// <section className="w-1/3 bg-white bg-opacity-10 backdrop-blur-md rounded-lg shadow-lg p-4 overflow-y-auto h-[80vh]">
45+
// <h2 className="text-lg font-bold mb-4 text-center">Contacts</h2>
46+
// <div className="space-y-4">
47+
// {contacts.map((contact, index) => (
48+
// <button key={index} className="w-full p-3 bg-white bg-opacity-20 hover:bg-opacity-30 rounded-lg text-gray-800">
49+
// {contact}
50+
// </button>
51+
// ))}
52+
// </div>
53+
// </section>
54+
55+
// {/* Scrollable Chat Section */}
56+
// <section className="flex-1 ml-6 bg-white bg-opacity-10 backdrop-blur-md rounded-lg shadow-lg p-4 h-[80vh]">
57+
// <div className="overflow-y-auto h-full">
58+
// <p className="text-center text-lg text-gray-600">Scrollbar content</p>
59+
// </div>
60+
// </section>
61+
// </main>
62+
// </div>
63+
64+
<>
65+
<div className='w-full h-full min-h-screen flex flex-col justify-center items-center'>
66+
<p>Welcome {auth.currentUser.displayName}</p>
67+
<Button name="Signout" customClass='bg-red-500 hover:bg-red-400 max-w-[350px] w-full mx-[30px]' onCLick={handleSignout} />
68+
</div>
69+
<ToastContainer />
70+
</>
4171
);
4272
};
4373

‎src/Pages/Login/Login.jsx‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@ const Login = () => {
2424
const email = useSelector((state) => state.auth.email);
2525
const password = useSelector((state) => state.auth.password);
2626

27-
const [error, setError] = useState(null);
2827
const [showPass, setShowPass] = useState(false)
2928

3029
const handleLogin = async (event) => {
@@ -49,7 +48,6 @@ const Login = () => {
4948
}
5049

5150
} catch (error) {
52-
setError('Invalid Credentials');
5351
toast.error('Invalid Credentials', {
5452
position: 'top-right'
5553
});
@@ -92,7 +90,6 @@ const Login = () => {
9290
.catch((error) => {
9391
const errorCode = error.code;
9492
const errorMessage = error.message;
95-
// ..
9693
});
9794

9895
} catch (error) {
@@ -106,7 +103,6 @@ const Login = () => {
106103
return (
107104
<>
108105
<form
109-
onSubmit={handleLogin}
110106
className="min-h-screen bg-gray-100 text-gray-900 flex justify-center font-poppins">
111107
<div className="max-w-screen-xl m-0 sm:m-10 bg-white shadow sm:rounded-lg flex justify-center flex-1">
112108
<div className="flex-1 bg-indigo-100 text-center hidden lg:flex">
@@ -126,7 +122,7 @@ const Login = () => {
126122
</h1>
127123
<div className="w-full flex-1 mt-8">
128124
<div className="flex flex-col items-center">
129-
<GlassButton name="Login with Google" onClick={handleGoogleLogin} />
125+
<GlassButton name="Login with Google" onClick={handleGoogleLogin} icon='google' />
130126
</div>
131127

132128
<div className="my-12 border-b text-center">
@@ -152,17 +148,15 @@ const Login = () => {
152148

153149
<div className="flex flex-row w-[70%] h-[20px]">
154150
<input type="checkbox" id="show-pass" className='w-[40px] h-[20px] m-0 ' onChange={() => { setShowPass(!showPass) }} />
155-
<label htmlFor="show-pass" className="w-[150px]">Show Password</label>
151+
<label htmlFor="show-pass" className="w-[150px] hover:cursor-pointer">Show Password</label>
156152
</div>
157153

158154
<a href="#" className="w-full text-right text-blue-400 underline" onClick={forgotPassword}>Forgot Password</a>
159155
</div>
160156

161-
{error && (
162-
<p className="text-red-500 text-center mt-4">{error}</p>
163-
)}
164157

165-
<Button name="Login" />
158+
159+
<Button name="Login" onCLick={handleLogin} />
166160

167161
<p className="mt-6 text-center text-md">
168162
Don't have an account?

‎src/Pages/ResetPassword/ResetPassword.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
3+
const ResetPassword = () => {
4+
return (
5+
<div className='min-h-screen h-full w-full flex justify-center items-center'>
6+
7+
</div>
8+
)
9+
}
10+
11+
export default ResetPassword

‎src/Pages/ResetPassword/index.jsx‎

Whitespace-only changes.

0 commit comments

Comments
 (0)