@stack-spot/auth-react 2.7.0 → 2.8.0

package/src/Login.tsx

@@ -1,46 +1,17 @@
-import { Box, Button, Flex, Input, Label, Text } from '@citric/core'
+import { Flex, Text } from '@citric/core'
 import { Card, LoadingCircular } from '@citric/ui'
+import { AuthMethodUnavailable } from '@stack-spot/auth'
 import { BannerWarning } from '@stack-spot/portal-components'
 import { MiniLogo } from '@stack-spot/portal-components/svg'
 import { theme } from '@stack-spot/portal-theme'
-import { Dictionary, interpolate, useTranslate } from '@stack-spot/portal-translate'
 import { useEffect, useState } from 'react'
 import { styled } from 'styled-components'
+import { useTranslation } from './dictionary'
 import { Provider, useTrialProviders } from './hooks'
-import { Github } from './provider-icons/Github'
-import { Google } from './provider-icons/Google'
-import { Microsoft } from './provider-icons/Microsoft'
-
-export type LoginType = 'sso' | 'idp'
-
-
-
-interface BaseData {
-  type: LoginType,
-}
-
-interface SSOData extends BaseData {
-  type: 'sso',
-  email: string,
-}
-
-interface IDPData extends BaseData {
-  type: 'idp',
-  provider: 'external-idp:github' | 'external-idp:google' | 'external-idp:microsoft',
-}
-
-type LoginData = SSOData | IDPData
-
-export type LoginProps = {
-  initialValue?: string,
-  onSubmit: (data: LoginData) => Promise<void>,
-  welcomeText?: string,
-  removeLoadingOnSuccess?: boolean,
-  className?: string,
-  style?: React.CSSProperties,
-  banner?: React.ReactNode,
-  loginTypes?: LoginType[],
-}
+import { IDPLogin } from './IDPLogin'
+import { getLastLoginType, setLastLoginType } from './last-login-type'
+import { SSOLogin } from './SSOLogin'
+import { LoginData, LoginProps, LoginType } from './types'
 
 const LoginBox = styled.form`
   display: flex;
@@ -78,41 +49,8 @@ const LoginBox = styled.form`
   }
 `
 
-const providerIcons: Record<Provider, React.ReactElement> = {
-  github: <Github />,
-  google: <Google />,
-  microsoft: <Microsoft />,
-}
-
-interface ButtonProvider {
-  provider: Provider,
-  loading: boolean,
-  login: (type: LoginType, provider?: Provider) => void
-}
-
-function capitalize(str: string) {
-  return str.charAt(0).toUpperCase() + str.slice(1)
-}
-
-const ButtonProvider = ({ provider, login, loading }: ButtonProvider) => {
-  const t = useTranslate(dictionary)
-  return (
-    <Box>
-      <Button colorScheme="light" type="button" size='md' sx={{ width: '100%' } as any} onClick={() => login('idp', provider)} disabled={loading}>
-        {loading
-          ? <LoadingCircular />
-          : <Flex alignItems='center' style={{ gap: '4px' }}>
-            {providerIcons[provider]}{interpolate(t.loginWithGithub, capitalize(provider))}
-          </Flex>
-        }
-      </Button>
-    </Box>
-  )
-}
-
-
 const EmailNotAllowed = () => {
-  const t = useTranslate(dictionary)
+  const t = useTranslation()
   return <Card>
     <Flex justifyContent="center">
       <Text appearance='body2'>
@@ -125,9 +63,10 @@ const EmailNotAllowed = () => {
   </Card>
 }
 
-export const Login = ({ onSubmit, initialValue = '', welcomeText, removeLoadingOnSuccess, className, style, banner,
-  loginTypes = ['idp', 'sso'] }: LoginProps) => {
-  const t = useTranslate(dictionary)
+export const Login = (
+  { onSubmit, initialValue = '', welcomeText, removeLoadingOnSuccess, className, style, banner, loginTypes = ['idp', 'sso'] }: LoginProps,
+) => {
+  const t = useTranslation()
   const [trialProviders, isLoadingTrialProviders] = useTrialProviders({ enabled: loginTypes.includes('idp') })
   const searchParams = new URLSearchParams(location.search)
   const [error, setError] = useState(searchParams.get('error_description') || searchParams.get('error') || '')
@@ -138,7 +77,11 @@ export const Login = ({ onSubmit, initialValue = '', welcomeText, removeLoadingO
   const [email, setEmail] = useState(initialValue || searchParams.get('email') || '')
   const disabled = !email.match(/\w+@\w+/)
   const idpLoginEnabled = loginTypes.includes('idp') && !!trialProviders?.length
-  const ssoLoginEnabled = loginTypes.includes('sso')
+  const [mode, setMode] = useState<LoginType | undefined>()
+
+  useEffect(() => {
+    setMode(idpLoginEnabled ? getLastLoginType() : 'sso')
+  }, [idpLoginEnabled])
 
   useEffect(() => {
     if (!providerQueryParam) return
@@ -152,12 +95,17 @@ export const Login = ({ onSubmit, initialValue = '', welcomeText, removeLoadingO
     provider !== loginProvider && setLoginProvider(provider)
     try {
       const data: LoginData = type === 'idp' && !!provider ? { type: 'idp', provider: `external-idp:${provider}` } : { type: 'sso', email }
+      setLastLoginType(data.type)
       await onSubmit(data)
       if (removeLoadingOnSuccess) setLoading(false)
     } catch (error: any) {
       setLoading(false)
       setLoginProvider(undefined)
-      setError(error.message || error.toString())
+      if (error instanceof AuthMethodUnavailable) {
+        setError(t.emailNotFoundError)
+      } else {
+        setError(error.message || error.toString())
+      }
     }
   }
 
@@ -167,6 +115,10 @@ export const Login = ({ onSubmit, initialValue = '', welcomeText, removeLoadingO
     login('sso')
   }
 
+  if (isLoadingTrialProviders || !mode) {
+    return <Flex alignContent="center" justifyContent="center" my={5}><LoadingCircular /> </Flex>
+  }
+
   return (
     <>
       <LoginBox onSubmit={submitForm} className={className} style={style}>
@@ -174,45 +126,31 @@ export const Login = ({ onSubmit, initialValue = '', welcomeText, removeLoadingO
           <MiniLogo />
           <Flex flexDirection='column' alignItems='center'>
             <Text appearance='body1' weight='medium'>{welcomeText || t.welcome}</Text>
-            <Text appearance='body2' colorScheme='light.700'> {t.loginWithEmail}</Text>
+            <Text appearance='body2' colorScheme='light.700'>{mode === 'idp' ? t.loginWithSocialAccount : t.loginWithEmail}</Text>
           </Flex>
         </header>
         {errorCode && errorCode === 'EMAIL_IS_NOT_ALLOWED' && <EmailNotAllowed />}
-        {ssoLoginEnabled && <>
-          <Flex flexDirection='column' style={{ gap: '4px', marginTop: '4px' }}>
-            <Label htmlFor='email'>{t.label}</Label>
-            <Input type='email' name="email" value={email} onChange={e => setEmail(e.target.value)} placeholder={t.placeholder} />
-            <Button colorScheme="primary" size='md' style={{ marginTop: '12px' }} disabled={disabled || loading}>
-              {loading && !loginProvider ? <LoadingCircular /> : <Text>{t.continue}</Text>}
-            </Button>
-          </Flex>
-        </>}
 
-        {isLoadingTrialProviders
-          ? <Flex alignContent="center" justifyContent="center" my={5}> <LoadingCircular /> </Flex>
-          : <>
-            {ssoLoginEnabled && idpLoginEnabled &&
-              <p className="separator">
-                <Text appearance='microtext1' colorScheme='light.700'>{t.or}</Text>
-              </p>
-            }
-
-            {idpLoginEnabled && <Flex flexDirection='column' gap>
-              <Text colorScheme='light.700' appearance='body2' style={{ textAlign: 'center' }} mb={4}>
-                {t.trial}
-              </Text>
-
-              {trialProviders?.map((provider) => <ButtonProvider
-                provider={provider}
-                login={login}
-                loading={loading && loginProvider === provider}
-                key={provider}
-              />)
-              }
-            </Flex>}
-          </>
-        }
-        {error && <Text className="error">{t.error}: {error}</Text>}
+        {mode === 'sso' ? (
+          <SSOLogin
+            disabled={disabled}
+            loading={loading}
+            hasProvider={!loginProvider}
+            value={email}
+            onChange={setEmail}
+            onChangeMode={setMode}
+          />
+        ) : (
+          <IDPLogin
+            loading={loading}
+            loginProvider={loginProvider}
+            onSubmit={login}
+            trialProviders={trialProviders}
+            onChangeMode={setMode}
+          />
+        )}
+
+        {error && <Text className="error" align="center">{error}</Text>}
       </LoginBox>
       {banner ? <BannerWarning>
         {banner}
@@ -220,37 +158,3 @@ export const Login = ({ onSubmit, initialValue = '', welcomeText, removeLoadingO
     </>
   )
 }
-
-
-const dictionary = {
-  en: {
-    welcome: 'Welcome to StackSpot',
-    loginWithEmail: 'Log in with your email.',
-    label: 'Corporate email',
-    placeholder: 'email@company.com',
-    continue: 'Continue',
-    or: 'Or',
-    loginWithGithub: 'Sign in with Github',
-    loginWithGoogle: 'Sign in with Google',
-    loginWithMicrosoft: 'Sign in with Microsoft',
-    error: 'Error while attempting to login',
-    emailNotAllowedTitle: 'Your email is linked to an Enterprise account.',
-    emailNotAllowedSubtitle: "Please log in with your corporate email.",
-    trial: 'Access your trial account',
-  },
-  pt: {
-    welcome: 'Bem vindo à StackSpot',
-    loginWithEmail: 'Faça login com seu e-mail.',
-    label: 'Email corporativo',
-    placeholder: 'email@empresa.com',
-    continue: 'Continuar',
-    or: 'Ou',
-    loginWithGithub: 'Entrar com o GitHub',
-    loginWithGoogle: 'Entrar com Google',
-    loginWithMicrosoft: 'Entrar com Microsoft',
-    error: 'Erro ao fazer login',
-    emailNotAllowedTitle: '"Este e-mail está vinculado a uma conta Enterprise.',
-    emailNotAllowedSubtitle: "Faça login com seu email corporativo.",
-    trial: 'Acesse sua conta de teste',
-  },
-} satisfies Dictionary

package/src/SSOLogin.tsx

@@ -0,0 +1,50 @@
+import { Button, Flex, Input, Label, Text } from '@citric/core'
+import { Github, Google } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { useTranslation } from './dictionary'
+import { Provider } from './hooks'
+import { Microsoft } from './provider-icons/Microsoft'
+import { LoginType } from './types'
+
+interface Props {
+  value: string,
+  onChange: (value: string) => void,
+  disabled: boolean,
+  loading: boolean,
+  hasProvider: boolean,
+  onChangeMode: (mode: LoginType) => void,
+}
+
+interface ButtonProviderProps {
+  provider: Provider,
+  loading: boolean,
+  login: (type: LoginType, provider?: Provider) => void
+}
+
+const providerIcons: Record<Provider, React.ReactElement> = {
+  github: <Github />,
+  google: <Google />,
+  microsoft: <Microsoft />,
+}
+
+export const SSOLogin = ({ value, onChange, loading, disabled, hasProvider, onChangeMode }: Props) => {
+  const t = useTranslation()
+  return (
+    <>
+      <Flex flexDirection='column' style={{ gap: '4px', marginTop: '4px' }}>
+        <Label htmlFor='email'>{t.label}</Label>
+        <Input id="email" type='email' name="email" value={value} onChange={e => onChange(e.target.value)} placeholder={t.placeholder} />
+        <Button colorScheme="primary" size='md' style={{ marginTop: '12px' }} disabled={disabled || loading}>
+          {loading && !hasProvider ? <LoadingCircular /> : <Text>{t.continue}</Text>}
+        </Button>
+      </Flex>
+      <p className="separator">
+        <Text appearance='microtext1' colorScheme='light.700'>{t.or}</Text>
+      </p>
+      <Text colorScheme="light.700" align="center">{t.socialLoginTitle}</Text>
+      <Button size='md' disabled={loading} colorScheme="light" onClick={() => onChangeMode('idp')}>
+        {t.socialLogin}
+      </Button>
+    </>
+  )
+}

package/src/dictionary.ts

@@ -0,0 +1,40 @@
+import { Dictionary, useTranslate } from '@stack-spot/portal-translate'
+
+const dictionary = {
+  en: {
+    welcome: 'Welcome to StackSpot',
+    loginWithEmail: 'Log in with your email.',
+    loginWithSocialAccount: 'Sign up or access your free trial with a social account',
+    label: 'Corporate email',
+    placeholder: 'email@company.com',
+    continue: 'Continue',
+    or: 'Or',
+    loginWith: 'Sign in with $0',
+    emailNotAllowedTitle: 'Your email is linked to an Enterprise account.',
+    emailNotAllowedSubtitle: "Please log in with your corporate email.",
+    socialLogin: 'Login or register with a social account',
+    corporateLoginTitle: 'Already have a StackSpot enterprise account?',
+    corporateLoginButton: 'Login with enterprise account',
+    socialLoginTitle: 'Do you want to access another way?',
+    emailNotFoundError: 'We couldn\'t find an account for this email',
+  },
+  pt: {
+    welcome: 'Boas vindas à StackSpot',
+    loginWithEmail: 'Faça login com seu e-mail.',
+    loginWithSocialAccount: 'Cadastre-se ou acesse seu teste gratuito com uma conta social',
+    label: 'Email corporativo',
+    placeholder: 'email@empresa.com',
+    continue: 'Continuar',
+    or: 'Ou',
+    loginWith: 'Entrar com $0',
+    emailNotAllowedTitle: '"Este e-mail está vinculado a uma conta Enterprise.',
+    emailNotAllowedSubtitle: "Faça login com seu email corporativo.",
+    socialLogin: 'Entre ou cadastre-se com uma conta social',
+    corporateLoginTitle: 'Já possui uma conta StackSpot Enterprise?',
+    corporateLoginButton: 'Entrar na conta Enterprise',
+    socialLoginTitle: 'Você quer entrar de outro jeito?',
+    emailNotFoundError: 'Não encontramos uma conta para este e-mail.',
+  },
+} satisfies Dictionary
+
+export const useTranslation = () => useTranslate(dictionary)

package/src/hooks.ts

@@ -19,9 +19,14 @@ export const useTrialProviders = ({ enabled = true }): [Provider[], boolean] =>
   useEffect(() => {
     (async () => {
       if (!SessionManager.instance || !enabled) return
-      const providers = (await SessionManager.instance.getTrialEnabledProviders()) as Provider[]
-      setTrialProviders(providers)
-      setIsLoadingTrialProviders(false)
+      try {
+        const providers = (await SessionManager.instance.getTrialEnabledProviders()) as Provider[]
+        setTrialProviders(providers)
+        setIsLoadingTrialProviders(false)
+      } catch (error) {
+        console.error(error)
+        setIsLoadingTrialProviders(false)
+      }
     })()
   }, [SessionManager.instance])
 

package/src/index.ts

@@ -2,4 +2,3 @@ export { Authenticated } from './Authenticated'
 export { useSession } from './hooks'
 export { Login } from './Login'
 export { SessionManager } from './SessionManager'
-

package/src/last-login-type.ts

@@ -0,0 +1,14 @@
+import { LoginType } from './types'
+
+const lastLoginTypeKey = 'lastLoginType'
+
+export function getLastLoginType(): LoginType {
+  const type = localStorage.getItem(lastLoginTypeKey)
+  if (type === 'idp' || type === 'sso') return type
+  // for now, the user won't have the variable "lastLoginType" set. So, for now, we'll check if he/she already went through the tour.
+  return localStorage.getItem('guided-tour') ? 'sso' : 'idp'
+}
+
+export function setLastLoginType(type: LoginType) {
+  localStorage.setItem(lastLoginTypeKey, type)
+}

package/src/types.ts

@@ -0,0 +1,28 @@
+export type LoginType = 'sso' | 'idp'
+
+interface BaseData {
+  type: LoginType,
+}
+
+interface SSOData extends BaseData {
+  type: 'sso',
+  email: string,
+}
+
+interface IDPData extends BaseData {
+  type: 'idp',
+  provider: 'external-idp:github' | 'external-idp:google' | 'external-idp:microsoft',
+}
+
+export type LoginData = SSOData | IDPData
+
+export type LoginProps = {
+  initialValue?: string,
+  onSubmit: (data: LoginData) => Promise<void>,
+  welcomeText?: string,
+  removeLoadingOnSuccess?: boolean,
+  className?: string,
+  style?: React.CSSProperties,
+  banner?: React.ReactNode,
+  loginTypes?: LoginType[],
+}