Skip to content

Commit

Permalink
Merge pull request #118 from suvarnakale/release-3.1.0.0
Browse files Browse the repository at this point in the history 
Issue #110 bug: no role assign error page, signup redirection- fixed
  • Loading branch information
@Sowmya-Raghuram
Sowmya-Raghuram authored Jan 24, 2025
2 parents 22f55ea + b1f6a80 commit 9a04f23
Show file tree
Hide file tree
Showing 6 changed files with 339 additions and 247 deletions.
154 changes: 83 additions & 71 deletions src/main/frontend/src/components/Header/Header.js
View file
Original file line number Diff line number Diff line change
@@ -1,86 +1,98 @@
// Header.js
import './Header.css'
import { auth } from '../../firebase.js'
import Avatar from '@mui/material/Avatar';
import Badge from '@mui/material/Badge';
import NotificationsIcon from '@mui/icons-material/Notifications';
import SearchIcon from '@mui/icons-material/Search';
import "./Header.css";
import { auth } from "../../firebase.js";
import Avatar from "@mui/material/Avatar";
import Badge from "@mui/material/Badge";
import NotificationsIcon from "@mui/icons-material/Notifications";
import SearchIcon from "@mui/icons-material/Search";
import { useState } from "react";
import MenuIcon from '@mui/icons-material/Menu';
import SBLogo from '../../assets/sunbirdlogo.png';
import randomColor from 'randomcolor'
import { useSelector, useDispatch } from 'react-redux'
import { fetchUserByEmail } from '../../state/userSlice'
import { useHistory } from 'react-router-dom';
import MenuIcon from "@mui/icons-material/Menu";
import SBLogo from "../../assets/sunbirdlogo.png";
import randomColor from "randomcolor";
import { useSelector, useDispatch } from "react-redux";
import { fetchUserByEmail } from "../../state/userSlice";
import { useHistory } from "react-router-dom";

function Header({ toggleSideNav }) { // Receive toggleSideNav function as prop
const [open,setOpen] = useState(false);
const [avatarColor, setAvatarColor] = useState(randomColor())
function Header({ toggleSideNav, role }) {
// Receive toggleSideNav function as prop
const [open, setOpen] = useState(false);
const [avatarColor, setAvatarColor] = useState(randomColor());
const currentUser = auth.currentUser;
const dispatch = useDispatch()
const userData = useSelector((state)=> state.user.data)
const dispatch = useDispatch();
const userData = useSelector((state) => state.user.data);
const history = useHistory();
const gridClass = role ? "col-lg-10" : "col-lg-12";

const handleLogout = () => {
auth.signOut()
dispatch(fetchUserByEmail(''))
console.log(userData)
window.location.href = "/";
}
auth.signOut();
dispatch(fetchUserByEmail(""));
console.log(userData);
window.location.href = "/";
};
const userRole = userData.role;

return (
<div className="head row">

{/* icons near profile button */}
<div className="rightHead col-12 col-sm-6 order-sm-2 justify-content-between justify-content-sm-end" >
<div className="wrapSideMenu d-sm-none">
<div className="menuIcon" onClick={toggleSideNav}>
<i><MenuIcon/></i>
</div>
<img src={SBLogo} alt="SunBirdLogo" height="35px" />
</div>
<div className="wrapProfile">
<div className="verticalLine"></div>
<div className="notification">
<Badge variant="dot" color="secondary">
<NotificationsIcon color="action" style={{height:'24px'}} />
</Badge>
</div>
<button className="btnProf" onClick={() => setOpen(!open)}>
<div className="profIcon">
<Avatar style={{height:'30px',width:'30px',fontSize:'16px',backgroundColor:avatarColor}}>
{currentUser.email.slice(0,1).toUpperCase()}
</Avatar>
</div>
</button>
</div>
return (
<div className="head row">
{/* icons near profile button */}
<div className="rightHead col-12 col-sm-6 order-sm-2 justify-content-between justify-content-sm-end">
<div className="wrapSideMenu d-sm-none">
<div className="menuIcon" onClick={toggleSideNav}>
<i>
<MenuIcon />
</i>
</div>

{/* nCoord or vCoord depending on role of user loggedin */}
<div className="leftHead col-12 col-sm-6 order-sm-1">
{ userRole && userRole.includes('nCoordinator') && <div className="headname">
Need Coordinator Management
</div>}
{ userRole && userRole.includes('vCoordinator') && <div className="headname">
Volunteer Coordinator Management
</div>}
<img src={SBLogo} alt="SunBirdLogo" height="35px" />
</div>
<div className="wrapProfile">
<div className="verticalLine"></div>
<div className="notification">
<Badge variant="dot" color="secondary">
<NotificationsIcon color="action" style={{ height: "24px" }} />
</Badge>
</div>
<button className="btnProf" onClick={() => setOpen(!open)}>
<div className="profIcon">
<Avatar
style={{
height: "30px",
width: "30px",
fontSize: "16px",
backgroundColor: avatarColor,
}}
>
{currentUser.email.slice(0, 1).toUpperCase()}
</Avatar>
</div>
</button>
</div>
</div>

{/* nCoord or vCoord depending on role of user loggedin */}
<div className="leftHead col-12 col-sm-6 order-sm-1">
{userRole && userRole.includes("nCoordinator") && (
<div className="headname">Need Coordinator Management</div>
)}
{userRole && userRole.includes("vCoordinator") && (
<div className="headname">Volunteer Coordinator Management</div>
)}
</div>

{/* onclicking PROFILE */}
{open &&
( <div className="wrapDropDownProfile col-sm-10">
<div className="dropDownProfile">
<div className="profileInfo">
<div className='userName'>{currentUser.displayName}</div>
<div className='userTag'>{currentUser.email}</div>
</div>
<button className="btnLogout" onClick={handleLogout}>Logout</button>
</div>
</div>)
}
{/* onclicking PROFILE */}
{open && (
<div className={`wrapDropDownProfile col-sm-10 ${gridClass}`}>
<div className="dropDownProfile">
<div className="profileInfo">
<div className="userName">{currentUser.displayName}</div>
<div className="userTag">{currentUser.email}</div>
</div>
<button className="btnLogout" onClick={handleLogout}>
Logout
</button>
</div>
</div>
)
)}
</div>
);
}

export default Header
export default Header;
Binary file added src/main/frontend/src/components/NoRoleAssigned/Illustration_Error.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 33 additions & 0 deletions src/main/frontend/src/components/NoRoleAssigned/NoRoleAssigned.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
.errorPage {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.errorComment {
font-family: Inter;
font-size: 16px;
font-weight: 300;
line-height: 24px;
letter-spacing: 0px;
text-align: center;
color: #ba1e12;
margin-top: 10px;
}
.infoMsg {
display: flex;
flex-direction: column;
align-items: center;
padding: 2% 3%;
gap: 20px;
}

.textInfo {
font-size: 0.9rem;
color: rgba(39, 105, 135, 0.9);
line-height: 1.6;
text-align: center !important;
@media (max-width: 600px) {
font-size: 0.75rem;
}
}
42 changes: 42 additions & 0 deletions src/main/frontend/src/components/NoRoleAssigned/NoRoleAssigned.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from "react";
import formFailureImg from "./Illustration_Error.jpg";
import "./NoRoleAssigned.css";

const NoRoleAssigned = () => {
return (
<div className="errorPage">
<div className="errorImg">
<img
className="errorLogo"
src={formFailureImg}
alt="errorLogo"
width="40%"
/>
<div className="errorComment">
There is no role associated with your email ID yet.
</div>
</div>
<div className="infoMsg">
<div className="textInfo">
If you are a volunteer, please register
<span>
{" "}
<a href="/vregistration">here</a>
</span>
</div>
<div className="textInfo">
If you are a coordinator, kindly contact the admin by sending an email
to
<span>
{" "}
<a href="mailto:[email protected]">
[email protected]
</a>
</span>
</div>
</div>
</div>
);
};

export default NoRoleAssigned;
Loading

0 comments on commit 9a04f23

Please sign in to comment.