From b596d04939589bcfee464f7f8d5f1410305a67b3 Mon Sep 17 00:00:00 2001 From: Steven Date: Sun, 14 Aug 2022 18:43:46 +0800 Subject: [PATCH] chore: update i18n for auth page --- web/src/components/GitHubBadge.tsx | 5 +- web/src/components/MenuBtnsPopup.tsx | 14 ++-- web/src/less/auth.less | 105 +++++++++++++++++++++++++ web/src/less/github-badge.less | 21 +---- web/src/less/signin.less | 81 ------------------- web/src/locales/en.json | 6 ++ web/src/locales/zh.json | 6 ++ web/src/pages/{Signin.tsx => Auth.tsx} | 101 +++++++++++++----------- web/src/pages/Home.tsx | 4 +- web/src/routers/appRouter.tsx | 4 +- web/src/store/modules/location.ts | 2 +- 11 files changed, 190 insertions(+), 159 deletions(-) create mode 100644 web/src/less/auth.less delete mode 100644 web/src/less/signin.less rename web/src/pages/{Signin.tsx => Auth.tsx} (55%) diff --git a/web/src/components/GitHubBadge.tsx b/web/src/components/GitHubBadge.tsx index d654839a..37331c89 100644 --- a/web/src/components/GitHubBadge.tsx +++ b/web/src/components/GitHubBadge.tsx @@ -20,10 +20,7 @@ const GitHubBadge: React.FC = () => { Star -
- {starCount || ""} - 🌟 -
+
{starCount || ""}
); }; diff --git a/web/src/components/MenuBtnsPopup.tsx b/web/src/components/MenuBtnsPopup.tsx index 53fa806b..d572c9bc 100644 --- a/web/src/components/MenuBtnsPopup.tsx +++ b/web/src/components/MenuBtnsPopup.tsx @@ -49,11 +49,15 @@ const MenuBtnsPopup: React.FC = (props: Props) => { }; const handleSignOutBtnClick = async () => { - userService.doSignOut().catch(() => { - // do nth - }); - locationService.replaceHistory("/signin"); - window.location.reload(); + userService + .doSignOut() + .then(() => { + locationService.replaceHistory("/auth"); + window.location.reload(); + }) + .catch(() => { + // do nth + }); }; return ( diff --git a/web/src/less/auth.less b/web/src/less/auth.less new file mode 100644 index 00000000..942f394f --- /dev/null +++ b/web/src/less/auth.less @@ -0,0 +1,105 @@ +@import "./mixin.less"; + +.page-wrapper.auth { + @apply flex flex-row justify-center items-center w-full h-screen bg-white; + + > .page-container { + @apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center; + + > .auth-form-wrapper { + @apply w-full py-4 grow flex flex-col justify-center items-center; + + > .page-header-container { + @apply flex flex-col justify-start items-start w-full mb-4; + + > .title-container { + @apply w-full flex flex-row justify-between items-center; + + > .title-text { + @apply text-2xl mb-2; + + > .icon-text { + @apply text-4xl; + } + } + } + + > .slogan-text { + @apply text-sm text-gray-700; + } + } + + > .page-content-container { + @apply flex flex-col justify-start items-start w-full; + + > .form-item-container { + @apply flex flex-col justify-start items-start relative w-full text-base mt-2; + + > .normal-text { + @apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none; + + &.not-null { + @apply text-sm top-0 z-10 leading-4 bg-white rounded; + } + } + + &.input-form-container { + @apply py-2; + + > input { + @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80; + } + } + } + + &.requesting { + @apply opacity-80; + } + } + + > .action-btns-container { + @apply flex flex-row justify-end items-center w-full mt-2; + + > .btn { + @apply px-1 py-2 text-sm rounded hover:opacity-80; + + &.signin-btn { + @apply bg-green-600 text-white px-3 shadow; + } + + &.requesting { + @apply cursor-wait opacity-80; + } + } + } + + > .tip-text { + @apply w-full inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap; + + &.host-tip { + @apply bg-blue-500 text-white px-2 py-1 rounded; + } + } + } + + > .footer-container { + @apply w-full flex flex-col justify-start items-center; + + > .language-container { + @apply mt-2 w-full flex flex-row justify-center items-center text-sm text-gray-400; + + > .locale-item { + @apply px-2 cursor-pointer; + + &.active { + @apply text-blue-600 font-bold; + } + } + + > .split-line { + @apply font-mono text-gray-400; + } + } + } + } +} diff --git a/web/src/less/github-badge.less b/web/src/less/github-badge.less index dfdf422a..f8c1ed38 100644 --- a/web/src/less/github-badge.less +++ b/web/src/less/github-badge.less @@ -2,7 +2,7 @@ @apply h-7 flex flex-row justify-start items-center border rounded cursor-pointer hover:opacity-80; > .github-icon { - @apply w-auto h-full px-2 border-r rounded-l flex flex-row justify-center items-center text-xs font-bold text-gray-800 bg-gray-100; + @apply w-auto h-full px-2 border-r rounded-l flex flex-row justify-center items-center text-xs text-gray-800 bg-gray-100; > .icon-img { @apply mr-1 w-4 h-4; @@ -11,24 +11,5 @@ > .count-text { @apply w-auto h-full flex flex-row justify-center items-center px-3 text-xs font-bold text-gray-800; - - > .icon-text { - @apply text-sm ml-1; - animation: 1.6s linear 0s infinite pulse; - } - } -} - -@keyframes pulse { - 0% { - transform: scale(0.95); - } - - 70% { - transform: scale(1.2); - } - - 100% { - transform: scale(0.95); } } diff --git a/web/src/less/signin.less b/web/src/less/signin.less deleted file mode 100644 index e255731d..00000000 --- a/web/src/less/signin.less +++ /dev/null @@ -1,81 +0,0 @@ -@import "./mixin.less"; - -.page-wrapper.signin { - @apply flex flex-row justify-center items-center w-full min-h-screen bg-white; - - > .page-container { - @apply w-80 max-w-full py-4 -mt-16; - - > .page-header-container { - @apply flex flex-col justify-start items-start w-full mb-4; - - > .title-container { - @apply w-full flex flex-row justify-between items-center; - - > .title-text { - @apply text-2xl mb-2; - - > .icon-text { - @apply text-4xl; - } - } - } - - > .slogan-text { - @apply text-sm text-gray-700; - } - } - - > .page-content-container { - @apply flex flex-col justify-start items-start w-full; - - > .form-item-container { - @apply flex flex-col justify-start items-start relative w-full text-base mt-2; - - > .normal-text { - @apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none; - - &.not-null { - @apply text-sm top-0 z-10 leading-4 bg-white rounded; - } - } - - &.input-form-container { - @apply py-2; - - > input { - @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80; - } - } - } - - &.requesting { - @apply opacity-80; - } - } - - > .action-btns-container { - @apply flex flex-row justify-end items-center w-full mt-2; - - > .btn { - @apply px-1 py-2 text-sm rounded hover:opacity-80; - - &.signin-btn { - @apply bg-green-600 text-white px-3 shadow; - } - - &.requesting { - @apply cursor-wait opacity-80; - } - } - } - - > .tip-text { - @apply w-auto inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap; - - &.host-tip { - @apply bg-blue-500 text-white px-2 py-1 rounded; - } - } - } -} diff --git a/web/src/locales/en.json b/web/src/locales/en.json index 7c9be418..a8756d28 100644 --- a/web/src/locales/en.json +++ b/web/src/locales/en.json @@ -4,5 +4,11 @@ "email": "Email", "password": "Password", "sign-in": "Sign in" + }, + "slogan": "An open source, self-hosted knowledge base that works with a SQLite db file.", + "auth": { + "signup-as-host": "Sign up as Host", + "host-tip": "You are registering as the Site Host.", + "not-host-tip": "If you don't have an account, please contact the site host." } } diff --git a/web/src/locales/zh.json b/web/src/locales/zh.json index 92259f0b..fb675447 100644 --- a/web/src/locales/zh.json +++ b/web/src/locales/zh.json @@ -4,5 +4,11 @@ "email": "邮箱", "password": "密码", "sign-in": "登录" + }, + "slogan": "一个开源的、支持私有化部署的碎片化知识卡片管理工具。", + "auth": { + "signup-as-host": "注册为 Host", + "host-tip": "你正在注册为 Host 用户账号。", + "not-host-tip": "如果你没有账号，请联系站点 Host" } } diff --git a/web/src/pages/Signin.tsx b/web/src/pages/Auth.tsx similarity index 55% rename from web/src/pages/Signin.tsx rename to web/src/pages/Auth.tsx index 6395e80c..959d467d 100644 --- a/web/src/pages/Signin.tsx +++ b/web/src/pages/Auth.tsx @@ -3,10 +3,10 @@ import * as api from "../helpers/api"; import { validate, ValidatorConfig } from "../helpers/validator"; import useI18n from "../hooks/useI18n"; import useLoading from "../hooks/useLoading"; -import { locationService, userService } from "../services"; +import { globalService, locationService, userService } from "../services"; import toastHelper from "../components/Toast"; import GitHubBadge from "../components/GitHubBadge"; -import "../less/signin.less"; +import "../less/auth.less"; interface Props {} @@ -17,8 +17,8 @@ const validateConfig: ValidatorConfig = { noChinese: true, }; -const Signin: React.FC = () => { - const { t } = useI18n(); +const Auth: React.FC = () => { + const { t, locale } = useI18n(); const pageLoadingState = useLoading(true); const [siteHost, setSiteHost] = useState(); const [email, setEmail] = useState(""); @@ -113,55 +113,68 @@ const Signin: React.FC = () => { actionBtnLoadingState.setFinish(); }; + const handleLocaleItemClick = (locale: Locale) => { + globalService.setLocale(locale); + }; + return ( -
+
-
-
-

- ✍️ Memos -

- +
+
+
+

+ ✍️ Memos +

+ +
+

{t("slogan")}

-

- An open source, self-hosted knowledge base that works with a SQLite db file. +

+
+ {t("common.email")} + +
+
+ {t("common.password")} + +
+
+
+ {siteHost || pageLoadingState.isLoading ? ( + + ) : ( + + )} +
+

+ {siteHost || pageLoadingState.isLoading ? t("auth.not-host-tip") : t("auth.host-tip")}

-
-
- {t("common.email")} - -
-
- {t("common.password")} - +
+
+ handleLocaleItemClick("en")}> + English + + / + handleLocaleItemClick("zh")}> + 中文 +
-
- {siteHost || pageLoadingState.isLoading ? ( - - ) : ( - - )} -
-

- {siteHost || pageLoadingState.isLoading - ? "If you don't have an account, please\ncontact the site host." - : "You are registering as the Site Host."} -

); }; -export default Signin; +export default Auth; diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx index b0406c2e..82211a99 100644 --- a/web/src/pages/Home.tsx +++ b/web/src/pages/Home.tsx @@ -23,7 +23,7 @@ function Home() { .finally(async () => { const { host, owner, user } = userService.getState(); if (!host) { - locationService.replaceHistory("/signin"); + locationService.replaceHistory("/auth"); return; } @@ -61,7 +61,7 @@ function Home() { 🏠 Back to Home ) : ( - )} diff --git a/web/src/routers/appRouter.tsx b/web/src/routers/appRouter.tsx index 8e4be8a5..8c3bce13 100644 --- a/web/src/routers/appRouter.tsx +++ b/web/src/routers/appRouter.tsx @@ -1,8 +1,8 @@ import Home from "../pages/Home"; -import Signin from "../pages/Signin"; +import Auth from "../pages/Auth"; const appRouter = { - "/signin": , + "/auth": , "*": , }; diff --git a/web/src/store/modules/location.ts b/web/src/store/modules/location.ts index ec5073cb..caeb4ed0 100644 --- a/web/src/store/modules/location.ts +++ b/web/src/store/modules/location.ts @@ -21,7 +21,7 @@ interface State { const getValidPathname = (pathname: string): string => { const userPageUrlRegex = /^\/u\/\d+.*/; - if (["/", "/signin"].includes(pathname) || userPageUrlRegex.test(pathname)) { + if (["/", "/auth"].includes(pathname) || userPageUrlRegex.test(pathname)) { return pathname; } else { return "/";