Feat/profile

src/App.css

@@ -1,13 +1,13 @@
-button:not(.toggle-btn):focus-visible {
+button:not(.toggle-btn):not(.delete-btn):focus-visible {
   outline: solid 4px var(--color-persianblue);
   outline-offset: 8px;
 }
-button:not(.toggle-btn):hover {
+button:not(.toggle-btn):not(.delete-btn):hover {
   background-color: var(--color-zinc);
   color: white;
   cursor: pointer;
 }
-button:not(.toggle-btn):active {
+button:not(.toggle-btn):not(.delete-btn):active {
   background-color: var(--color-persianblue);
   color: white;
 }
@@ -17,4 +17,4 @@ button.active {
 }
 button.active:hover {
   background-color: var(--color-persianblue);
-}
+}

src/components/Baseinput.jsx

@@ -33,7 +33,7 @@ function Baseinput({
            block w-full h-11 px-4 py-2
           bg-white text-black
            ${inputClassName}
-          disabled:bg-gray-100 disabled:text-gray-500`}
+          disabled:bg-white disabled:text-eerie`}
         aria-invalid={ariaInvalid}
         aria-describedby={ariaDescribedBy}
         disabled={disabled}

src/components/Button.jsx

@@ -2,53 +2,68 @@ import { useNavigate } from 'react-router-dom';
 import { tv } from 'tailwind-variants/lite';
 
 const buttonVariants = tv({
-    // base styles for all buttons
-    base: 'font-poppins flex items-center justify-center drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
-    // all button variants
-    variants: {
-        size: {
-            sm: 'h-12 w-[162px] text-base font-semibold rounded-lg lg:h-14 lg:w-[220px] lg:text-xl',
-            md: 'h-11 w-[218px] text-base font-semibold rounded-lg lg:h-14 lg:w-[286px] lg:text-xl xl:h-16 xl:w-[327px] xl:text-2xl',
-            lg: 'h-11 w-[345px] text-base font-medium rounded-md lg:w-[501px]',
-            circ: 'h-11 w-11 text-2xl rounded-full'
-        },
-        color: {
-            primary: 'bg-eerie text-white border-1 border-eerie',
-            secondary: 'bg-white text-eerie border-1 border-eerie',
-            gradient: 'bg-gradient-to-b from-electricgreen to-persianblue text-white'
-        }
+  // base styles for all buttons
+  base: 'font-poppins flex items-center justify-center drop-shadow-[0_4px_4px_rgba(0,0,0,0.25)]',
+  // all button variants
+  variants: {
+    size: {
+      sm: 'h-12 w-[162px] text-base font-semibold rounded-lg lg:h-14 lg:w-[220px] lg:text-xl',
+      md: 'h-11 w-[218px] text-base font-semibold rounded-lg lg:h-14 lg:w-[286px] lg:text-xl xl:h-16 xl:w-[327px] xl:text-2xl',
+      lg: 'h-11 w-[345px] text-base font-medium rounded-md lg:w-[501px]',
+      circ: 'h-11 w-11 text-2xl rounded-full',
     },
-    // default button styles if no specified props
-    defaultVariants: {
-        size: 'sm',
-        color: 'primary'
+    color: {
+      primary: 'bg-eerie text-white border-1 border-eerie',
+      secondary: 'bg-white text-eerie border-1 border-eerie',
+      gradient: 'bg-gradient-to-b from-electricgreen to-persianblue text-white',
     },
-    // conditional style cases for specific prop combinations
-    compoundVariants: [
-        // remove drop shadow and lower font weight for user selection button
-        {
-            color: 'secondary',
-            size: 'md',
-            className: 'drop-shadow-none !font-normal'
-        }
-    ]
+  },
+  // default button styles if no specified props
+  defaultVariants: {
+    size: 'sm',
+    color: 'primary',
+  },
+  // conditional style cases for specific prop combinations
+  compoundVariants: [
+    // remove drop shadow and lower font weight for user selection button
+    {
+      color: 'secondary',
+      size: 'md',
+      className: 'drop-shadow-none !font-normal',
+    },
+  ],
 });
 
-export default function Button({ size, color, label, onClick, isActive, to, ...props }) {
-    let navigate = useNavigate();
+export default function Button({
+  size,
+  color,
+  label,
+  onClick,
+  isActive,
+  to,
+  ...props
+}) {
+  let navigate = useNavigate();
 
-    function handleClick(){
-        if (to){
-            navigate(to);
-        } else {
-            onClick();
-        }
+  function handleClick() {
+    if (to) {
+      navigate(to);
+    } else {
+      onClick();
     }
+  }
 
-    return (
-        <button onClick={handleClick} className={isActive ? `${buttonVariants({ size, color })} active` : buttonVariants({ size, color })}
-        {...props}
-        >{label}
-        </button>
-    );
-}
+  return (
+    <button
+      onClick={handleClick}
+      className={
+        isActive
+          ? `${buttonVariants({ size, color })} active`
+          : buttonVariants({ size, color })
+      }
+      {...props}
+    >
+      {label}
+    </button>
+  );
+}

src/components/Navbar.jsx

@@ -9,6 +9,10 @@ import { HiMenu } from 'react-icons/hi';
 //components
 import MobileMenu from './MobileMenu';
 
+//firebase
+import { auth } from '../firebase';
+import { signOut } from 'firebase/auth';
+
 function Navbar() {
   const [isMenuOpen, setIsMenuOpen] = useState(false); // mobile menu state
   const [isAuthenticated, setIsAuthenticated] = useState(false); // user authentication state
@@ -27,10 +31,15 @@ function Navbar() {
 
   const toggleMenu = () => setIsMenuOpen(!isMenuOpen);
 
-  const handleLogout = () => {
-    localStorage.removeItem('authToken');
-    setIsAuthenticated(false);
-    navigate('/logout');
+  const handleLogout = async () => {
+    try {
+      await signOut(auth);
+      localStorage.removeItem('authToken');
+      setIsAuthenticated(false);
+      navigate('/logout');
+    } catch (error) {
+      console.error('Logout failed:', error);
+    }
   };
 
   // navbar for NON-authenticated user
@@ -123,15 +132,15 @@ function Navbar() {
                   Detox Challenge
                 </Link>
               </li>
-               <li>
+              <li>
                 <Link
                   to="community"
                   className="text-stone-900 text-base font-normal font-playfair hover:font-bold focus:outline-none focus-visible:ring-2 focus-visible:ring-persianblue focus-visible:p-2 rounded-[5px]"
                 >
                   Community Forum
                 </Link>
               </li>
-              
+
               <li>
                 <Link
                   to="/profile"

src/firebase.js

@@ -1,6 +1,7 @@
 // Import the functions you need from the SDKs you need
-import { initializeApp } from "firebase/app";
-import { getFirestore } from "firebase/firestore";
+import { initializeApp } from 'firebase/app';
+import { getFirestore } from 'firebase/firestore';
+import { getAuth } from 'firebase/auth';
 
 // TODO: Add SDKs for Firebase products that you want to use
 // https://firebase.google.com/docs/web/setup#available-libraries
@@ -12,12 +13,12 @@ const firebaseConfig = {
   projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
   storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
   messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
-  appId: import.meta.env.VITE_FIREBASE_APP_ID
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
 };
 
 // Initialize Firebase
 const app = initializeApp(firebaseConfig);
-
+const auth = getAuth(app);
 // Initialize Cloud Firestore and get a reference to the service
 const db = getFirestore(app);
-export { db };
+export { db, auth };

src/main.jsx

@@ -13,6 +13,7 @@ import Signup from './pages/Signup';
 import Journal from './pages/journal';
 import Logout from './pages/Logout';
 import Challenges from './pages/Challenges';
+import Profile from './pages/Profile';
 import App from './App';
 
 const router = createBrowserRouter([
@@ -29,9 +30,10 @@ const router = createBrowserRouter([
       { path: 'achievements', element: <Achievements /> },
       { path: 'journal', element: <Journal /> },
       { path: 'logout', element: <Logout /> },
+      { path: 'profile', element: <Profile /> },
       { path: 'error', element: <Error /> },
       { path: 'challenges', element: <Challenges /> },
-     ],
+    ],
   },
   {
     path: '*',
@@ -42,4 +44,4 @@ createRoot(document.getElementById('root')).render(
   <StrictMode>
     <RouterProvider router={router} />
   </StrictMode>
-);
+);

src/pages/Login.jsx

@@ -3,27 +3,49 @@ import Passwordinput from '../components/PasswordInput';
 import Button from '../components/Button';
 import { useState } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
+import { signInWithEmailAndPassword } from 'firebase/auth';
+import { auth } from '../firebase';
 
 function Login() {
   const navigate = useNavigate();
   const [formValues, setFormValues] = useState({});
   const [isValidEmail, setisValidEmail] = useState(false);
   const [isValidPassword, setisValidPassword] = useState(false);
   const [formSubmitMessage, setFormSubmitMessage] = useState('');
+  const buttonStyles =
+    'h-11 w-[345px] text-base font-medium rounded-md lg:w-[501px] bg-eerie text-white border-1 border-eerie';
   const setFormValue = (fieldName, value) => {
     setFormValues((prevValue) => ({ ...prevValue, [fieldName]: value }));
   };
-  const handleSubmit = (e) => {
+  const handleSubmit = async (e) => {
     e.preventDefault();
     if (!isValidEmail || !isValidPassword) {
       setFormSubmitMessage('Fill form properly');
     } else {
-      localStorage.setItem('authToken', 'my-auth-token');
+      //localStorage.setItem('authToken', 'my-auth-token');
       const loginFormData = new FormData();
       for (const key in formValues) {
         loginFormData.append(key, formValues[key]);
       }
-      navigate('/dashboard');
+      try {
+        const { user } = await signInWithEmailAndPassword(
+          auth,
+          formValues.loginEmail,
+          formValues.loginPassword
+        );
+        console.log('Logged in user is: ', user.uid);
+        localStorage.setItem('authToken', user.uid);
+        navigate('/dashboard');
+      } catch (error) {
+        if (error.code === 'auth/user-not-found') {
+          setFormSubmitMessage('No user found with this email');
+        } else if (error.code === 'auth/wrong-password') {
+          setFormSubmitMessage('No usr found with this email');
+        } else {
+          setFormSubmitMessage('Login failed. Try again.');
+        }
+      }
+
       console.log('Login Submission Data:', loginFormData);
     }
   };
@@ -84,7 +106,9 @@ function Login() {
           </p>
         )}
         <div className="flex justify-center">
-          <Button size="lg" color="primary" label="Sign in" />
+          <button type="submit" className={buttonStyles}>
+            Sign in
+          </button>
         </div>
         <div className="mt-[12px]">
           New user?{' '}
@@ -100,4 +124,4 @@ function Login() {
   );
 }
 
-export default Login;
+export default Login;