Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make the dark mode functional in login page of issue #91 #97

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Make the dark mode functional in login page of issue #91 #97

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a19fd54
Resolved the problm of dark mode in footer section
abansal15 Jul 12, 2023
148ca8b
Done the changes
abansal15 Jul 13, 2023
e12d52e
Done the changes
abansal15 Jul 13, 2023
525bbad
Merge branch 'master' into issue-79
abansal15 Jul 13, 2023
c9fbaba
Make the dark mode functional in login page
abansal15 Jul 18, 2023
aa04eb4
Merge branch 'issue-79' of https://github.com/abansal15/resource-shar…
abansal15 Jul 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 8 additions & 11 deletions src/components/Footer/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,9 @@ const Footer = () => {
let centerColor = "#B9D9EB";
return (
<footer
className={classNames({
"bg-[#E2E8F0] dark:bg-[#E7E5E4]": true,
"w-screen min-h-[50vh] py-14": true,
"flex flex-col items-center justify-center gap-6": true,
})}
style={{
background: `linear-gradient(90deg, ${borderColor} 0%, ${centerColor} 20%, ${centerColor} 80%, ${borderColor} 100%)`
}}
>

className={`w-screen min-h-[50vh] py-14 flex flex-col items-center justify-center gap-6 dark:bg-[#44403C] dark:text-white bg-[#B9D9EB]`}
>

<div className="relative h-fit w-screen flex flex-col items-center justify-center">

Expand All @@ -44,9 +38,12 @@ const Footer = () => {
<Link to='/'>UniShare</Link>
</div>

<div className="w-[95vw] sm:w-[35rem] mt-4">

<p className="comfort text-center text-gray-800 font-bold mobile:text-sm">
<div className="w-[95vw] sm:w-[35rem] mt-4 dark:bg-[#44403C] dark:text-white">

<p className="comfort text-center text-gray-800 font-bold mobile:text-sm dark:bg-[#44403C] dark:text-white">


Unishare is a college resource sharing website designed to serve as a dynamic platform for students to collaborate and share resources. Unishare aims to foster an environment where students can easily access and exchange a wide range of educational materials, such as lecture notes, study guides, past exam papers, and more.
</p>

Expand Down
2 changes: 1 addition & 1 deletion src/components/HeroSection/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ const HeroSection = () => {
})}>

<img src={"https://images.pexels.com/photos/6077089/pexels-photo-6077089.jpeg"} alt={"Book Heaven"} className="mobile-sm:!scale-[1.5] hero-section-sm:block hidden absolute mobile:scale-[1.25] w-full rotate-[0deg] left-[0rem] z-0" />
<img src={"/blueBlob-cropped.webp"} alt={"blueBlob"} className="mobile-sm:!scale-[1.5] hero-section-sm:block hidden absolute mobile:scale-[1.25] w-full rotate-[90deg] left-[1.25rem] z-0" />
{/* <img src={"/blueBlob-cropped.webp"} alt={"blueBlob"} className="mobile-sm:!scale-[1.5] hero-section-sm:block hidden absolute mobile:scale-[1.25] w-full rotate-[90deg] left-[1.25rem] z-0" /> */}
{/* Text ... */}
<section className={classNames({
'w-1/2 h-full': true,
Expand Down
74 changes: 31 additions & 43 deletions src/pages/login/content.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,98 +4,86 @@ import { useAuthState, useSignInWithEmailAndPassword } from 'react-firebase-hook
import { auth } from '../../../Firebase/ClientApp.mjs';
import { browserLocalPersistence, browserSessionPersistence, setPersistence } from 'firebase/auth';


function LoginForm() {
const [signInWithEmailAndPassword, user, loading, error] = useSignInWithEmailAndPassword(auth);
const [emailid, setEmailid] = useState('');
const [password, setPassword] = useState('');
const [rememberme, setRememberMe]=useState(false);
const [rememberme, setRememberMe] = useState(false);
const [userr, loadingg, erorr] = useAuthState(auth);
const [errorcause, setErrorcause] = useState('');

useEffect(() => {
if (rememberme)
{
if (rememberme) {
setPersistence(auth, browserLocalPersistence);
}
else
{
else {
setPersistence(auth, browserSessionPersistence);
}
}, [rememberme]);
useEffect(()=>{
if (error)
{
if (error.message.toLowerCase().includes('password'))
{
useEffect(() => {
if (error) {
if (error.message.toLowerCase().includes('password')) {
setErrorcause('password');
}
else if (error.message.toLowerCase().includes('email'))
{
else if (error.message.toLowerCase().includes('email')) {
setErrorcause('email');
}
}
}, [error])
if (user || userr)
{
if (user || userr) {
return <Navigate replace to="/" />;
}
return (
<div className=" h-screen flex items-center justify-center border-black pt-[10vh]" style={{
backgroundImage: 'url("/loginpage-background-image.webp")',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat',
backgroundPosition: 'center',
filter: 'blur(0px)'
}}>
<div className="bg-white rounded-lg shadow-lg w-96 border-double border-4 border-sky-500" >
<div className=" h-screen flex items-center justify-center border-black pt-[10vh] bg-[url('/loginpage-background-image.webp')] dark:bg-[url('https://www.vectornator.io/blog/content/images/2022/03/610963083219da6a0a00ccb6_Cover-Dark-2.png')] bg-no-repeat bg-cover" >
<div className="bg-white rounded-lg shadow-lg w-96 border-double border-4 border-sky-500 dark:bg-[#44403C] dark:text-white" >
<div className="flex justify-between items-center text-center w-full pl-10 pr-10 pt-5 pb-1">
<h1 className="text-2xl font-bold dark:text-[#1A1A1C]" style={{ fontFamily: 'monospace' }}>Login</h1>
<h1 className="text-2xl font-bold" style={{ fontFamily: 'monospace' }}>Login</h1>

<h2 className="flex items-center justify-end dark:text-[#1A1A1C]">
<h2 className="flex items-center justify-end dark:bg-[#44403C] dark:text-white">
<img src="/iiitdmj-logo.webp" alt="pr-0 w-6 h-6" className="pr-0 w-8 h-8 iiitdmj-logo mx-1" />
IIITDMJ
</h2>

</div>
<hr className=' ' />
<form className="px-6 py-4">
<div className={`my-3 text-center text-base bg-red-500 text-white rounded-lg p-1 capitalize ${(error)? 'visible' : 'hidden'}`}>
{(error) ? error.message.replaceAll('Firebase: Error (auth/', '').replaceAll(').', '').replaceAll('-', ' ') : null}
</div>
<div className={`my-3 text-center text-base bg-red-500 text-white rounded-lg p-1 capitalize ${(error) ? 'visible' : 'hidden'}`}>
{(error) ? error.message.replaceAll('Firebase: Error (auth/', '').replaceAll(').', '').replaceAll('-', ' ') : null}
</div>
<div className="mb-6">
<label className="text-gray-500">Email id</label>
<input type="text" className={`w-full border-b-2 border-gray-300 focus:border-blue-500 outline-none dark:text-[#1A1A1C] ${(errorcause=='email') ? 'border-red-500' : null}`} required onChange={(e) => setEmailid(e.target.value)}/>
<label className="text-gray-500 dark:bg-[#44403C] dark:text-white">Email id</label>
<input type="text" className={`w-full border-b-2 border-gray-300 focus:border-blue-500 outline-none dark:bg-[#44403C] dark:text-white dark:text-[#1A1A1C] ${(errorcause == 'email') ? 'border-red-500' : null}`} required onChange={(e) => setEmailid(e.target.value)} />
</div>
<div className="mb-6">
<label className="text-gray-500">Password</label>
<input type="password" className={`w-full border-b-2 border-gray-300 focus:border-blue-500 outline-none dark:text-[#1A1A1C] ${(errorcause=='password') ? 'border-red-500' : null}`} required onChange={(e) => setPassword(e.target.value)}/>
<label className="text-gray-500 dark:bg-[#44403C] dark:text-white">Password</label>
<input type="password" className={`w-full border-b-2 border-gray-300 focus:border-blue-500 outline-none dark:text-[#1A1A1C] dark:bg-[#44403C] dark:text-white ${(errorcause == 'password') ? 'border-red-500' : null}`} required onChange={(e) => setPassword(e.target.value)} />
</div>
<div className="flex items-center mb-6">
<div className="flex-1 text-sm text-gray-600">
<Link to='/resetpassword' className="text-blue-500 hover:underline">Forgot Password?</Link>
<Link to='/resetpassword' className="text-blue-500 hover:underline dark:bg-[#44403C] dark:text-white">Forgot Password?</Link>
</div>
<div className="checkb1">
<input type="checkbox" id="remember" className="form-checkbox" onChange={(e) => {setRememberMe(e.target.checked);}}/>
<label htmlhtmlFor="remember" className="ml-2 text-sm text-gray-600">Remember Me</label>
<input type="checkbox" id="remember" className="form-checkbox" onChange={(e) => { setRememberMe(e.target.checked); }} />
<label htmlhtmlFor="remember" className="ml-2 text-sm text-gray-600 dark:bg-[#44403C] dark:text-white">Remember Me</label>
</div>
</div>
{loading ?
{loading ?
<div className={`flex items-center justify-center h-10`}>
<img src="/loader.gif" alt="" className='bg-white h-full' />
</div> :
<input
type="submit"
value="Login"
className="w-full bg-blue-500 text-white font-bold py-2 rounded-lg cursor-pointer hover:bg-blue-600"
</div> :
<input
type="submit"
value="Login"
className="w-full bg-blue-500 text-white font-bold py-2 rounded-lg cursor-pointer hover:bg-blue-600"
onClick={(e) => {
e.preventDefault();
setErrorcause('');
signInWithEmailAndPassword(emailid, password)
}}
/>
}
<div className="mt-6 text-center text-base text-gray-600">
Not a member? <a href="#" className="text-blue-500 hover:underline"><Link to="/signup">Signup</Link></a>
<div className="mt-6 text-center text-base text-gray-600 dark:bg-[#44403C] dark:text-white">
Not a member? <a href="#" className="text-blue-500 hover:underline dark:bg-[#44403C] dark:text-white"><Link to="/signup">Signup</Link></a>
</div>
</form>
</div>
Expand Down