Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…h-web into whybitUI
  • Loading branch information
DhaneshShetty committed Jul 6, 2021
2 parents 85f77e7 + 2c888bf commit 9176459
Show file tree
Hide file tree
Showing 8 changed files with 351 additions and 148 deletions.
2 changes: 2 additions & 0 deletions public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,8 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/solid.js" integrity="sha384-tzzSw1/Vo+0N5UhStP3bvwWPq+uvzCMfrN1fEFe+xBmv1C/AtVX5K0uZtmcHitFZ" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.13/js/fontawesome.js" integrity="sha384-6OIrr52G08NpOFSZdxxz1xdNSndlD4vdcf/q2myIUVO0VsqaGHJsB0RaBE01VTOY" crossorigin="anonymous"></script>
<title>Bridge In Tech</title>
</head>
<body>
Expand Down
69 changes: 53 additions & 16 deletions src/Nav.css
Original file line number Diff line number Diff line change
@@ -1,20 +1,57 @@
.Nav_container{
display: flex;
width: 100%;
height: auto;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
padding: 10px;
border-bottom: 2px solid #54BCEB;
@font-face {
font-family: MetaProBold;
src: url("./assets/fonts/MetaPro-Bold.otf") format("opentype");
}

.Nav_box{
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
@font-face {
font-family: MetaProRegular;
src: url("./assets/fonts/MetaPro-Normal.otf") format("opentype");
}
.navbar-expand-lg .navbar-nav .dropdown-menu {
position: static;
.topnav{
display: flex;
height:auto;
width: 100%;
align-items: center;
box-sizing: border-box;
padding: 0px 20px;


}
li {
font-family: MetaProBold;
list-style: none;
align-items: center;
color: #000000;
font-style: normal;
font-weight: 500;
font-size: 16px;
line-height: 21px;
padding: 20px 26px;
text-align: center;
white-space: nowrap;
}
.li{
text-decoration: none;
}
.li_signIn{
color:#4892C7;
}

li:hover {
text-decoration: underline blue;
}

.active {
width: 170px;
height: 72px;
background: #4892C7;
margin:0;
color: white;
}
.ml-auto{
padding: 0px 0px;
}
.button-right{
text-align: right;
}

174 changes: 52 additions & 122 deletions src/Navigation.js
Original file line number Diff line number Diff line change
@@ -1,131 +1,61 @@
import React, { useContext } from "react";
import { Navbar, Nav, Card, Accordion, Dropdown } from "react-bootstrap";
import React, {useContext} from "react";
import { Navbar, Nav} from "react-bootstrap";
import { Link } from "react-router-dom"
import { AuthContext } from "./AuthContext";
import DropdownMenu from "react-bootstrap/DropdownMenu";
import Logo from "./assets/images/AnitaBLogo.png"
import './Nav.css'
import { AuthContext } from "./AuthContext";


export default function Navigation() {
const { user, isAuth, login, logout } = useContext(AuthContext);

const {isAuth, login, logout } = useContext(AuthContext)
return (
<div className="Nav_container">
<div>
<Nav.Link as={Link} to='/'>
<img
style={{margin:'10px 40px'}}
className="d-inline-block align-top"
src={Logo}
width="150"
height="50"
alt="Logo"
/>
</Nav.Link>
</div>
<div className="Nav_box">
<h2 style={{color:'#F89728'}}>Bridge In Tech</h2>
<Navbar className="mr-auto" expand="lg" style={{borderTop:' 2px solid #54BCEB'}}>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" id="mainNav">
<Nav.Item>
<Accordion style={{backgroundColor:'white'}}>
<Card style={{backgroundColor:'white'}}>
<Card.Header>
<Accordion.Toggle as={Link} to="/" eventKey="0">Home</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Nav>
<Nav.Link as={Link} to="/about">About</Nav.Link>
<Nav.Link as={Link} to="/benefit">Benefit</Nav.Link>
<Nav.Link href="https://anitab.org/contact/" target = "_blank" rel = "noopener noreferrer">Contact</Nav.Link>
</Nav>
</Accordion.Collapse>
</Card>
</Accordion>
</Nav.Item>
<Nav.Item>
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/members" eventKey="0">Members</Accordion.Toggle>
</Card.Header>
</Card>
</Accordion>
</Nav.Item>
<Nav.Item>
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/organizations" eventKey="0">Organizations</Accordion.Toggle>
</Card.Header>
</Card>
</Accordion>
</Nav.Item>
<Nav.Item>
<Accordion>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/portfolio" eventKey="0">My Space</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Nav>
<Nav.Link as={Link} to="/portfolio">Portfolio</Nav.Link>
<Dropdown>
<Dropdown.Toggle variant="light">Profile</Dropdown.Toggle>
<DropdownMenu>
<Nav.Link as={Link} to="/personal-details" eventKey="0">Personal Details</Nav.Link>
<Nav.Link as={Link} to="/additional-info" eventKey="0">Additional Info</Nav.Link>
<Nav.Link as={Link} to="/personal-background" eventKey="0">Personal Background</Nav.Link>
</DropdownMenu>
</Dropdown>
<Nav.Link as={Link} to="/request-history">Request History</Nav.Link>
<Nav.Link as={Link} to="/organization-profile" eventKey="0">My Organization</Nav.Link>
</Nav>
</Accordion.Collapse>
</Card>
</Accordion>
</Nav.Item>
{!isAuth ?
<>
<Nav.Item>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/register" eventKey="0">Register</Accordion.Toggle>
</Card.Header>
</Card>
</Nav.Item>
<Nav.Item>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/login" eventKey="0" onClick={login}>Login</Accordion.Toggle>
</Card.Header>
</Card>
</Nav.Item>
</>
:
<Nav.Item>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/" eventKey="0" onClick={logout}>Logout</Accordion.Toggle>
</Card.Header>
</Card>
</Nav.Item>
}
{isAuth && <Nav.Item>
<Card>
<Card.Header>
<Accordion.Toggle as={Link} to="/" eventKey="0">Welcome back, {user}!</Accordion.Toggle>
</Card.Header>
</Card>
</Nav.Item>}
<div className="topnav">
<Navbar collapseOnSelect className="ml-auto" expand="lg">
<div className="button-right">
<Navbar.Toggle aria-controls='responsive-navbar-nav' />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="ml-auto">

<Link to="/about" className="li">
<li >About Us</li>
</Link>
<Link to="/" className="li">
<li >Services</li>
</Link>
<Link to="/" className="li">
<li >Membership</li>
</Link>
<Link to="/faq" className="li">
<li>FAQs</li>
</Link>
<Link to="/aboutUs" className="li">
<li>Blogs</li>
</Link>
<Link to="/getInTouch" className="li">
<li>Contact Us</li>
</Link>
{!isAuth ?
<>
<Link to="/login" className="li" onClick={login}>
<li className="li_signIn">Sign In</li>
</Link>
<Link as={Link} to="/register" className="li">
<li className="active">Sign Up</li>
</Link>
</>
:
<Link to="/" className="li" onClick={logout}>
<li className="li_signIn">Sign Out</li>
</Link>}


</Nav>
</Navbar.Collapse>
</Navbar>
</div>
</div>
</Navbar.Collapse>
</div>
</Navbar>

</div>


);

)
}
14 changes: 14 additions & 0 deletions src/Routes.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,22 +21,36 @@ import ProtectedRoute from "./ProtectedRoute";
import AuthProvider from "./AuthContext";
import Programs from "./organizations/Programs";
import About from "./home/About";
import ReadAboutUs from "./home/ReadAboutUs"
import GetInTouch from "./home/GetInTouch"
import Benefit from "./home/Benefit"
import FAQ from "./home/FAQ"
import Nav from "./Navigation"
import Sidebar from "./sidebar/Sidebar"


export default function Routes() {
return (
<Router basename="/bridge-in-tech-web">
<AuthProvider>
<Sidebar/>
<Nav/>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route exact path="/faq">
<FAQ />
</Route>
<Route exact path="/getInTouch">
<GetInTouch />
</Route>
<Route exact path="/about">
<About />
</Route>
<Route exact path="/aboutUs">
<ReadAboutUs />
</Route>
<Route exact path="/benefit">
<Benefit />
</Route>
Expand Down
Binary file added src/assets/fonts/MetaPro-Bold.otf
Binary file not shown.
30 changes: 20 additions & 10 deletions src/register/Register.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export default function Register() {
const [confirmPassword, setConfirmPassword] = useState("");
const [isPasswordShown, setIsPasswordShown] = useState(false);
const [showTermsModal,setShowTermsModal] = useState(false);

const handleSubmit = async e => {
e.preventDefault();
if (confirmPassword === password){
Expand All @@ -28,7 +28,7 @@ export default function Register() {
}
new FormData(e.target).forEach((value, key) => {
if (key === "terms_and_conditions_checked" || key === "need_mentoring" || key === "available_to_mentor")
value = (value === "true") ? true : false
value = (value === "true") ? true : false
if (key !== "confirmPassword") payload[key] = value;
});
const requestRegister = {
Expand Down Expand Up @@ -58,7 +58,12 @@ export default function Register() {
}

const validateName = e => {
setIsValidName(e.target.checkValidity());
if(e.target.value.trim()===''){
setIsValidName(false);
}
else{
setIsValidName(e.target.checkValidity());
}
};
const validateUsername = e => {
setIsValidUsername(e.target.checkValidity());
Expand All @@ -67,8 +72,13 @@ export default function Register() {
setIsValidEmail(e.target.checkValidity());
};
const validatePassword = e => {
setPassword(e.target.value)
setIsValidPassword(e.target.checkValidity());
if(e.target.value.trim()===''){
setIsValidPassword(false);
}
else{
setPassword(e.target.value)
setIsValidPassword(e.target.checkValidity());
}
};
const validateConfirmPassword = e => {
setConfirmPassword(e.target.value)
Expand Down Expand Up @@ -149,7 +159,7 @@ export default function Register() {
<p className="input-control">

<label id="password">Password :</label>
<input aria-labelledby="password"
<input aria-labelledby="password"
className="field"
type={isPasswordShown? "text" : "password"}
name="password"
Expand Down Expand Up @@ -254,10 +264,10 @@ export default function Register() {
</div>
<div className="row button-group">
<div className="col">
<Link
className="btn btn-primary"
id="loginBtn"
to="/login"
<Link
className="btn btn-primary"
id="loginBtn"
to="/login"
role="button">
Login
</Link>
Expand Down
Loading

0 comments on commit 9176459

Please sign in to comment.