mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Refactor login (#748)

Browse Source 
* wip refactor login

* wip refactor login

* Fix lint conflicts

* Complete Sign In only

* Feature complete

* Fix test

* Fix test
This commit is contained in:
Charles Bochet
2023-07-21 22:05:45 -07:00
committed by GitHub
parent 725a46adfa
commit 775b4c353d
49 changed files with 758 additions and 764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
front/src/modules/auth/components/ui/Logo.tsx → front/src/modules/auth/components/Logo.tsx
View File

@ -4,6 +4,8 @@ type Props = React.ComponentProps<'div'>;
const StyledLogo = styled.div`
height: 48px;
margin-bottom: ${({ theme }) => theme.spacing(4)};
margin-top: ${({ theme }) => theme.spacing(4)};
img {
height: 100%;

3
front/src/modules/auth/components/ui/Modal.tsx → front/src/modules/auth/components/Modal.tsx
View File

@ -11,9 +11,6 @@ const StyledContainer = styled.div`
flex-direction: column;
padding: ${({ theme }) => theme.spacing(10)};
width: calc(400px - ${({ theme }) => theme.spacing(10 * 2)});
> * + * {
margin-top: ${({ theme }) => theme.spacing(8)};
}
`;
export function AuthModal({ children, ...restProps }: Props) {

71
front/src/modules/auth/components/RequireOnboarded.tsx
View File

@ -1,71 +0,0 @@
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { useOnboardingStatus } from '../hooks/useOnboardingStatus';
import { OnboardingStatus } from '../utils/getOnboardingStatus';
const EmptyContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
`;
const fadeIn = keyframes`
from {
opacity: 0;
}
to {
opacity: 1;
}
`;
const FadeInStyle = styled.div`
animation: ${fadeIn} 1s forwards;
opacity: 0;
`;
export function RequireOnboarded({
children,
}: {
children: JSX.Element;
}): JSX.Element {
const navigate = useNavigate();
const onboardingStatus = useOnboardingStatus();
useEffect(() => {
if (onboardingStatus === OnboardingStatus.OngoingUserCreation) {
navigate('/auth');
} else if (onboardingStatus === OnboardingStatus.OngoingWorkspaceCreation) {
navigate('/auth/create/workspace');
} else if (onboardingStatus === OnboardingStatus.OngoingProfileCreation) {
navigate('/auth/create/profile');
}
}, [onboardingStatus, navigate]);
if (onboardingStatus && onboardingStatus !== OnboardingStatus.Completed) {
return (
<EmptyContainer>
<FadeInStyle>
{onboardingStatus === OnboardingStatus.OngoingUserCreation && (
<div>
Please hold on a moment, we're directing you to our login page...
</div>
)}
{onboardingStatus !== OnboardingStatus.OngoingUserCreation && (
<div>
Please hold on a moment, we're directing you to our onboarding
flow...
</div>
)}
</FadeInStyle>
</EmptyContainer>
);
}
return children;
}

57
front/src/modules/auth/components/RequireOnboarding.tsx
View File

@ -1,57 +0,0 @@
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { keyframes } from '@emotion/react';
import styled from '@emotion/styled';
import { useOnboardingStatus } from '../hooks/useOnboardingStatus';
import { OnboardingStatus } from '../utils/getOnboardingStatus';
const EmptyContainer = styled.div`
align-items: center;
display: flex;
height: 100%;
justify-content: center;
width: 100%;
`;
const fadeIn = keyframes`
from {
opacity: 0;
}
to {
opacity: 1;
}
`;
const FadeInStyle = styled.div`
animation: ${fadeIn} 1s forwards;
opacity: 0;
`;
export function RequireOnboarding({
children,
}: {
children: JSX.Element;
}): JSX.Element {
const navigate = useNavigate();
const onboardingStatus = useOnboardingStatus();
useEffect(() => {
if (onboardingStatus === OnboardingStatus.Completed) {
navigate('/');
}
}, [navigate, onboardingStatus]);
if (onboardingStatus === OnboardingStatus.Completed) {
return (
<EmptyContainer>
<FadeInStyle>
Please hold on a moment, we're directing you to the app...
</FadeInStyle>
</EmptyContainer>
);
}
return children;
}

1
front/src/modules/auth/components/ui/SubTitle.tsx → front/src/modules/auth/components/SubTitle.tsx
View File

@ -7,7 +7,6 @@ type OwnProps = {
const StyledSubTitle = styled.div`
color: ${({ theme }) => theme.font.color.secondary};
margin-top: ${({ theme }) => theme.spacing(2)};
`;
export function SubTitle({ children }: OwnProps): JSX.Element {

18
front/src/modules/auth/components/ui/Title.tsx → front/src/modules/auth/components/Title.tsx
View File

@ -1,7 +1,7 @@
import React from 'react';
import styled from '@emotion/styled';
import { AnimatedTextWord } from '@/ui/animation/components/AnimatedTextWord';
import { AnimatedEaseIn } from '../../ui/animation/components/AnimatedEaseIn';
type Props = React.PropsWithChildren & {
animate?: boolean;
@ -11,17 +11,17 @@ const StyledTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
`;
const StyledAnimatedTextWord = styled(AnimatedTextWord)`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
margin-bottom: ${({ theme }) => theme.spacing(4)};
margin-top: ${({ theme }) => theme.spacing(4)};
`;
export function Title({ children, animate = false }: Props) {
if (animate && typeof children === 'string') {
return <StyledAnimatedTextWord text={children} />;
if (animate) {
return (
<StyledTitle>
<AnimatedEaseIn>{children}</AnimatedEaseIn>
</StyledTitle>
);
}
return <StyledTitle>{children}</StyledTitle>;

16
front/src/modules/auth/components/ui/FooterNote.tsx
View File

@ -1,16 +0,0 @@
import React from 'react';
import styled from '@emotion/styled';
type Props = React.ComponentProps<'div'>;
const StyledContainer = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
font-size: ${({ theme }) => theme.font.size.sm};
text-align: center;
`;
export function FooterNote(props: Props) {
return <StyledContainer {...props} />;
}

13
front/src/modules/auth/components/ui/HorizontalSeparator.tsx
View File

@ -1,13 +0,0 @@
import styled from '@emotion/styled';
const Separator = styled.div`
background-color: ${({ theme }) => theme.border.color.medium};
height: 1px;
margin-bottom: ${({ theme }) => theme.spacing(3)};
margin-top: ${({ theme }) => theme.spacing(3)};
width: 100%;
`;
export function HorizontalSeparator(): JSX.Element {
return <Separator />;
}