diff --git a/packages/twenty-front/src/modules/auth/components/StyledOnboardingContentContainer.ts b/packages/twenty-front/src/modules/auth/components/StyledOnboardingContentContainer.ts new file mode 100644 index 0000000000..e77ee25078 --- /dev/null +++ b/packages/twenty-front/src/modules/auth/components/StyledOnboardingContentContainer.ts @@ -0,0 +1,8 @@ +import { styled } from '@linaria/react'; +import { themeCssVariables } from 'twenty-ui/theme-constants'; + +export const StyledOnboardingContentContainer = styled.div` + margin-bottom: ${themeCssVariables.spacing[8]}; + margin-top: ${themeCssVariables.spacing[4]}; + min-width: 240px; +`; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx index 1c0a447914..89afaef468 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpGlobalScopeForm.tsx @@ -6,7 +6,7 @@ import { Trans, useLingui } from '@lingui/react/macro'; import { FormProvider } from 'react-hook-form'; import { ClickToActionLink, UndecoratedLink } from 'twenty-ui/navigation'; -import { useAuth } from '@/auth/hooks/useAuth'; +import { StyledOnboardingContentContainer } from '@/auth/components/StyledOnboardingContentContainer'; import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/internal/SignInUpWithCredentials'; import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/internal/SignInUpWithGoogle'; import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/internal/SignInUpWithMicrosoft'; @@ -23,7 +23,6 @@ import { isDDLLockedState } from '@/client-config/states/isDDLLockedState'; import { DEFAULT_WORKSPACE_LOGO } from '@/ui/navigation/navigation-drawer/constants/DefaultWorkspaceLogo'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; import { isNonEmptyString } from '@sniptt/guards'; -import { motion } from 'framer-motion'; import { useContext } from 'react'; import { Avatar, @@ -35,20 +34,12 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants'; import { type AvailableWorkspace } from '~/generated-metadata/graphql'; import { getWorkspaceUrl } from '~/utils/getWorkspaceUrl'; -const StyledContentContainer = styled(motion.div)` - margin-bottom: ${themeCssVariables.spacing[8]}; - margin-top: ${themeCssVariables.spacing[4]}; - min-width: 200px; -`; - const StyledWorkspaceContainer = styled.div` background-color: ${themeCssVariables.background.secondary}; border: 1px solid ${themeCssVariables.border.color.light}; border-radius: ${themeCssVariables.border.radius.md}; display: flex; flex-direction: column; - margin-bottom: ${themeCssVariables.spacing[8]}; - margin-top: ${themeCssVariables.spacing[4]}; overflow: hidden; width: 100%; @@ -123,11 +114,6 @@ const StyledChevronIcon = styled.div` display: flex; `; -const StyledActionLinkContainer = styled.div` - display: flex; - justify-content: center; -`; - const StyledForgotPasswordLinkContainer = styled.div` display: flex; justify-content: center; @@ -140,7 +126,6 @@ export const SignInUpGlobalScopeForm = () => { const isDDLLocked = useAtomStateValue(isDDLLockedState); const signInUpStep = useAtomStateValue(signInUpStepState); const { buildWorkspaceUrl } = useBuildWorkspaceUrl(); - const { signOut } = useAuth(); const { createWorkspace } = useSignUpInNewWorkspace(); const availableWorkspaces = useAtomStateValue(availableWorkspacesState); @@ -169,7 +154,7 @@ export const SignInUpGlobalScopeForm = () => { return ( <> {signInUpStep === SignInUpStep.WorkspaceSelection && ( - <> + {[ ...availableWorkspaces.availableWorkspacesForSignIn, @@ -224,15 +209,10 @@ export const SignInUpGlobalScopeForm = () => { )} - - - Log out - - - + )} {signInUpStep !== SignInUpStep.WorkspaceSelection && ( - + {authProviders.google && ( { )} - + )} ); diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx index 1e0f92dfaa..0d177b0848 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/SignInUpWorkspaceScopeForm.tsx @@ -1,3 +1,4 @@ +import { StyledOnboardingContentContainer } from '@/auth/components/StyledOnboardingContentContainer'; import { SignInUpWithCredentials } from '@/auth/sign-in-up/components/internal/SignInUpWithCredentials'; import { SignInUpWithGoogle } from '@/auth/sign-in-up/components/internal/SignInUpWithGoogle'; import { SignInUpWithMicrosoft } from '@/auth/sign-in-up/components/internal/SignInUpWithMicrosoft'; @@ -9,20 +10,12 @@ import { useWorkspaceBypass } from '@/auth/sign-in-up/hooks/useWorkspaceBypass'; import { SignInUpStep } from '@/auth/states/signInUpStepState'; import { workspaceAuthBypassProvidersState } from '@/workspace/states/workspaceAuthBypassProvidersState'; import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState'; -import { styled } from '@linaria/react'; import { Trans } from '@lingui/react/macro'; import { FormProvider } from 'react-hook-form'; import { HorizontalSeparator } from 'twenty-ui/display'; import { ClickToActionLink } from 'twenty-ui/navigation'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -const StyledContentContainer = styled.div` - margin-bottom: ${themeCssVariables.spacing[8]}; - margin-top: ${themeCssVariables.spacing[4]}; - min-width: 200px; -`; - export const SignInUpWorkspaceScopeForm = () => { const workspaceAuthProviders = useAtomStateValue(workspaceAuthProvidersState); const workspaceAuthBypassProviders = useAtomStateValue( @@ -50,7 +43,7 @@ export const SignInUpWorkspaceScopeForm = () => { return ( <> - + {providers.google && } {providers.microsoft && ( @@ -71,7 +64,7 @@ export const SignInUpWorkspaceScopeForm = () => { )} - + {signInUpStep === SignInUpStep.Password && ( { + const { signOut } = useAuth(); + + return ( + + Log out + + ); +}; diff --git a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpSSOIdentityProviderSelection.tsx b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpSSOIdentityProviderSelection.tsx index 88a87213ee..4df73a3ebb 100644 --- a/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpSSOIdentityProviderSelection.tsx +++ b/packages/twenty-front/src/modules/auth/sign-in-up/components/internal/SignInUpSSOIdentityProviderSelection.tsx @@ -1,22 +1,16 @@ /* @license Enterprise */ +import { StyledOnboardingContentContainer } from '@/auth/components/StyledOnboardingContentContainer'; import { useSSO } from '@/auth/sign-in-up/hooks/useSSO'; import { guessSSOIdentityProviderIconByUrl } from '@/settings/security/utils/guessSSOIdentityProviderIconByUrl'; -import { styled } from '@linaria/react'; import { workspaceAuthProvidersState } from '@/workspace/states/workspaceAuthProvidersState'; import React from 'react'; import { isDefined } from 'twenty-shared/utils'; import { HorizontalSeparator } from 'twenty-ui/display'; import { MainButton } from 'twenty-ui/input'; -import { themeCssVariables } from 'twenty-ui/theme-constants'; import { useAtomStateValue } from '@/ui/utilities/state/jotai/hooks/useAtomStateValue'; -const StyledContentContainer = styled.div` - margin-bottom: ${themeCssVariables.spacing[8]}; - margin-top: ${themeCssVariables.spacing[4]}; -`; - export const SignInUpSSOIdentityProviderSelection = () => { const workspaceAuthProviders = useAtomStateValue(workspaceAuthProvidersState); @@ -24,7 +18,7 @@ export const SignInUpSSOIdentityProviderSelection = () => { return ( <> - + {isDefined(workspaceAuthProviders?.sso) && workspaceAuthProviders?.sso.map((idp) => ( @@ -37,7 +31,7 @@ export const SignInUpSSOIdentityProviderSelection = () => { ))} - + ); }; diff --git a/packages/twenty-front/src/pages/auth/PasswordReset.tsx b/packages/twenty-front/src/pages/auth/PasswordReset.tsx index 469bca0654..d3123a2c59 100644 --- a/packages/twenty-front/src/pages/auth/PasswordReset.tsx +++ b/packages/twenty-front/src/pages/auth/PasswordReset.tsx @@ -3,6 +3,7 @@ import { Logo } from '@/auth/components/Logo'; import { Title } from '@/auth/components/Title'; import { useAuth } from '@/auth/hooks/useAuth'; import { useHasAccessTokenPair } from '@/auth/hooks/useHasAccessTokenPair'; +import { StyledOnboardingContentContainer } from '@/auth/components/StyledOnboardingContentContainer'; import { currentUserState } from '@/auth/states/currentUserState'; import { workspacePublicDataState } from '@/auth/states/workspacePublicDataState'; import { PASSWORD_REGEX } from '@/auth/utils/passwordRegex'; @@ -61,12 +62,6 @@ const StyledMainContainer = styled.div` width: 100%; `; -const StyledContentContainer = styled.div` - margin-bottom: ${themeCssVariables.spacing[8]}; - margin-top: ${themeCssVariables.spacing[4]}; - width: 200px; -`; - const StyledForm = styled.form` align-items: center; display: flex; @@ -229,7 +224,7 @@ export const PasswordReset = () => { /> {passwordActionLabel} - + {!email ? ( { )} - + ) diff --git a/packages/twenty-front/src/pages/auth/SignInUp.tsx b/packages/twenty-front/src/pages/auth/SignInUp.tsx index cdf82df670..4d9043d3f1 100644 --- a/packages/twenty-front/src/pages/auth/SignInUp.tsx +++ b/packages/twenty-front/src/pages/auth/SignInUp.tsx @@ -16,6 +16,7 @@ import { EmailVerificationSent } from '@/auth/sign-in-up/components/EmailVerific import { FooterNote } from '@/auth/sign-in-up/components/FooterNote'; import { SignInUpGlobalScopeForm } from '@/auth/sign-in-up/components/SignInUpGlobalScopeForm'; import { SignInUpWorkspaceScopeForm } from '@/auth/sign-in-up/components/SignInUpWorkspaceScopeForm'; +import { WorkspaceSelectionFooter } from '@/auth/sign-in-up/components/WorkspaceSelectionFooter'; import { SignInUpSSOIdentityProviderSelection } from '@/auth/sign-in-up/components/internal/SignInUpSSOIdentityProviderSelection'; import { SignInUpWorkspaceScopeFormEffect } from '@/auth/sign-in-up/components/internal/SignInUpWorkspaceScopeFormEffect'; import { isMultiWorkspaceEnabledState } from '@/client-config/states/isMultiWorkspaceEnabledState'; @@ -71,6 +72,9 @@ const StandardContent = ({ {title} {signInUpForm} + {signInUpStep === SignInUpStep.WorkspaceSelection && ( + + )} {![ SignInUpStep.Password, SignInUpStep.TwoFactorAuthenticationProvision,