From db9f41e2ea094b6187476fef4c4a3ba744b0ab09 Mon Sep 17 00:00:00 2001 From: Chemini Date: Tue, 1 Oct 2024 10:20:27 +0530 Subject: [PATCH 01/15] login and signup buttons updated --- frontend/src/pages/startPage.jsx | 57 ++++++++++++++++++++++++++------ 1 file changed, 47 insertions(+), 10 deletions(-) diff --git a/frontend/src/pages/startPage.jsx b/frontend/src/pages/startPage.jsx index 04cdaef..e8cb196 100644 --- a/frontend/src/pages/startPage.jsx +++ b/frontend/src/pages/startPage.jsx @@ -1,6 +1,7 @@ import React, { useEffect } from "react"; import styled, { createGlobalStyle, keyframes } from "styled-components"; import { useNavigate } from "react-router-dom"; +import { FaSun, FaCloud } from "react-icons/fa"; // Import weather icons import clouds from "../assets/clouds.jpg"; const fadeIn = keyframes` @@ -47,7 +48,7 @@ const Title = styled.h1` color: #fff; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.7); cursor: pointer; - margin-bottom: 2rem; + margin-bottom: 3rem; transition: transform 0.3s ease, color 0.3s ease; &:hover { @@ -64,33 +65,63 @@ const Title = styled.h1` } `; -const LoginButton = styled.button` - padding: 1rem 2rem; +// Icon animations +const floatAnimation = keyframes` + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-10px); + } + 100% { + transform: translateY(0); + } +`; + +// Styled button with weather icons +const WeatherButton = styled.button` + padding: 1.5rem 3rem; font-size: 1.2rem; color: #fff; background-color: rgba(0, 123, 255, 0.8); /* Sky blue color with opacity */ border: none; - border-radius: 5px; + border-radius: 50px; /* Rounded buttons */ + display: flex; + align-items: center; + justify-content: center; + gap: 10px; cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; - margin: 4px; + animation: ${floatAnimation} 3s ease-in-out infinite; /* Floating animation */ + margin: 10px; &:hover { background-color: rgba(0, 123, 255, 1); - transform: translateY(-5px); + transform: translateY(-5px) scale(1.05); /* Slight scaling on hover */ + } + + svg { + font-size: 1.5rem; } @media (max-width: 768px) { font-size: 1rem; - padding: 0.8rem 1.6rem; + padding: 1rem 2.5rem; } @media (max-width: 480px) { font-size: 0.9rem; - padding: 0.6rem 1.4rem; + padding: 0.8rem 2rem; } `; +const ButtonContainer = styled.div` + display: flex; + gap: 20px; + flex-wrap: wrap; + justify-content: center; +`; + const StartPage = () => { const navigate = useNavigate(); @@ -118,8 +149,14 @@ const StartPage = () => { Weather Guide - Login - Signup + + + Login + + + Signup + + ); From ea79d578132f4a0420eec1e257c065ada3281996 Mon Sep 17 00:00:00 2001 From: Chemini Date: Tue, 1 Oct 2024 10:42:11 +0530 Subject: [PATCH 02/15] Login page styling updated --- frontend/src/pages/loginPage.jsx | 318 ++++++++++++++++++++----------- 1 file changed, 204 insertions(+), 114 deletions(-) diff --git a/frontend/src/pages/loginPage.jsx b/frontend/src/pages/loginPage.jsx index 7e2a4a0..b79c1b8 100644 --- a/frontend/src/pages/loginPage.jsx +++ b/frontend/src/pages/loginPage.jsx @@ -5,6 +5,135 @@ import { doSignInWithGoogle, } from "../firebase/auth"; import { useAuth } from "../contexts/authContext"; +import styled, { keyframes } from "styled-components"; +import clouds from "../assets/clouds.jpg"; // Importing clouds image for the background + +// Float animation similar to the first code +const floatAnimation = keyframes` + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-5px); + } + 100% { + transform: translateY(0); + } +`; + +const Container = styled.main` + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-image: url(${clouds}); + background-size: cover; + background-position: center; +`; + +const FormWrapper = styled.div` + width: 400px; + padding: 2rem; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 20px; + box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); + text-align: center; + animation: ${floatAnimation} 4s ease-in-out infinite; +`; + +const Title = styled.h3` + font-size: 1.8rem; + font-weight: bold; + color: #333; + margin-bottom: 1rem; +`; + +const StyledInput = styled.input` + width: 100%; + padding: 0.75rem; + margin: 0.5rem 0; + border-radius: 8px; + border: 2px solid #007bff; + background-color: rgba(240, 240, 255, 0.3); + transition: border 0.3s ease-in-out; + + &:focus { + border-color: #0056b3; + } +`; + +const SubmitButton = styled.button` + width: 100%; + padding: 0.75rem; + margin-top: 1rem; + font-size: 1rem; + background-color: ${props => (props.disabled ? "#ccc" : "#007bff")}; + color: white; + border: none; + border-radius: 8px; + cursor: ${props => (props.disabled ? "not-allowed" : "pointer")}; + transition: background-color 0.3s ease, transform 0.3s ease; + + &:hover { + background-color: ${props => (!props.disabled ? "#0056b3" : "#ccc")}; + transform: ${props => (!props.disabled ? "translateY(-3px)" : "none")}; + } +`; + +const GoogleButton = styled.button` + width: 100%; + display: flex; + align-items: center; + justify-content: center; + padding: 0.75rem; + font-size: 1rem; + border: 2px solid #dcdcdc; + border-radius: 8px; + background-color: white; + margin-top: 1rem; + cursor: pointer; + transition: background-color 0.3s ease, transform 0.3s ease; + color: #757575; + + &:hover { + background-color: #f5f5f5; + transform: translateY(-3px); + } + + svg { + margin-right: 0.5rem; + font-size: 1.5rem; + color: #4285f4; + } + + &:disabled { + cursor: not-allowed; + background-color: #e0e0e0; + } +`; + +const Divider = styled.div` + display: flex; + align-items: center; + margin: 1rem 0; + + &::before, + &::after { + content: ""; + flex: 1; + height: 1px; + background-color: #ccc; + } + + &::before { + margin-right: 0.5rem; + } + + &::after { + margin-left: 0.5rem; + } +`; const Login = () => { const { userLoggedIn } = useAuth(); @@ -18,8 +147,12 @@ const Login = () => { e.preventDefault(); if (!isSigningIn) { setIsSigningIn(true); - await doSignInWithEmailAndPassword(email, password); - // doSendEmailVerification() + try { + await doSignInWithEmailAndPassword(email, password); + } catch (err) { + setIsSigningIn(false); + setErrorMessage("Sign-in failed"); + } } }; @@ -29,127 +162,84 @@ const Login = () => { setIsSigningIn(true); doSignInWithGoogle().catch((err) => { setIsSigningIn(false); + setErrorMessage("Google Sign-in failed"); }); } }; return ( -
+ {userLoggedIn && } -
-
-
-
-

- Welcome Back -

-
-
-
-
- - { - setEmail(e.target.value); - }} - className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg transition duration-300" + + Welcome Back + + + setEmail(e.target.value)} + required + /> + + setPassword(e.target.value)} + required + /> + {errorMessage && ( + + {errorMessage} + + )} + + {isSigningIn ? "Signing In..." : "Sign In"} + + +

+ Don't have an account?{" "} + + Sign up + +

+ OR + + + {/* SVG for Google Icon */} + + -
- -
- - { - setPassword(e.target.value); - }} - className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg transition duration-300" + -
- - {errorMessage && ( - {errorMessage} - )} - - - -

- Don't have an account?{" "} - - Sign up - -

-
-
-
OR
-
-
- -
-
-
+ + + + + + + + + + {isSigningIn ? "Signing In..." : "Continue with Google"} + + + ); }; From 8e65fdcfc565eb5968abb0a85d55f11606a48c87 Mon Sep 17 00:00:00 2001 From: Chemini Date: Tue, 1 Oct 2024 10:43:30 +0530 Subject: [PATCH 03/15] signup page styling updated --- frontend/src/pages/signupPage.jsx | 239 +++++++++++++++++++----------- 1 file changed, 151 insertions(+), 88 deletions(-) diff --git a/frontend/src/pages/signupPage.jsx b/frontend/src/pages/signupPage.jsx index ed1ed6d..66e1a0d 100644 --- a/frontend/src/pages/signupPage.jsx +++ b/frontend/src/pages/signupPage.jsx @@ -2,13 +2,110 @@ import React, { useState } from "react"; import { Navigate, Link, useNavigate } from "react-router-dom"; import { useAuth } from "../contexts/authContext"; import { doCreateUserWithEmailAndPassword } from "../firebase/auth"; +import styled, { keyframes } from "styled-components"; +import clouds from "../assets/clouds.jpg"; // Cloud background image + +// Float animation +const floatAnimation = keyframes` + 0% { + transform: translateY(0); + } + 50% { + transform: translateY(-5px); + } + 100% { + transform: translateY(0); + } +`; + +const Container = styled.main` + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-image: url(${clouds}); + background-size: cover; + background-position: center; +`; + +const FormWrapper = styled.div` + width: 400px; + padding: 2rem; + background-color: rgba(255, 255, 255, 0.8); + border-radius: 20px; + box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.2); + text-align: center; + animation: ${floatAnimation} 4s ease-in-out infinite; +`; + +const Title = styled.h3` + font-size: 1.8rem; + font-weight: bold; + color: #333; + margin-bottom: 1rem; +`; + +const StyledInput = styled.input` + width: 100%; + padding: 0.75rem; + margin: 0.5rem 0; + border-radius: 8px; + border: 2px solid #007bff; + background-color: rgba(240, 240, 255, 0.3); + transition: border 0.3s ease-in-out; + + &:focus { + border-color: #0056b3; + } +`; + +const SubmitButton = styled.button` + width: 100%; + padding: 0.75rem; + margin-top: 1rem; + font-size: 1rem; + background-color: ${props => (props.disabled ? "#ccc" : "#007bff")}; + color: white; + border: none; + border-radius: 8px; + cursor: ${props => (props.disabled ? "not-allowed" : "pointer")}; + transition: background-color 0.3s ease, transform 0.3s ease; + + &:hover { + background-color: ${props => (!props.disabled ? "#0056b3" : "#ccc")}; + transform: ${props => (!props.disabled ? "translateY(-3px)" : "none")}; + } +`; + +const Divider = styled.div` + display: flex; + align-items: center; + margin: 1rem 0; + + &::before, + &::after { + content: ""; + flex: 1; + height: 1px; + background-color: #ccc; + } + + &::before { + margin-right: 0.5rem; + } + + &::after { + margin-left: 0.5rem; + } +`; const Register = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); - const [confirmPassword, setconfirmPassword] = useState(""); + const [confirmPassword, setConfirmPassword] = useState(""); const [isRegistering, setIsRegistering] = useState(false); const [errorMessage, setErrorMessage] = useState(""); @@ -18,100 +115,66 @@ const Register = () => { e.preventDefault(); if (!isRegistering) { setIsRegistering(true); - await doCreateUserWithEmailAndPassword(email, password); + try { + await doCreateUserWithEmailAndPassword(email, password); + } catch (err) { + setIsRegistering(false); + setErrorMessage("Registration failed"); + } } }; return ( - <> + {userLoggedIn && } -
-
-
-
-

- Create a New Account -

-
+ + Create a New Account +
+ + setEmail(e.target.value)} + /> + + setPassword(e.target.value)} + /> + + setConfirmPassword(e.target.value)} + /> + {errorMessage && ( + + {errorMessage} + + )} + + {isRegistering ? "Signing Up..." : "Sign Up"} + + +
+ Already have an account?{" "} + + Continue +
- -
- - { - setEmail(e.target.value); - }} - className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:indigo-600 shadow-sm rounded-lg transition duration-300" - /> -
- -
- - { - setPassword(e.target.value); - }} - className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg transition duration-300" - /> -
- -
- - { - setconfirmPassword(e.target.value); - }} - className="w-full mt-2 px-3 py-2 text-gray-500 bg-transparent outline-none border focus:border-indigo-600 shadow-sm rounded-lg transition duration-300" - /> -
- - {errorMessage && ( - {errorMessage} - )} - - -
- Already have an account? {" "} - - Continue - -
- -
-
- + + + ); }; From cd71cec2909d54a8874051eb2fc58946ec337393 Mon Sep 17 00:00:00 2001 From: Chemini Date: Tue, 1 Oct 2024 10:45:20 +0530 Subject: [PATCH 04/15] Navbar alignment updated --- frontend/src/components/navBar.jsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/navBar.jsx b/frontend/src/components/navBar.jsx index e768beb..66fa3a1 100644 --- a/frontend/src/components/navBar.jsx +++ b/frontend/src/components/navBar.jsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import styled from "styled-components"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faBars } from "@fortawesome/free-solid-svg-icons"; -import { Link, useNavigate } from "react-router-dom"; // Combine imports +import { Link, useNavigate } from "react-router-dom"; import { useAuth } from "../contexts/authContext"; import { doSignOut } from "../firebase/auth"; @@ -54,6 +54,7 @@ const NavLink = styled(Link)` text-decoration: none; position: relative; transition: color 0.3s ease; + align-self: center; /* Ensure vertical alignment */ &:hover { color: #333; @@ -89,7 +90,7 @@ const HamburgerIcon = styled(FontAwesomeIcon)` const Navbar = () => { const [isOpen, setIsOpen] = useState(false); - const [activeLink, setActiveLink] = useState("/home"); // Active route state + const [activeLink, setActiveLink] = useState("/home"); const toggleMenu = () => { setIsOpen(!isOpen); @@ -132,22 +133,22 @@ const Navbar = () => { Account { doSignOut().then(() => { navigate("/login"); }); }} - className="text-sm text-blue-600 underline" > Logout ) : ( <> - + Login - + Signup @@ -157,4 +158,4 @@ const Navbar = () => { ); }; -export default Navbar; +export default Navbar; \ No newline at end of file From 8ccef05acd933ff98623d7d67335322a9e5600e6 Mon Sep 17 00:00:00 2001 From: Chemini Date: Tue, 1 Oct 2024 10:57:30 +0530 Subject: [PATCH 05/15] account page updated with email and user name fetch --- frontend/src/pages/accountPage.jsx | 39 ++++++++++++++++++++---------- 1 file changed, 26 insertions(+), 13 deletions(-) diff --git a/frontend/src/pages/accountPage.jsx b/frontend/src/pages/accountPage.jsx index fdf4a41..91972c2 100644 --- a/frontend/src/pages/accountPage.jsx +++ b/frontend/src/pages/accountPage.jsx @@ -1,9 +1,10 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { useNavigate } from "react-router-dom"; import styled from "styled-components"; import Profile from "../components/profile"; import profilePicture from "../assets/profilePicture.jpg"; -import { FaCloudSun } from "react-icons/fa"; // Import a weather-related icon +import { FaCloudSun } from "react-icons/fa"; +import { useAuth } from "../contexts/authContext"; const AccountContainer = styled.div` max-width: 600px; @@ -51,16 +52,16 @@ const FeedbackButton = styled(Button)` display: flex; align-items: center; justify-content: center; - background-color: #fff9cc; /* Very pale yellow background */ - color: #ff9900; /* Orange text */ - border: 2px solid #ff9900; /* Dark orange border */ + background-color: #fff9cc; + color: #ff9900; + border: 2px solid #ff9900; position: relative; - font-family: "Courier New", Courier, monospace; /* Monospace for consistent font */ + font-family: "Courier New", Courier, monospace; &:hover { - background-color: #ffcc66; /* Slightly darker yellow on hover */ - color: #fff; /* White text on hover */ - border-color: #ff6600; /* Darker orange border on hover */ + background-color: #ffcc66; + color: #fff; + border-color: #ff6600; } svg { @@ -70,12 +71,20 @@ const FeedbackButton = styled(Button)` } &:hover svg { - transform: rotate(20deg); /* Rotate icon on hover */ + transform: rotate(20deg); } `; const AccountPage = () => { const navigate = useNavigate(); + const { currentUser } = useAuth(); + const [loading, setLoading] = useState(true); + + useEffect(() => { + if (currentUser !== null) { + setLoading(false); + } + }, [currentUser]); const handleUploadHourlyClick = () => { navigate("/upload-hourly"); @@ -100,15 +109,19 @@ const AccountPage = () => { ); }; + if (loading) { + return

Loading user data...

; + } + return (

- Name: John Doe + Name: {currentUser?.displayName || "John Doe"}

- Email: john.doe@example.com + Email: {currentUser?.email || "john.doe@example.com"}