From 67d1fca11d8c99051f1c7ab3df1301d3432732c0 Mon Sep 17 00:00:00 2001
From: "Kilu.He" <108015703+qinluhe@users.noreply.github.com>
Date: Wed, 26 Feb 2025 17:18:54 +0800
Subject: [PATCH] feat: add a entry for login (#51)

---
 src/@types/translations/en.json        |  3 ++-
 src/assets/right.svg                   |  4 ++++
 src/components/login/Login.tsx         | 15 +++++++++++++--
 src/components/login/LoginProvider.tsx | 19 ++++++++++---------
 4 files changed, 29 insertions(+), 12 deletions(-)
 create mode 100644 src/assets/right.svg

diff --git a/src/@types/translations/en.json b/src/@types/translations/en.json
index 373eb4ad..3898fbe2 100644
--- a/src/@types/translations/en.json
+++ b/src/@types/translations/en.json
@@ -2694,7 +2694,8 @@
     "dropNotionFile": "Drop your Notion zip file here to upload, or click to browse",
     "error": {
       "pageNameIsEmpty": "The page name is empty, please try another one"
-    }
+    },
+    "visitOurWebsite": "Visit our official website"
   },
   "globalComment": {
     "comments": "Comments",
diff --git a/src/assets/right.svg b/src/assets/right.svg
new file mode 100644
index 00000000..eb5b11b5
--- /dev/null
+++ b/src/assets/right.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M3 8H13M13 8L9.25 4.25M13 8L9.25 11.75" stroke="currentColor" stroke-linecap="round"
+          stroke-linejoin="round"/>
+</svg>
diff --git a/src/components/login/Login.tsx b/src/components/login/Login.tsx
index e014f03a..6527d93f 100644
--- a/src/components/login/Login.tsx
+++ b/src/components/login/Login.tsx
@@ -4,13 +4,19 @@ import { Divider } from '@mui/material';
 import React from 'react';
 import { ReactComponent as Logo } from '@/assets/logo.svg';
 import { useTranslation } from 'react-i18next';
+import { ReactComponent as ArrowRight } from '@/assets/right.svg';
 
-export function Login ({ redirectTo }: { redirectTo: string }) {
+export function Login({ redirectTo }: { redirectTo: string }) {
   const { t } = useTranslation();
 
   return (
     <div className={'my-10 flex flex-col items-center justify-center gap-[24px] px-4'}>
-      <div className={'flex w-full flex-col items-center justify-center gap-[14px]'}>
+      <div
+        onClick={() => {
+          window.location.href = '/';
+        }}
+        className={'flex w-full cursor-pointer flex-col items-center justify-center gap-[14px]'}
+      >
         <Logo className={'h-10 w-10'} />
         <div className={'text-[24px] font-semibold max-sm:text-[20px]'}>{t('welcomeTo')} AppFlowy</div>
       </div>
@@ -44,6 +50,11 @@ export function Login ({ redirectTo }: { redirectTo: string }) {
         </a>
         .
       </div>
+      <Divider className={'w-[300px] max-w-full border-line-divider'} />
+      <div className={'text-text-title text-xs font-medium cursor-pointer opacity-60 hover:opacity-100 w-full gap-2 flex items-center justify-center'}>
+        <span>{t('web.visitOurWebsite')}</span>
+        <ArrowRight className={'w-4 h-4'} />
+      </div>
     </div>
   );
 }
diff --git a/src/components/login/LoginProvider.tsx b/src/components/login/LoginProvider.tsx
index 652dd2d7..f8faa454 100644
--- a/src/components/login/LoginProvider.tsx
+++ b/src/components/login/LoginProvider.tsx
@@ -1,6 +1,6 @@
 import { notify } from '@/components/_shared/notify';
 import { AFConfigContext } from '@/components/main/app.hooks';
-import { Button, Collapse, Divider } from '@mui/material';
+import { Button, Collapse } from '@mui/material';
 import React, { useCallback, useContext, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as GoogleSvg } from '@/assets/login/google.svg';
@@ -8,7 +8,7 @@ import { ReactComponent as GithubSvg } from '@/assets/login/github.svg';
 import { ReactComponent as DiscordSvg } from '@/assets/login/discord.svg';
 import { ReactComponent as AppleSvg } from '@/assets/login/apple.svg';
 
-function LoginProvider ({ redirectTo }: { redirectTo: string }) {
+function LoginProvider({ redirectTo }: { redirectTo: string }) {
   const { t } = useTranslation();
   const [expand, setExpand] = React.useState(false);
   const options = useMemo(
@@ -38,9 +38,9 @@ function LoginProvider ({ redirectTo }: { redirectTo: string }) {
   );
   const service = useContext(AFConfigContext)?.service;
 
-  const handleClick = useCallback(async (option: string) => {
+  const handleClick = useCallback(async(option: string) => {
     try {
-      switch (option) {
+      switch(option) {
         case 'google':
           await service?.signInGoogle({ redirectTo });
           break;
@@ -54,7 +54,7 @@ function LoginProvider ({ redirectTo }: { redirectTo: string }) {
           await service?.signInDiscord({ redirectTo });
           break;
       }
-    } catch (e) {
+    } catch(e) {
       notify.error(t('web.signInError'));
     }
   }, [service, t, redirectTo]);
@@ -83,14 +83,15 @@ function LoginProvider ({ redirectTo }: { redirectTo: string }) {
         color={'inherit'}
         size={'small'}
         onClick={() => setExpand(!expand)}
-        className={'text-sm w-full flex gap-2 items-center hover:bg-transparent hover:text-text-title font-medium text-text-caption'}
+        className={'text-sm w-full flex gap-2 items-center hover:bg-transparent font-medium text-fill-default'}
       >
-        <Divider className={'flex-1'} />
         {t('web.moreOptions')}
-        <Divider className={'flex-1'} />
       </Button>}
 
-      <Collapse className={'w-full'} in={expand}>
+      <Collapse
+        className={'w-full'}
+        in={expand}
+      >
         <div className={'gap-[10px] w-full flex-col flex'}>{options.slice(2).map(renderOption)}</div>
       </Collapse>
     </div>