iam ui: login page

src/constants/index.ts

@@ -251,6 +251,10 @@ export const APP_PATHS = {
   PROFILE_MANAGE: '/manage',
   ELASTIC_LEGACY: '/elastic-legacy',
   VERIFY_AUTH: '/auth',
+
+  IAM_LOGIN: '/login',
+  IAM_LOGOUT: '/logout',
+  IAM_CONSENT: '/consent',
 } as const
 
 export const TERM_FILES_PATH = {

src/pages/App.tsx

@@ -43,6 +43,10 @@ import { isAddressString, isSupportLimitOrder, shortenAddress } from 'utils'
 import ElasticLegacyNotice from './ElasticLegacy/ElasticLegacyNotice'
 import VerifyAuth from './Verify/VerifyAuth'
 
+const Login = lazy(() => import('./Oauth/Login'))
+const Logout = lazy(() => import('./Oauth/Logout'))
+const Consent = lazy(() => import('./Oauth/Consent'))
+
 // test page for swap only through elastic
 const ElasticSwap = lazy(() => import('./ElasticSwap'))
 const SwapV2 = lazy(() => import('./SwapV2'))
@@ -430,6 +434,9 @@ export default function App() {
                     <Route path={`/:network/*`} element={<RoutesWithNetworkPrefix />} />
 
                     <Route path={APP_PATHS.VERIFY_AUTH} element={<VerifyAuth />} />
+                    <Route path={APP_PATHS.IAM_LOGIN} element={<Login />} />
+                    <Route path={APP_PATHS.IAM_LOGOUT} element={<Logout />} />
+                    <Route path={APP_PATHS.IAM_CONSENT} element={<Consent />} />
 
                     <Route path="*" element={<RedirectPathToSwapV3Network />} />
                   </Routes>

src/pages/Oauth/AuthForm/AuthFormMessage.tsx

@@ -0,0 +1,22 @@
+import { Text } from 'rebass'
+
+import useTheme from 'hooks/useTheme'
+
+const AuthFormFieldMessage: React.FC<{ messages?: { type: string; text: string }[] }> = ({ messages }) => {
+  const theme = useTheme()
+  if (!messages?.length) return null
+
+  return (
+    <div>
+      {messages.map((value, index) => {
+        return (
+          <Text as="label" key={index} color={value.type === 'warn' ? theme.warning : theme.red}>
+            {value.text}
+          </Text>
+        )
+      })}
+    </div>
+  )
+}
+
+export default AuthFormFieldMessage

src/pages/Oauth/AuthForm/ButtonEth.tsx

@@ -0,0 +1,79 @@
+import { LoginMethod } from '@kybernetwork/oauth2'
+import { useCallback } from 'react'
+import { Flex, Text } from 'rebass'
+
+import { ButtonOutlined, ButtonPrimary } from 'components/Button'
+import Wallet from 'components/Icons/Wallet'
+import Loader from 'components/Loader'
+import { useActiveWeb3React } from 'hooks'
+import useAutoSignIn from 'pages/Oauth/AuthForm/useAutoSignIn'
+import { FlowStatus } from 'pages/Oauth/Login'
+import { useWalletModalToggle } from 'state/application/hooks'
+
+const ButtonEth = ({
+  loading,
+  disabled,
+  onClick,
+  flowStatus,
+  showBtnCancel,
+  onClickCancel,
+}: {
+  disabled: boolean
+  loading: boolean
+  onClick: () => void
+  onClickCancel: () => void
+  flowStatus: FlowStatus
+  showBtnCancel: boolean
+}) => {
+  const toggleWalletModal = useWalletModalToggle()
+  const { account } = useActiveWeb3React()
+
+  const onClickEth = useCallback(
+    (e?: React.MouseEvent) => {
+      e?.preventDefault?.()
+      !account ? toggleWalletModal() : onClick()
+    },
+    [toggleWalletModal, onClick, account],
+  )
+
+  useAutoSignIn({ onClick: onClickEth, flowStatus, method: LoginMethod.ETH })
+
+  return (
+    <Flex style={{ justifyContent: 'center', flexWrap: 'wrap', alignItems: 'center', gap: '16px' }}>
+      {showBtnCancel && (
+        <ButtonOutlined
+          width={'230px'}
+          onClick={e => {
+            e.preventDefault()
+            onClickCancel()
+          }}
+          height={'36px'}
+        >
+          Cancel
+        </ButtonOutlined>
+      )}
+      <ButtonPrimary
+        width={'230px'}
+        height={'36px'}
+        className="login-btn"
+        id={'btnLoginEth'}
+        onClick={onClick}
+        disabled={disabled}
+      >
+        {loading ? (
+          <>
+            <Loader />
+            &nbsp; <Text style={{ whiteSpace: 'nowrap' }}> Signing In</Text>
+          </>
+        ) : (
+          <>
+            <Wallet />
+            &nbsp; Sign-In with Wallet
+          </>
+        )}
+      </ButtonPrimary>
+    </Flex>
+  )
+}
+
+export default ButtonEth

src/pages/Oauth/AuthForm/ButtonGoogle.tsx

@@ -0,0 +1,36 @@
+import { LoginMethod } from '@kybernetwork/oauth2'
+import React, { useCallback, useRef } from 'react'
+
+import { ButtonOutlined, ButtonPrimary } from 'components/Button'
+import useAutoSignIn from 'pages/Oauth/AuthForm/useAutoSignIn'
+import { FlowStatus } from 'pages/Oauth/Login'
+
+interface Props {
+  outline: boolean
+  flowStatus: FlowStatus
+}
+
+const ButtonGoogle: React.FC<Props> = ({ outline, flowStatus }) => {
+  const ref = useRef<HTMLButtonElement>(null)
+  const { autoLoginMethod } = flowStatus
+  const isAutoLogin = autoLoginMethod === LoginMethod.GOOGLE
+
+  const onClick = useCallback(() => {
+    ref.current?.click?.()
+  }, [])
+
+  useAutoSignIn({ onClick, flowStatus, method: LoginMethod.GOOGLE })
+
+  const props = {
+    height: '36px',
+    id: 'btnLoginGoogle',
+    type: 'submit',
+    value: 'google',
+    name: 'provider',
+    ref,
+    children: <>Sign-In with Google</>,
+    style: isAutoLogin ? { opacity: 0 } : undefined,
+  }
+  return React.createElement(outline ? ButtonOutlined : ButtonPrimary, props)
+}
+export default ButtonGoogle

src/pages/Oauth/AuthForm/index.tsx

@@ -0,0 +1,66 @@
+import { LoginFlow, LoginMethod } from '@kybernetwork/oauth2'
+import React from 'react'
+import { isMobile } from 'react-device-detect'
+import styled from 'styled-components'
+
+import useParsedQueryString from 'hooks/useParsedQueryString'
+import useTheme from 'hooks/useTheme'
+import ButtonEth from 'pages/Oauth/AuthForm/ButtonEth'
+import ButtonGoogle from 'pages/Oauth/AuthForm/ButtonGoogle'
+import { FlowStatus } from 'pages/Oauth/Login'
+
+import { getSupportLoginMethods, navigateToUrl } from '../helpers'
+import AuthFormFieldMessage from './AuthFormMessage'
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+`
+
+interface AuthFormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  formConfig: LoginFlow | undefined
+  signInWithEth: () => void
+  disableEth: boolean
+  flowStatus: FlowStatus
+}
+
+const Splash = () => <div style={{ flex: 1, borderTop: '1px solid #505050' }}></div>
+
+const AuthForm: React.FC<AuthFormProps> = ({ formConfig, signInWithEth, flowStatus, disableEth }) => {
+  const { back_uri } = useParsedQueryString<{ back_uri: string }>()
+  const theme = useTheme()
+  if (!formConfig) return null
+
+  const { autoLoginMethod, processingSignIn } = flowStatus
+  const { ui } = formConfig
+  const loginMethods = getSupportLoginMethods(formConfig)
+
+  const showEth = loginMethods.includes(LoginMethod.ETH) && autoLoginMethod !== LoginMethod.GOOGLE
+  const hasGoogle = loginMethods.includes(LoginMethod.GOOGLE)
+  const showBtnCancel = !isMobile && !hasGoogle && back_uri && !processingSignIn
+  const hasBothEthAndGoogle = hasGoogle && showEth
+  return (
+    <Form encType="application/x-www-form-urlencoded" action={ui.action} method={ui.method}>
+      <AuthFormFieldMessage messages={ui.messages} />
+      {showEth && (
+        <ButtonEth
+          onClickCancel={() => navigateToUrl(back_uri)}
+          showBtnCancel={!!showBtnCancel}
+          onClick={signInWithEth}
+          disabled={processingSignIn || disableEth}
+          loading={processingSignIn}
+          flowStatus={flowStatus}
+        />
+      )}
+      {hasBothEthAndGoogle && (
+        <div style={{ display: 'flex', width: '100%', alignItems: 'center', gap: 10, color: theme.subText }}>
+          <Splash /> or <Splash />
+        </div>
+      )}
+      {hasGoogle && <ButtonGoogle flowStatus={flowStatus} outline={showEth} />}
+    </Form>
+  )
+}
+export default AuthForm

src/pages/Oauth/AuthForm/useAutoSignIn.tsx

@@ -0,0 +1,27 @@
+import { LoginMethod } from '@kybernetwork/oauth2'
+import { useEffect, useRef } from 'react'
+
+import { useEagerConnect } from 'hooks/web3/useEagerConnect'
+import { FlowStatus } from 'pages/Oauth/Login'
+
+const useAutoSignIn = ({
+  onClick,
+  method,
+  flowStatus: { flowReady, autoLoginMethod },
+}: {
+  onClick: (e?: React.MouseEvent) => void
+  method: LoginMethod
+  flowStatus: FlowStatus
+}) => {
+  const autoSelect = useRef(false)
+  const { current: triedEager } = useEagerConnect()
+  useEffect(() => {
+    if (autoSelect.current || !flowReady || autoLoginMethod !== method) return
+    if ((triedEager && autoLoginMethod === LoginMethod.ETH) || autoLoginMethod === LoginMethod.GOOGLE) {
+      autoSelect.current = true
+      onClick()
+    }
+  }, [flowReady, autoLoginMethod, onClick, triedEager, method])
+}
+
+export default useAutoSignIn

src/pages/Oauth/Consent.tsx

@@ -0,0 +1,37 @@
+import KyberOauth2 from '@kybernetwork/oauth2'
+import { Trans } from '@lingui/macro'
+import { useEffect } from 'react'
+
+import Dots from 'components/Dots'
+import { ENV_KEY } from 'constants/env'
+import useParsedQueryString from 'hooks/useParsedQueryString'
+import { PageContainer } from 'pages/Oauth/styled'
+
+function Page() {
+  const { consent_challenge } = useParsedQueryString<{ consent_challenge: string }>()
+
+  useEffect(() => {
+    if (!consent_challenge) return
+    KyberOauth2.initialize({ mode: ENV_KEY })
+    KyberOauth2.oauthUi
+      .getFlowConsent(consent_challenge)
+      .then(data => {
+        console.debug('resp consent', data)
+      })
+      .catch(err => {
+        console.debug('err consent', err)
+      })
+  }, [consent_challenge])
+
+  return (
+    <PageContainer
+      msg={
+        <Dots>
+          <Trans>Checking data</Trans>
+        </Dots>
+      }
+    />
+  )
+}
+
+export default Page