fix: sign in issues (#4047)

Co-authored-by: Alex Yang <himself65@outlook.com>

packages/component/src/components/auth-components/count-down-render.tsx

@@ -0,0 +1,20 @@
+import { forwardRef, type HTMLAttributes } from 'react';
+
+const formatTime = (time: number): string => {
+  const minutes = Math.floor(time / 60);
+  const seconds = time % 60;
+
+  const formattedMinutes = minutes.toString().padStart(2, '0');
+  const formattedSeconds = seconds.toString().padStart(2, '0');
+
+  return `${formattedMinutes}:${formattedSeconds}`;
+};
+
+export const CountDownRender = forwardRef<
+  HTMLDivElement,
+  { timeLeft: number } & HTMLAttributes<HTMLDivElement>
+>(({ timeLeft, ...props }) => {
+  return <div {...props}>{formatTime(timeLeft)}</div>;
+});
+
+CountDownRender.displayName = 'CountDownRender';

packages/component/src/components/auth-components/index.tsx

@@ -4,10 +4,10 @@ export * from './auth-page-container';
 export * from './back-button';
 export * from './change-email-page';
 export * from './change-password-page';
+export * from './count-down-render';
 export * from './modal';
 export * from './modal-header';
 export * from './password-input';
-export * from './resend-button';
 export * from './set-password-page';
 export * from './sign-in-page-container';
 export * from './sign-in-success-page';

packages/component/src/components/auth-components/resend-button.tsx

@@ -1,76 +0,0 @@
-import { useAFFiNEI18N } from '@affine/i18n/hooks';
-import { Button } from '@toeverything/components/button';
-import { type FC, useCallback, useEffect, useState } from 'react';
-
-import { resendButtonWrapper } from './share.css';
-
-const formatTime = (time: number): string => {
-  const minutes = Math.floor(time / 60);
-  const seconds = time % 60;
-
-  const formattedMinutes = minutes.toString().padStart(2, '0');
-  const formattedSeconds = seconds.toString().padStart(2, '0');
-
-  return `${formattedMinutes}:${formattedSeconds}`;
-};
-const CountDown: FC<{
-  seconds: number;
-  onEnd?: () => void;
-}> = ({ seconds, onEnd }) => {
-  const [timeLeft, setTimeLeft] = useState(seconds);
-
-  useEffect(() => {
-    if (timeLeft === 0) {
-      onEnd?.();
-      return;
-    }
-
-    const intervalId = setInterval(() => {
-      setTimeLeft(timeLeft - 1);
-
-      if (timeLeft - 1 === 0) {
-        clearInterval(intervalId);
-      }
-    }, 1000);
-
-    return () => clearInterval(intervalId);
-  }, [onEnd, timeLeft]);
-
-  return (
-    <div style={{ width: 45, textAlign: 'center' }}>{formatTime(timeLeft)}</div>
-  );
-};
-
-export const ResendButton: FC<{
-  onClick: () => void;
-  countDownSeconds?: number;
-}> = ({ onClick, countDownSeconds = 60 }) => {
-  const t = useAFFiNEI18N();
-  const [canResend, setCanResend] = useState(false);
-
-  const onButtonClick = useCallback(() => {
-    onClick();
-    setCanResend(false);
-  }, [onClick]);
-
-  const onCountDownEnd = useCallback(() => {
-    setCanResend(true);
-  }, [setCanResend]);
-
-  return (
-    <div className={resendButtonWrapper}>
-      {canResend ? (
-        <Button type="plain" size="large" onClick={onButtonClick}>
-          {t['com.affine.auth.sign.auth.code.resend.hint']()}
-        </Button>
-      ) : (
-        <>
-          <span className="resend-code-hint">
-            {t['com.affine.auth.sign.auth.code.on.resend.hint']()}
-          </span>
-          <CountDown seconds={countDownSeconds} onEnd={onCountDownEnd} />
-        </>
-      )}
-    </div>
-  );
-};

packages/component/src/components/auth-components/set-password-page.tsx

@@ -47,7 +47,6 @@ export const SetPasswordPage: FC<{
         )
       }
     >
-      <h1>This is set page</h1>
       {hasSetUp ? (
         <Button type="primary" size="large" onClick={onOpenAffine}>
           {t['com.affine.auth.open.affine']()}