chore: update auth pages

web/src/components/Header.tsx

@@ -70,7 +70,7 @@ const Header = () => {
     title: t("common.settings"),
     icon: <Icon.Settings className="mr-3 w-6 h-auto opacity-70" />,
   };
-  const authNavLink: NavLinkItem = {
+  const signInNavLink: NavLinkItem = {
     id: "header-auth",
     path: "/auth",
     title: t("common.sign-in"),
@@ -79,7 +79,7 @@ const Header = () => {
 
   const navLinks: NavLinkItem[] = user
     ? [homeNavLink, dailyReviewNavLink, resourcesNavLink, exploreNavLink, archivedNavLink, settingNavLink]
-    : [exploreNavLink, authNavLink];
+    : [exploreNavLink, signInNavLink];
 
   return (
     <div

web/src/pages/Auth.tsx → web/src/pages/SignIn.tsx

 import { Button, Divider, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { toast } from "react-hot-toast";
+import { Link } from "react-router-dom";
 import AppearanceSelect from "@/components/AppearanceSelect";
-import Icon from "@/components/Icon";
 import LocaleSelect from "@/components/LocaleSelect";
 import * as api from "@/helpers/api";
 import { absolutifyLink } from "@/helpers/utils";
@@ -10,7 +10,7 @@ import useLoading from "@/hooks/useLoading";
 import { useGlobalStore, useUserStore } from "@/store/module";
 import { useTranslate } from "@/utils/i18n";
 
-const Auth = () => {
+const SignIn = () => {
   const t = useTranslate();
   const globalStore = useGlobalStore();
   const userStore = useUserStore();
@@ -57,11 +57,7 @@ const Auth = () => {
 
   const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
-    if (systemStatus?.host) {
     handleSignInButtonClick();
-    } else {
-      handleSignUpButtonClick();
-    }
   };
 
   const handleSignInButtonClick = async () => {
@@ -89,31 +85,6 @@ const Auth = () => {
     actionBtnLoadingState.setFinish();
   };
 
-  const handleSignUpButtonClick = async () => {
-    if (username === "" || password === "") {
-      return;
-    }
-
-    if (actionBtnLoadingState.isLoading) {
-      return;
-    }
-
-    try {
-      actionBtnLoadingState.setLoading();
-      await api.signup(username, password);
-      const user = await userStore.doSignIn();
-      if (user) {
-        window.location.href = "/";
-      } else {
-        toast.error(t("message.signup-failed"));
-      }
-    } catch (error: any) {
-      console.error(error);
-      toast.error(error.response.data.message || error.message || t("message.signup-failed"));
-    }
-    actionBtnLoadingState.setFinish();
-  };
-
   const handleSignInWithIdentityProvider = async (identityProvider: IdentityProvider) => {
     const stateQueryParameter = `auth.signin.${identityProvider.name}-${identityProvider.id}`;
     if (identityProvider.type === "OAUTH2") {
@@ -132,13 +103,16 @@ const Auth = () => {
     <div className="flex flex-row justify-center items-center w-full h-full dark:bg-zinc-800">
       <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
         <div className="w-full py-4 grow flex flex-col justify-center items-center">
-          <div className="w-full flex flex-col justify-center items-center mb-2">
-            <img className="h-20 w-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />
-            <p className="mt-2 text-3xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
+          <div className="w-full flex flex-row justify-center items-center mb-6">
+            <img className="h-14 w-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />
+            <p className="ml-4 text-5xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
           </div>
           {!disablePasswordLogin && (
+            <>
               <form className="w-full mt-2" onSubmit={handleFormSubmit}>
                 <div className="flex flex-col justify-start items-start w-full gap-4">
+                  <div className="w-full flex flex-col justify-start items-start gap-2">
+                    <span className="leading-8 text-gray-600">{t("common.username")}</span>
                     <Input
                       className="w-full"
                       size="lg"
@@ -149,6 +123,9 @@ const Auth = () => {
                       onChange={handleUsernameInputChanged}
                       required
                     />
+                  </div>
+                  <div className="w-full flex flex-col justify-start items-start gap-2">
+                    <span className="leading-8 text-gray-600">{t("common.password")}</span>
                     <Input
                       className="w-full"
                       size="lg"
@@ -160,35 +137,29 @@ const Auth = () => {
                       required
                     />
                   </div>
+                </div>
                 <div className="flex flex-row justify-end items-center w-full mt-6">
-                {actionBtnLoadingState.isLoading && <Icon.Loader className="w-4 h-auto mr-2 animate-spin dark:text-gray-300" />}
-                {!systemStatus.host ? (
-                  <Button disabled={actionBtnLoadingState.isLoading} onClick={handleSignUpButtonClick}>
-                    {t("common.sign-up")}
-                  </Button>
-                ) : (
-                  <>
-                    {systemStatus?.allowSignUp && (
-                      <>
-                        <Button variant={"plain"} disabled={actionBtnLoadingState.isLoading} onClick={handleSignUpButtonClick}>
-                          {t("common.sign-up")}
-                        </Button>
-                        <span className="mr-2 font-mono text-gray-200">/</span>
-                      </>
-                    )}
-                    <Button type="submit" disabled={actionBtnLoadingState.isLoading} onClick={handleSignInButtonClick}>
+                  <Button
+                    className="w-full"
+                    type="submit"
+                    disabled={actionBtnLoadingState.isLoading}
+                    loading={actionBtnLoadingState.isLoading}
+                    onClick={handleSignInButtonClick}
+                  >
                     {t("common.sign-in")}
                   </Button>
-                  </>
-                )}
                 </div>
               </form>
-          )}
-          {!systemStatus.host && (
-            <p className="w-full inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap">
-              {t("auth.host-tip")}
+              {systemStatus.allowSignUp && (
+                <p className="w-full mt-4 text-sm">
+                  <span className="dark:text-gray-500">{"Don't have an account yet?"}</span>
+                  <Link to="/auth/signup" className="cursor-pointer ml-2 text-blue-600 hover:underline">
+                    {t("common.sign-up")}
+                  </Link>
                 </p>
               )}
+            </>
+          )}
           {identityProviderList.length > 0 && (
             <>
               {!disablePasswordLogin && <Divider className="!my-4">{t("common.or")}</Divider>}
@@ -218,4 +189,4 @@ const Auth = () => {
   );
 };
 
-export default Auth;
+export default SignIn;

web/src/pages/SignUp.tsx

+import { Button, Input } from "@mui/joy";
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+import { Link } from "react-router-dom";
+import AppearanceSelect from "@/components/AppearanceSelect";
+import LocaleSelect from "@/components/LocaleSelect";
+import * as api from "@/helpers/api";
+import useLoading from "@/hooks/useLoading";
+import { useGlobalStore, useUserStore } from "@/store/module";
+import { useTranslate } from "@/utils/i18n";
+
+const SignUp = () => {
+  const t = useTranslate();
+  const globalStore = useGlobalStore();
+  const userStore = useUserStore();
+  const actionBtnLoadingState = useLoading(false);
+  const { appearance, locale, systemStatus } = globalStore.state;
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleUsernameInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setUsername(text);
+  };
+
+  const handlePasswordInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setPassword(text);
+  };
+
+  const handleLocaleSelectChange = (locale: Locale) => {
+    globalStore.setLocale(locale);
+  };
+
+  const handleAppearanceSelectChange = (appearance: Appearance) => {
+    globalStore.setAppearance(appearance);
+  };
+
+  const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    handleSignUpButtonClick();
+  };
+
+  const handleSignUpButtonClick = async () => {
+    if (username === "" || password === "") {
+      return;
+    }
+
+    if (actionBtnLoadingState.isLoading) {
+      return;
+    }
+
+    try {
+      actionBtnLoadingState.setLoading();
+      await api.signup(username, password);
+      const user = await userStore.doSignIn();
+      if (user) {
+        window.location.href = "/";
+      } else {
+        toast.error(t("message.signup-failed"));
+      }
+    } catch (error: any) {
+      console.error(error);
+      toast.error(error.response.data.message || error.message || t("message.signup-failed"));
+    }
+    actionBtnLoadingState.setFinish();
+  };
+
+  return (
+    <div className="flex flex-row justify-center items-center w-full h-full dark:bg-zinc-800">
+      <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
+        <div className="w-full py-4 grow flex flex-col justify-center items-center">
+          <div className="w-full flex flex-row justify-center items-center mb-6">
+            <img className="h-14 w-auto rounded-full shadow" src={systemStatus.customizedProfile.logoUrl} alt="" />
+            <p className="ml-4 text-5xl text-black opacity-80 dark:text-gray-200">{systemStatus.customizedProfile.name}</p>
+          </div>
+          <p className="w-full text-2xl mt-6 dark:text-gray-500">Create your account</p>
+          <form className="w-full mt-2" onSubmit={handleFormSubmit}>
+            <div className="flex flex-col justify-start items-start w-full gap-4">
+              <div className="w-full flex flex-col justify-start items-start gap-2">
+                <span className="leading-8 text-gray-600">{t("common.username")}</span>
+                <Input
+                  className="w-full"
+                  size="lg"
+                  type="text"
+                  readOnly={actionBtnLoadingState.isLoading}
+                  placeholder={t("common.username")}
+                  value={username}
+                  onChange={handleUsernameInputChanged}
+                  required
+                />
+              </div>
+              <div className="w-full flex flex-col justify-start items-start gap-2">
+                <span className="leading-8 text-gray-600">{t("common.password")}</span>
+                <Input
+                  className="w-full"
+                  size="lg"
+                  type="password"
+                  readOnly={actionBtnLoadingState.isLoading}
+                  placeholder={t("common.password")}
+                  value={password}
+                  onChange={handlePasswordInputChanged}
+                  required
+                />
+              </div>
+            </div>
+            <div className="flex flex-row justify-end items-center w-full mt-6">
+              <Button
+                className="w-full"
+                type="submit"
+                disabled={actionBtnLoadingState.isLoading}
+                loading={actionBtnLoadingState.isLoading}
+                onClick={handleSignUpButtonClick}
+              >
+                {t("common.sign-up")}
+              </Button>
+            </div>
+          </form>
+          <p className="w-full mt-4 text-sm">
+            <span className="dark:text-gray-500">{"Already has an account?"}</span>
+            <Link to="/auth" className="cursor-pointer ml-2 text-blue-600 hover:underline">
+              {t("common.sign-in")}
+            </Link>
+          </p>
+        </div>
+        <div className="flex flex-row items-center justify-center w-full gap-2">
+          <LocaleSelect value={locale} onChange={handleLocaleSelectChange} />
+          <AppearanceSelect value={appearance} onChange={handleAppearanceSelectChange} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SignUp;

web/src/router/index.tsx

 import { lazy } from "react";
 import { createBrowserRouter, redirect } from "react-router-dom";
 import App from "@/App";
-import Archived from "@/pages/Archived";
-import DailyReview from "@/pages/DailyReview";
-import Resources from "@/pages/Resources";
-import Setting from "@/pages/Setting";
 import { initialGlobalState, initialUserState } from "@/store/module";
 
 const Root = lazy(() => import("@/layouts/Root"));
-const Auth = lazy(() => import("@/pages/Auth"));
+const SignIn = lazy(() => import("@/pages/SignIn"));
+const SignUp = lazy(() => import("@/pages/SignUp"));
 const AuthCallback = lazy(() => import("@/pages/AuthCallback"));
 const Explore = lazy(() => import("@/pages/Explore"));
 const Home = lazy(() => import("@/pages/Home"));
 const UserProfile = lazy(() => import("@/pages/UserProfile"));
 const MemoDetail = lazy(() => import("@/pages/MemoDetail"));
 const EmbedMemo = lazy(() => import("@/pages/EmbedMemo"));
+const Archived = lazy(() => import("@/pages/Archived"));
+const DailyReview = lazy(() => import("@/pages/DailyReview"));
+const Resources = lazy(() => import("@/pages/Resources"));
+const Setting = lazy(() => import("@/pages/Setting"));
 const NotFound = lazy(() => import("@/pages/NotFound"));
 
 const initialGlobalStateLoader = (() => {
@@ -58,7 +59,11 @@ const router = createBrowserRouter([
     children: [
       {
         path: "/auth",
-        element: <Auth />,
+        element: <SignIn />,
+      },
+      {
+        path: "/auth/signup",
+        element: <SignUp />,
       },
       {
         path: "/auth/callback",