2021-03-17 18:44:15 -07:00
|
|
|
import React from 'react';
|
|
|
|
import { BrowserRouter, Route, NavLink, Switch,withRouter } from 'react-router-dom';
|
|
|
|
import Register from './Register';
|
|
|
|
import Login from './Login';
|
|
|
|
import Footer from './Footer';
|
2021-03-28 11:24:21 -07:00
|
|
|
import styled, {css} from 'styled-components';
|
2021-03-17 18:44:15 -07:00
|
|
|
|
2021-03-26 11:24:56 -07:00
|
|
|
const BaseApp = styled.div`
|
|
|
|
display: flex;
|
|
|
|
color: white;
|
|
|
|
height:100vh;
|
|
|
|
|
|
|
|
|
|
|
|
`;
|
|
|
|
const AppSide = styled.div`
|
|
|
|
width: 50%;
|
|
|
|
background-color: #66bfbf;
|
|
|
|
display:flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
2021-03-27 11:22:22 -07:00
|
|
|
`;
|
|
|
|
const AppForm = styled.div`
|
|
|
|
|
|
|
|
width: 50%;
|
|
|
|
background-color: #ffffff;
|
|
|
|
padding: 25px 40px;
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
`;
|
2021-03-28 11:24:21 -07:00
|
|
|
const PageSwitcherContainer = styled.div`
|
2021-03-27 11:22:22 -07:00
|
|
|
|
|
|
|
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;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: flex-end;
|
|
|
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
const BannerText = styled.p`
|
|
|
|
color: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;
|
2021-03-28 11:24:21 -07:00
|
|
|
text-decoration: none !important;
|
2021-03-27 11:22:22 -07:00
|
|
|
|
2021-03-28 11:24:21 -07:00
|
|
|
&.active{
|
2021-03-27 11:22:22 -07:00
|
|
|
background-color: #66bfbf;
|
|
|
|
color: white;
|
2021-03-28 11:24:21 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
&: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)`
|
2021-03-27 11:22:22 -07:00
|
|
|
|
2021-03-28 11:24:21 -07:00
|
|
|
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;
|
|
|
|
}
|
2021-03-27 11:22:22 -07:00
|
|
|
|
|
|
|
|
|
|
|
|
2021-03-26 11:24:56 -07:00
|
|
|
`;
|
2021-03-17 18:44:15 -07:00
|
|
|
|
2021-03-28 11:24:21 -07:00
|
|
|
const FormTitle = styled.div`
|
|
|
|
color: #000000;
|
|
|
|
font-weight: 300;
|
|
|
|
margin-bottom: 50px;
|
|
|
|
|
|
|
|
|
|
|
|
`;
|
2021-03-17 18:44:15 -07:00
|
|
|
const LogInContainer = (props) => {
|
|
|
|
return (
|
|
|
|
<BrowserRouter basename="user">
|
2021-03-28 11:24:21 -07:00
|
|
|
<BaseApp>
|
|
|
|
<AppSide>
|
|
|
|
<PlaneContainer>
|
2021-03-17 18:44:15 -07:00
|
|
|
<img src="/logo.jpg" alt="plane logo"></img>
|
2021-03-28 11:24:21 -07:00
|
|
|
</PlaneContainer>
|
|
|
|
<TextContainer>
|
|
|
|
<BannerHeading>locaft</BannerHeading>
|
|
|
|
<BannerText>Sit back, let us move you</BannerText>
|
2021-03-17 18:44:15 -07:00
|
|
|
|
2021-03-28 11:24:21 -07:00
|
|
|
</TextContainer>
|
|
|
|
<SkyContainer>
|
2021-03-19 05:44:30 -07:00
|
|
|
<img src="/skyscraper.png" alt="skyscraper"></img>
|
2021-03-28 11:24:21 -07:00
|
|
|
</SkyContainer>
|
|
|
|
</AppSide>
|
|
|
|
<AppForm>
|
|
|
|
<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>
|
2021-03-17 18:44:15 -07:00
|
|
|
<Switch>
|
|
|
|
<Route path="/register" component={Register} />
|
|
|
|
<Route path="/login" component={Login} />
|
|
|
|
</Switch>
|
|
|
|
<p>
|
|
|
|
|
|
|
|
</p>
|
|
|
|
|
2021-03-28 11:24:21 -07:00
|
|
|
</AppForm>
|
2021-03-17 18:44:15 -07:00
|
|
|
|
2021-03-28 11:24:21 -07:00
|
|
|
</BaseApp>
|
2021-03-17 18:44:15 -07:00
|
|
|
<Footer background="blue"/>
|
|
|
|
</BrowserRouter>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
export default withRouter(LogInContainer);
|
|
|
|
|