@stack-spot/auth-react 2.14.0 → 2.14.1-beta.1

package/src/IDPLogin.tsx

@@ -1,103 +1,103 @@
-import { Box, Button, Flex, IconBox, Text } from '@citric/core'
-import { ExclamationTriangle } from '@citric/icons'
-import { LoadingCircular } from '@citric/ui'
-import { interpolate } from '@stack-spot/portal-translate'
-import { capitalize } from 'lodash'
-import { useTranslation } from './dictionary'
-import { Provider } from './hooks'
-import { Github } from './provider-icons/Github'
-import { Google } from './provider-icons/Google'
-import { Microsoft } from './provider-icons/Microsoft'
-import { LoginType } from './types'
-
-interface Props {
-  trialProviders: Provider[],
-  loading: boolean,
-  loginProvider: Provider | undefined,
-  onSubmit: (type: LoginType, provider?: Provider) => void,
-  onChangeMode: (mode: LoginType) => void,
-}
-
-interface ButtonProviderProps {
-  provider: Provider,
-  loading: boolean,
-  disabled?: boolean,
-  login: (type: LoginType, provider?: Provider) => void,
-}
-
-const providerIcons: Record<Provider, React.ReactElement> = {
-  github: <Github />,
-  google: <Google />,
-  microsoft: <Microsoft />,
-}
-
-const ButtonProvider = ({ provider, login, loading, disabled }: ButtonProviderProps) => {
-  const t = useTranslation()
-  return (
-    <Box>
-      <Button
-        colorScheme="light"
-        type="button"
-        size='md'
-        sx={{ width: '100%' } as any}
-        onClick={() => login('idp', provider)}
-        disabled={loading || disabled}
-      >
-        {loading
-          ? <LoadingCircular />
-          : <Flex alignItems='center' style={{ gap: '4px' }}>
-            {providerIcons[provider]}{interpolate(t.loginWith, capitalize(provider))}
-          </Flex>
-        }
-      </Button>
-    </Box>
-  )
-}
-
-function hasTouchSupport() {
-  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-}
-
-function isMobileUserAgent() {
-  return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-}
-
-function isMobileWithDesktopView() {
-  return !isMobileUserAgent() && hasTouchSupport();
-}
-
-export const IDPLogin = ({ trialProviders, loading, loginProvider, onSubmit, onChangeMode }: Props) => {
-  const t = useTranslation()
-  const showErrorMessage = isMobileWithDesktopView()
-
-  return (
-    <>
-      {showErrorMessage && <Flex bg="warning" p={4} role="alert" flexWrap='nowrap'>
-        <IconBox colorIcon="warning.contrastText">
-          <ExclamationTriangle /> 
-        </IconBox>
-        <Text appearance='body2' ml={2} colorScheme="warning.contrastText">
-          {t.errorMobileDesktop}
-        </Text>
-      </Flex>}
-
-      <Flex flexDirection='column' gap>
-        {trialProviders?.map((provider) => <ButtonProvider
-          provider={provider}
-          login={onSubmit}
-          loading={loading && loginProvider === provider}
-          disabled={loading}
-          key={provider}
-        />)
-        }
-      </Flex>
-      <p className="separator">
-        <Text appearance='microtext1' colorScheme='light.700'>{t.or}</Text>
-      </p>
-      <Text colorScheme="light.700" align="center">{t.corporateLoginTitle}</Text>
-      <Button size='md' disabled={loading} colorScheme="light" onClick={() => onChangeMode('sso')}>
-        {t.corporateLoginButton}
-      </Button>
-    </>
-  )
+import { Box, Button, Flex, IconBox, Text } from '@citric/core'
+import { ExclamationTriangle } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
+import { interpolate } from '@stack-spot/portal-translate'
+import { capitalize } from 'lodash'
+import { useTranslation } from './dictionary'
+import { Provider } from './hooks'
+import { Github } from './provider-icons/Github'
+import { Google } from './provider-icons/Google'
+import { Microsoft } from './provider-icons/Microsoft'
+import { LoginType } from './types'
+
+interface Props {
+  trialProviders: Provider[],
+  loading: boolean,
+  loginProvider: Provider | undefined,
+  onSubmit: (type: LoginType, provider?: Provider) => void,
+  onChangeMode: (mode: LoginType) => void,
+}
+
+interface ButtonProviderProps {
+  provider: Provider,
+  loading: boolean,
+  disabled?: boolean,
+  login: (type: LoginType, provider?: Provider) => void,
+}
+
+const providerIcons: Record<Provider, React.ReactElement> = {
+  github: <Github />,
+  google: <Google />,
+  microsoft: <Microsoft />,
+}
+
+const ButtonProvider = ({ provider, login, loading, disabled }: ButtonProviderProps) => {
+  const t = useTranslation()
+  return (
+    <Box>
+      <Button
+        colorScheme="light"
+        type="button"
+        size='md'
+        sx={{ width: '100%' } as any}
+        onClick={() => login('idp', provider)}
+        disabled={loading || disabled}
+      >
+        {loading
+          ? <LoadingCircular />
+          : <Flex alignItems='center' style={{ gap: '4px' }}>
+            {providerIcons[provider]}{interpolate(t.loginWith, capitalize(provider))}
+          </Flex>
+        }
+      </Button>
+    </Box>
+  )
+}
+
+function hasTouchSupport() {
+  return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+}
+
+function isMobileUserAgent() {
+  return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}
+
+function isMobileWithDesktopView() {
+  return !isMobileUserAgent() && hasTouchSupport();
+}
+
+export const IDPLogin = ({ trialProviders, loading, loginProvider, onSubmit, onChangeMode }: Props) => {
+  const t = useTranslation()
+  const showErrorMessage = isMobileWithDesktopView()
+
+  return (
+    <>
+      {showErrorMessage && <Flex bg="warning" p={4} role="alert" flexWrap='nowrap'>
+        <IconBox colorIcon="warning.contrastText">
+          <ExclamationTriangle /> 
+        </IconBox>
+        <Text appearance='body2' ml={2} colorScheme="warning.contrastText">
+          {t.errorMobileDesktop}
+        </Text>
+      </Flex>}
+
+      <Flex flexDirection='column' gap>
+        {trialProviders?.map((provider) => <ButtonProvider
+          provider={provider}
+          login={onSubmit}
+          loading={loading && loginProvider === provider}
+          disabled={loading}
+          key={provider}
+        />)
+        }
+      </Flex>
+      <p className="separator">
+        <Text appearance='microtext1' colorScheme='light.700'>{t.or}</Text>
+      </p>
+      <Text colorScheme="light.700" align="center">{t.corporateLoginTitle}</Text>
+      <Button size='md' disabled={loading} colorScheme="light" onClick={() => onChangeMode('sso')}>
+        {t.corporateLoginButton}
+      </Button>
+    </>
+  )
 }

package/src/Login.tsx

@@ -1,206 +1,206 @@
-import { Box, 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 { CSSProperties, useEffect, useState } from 'react'
-import { styled } from 'styled-components'
-import { useTranslation } from './dictionary'
-import { Provider, useTrialProviders } from './hooks'
-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;
-  flex-direction: column;
-  justify-content: center;
-  gap: 24px;
-
-  header {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 24px;
-  }
-
-  .separator {
-    padding: 0 8px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    gap: 8px;
-    margin: 0;
-
-    &:before, &:after {
-      content: '';
-      height: 1px;
-      flex: 1;
-      background-color: ${theme.color.light['500']};
-    }
-  }
-
-  .error {
-    color: ${theme.color.danger['500']};
-    line-height: 1.5rem;
-  }
-`
-
-const EmailNotAllowed = () => {
-  const t = useTranslation()
-  return <Card>
-    <Flex justifyContent="center">
-      <Text appearance='body2'>
-        {t.emailNotAllowedTitle}
-      </Text>
-      <Text appearance='body2' colorScheme='light.700'>
-        {t.emailNotAllowedSubtitle}
-      </Text>
-    </Flex>
-  </Card>
-}
-
-const stylesBanner: CSSProperties = {
-  position: 'fixed',
-  top: 0,
-  left: 0,
-  width: '100%',
-}
-
-export const Login = (
-  { onSubmit, initialValue = '', showLogin = true, 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') || '')
-  const [errorCode] = useState(searchParams.get('error_code') || '')
-  const [loading, setLoading] = useState(false)
-  const providerQueryParam = searchParams.get('provider') as Provider & 'email'
-  const [loginProvider, setLoginProvider] = useState<Provider | undefined>()
-  const [email, setEmail] = useState(initialValue || searchParams.get('email') || '')
-  const disabled = !email.match(/\w+@\w+/)
-  const idpLoginEnabled = loginTypes.includes('idp') && !!trialProviders?.length
-  const [mode, setMode] = useState<LoginType | undefined>()
-
-  useEffect(() => {
-    setMode(idpLoginEnabled ? getLastLoginType() : 'sso')
-  }, [idpLoginEnabled])
-
-  useEffect(() => {
-    if (!providerQueryParam) return
-    if (providerQueryParam === 'email') login('sso')
-    else if (trialProviders?.includes(providerQueryParam)) login('idp', providerQueryParam)
-  }, [trialProviders, isLoadingTrialProviders])
-
-  async function login(type: LoginType, provider?: Provider) {
-    setError('')
-    setLoading(true)
-    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)
-      if (error instanceof AuthMethodUnavailable) {
-        setError(t.emailNotFoundError)
-      } else {
-        setError(error.message || error.toString())
-      }
-    }
-  }
-
-  useEffect(() => {
-    const meta = document.createElement('meta')
-    meta.name = 'adopt-website-id'
-    meta.content = 'a32fe656-2333-4dc5-8039-dddac6464587'
-    document.head.appendChild(meta)
-
-    const script = document.createElement('script')
-    script.src = '//tag.goadopt.io/injector.js?website_code=a32fe656-2333-4dc5-8039-dddac6464587'
-    script.className = 'adopt-injector'
-    script.async = true
-    document.body.appendChild(script)
-
-    return () => {
-      document.head.removeChild(meta)
-      document.body.removeChild(script)
-    }
-  }, [])
-
-  function submitForm(e: React.FormEvent<HTMLFormElement>) {
-    e.preventDefault()
-    if (disabled) return
-    login('sso')
-  }
-
-  if (isLoadingTrialProviders || !mode) {
-    return <Flex alignContent="center" justifyContent="center" my={5}><LoadingCircular /> </Flex>
-  }
-
-  const loginWithSocialAccount = (
-    <>
-      <span>{t.loginWithSocialAccount1}</span>
-      <span style={{ fontWeight: 'bold' }}>{t.loginWithSocialAccount2}</span>
-      <span>{t.loginWithSocialAccount3}</span>
-    </>
-  )
-
-  return (
-    <>
-      {banner && <Box style={stylesBanner}>
-        <BannerWarning showCloseButton={false}>
-          {banner}
-        </BannerWarning>
-      </Box>}
-      {showLogin ? (
-        <LoginBox onSubmit={submitForm} className={className} style={style}>
-          <header>
-            <MiniLogo />
-            <Flex flexDirection='column' alignItems='center'>
-              <Text appearance='body1' weight='medium'>{welcomeText || t.welcome}</Text>
-              <Text appearance='body2' colorScheme='light.700' align='center'>
-                {mode === 'idp' ? loginWithSocialAccount : t.loginWithEmail}
-              </Text>
-            </Flex>
-          </header>
-          {errorCode && errorCode === 'EMAIL_IS_NOT_ALLOWED' && <EmailNotAllowed />}
-
-          {mode === 'sso' ? (
-            <SSOLogin
-              disabled={disabled}
-              loading={loading}
-              hasProvider={!loginProvider}
-              value={email}
-              onChange={setEmail}
-              onChangeMode={setMode}
-              idpLoginEnabled={idpLoginEnabled}
-            />
-          ) : (
-            <IDPLogin
-              loading={loading}
-              loginProvider={loginProvider}
-              onSubmit={login}
-              trialProviders={trialProviders}
-              onChangeMode={setMode}
-            />
-          )}
-
-          {error && <Text className="error" align="center">{error}</Text>}
-        </LoginBox>
-      ) : (
-        <Flex flexDirection='column' alignItems='center'>
-          <MiniLogo />
-          <Text appearance='body1' weight='medium'>{welcomeText || t.welcome}</Text>
-          <Text mt={4}>{t.loginTemporarilyUnavailable}</Text>
-        </Flex>
-      )}
-    </>
-  )
-}
+import { Box, 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 { CSSProperties, useEffect, useState } from 'react'
+import { styled } from 'styled-components'
+import { useTranslation } from './dictionary'
+import { Provider, useTrialProviders } from './hooks'
+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;
+  flex-direction: column;
+  justify-content: center;
+  gap: 24px;
+
+  header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 24px;
+  }
+
+  .separator {
+    padding: 0 8px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin: 0;
+
+    &:before, &:after {
+      content: '';
+      height: 1px;
+      flex: 1;
+      background-color: ${theme.color.light['500']};
+    }
+  }
+
+  .error {
+    color: ${theme.color.danger['500']};
+    line-height: 1.5rem;
+  }
+`
+
+const EmailNotAllowed = () => {
+  const t = useTranslation()
+  return <Card>
+    <Flex justifyContent="center">
+      <Text appearance='body2'>
+        {t.emailNotAllowedTitle}
+      </Text>
+      <Text appearance='body2' colorScheme='light.700'>
+        {t.emailNotAllowedSubtitle}
+      </Text>
+    </Flex>
+  </Card>
+}
+
+const stylesBanner: CSSProperties = {
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  width: '100%',
+}
+
+export const Login = (
+  { onSubmit, initialValue = '', showLogin = true, 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') || '')
+  const [errorCode] = useState(searchParams.get('error_code') || '')
+  const [loading, setLoading] = useState(false)
+  const providerQueryParam = searchParams.get('provider') as Provider & 'email'
+  const [loginProvider, setLoginProvider] = useState<Provider | undefined>()
+  const [email, setEmail] = useState(initialValue || searchParams.get('email') || '')
+  const disabled = !email.match(/\w+@\w+/)
+  const idpLoginEnabled = loginTypes.includes('idp') && !!trialProviders?.length
+  const [mode, setMode] = useState<LoginType | undefined>()
+
+  useEffect(() => {
+    setMode(idpLoginEnabled ? getLastLoginType() : 'sso')
+  }, [idpLoginEnabled])
+
+  useEffect(() => {
+    if (!providerQueryParam) return
+    if (providerQueryParam === 'email') login('sso')
+    else if (trialProviders?.includes(providerQueryParam)) login('idp', providerQueryParam)
+  }, [trialProviders, isLoadingTrialProviders])
+
+  async function login(type: LoginType, provider?: Provider) {
+    setError('')
+    setLoading(true)
+    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)
+      if (error instanceof AuthMethodUnavailable) {
+        setError(t.emailNotFoundError)
+      } else {
+        setError(error.message || error.toString())
+      }
+    }
+  }
+
+  useEffect(() => {
+    const meta = document.createElement('meta')
+    meta.name = 'adopt-website-id'
+    meta.content = 'a32fe656-2333-4dc5-8039-dddac6464587'
+    document.head.appendChild(meta)
+
+    const script = document.createElement('script')
+    script.src = '//tag.goadopt.io/injector.js?website_code=a32fe656-2333-4dc5-8039-dddac6464587'
+    script.className = 'adopt-injector'
+    script.async = true
+    document.body.appendChild(script)
+
+    return () => {
+      document.head.removeChild(meta)
+      document.body.removeChild(script)
+    }
+  }, [])
+
+  function submitForm(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault()
+    if (disabled) return
+    login('sso')
+  }
+
+  if (isLoadingTrialProviders || !mode) {
+    return <Flex alignContent="center" justifyContent="center" my={5}><LoadingCircular /> </Flex>
+  }
+
+  const loginWithSocialAccount = (
+    <>
+      <span>{t.loginWithSocialAccount1}</span>
+      <span style={{ fontWeight: 'bold' }}>{t.loginWithSocialAccount2}</span>
+      <span>{t.loginWithSocialAccount3}</span>
+    </>
+  )
+
+  return (
+    <>
+      {banner && <Box style={stylesBanner}>
+        <BannerWarning showCloseButton={false}>
+          {banner}
+        </BannerWarning>
+      </Box>}
+      {showLogin ? (
+        <LoginBox onSubmit={submitForm} className={className} style={style}>
+          <header>
+            <MiniLogo />
+            <Flex flexDirection='column' alignItems='center'>
+              <Text appearance='body1' weight='medium'>{welcomeText || t.welcome}</Text>
+              <Text appearance='body2' colorScheme='light.700' align='center'>
+                {mode === 'idp' ? loginWithSocialAccount : t.loginWithEmail}
+              </Text>
+            </Flex>
+          </header>
+          {errorCode && errorCode === 'EMAIL_IS_NOT_ALLOWED' && <EmailNotAllowed />}
+
+          {mode === 'sso' ? (
+            <SSOLogin
+              disabled={disabled}
+              loading={loading}
+              hasProvider={!loginProvider}
+              value={email}
+              onChange={setEmail}
+              onChangeMode={setMode}
+              idpLoginEnabled={idpLoginEnabled}
+            />
+          ) : (
+            <IDPLogin
+              loading={loading}
+              loginProvider={loginProvider}
+              onSubmit={login}
+              trialProviders={trialProviders}
+              onChangeMode={setMode}
+            />
+          )}
+
+          {error && <Text className="error" align="center">{error}</Text>}
+        </LoginBox>
+      ) : (
+        <Flex flexDirection='column' alignItems='center'>
+          <MiniLogo />
+          <Text appearance='body1' weight='medium'>{welcomeText || t.welcome}</Text>
+          <Text mt={4}>{t.loginTemporarilyUnavailable}</Text>
+        </Flex>
+      )}
+    </>
+  )
+}