Merge pull request #2700 from CAFECA-IO/feature/beta-login-page

Feature/beta login page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "iSunFA",
-  "version": "0.8.2+24",
+  "version": "0.8.2+25",
   "private": false,
   "scripts": {
     "dev": "next dev",

src/components/beta/login/login_page_body.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import Image from 'next/image';
+import AvatarSVG from '@/components/avatar_svg/avatar_svg';
+import { useTranslation } from 'next-i18next';
+import { FiHome } from 'react-icons/fi';
+import I18n from '@/components/i18n/i18n';
+import { signIn, signOut, useSession } from 'next-auth/react';
+
+const isAuthLoading = false;
+
+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 = () => {
+  const { t } = useTranslation('common');
+  const { data: session, status } = useSession();
+
+  if (status === 'authenticated') {
+    // ToDo: (20240927 - Liz) 拿取使用者資料，檢查是否有同意服務條款，如果沒有就跳出同意服務條款的 modal
+    return (
+      <div>
+        <p>已登入為 {session?.user?.email}</p>
+        <button type="button" onClick={() => signOut()}>
+          登出
+        </button>
+      </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>
+
+      <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 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 w-360px flex-col gap-16px">
+            <button
+              type="button"
+              onClick={() => signIn('google')}
+              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>
+
+            <button
+              type="button"
+              onClick={() => signIn('apple')}
+              className="flex items-center justify-center gap-15px rounded-sm bg-black p-15px"
+            >
+              <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>
+  );
+};
+
+export default LoginPageBody;

src/constants/url.ts

@@ -15,6 +15,9 @@ export const ISUNFA_ROUTE = {
   TERMS_OF_SERVICE: '/terms-of-service',
   PRIVACY_POLICY: '/privacy-policy',
   LOGIN: '/users/login',
+  BETA_LOGIN: '/beta/login', // Info: (20241001 - Liz) Beta login
+  EXAMPLE: '/beta/example', // Info: (20241001 - Liz) Beta example page for testing login
+
   DASHBOARD: '/users/dashboard',
   KYC: '/users/kyc',
   SALARY: '/users/salary',

src/pages/beta/example.tsx

@@ -0,0 +1,32 @@
+import { useSession, signIn } from 'next-auth/react';
+import { useEffect } from 'react';
+
+const ExamplePage: React.FC = () => {
+  const { data: session, status } = useSession();
+
+  useEffect(() => {
+    if (status === 'unauthenticated') {
+      signIn(); // Info: (20241001 - Liz) 若未驗證則導向登入頁面
+    }
+  }, [status]);
+
+  if (status === 'loading') {
+    return <p>載入中...</p>;
+  }
+
+  if (status === 'authenticated') {
+    return (
+      <div>
+        <h1>Example Page</h1>
+        <p>This is an example page. Let me know if you need help with anything.</p>
+        <p>
+          You are logged in as <strong>{session?.user?.email}</strong>.
+        </p>
+      </div>
+    );
+  }
+
+  return null;
+};
+
+export default ExamplePage;

src/pages/beta/login.tsx

@@ -0,0 +1,59 @@
+import Head from 'next/head';
+import React from 'react';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import LoginPageBody from '@/components/beta/login/login_page_body';
+import { GetServerSideProps } from 'next';
+import { useTranslation } from 'next-i18next';
+
+const LoginPage = () => {
+  const { t } = useTranslation('common');
+
+  return (
+    <>
+      <Head>
+        <meta charSet="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon/favicon.ico" />
+        <title>{t('common:NAV_BAR.LOGIN')} - iSunFA</title>
+        <meta
+          name="description"
+          content="iSunFA: Blockchain AI Forensic Accounting and Auditing is where simplicity meets accuracy in the realm of financial investigations."
+        />
+        <meta name="author" content="CAFECA" />
+        <meta name="keywords" content="區塊鏈,人工智慧,會計" />
+        <meta property="og:title" content="iSunFA" />
+        <meta
+          property="og:description"
+          content="iSunFA: Blockchain AI Forensic Accounting and Auditing is where simplicity meets accuracy in the realm of financial investigations."
+        />
+      </Head>
+
+      <div className="h-screen">
+        <LoginPageBody />
+      </div>
+    </>
+  );
+};
+
+export const getServerSideProps: GetServerSideProps = async ({ locale, query }) => {
+  const { invitation = '', action = '' } = query;
+
+  return {
+    props: {
+      invitation: invitation as string,
+      action: action as string,
+      ...(await serverSideTranslations(locale as string, [
+        'common',
+        'report_401',
+        'journal',
+        'kyc',
+        'project',
+        'setting',
+        'terms',
+        'salary',
+      ])),
+    },
+  };
+};
+
+export default LoginPage;

tailwind.config.ts

@@ -1410,11 +1410,11 @@ module.exports = {
         spinFast: 'spin 1s linear infinite',
         loading: 'loading 1.5s infinite',
         // Info: (20240925 - Liz) 客製化動畫 使用方式是 animate-fade-in
-        'slide-in-back': 'slide-in 1s linear backwards', // 1s 代表動畫時間
+        'slide-in-back': 'slide-in 1s linear backwards', // Info: (20241001 - Liz) 1s 代表動畫時間
         'fade-in-out': 'fade-in-out 3s ease-in-out forwards',
-        'fade-in-1': 'fade-in 2s ease-in forwards', // forwards 代表動畫結束後保持最後的狀態
-        'fade-in-2': 'fade-in 2s ease-in 1s forwards', // 動畫將在渲染或觸發動畫後 1 秒開始
-        wiggle: 'wiggle 1s ease-in-out infinite', // 1s 代表動畫時間，ease-in-out 代表動畫速度，infinite 代表無限循環
+        'fade-in-1': 'fade-in 2s ease-in forwards', // Info: (20241001 - Liz) forwards 代表動畫結束後保持最後的狀態
+        'fade-in-2': 'fade-in 2s ease-in 1s forwards', // Info: (20241001 - Liz) 動畫將在渲染或觸發動畫後 1 秒開始
+        wiggle: 'wiggle 1s ease-in-out infinite', // Info: (20241001 - Liz) 1s 代表動畫時間，ease-in-out 代表動畫速度，infinite 代表無限循環
       },
 
       content: {