From 8334fe9528274da443712b92d1fe1448f8cd2a6b Mon Sep 17 00:00:00 2001 From: nitin <142569587+ehconitin@users.noreply.github.com> Date: Fri, 16 May 2025 19:51:24 +0530 Subject: [PATCH] Add placeholder to signinup modal's secondary logo (#12079) closes https://github.com/twentyhq/core-team-issues/issues/972 checks - - [x] If we have an icon it should be displayed as `secondary` Screenshot 2025-05-16 at 00 33 42 - [x] If no icon is provided, display a placeholder Screenshot 2025-05-16 at 00 33 09 - [x] Add story for auth logos Screenshot 2025-05-16 at 16 16 24 Screenshot 2025-05-16 at 16 16 30 Screenshot 2025-05-16 at 16 16 16 Screenshot 2025-05-16 at 16 16 07 --- .../src/modules/auth/components/Logo.tsx | 35 +++++++++---- .../components/__stories__/Logo.stories.tsx | 51 +++++++++++++++++++ .../__stories__/VerifyEmailEffect.stories.tsx | 2 +- .../EmailVerificationSent.stories.tsx | 2 +- .../src/pages/auth/PasswordReset.tsx | 5 +- .../twenty-front/src/pages/auth/SignInUp.tsx | 5 +- 6 files changed, 87 insertions(+), 13 deletions(-) create mode 100644 packages/twenty-front/src/modules/auth/components/__stories__/Logo.stories.tsx diff --git a/packages/twenty-front/src/modules/auth/components/Logo.tsx b/packages/twenty-front/src/modules/auth/components/Logo.tsx index d938daf09..bb4ea47ba 100644 --- a/packages/twenty-front/src/modules/auth/components/Logo.tsx +++ b/packages/twenty-front/src/modules/auth/components/Logo.tsx @@ -1,6 +1,7 @@ import styled from '@emotion/styled'; import { isNonEmptyString } from '@sniptt/guards'; -import { getImageAbsoluteURI } from 'twenty-shared/utils'; +import { getImageAbsoluteURI, isDefined } from 'twenty-shared/utils'; +import { Avatar } from 'twenty-ui/display'; import { UndecoratedLink } from 'twenty-ui/navigation'; import { REACT_APP_SERVER_BASE_URL } from '~/config'; import { useRedirectToDefaultDomain } from '~/modules/domain-manager/hooks/useRedirectToDefaultDomain'; @@ -9,6 +10,7 @@ import { AppPath } from '~/modules/types/AppPath'; type LogoProps = { primaryLogo?: string | null; secondaryLogo?: string | null; + placeholder?: string | null; }; const StyledContainer = styled.div` @@ -47,23 +49,27 @@ const StyledPrimaryLogo = styled.div<{ src: string }>` width: 100%; `; -export const Logo = (props: LogoProps) => { +export const Logo = ({ + primaryLogo, + secondaryLogo, + placeholder, +}: LogoProps) => { const { redirectToDefaultDomain } = useRedirectToDefaultDomain(); const defaultPrimaryLogoUrl = `${window.location.origin}/images/icons/android/android-launchericon-192-192.png`; const primaryLogoUrl = getImageAbsoluteURI({ - imageUrl: props.primaryLogo ?? defaultPrimaryLogoUrl, + imageUrl: primaryLogo ?? defaultPrimaryLogoUrl, baseUrl: REACT_APP_SERVER_BASE_URL, }); - const secondaryLogoUrl = isNonEmptyString(props.secondaryLogo) + const secondaryLogoUrl = isNonEmptyString(secondaryLogo) ? getImageAbsoluteURI({ - imageUrl: props.secondaryLogo, + imageUrl: secondaryLogo, baseUrl: REACT_APP_SERVER_BASE_URL, }) : null; - const isUsingDefaultLogo = !props.primaryLogo; + const isUsingDefaultLogo = !isDefined(primaryLogo); return ( @@ -72,15 +78,26 @@ export const Logo = (props: LogoProps) => { to={AppPath.SignInUp} onClick={redirectToDefaultDomain} > - + ) : ( - + )} - {secondaryLogoUrl && ( + {isDefined(secondaryLogoUrl) ? ( + ) : ( + isDefined(placeholder) && ( + + + + ) )} ); diff --git a/packages/twenty-front/src/modules/auth/components/__stories__/Logo.stories.tsx b/packages/twenty-front/src/modules/auth/components/__stories__/Logo.stories.tsx new file mode 100644 index 000000000..e09ca6968 --- /dev/null +++ b/packages/twenty-front/src/modules/auth/components/__stories__/Logo.stories.tsx @@ -0,0 +1,51 @@ +import { Meta, StoryObj } from '@storybook/react'; + +import { + ComponentDecorator, + RecoilRootDecorator, + RouterDecorator, +} from 'twenty-ui/testing'; +import { Logo } from '../Logo'; + +const logoUrl = 'https://picsum.photos/192/192'; + +const meta: Meta = { + title: 'Modules/Auth/Logo', + component: Logo, + decorators: [ComponentDecorator, RecoilRootDecorator, RouterDecorator], +}; + +export default meta; +type Story = StoryObj; + +export const WithSecondaryLogo: Story = { + args: { + primaryLogo: null, + secondaryLogo: logoUrl, + placeholder: 'A', + }, +}; + +export const WithPlaceholder: Story = { + args: { + primaryLogo: null, + secondaryLogo: null, + placeholder: 'B', + }, +}; + +export const WithPrimaryAndSecondaryLogo: Story = { + args: { + primaryLogo: logoUrl, + secondaryLogo: logoUrl, + placeholder: 'C', + }, +}; + +export const WithPrimaryLogoAndPlaceholder: Story = { + args: { + primaryLogo: logoUrl, + secondaryLogo: null, + placeholder: 'D', + }, +}; diff --git a/packages/twenty-front/src/modules/auth/components/__stories__/VerifyEmailEffect.stories.tsx b/packages/twenty-front/src/modules/auth/components/__stories__/VerifyEmailEffect.stories.tsx index 4d2aac62d..837523ddc 100644 --- a/packages/twenty-front/src/modules/auth/components/__stories__/VerifyEmailEffect.stories.tsx +++ b/packages/twenty-front/src/modules/auth/components/__stories__/VerifyEmailEffect.stories.tsx @@ -18,7 +18,7 @@ const VerifyEmailEffectErrorState = ({ email = 'user@example.com' }) => { }; const meta: Meta = { - title: 'Pages/Auth/VerifyEmailEffect', + title: 'Modules/Auth/VerifyEmailEffect', component: VerifyEmailEffectErrorState, decorators: [ (Story) => ( diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx index 4c54dba5a..af9df4878 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/__stories__/EmailVerificationSent.stories.tsx @@ -19,7 +19,7 @@ const RenderWithModal = ( }; const meta: Meta = { - title: 'Pages/Auth/EmailVerificationSent', + title: 'Modules/Auth/EmailVerificationSent', component: EmailVerificationSent, decorators: [ComponentDecorator, SnackBarDecorator], parameters: { diff --git a/packages/twenty-front/src/pages/auth/PasswordReset.tsx b/packages/twenty-front/src/pages/auth/PasswordReset.tsx index bc83bf914..b5dea0d48 100644 --- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx +++ b/packages/twenty-front/src/pages/auth/PasswordReset.tsx @@ -173,7 +173,10 @@ export const PasswordReset = () => { - + <Trans>Reset Password</Trans> diff --git a/packages/twenty-front/src/pages/auth/SignInUp.tsx b/packages/twenty-front/src/pages/auth/SignInUp.tsx index e1889fea8..afaeed16d 100644 --- a/packages/twenty-front/src/pages/auth/SignInUp.tsx +++ b/packages/twenty-front/src/pages/auth/SignInUp.tsx @@ -41,7 +41,10 @@ const StandardContent = ({ return ( <Modal.Content isVerticalCentered isHorizontalCentered> <AnimatedEaseIn> - <Logo secondaryLogo={workspacePublicData?.logo} /> + <Logo + secondaryLogo={workspacePublicData?.logo} + placeholder={workspacePublicData?.displayName} + /> </AnimatedEaseIn> <Title animate>{title} {signInUpForm}