priyatham
/
Locaft
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: priyatham:main
Branches Tags
priyatham:main
priyatham:server
priyatham:client
priyatham:Priyatham-sai-chand/gitpod-setup
..
compare: priyatham:client
Branches Tags
priyatham:main
priyatham:server
priyatham:client
priyatham:Priyatham-sai-chand/gitpod-setup

No commits in common. "main" and "client" have entirely different histories.
main ... client

18 changed files with 727 additions and 796 deletions
Show Stats Expand all files Collapse all files

1
.gitignore vendored
View File

@ -19,7 +19,6 @@ node_modules
.env.development.local .env.development.local
.env.test.local .env.test.local
.env.production.local .env.production.local
.env
npm-debug.log* npm-debug.log*
yarn-debug.log* yarn-debug.log*

1012
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
package.json
View File

@ -16,10 +16,9 @@
"react": "^17.0.1", "react": "^17.0.1",
"react-bootstrap": "^1.5.2", "react-bootstrap": "^1.5.2",
"react-dom": "^17.0.1", "react-dom": "^17.0.1",
"react-google-login": "^5.2.2",
"react-lottie": "^1.2.3", "react-lottie": "^1.2.3",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-scripts": "^4.0.3", "react-scripts": "^4.0.0",
"styled-components": "^5.2.1", "styled-components": "^5.2.1",
"styled-icons": "^10.22.0", "styled-icons": "^10.22.0",
"web-vitals": "^0.2.4" "web-vitals": "^0.2.4"

4
public/index.html
View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <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="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
@ -11,7 +11,6 @@
content="Web site created using create-react-app" content="Web site created using create-react-app"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.jpg" /> <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 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/ 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"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- CSS Styles--> <!-- 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">

3
src/App.js
View File

@ -11,8 +11,6 @@ import NavBar from "./components/NavBar";
import FillingDetails from "./components/FillingDetails"; import FillingDetails from "./components/FillingDetails";
import Error404 from './components/Error404'; import Error404 from './components/Error404';
import Payment from './components/Payment' import Payment from './components/Payment'
import 'bootstrap/dist/css/bootstrap.min.css';
export default function App() { export default function App() {
const [userData, setUserData ] = useState({ const [userData, setUserData ] = useState({
token: undefined, token: undefined,
@ -21,7 +19,6 @@ export default function App() {
useEffect(() => { useEffect(() => {
const checkLoggedIn = async () => { const checkLoggedIn = async () => {
let token = localStorage.getItem("auth-token"); let token = localStorage.getItem("auth-token");
console.log("app js " + token);
if (token == null) { if (token == null) {
localStorage.setItem("auth-token",""); localStorage.setItem("auth-token","");
token =""; token ="";

2
src/components/Error404.js
View File

@ -4,7 +4,7 @@ import Lottie from 'react-lottie';
import animationData from '../lottie/box_error'; import animationData from '../lottie/box_error';
const Body = styled.div` 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%; font-size: 100%;
line-height: 1.5; line-height: 1.5;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;

4
src/components/HomePage.js
View File

@ -38,10 +38,6 @@ const ColoredSection = styled.section`
background-color:#66bfbf; background-color:#66bfbf;
color: #fff; color: #fff;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
`; `;

130
src/components/HouseCard.js
View File

@ -3,11 +3,6 @@ import styled from 'styled-components';
const Image = styled.img` const Image = styled.img`
display:block; display:block;
width: inherit;
height: inherit;
border-radius: 40px;
box-shadow: none;
object-fit:cover;
`; `;
const Tick = styled.input.attrs(props => ({ const Tick = styled.input.attrs(props => ({
type: "radio", 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` const Overlay = styled.div`
height: inherit; position: block;
width: inherit; bottom: 0;
transition: black 350ms ease; background: rgb(0, 0, 0);
background-color: transparent; background: rgba(0, 0, 0, 0.5);
border-radius: 40px; color: #f1f1f1;
position: absolute; width: 100%;
display: flex; transition: .5s ease;
align-items: center; opacity:0;
justify-content: center; color: white;
font-size: 20px;
padding: 20px;
`; text-align: center;
const CardTitle = styled.h2` margin-top: -90px;
margin-top: 10px;
margin-left: 10px;
font-family: sans-serif;
box-shadow: none;
color: #fff;
`; `;
const Paragraph = styled.p`
margin-top: 10px;
margin-left: 10px;
color: #fff;
`;
const Card = styled.div` const Card = styled.div`
width: 200px; width: 300px;
height: 200px; height: 300px;
border-radius: 40px; 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); box-shadow: 4px 4px 5px 5px rgba(0,0,0,0.01), -2px -2px 5px 5px rgba(0,0,0,0.22);
cursor: pointer; cursor: pointer;
transition: 0.4s; 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; opacity: 1;
} }
`; `;
@ -85,13 +95,13 @@ const Card = styled.div`
const HouseCard = (props) => { const HouseCard = (props) => {
return ( return (
<Card img = {props.img}>
<Overlay>
<Hover> <Card>
<CardTitle>{props.title ? props.title : "asdf"}</CardTitle> <Card className="card_image"> <Image src={props.img} alt="asdf" /></Card>
<Paragraph>{props.desc ? props.desc: "zxcv"}</Paragraph> <Card className="card_title">
</Hover> <p>Card Title</p>
</Overlay> </Card>
</Card> </Card>

108
src/components/LogInContainer.js
View File

@ -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 { useHistory,BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
import Register from './Register'; import Register from './Register';
import Login from './Login'; import Login from './Login';
@ -7,50 +7,28 @@ import styled, {css} from 'styled-components';
import {Button} from './miscellaneous/Styles'; import {Button} from './miscellaneous/Styles';
import UserContext from "../context/UserContext"; import UserContext from "../context/UserContext";
import {logout} from "./NavBar" import {logout} from "./NavBar"
import { GoogleLogin } from 'react-google-login';
import Axios from "axios";
import { Device} from './miscellaneous/Responsive';
const BaseApp = styled.div` const BaseApp = styled.div`
display: flex; display: flex;
color: white; color: white;
height:100vh; height:100vh;
flex-direction: column;
@media ${Device.laptop} {
flex-direction: row;
}
`; `;
const AppSide = styled.div` const AppSide = styled.div`
width: 50%;
background-color: #66bfbf; background-color: #66bfbf;
display: grid; display:flex;
grid-template-columns: repeat(auto-fit, 300px); flex-direction: column;
justify-content: center; justify-content: flex-end;
align-items: center;
height: 100vh;
width: 100vw;
@media ${Device.laptop} {
width: 50%;
}
`; `;
const AppForm = styled.div` const AppForm = styled.div`
width: 50%;
background-color: #ffffff; background-color: #ffffff;
padding: 25px 40px; padding: 25px 40px;
height: 100vh; overflow: auto;
width: 100vw;
@media ${Device.laptop} {
width: 50%;
overflow:auto
}
`; `;
const PageSwitcherContainer = styled.div` const PageSwitcherContainer = styled.div`
@ -160,73 +138,25 @@ const FormTitle = styled.div`
font-weight: 300; font-weight: 300;
margin-bottom: 50px; margin-bottom: 50px;
`; `;
const responseSuccessGoogle = (response) => { const LogInContainer = (props) => {
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 { userData, setUserData } = useContext(UserContext); const { userData, setUserData } = useContext(UserContext);
const [error, setError] = useState();
const [hasLogged, setHasLogged] = useState(false);
const history = useHistory(); 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 ( return (
<BaseApp> <BaseApp>
<meta name="google-signin-client_id"
content={`${process.env.REACT_APP_CLIENT_ID}.apps.googleusercontent.com`} />
<AppSide> <AppSide>
{!hasLogged ? ( <PlaneContainer>
<GoogleLogin <img src="/logo.jpg" alt="plane logo"></img>
clientId= {process.env.REACT_APP_CLIENT_ID} </PlaneContainer>
buttonText="Login with Google" <TextContainer>
onSuccess={responsePassGoogle} <BannerHeading>locaft</BannerHeading>
onFailure={responseFailGoogle} <BannerText>Sit back, let us move you</BannerText>
cookiePolicy={'single_host_origin'}
/>
</TextContainer>
): ( <SkyContainer>
<React.Fragment> <img src="/skyscraper.png" alt="skyscraper"></img>
<p> username: {userData.user.username}</p> </SkyContainer>
<p> email: {userData.user.email}</p>
<p> pricing: {userData.user.pricing}</p>
</React.Fragment>
) }
</AppSide> </AppSide>
<AppForm> <AppForm>
{!userData.user ? ( {!userData.user ? (

1
src/components/Login.js
View File

@ -23,7 +23,6 @@ const Login = () => {
"https://server-locaft.herokuapp.com/users/login", "https://server-locaft.herokuapp.com/users/login",
loginUser loginUser
); );
console.dir("login res " + loginRes.data.user);
setUserData({ setUserData({
token: loginRes.data.token, token: loginRes.data.token,
user: loginRes.data.user, user: loginRes.data.user,

1
src/components/NavBar.js
View File

@ -50,6 +50,7 @@ const List = styled.ul`
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 13px 50px;
flex-wrap: nowrap; flex-wrap: nowrap;
margin-bottom: 0px !important; margin-bottom: 0px !important;

31
src/components/Options.js
View File

@ -5,19 +5,11 @@ import Footer from "./Footer";
import styled from 'styled-components'; import styled from 'styled-components';
const CardList = styled.div` const CardList = styled.div`
display: grid; z-index: 0;
position: relative; width: 100%;
margin: 15px; display: flex;
grid-template-rows: repeat(auto-fill,minmax(200px,1fr)); justify-content: space-around;
grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); flex-wrap: wrap;
grid-gap: 30px;
align-items: center;
justify-items: center;
`; `;
export default function Options() { export default function Options() {
@ -86,23 +78,12 @@ export default function Options() {
</div> </div>
<p id="content" className="text-center">Step Number 1</p>
<div id="main"> <div id="main">
<p id="content" className="text-center">Step Number 1</p>
<button id="previousBtn" >Previous</button> <button id="previousBtn" >Previous</button>
<button id="nextBtn">Next</button> <button id="nextBtn">Next</button>
<button id="finishBtn" >Finish</button> <button id="finishBtn" >Finish</button>
</div> </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 /> <Footer />
</div> </div>
) )

20
src/components/PricingPlan.js
View File

@ -6,8 +6,26 @@ import UserContext from "../context/UserContext";
import { useHistory } from "react-router-dom"; import { useHistory } from "react-router-dom";
import Axios from 'axios'; import Axios from 'axios';
import { Button } from './miscellaneous/Styles'; 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` const PricingPlanContainer = styled.div`
display:flex; display:flex;

9
src/components/Sidebar.js
View File

@ -13,6 +13,7 @@ const StyledMenu = styled.nav`
height: 100vh; height: 100vh;
text-align: left; text-align: left;
padding: 2rem; padding: 2rem;
position: absolute;
top: 0; top: 0;
left: 0; left: 0;
transition: transform 0.3s ease-in-out; 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); const { userData, setUserData } = useContext(UserContext);
return ( return (
<StyledMenu open={open} > <StyledMenu open={props.open}>
<a href="/#about-us"onClick={() => setOpen(false)}> <a href="/#about-us">
<span role="img" aria-label="about us">💁🏻‍♂️</span> <span role="img" aria-label="about us">💁🏻‍♂️</span>
About us About us
</a> </a>
@ -54,7 +55,7 @@ const Menu = ({open, setOpen}) => {
<span role="img" aria-label="pricing">💸</span> <span role="img" aria-label="pricing">💸</span>
Pricing Pricing
</a> </a>
<a href="/#footer"onClick={() => setOpen(false)}> <a href="/#footer">
<span role="img" aria-label="contact us">📩</span> <span role="img" aria-label="contact us">📩</span>
Contact Contact
</a> </a>

25
src/components/miscellaneous/Modal.js
View File

@ -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>
</>
);
}

19
src/components/miscellaneous/Responsive.js
View File

@ -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
src/index.css
View File

@ -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=Roboto:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu'); @import url('https://fonts.googleapis.com/css?family=Montserrat|Ubuntu');
* { * {
box-sizing: border-box; box-sizing: border-box;
font-family: "Roboto", sans-serif; font-family: "Roboto", sans-serif;

7
src/options.css
View File

@ -7,13 +7,6 @@
margin-bottom: 40px; margin-bottom: 40px;
} }
#main {
display:flex;
justify-content: center;
align-items: center;
}
.step { .step {
text-align: center; text-align: center;
} }