diff --git a/package.json b/package.json index 8d10b018..152f3e1e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "iSunFA", - "version": "0.8.2+24", + "version": "0.8.2+25", "private": false, "scripts": { "dev": "next dev", diff --git a/src/components/beta/login/login_page_body.tsx b/src/components/beta/login/login_page_body.tsx new file mode 100644 index 00000000..60f219be --- /dev/null +++ b/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 ( +
+
+
+ ); +}; + +const LoginPageBody = () => { + const { t } = useTranslation('common'); + const { data: session, status } = useSession(); + + if (status === 'authenticated') { + // ToDo: (20240927 - Liz) 拿取使用者資料，檢查是否有同意服務條款，如果沒有就跳出同意服務條款的 modal + return ( +
+

已登入為 {session?.user?.email}

+ +
+ ); + } + + return ( +
+
+ +
+ + + +
+ + {isAuthLoading ? ( + + ) : ( +
+
+

iSunFA

+

{t('common:LOGIN_PAGE_BODY.LOG_IN')}

+
+ +
+ +
+ +
+ + + +
+
+ )} +
+ ); +}; + +export default LoginPageBody; diff --git a/src/constants/url.ts b/src/constants/url.ts index 09788512..72548159 100644 --- a/src/constants/url.ts +++ b/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', diff --git a/src/pages/beta/example.tsx b/src/pages/beta/example.tsx new file mode 100644 index 00000000..afa64f92 --- /dev/null +++ b/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

載入中...

; + } + + if (status === 'authenticated') { + return ( +
+

Example Page

+

This is an example page. Let me know if you need help with anything.

+

+ You are logged in as {session?.user?.email}. +

+
+ ); + } + + return null; +}; + +export default ExamplePage; diff --git a/src/pages/beta/login.tsx b/src/pages/beta/login.tsx new file mode 100644 index 00000000..3817d1be --- /dev/null +++ b/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 ( + <> + + + + + {t('common:NAV_BAR.LOGIN')} - iSunFA + + + + + + + +
+ +
+ + ); +}; + +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; diff --git a/tailwind.config.ts b/tailwind.config.ts index 7f9cdf51..849386f7 100644 --- a/tailwind.config.ts +++ b/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: {