Feat/navigate to signup if email does not exist (#540)

* Add userExists route

* Fix demo mode for login

* Improve sign in/up flow

* Remove redundant password length constraint

* Fix test

front/src/generated/graphql.tsx

@@ -2286,6 +2286,7 @@ export type PipelineWhereUniqueInput = {
 
 export type Query = {
   __typename?: 'Query';
+  checkUserExists: UserExists;
   clientConfig: ClientConfig;
   currentUser: User;
   currentWorkspace: Workspace;
@@ -2299,6 +2300,11 @@ export type Query = {
 };
 
 
+export type QueryCheckUserExistsArgs = {
+  email: Scalars['String'];
+};
+
+
 export type QueryFindManyCommentThreadsArgs = {
   cursor?: InputMaybe<CommentThreadWhereUniqueInput>;
   distinct?: InputMaybe<Array<CommentThreadScalarFieldEnum>>;
@@ -2498,6 +2504,11 @@ export type UserCreateWithoutWorkspaceMemberInput = {
   updatedAt?: InputMaybe<Scalars['DateTime']>;
 };
 
+export type UserExists = {
+  __typename?: 'UserExists';
+  exists: Scalars['Boolean'];
+};
+
 export type UserOrderByWithRelationInput = {
   avatarUrl?: InputMaybe<SortOrder>;
   comments?: InputMaybe<CommentOrderByRelationAggregateInput>;
@@ -2789,6 +2800,13 @@ export type CreateEventMutationVariables = Exact<{
 
 export type CreateEventMutation = { __typename?: 'Mutation', createEvent: { __typename?: 'Analytics', success: boolean } };
 
+export type CheckUserExistsQueryVariables = Exact<{
+  email: Scalars['String'];
+}>;
+
+
+export type CheckUserExistsQuery = { __typename?: 'Query', checkUserExists: { __typename?: 'UserExists', exists: boolean } };
+
 export type ChallengeMutationVariables = Exact<{
   email: Scalars['String'];
   password: Scalars['String'];
@@ -3116,6 +3134,41 @@ export function useCreateEventMutation(baseOptions?: Apollo.MutationHookOptions<
 export type CreateEventMutationHookResult = ReturnType<typeof useCreateEventMutation>;
 export type CreateEventMutationResult = Apollo.MutationResult<CreateEventMutation>;
 export type CreateEventMutationOptions = Apollo.BaseMutationOptions<CreateEventMutation, CreateEventMutationVariables>;
+export const CheckUserExistsDocument = gql`
+    query CheckUserExists($email: String!) {
+  checkUserExists(email: $email) {
+    exists
+  }
+}
+    `;
+
+/**
+ * __useCheckUserExistsQuery__
+ *
+ * To run a query within a React component, call `useCheckUserExistsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useCheckUserExistsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useCheckUserExistsQuery({
+ *   variables: {
+ *      email: // value for 'email'
+ *   },
+ * });
+ */
+export function useCheckUserExistsQuery(baseOptions: Apollo.QueryHookOptions<CheckUserExistsQuery, CheckUserExistsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<CheckUserExistsQuery, CheckUserExistsQueryVariables>(CheckUserExistsDocument, options);
+      }
+export function useCheckUserExistsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<CheckUserExistsQuery, CheckUserExistsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<CheckUserExistsQuery, CheckUserExistsQueryVariables>(CheckUserExistsDocument, options);
+        }
+export type CheckUserExistsQueryHookResult = ReturnType<typeof useCheckUserExistsQuery>;
+export type CheckUserExistsLazyQueryHookResult = ReturnType<typeof useCheckUserExistsLazyQuery>;
+export type CheckUserExistsQueryResult = Apollo.QueryResult<CheckUserExistsQuery, CheckUserExistsQueryVariables>;
 export const ChallengeDocument = gql`
     mutation Challenge($email: String!, $password: String!) {
   challenge(email: $email, password: $password) {

front/src/modules/auth/services/index.ts

@@ -1 +1,2 @@
+export * from './select';
 export * from './update';

front/src/modules/auth/services/select.ts

@@ -0,0 +1,9 @@
+import { gql } from '@apollo/client';
+
+export const CHECK_USER_EXISTS = gql`
+  query CheckUserExists($email: String!) {
+    checkUserExists(email: $email) {
+      exists
+    }
+  }
+`;

front/src/pages/auth/Index.tsx

@@ -12,6 +12,7 @@ import { Title } from '@/auth/components/ui/Title';
 import { authFlowUserEmailState } from '@/auth/states/authFlowUserEmailState';
 import { isMockModeState } from '@/auth/states/isMockModeState';
 import { authProvidersState } from '@/client-config/states/authProvidersState';
+import { isDemoModeState } from '@/client-config/states/isDemoModeState';
 import { useScopedHotkeys } from '@/hotkeys/hooks/useScopedHotkeys';
 import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysScope';
 import { MainButton } from '@/ui/components/buttons/MainButton';
@@ -35,7 +36,7 @@ export function Index() {
   const theme = useTheme();
   const [, setMockMode] = useRecoilState(isMockModeState);
   const [authProviders] = useRecoilState(authProvidersState);
-  const [demoMode] = useRecoilState(authProvidersState);
+  const [demoMode] = useRecoilState(isDemoModeState);
 
   const [authFlowUserEmail, setAuthFlowUserEmail] = useRecoilState(
     authFlowUserEmailState,

front/src/pages/auth/PasswordLogin.tsx

@@ -16,6 +16,7 @@ import { InternalHotkeysScope } from '@/hotkeys/types/internal/InternalHotkeysSc
 import { MainButton } from '@/ui/components/buttons/MainButton';
 import { TextInput } from '@/ui/components/inputs/TextInput';
 import { SubSectionTitle } from '@/ui/components/section-titles/SubSectionTitle';
+import { useCheckUserExistsQuery } from '~/generated/graphql';
 
 const StyledContentContainer = styled.div`
   width: 100%;
@@ -84,11 +85,20 @@ export function PasswordLogin() {
     [handleLogin],
   );
 
+  const { loading, data } = useCheckUserExistsQuery({
+    variables: {
+      email: authFlowUserEmail,
+    },
+  });
+
   return (
     <>
       <Logo />
       <Title>Welcome to Twenty</Title>
-      <SubTitle>Enter your credentials to sign in</SubTitle>
+      <SubTitle>
+        Enter your credentials to sign{' '}
+        {data?.checkUserExists.exists ? 'in' : 'up'}
+      </SubTitle>
       <StyledAnimatedContent>
         <StyledContentContainer>
           <StyledSectionContainer>
@@ -115,7 +125,7 @@ export function PasswordLogin() {
           <MainButton
             title="Continue"
             onClick={handleLogin}
-            disabled={!authFlowUserEmail || !internalPassword}
+            disabled={!authFlowUserEmail || !internalPassword || loading}
             fullWidth
           />
         </StyledButtonContainer>