Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update login.tsx #886

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Update login.tsx #886

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
149 changes: 32 additions & 117 deletions pages/auth/login.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,86 +1,36 @@
import {
Box,
Card,
CardContent,
Container,
Typography,
useMediaQuery,
useTheme,
} from '@mui/material';
import type { NextPage } from 'next';
import { Box, Card, CardContent, Container, Typography, useMediaQuery, useTheme } from '@mui/material';
import { NextPage } from 'next';
import { GetStaticPropsContext } from 'next';
import { useTranslations } from 'next-intl';
import Head from 'next/head';
import Image from 'next/legacy/image';
import Image from 'next/image';
import { useRouter } from 'next/router';
import { useEffect } from 'react';
import Link from '../../components/common/Link';
import LoginForm from '../../components/forms/LoginForm';
import PartnerHeader from '../../components/layout/PartnerHeader';
import {
GET_STARTED_WITH_BLOOM_CLICKED,
RESET_PASSWORD_HERE_CLICKED,
generateGetStartedPartnerEvent,
} from '../../constants/events';
import { GET_STARTED_WITH_BLOOM_CLICKED, RESET_PASSWORD_HERE_CLICKED, generateGetStartedPartnerEvent } from '../../constants/events';
import { getAllPartnersContent } from '../../constants/partners';
import { useTypedSelector } from '../../hooks/store';
import welcomeToBloom from '../../public/welcome_to_bloom.svg';
import illustrationBloomHeadYellow from '../../public/illustration_bloom_head_yellow.svg';
import illustrationLeafMix from '../../public/illustration_leaf_mix.svg';
import welcomeToBloom from '../../public/welcome_to_bloom.svg';
import { rowStyle } from '../../styles/common';
import logEvent, { getEventUserData } from '../../utils/logEvent';

const containerStyle = {
...rowStyle,
backgroundColor: 'primary.light',
} as const;

const textContainerStyle = {
maxWidth: 600,
width: { xs: '100%', md: '45%' },
} as const;

const formCardStyle = {
width: { xs: '100%', sm: '70%', md: '45%' },
alignSelf: 'flex-start',
} as const;

const imageContainerStyle = {
position: 'relative',
width: { xs: 120, md: 160 },
height: { xs: 70, md: 80 },
marginBottom: 3,
marginTop: { xs: 0, md: 2 },
} as const;

const Login: NextPage = () => {
const t = useTranslations('Auth');
const tS = useTranslations('Shared');
const theme = useTheme();
const router = useRouter();
const isSmallScreen = useMediaQuery(theme.breakpoints.down('md'));

const userToken = useTypedSelector((state) => state.user.token);
const userId = useTypedSelector((state) => state.user.id);
const userCreatedAt = useTypedSelector((state) => state.user.createdAt);
const partnerAccesses = useTypedSelector((state) => state.partnerAccesses);
const partnerAdmin = useTypedSelector((state) => state.partnerAdmin);
const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);

const headerProps = {
partnerLogoSrc: welcomeToBloom,
partnerLogoAlt: 'alt.welcomeToBloom',
imageSrc: illustrationBloomHeadYellow,
imageAlt: 'alt.bloomHead',
};
const { token: userToken, id: userId, createdAt: userCreatedAt } = useTypedSelector(state => state.user);
const { partnerAccesses, partnerAdmin } = useTypedSelector(state => state);

const allPartnersContent = getAllPartnersContent();
const eventUserData = getEventUserData(userCreatedAt, partnerAccesses, partnerAdmin);

useEffect(() => {
// Redirect if the user is on the login page but is already logged in and their data has been retrieved from the backend
if (!userId) return;
// Checking if the query type is a string to keep typescript happy
// because a query value can be an array
const returnUrl = typeof router.query.return_url === 'string' ? router.query.return_url : null;

if (!!partnerAdmin?.id) {
Expand All @@ -92,79 +42,44 @@ const Login: NextPage = () => {
}
}, [userId, partnerAdmin?.id, router]);

const ExtraContent = () => {
return (
<>
<Box sx={imageContainerStyle}>
<Image alt={tS('alt.leafMix')} src={illustrationLeafMix} layout="fill" />
</Box>
<Typography variant="h3" component="h3">
{t('login.newUserTitle')}
</Typography>
<Typography>
<Link
onClick={() => {
logEvent(GET_STARTED_WITH_BLOOM_CLICKED, eventUserData);
}}
href="/"
>
{t('getStartedBloom')}
const ExtraContent = () => (
<>
<Box sx={{ position: 'relative', width: { xs: 120, md: 160 }, height: { xs: 70, md: 80 }, marginBottom: 3, marginTop: { xs: 0, md: 2 } }}>
<Image alt={tS('alt.leafMix')} src={illustrationLeafMix} layout="fill" />
</Box>
<Typography variant="h3" component="h3">{t('login.newUserTitle')}</Typography>
<Typography>
<Link onClick={() => logEvent(GET_STARTED_WITH_BLOOM_CLICKED, eventUserData)} href="/">{t('getStartedBloom')}</Link>
</Typography>
{getAllPartnersContent()?.map(partner => (
<Typography key={`${partner.name}-link`} mt={0.5}>
<Link mt="1rem !important" href={`/welcome/${partner.name.toLowerCase()}`} onClick={() => logEvent(generateGetStartedPartnerEvent(partner.name), eventUserData)}>
{t.rich('getStartedWith', { partnerName: partner.name })}
</Link>
</Typography>

{allPartnersContent?.map((partner) => (
<Typography key={`${partner.name}-link`} mt={0.5}>
<Link
mt="1rem !important"
href={`/welcome/${partner.name.toLowerCase()}`}
onClick={() => {
logEvent(generateGetStartedPartnerEvent(partner.name), eventUserData);
}}
>
{t.rich('getStartedWith', { partnerName: partner.name })}
</Link>
</Typography>
))}
</>
);
};
))}
</>
);

return (
<Box>
<Head>
<title>{t('login.title')}</title>
</Head>
<PartnerHeader
partnerLogoSrc={headerProps.partnerLogoSrc}
partnerLogoAlt={headerProps.partnerLogoAlt}
imageSrc={headerProps.imageSrc}
imageAlt={headerProps.imageAlt}
/>
<Container sx={containerStyle}>
<Box sx={textContainerStyle}>
<Typography pb={2} variant="subtitle1" component="p">
{t('introduction')}
</Typography>
<PartnerHeader partnerLogoSrc={welcomeToBloom} partnerLogoAlt="alt.welcomeToBloom" imageSrc={illustrationBloomHeadYellow} imageAlt="alt.bloomHead" />
<Container sx={{ display: 'flex', backgroundColor: 'primary.light', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', padding: theme.spacing(2, 0) }}>
<Box sx={{ maxWidth: 600, width: { xs: '100%', md: '45%' } }}>
<Typography pb={2} variant="subtitle1" component="p">{t('introduction')}</Typography>
{!isSmallScreen && <ExtraContent />}
</Box>
<Card sx={formCardStyle}>
<Card sx={{ width: { xs: '100%', sm: '70%', md: '45%' }, alignSelf: 'flex-start', mt: isSmallScreen ? 2 : 0 }}>
<CardContent>
<Typography variant="h2" component="h2">
{t('login.title')}
</Typography>

<Typography variant="h2" component="h2">{t('login.title')}</Typography>
<LoginForm />
<Typography textAlign="center">
{t.rich('login.resetPasswordLink', {
resetLink: (children) => (
<Link
onClick={() => {
logEvent(RESET_PASSWORD_HERE_CLICKED, eventUserData);
}}
href="/auth/reset-password"
>
{children}
</Link>
resetLink: children => (
<Link onClick={() => logEvent(RESET_PASSWORD_HERE_CLICKED, eventUserData)} href="/auth/reset-password">{children}</Link>
),
})}
</Typography>
Expand Down