2021-06-04 20:43:13 +00:00
|
|
|
import React, { useContext, useEffect, useState } from 'react';
|
|
|
|
import Carousel from 'react-bootstrap/Carousel';
|
|
|
|
import Button from 'react-bootstrap/Button';
|
|
|
|
import styled from 'styled-components';
|
2021-06-04 07:57:48 +00:00
|
|
|
import { AppContext } from './_app';
|
2021-06-04 20:43:13 +00:00
|
|
|
import Login from 'components/Login';
|
|
|
|
import { useRouter } from 'next/router';
|
|
|
|
import { getData, LS_KEYS } from 'utils/storage/localStorage';
|
|
|
|
import EnteSpinner from 'components/EnteSpinner';
|
|
|
|
import SignUp from 'components/SignUp';
|
|
|
|
import constants from 'utils/strings/constants';
|
2021-07-11 17:57:47 +00:00
|
|
|
import localForage from 'utils/storage/localForage';
|
|
|
|
import IncognitoWarning from 'components/IncognitoWarning';
|
2021-08-04 07:04:49 +00:00
|
|
|
import { logError } from 'utils/sentry';
|
2022-01-25 09:00:28 +00:00
|
|
|
import { getAlbumSiteHost, PAGES } from 'constants/pages';
|
|
|
|
|
|
|
|
const ALBUM_SITE_HOST = getAlbumSiteHost();
|
2021-06-04 20:43:13 +00:00
|
|
|
|
|
|
|
const Container = styled.div`
|
|
|
|
display: flex;
|
|
|
|
flex: 1;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
2021-06-04 21:20:53 +00:00
|
|
|
background-color: #000;
|
2021-06-04 20:43:13 +00:00
|
|
|
|
2021-08-13 02:38:38 +00:00
|
|
|
@media (max-width: 1024px) {
|
2021-06-04 20:43:13 +00:00
|
|
|
flex-direction: column;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const SlideContainer = styled.div`
|
|
|
|
flex: 1;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
text-align: center;
|
|
|
|
|
2021-08-13 02:38:38 +00:00
|
|
|
@media (max-width: 1024px) {
|
2021-06-04 20:43:13 +00:00
|
|
|
flex-grow: 0;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const DesktopBox = styled.div`
|
2021-06-04 20:53:26 +00:00
|
|
|
flex: 1;
|
2021-06-04 20:43:13 +00:00
|
|
|
height: 100%;
|
|
|
|
padding: 10px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
background-color: #242424;
|
|
|
|
|
2021-08-13 02:38:38 +00:00
|
|
|
@media (max-width: 1024px) {
|
2021-06-04 20:43:13 +00:00
|
|
|
display: none;
|
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const MobileBox = styled.div`
|
|
|
|
display: none;
|
|
|
|
|
2021-08-13 02:38:38 +00:00
|
|
|
@media (max-width: 1024px) {
|
2021-06-04 20:43:13 +00:00
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2021-06-04 21:20:53 +00:00
|
|
|
padding: 40px 10px;
|
2021-06-04 20:43:13 +00:00
|
|
|
}
|
|
|
|
`;
|
|
|
|
|
|
|
|
const SideBox = styled.div`
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
2021-06-04 20:58:08 +00:00
|
|
|
min-width: 320px;
|
2021-06-04 20:43:13 +00:00
|
|
|
`;
|
|
|
|
|
|
|
|
const TextContainer = styled.div`
|
|
|
|
padding: 20px;
|
|
|
|
max-width: 300px;
|
|
|
|
margin: 0 auto;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const UpperText = styled(TextContainer)`
|
|
|
|
font-size: 24px;
|
|
|
|
max-width: 100%;
|
|
|
|
margin-bottom: 20px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const FeatureText = styled.div`
|
2021-08-27 08:52:14 +00:00
|
|
|
color: #51cd7c;
|
2021-06-04 20:43:13 +00:00
|
|
|
font-weight: bold;
|
|
|
|
padding-top: 20px;
|
|
|
|
font-size: 24px;
|
|
|
|
`;
|
|
|
|
|
|
|
|
const Img = styled.img`
|
|
|
|
height: 250px;
|
|
|
|
object-fit: contain;
|
2021-06-04 22:15:36 +00:00
|
|
|
|
2021-08-13 02:38:38 +00:00
|
|
|
@media (max-width: 400px) {
|
2021-06-04 22:15:36 +00:00
|
|
|
height: 180px;
|
|
|
|
}
|
2021-06-04 20:43:13 +00:00
|
|
|
`;
|
2021-05-29 06:27:52 +00:00
|
|
|
|
2021-06-04 07:57:48 +00:00
|
|
|
export default function LandingPage() {
|
2021-06-04 20:43:13 +00:00
|
|
|
const router = useRouter();
|
2021-06-04 07:57:48 +00:00
|
|
|
const appContext = useContext(AppContext);
|
2021-06-04 20:43:13 +00:00
|
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
const [showLogin, setShowLogin] = useState(true);
|
2021-07-11 17:57:47 +00:00
|
|
|
const [blockUsage, setBlockUsage] = useState(false);
|
2020-09-12 21:53:41 +00:00
|
|
|
useEffect(() => {
|
2021-06-04 07:57:48 +00:00
|
|
|
appContext.showNavBar(false);
|
2022-01-25 08:39:56 +00:00
|
|
|
const currentURL = new URL(window.location.href);
|
|
|
|
currentURL.pathname = router.pathname;
|
|
|
|
if (
|
|
|
|
currentURL.host === ALBUM_SITE_HOST &&
|
|
|
|
currentURL.pathname !== PAGES.SHARED_ALBUMS
|
|
|
|
) {
|
|
|
|
handleAlbumsRedirect(currentURL);
|
|
|
|
} else {
|
|
|
|
handleNormalRedirect();
|
|
|
|
}
|
2020-09-12 21:53:41 +00:00
|
|
|
}, []);
|
|
|
|
|
2022-01-25 09:00:28 +00:00
|
|
|
const handleAlbumsRedirect = async (currentURL: URL) => {
|
|
|
|
await router.push({
|
2022-01-25 08:39:56 +00:00
|
|
|
pathname: PAGES.SHARED_ALBUMS,
|
|
|
|
search: currentURL.search,
|
|
|
|
hash: currentURL.hash,
|
|
|
|
});
|
2022-01-25 09:00:28 +00:00
|
|
|
await router.push(
|
|
|
|
{
|
|
|
|
pathname: PAGES.SHARED_ALBUMS,
|
|
|
|
search: currentURL.search,
|
|
|
|
hash: currentURL.hash,
|
|
|
|
},
|
|
|
|
{
|
|
|
|
pathname: PAGES.ROOT,
|
|
|
|
search: currentURL.search,
|
|
|
|
hash: currentURL.hash,
|
|
|
|
}
|
|
|
|
);
|
2022-01-25 08:39:56 +00:00
|
|
|
setLoading(false);
|
|
|
|
};
|
|
|
|
|
|
|
|
const handleNormalRedirect = async () => {
|
|
|
|
const user = getData(LS_KEYS.USER);
|
|
|
|
if (user?.email) {
|
|
|
|
await router.push(PAGES.VERIFY);
|
|
|
|
}
|
|
|
|
try {
|
|
|
|
await localForage.ready();
|
|
|
|
} catch (e) {
|
|
|
|
logError(e, 'usage in incognito mode tried');
|
|
|
|
setBlockUsage(true);
|
|
|
|
} finally {
|
|
|
|
setLoading(false);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2021-06-04 20:43:13 +00:00
|
|
|
const signUp = () => setShowLogin(false);
|
|
|
|
const login = () => setShowLogin(true);
|
|
|
|
|
2021-08-13 02:38:38 +00:00
|
|
|
return (
|
|
|
|
<Container>
|
|
|
|
{loading ? (
|
|
|
|
<EnteSpinner />
|
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<SlideContainer>
|
|
|
|
<UpperText>{constants.HERO_HEADER()}</UpperText>
|
|
|
|
<Carousel controls={false}>
|
|
|
|
<Carousel.Item>
|
|
|
|
<Img src="/images/slide-1.png" />
|
|
|
|
<FeatureText>
|
|
|
|
{constants.HERO_SLIDE_1_TITLE}
|
|
|
|
</FeatureText>
|
|
|
|
<TextContainer>
|
|
|
|
{constants.HERO_SLIDE_1}
|
|
|
|
</TextContainer>
|
|
|
|
</Carousel.Item>
|
|
|
|
<Carousel.Item>
|
|
|
|
<Img src="/images/slide-2.png" />
|
|
|
|
<FeatureText>
|
|
|
|
{constants.HERO_SLIDE_2_TITLE}
|
|
|
|
</FeatureText>
|
|
|
|
<TextContainer>
|
|
|
|
{constants.HERO_SLIDE_2}
|
|
|
|
</TextContainer>
|
|
|
|
</Carousel.Item>
|
|
|
|
<Carousel.Item>
|
|
|
|
<Img src="/images/slide-3.png" />
|
|
|
|
<FeatureText>
|
|
|
|
{constants.HERO_SLIDE_3_TITLE}
|
|
|
|
</FeatureText>
|
|
|
|
<TextContainer>
|
|
|
|
{constants.HERO_SLIDE_3}
|
|
|
|
</TextContainer>
|
|
|
|
</Carousel.Item>
|
|
|
|
</Carousel>
|
|
|
|
</SlideContainer>
|
|
|
|
<MobileBox>
|
|
|
|
<Button
|
|
|
|
variant="outline-success"
|
|
|
|
size="lg"
|
2021-08-24 06:25:57 +00:00
|
|
|
style={{ padding: '10px 50px' }}
|
2021-08-31 04:58:58 +00:00
|
|
|
onClick={() => router.push(PAGES.SIGNUP)}>
|
2021-08-13 02:38:38 +00:00
|
|
|
{constants.SIGN_UP}
|
|
|
|
</Button>
|
|
|
|
<br />
|
|
|
|
<Button
|
|
|
|
variant="link"
|
|
|
|
size="lg"
|
|
|
|
style={{ color: '#fff', padding: '10px 50px' }}
|
2021-08-31 04:58:58 +00:00
|
|
|
onClick={() => router.push(PAGES.LOGIN)}>
|
2021-08-27 09:35:56 +00:00
|
|
|
{constants.LOGIN}
|
2021-08-13 02:38:38 +00:00
|
|
|
</Button>
|
|
|
|
</MobileBox>
|
|
|
|
<DesktopBox>
|
|
|
|
<SideBox>
|
|
|
|
{showLogin ? (
|
|
|
|
<Login signUp={signUp} />
|
|
|
|
) : (
|
|
|
|
<SignUp login={login} />
|
|
|
|
)}
|
|
|
|
</SideBox>
|
|
|
|
</DesktopBox>
|
|
|
|
{blockUsage && <IncognitoWarning />}
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Container>
|
|
|
|
);
|
2020-09-09 21:09:51 +00:00
|
|
|
}
|