Compare commits
No commits in common. "main" and "client" have entirely different histories.
|
|
@ -19,7 +19,6 @@ 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
|
|
@ -16,10 +16,9 @@
|
|||
"react": "^17.0.1",
|
||||
"react-bootstrap": "^1.5.2",
|
||||
"react-dom": "^17.0.1",
|
||||
"react-google-login": "^5.2.2",
|
||||
"react-lottie": "^1.2.3",
|
||||
"react-router-dom": "^5.2.0",
|
||||
"react-scripts": "^4.0.3",
|
||||
"react-scripts": "^4.0.0",
|
||||
"styled-components": "^5.2.1",
|
||||
"styled-icons": "^10.22.0",
|
||||
"web-vitals": "^0.2.4"
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||
<link href="../src/index.css" rel="stylesheet"/>
|
||||
<link href="./src/style.css" rel="stylesheet"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<meta name="theme-color" content="#000000" />
|
||||
<meta
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
content="Web site created using create-react-app"
|
||||
/>
|
||||
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.jpg" />
|
||||
<script src="https://apis.google.com/js/platform.js" async defer></script>
|
||||
<!--
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
|
|
@ -29,6 +28,7 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<!-- 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">
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@ import NavBar from "./components/NavBar";
|
|||
import FillingDetails from "./components/FillingDetails";
|
||||
import Error404 from './components/Error404';
|
||||
import Payment from './components/Payment'
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
|
||||
export default function App() {
|
||||
const [userData, setUserData ] = useState({
|
||||
token: undefined,
|
||||
|
|
@ -21,7 +19,6 @@ export default function App() {
|
|||
useEffect(() => {
|
||||
const checkLoggedIn = async () => {
|
||||
let token = localStorage.getItem("auth-token");
|
||||
console.log("app js " + token);
|
||||
if (token == null) {
|
||||
localStorage.setItem("auth-token","");
|
||||
token ="";
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Lottie from 'react-lottie';
|
|||
import animationData from '../lottie/box_error';
|
||||
|
||||
const Body = styled.div`
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:400,100,300,500');
|
||||
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,300,500);
|
||||
font-size: 100%;
|
||||
line-height: 1.5;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
|
|
|||
|
|
@ -38,10 +38,6 @@ const ColoredSection = styled.section`
|
|||
|
||||
background-color:#66bfbf;
|
||||
color: #fff;
|
||||
background-attachment: fixed;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
||||
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -3,11 +3,6 @@ import styled from 'styled-components';
|
|||
|
||||
const Image = styled.img`
|
||||
display:block;
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
border-radius: 40px;
|
||||
box-shadow: none;
|
||||
object-fit:cover;
|
||||
`;
|
||||
const Tick = styled.input.attrs(props => ({
|
||||
type: "radio",
|
||||
|
|
@ -15,69 +10,84 @@ const Tick = styled.input.attrs(props => ({
|
|||
|
||||
}))`
|
||||
|
||||
`;
|
||||
const Hover = styled.div`
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
opacity: 0;
|
||||
transition: opacity 350ms ease;
|
||||
position: absolute;
|
||||
`;
|
||||
const Overlay = styled.div`
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
transition: black 350ms ease;
|
||||
background-color: transparent;
|
||||
border-radius: 40px;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
|
||||
`;
|
||||
const CardTitle = styled.h2`
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
font-family: sans-serif;
|
||||
box-shadow: none;
|
||||
color: #fff;
|
||||
|
||||
|
||||
|
||||
|
||||
position: block;
|
||||
bottom: 0;
|
||||
background: rgb(0, 0, 0);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #f1f1f1;
|
||||
width: 100%;
|
||||
transition: .5s ease;
|
||||
opacity:0;
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
padding: 20px;
|
||||
text-align: center;
|
||||
margin-top: -90px;
|
||||
`;
|
||||
|
||||
const Paragraph = styled.p`
|
||||
|
||||
margin-top: 10px;
|
||||
margin-left: 10px;
|
||||
color: #fff;
|
||||
|
||||
|
||||
`;
|
||||
|
||||
const Card = styled.div`
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 40px;
|
||||
box-shadow: 4px 4px 5px 5px rgba(0,0,0,0.01), -2px -2px 5px 5px rgba(0,0,0,0.22);
|
||||
cursor: pointer;
|
||||
transition: 0.4s;
|
||||
position: relative;
|
||||
background-image: url("${props => props.img ? props.img : "vrl.jpg"}");
|
||||
background-size: cover;
|
||||
|
||||
&:hover ${Overlay} {
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
|
||||
& .card_image {
|
||||
width: inherit;
|
||||
height:inherit;
|
||||
|
||||
}
|
||||
&:hover ${CardTitle}, :hover ${Paragraph}{
|
||||
transform: translate3d(0,0,0);
|
||||
|
||||
& .card_image ${Image} {
|
||||
width: inherit;
|
||||
height:inherit;
|
||||
border-radius: 40px;
|
||||
object-fit:cover;
|
||||
}
|
||||
&:hover ${Hover}{
|
||||
|
||||
& .card_title {
|
||||
text-align: center;
|
||||
border-radius: 0px 0px 40px 40px;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
margin-top: -80px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
|
||||
& .card_title {
|
||||
text-align: center;
|
||||
border-radius: 0px 0px 40px 40px;
|
||||
font-family: sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 30px;
|
||||
margin-top: -80px;
|
||||
height: 40px;
|
||||
color: white !important;
|
||||
}
|
||||
& .card_tick {
|
||||
content:'asdf';
|
||||
border-radius: 0px 0px 40px 40px;
|
||||
margin-top: -90px;
|
||||
height: 40px;
|
||||
color: white;
|
||||
}
|
||||
&:hover {
|
||||
|
||||
box-shadow: 2px 2px 5px 9px rgba(0,0,0,0.22), -2px -2px 5px 5px rgba(0,0,0,0.11);
|
||||
;
|
||||
|
||||
}
|
||||
&:hover ${Overlay}{
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
|
|
@ -85,13 +95,13 @@ const Card = styled.div`
|
|||
const HouseCard = (props) => {
|
||||
|
||||
return (
|
||||
<Card img = {props.img}>
|
||||
<Overlay>
|
||||
<Hover>
|
||||
<CardTitle>{props.title ? props.title : "asdf"}</CardTitle>
|
||||
<Paragraph>{props.desc ? props.desc: "zxcv"}</Paragraph>
|
||||
</Hover>
|
||||
</Overlay>
|
||||
|
||||
|
||||
<Card>
|
||||
<Card className="card_image"> <Image src={props.img} alt="asdf" /></Card>
|
||||
<Card className="card_title">
|
||||
<p>Card Title</p>
|
||||
</Card>
|
||||
</Card>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import React, {useState, useContext} from 'react';
|
||||
import React, {useContext} from 'react';
|
||||
import { useHistory,BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
|
||||
import Register from './Register';
|
||||
import Login from './Login';
|
||||
|
|
@ -7,50 +7,28 @@ import styled, {css} from 'styled-components';
|
|||
import {Button} from './miscellaneous/Styles';
|
||||
import UserContext from "../context/UserContext";
|
||||
import {logout} from "./NavBar"
|
||||
import { GoogleLogin } from 'react-google-login';
|
||||
import Axios from "axios";
|
||||
import { Device} from './miscellaneous/Responsive';
|
||||
|
||||
const BaseApp = styled.div`
|
||||
display: flex;
|
||||
color: white;
|
||||
height:100vh;
|
||||
flex-direction: column;
|
||||
|
||||
@media ${Device.laptop} {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
`;
|
||||
|
||||
const AppSide = styled.div`
|
||||
width: 50%;
|
||||
background-color: #66bfbf;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, 300px);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
@media ${Device.laptop} {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
|
||||
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
|
||||
`;
|
||||
const AppForm = styled.div`
|
||||
|
||||
width: 50%;
|
||||
background-color: #ffffff;
|
||||
padding: 25px 40px;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
|
||||
@media ${Device.laptop} {
|
||||
width: 50%;
|
||||
overflow:auto
|
||||
}
|
||||
overflow: auto;
|
||||
|
||||
`;
|
||||
const PageSwitcherContainer = styled.div`
|
||||
|
|
@ -160,73 +138,25 @@ const FormTitle = styled.div`
|
|||
font-weight: 300;
|
||||
margin-bottom: 50px;
|
||||
|
||||
|
||||
`;
|
||||
const responseSuccessGoogle = (response) => {
|
||||
|
||||
Axios({
|
||||
method: 'POST',
|
||||
url: "http://localhost:5000/users/googlelogin",
|
||||
data: { idToken: response.tokenId }
|
||||
}).then(response => {
|
||||
console.log(response);
|
||||
|
||||
})
|
||||
}
|
||||
const responseFailGoogle = (response) => {
|
||||
console.log(response)
|
||||
|
||||
}
|
||||
const LogInContainer = () => {
|
||||
const LogInContainer = (props) => {
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
const [error, setError] = useState();
|
||||
const [hasLogged, setHasLogged] = useState(false);
|
||||
const history = useHistory();
|
||||
const responsePassGoogle = async (response) => {
|
||||
try{
|
||||
const idToken = response.tokenId;
|
||||
console.log("id token" + idToken);
|
||||
const googleres = await Axios.post(
|
||||
"https://server-locaft.herokuapp.com/users/googlelogin",{
|
||||
idToken: idToken
|
||||
}
|
||||
|
||||
);
|
||||
setUserData({
|
||||
token: googleres.data.token,
|
||||
user: googleres.data.user
|
||||
});
|
||||
localStorage.setItem("auth-token",googleres.data.token);
|
||||
setHasLogged(true);
|
||||
|
||||
} catch (err) {
|
||||
err.response.data.msg && setError(err.response.data.msg);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
return (
|
||||
<BaseApp>
|
||||
<meta name="google-signin-client_id"
|
||||
content={`${process.env.REACT_APP_CLIENT_ID}.apps.googleusercontent.com`} />
|
||||
<AppSide>
|
||||
{!hasLogged ? (
|
||||
<GoogleLogin
|
||||
clientId= {process.env.REACT_APP_CLIENT_ID}
|
||||
buttonText="Login with Google"
|
||||
onSuccess={responsePassGoogle}
|
||||
onFailure={responseFailGoogle}
|
||||
cookiePolicy={'single_host_origin'}
|
||||
/>
|
||||
<PlaneContainer>
|
||||
<img src="/logo.jpg" alt="plane logo"></img>
|
||||
</PlaneContainer>
|
||||
<TextContainer>
|
||||
<BannerHeading>locaft</BannerHeading>
|
||||
<BannerText>Sit back, let us move you</BannerText>
|
||||
|
||||
|
||||
): (
|
||||
<React.Fragment>
|
||||
<p> username: {userData.user.username}</p>
|
||||
<p> email: {userData.user.email}</p>
|
||||
<p> pricing: {userData.user.pricing}</p>
|
||||
</React.Fragment>
|
||||
|
||||
) }
|
||||
</TextContainer>
|
||||
<SkyContainer>
|
||||
<img src="/skyscraper.png" alt="skyscraper"></img>
|
||||
</SkyContainer>
|
||||
</AppSide>
|
||||
<AppForm>
|
||||
{!userData.user ? (
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ const Login = () => {
|
|||
"https://server-locaft.herokuapp.com/users/login",
|
||||
loginUser
|
||||
);
|
||||
console.dir("login res " + loginRes.data.user);
|
||||
setUserData({
|
||||
token: loginRes.data.token,
|
||||
user: loginRes.data.user,
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ const List = styled.ul`
|
|||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 13px 50px;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 0px !important;
|
||||
|
||||
|
|
|
|||
|
|
@ -5,19 +5,11 @@ import Footer from "./Footer";
|
|||
import styled from 'styled-components';
|
||||
|
||||
const CardList = styled.div`
|
||||
display: grid;
|
||||
position: relative;
|
||||
margin: 15px;
|
||||
grid-template-rows: repeat(auto-fill,minmax(200px,1fr));
|
||||
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
|
||||
grid-gap: 30px;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
z-index: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
flex-wrap: wrap;
|
||||
`;
|
||||
export default function Options() {
|
||||
|
||||
|
|
@ -86,23 +78,12 @@ export default function Options() {
|
|||
</div>
|
||||
|
||||
|
||||
<p id="content" className="text-center">Step Number 1</p>
|
||||
<div id="main">
|
||||
<p id="content" className="text-center">Step Number 1</p>
|
||||
<button id="previousBtn" >Previous</button>
|
||||
<button id="nextBtn">Next</button>
|
||||
<button id="finishBtn" >Finish</button>
|
||||
</div>
|
||||
<CardList>
|
||||
<Card img="skyscraper.png" title="cardtitle" desc="description"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
<Card img="indigo.jpg"/>
|
||||
<Card img="locaft.png"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
<Card img="skyscraper.png"/>
|
||||
</CardList>
|
||||
<Footer />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -6,8 +6,26 @@ import UserContext from "../context/UserContext";
|
|||
import { useHistory } from "react-router-dom";
|
||||
import Axios from 'axios';
|
||||
import { Button } from './miscellaneous/Styles';
|
||||
import { Device} from './miscellaneous/Responsive';
|
||||
|
||||
const size = {
|
||||
mobileS: '320px',
|
||||
mobileM: '375px',
|
||||
mobileL: '425px',
|
||||
tablet: '768px',
|
||||
laptop: '1024px',
|
||||
laptopL: '1440px',
|
||||
desktop: '2560px'
|
||||
}
|
||||
export const Device = {
|
||||
mobileS: `(min-width: ${size.mobileS})`,
|
||||
mobileM: `(min-width: ${size.mobileM})`,
|
||||
mobileL: `(min-width: ${size.mobileL})`,
|
||||
tablet: `(min-width: ${size.tablet})`,
|
||||
laptop: `(min-width: ${size.laptop})`,
|
||||
laptopL: `(min-width: ${size.laptopL})`,
|
||||
desktop: `(min-width: ${size.desktop})`,
|
||||
desktopL: `(min-width: ${size.desktop})`
|
||||
};
|
||||
const PricingPlanContainer = styled.div`
|
||||
|
||||
display:flex;
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ const StyledMenu = styled.nav`
|
|||
height: 100vh;
|
||||
text-align: left;
|
||||
padding: 2rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
|
|
@ -42,11 +43,11 @@ const StyledMenu = styled.nav`
|
|||
}
|
||||
`
|
||||
|
||||
const Menu = ({open, setOpen}) => {
|
||||
const Menu = (props) => {
|
||||
const { userData, setUserData } = useContext(UserContext);
|
||||
return (
|
||||
<StyledMenu open={open} >
|
||||
<a href="/#about-us"onClick={() => setOpen(false)}>
|
||||
<StyledMenu open={props.open}>
|
||||
<a href="/#about-us">
|
||||
<span role="img" aria-label="about us">💁🏻♂️</span>
|
||||
About us
|
||||
</a>
|
||||
|
|
@ -54,7 +55,7 @@ const Menu = ({open, setOpen}) => {
|
|||
<span role="img" aria-label="pricing">💸</span>
|
||||
Pricing
|
||||
</a>
|
||||
<a href="/#footer"onClick={() => setOpen(false)}>
|
||||
<a href="/#footer">
|
||||
<span role="img" aria-label="contact us">📩</span>
|
||||
Contact
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,25 +0,0 @@
|
|||
import {Modal, Button} from 'react-bootstrap';
|
||||
import React, {useState} from 'react';
|
||||
|
||||
export const CustomModal = (props) => {
|
||||
|
||||
const handleClose = () => props.setShow(false);
|
||||
const handleShow = () => props.setShow(true);
|
||||
|
||||
return (
|
||||
<>
|
||||
|
||||
<Modal show={props.show} onHide={handleClose}>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>{props.title}</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>{props.desc}</Modal.Body>
|
||||
<Modal.Footer>
|
||||
<Button variant="secondary" onClick={handleClose}>
|
||||
Log In
|
||||
</Button>
|
||||
</Modal.Footer>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
export const size = {
|
||||
mobileS: '320px',
|
||||
mobileM: '375px',
|
||||
mobileL: '425px',
|
||||
tablet: '768px',
|
||||
laptop: '1024px',
|
||||
laptopL: '1440px',
|
||||
desktop: '2560px'
|
||||
}
|
||||
export const Device = {
|
||||
mobileS: `(min-width: ${size.mobileS})`,
|
||||
mobileM: `(min-width: ${size.mobileM})`,
|
||||
mobileL: `(min-width: ${size.mobileL})`,
|
||||
tablet: `(min-width: ${size.tablet})`,
|
||||
laptop: `(min-width: ${size.laptop})`,
|
||||
laptopL: `(min-width: ${size.laptopL})`,
|
||||
desktop: `(min-width: ${size.desktop})`,
|
||||
desktopL: `(min-width: ${size.desktop})`
|
||||
};
|
||||
|
|
@ -1,6 +1,5 @@
|
|||
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
|
||||
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: "Roboto", sans-serif;
|
||||
|
|
|
|||
|
|
@ -7,13 +7,6 @@
|
|||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
#main {
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.step {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue