@stack-spot/auth-react 2.7.1 → 2.8.1

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 AI',
+    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 AI',
+    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,20 @@
+import { getCookie } from '@stack-spot/portal-components'
+import { LoginType } from './types'
+
+const lastLoginTypeKey = 'lastLoginType'
+const fallbackKeys = ['guided-tour', '@stack-spot/opa:user', 'CHAT_AGENTS', 'RATED_US_IN']
+
+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, we check for tother variables that may indicate this is an enterprise user
+  if (getCookie('stk-session.stackspot.com')) return 'sso'
+  for (const key of fallbackKeys) {
+    if (localStorage.getItem(key)) return 'sso'
+  }
+  return '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[],
+}