@arcblock/did-connect-react 3.1.0

package/src/Connect/plugins/email/list-item.jsx

@@ -0,0 +1,31 @@
+import PropTypes from 'prop-types';
+import { useMemoizedFn } from 'ahooks';
+import mailOutlineRoundedIcon from '@iconify-icons/material-symbols/mail-outline-rounded';
+import { LOGIN_PROVIDER, LOGIN_PROVIDER_NAME } from '@arcblock/ux/lib/Util/constant';
+
+import LoginMethodItem from '../../components/login-item/login-method-item';
+import { useStateContext } from '../../contexts/state';
+
+export default function EmailListItem({ ...rest }) {
+  const { setSelectedPlugin, getPlugin, connectState } = useStateContext();
+  const handleConnect = useMemoizedFn(() => {
+    const plugin = getPlugin(LOGIN_PROVIDER.EMAIL);
+    plugin.state.reset();
+    plugin.state.status = 'creating';
+    connectState.chooseMethod = LOGIN_PROVIDER.EMAIL;
+    setSelectedPlugin(plugin);
+  });
+
+  return (
+    <LoginMethodItem
+      {...rest}
+      title={LOGIN_PROVIDER_NAME[LOGIN_PROVIDER.EMAIL]}
+      icon={mailOutlineRoundedIcon}
+      onClick={handleConnect}
+    />
+  );
+}
+
+EmailListItem.propTypes = {
+  onClick: PropTypes.func,
+};

package/src/Connect/plugins/email/placeholder.jsx

@@ -0,0 +1,365 @@
+import LoadingMask from '@arcblock/ux/lib/LoadingMask';
+import { Box, CircularProgress, TextField, Typography } from '@mui/material';
+import { useCreation, useInterval, useMemoizedFn, useReactive } from 'ahooks';
+import PropTypes from 'prop-types';
+import { joinURL, withQuery } from 'ufo';
+import Toast from '@arcblock/ux/lib/Toast';
+import VerificationCode from '@arcblock/ux/lib/VerificationCode';
+import { useEffect } from 'react';
+import noop from 'lodash/noop';
+import ProviderIcon from '@arcblock/ux/lib/DIDConnect/provider-icon';
+
+import BackButton from '../../components/back-button';
+import ActionButton from '../../components/action-button';
+import { useStateContext } from '../../contexts/state';
+import { BLOCKLET_SERVICE_PATH_PREFIX, CHECK_STATUS_INTERVAL, VERIFY_CODE_LENGTH } from '../../../constant';
+import { createAxios, debug } from '../../../utils';
+
+export default function EmailPlaceholder({
+  fallback = null,
+  state,
+  forceUpdate = noop,
+  onSuccess = noop,
+  t: rawT = noop,
+}) {
+  const { setSelectedPlugin, locale, connectState, action, extraParams } = useStateContext();
+  const t = useMemoizedFn((key, data = {}) => {
+    return rawT(key, data, locale);
+  });
+  const api = useCreation(() => {
+    return createAxios({
+      baseURL: joinURL(state.baseUrl, BLOCKLET_SERVICE_PATH_PREFIX, '/api/user'),
+    });
+  }, [state.baseUrl]);
+
+  const currentState = useReactive({
+    email: '',
+    code: '',
+    codeId: '',
+    defaultVerifyMode: 'magicLink',
+    verifyMode: 'magicLink', // magicLink, code
+    loadingSendCode: false,
+    loadingVerifyCode: false,
+    error: '',
+  });
+
+  const reset = useMemoizedFn(() => {
+    currentState.email = '';
+    currentState.code = '';
+    currentState.codeId = '';
+    currentState.verifyMode = currentState.defaultVerifyMode;
+    currentState.loadingSendCode = false;
+    currentState.loadingVerifyCode = false;
+    currentState.error = '';
+  });
+
+  const sendCode = useMemoizedFn(async () => {
+    if (!currentState.email || !currentState.email.trim()) {
+      currentState.error = t('emailRequired');
+      return;
+    }
+
+    // 检查邮箱格式
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    if (!emailRegex.test(currentState.email)) {
+      currentState.error = t('emailInvalid');
+      return;
+    }
+    currentState.error = '';
+
+    try {
+      currentState.loadingSendCode = true;
+      let useMagicLink = false;
+      // FIXME: @zhanghan 暂时只允许登录时使用 magicLink，否则其他的事件无法调用正确的回调
+      if (['login'].includes(action)) {
+        // FIXME: @zhanghan 如果 sourceAppPid 存在，则不使用 magicLink，暂无法获得正确的 magicLink 地址
+        if (!connectState.sourceAppPid) {
+          useMagicLink = true;
+        }
+      }
+      const { data } = await api.post(withQuery('/email/sendCode', { locale }), {
+        email: currentState.email,
+        sourceAppPid: connectState.sourceAppPid,
+        useMagicLink,
+      });
+      currentState.verifyMode = currentState.defaultVerifyMode;
+      currentState.codeId = data.id;
+      state.status = 'sending';
+    } catch (error) {
+      const errorMessage = error?.response?.data?.error || error?.message;
+      state.status = 'error';
+      state.error = errorMessage;
+    } finally {
+      currentState.loadingSendCode = false;
+      forceUpdate();
+    }
+  });
+  const verifyCode = useMemoizedFn(async () => {
+    if (currentState.code.length !== VERIFY_CODE_LENGTH) {
+      return;
+    }
+
+    try {
+      currentState.loadingVerifyCode = true;
+      const { data: loginResult } = await api.post(withQuery('/email/login', { locale }), {
+        ...extraParams,
+        action,
+        code: currentState.code,
+        sourceAppPid: connectState.sourceAppPid,
+      });
+      debug('Email login succeed (use code)', { loginResult });
+      await onSuccess(
+        {
+          ...loginResult,
+          encrypted: false,
+        },
+        (val) => val
+      );
+      state.status = 'succeed';
+    } catch (error) {
+      const errorMessage = error?.response?.data || error?.message;
+      Toast.error(errorMessage);
+      debug('Email login failed (use code)', { error });
+    } finally {
+      currentState.loadingVerifyCode = false;
+      forceUpdate();
+    }
+  });
+  const verifyMagicToken = useMemoizedFn(async () => {
+    state.status = 'verifying';
+    forceUpdate();
+    try {
+      const { data: loginResult } = await api.post(withQuery('/email/login', { locale }), {
+        ...extraParams,
+        action,
+        magicToken: state.magicToken,
+      });
+      debug('Email login succeed (use magic link)', { loginResult });
+      await onSuccess(
+        {
+          ...loginResult,
+          encrypted: false,
+        },
+        (val) => val
+      );
+      state.status = 'succeed';
+    } catch (error) {
+      const errorMessage = error?.response?.data || error?.message;
+      state.status = 'error';
+      state.error = errorMessage;
+      debug('Email login failed (use magic link)', { error });
+    }
+    forceUpdate();
+  });
+
+  const shouldPoll =
+    currentState.verifyMode === 'magicLink' &&
+    state.status === 'sending' &&
+    // 如果正在校验验证码，则不轮询状态
+    !currentState.loadingVerifyCode &&
+    currentState.codeId;
+
+  const checkStatus = useMemoizedFn(async () => {
+    if (!shouldPoll) {
+      return;
+    }
+    try {
+      const { data } = await api.get('/email/status', {
+        params: {
+          codeId: currentState.codeId,
+        },
+      });
+      if (data.verified) {
+        state.status = 'succeed';
+        reset();
+        await onSuccess({ encrypted: false }, (val) => val);
+      }
+    } catch (error) {
+      // 只做记录
+      console.error('check status error', error);
+    }
+    forceUpdate();
+  });
+
+  useInterval(checkStatus, shouldPoll ? CHECK_STATUS_INTERVAL : undefined);
+
+  useEffect(() => {
+    reset();
+    // FIXME: @zhanghan 暂不支持子站进行统一登录时使用 magicLink 登录
+    if (connectState.sourceAppPid || !['login'].includes(action)) {
+      currentState.defaultVerifyMode = 'code';
+    }
+    if (state.magicToken) {
+      verifyMagicToken();
+    }
+    // 由于存在 email 插件被重置的情况，所以需要监听 state 是否被重新赋值来执行 init 操作
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state]);
+
+  let content = null;
+  if (state.status === 'creating') {
+    content = (
+      <>
+        <Typography
+          variant="body2"
+          sx={{
+            textAlign: 'center',
+            color: 'text.secondary',
+          }}>
+          {t('emailPlaceholder')}
+        </Typography>
+        <TextField
+          name="email"
+          fullWidth
+          type="email"
+          variant="outlined"
+          label={t('email')}
+          placeholder={t('emailPlaceholder')}
+          size="small"
+          value={currentState.email}
+          onChange={(e) => {
+            currentState.email = e.target.value;
+          }}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              sendCode(currentState.email);
+            }
+          }}
+          sx={{
+            maxWidth: 320,
+            '& .MuiOutlinedInput-root': {
+              borderRadius: 1,
+            },
+          }}
+          error={!!currentState.error}
+          helperText={currentState.error}
+          slotProps={{
+            htmlInput: {
+              sx: {
+                boxSizing: 'content-box !important',
+              },
+            },
+          }}
+        />
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <BackButton
+            onClick={() => {
+              state.reset();
+              setSelectedPlugin();
+            }}
+          />
+          <ActionButton
+            sx={{
+              color: 'primary.main',
+              borderColor: 'primary.light',
+            }}
+            disabled={currentState.loadingSendCode}
+            onClick={() => {
+              sendCode(currentState.email);
+            }}>
+            {currentState.loadingSendCode ? <CircularProgress color="inherit" size={14} sx={{ mr: 1 }} /> : null}
+            {t('sendCode')}
+          </ActionButton>
+        </Box>
+      </>
+    );
+  } else if (state.status === 'sending') {
+    content = (
+      <>
+        <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <Typography variant="body2" sx={{ textAlign: 'center', color: 'text.secondary' }}>
+            {currentState.verifyMode === 'magicLink' ? (
+              <>
+                {t('verifyEmail')}
+                <br />
+                {t('orUseCodePlaceholder')}
+              </>
+            ) : (
+              t('codePlaceholder')
+            )}
+          </Typography>
+          <>
+            {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+            {/* 暂时保留代码，防止后期需要再使用 */}
+            {/* <Link
+              underline="none"
+              variant="caption"
+              component="button"
+              sx={{ mb: 2 }}
+              onClick={() => {
+                currentState.verifyMode = 'code';
+                forceUpdate();
+              }}>
+              {t('useCode')}
+            </Link>
+            <BackButton
+              onClick={() => {
+                state.status = 'creating';
+                forceUpdate();
+              }}
+            /> */}
+          </>
+        </Box>
+        <>
+          <VerificationCode
+            code={currentState.code}
+            onChange={(code) => {
+              currentState.code = code;
+            }}
+            onComplete={() => {
+              verifyCode();
+            }}
+          />
+          <Box sx={{ display: 'flex', gap: 1 }}>
+            <BackButton
+              onClick={() => {
+                currentState.code = '';
+                state.status = 'creating';
+                forceUpdate();
+              }}
+            />
+            <ActionButton
+              sx={{
+                color: 'primary.main',
+                borderColor: 'primary.light',
+              }}
+              disabled={currentState.loadingVerifyCode}
+              onClick={() => {
+                verifyCode();
+              }}>
+              {currentState.loadingVerifyCode ? <CircularProgress color="inherit" size={14} sx={{ mr: 1 }} /> : null}
+              {t('confirm')}
+            </ActionButton>
+          </Box>
+        </>
+      </>
+    );
+  } else {
+    return fallback;
+  }
+
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 2,
+        pb: 1,
+      }}>
+      <LoadingMask size={52} borderRadius={12}>
+        <ProviderIcon provider="email" />
+      </LoadingMask>
+      {content}
+    </Box>
+  );
+}
+
+EmailPlaceholder.propTypes = {
+  fallback: PropTypes.any,
+  state: PropTypes.object.isRequired,
+  forceUpdate: PropTypes.func,
+  onSuccess: PropTypes.func,
+  t: PropTypes.func,
+};

package/src/Connect/plugins/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable import/prefer-default-export */
+export { default as useEmailPlugin } from './email';