admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: onboarding ui flow (#464)

Browse Source 
* feat: onboarding ui flow

* fix: route naming and auth

* fix: clean unused imports

* fix: remove react.fc

* fix: infra dev remove package.json

* fix: remove usefull memoization

* fix: button stories

* fix: use type instead of interface

* fix: remove debug
This commit is contained in:
Jérémy M
2023-06-30 08:26:06 +02:00
committed by GitHub
parent 3731380ce6
commit 433962321a
45 changed files with 1461 additions and 401 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
front/src/pages/auth/CreateProfile.tsx Normal file
View File

@ -0,0 +1,92 @@
import { useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { Section } from '@/auth/components/ui/Section';
import { SubTitle } from '@/auth/components/ui/SubTitle';
import { Title } from '@/auth/components/ui/Title';
import { MainButton } from '@/ui/components/buttons/MainButton';
import { ImageInput } from '@/ui/components/inputs/ImageInput';
import { TextInput } from '@/ui/components/inputs/TextInput';
const StyledContentContainer = styled.div`
width: 100%;
> * + * {
margin-top: ${({ theme }) => theme.spacing(6)};
}
`;
const StyledSectionContainer = styled.div`
> * + * {
margin-top: ${({ theme }) => theme.spacing(4)};
}
`;
const StyledButtonContainer = styled.div`
width: 200px;
`;
const StyledComboInputContainer = styled.div`
display: flex;
flex-direction: row;
> * + * {
margin-left: ${({ theme }) => theme.spacing(4)};
}
`;
export function CreateProfile() {
const navigate = useNavigate();
const handleCreate = useCallback(async () => {
navigate('/');
}, [navigate]);
useHotkeys(
'enter',
() => {
handleCreate();
},
{
enableOnContentEditable: true,
enableOnFormTags: true,
},
[handleCreate],
);
return (
<>
<Title>Create profile</Title>
<SubTitle>How you'll be identify on the app.</SubTitle>
<StyledContentContainer>
<StyledSectionContainer>
<Section title="Picture" />
<ImageInput picture={null} disabled />
</StyledSectionContainer>
<StyledSectionContainer>
<Section
title="Name"
description="Your name as it will be displayed on the app"
/>
<StyledComboInputContainer>
<TextInput
label="First Name"
value=""
placeholder="Tim"
fullWidth
/>
<TextInput
label="Last Name"
value=""
placeholder="Cook"
fullWidth
/>
</StyledComboInputContainer>
</StyledSectionContainer>
</StyledContentContainer>
<StyledButtonContainer>
<MainButton title="Continue" onClick={handleCreate} fullWidth />
</StyledButtonContainer>
</>
);
}

74
front/src/pages/auth/CreateWorkspace.tsx Normal file
View File

@ -0,0 +1,74 @@
import { useCallback } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { Section } from '@/auth/components/ui/Section';
import { SubTitle } from '@/auth/components/ui/SubTitle';
import { Title } from '@/auth/components/ui/Title';
import { MainButton } from '@/ui/components/buttons/MainButton';
import { ImageInput } from '@/ui/components/inputs/ImageInput';
import { TextInput } from '@/ui/components/inputs/TextInput';
const StyledContentContainer = styled.div`
width: 100%;
> * + * {
margin-top: ${({ theme }) => theme.spacing(6)};
}
`;
const StyledSectionContainer = styled.div`
> * + * {
margin-top: ${({ theme }) => theme.spacing(4)};
}
`;
const StyledButtonContainer = styled.div`
width: 200px;
`;
export function CreateWorkspace() {
const navigate = useNavigate();
const handleCreate = useCallback(async () => {
navigate('/auth/create/profile');
}, [navigate]);
useHotkeys(
'enter',
() => {
handleCreate();
},
{
enableOnContentEditable: true,
enableOnFormTags: true,
},
[handleCreate],
);
return (
<>
<Title>Create your workspace</Title>
<SubTitle>
A shared environment where you will be able to manage your customer
relations with your team.
</SubTitle>
<StyledContentContainer>
<StyledSectionContainer>
<Section title="Workspace logo" />
<ImageInput picture={null} disabled />
</StyledSectionContainer>
<StyledSectionContainer>
<Section
title="Workspace name"
description="The name of your organization"
/>
<TextInput value="" placeholder="Apple" fullWidth />
</StyledSectionContainer>
</StyledContentContainer>
<StyledButtonContainer>
<MainButton title="Continue" onClick={handleCreate} fullWidth />
</StyledButtonContainer>
</>
);
}

92
front/src/pages/auth/Index.tsx
View File

@ -1,28 +1,32 @@
import { useCallback, useEffect } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useNavigate } from 'react-router-dom';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { useRecoilState } from 'recoil';
import { FooterNote } from '@/auth/components/ui/FooterNote';
import { HorizontalSeparator } from '@/auth/components/ui/HorizontalSeparator';
import { Logo } from '@/auth/components/ui/Logo';
import { Modal } from '@/auth/components/ui/Modal';
import { Title } from '@/auth/components/ui/Title';
import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
import { isMockModeState } from '@/auth/states/isMockModeState';
import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
import { SecondaryButton } from '@/ui/components/buttons/SecondaryButton';
import { MainButton } from '@/ui/components/buttons/MainButton';
import { TextInput } from '@/ui/components/inputs/TextInput';
import { AnimatedEaseIn } from '@/ui/components/motion/AnimatedEaseIn';
import { IconBrandGoogle } from '@/ui/icons';
import { Companies } from '~/pages/companies/Companies';
const StyledContentContainer = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(8)};
padding-top: ${({ theme }) => theme.spacing(8)};
width: 200px;
> * + * {
margin-top: ${({ theme }) => theme.spacing(3)};
}
`;
const StyledFooterNote = styled(FooterNote)`
max-width: 283px;
`;
export function Index() {
@ -37,13 +41,20 @@ export function Index() {
authFlowUserEmailState,
);
const [visible, setVisible] = useState(false);
const onGoogleLoginClick = useCallback(() => {
window.location.href = process.env.REACT_APP_AUTH_URL + '/google' || '';
}, []);
const onPasswordLoginClick = useCallback(() => {
if (!visible) {
setVisible(true);
return;
}
navigate('/auth/password-login');
}, [navigate]);
}, [navigate, visible]);
useHotkeys(
'enter',
@ -64,31 +75,48 @@ export function Index() {
return (
<>
<Companies />
<Modal>
<AnimatedEaseIn>
<Logo />
<Title>Welcome to Twenty</Title>
<StyledContentContainer>
<PrimaryButton fullWidth={true} onClick={onGoogleLoginClick}>
<IconBrandGoogle size={theme.icon.size.sm} stroke={4} />
Continue With Google
</PrimaryButton>
<HorizontalSeparator />
<TextInput
value={authFlowUserEmail}
placeholder="Email"
onChange={(value) => setAuthFlowUserEmail(value)}
fullWidth={true}
/>
<SecondaryButton fullWidth={true} onClick={onPasswordLoginClick}>
Continue
</SecondaryButton>
</StyledContentContainer>
<FooterNote>
By using Twenty, you agree to the Terms of Service and Data Processing
Agreement.
</FooterNote>
</Modal>
</AnimatedEaseIn>
<Title animate>Welcome to Twenty</Title>
<StyledContentContainer>
<MainButton
icon={<IconBrandGoogle size={theme.icon.size.sm} stroke={4} />}
title="Continue with Google"
onClick={onGoogleLoginClick}
fullWidth
/>
{visible && (
<motion.div
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
transition={{
type: 'spring',
stiffness: 800,
damping: 35,
}}
>
<HorizontalSeparator />
<TextInput
value={authFlowUserEmail}
placeholder="Email"
onChange={(value) => setAuthFlowUserEmail(value)}
fullWidth={true}
/>
</motion.div>
)}
<MainButton
title="Continue with Email"
onClick={onPasswordLoginClick}
disabled={!authFlowUserEmail}
variant="secondary"
fullWidth
/>
</StyledContentContainer>
<StyledFooterNote>
By using Twenty, you agree to the Terms of Service and Data Processing
Agreement.
</StyledFooterNote>
</>
);
}

78
front/src/pages/auth/PasswordLogin.tsx
View File

@ -1,34 +1,45 @@
import { useCallback, useState } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { useNavigate } from 'react-router-dom';
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
import { useRecoilState } from 'recoil';
import { InputLabel } from '@/auth/components/ui/InputLabel';
import { Logo } from '@/auth/components/ui/Logo';
import { Modal } from '@/auth/components/ui/Modal';
import { Section } from '@/auth/components/ui/Section';
import { SubTitle } from '@/auth/components/ui/SubTitle';
import { Title } from '@/auth/components/ui/Title';
import { useAuth } from '@/auth/hooks/useAuth';
import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
import { isMockModeState } from '@/auth/states/isMockModeState';
import { captureHotkeyTypeInFocusState } from '@/hotkeys/states/captureHotkeyTypeInFocusState';
import { PrimaryButton } from '@/ui/components/buttons/PrimaryButton';
import { MainButton } from '@/ui/components/buttons/MainButton';
import { TextInput } from '@/ui/components/inputs/TextInput';
import { Companies } from '~/pages/companies/Companies';
const StyledContentContainer = styled.div`
padding-bottom: ${({ theme }) => theme.spacing(4)};
padding-top: ${({ theme }) => theme.spacing(6)};
width: 320px;
width: 100%;
> * + * {
margin-top: ${({ theme }) => theme.spacing(6)};
}
`;
const StyledInputContainer = styled.div`
margin-top: ${({ theme }) => theme.spacing(1)};
const StyledAnimatedContent = styled(motion.div)`
align-items: center;
display: flex;
flex-direction: column;
width: 100%;
> * + * {
margin-top: ${({ theme }) => theme.spacing(8)};
}
`;
const StyledSectionContainer = styled.div`
> * + * {
margin-top: ${({ theme }) => theme.spacing(4)};
}
`;
const StyledButtonContainer = styled.div`
margin-top: ${({ theme }) => theme.spacing(7)};
width: 200px;
`;
const StyledErrorContainer = styled.div`
@ -36,7 +47,6 @@ const StyledErrorContainer = styled.div`
`;
export function PasswordLogin() {
const navigate = useNavigate();
const [, setMockMode] = useRecoilState(isMockModeState);
const [, setCaptureHotkeyTypeInFocus] = useRecoilState(
captureHotkeyTypeInFocusState,
@ -58,7 +68,8 @@ export function PasswordLogin() {
await login(authFlowUserEmail, internalPassword);
setMockMode(false);
setCaptureHotkeyTypeInFocus(false);
navigate('/');
// TODO: Navigate to the workspace selection page when it's ready
// navigate('/auth/create/workspace');
} catch (err: any) {
setFormError(err.message);
}
@ -66,7 +77,6 @@ export function PasswordLogin() {
authFlowUserEmail,
internalPassword,
login,
navigate,
setMockMode,
setCaptureHotkeyTypeInFocus,
]);
@ -85,23 +95,22 @@ export function PasswordLogin() {
return (
<>
<Companies />
<Modal>
<Logo />
<Title>Welcome to Twenty</Title>
<SubTitle>Enter your credentials to sign in</SubTitle>
<Logo />
<Title>Welcome to Twenty</Title>
<SubTitle>Enter your credentials to sign in</SubTitle>
<StyledAnimatedContent>
<StyledContentContainer>
<StyledInputContainer>
<InputLabel label="Email" />
<StyledSectionContainer>
<Section title="Email" />
<TextInput
value={authFlowUserEmail}
placeholder="Email"
onChange={(value) => setAuthFlowUserEmail(value)}
fullWidth
/>
</StyledInputContainer>
<StyledInputContainer>
<InputLabel label="Password" />
</StyledSectionContainer>
<StyledSectionContainer>
<Section title="Password" />
<TextInput
value={internalPassword}
placeholder="Password"
@ -109,17 +118,18 @@ export function PasswordLogin() {
fullWidth
type="password"
/>
<StyledButtonContainer>
<PrimaryButton fullWidth onClick={handleLogin}>
Continue
</PrimaryButton>
</StyledButtonContainer>
</StyledInputContainer>
{formError && (
<StyledErrorContainer>{formError}</StyledErrorContainer>
)}
</StyledSectionContainer>
</StyledContentContainer>
</Modal>
<StyledButtonContainer>
<MainButton
title="Continue"
onClick={handleLogin}
disabled={!authFlowUserEmail || !internalPassword}
fullWidth
/>
</StyledButtonContainer>
{formError && <StyledErrorContainer>{formError}</StyledErrorContainer>}
</StyledAnimatedContent>
</>
);
}