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

Various fixes (#11567)

Browse Source 
In this PR:
- Remove SignUpLoading blank screen by an empty dark overlay =>
VerifyEffect
- Add ModalContent from pages themselves instead of using it the Layout.
This allow for empty dark overlay without showing an empty modal with
padding
This commit is contained in:
Charles Bochet
2025-04-14 17:24:16 +02:00
committed by GitHub
parent 85d94822b3
commit 15eb96337f
14 changed files with 148 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
packages/twenty-front/src/pages/auth/PasswordReset.tsx
View File

@ -10,6 +10,7 @@ import { AppPath } from '@/types/AppPath';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { TextInputV2 } from '@/ui/input/components/TextInputV2';
import { Modal } from '@/ui/layout/modal/components/Modal';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { zodResolver } from '@hookform/resolvers/zod';
@ -169,89 +170,91 @@ export const PasswordReset = () => {
return (
isTokenValid && (
<StyledMainContainer>
<AnimatedEaseIn>
<Logo secondaryLogo={workspacePublicData?.logo} />
</AnimatedEaseIn>
<Title animate>
<Trans>Reset Password</Trans>
</Title>
<StyledContentContainer>
{!email ? (
<SkeletonTheme
baseColor={theme.background.quaternary}
highlightColor={theme.background.secondary}
>
<Skeleton
height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
count={2}
style={{ marginBottom: theme.spacing(2) }}
/>
</SkeletonTheme>
) : (
<StyledForm onSubmit={handleSubmit(onSubmit)}>
<StyledFullWidthMotionDiv
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
transition={{
type: 'spring',
stiffness: 800,
damping: 35,
}}
<Modal.Content isVerticalCentered isHorizontalCentered>
<StyledMainContainer>
<AnimatedEaseIn>
<Logo secondaryLogo={workspacePublicData?.logo} />
</AnimatedEaseIn>
<Title animate>
<Trans>Reset Password</Trans>
</Title>
<StyledContentContainer>
{!email ? (
<SkeletonTheme
baseColor={theme.background.quaternary}
highlightColor={theme.background.secondary}
>
<StyledInputContainer>
<TextInputV2
autoFocus
value={email}
placeholder={t`Email`}
fullWidth
disabled
/>
</StyledInputContainer>
</StyledFullWidthMotionDiv>
<StyledFullWidthMotionDiv
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
transition={{
type: 'spring',
stiffness: 800,
damping: 35,
}}
>
<Controller
name="newPassword"
control={control}
render={({
field: { onChange, onBlur, value },
fieldState: { error },
}) => (
<StyledInputContainer>
<TextInputV2
autoFocus
value={value}
type="password"
placeholder={t`New Password`}
onBlur={onBlur}
onChange={onChange}
error={error?.message}
fullWidth
/>
</StyledInputContainer>
)}
<Skeleton
height={SKELETON_LOADER_HEIGHT_SIZES.standard.m}
count={2}
style={{ marginBottom: theme.spacing(2) }}
/>
</StyledFullWidthMotionDiv>
</SkeletonTheme>
) : (
<StyledForm onSubmit={handleSubmit(onSubmit)}>
<StyledFullWidthMotionDiv
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
transition={{
type: 'spring',
stiffness: 800,
damping: 35,
}}
>
<StyledInputContainer>
<TextInputV2
autoFocus
value={email}
placeholder={t`Email`}
fullWidth
disabled
/>
</StyledInputContainer>
</StyledFullWidthMotionDiv>
<StyledFullWidthMotionDiv
initial={{ opacity: 0, height: 0 }}
animate={{ opacity: 1, height: 'auto' }}
transition={{
type: 'spring',
stiffness: 800,
damping: 35,
}}
>
<Controller
name="newPassword"
control={control}
render={({
field: { onChange, onBlur, value },
fieldState: { error },
}) => (
<StyledInputContainer>
<TextInputV2
autoFocus
value={value}
type="password"
placeholder={t`New Password`}
onBlur={onBlur}
onChange={onChange}
error={error?.message}
fullWidth
/>
</StyledInputContainer>
)}
/>
</StyledFullWidthMotionDiv>
<StyledMainButton
variant="secondary"
title={t`Change Password`}
type="submit"
fullWidth
disabled={isUpdatingPassword}
/>
</StyledForm>
)}
</StyledContentContainer>
</StyledMainContainer>
<StyledMainButton
variant="secondary"
title={t`Change Password`}
type="submit"
fullWidth
disabled={isUpdatingPassword}
/>
</StyledForm>
)}
</StyledContentContainer>
</StyledMainContainer>
</Modal.Content>
)
);
};

7
packages/twenty-front/src/pages/auth/SignInUp.tsx
View File

@ -20,11 +20,12 @@ import { DEFAULT_WORKSPACE_NAME } from '@/ui/navigation/navigation-drawer/consta
import { useMemo } from 'react';
import { useWorkspaceFromInviteHash } from '@/auth/sign-in-up/hooks/useWorkspaceFromInviteHash';
import { Modal } from '@/ui/layout/modal/components/Modal';
import { useLingui } from '@lingui/react/macro';
import { useSearchParams } from 'react-router-dom';
import { PublicWorkspaceDataOutput } from '~/generated/graphql';
import { isDefined } from 'twenty-shared/utils';
import { AnimatedEaseIn } from 'twenty-ui/utilities';
import { PublicWorkspaceDataOutput } from '~/generated/graphql';
const StandardContent = ({
workspacePublicData,
@ -38,14 +39,14 @@ const StandardContent = ({
title: string;
}) => {
return (
<>
<Modal.Content isVerticalCentered isHorizontalCentered>
<AnimatedEaseIn>
<Logo secondaryLogo={workspacePublicData?.logo} />
</AnimatedEaseIn>
<Title animate>{title}</Title>
{signInUpForm}
{signInUpStep !== SignInUpStep.Password && <FooterNote />}
</>
</Modal.Content>
);
};

12
packages/twenty-front/src/pages/auth/SignInUpLoading.tsx
View File

@ -1,12 +0,0 @@
import styled from '@emotion/styled';
import { motion } from 'framer-motion';
const StyledContentContainer = styled(motion.div)`
height: 480px;
margin-bottom: ${({ theme }) => theme.spacing(8)};
margin-top: ${({ theme }) => theme.spacing(4)};
`;
export const SignInUpLoading = () => {
return <StyledContentContainer />;
};