Merge pull request #2705 from CAFECA-IO/feature/beta-login-funciton

Feature/beta login funciton
CAFECA-IO · Oct 1, 2024 · bc3935b · bc3935b
2 parents 7cffe0f + 9085749
commit bc3935b
Show file tree

Hide file tree

Showing 15 changed files with 283 additions and 280 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.2+25",
+  "version": "0.8.2+26",
   "private": false,
   "scripts": {
     "dev": "next dev",

diff --git a/src/components/cta_section/cta_section.tsx b/src/components/cta_section/cta_section.tsx
@@ -13,7 +13,7 @@ const CTASection = () => {
 
   const animeRef1 = useRef(null);
   const [isAnimeRef1Visible, setIsAnimeRef1Visible] = useState(false);
-  const { signedIn } = useContext(UserContext);
+  const { isSignIn } = useContext(UserContext);
 
   useEffect(() => {
     const waitForCTA = setTimeout(() => {
@@ -49,7 +49,7 @@ const CTASection = () => {
         </div>
 
         <Link
-          href={signedIn ? ISUNFA_ROUTE.DASHBOARD : ISUNFA_ROUTE.LOGIN}
+          href={isSignIn ? ISUNFA_ROUTE.DASHBOARD : ISUNFA_ROUTE.LOGIN}
           className="z-5 flex w-full justify-center px-5 md:w-auto"
         >
           <Button

diff --git a/src/components/landing_page/landing_nav_bar.tsx b/src/components/landing_page/landing_nav_bar.tsx
@@ -27,7 +27,7 @@ const isLinkDisabled = true; // Info: (20240719 - Liz) Audit Report 目前都是
 
 function LandingNavBar({ transparentInitially }: LandingNavBarProps) {
   const { t }: { t: TranslateFunction } = useTranslation('common');
-  const { signedIn } = useContext(UserContext);
+  const { isSignIn } = useContext(UserContext);
 
   const router = useRouter();
   const { asPath } = router;
@@ -281,7 +281,7 @@ function LandingNavBar({ transparentInitially }: LandingNavBarProps) {
           </div>
         </li>
         <li>
-          <Link href={signedIn ? ISUNFA_ROUTE.DASHBOARD : ISUNFA_ROUTE.LOGIN}>
+          <Link href={isSignIn ? ISUNFA_ROUTE.DASHBOARD : ISUNFA_ROUTE.LOGIN}>
             <Button className="flex space-x-3">
               <p
                 className={cn(
@@ -533,7 +533,7 @@ function LandingNavBar({ transparentInitially }: LandingNavBarProps) {
         </li>
 
         <li className="w-full px-6 py-4">
-          <Link href={signedIn ? ISUNFA_ROUTE.DASHBOARD : ISUNFA_ROUTE.LOGIN}>
+          <Link href={isSignIn ? ISUNFA_ROUTE.DASHBOARD : ISUNFA_ROUTE.LOGIN}>
             <Button className="flex space-x-3">
               <p
                 className={cn(

diff --git a/src/components/login/login_animation.tsx b/src/components/login/login_animation.tsx
@@ -2,7 +2,11 @@ import { useEffect, useState } from 'react';
 import { FiHome } from 'react-icons/fi';
 import { PiGlobe } from 'react-icons/pi';
 
-const LoginAnimation = () => {
+const LoginAnimation = ({
+  setIsAnimationShowing,
+}: {
+  setIsAnimationShowing: React.Dispatch<React.SetStateAction<boolean>>;
+}) => {
   const [switchTitle, setSwitchTitle] = useState(false);
 
   useEffect(() => {
@@ -11,8 +15,14 @@ const LoginAnimation = () => {
       setSwitchTitle(true);
     }, 3000);
 
+    // Info: (20241001 - Liz) 6 秒後關閉動畫
+    const closeAnimation = setTimeout(() => {
+      setIsAnimationShowing(false);
+    }, 6000);
+
     return () => {
       clearTimeout(titleTimer);
+      clearTimeout(closeAnimation);
     };
   }, []);
 

diff --git a/src/components/login_confirm_modal/login_confirm_modal.tsx b/src/components/login_confirm_modal/login_confirm_modal.tsx
@@ -6,6 +6,8 @@ import PrivacyPolicy from '@/components/login_confirm_modal/privacy_policy';
 import { useUserCtx } from '@/contexts/user_context';
 import { Hash } from '@/constants/hash';
 import { Button } from '@/components/button/button';
+import { ISUNFA_ROUTE } from '@/constants/url';
+import { useRouter } from 'next/router';
 
 interface ILoginConfirmProps {
   id: string;
@@ -28,6 +30,7 @@ const LoginConfirmModal: React.FC<ILoginConfirmProps> = ({
 }) => {
   const { t } = useTranslation('common');
   const { handleUserAgree, signOut } = useUserCtx();
+  const router = useRouter();
 
   const onAgree = async () => {
     if (id === 'agree-to-our-terms-of-service') {
@@ -38,6 +41,7 @@ const LoginConfirmModal: React.FC<ILoginConfirmProps> = ({
     if (id === 'agree-to-our-privacy-policy') {
       tosModalVisibilityHandler(false);
       await handleUserAgree(Hash.HASH_FOR_PRIVACY_POLICY);
+      router.push(ISUNFA_ROUTE.SELECT_COMPANY);
     }
   };
   const onCancel = () => {

diff --git a/src/components/login_page_body/login_page_body.tsx b/src/components/login_page_body/login_page_body.tsx
@@ -7,53 +7,17 @@ import { Provider } from '@/constants/provider';
 import { useUserCtx } from '@/contexts/user_context';
 import { ToastType } from '@/interfaces/toastify';
 import { useTranslation } from 'next-i18next';
+import { FiHome } from 'react-icons/fi';
+import I18n from '@/components/i18n/i18n';
+import { signIn } from 'next-auth/react';
 
-const getProviderDetails = (provider: Provider) => {
-  return {
-    logo: provider === Provider.GOOGLE ? '/icons/google_logo.svg' : '/icons/apple_logo.svg',
-    bgColor: provider === Provider.GOOGLE ? 'bg-white' : 'bg-black',
-    textColor: provider === Provider.GOOGLE ? 'text-black' : 'text-white',
-  };
-};
-
-const AuthButton = React.memo(
-  ({
-    onClick,
-    provider,
-    disabled = false,
-  }: {
-    onClick: () => void;
-    provider: Provider;
-    disabled?: boolean;
-  }) => {
-    const { t } = useTranslation('common');
-    const { logo, bgColor, textColor } = getProviderDetails(provider);
-
-    return (
-      <button
-        type="button"
-        onClick={onClick}
-        className={`flex w-72 items-center justify-center space-x-2 rounded-sm ${bgColor} py-3 shadow-md`}
-        disabled={disabled}
-      >
-        <Image src={logo} alt={provider} width={16} height={16} className="h-6 w-6" />
-        <span className={`font-semibold ${textColor}`}>
-          {t('common:LOGIN_PAGE_BODY.LOGIN_WITH_PROVIDER', {
-            provider: provider.replace(provider[0], provider[0].toUpperCase()),
-          })}
-        </span>
-      </button>
-    );
-  }
-);
-
-const Loader = React.memo(() => {
+const Loader = () => {
   return (
     <div className="flex h-screen items-center justify-center">
       <div className="h-16 w-16 animate-spin rounded-full border-4 border-orange-400 border-t-transparent"></div>
     </div>
   );
-});
+};
 
 const LoginPageBody = ({ invitation, action }: ILoginPageProps) => {
   const { t } = useTranslation('common');
@@ -83,25 +47,74 @@ const LoginPageBody = ({ invitation, action }: ILoginPageProps) => {
   return (
     <div className="relative flex h-screen flex-col items-center justify-center text-center">
       <div className="absolute inset-0 z-0 h-full w-full bg-login_bg bg-cover bg-center bg-no-repeat blur-md"></div>
+
+      <div className="absolute right-0 top-0 z-0 mr-40px mt-40px flex items-center gap-40px text-button-text-secondary">
+        <I18n />
+
+        <FiHome size={20} />
+      </div>
+
       {isAuthLoading ? (
         <Loader />
       ) : (
-        <div className="z-10 mb-8 flex flex-col items-center">
-          <h1 className="mb-6 text-4xl font-bold text-gray-800">
-            {t('common:LOGIN_PAGE_BODY.LOG_IN')}
-          </h1>
-          <div className="mx-2.5 mb-6 flex flex-col justify-center rounded-full">
+        <div className="z-10 flex flex-col items-center">
+          <div className="mb-80px flex gap-10px text-48px font-bold">
+            <p className="text-text-brand-primary-lv2">iSunFA</p>
+            <p className="text-text-brand-secondary-lv1">{t('common:LOGIN_PAGE_BODY.LOG_IN')}</p>
+          </div>
+
+          <div className="mb-40px flex flex-col justify-center rounded-full">
             <AvatarSVG size="large" />
           </div>
-          <div className="flex flex-col space-y-4">
-            <AuthButton onClick={googleAuthSignIn} provider={Provider.GOOGLE} />
-            {/* Info: (20240819-Tzuhan) [Beta] Apple login is not supported in the beta version
-            <AuthButton onClick={appleAuthSignIn} provider="Apple" /> */}
+
+          <div className="flex w-360px flex-col gap-16px">
+            <button
+              type="button"
+              onClick={googleAuthSignIn}
+              className="flex items-center justify-center gap-15px rounded-sm bg-white p-15px"
+            >
+              <Image src="/icons/google_logo.svg" alt="google_logo" width="24" height="24"></Image>
+              <p className="text-xl font-medium text-gray-500">Log In with Google</p>
+            </button>
+
+            {/* // Info: (20241001 - Liz) 登入 Apple 功能待實作 */}
+            <button
+              type="button"
+              onClick={() => signIn('apple')}
+              className="flex items-center justify-center gap-15px rounded-sm bg-black p-15px"
+              disabled
+            >
+              <Image src="/icons/apple_logo.svg" alt="apple_logo" width="24" height="24"></Image>
+              <p className="text-xl font-medium text-white">Log In with Apple</p>
+            </button>
           </div>
         </div>
       )}
     </div>
   );
+
+  // return (
+  //   <div className="relative flex h-screen flex-col items-center justify-center text-center">
+  //     <div className="absolute inset-0 z-0 h-full w-full bg-login_bg bg-cover bg-center bg-no-repeat blur-md"></div>
+  //     {isAuthLoading ? (
+  //       <Loader />
+  //     ) : (
+  //       <div className="z-10 mb-8 flex flex-col items-center">
+  //         <h1 className="mb-6 text-4xl font-bold text-gray-800">
+  //           {t('common:LOGIN_PAGE_BODY.LOG_IN')}
+  //         </h1>
+  //         <div className="mx-2.5 mb-6 flex flex-col justify-center rounded-full">
+  //           <AvatarSVG size="large" />
+  //         </div>
+  //         <div className="flex flex-col space-y-4">
+  //           <AuthButton onClick={googleAuthSignIn} provider={Provider.GOOGLE} />
+  //           {/* Info: (20240819-Tzuhan) [Beta] Apple login is not supported in the beta version
+  //           <AuthButton onClick={appleAuthSignIn} provider="Apple" /> */}
+  //         </div>
+  //       </div>
+  //     )}
+  //   </div>
+  // );
 };
 
 export default LoginPageBody;
diff --git a/src/components/nav_bar/nav_bar.tsx b/src/components/nav_bar/nav_bar.tsx
@@ -29,7 +29,7 @@ import { UploadType } from '@/constants/file';
 const NavBar = () => {
   const { t }: { t: TranslateFunction } = useTranslation('common');
 
-  const { signedIn, signOut, username, selectedCompany, userAuth, isAuthLoading, selectCompany } =
+  const { isSignIn, signOut, username, selectedCompany, userAuth, isAuthLoading, selectCompany } =
     useUserCtx();
   const { profileUploadModalDataHandler, profileUploadModalVisibilityHandler } = useGlobalCtx();
   const router = useRouter();
@@ -119,15 +119,15 @@ const NavBar = () => {
         className="mx-auto flex w-full items-center gap-16px px-24px py-10px text-button-text-secondary disabled:text-button-text-disable"
       >
         {/* <Link
-          href={`${signedIn ? ISUNFA_ROUTE.PROJECT_LIST : ISUNFA_ROUTE.LOGIN}`}
+          href={`${isSignIn ? ISUNFA_ROUTE.PROJECT_LIST : ISUNFA_ROUTE.LOGIN}`}
           className="flex w-full items-center gap-16px px-24px py-10px text-button-text-secondary hover:text-primaryYellow"
         > */}
         <Image src={'/icons/rocket.svg'} width={30} height={30} alt="rocket_icon" />
         <p>{t('common:COMMON.PROJECT')}</p>
         {/* </Link> */}
       </button>
       <Link
-        href={`${signedIn ? ISUNFA_ROUTE.JOURNAL_LIST : ISUNFA_ROUTE.LOGIN}`}
+        href={`${isSignIn ? ISUNFA_ROUTE.JOURNAL_LIST : ISUNFA_ROUTE.LOGIN}`}
         className="flex w-full items-center gap-16px px-24px py-10px text-button-text-secondary hover:text-button-text-primary-hover"
       >
         <Image src={'/icons/calculator.svg'} width={30} height={30} alt="calculator_icon" />
@@ -149,15 +149,15 @@ const NavBar = () => {
         className="mx-auto flex w-full items-center gap-16px px-24px py-10px text-button-text-secondary disabled:text-button-text-disable"
       >
         {/* <Link
-          href={`${signedIn ? ISUNFA_ROUTE.SALARY : ISUNFA_ROUTE.LOGIN}`}
+          href={`${isSignIn ? ISUNFA_ROUTE.SALARY : ISUNFA_ROUTE.LOGIN}`}
           className="flex w-full items-center gap-16px px-24px py-10px text-button-text-secondary hover:text-primaryYellow"
         > */}
         <Image src={'/icons/briefcase.svg'} width={30} height={30} alt="briefcase_icon" />
         <p>{t('salary:SALARY.SALARY')}</p>
         {/* </Link> */}
       </button>
       <Link
-        href={`${signedIn ? ISUNFA_ROUTE.USERS_MY_REPORTS : ISUNFA_ROUTE.LOGIN}`}
+        href={`${isSignIn ? ISUNFA_ROUTE.USERS_MY_REPORTS : ISUNFA_ROUTE.LOGIN}`}
         className="flex w-full items-center gap-16px px-24px py-10px text-button-text-secondary hover:text-button-text-primary-hover"
       >
         <Image src={'/icons/report.svg'} width={30} height={30} alt="report_icon" />
@@ -223,7 +223,7 @@ const NavBar = () => {
         className="mx-auto flex flex-col items-center gap-8px hover:text-button-text-primary-hover disabled:text-button-text-disable"
       >
         {/* <Link
-          href={`${signedIn ? ISUNFA_ROUTE.PROJECT_LIST : ISUNFA_ROUTE.LOGIN}`}
+          href={`${isSignIn ? ISUNFA_ROUTE.PROJECT_LIST : ISUNFA_ROUTE.LOGIN}`}
           className="flex flex-col items-center gap-8px"
         > */}
         <Image src={'/icons/rocket.svg'} width={48} height={48} alt="rocket_icon" />
@@ -234,7 +234,7 @@ const NavBar = () => {
       {/* Info: (20240416 - Julian) Account button */}
       <button type="button" className="mx-auto">
         <Link
-          href={`${signedIn ? ISUNFA_ROUTE.JOURNAL_LIST : ISUNFA_ROUTE.LOGIN}`}
+          href={`${isSignIn ? ISUNFA_ROUTE.JOURNAL_LIST : ISUNFA_ROUTE.LOGIN}`}
           className="flex flex-col items-center gap-8px hover:text-button-text-primary-hover disabled:text-button-text-disable"
         >
           <Image src={'/icons/calculator.svg'} width={48} height={48} alt="calculator_icon" />
@@ -260,7 +260,7 @@ const NavBar = () => {
         className="mx-auto flex flex-col items-center gap-8px disabled:text-button-text-disable"
       >
         {/* <Link
-          href={`${signedIn ? ISUNFA_ROUTE.SALARY : ISUNFA_ROUTE.LOGIN}`}
+          href={`${isSignIn ? ISUNFA_ROUTE.SALARY : ISUNFA_ROUTE.LOGIN}`}
           className="flex flex-col items-center gap-8px"
         > */}
         <Image src={'/icons/briefcase.svg'} width={48} height={48} alt="briefcase_icon" />
@@ -270,7 +270,7 @@ const NavBar = () => {
       {/* Info: (20240416 - Julian) Report button */}
       <button type="button" className="mx-auto">
         <Link
-          href={`${signedIn ? ISUNFA_ROUTE.USERS_MY_REPORTS : ISUNFA_ROUTE.LOGIN}`}
+          href={`${isSignIn ? ISUNFA_ROUTE.USERS_MY_REPORTS : ISUNFA_ROUTE.LOGIN}`}
           className="flex flex-col items-center gap-8px hover:text-button-text-primary-hover disabled:text-button-text-disable"
         >
           <Image src={'/icons/report.svg'} width={48} height={48} alt="report_icon" />
@@ -301,7 +301,7 @@ const NavBar = () => {
         </button>
         <div className="mt-3 flex justify-center gap-0 px-16">
           <div className="my-auto text-base font-semibold leading-6 tracking-normal text-button-text-secondary">
-            {signedIn ? username ?? DEFAULT_DISPLAYED_USER_NAME : ''}
+            {isSignIn ? (username ?? DEFAULT_DISPLAYED_USER_NAME) : ''}
           </div>
           {/* Info: (20240809 - Shirley) edit name button */}
           <button
@@ -401,7 +401,7 @@ const NavBar = () => {
 
   const displayedAvatar = isAuthLoading ? (
     <Skeleton width={44} height={40} />
-  ) : signedIn ? (
+  ) : isSignIn ? (
     <div ref={userMenuRef}>
       <button
         type="button"
@@ -525,7 +525,7 @@ const NavBar = () => {
 
         {/* Info: (20240802 - Shirley) hide the login button for now */}
         <div
-          className={`hidden flex-col items-start justify-center ${signedIn ? 'lg:flex' : 'hidden'}`}
+          className={`hidden flex-col items-start justify-center ${isSignIn ? 'lg:flex' : 'hidden'}`}
         >
           <div className="h-40px w-px shrink-0 bg-divider-stroke-lv-4" />
         </div>

diff --git a/src/components/select_company_page_body/select_company_page_body.tsx b/src/components/select_company_page_body/select_company_page_body.tsx
@@ -19,7 +19,7 @@ import { useTranslation } from 'next-i18next';
 const SelectCompanyPageBody = () => {
   const { t } = useTranslation(['common', 'kyc']);
 
-  const { signedIn, username, selectCompany, successSelectCompany, errorCode, userAuth } =
+  const { isSignIn, username, selectCompany, successSelectCompany, errorCode, userAuth } =
     useUserCtx();
   const { companyInvitationModalVisibilityHandler, createCompanyModalVisibilityHandler } =
     useGlobalCtx();
@@ -45,7 +45,7 @@ const SelectCompanyPageBody = () => {
     Array<{ company: ICompany; role: IRole }>
   >([]);
 
-  const userName = signedIn ? username || DEFAULT_DISPLAYED_USER_NAME : '';
+  const userName = isSignIn ? username || DEFAULT_DISPLAYED_USER_NAME : '';
   const selectedCompanyName = selectedCompany?.name ?? t('kyc:SELECT_COMPANY.SELECT_AN_COMPANY');
 
   const menuOpenHandler = () => {

diff --git a/src/contexts/accounting_context.tsx b/src/contexts/accounting_context.tsx
@@ -192,7 +192,7 @@ const initialAccountingContext: IAccountingContext = {
 export const AccountingContext = createContext<IAccountingContext>(initialAccountingContext);
 
 export const AccountingProvider = ({ children }: IAccountingProvider) => {
-  const { userAuth, selectedCompany, signedIn } = useUserCtx();
+  const { userAuth, selectedCompany, isSignIn } = useUserCtx();
   const {
     trigger: getAccountList,
     data: accountTitleList,
@@ -480,7 +480,7 @@ export const AccountingProvider = ({ children }: IAccountingProvider) => {
 
   useEffect(() => {
     clearOCRs();
-  }, [signedIn, selectedCompany]);
+  }, [isSignIn, selectedCompany]);
 
   useEffect(() => {
     if (accountSuccess && accountTitleList) {