Merge branch 'client' into main
This commit is contained in:
commit
6099c144b3
|
|
@ -19,6 +19,7 @@ node_modules
|
|||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
.env
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -10,15 +10,15 @@
|
|||
"@testing-library/jest-dom": "^5.11.5",
|
||||
"@testing-library/react": "^11.1.0",
|
||||
"@testing-library/user-event": "^12.1.10",
|
||||
"axios": "^0.21.0",
|
||||
"bootstrap": "^4.5.3",
|
||||
"axios": "^0.21.1",
|
||||
"bootstrap": "^4.6.0",
|
||||
"install": "^0.13.0",
|
||||
"react": "^17.0.1",
|
||||
"react-bootstrap": "^1.4.0",
|
||||
"react-bootstrap": "^1.5.2",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-lottie": "^1.2.3",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "^4.0.0",
|
||||
"react-scripts": "^4.0.3",
|
||||
"styled-components": "^5.2.1",
|
||||
"styled-icons": "^10.22.0",
|
||||
"web-vitals": "^0.2.4"
|
||||
|
|
|
|||
|
|
@ -27,12 +27,10 @@
|
|||
-->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- CSS Stylesheets -->
|
||||
<!-- CSS Styles-->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
|
||||
|
||||
|
||||
<!-- Bootstrap Scripts -->
|
||||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
|
||||
|
||||
<title>Locaft</title>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,53 @@
|
|||
import React from "react";
|
||||
import styled from 'styled-components';
|
||||
import Footer from "./Footer";
|
||||
|
||||
|
||||
export default function ErrorNotice(props) {
|
||||
const ErrorNotice = styled.div`
|
||||
margin: 1rem 0;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid #e07c7c;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background-color: #f8d6d6;
|
||||
padding: 10px;
|
||||
`;
|
||||
const ErrorMessage = styled.div`
|
||||
color: #000000;
|
||||
`;
|
||||
|
||||
const ErrorButton = styled.button
|
||||
const ErrorButton = styled.a
|
||||
`
|
||||
width: 17px;
|
||||
height: 28px;
|
||||
display:flex;
|
||||
background-color: #df4343;
|
||||
color: #ffffff;
|
||||
color: red;
|
||||
position: relative;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
opacity: 0.3;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
&:before, &:after {
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
content: ' ';
|
||||
height: 19px;
|
||||
width: 2px;
|
||||
background-color: red;
|
||||
}
|
||||
&:before {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
&:after {
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
`;
|
||||
return (
|
||||
<ErrorNotice>
|
||||
<ErrorMessage>{props.message}</ErrorMessage>
|
||||
<ErrorButton onClick={props.clearError}>x</ErrorButton>
|
||||
<ErrorButton onClick={props.clearError}></ErrorButton>
|
||||
</ErrorNotice>
|
||||
);
|
||||
}
|
||||
|
|
@ -11,6 +11,9 @@ import { Bullseye } from "@styled-icons/fa-solid";
|
|||
import { StyledIconBase } from '@styled-icons/styled-icon'
|
||||
import Sidebar from './Sidebar';
|
||||
|
||||
const Body = styled.div`
|
||||
`;
|
||||
|
||||
const IconStyler = styled.div`
|
||||
${StyledIconBase} {
|
||||
width: ${props => props.width ? props.width : 26}px;
|
||||
|
|
@ -93,8 +96,7 @@ export default function HomePage() {
|
|||
|
||||
return (
|
||||
|
||||
<div className="HomePage">
|
||||
<NavBar />
|
||||
<Body>
|
||||
|
||||
<ColoredSection >
|
||||
|
||||
|
|
@ -228,7 +230,8 @@ export default function HomePage() {
|
|||
</ContainerPadded>
|
||||
|
||||
</ColoredSection>
|
||||
<Sidebar />
|
||||
<Sidebar logout="{logout}" />
|
||||
<NavBar />
|
||||
|
||||
<div id="footer">
|
||||
<Footer />
|
||||
|
|
@ -236,15 +239,7 @@ export default function HomePage() {
|
|||
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</Body>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import React from 'react';
|
||||
import { BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
|
||||
import React, {useContext} from 'react';
|
||||
import { useHistory,BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
|
||||
import Register from './Register';
|
||||
import Login from './Login';
|
||||
import Footer from './Footer';
|
||||
|
||||
import '../login_reg.css';
|
||||
import styled, {css} from 'styled-components';
|
||||
import {Button} from './miscellaneous/Styles';
|
||||
import UserContext from "../context/UserContext";
|
||||
import {logout} from "./NavBar"
|
||||
|
||||
const BaseApp = styled.div`
|
||||
display: flex;
|
||||
|
|
@ -13,7 +15,52 @@ const BaseApp = styled.div`
|
|||
|
||||
`;
|
||||
|
||||
const Aside = styled.div`
|
||||
|
||||
const AppSide = styled.div`
|
||||
width: 50%;
|
||||
background-color: #66bfbf;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
`;
|
||||
const AppForm = styled.div`
|
||||
|
||||
width: 50%;
|
||||
background-color: #ffffff;
|
||||
padding: 25px 40px;
|
||||
overflow: auto;
|
||||
|
||||
`;
|
||||
const PageSwitcherContainer = styled.div`
|
||||
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10%;
|
||||
|
||||
`;
|
||||
const BannerHeading = styled.h1`
|
||||
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-family: Ubuntu;
|
||||
font-size: 5rem;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
text-transform: lowercase;
|
||||
`;
|
||||
const PlaneContainer = styled.div`
|
||||
|
||||
width:100px;
|
||||
display:flex;
|
||||
margin-bottom: 50px;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
`;
|
||||
const TextContainer = styled.p`
|
||||
|
||||
width: 50%;
|
||||
background-color: #66bfbf;
|
||||
display:flex;
|
||||
|
|
@ -22,44 +69,147 @@ const Aside = styled.div`
|
|||
|
||||
`;
|
||||
|
||||
const LogInContainer = (props) => {
|
||||
return (
|
||||
<BrowserRouter basename="user">
|
||||
<div className="Apper">
|
||||
<div className="Apper__Aside">
|
||||
<div className="Apper_logo">
|
||||
<img src="/logo.jpg" alt="plane logo"></img>
|
||||
</div>
|
||||
<div className="Apper__Aside__text">
|
||||
<h1 className="Apper_heading">locaft</h1>
|
||||
<p className="Apper_quote">Sit back, let us move you</p>
|
||||
const BannerText = styled.p`
|
||||
|
||||
</div>
|
||||
<div className="Apper_Aside_image">
|
||||
color:${props => props.colour ? props.colour : "white"};
|
||||
font-size: 1.25em;
|
||||
font-style:italic;
|
||||
|
||||
|
||||
`;
|
||||
const SkyContainer = styled.div`
|
||||
margin-top: 600px;
|
||||
width: 100%;
|
||||
background-size: 100%;
|
||||
`;
|
||||
const PageSwitcher = styled(NavLink)`
|
||||
background-color: #4C5D72;
|
||||
color: white;
|
||||
padding: 10px 25px;
|
||||
cursor: pointer;
|
||||
font-size: .9em;
|
||||
border: none;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-decoration: none !important;
|
||||
|
||||
&.active{
|
||||
background-color: #66bfbf;
|
||||
color: white;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
|
||||
}
|
||||
&:last-child {
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
|
||||
}
|
||||
`;
|
||||
|
||||
const FormLink = styled(NavLink)`
|
||||
|
||||
color: #707C8B;
|
||||
text-decoration: none !important;
|
||||
display: inline-block;
|
||||
font-size: 1.7em;
|
||||
margin: 0 10px;
|
||||
padding-bottom: 5px;
|
||||
border: none;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
&:last-child{
|
||||
color: #707c8b;
|
||||
}
|
||||
&.active{
|
||||
border-bottom: 1px solid #199087;
|
||||
}
|
||||
|
||||
|
||||
|
||||
`;
|
||||
|
||||
const FormTitle = styled.div`
|
||||
color: #000000;
|
||||
font-weight: 300;
|
||||
margin-bottom: 50px;
|
||||
|
||||
`;
|
||||
const LogInContainer = () => {
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
const history = useHistory();
|
||||
return (
|
||||
<BaseApp>
|
||||
<AppSide>
|
||||
<PlaneContainer>
|
||||
<img src="/logo.jpg" alt="plane logo"></img>
|
||||
</PlaneContainer>
|
||||
<TextContainer>
|
||||
<BannerHeading>locaft</BannerHeading>
|
||||
<BannerText>Sit back, let us move you</BannerText>
|
||||
|
||||
</TextContainer>
|
||||
<SkyContainer>
|
||||
<img src="/skyscraper.png" alt="skyscraper"></img>
|
||||
</div>
|
||||
</div>
|
||||
<div className="Apper__Form">
|
||||
<div className="PageSwitcher">
|
||||
<NavLink to="/login" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign In</NavLink>
|
||||
<NavLink to="/register" activeClassName="PageSwitcher__Item--Active" className="PageSwitcher__Item">Sign Up</NavLink>
|
||||
</div>
|
||||
<div className="FormTitle">
|
||||
<NavLink to="/login" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign In</NavLink> or <NavLink exact to="/register" activeClassName="FormTitle__Link--Active" className="FormTitle__Link">Sign Up</NavLink>
|
||||
</div>
|
||||
</SkyContainer>
|
||||
</AppSide>
|
||||
<AppForm>
|
||||
{!userData.user ? (
|
||||
<BrowserRouter basename="user">
|
||||
<PageSwitcherContainer>
|
||||
<PageSwitcher to="/login" >Sign In</PageSwitcher>
|
||||
<PageSwitcher to="/register" >Sign Up</PageSwitcher>
|
||||
</PageSwitcherContainer>
|
||||
<FormTitle>
|
||||
<FormLink to="/login" >Sign In</FormLink> or <FormLink to="/register">Sign Up</FormLink>
|
||||
</FormTitle>
|
||||
<Switch>
|
||||
<Route path="/register" component={Register} />
|
||||
<Route path="/login" component={Login} />
|
||||
</Switch>
|
||||
<p>
|
||||
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<Footer background="blue"/>
|
||||
</BrowserRouter>
|
||||
) : (
|
||||
|
||||
<React.Fragment>
|
||||
<BannerText colour="black">Log in successful.</BannerText>
|
||||
<Button
|
||||
type="submit"
|
||||
radiuscolor="#009578"
|
||||
textcolor="#009578"
|
||||
hovercolor="#009578"
|
||||
hovertextcolor="white"
|
||||
onClick={() => { history.push("/")}}
|
||||
|
||||
>home</Button>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
radiuscolor="#009578"
|
||||
textcolor="#009578"
|
||||
hovercolor="#009578"
|
||||
hovertextcolor="white"
|
||||
onClick={() => {logout(setUserData); history.push("/")}}
|
||||
|
||||
>Logout</Button>
|
||||
|
||||
</React.Fragment>
|
||||
|
||||
|
||||
)}
|
||||
|
||||
|
||||
|
||||
|
||||
</AppForm>
|
||||
|
||||
</BaseApp>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@ import Axios from "axios";
|
|||
import ErrorNotice from "./ErrorNotice";
|
||||
import { Link, useHistory, withRouter } from "react-router-dom";
|
||||
|
||||
import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink } from './miscellaneous/Styles'
|
||||
const Login = () => {
|
||||
|
||||
const [email, setEmail] = useState();
|
||||
|
|
@ -34,27 +35,34 @@ const Login = () => {
|
|||
};
|
||||
return (
|
||||
|
||||
<div className="FormCenter">
|
||||
<FormCenter>
|
||||
{error && (
|
||||
<ErrorNotice message={error} clearError={() => setError(undefined)} />
|
||||
)}
|
||||
<form className="FormFields" onSubmit={submit}>
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
|
||||
<input type="email" id="email" className="FormField__Input" value={ email } placeholder="Enter your email" name="email" onChange={(e) => setEmail(e.target.value)} />
|
||||
</div>
|
||||
<FormField>
|
||||
<FormLabel htmlFor="email">E-Mail Address</FormLabel>
|
||||
<FormInput type="email" id="email" value={ email } placeholder="enter your email" name="email" onChange={(e) => setEmail(e.target.value)} />
|
||||
</FormField>
|
||||
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="password">Password</label>
|
||||
<input type="password" id="password" className="FormField__Input" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} />
|
||||
</div>
|
||||
<FormField>
|
||||
<FormLabel htmlFor="password">Password</FormLabel>
|
||||
<FormInput type="password" id="password" value={ password } placeholder="Enter your password" name="password" onChange={(e) => setPassword(e.target.value)} />
|
||||
</FormField>
|
||||
|
||||
<div className="FormField">
|
||||
<button className="FormField__Button mr-20" >Sign In</button> <Link exact to="/register" className="FormField__Link">Not a member?</Link>
|
||||
</div>
|
||||
<FormField>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
radiuscolor="#009578"
|
||||
textcolor="#009578"
|
||||
hovercolor="#009578"
|
||||
hovertextcolor="white"
|
||||
>Sign In</Button> <FormLink exact to="/register" className="FormField__Link">Not a member?</FormLink>
|
||||
</FormField>
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</FormCenter>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, {useContext,useEffect } from 'react';
|
||||
import React, { useState,useContext,useEffect } from 'react';
|
||||
import { Link } from "react-router-dom";
|
||||
import UserContext from "../context/UserContext";
|
||||
import styled,{ css } from 'styled-components';
|
||||
|
|
@ -15,7 +15,7 @@ const Header = styled.header`
|
|||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: 0.6s;
|
||||
padding: 10px 15px;
|
||||
padding: 5px 15px;
|
||||
z-index: 100000;
|
||||
font-family: Ubuntu;
|
||||
|
||||
|
|
@ -89,11 +89,7 @@ const Linker = styled(Link)`
|
|||
|
||||
`;
|
||||
|
||||
|
||||
export default function NavBar() {
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
|
||||
const logout = () => {
|
||||
export const logout = (setUserData) => {
|
||||
setUserData({
|
||||
token: undefined,
|
||||
user: undefined,
|
||||
|
|
@ -101,8 +97,10 @@ export default function NavBar() {
|
|||
localStorage.setItem("auth-token", "");
|
||||
};
|
||||
|
||||
export default function NavBar() {
|
||||
const [scrolled, setScrolled] = useState();
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
|
||||
const [scrolled,setScrolled]=React.useState(false);
|
||||
const handleScroll=() => {
|
||||
const offset=window.scrollY;
|
||||
if(offset > 200 ){
|
||||
|
|
@ -126,11 +124,11 @@ export default function NavBar() {
|
|||
<List>
|
||||
<ListElement><Anchor href="/">Home</Anchor></ListElement>
|
||||
<ListElement><Anchor href="/#about-us">About</Anchor></ListElement>
|
||||
<ListElement><Anchor href="/#services">Services</Anchor></ListElement>
|
||||
<ListElement><Anchor href="/pricing">Pricing</Anchor></ListElement>
|
||||
<ListElement><Anchor href="/#footer">Contact us</Anchor></ListElement>
|
||||
{userData.user ? (
|
||||
<React.Fragment>
|
||||
<ListElement><Linker onClick={logout}>{userData.user.username}</Linker></ListElement>
|
||||
<ListElement><Linker onClick={() => logout(setUserData)}>{userData.user.username}</Linker></ListElement>
|
||||
</React.Fragment>
|
||||
|
||||
) : (
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ import NavBar from './NavBar';
|
|||
import Footer from './Footer';
|
||||
import styled,{css} from 'styled-components';
|
||||
import UserContext from "../context/UserContext";
|
||||
import Payment from "./Payment";
|
||||
import { useHistory } from "react-router-dom";
|
||||
import Axios from 'axios';
|
||||
import { Button } from './miscellaneous/Styles';
|
||||
|
||||
const size = {
|
||||
mobileS: '320px',
|
||||
|
|
@ -165,37 +165,13 @@ const Actions = styled.div`
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
`;
|
||||
const Button = styled.a`
|
||||
|
||||
display: inline-block;
|
||||
margin: 15px auto;
|
||||
padding: 8px 20px;
|
||||
color: #009578;
|
||||
background: #ffffff;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #009578;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
background: #009578;
|
||||
color: white !important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
|
||||
const Heading = styled.h1`
|
||||
color: #66bfbf;
|
||||
color: #309975;
|
||||
margin-left: 20px;
|
||||
margin-top: 100px;
|
||||
|
||||
font-weight: bold;
|
||||
|
||||
`;
|
||||
|
||||
|
|
@ -210,6 +186,7 @@ const submit = async (props) => {
|
|||
props.preventDefault();
|
||||
try {
|
||||
const id = userData.user.id;
|
||||
console.log("Id " + id)
|
||||
const pricingRes = await Axios.put(
|
||||
"https://server-locaft.herokuapp.com/users/update", {
|
||||
id,
|
||||
|
|
@ -312,7 +289,13 @@ const submit = async (props) => {
|
|||
|
||||
</PricingPlanContainer>
|
||||
<PricingPlanContainer>
|
||||
<Button onClick={() => setPurchased(true) }>Purchase</Button>
|
||||
<Button
|
||||
radiuscolor="#009578"
|
||||
textcolor="#009578"
|
||||
hovercolor="#009578"
|
||||
hovertextcolor="white"
|
||||
onClick={() => setPurchased(true)}
|
||||
>Purchase</Button>
|
||||
</PricingPlanContainer>
|
||||
</React.Fragment>
|
||||
): (
|
||||
|
|
|
|||
|
|
@ -4,13 +4,38 @@ import UserContext from "../context/UserContext";
|
|||
import Axios from "axios";
|
||||
import { Link } from "react-router-dom";
|
||||
import ErrorNotice from "./ErrorNotice";
|
||||
import styled from 'styled-components';
|
||||
import {Button, FormCenter, FormField, FormLabel, FormInput, FormLink } from './miscellaneous/Styles'
|
||||
|
||||
const CheckBoxLabel = styled.label`
|
||||
|
||||
color: #646F7D;
|
||||
font-size: .9em;
|
||||
|
||||
`;
|
||||
const CheckBox = styled.input`
|
||||
|
||||
position: relative;
|
||||
top: 1.5px;
|
||||
`;
|
||||
const TermsLink = styled.a`
|
||||
|
||||
color: #646F7D;
|
||||
border-bottom: 1px solid #199087;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding-bottom: 2px;
|
||||
margin-left: 5px;
|
||||
|
||||
|
||||
`;
|
||||
const Register = () => {
|
||||
const [email, setEmail] = useState();
|
||||
const [password, setPassword] = useState();
|
||||
const [phonenumber, setPhonenumber] = useState();
|
||||
const [username, setUsername] = useState();
|
||||
const [error, setError] = useState();
|
||||
const [contains8C, setContains8C] = useState(false);
|
||||
|
||||
const { setUserData } = useContext(UserContext);
|
||||
const history = useHistory();
|
||||
|
|
@ -20,6 +45,12 @@ import ErrorNotice from "./ErrorNotice";
|
|||
|
||||
try {
|
||||
const newUser = { username,email,phonenumber,password};
|
||||
const isEmpty = !Object.values(newUser).some(x => (x !== null && x !== ''));
|
||||
console.log("isempty: " + isEmpty )
|
||||
if(isEmpty){
|
||||
setError("Not all Fields are entered")
|
||||
return;
|
||||
}
|
||||
await Axios.post("https://server-locaft.herokuapp.com/users/register", newUser);
|
||||
const loginRes = await Axios.post("https://server-locaft.herokuapp.com/users/login", {
|
||||
email,
|
||||
|
|
@ -35,67 +66,82 @@ import ErrorNotice from "./ErrorNotice";
|
|||
return err.response.data.msg && setError(err.response.data.msg);
|
||||
}
|
||||
};
|
||||
const validatePassword = () => {
|
||||
|
||||
if(password.length >= 8) {
|
||||
setContains8C(true)
|
||||
setError(null)
|
||||
}
|
||||
else { setContains8C(false); setError("The Password needs to be atleast 8 characters") };
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div className="FormCenter">
|
||||
<FormCenter>
|
||||
{error && (
|
||||
<ErrorNotice message={error} clearError={() => setError(undefined)} />
|
||||
)}
|
||||
<form className="FormFields" onSubmit={submit}>
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="name">UserName</label>
|
||||
<input
|
||||
<FormField>
|
||||
<FormLabel htmlFor="name">UserName</FormLabel>
|
||||
<FormInput
|
||||
type="text"
|
||||
id="name"
|
||||
className="FormField__Input"
|
||||
placeholder="Enter your full name"
|
||||
onChange= { (e) => setUsername(e.target.value)}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="password">Password</label>
|
||||
<input
|
||||
</FormField>
|
||||
<FormField>
|
||||
<FormLabel htmlFor="password">Password</FormLabel>
|
||||
<FormInput
|
||||
type="password"
|
||||
id="password"
|
||||
className="FormField__Input"
|
||||
placeholder="Enter your password"
|
||||
onChange= { (e) => setPassword(e.target.value)}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
onKeyUp={validatePassword}
|
||||
/>
|
||||
</div>
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="email">E-Mail Address</label>
|
||||
<input
|
||||
</FormField>
|
||||
<FormField>
|
||||
<FormLabel htmlFor="email">E-Mail Address</FormLabel>
|
||||
<FormInput
|
||||
type="email"
|
||||
id="email"
|
||||
className="FormField__Input"
|
||||
placeholder="Enter your email"
|
||||
onChange= { (e) => setEmail(e.target.value)}
|
||||
|
||||
/>
|
||||
</div>
|
||||
<div className="FormField">
|
||||
<label className="FormField__Label" htmlFor="phone">Phone number</label>
|
||||
<input
|
||||
</FormField>
|
||||
<FormField>
|
||||
<FormLabel htmlFor="phone">Phone number</FormLabel>
|
||||
<FormInput
|
||||
type="number"
|
||||
id="phonenumber"
|
||||
className="FormField__Input"
|
||||
placeholder="Enter your Phone no. (+91)"
|
||||
onChange= { (e) => setPhonenumber(parseInt( e.target.value,10))}
|
||||
onChange={(e) => setPhonenumber(parseInt(e.target.value, 10))}
|
||||
/>
|
||||
</div>
|
||||
</FormField>
|
||||
|
||||
<div className="FormField">
|
||||
<label className="FormField__CheckboxLabel">
|
||||
<input className="FormField__Checkbox" type="checkbox" name="hasAgreed" required="true" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a>
|
||||
</label>
|
||||
</div>
|
||||
<FormField>
|
||||
<CheckBoxLabel>
|
||||
<CheckBox type="checkbox" name="hasAgreed" /> I agree all statements in <a href="/" className="FormField__TermsLink">terms of service</a>
|
||||
</CheckBoxLabel>
|
||||
</FormField>
|
||||
|
||||
<div className="FormField">
|
||||
<button className="FormField__Button mr-20" type="submit">Sign Up</button> <Link to="/login" className="FormField__Link">already a member?</Link>
|
||||
</div>
|
||||
<FormField>
|
||||
<Button
|
||||
type="submit"
|
||||
radiuscolor="#009578"
|
||||
textcolor="#009578"
|
||||
hovercolor="#009578"
|
||||
hovertextcolor="white"
|
||||
|
||||
>Sign Up</Button>
|
||||
<FormLink to="/login">already a member?</FormLink>
|
||||
</FormField>
|
||||
</form>
|
||||
</div>
|
||||
</FormCenter>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
import React, {useState} from 'react';
|
||||
import React, {useState, useContext} from 'react';
|
||||
import { Link } from 'react-router-dom'
|
||||
import styled from 'styled-components';
|
||||
|
||||
import UserContext from '../context/UserContext';
|
||||
const StyledMenu = styled.nav`
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position:fixed !important;
|
||||
justify-content: center;
|
||||
background: #EFFFFA;
|
||||
transform: ${({ open }) => open ? 'translateX(0)' : 'translateX(-100%)'};
|
||||
|
|
@ -41,9 +43,10 @@ const StyledMenu = styled.nav`
|
|||
}
|
||||
`
|
||||
|
||||
const Menu = ({ open }) => {
|
||||
const Menu = (props) => {
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
return (
|
||||
<StyledMenu open={open}>
|
||||
<StyledMenu open={props.open}>
|
||||
<a href="/#about-us">
|
||||
<span role="img" aria-label="about us">💁🏻♂️</span>
|
||||
About us
|
||||
|
|
@ -56,12 +59,34 @@ const Menu = ({ open }) => {
|
|||
<span role="img" aria-label="contact us">📩</span>
|
||||
Contact
|
||||
</a>
|
||||
|
||||
{userData.user ? (
|
||||
<Link >
|
||||
<span role="img" aria-label="{userData.user.username}">📩</span>
|
||||
{userData.user.username}
|
||||
</Link>
|
||||
|
||||
|
||||
):(
|
||||
<React.Fragment>
|
||||
<a href="/user/register">
|
||||
<span role="img" aria-label="Register">📩</span>
|
||||
Register
|
||||
</a>
|
||||
<a href="/user/login">
|
||||
<span role="img" aria-label="Login">📩</span>
|
||||
Login
|
||||
</a>
|
||||
</React.Fragment>
|
||||
)
|
||||
|
||||
}
|
||||
</StyledMenu>
|
||||
)
|
||||
}
|
||||
|
||||
const StyledBurger = styled.button`
|
||||
position: absolute;
|
||||
position: fixed;
|
||||
top: 5%;
|
||||
left: 2rem;
|
||||
display: flex;
|
||||
|
|
@ -78,6 +103,10 @@ const StyledBurger = styled.button`
|
|||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
&:hover{
|
||||
background: transparent;
|
||||
|
||||
}
|
||||
|
||||
div {
|
||||
width: 2rem;
|
||||
|
|
@ -117,15 +146,15 @@ const Burger = ({ open, setOpen }) => {
|
|||
}
|
||||
|
||||
|
||||
const Sidebar = () => {
|
||||
const [open, setOpen] = React.useState(false);
|
||||
const Sidebar = (props) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const node = React.useRef();
|
||||
return (
|
||||
<div>
|
||||
|
||||
<div ref={node}>
|
||||
<Burger open={open} setOpen={setOpen} />
|
||||
<Menu open={open} setOpen={setOpen} />
|
||||
<Menu open={open} setOpen={setOpen} logout={props.logout} />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -0,0 +1,72 @@
|
|||
import styled from 'styled-components'
|
||||
import { Link } from 'react-router-dom'
|
||||
const FormCenter = styled.div`
|
||||
margin-bottom: 100px;
|
||||
|
||||
`;
|
||||
const FormField = styled.div`
|
||||
|
||||
margin-bottom: 40px;
|
||||
`;
|
||||
const FormLabel = styled.div`
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.25em;
|
||||
color: #4C5D72;
|
||||
text-align: start;
|
||||
|
||||
`;
|
||||
const FormInput = styled.input`
|
||||
|
||||
width: 85%;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #4C5D72;
|
||||
outline: none;
|
||||
border-bottom: 1px solid #445366;
|
||||
font-size: .9em;
|
||||
font-weight: 300;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
|
||||
&:placeholder {
|
||||
color: #616E7F;
|
||||
}
|
||||
`;
|
||||
|
||||
const FormLink = styled(Link)`
|
||||
|
||||
color: #66707D;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding-bottom: 5px;
|
||||
margin-left: 12px;
|
||||
|
||||
`;
|
||||
|
||||
const Button = styled.button`
|
||||
|
||||
display: inline-block;
|
||||
margin: 15px auto;
|
||||
padding: 8px 20px;
|
||||
color: ${props => props.textcolor ? props.textcolor : "black"} !important;
|
||||
background: ${props => props.displaycolor ? props.displaycolor : "white"} ;
|
||||
border-radius: ${props => props.radius ? props.radius: "5"}px;
|
||||
border: 1px solid;
|
||||
border-color: ${props => props.radiuscolor ? props.radiuscolor : "black"};
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
|
||||
background: ${props => props.hovercolor ? props.hovercolor : "white"} ;
|
||||
color: ${props => props.hovertextcolor ? props.hovertextcolor : "black"}!important;
|
||||
|
||||
}
|
||||
|
||||
|
||||
`;
|
||||
export { Button, FormCenter, FormField, FormLabel, FormInput, FormLink };
|
||||
116
src/homepage.css
116
src/homepage.css
|
|
@ -1,116 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
|
||||
div {
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
|
||||
}
|
||||
h1 {
|
||||
color: white ;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #8f8f8f;
|
||||
}
|
||||
|
||||
/* Headings */
|
||||
|
||||
.big-heading {
|
||||
font-family: "Montserrat-Black";
|
||||
font-size: 3.5rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
font-size: 3rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
*/
|
||||
|
||||
.container-fluid{
|
||||
padding: 7% 15%;
|
||||
}
|
||||
|
||||
.comment{
|
||||
padding-bottom: 5%;
|
||||
}
|
||||
|
||||
.submit{
|
||||
margin-top: 5%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.loginb {
|
||||
margin: 5% 3% 5% 0;
|
||||
}
|
||||
|
||||
|
||||
/* Title Section */
|
||||
|
||||
#title {
|
||||
background-color: #66bfbf;
|
||||
color: #fff;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#title .container-fluid {
|
||||
padding: 3% 15% 7%;
|
||||
}
|
||||
|
||||
/* Title Image */
|
||||
|
||||
.title-image {
|
||||
width: 70%;
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
/* Features Section */
|
||||
|
||||
#features {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.icon:hover {
|
||||
color: #66bfbf;
|
||||
}
|
||||
|
||||
/* Testimonial Section */
|
||||
|
||||
#testimonials {
|
||||
background-color: #66bfbf;
|
||||
}
|
||||
|
||||
.testimonial-text {
|
||||
font-size: 3rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.testimonial-image {
|
||||
width: 20%;
|
||||
border-radius: 100%;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@media (max-width: 1028px) {
|
||||
|
||||
#title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.title-image {
|
||||
position: static;
|
||||
transform: rotate(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1,178 +0,0 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
|
||||
.Apper {
|
||||
}
|
||||
|
||||
.Apper__Aside {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.Apper__Form {
|
||||
width: 50%;
|
||||
background-color: #ffffff;
|
||||
padding: 25px 40px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.PageSwitcher {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
.Apper_heading{
|
||||
position: relative;
|
||||
text-align: center;
|
||||
font-family: Ubuntu;
|
||||
font-size: 5rem;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
text-decoration: none;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
.Apper_logo img{
|
||||
width:100px;
|
||||
display:flex;
|
||||
margin-bottom: 50px;
|
||||
align-content: flex-start;
|
||||
justify-content: flex-start;
|
||||
|
||||
}
|
||||
|
||||
.Apper__Aside__text {
|
||||
text-align: center;
|
||||
margin-bottom: 25%;
|
||||
|
||||
}
|
||||
.Apper_quote{
|
||||
color:white;
|
||||
font-size: 1.25em;
|
||||
font-style:italic;
|
||||
}
|
||||
.Apper__Aside_image{
|
||||
margin-top: 600px;
|
||||
width: 100%;
|
||||
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.PageSwitcher__Item {
|
||||
background-color: #4C5D72;
|
||||
color: white;
|
||||
padding: 10px 25px;
|
||||
cursor: pointer;
|
||||
font-size: .9em;
|
||||
border: none;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.PageSwitcher__Item--Active {
|
||||
background-color: #66bfbf;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.PageSwitcher__Item:first-child {
|
||||
border-top-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
}
|
||||
.PageSwitcher__Item:last-child {
|
||||
border-top-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
|
||||
.FormCenter {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.FormTitle {
|
||||
color: #000000;
|
||||
font-weight: 300;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.FormTitle__Link {
|
||||
color: #707C8B;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
font-size: 1.7em;
|
||||
margin: 0 10px;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.FormTitle__Link:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.FormTitle__Link--Active {
|
||||
color: #707c8b;
|
||||
border-bottom: 1px solid #199087;
|
||||
}
|
||||
|
||||
.FormField {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.FormField__Label {
|
||||
display: block;
|
||||
text-transform: uppercase;
|
||||
font-size: 1.25em;
|
||||
color: #4C5D72;
|
||||
text-align: start;
|
||||
|
||||
}
|
||||
.FormField__Input {
|
||||
width: 85%;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
color: #4C5D72;
|
||||
outline: none;
|
||||
border-bottom: 1px solid #445366;
|
||||
font-size: .9em;
|
||||
font-weight: 300;
|
||||
padding-bottom: 10px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.FormField__Input::placeholder {
|
||||
color: #616E7F;
|
||||
}
|
||||
|
||||
.FormField__Button {
|
||||
background-color: #52C4B9;
|
||||
color: white;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 25px;
|
||||
padding: 15px 70px;
|
||||
font-size: .8em;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.FormField__Link {
|
||||
color: #66707D;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding-bottom: 5px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
|
||||
.FormField__CheckboxLabel {
|
||||
color: #646F7D;
|
||||
font-size: .9em;
|
||||
}
|
||||
|
||||
.FormField__Checkbox {
|
||||
position: relative;
|
||||
top: 1.5px;
|
||||
}
|
||||
|
||||
.FormField__TermsLink {
|
||||
color: #646F7D;
|
||||
border-bottom: 1px solid #199087;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
padding-bottom: 2px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
* {
|
||||
|
||||
box-sizing: border-box;
|
||||
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
header{
|
||||
background: #66bfbf;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
transition: 0.6s;
|
||||
padding: 10px 15px;
|
||||
z-index: 100000;
|
||||
font-family: Ubuntu;
|
||||
|
||||
}
|
||||
header.sticky{
|
||||
|
||||
padding: 3px 50px;
|
||||
background: #66bfbf;
|
||||
opacity: 0.85;
|
||||
}
|
||||
header .logo{
|
||||
font-family: "Ubuntu";
|
||||
font-size: 2rem;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
text-transform: lowercase;
|
||||
padding-left: 100px;
|
||||
transition: 0.6s;
|
||||
}
|
||||
header ul {
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
header ul li {
|
||||
|
||||
position: relative;
|
||||
list-style: none;
|
||||
|
||||
|
||||
}
|
||||
header ul li a {
|
||||
|
||||
position: relative;
|
||||
|
||||
|
||||
}
|
||||
header ul li a {
|
||||
position: absolute;
|
||||
content: '';
|
||||
left:0;
|
||||
bottom: 0;
|
||||
height: 5px;
|
||||
text-decoration: none;
|
||||
|
||||
}
|
||||
|
||||
header.sticky ul li a{
|
||||
color: #fff;
|
||||
|
||||
}
|
||||
.checkbtn
|
||||
{
|
||||
color:white;
|
||||
font-size: 30px;
|
||||
float:right;
|
||||
line-height: 80px;
|
||||
margin-right: 40px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
|
||||
}
|
||||
#check{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
.pricing-plan-container
|
||||
{
|
||||
|
||||
}
|
||||
.pricing-plan {
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan:hover .pricing-plan:active {
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan__header{
|
||||
|
||||
|
||||
}
|
||||
.pricing-plan__special-text {
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan__title,.pricing-plan__summary{
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan__title{
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan__summary {
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan__desc {
|
||||
}
|
||||
|
||||
.pricing-plan__list {
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan__feature {
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan__feature:not(:last-child) {
|
||||
|
||||
|
||||
}
|
||||
.pricing-plan__feature::before {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan__actions {
|
||||
|
||||
}
|
||||
.pricing-plan__button {
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan__button:hover{
|
||||
}
|
||||
.pricing-plan__cost{
|
||||
|
||||
}
|
||||
.pricing-plan__text {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.pricing-plan-container{
|
||||
|
||||
}
|
||||
Loading…
Reference in New Issue