Merge branch 'main' into Add/Animations

backend/routes/auth_routes.py

@@ -1,7 +1,7 @@
 from uuid import uuid4
 from jose import jwt,JWTError
 from fastapi import Form
-from fastapi.security import OAuth2PasswordBearer
+from fastapi.security import OAuth2PasswordBearer,OAuth2PasswordRequestForm
 from passlib.context import CryptContext
 from models import Patient
 from database import SessionLocal
@@ -37,7 +37,7 @@ def __init__(self,email:str=Form(...),password:str=Form(...)):
 
 
 bcrypt_context = CryptContext(schemes=['bcrypt'], deprecated='auto')
-oauth2_bearer = OAuth2PasswordBearer(tokenUrl='auth/token')
+oauth2_bearer = OAuth2PasswordBearer(tokenUrl='auth/login')
 
 
 # Models for validation
@@ -126,9 +126,9 @@ async def create_user(db: db_dependency,
 
 # Route to create access token for a patient
 @auth_router.post("/login", response_model=Token)
-async def login_for_access_token(form_data: Annotated[OAuth2EmailRequestForm, Depends()],
+async def login_for_access_token(form_data: Annotated[OAuth2PasswordRequestForm, Depends()],
  db: db_dependency):
- user = authenticate_patient(form_data.email, form_data.password, db)
+ user = authenticate_patient(form_data.username, form_data.password, db)
  if not user:
  raise HTTPException(status_code=status.HTTP_401_UNAUTHORIZED,
  detail='Could not validate user.')

backend/routes/patient_routes.py

@@ -1,9 +1,59 @@
-from fastapi import APIRouter
+from typing import Annotated
+from pydantic import BaseModel, Field
+from sqlalchemy.orm import Session
+from fastapi import APIRouter, Depends, HTTPException, Path
+from starlette import status
+from models import Patient
+from .auth_routes import get_current_patient
+from passlib.context import CryptContext
 from database import SessionLocal, engine
+
 patient_router = APIRouter(prefix="/patient", tags=["Patient"])
 
 session = SessionLocal(bind=engine)
 
-@patient_router.get("/")
-def get_patient():
- return {"message": "Get all patients details"}
+#User Verification Model
+class UserVerification(BaseModel):
+ password: str
+ new_password: str = Field(min_length=6)
+
+#Database dependency
+def get_db():
+ db = SessionLocal()
+ try:
+ yield db
+ finally:
+ db.close()
+
+
+db_dependency = Annotated[Session, Depends(get_db)]
+user_dependency = Annotated[dict, Depends(get_current_patient)]
+bcrypt_context = CryptContext(schemes=['bcrypt'], deprecated='auto')
+
+
+@patient_router.get("/get_patient", status_code=status.HTTP_200_OK)
+async def get_patient(user: user_dependency, db: db_dependency):
+ if user is None:
+ raise HTTPException(status_code=401, detail='Authentication Failed')
+ return db.query(Patient).filter(Patient.patient_id == user.get('patient_id')).first()
+
+
+@patient_router.put("/change_password", status_code=status.HTTP_204_NO_CONTENT)
+async def change_password(user: user_dependency, db: db_dependency, user_verification: UserVerification):
+ if user is None:
+ raise HTTPException(status_code=401, detail='Authentication Failed')
+ user_model = db.query(Patient).filter(
+ Patient.patient_id == user.get('patient_id')).first()
+
+ if not bcrypt_context.verify(user_verification.password, user_model.patient_password):
+ raise HTTPException(status_code=401, detail='Error on password change')
+ user_model.patient_password = bcrypt_context.hash(
+ user_verification.new_password)
+ db.add(user_model)
+ db.commit()
+
+@patient_router.get('/get_all_patients',status_code=status.HTTP_200_OK)
+async def get_all_patients(user:user_dependency,db:db_dependency):
+ if user is None:
+ raise HTTPException(status_code=401, detail='Authentication Failed')
+ return db.query(Patient).all()

src/Pages/BlogPage.jsx

@@ -83,7 +83,7 @@ const BlogPage = () => {
  <div class="container mx-auto px-4 py-8 w-full">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 w-[80%] mx-auto">
  {blogs.map((blog) => {
- return <Link to={`/blog/${blog.id}/`}>
+ return <Link className='blog-card' to={`/blog/${blog.id}/`}>
  <div class="bg-white shadow-md rounded-lg overflow-hidden">
  <img className="w-full h-52 object-cover" src="https://imgs.search.brave.com/q3MJLK_ILOJjNNpDQfAoodURIpLLbhskPAuceu6vI6c/rs:fit:860:0:0/g:ce/aHR0cHM6Ly9tZWRp/YS5nZXR0eWltYWdl/cy5jb20vaWQvMTM0/OTE4MzAxMy9waG90/by9hZnJpY2FuLW1h/bGUtam91cm5hbGlz/dC1wcmVwYXJpbmct/cXVlc3Rpb25zLWZv/ci1wcmVzcy1jb25m/ZXJlbmNlLmpwZz9z/PTYxMng2MTImdz0w/Jms9MjAmYz1xaWRi/U3pfNmhwa2tyNmpS/QjUtMWhTTUsxSjZL/RUM2YXZJVkJsYXht/WmdvPQ" alt="Blog Image" />
  <div class="p-4 flex flex-col gap-1 blog-text">

src/Pages/ContactPage.jsx

@@ -75,7 +75,7 @@ function ContactPage() {
  </div>
  <button
  type="submit"
- className="py-3 px-5 text-sm font-medium text-center text-white rounded-lg sm:w-fit bg-green-600 focus:ring-4 focus:outline-none focus:ring-primary-300"
+ className="py-3 px-5 hover:scale-105 hover:shadow-lg hover:shadow-green-300 transition-all text-sm font-medium text-center text-white rounded-lg sm:w-fit bg-green-600 focus:ring-4 focus:outline-none focus:ring-primary-300"
  >
  Send message
  </button>

src/components/Footer/Footer.jsx

@@ -41,12 +41,12 @@ function Footer() {
  </h2>
  <ul className="text-gray-500 font-medium">
  <li className="mb-4">
- <a href="https://www.linkedin.com/company/nactore-organization/about/" className="hover:underline">
+ <a href="https://www.linkedin.com/company/nactore-organization/about/" className="hover:underline" target="_blank">
  Linkedin
  </a>
  </li>
  <li className="mb-4">
- <a href="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/Nactore-Org/Nacto-Care" className="hover:underline">
+ <a href="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/Nactore-Org/Nacto-Care" className="hover:underline" target="_blank">
  GitHub
  </a>
  </li>
@@ -91,7 +91,7 @@ function Footer() {
  </div>
  </div>
  <div className="px-4 py-4 flex items-center justify-center">
- © 2024 Nactore Organization, Building for democracy with care
+ © {new Date().getFullYear().toString()} Nactore Organization, Building for democracy with care
  </div>
  </div>
  </footer>

src/components/Form/Form.jsx

@@ -3,21 +3,21 @@ import React from "react";
 function Form() {
  return (
  <>
- <div className="bg-white rounded-xl w-[70rem] p-6 drop-shadow-xl outline-1 outline-green-300 outline">
+ <div className="bg-white dark:bg-[#333333] rounded-xl w-[70rem] p-6 drop-shadow-xl outline-1 outline-green-300 outline">
  <form class="w-full m-auto">
  <div className="mb-6 px-3 font-bold text-2xl">
  <h2>Find your Home Care Taker</h2>
  </div>
  <div class="flex flex-1 flex-wrap mb-6">
  <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
  <label
- class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+ class="block uppercase tracking-wide text-gray-700 dark:text-white text text-xs font-bold mb-2"
  for="grid-first-name"
  >
  Select Medical Need
  </label>
  <select
- class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
+ class="appearance-none block w-full bg-gray-200 dark:text-white dark:bg-gray-700 text-gray-700 border dark:border-[#333333] rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
  id="grid-first-name"
  type="text"
  placeholder="Jane"
@@ -36,13 +36,13 @@ function Form() {
  </div>
  <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
  <label
- class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+ class="block uppercase tracking-wide dark:text-white text-gray-700 text-xs font-bold mb-2"
  for="grid-first-name"
  >
  Select your city
  </label>
  <select
- class="appearance-none block w-full bg-gray-200 text-gray-700 border rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
+ class="appearance-none block w-full bg-gray-200 dark:text-white dark:bg-gray-700 text-gray-700 border dark:border-[#333333] rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
  id="grid-first-name"
  type="text"
  placeholder="Jane"
@@ -59,27 +59,27 @@ function Form() {
  <div class="flex flex-1 flex-wrap mb-2">
  <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
  <label
- class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+ class="block uppercase tracking-wide text-gray-700 dark:text-white text-xs font-bold mb-2"
  for="grid-city"
  >
  Choose Date
  </label>
  <input
- class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+ class="block appearance-none w-full bg-gray-200 dark:text-white dark:bg-gray-700 border dark:border-[#333333] border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
  id="grid-state"
  type="date"
  />
  </div>
  <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
  <label
- class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+ class="block uppercase tracking-wide text-gray-700 dark:text-white text-xs font-bold mb-2"
  for="grid-state"
  >
  Choose Time
  </label>
  <div class="relative">
  <input
- class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+ class="block appearance-none w-full bg-gray-200 dark:text-white dark:bg-gray-700 border dark:border-[#333333] border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
  id="grid-state"
  type="time"
  />

src/components/Header/Header.jsx

@@ -1,5 +1,5 @@
 import React, { useContext, useEffect, useState } from "react";
-import { Link, NavLink } from "react-router-dom";
+import { Link, NavLink, useLocation } from "react-router-dom";
 import MenuOverlay from "./MenuOverlay";
 import { FaXmark } from "react-icons/fa6";
 import "../../index.css";
@@ -9,68 +9,70 @@ const navLinks = [
  {
  title: "Home",
  to: "/",
- icon: "ri-home-fill"// Added icon property
+ icon: "ri-home-fill", // Added icon property
  },
  {
  title: "Careers",
  to: "/careers",
- icon: "ri-focus-2-fill"
+ icon: "ri-focus-2-fill",
  },
  {
  title: "Blog",
  to: "/blog",
- icon: "ri-newspaper-fill"
+ icon: "ri-newspaper-fill",
  },
  {
  title: "Contact",
  to: "/contact",
- icon: "ri-customer-service-2-fill"
+ icon: "ri-customer-service-2-fill",
  },
  {
  title: "About",
  to: "/about",
- icon: "ri-nurse-fill"
+ icon: "ri-nurse-fill",
  },
 ];
 
 function Header() {
  const [isNavBarOpen, setIsNavBarOpen] = useState(false);
  const { theme, toggleTheme } = useContext(ThemeContext);
  const [themes, setThemes] = useState("light");
+ const location = useLocation();
+
+ useEffect(() => {
+ window.scrollTo(0, 0);
+ }, [location]);
 
  const handleThemeChange = () => {
  toggleTheme();
  setThemes((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
  };
 
- const toggleBodyScroll = ()=>{
+ const toggleBodyScroll = () => {
  const styles = {
- position:"fixed",
- maxWidth:"100vw",
- overflow: "hidden"
- }
- 
- if(document.body.style.position===""){
- for(const i in styles){
- document.body.style[i] = styles[i]
+ position: "fixed",
+ maxWidth: "100vw",
+ overflow: "hidden",
+ };
+
+ if (document.body.style.position === "") {
+ for (const i in styles) {
+ document.body.style[i] = styles[i];
  }
- return
+ return;
  }
 
- for(const i in styles){
- document.body.style[i] = ""
+ for (const i in styles) {
+ document.body.style[i] = "";
  }
- }
-
+ };
 
  return (
  <div className="app-header">
  <div className="flex justify-between md:justify-evenly sticky top-0 z-[999] backdrop-blur-sm items-center py-[1.5rem] px-4 md:px-10 ">
  <div className="hover:scale-105 duration-100 ease-in-out">
  <Link to="/">
-
  <img width={70} src="\assets\icon.webp" alt="Logo" />
-
  </Link>
  </div>
  <div className="md:mx-10 lg:mx-4">

src/components/Header/MenuOverlay.jsx

@@ -1,4 +1,4 @@
-import React from "react"; // Importing React to use JSX syntax
+import React, { useState } from "react"; // Importing React to use JSX syntax
 import PropTypes from "prop-types"; // Importing PropTypes for type-checking
 import { Link, NavLink } from "react-router-dom"; // Importing Link and NavLink for navigation
 
@@ -7,11 +7,12 @@ const MenuOverlay = ({ links, setIsNavBarOpen, theme:[theme, handleThemeChange],
  const handleClick = () => {
  toggleBodyScroll();
  setIsNavBarOpen(false);
+ setClosingAnimation(true)
  };
 
  return (
  // ul element to contain the menu links
- <ul className="absolute md:hidden w-screen items-center text-center z-20 app-header h-[calc(100vh-7.375rem)] flex flex-col justify-evenly">
+ <ul className="absolute md:hidden w-screen items-center text-center z-20 app-header open-animation flex flex-col justify-evenly">
  {/* Mapping over the links array to create each link item */}
  {links.map((link, index) => (
  <li key={index}>

src/index.css

@@ -53,6 +53,35 @@ body.dark .blog {
  color: white;
 }
 
+.close-animation{
+ overflow: hidden;
+ animation: close both 0.8s ;
+ }
+
+ @keyframes close {
+ from{
+ height:calc(100vh - 7.375rem)
+
+ }to{
+ height: 0px;
+ }
+
+ }
+
+.open-animation{
+overflow: hidden;
+animation: open both 0.8s ;
+}
+
+@keyframes open {
+ from{
+ height: 0px;
+
+ }to{
+ height:calc(100vh - 7.375rem)
+ }
+
+}
 body.dark .contact {
  background-color: black;
  color: white;
@@ -127,6 +156,7 @@ body.dark .privacy {
  box-shadow: 0 0 0 4px rgba(66, 153, 225, 0.5); /* Focus ring */
 }
 
+
 @keyframes float {
  0% {
  transform: translateY(0);
@@ -143,4 +173,12 @@ body.dark .privacy {
 
 .float {
  animation: float 2s ease-in-out infinite;
-}
+}
+
+.blog-card:hover{
+ scale: 1.05;
+ transition: scale ease-in-out 0.3s;
+ box-shadow: 0px 0px 15px white;
+ border-radius: 10px;
+}
+