chore: update auth page (#1920)

* chore: update auth page

* chore: update

api/v1/auth/auth.go

@@ -33,11 +33,9 @@ const (
 	// 2. The access token has already expired, we refresh the token so that the ongoing request can pass through.
 	CookieExpDuration = refreshTokenDuration - 1*time.Minute
 	// AccessTokenCookieName is the cookie name of access token.
-	AccessTokenCookieName = "access-token"
+	AccessTokenCookieName = "memos.access-token"
 	// RefreshTokenCookieName is the cookie name of refresh token.
-	RefreshTokenCookieName = "refresh-token"
+	RefreshTokenCookieName = "memos.refresh-token"
-	// UserIDCookieName is the cookie name of user ID.
-	UserIDCookieName = "user"
 )
 
 type claimsMessage struct {

api/v1/system.go

@@ -73,7 +73,7 @@ func (s *APIV1Service) registerSystemRoutes(g *echo.Group) {
 			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to find host user").SetInternal(err)
 		}
 		if hostUser != nil {
-			systemStatus.Host = converUserFromStore(hostUser)
+			systemStatus.Host = convertUserFromStore(hostUser)
 			// data desensitize
 			systemStatus.Host.OpenID = ""
 			systemStatus.Host.Email = ""

api/v1/user.go

@@ -177,7 +177,7 @@ func (s *APIV1Service) registerUserRoutes(g *echo.Group) {
 			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to create user").SetInternal(err)
 		}
 
-		userMessage := converUserFromStore(user)
+		userMessage := convertUserFromStore(user)
 		if err := s.createUserCreateActivity(c, userMessage); err != nil {
 			return echo.NewHTTPError(http.StatusInternalServerError, "Failed to create activity").SetInternal(err)
 		}
@@ -193,7 +193,7 @@ func (s *APIV1Service) registerUserRoutes(g *echo.Group) {
 
 		userMessageList := make([]*User, 0, len(list))
 		for _, user := range list {
-			userMessage := converUserFromStore(user)
+			userMessage := convertUserFromStore(user)
 			// data desensitize
 			userMessage.OpenID = ""
 			userMessage.Email = ""
@@ -228,7 +228,7 @@ func (s *APIV1Service) registerUserRoutes(g *echo.Group) {
 		for _, userSetting := range list {
 			userSettingList = append(userSettingList, convertUserSettingFromStore(userSetting))
 		}
-		userMessage := converUserFromStore(user)
+		userMessage := convertUserFromStore(user)
 		userMessage.UserSettingList = userSettingList
 		return c.JSON(http.StatusOK, userMessage)
 	})
@@ -248,7 +248,7 @@ func (s *APIV1Service) registerUserRoutes(g *echo.Group) {
 			return echo.NewHTTPError(http.StatusNotFound, "User not found")
 		}
 
-		userMessage := converUserFromStore(user)
+		userMessage := convertUserFromStore(user)
 		// data desensitize
 		userMessage.OpenID = ""
 		userMessage.Email = ""
@@ -334,7 +334,7 @@ func (s *APIV1Service) registerUserRoutes(g *echo.Group) {
 		for _, userSetting := range list {
 			userSettingList = append(userSettingList, convertUserSettingFromStore(userSetting))
 		}
-		userMessage := converUserFromStore(user)
+		userMessage := convertUserFromStore(user)
 		userMessage.UserSettingList = userSettingList
 		return c.JSON(http.StatusOK, userMessage)
 	})
@@ -395,7 +395,7 @@ func (s *APIV1Service) createUserCreateActivity(c echo.Context, user *User) erro
 	return err
 }
 
-func converUserFromStore(user *store.User) *User {
+func convertUserFromStore(user *store.User) *User {
 	return &User{
 		ID:           user.ID,
 		RowStatus:    RowStatus(user.RowStatus),

test/server/server.go

@@ -11,6 +11,7 @@ import (
 	"time"
 
 	"github.com/pkg/errors"
+	"github.com/usememos/memos/api/v1/auth"
 	"github.com/usememos/memos/server"
 	"github.com/usememos/memos/server/profile"
 	"github.com/usememos/memos/store"
@@ -132,7 +133,7 @@ func (s *TestingServer) request(method, uri string, body io.Reader, params, head
 			h := resp.Header.Get("Set-Cookie")
 			parts := strings.Split(h, "; ")
 			for _, p := range parts {
-				if strings.HasPrefix(p, "access-token=") {
+				if strings.HasPrefix(p, fmt.Sprintf("%s=", auth.AccessTokenCookieName)) {
 					cookie = p
 					break
 				}

web/src/components/DemoBanner.tsx

@@ -23,7 +23,7 @@ const DemoBanner: React.FC = () => {
   if (!state.show) return null;
 
   return (
-    <div className="z-1 flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
+    <div className="z-10 flex flex-row items-center justify-center w-full py-2 text-sm sm:text-lg font-medium dark:text-gray-300 bg-white dark:bg-zinc-700 shadow">
       <div className="w-full max-w-6xl px-4 flex flex-row justify-between items-center gap-x-3">
         <span>✨ A lightweight, self-hosted memo hub. Open Source and Free forever. ✨</span>
         <a className="btn-primary shadow" href="https://usememos.com/docs/install/docker" target="_blank">

web/src/pages/Auth.tsx

@@ -17,8 +17,8 @@ const Auth = () => {
   const actionBtnLoadingState = useLoading(false);
   const { appearance, locale, systemStatus } = globalStore.state;
   const mode = systemStatus.profile.mode;
-  const [username, setUsername] = useState(mode === "demo" ? "demohero" : "");
+  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState(mode === "demo" ? "secret" : "");
+  const [password, setPassword] = useState("");
   const [identityProviderList, setIdentityProviderList] = useState<IdentityProvider[]>([]);
 
   useEffect(() => {
@@ -30,6 +30,13 @@ const Auth = () => {
     fetchIdentityProviderList();
   }, []);
 
+  useEffect(() => {
+    if (mode === "demo") {
+      setUsername("demohero");
+      setPassword("secret");
+    }
+  }, [mode]);
+
   const handleUsernameInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
     const text = e.target.value as string;
     setUsername(text);
@@ -51,13 +58,13 @@ const Auth = () => {
   const handleFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (systemStatus?.host) {
-      handleSignInBtnClick();
+      handleSignInButtonClick();
     } else {
-      handleSignUpBtnsClick();
+      handleSignUpButtonClick();
     }
   };
 
-  const handleSignInBtnClick = async () => {
+  const handleSignInButtonClick = async () => {
     if (username === "" || password === "") {
       return;
     }
@@ -82,7 +89,7 @@ const Auth = () => {
     actionBtnLoadingState.setFinish();
   };
 
-  const handleSignUpBtnsClick = async () => {
+  const handleSignUpButtonClick = async () => {
     if (username === "" || password === "") {
       return;
     }
@@ -170,40 +177,26 @@ const Auth = () => {
               </div>
             </div>
             <div className="flex flex-row justify-end items-center w-full mt-2">
-              {systemStatus?.host ? (
+              {actionBtnLoadingState.isLoading && <Icon.Loader className="w-4 h-auto mr-2 animate-spin dark:text-gray-300" />}
-                <>
+              {systemStatus?.allowSignUp && (
-                  {actionBtnLoadingState.isLoading && <Icon.Loader className="w-4 h-auto mr-2 animate-spin dark:text-gray-300" />}
-                  {systemStatus?.allowSignUp && (
-                    <>
-                      <button
-                        type="button"
-                        className={`btn-text ${actionBtnLoadingState.isLoading ? "cursor-wait opacity-80" : ""}`}
-                        onClick={handleSignUpBtnsClick}
-                      >
-                        {t("common.sign-up")}
-                      </button>
-                      <span className="mr-2 font-mono text-gray-200">/</span>
-                    </>
-                  )}
-                  <button
-                    type="submit"
-                    className={`btn-primary ${actionBtnLoadingState.isLoading ? "cursor-wait opacity-80" : ""}`}
-                    onClick={handleSignInBtnClick}
-                  >
-                    {t("common.sign-in")}
-                  </button>
-                </>
-              ) : (
                 <>
                   <button
-                    type="submit"
+                    type="button"
-                    className={`btn-primary ${actionBtnLoadingState.isLoading ? "cursor-wait opacity-80" : ""}`}
+                    className={`btn-text ${actionBtnLoadingState.isLoading ? "cursor-wait opacity-80" : ""}`}
-                    onClick={handleSignUpBtnsClick}
+                    onClick={handleSignUpButtonClick}
                   >
-                    {t("auth.signup-as-host")}
+                    {t("common.sign-up")}
                   </button>
+                  <span className="mr-2 font-mono text-gray-200">/</span>
                 </>
               )}
+              <button
+                type="submit"
+                className={`btn-primary ${actionBtnLoadingState.isLoading ? "cursor-wait opacity-80" : ""}`}
+                onClick={handleSignInButtonClick}
+              >
+                {t("common.sign-in")}
+              </button>
             </div>
           </form>
           {identityProviderList.length > 0 && (