feat: implement edit userinfo

api/v1/user.go

@@ -69,10 +69,10 @@ func (create CreateUserRequest) Validate() error {
 }
 
 type PatchUserRequest struct {
-	RowStatus   *RowStatus `json:"rowStatus"`
+	RowStatus *RowStatus `json:"rowStatus"`
-	Email       *string    `json:"email"`
+	Email     *string    `json:"email"`
-	DisplayName *string    `json:"displayName"`
+	Nickname  *string    `json:"nickname"`
-	Password    *string    `json:"password"`
+	Password  *string    `json:"password"`
 }
 
 type UserDelete struct {
@@ -151,11 +151,16 @@ func (s *APIV1Service) registerUserRoutes(g *echo.Group) {
 		updateUser := &store.UpdateUser{
 			ID: currentUserID,
 		}
+		if userPatch.Email != nil {
+			if !validateEmail(*userPatch.Email) {
+				return echo.NewHTTPError(http.StatusBadRequest, "Invalid email format")
+			}
 
-		if userPatch.Email != nil && !validateEmail(*userPatch.Email) {
+			updateUser.Email = userPatch.Email
-			return echo.NewHTTPError(http.StatusBadRequest, "Invalid email format")
+		}
+		if userPatch.Nickname != nil {
+			updateUser.Nickname = userPatch.Nickname
 		}
-
 		if userPatch.Password != nil && *userPatch.Password != "" {
 			passwordHash, err := bcrypt.GenerateFromPassword([]byte(*userPatch.Password), bcrypt.DefaultCost)
 			if err != nil {

web/src/components/ChangePasswordDialog.tsx

@@ -1,18 +1,10 @@
 import { Button, Input, Modal, ModalDialog } from "@mui/joy";
 import { useState } from "react";
 import { toast } from "react-hot-toast";
-import { validate, ValidatorConfig } from "../helpers/validator";
 import useLoading from "../hooks/useLoading";
 import { userService } from "../services";
 import Icon from "./Icon";
 
-const validateConfig: ValidatorConfig = {
-  minLength: 3,
-  maxLength: 24,
-  noSpace: true,
-  noChinese: true,
-};
-
 interface Props {
   onClose: () => void;
 }
@@ -49,12 +41,6 @@ const ChangePasswordDialog: React.FC<Props> = (props: Props) => {
       return;
     }
 
-    const passwordValidResult = validate(newPassword, validateConfig);
-    if (!passwordValidResult.result) {
-      toast.error("New password is invalid");
-      return;
-    }
-
     requestState.setLoading();
     try {
       const user = userService.getState().user as User;

web/src/components/EditUserinfoDialog.tsx

@@ -0,0 +1,89 @@
+import { Button, Input, Modal, ModalDialog } from "@mui/joy";
+import { useState } from "react";
+import { toast } from "react-hot-toast";
+import useLoading from "../hooks/useLoading";
+import { userService } from "../services";
+import Icon from "./Icon";
+import { useAppSelector } from "../stores";
+
+interface Props {
+  onClose: () => void;
+}
+
+const EditUserinfoDialog: React.FC<Props> = (props: Props) => {
+  const { onClose } = props;
+  const user = useAppSelector((state) => state.user.user as User);
+  const [email, setEmail] = useState(user.email);
+  const [nickname, setNickname] = useState(user.nickname);
+  const requestState = useLoading(false);
+
+  const handleCloseBtnClick = () => {
+    onClose();
+  };
+
+  const handleEmailChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setEmail(text);
+  };
+
+  const handleNicknameChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setNickname(text);
+  };
+
+  const handleSaveBtnClick = async () => {
+    if (email === "" || nickname === "") {
+      toast.error("Please fill all fields");
+      return;
+    }
+
+    requestState.setLoading();
+    try {
+      const user = userService.getState().user as User;
+      await userService.patchUser({
+        id: user.id,
+        email,
+        nickname,
+      });
+      onClose();
+      toast("Password changed");
+    } catch (error: any) {
+      console.error(error);
+      toast.error(JSON.stringify(error.response.data));
+    }
+    requestState.setFinish();
+  };
+
+  return (
+    <Modal open={true}>
+      <ModalDialog>
+        <div className="flex flex-row justify-between items-center w-80 mb-4">
+          <span className="text-lg font-medium">Edit Userinfo</span>
+          <Button variant="plain" onClick={handleCloseBtnClick}>
+            <Icon.X className="w-5 h-auto text-gray-600" />
+          </Button>
+        </div>
+        <div>
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">Email</span>
+            <Input className="w-full" type="text" value={email} onChange={handleEmailChanged} />
+          </div>
+          <div className="w-full flex flex-col justify-start items-start mb-3">
+            <span className="mb-2">Nickname</span>
+            <Input className="w-full" type="text" value={nickname} onChange={handleNicknameChanged} />
+          </div>
+          <div className="w-full flex flex-row justify-end items-center space-x-2">
+            <Button variant="plain" disabled={requestState.isLoading} onClick={handleCloseBtnClick}>
+              Cancel
+            </Button>
+            <Button color="primary" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={handleSaveBtnClick}>
+              Save
+            </Button>
+          </div>
+        </div>
+      </ModalDialog>
+    </Modal>
+  );
+};
+
+export default EditUserinfoDialog;

web/src/components/Header.tsx

@@ -1,16 +1,14 @@
 import { Link, useNavigate } from "react-router-dom";
 import { useAppSelector } from "../stores";
-import { userService } from "../services";
 import Icon from "./Icon";
 import Dropdown from "./common/Dropdown";
 
 const Header: React.FC = () => {
   const navigate = useNavigate();
-  const { user } = useAppSelector((state) => state.user);
+  const user = useAppSelector((state) => state.user).user as User;
 
   const handleSignOutButtonClick = async () => {
-    await userService.doSignOut();
+    navigate("/auth");
-    navigate("/user/auth");
   };
 
   return (
@@ -24,37 +22,31 @@ const Header: React.FC = () => {
             </Link>
           </div>
           <div className="relative flex-shrink-0">
-            {user ? (
+            <Dropdown
-              <Dropdown
+              trigger={
-                trigger={
+                <button className="flex flex-row justify-end items-center cursor-pointer">
-                  <button className="flex flex-row justify-end items-center cursor-pointer">
+                  <span>{user.nickname}</span>
-                    <span>{user.nickname}</span>
+                  <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
-                    <Icon.ChevronDown className="ml-1 w-5 h-auto text-gray-600" />
+                </button>
+              }
+              actions={
+                <>
+                  <Link
+                    to="/account"
+                    className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                  >
+                    <Icon.User className="w-4 h-auto mr-2" /> My Account
+                  </Link>
+                  <button
+                    className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
+                    onClick={() => handleSignOutButtonClick()}
+                  >
+                    <Icon.LogOut className="w-4 h-auto mr-2" /> Sign out
                   </button>
-                }
+                </>
-                actions={
+              }
-                  <>
+              actionsClassName="!w-40"
-                    <Link
+            ></Dropdown>
-                      to="/account"
-                      className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
-                    >
-                      <Icon.User className="w-4 h-auto mr-2" /> My Account
-                    </Link>
-                    <button
-                      className="w-full flex flex-row justify-start items-center px-3 leading-10 text-left cursor-pointer rounded whitespace-nowrap hover:bg-gray-100"
-                      onClick={() => handleSignOutButtonClick()}
-                    >
-                      <Icon.LogOut className="w-4 h-auto mr-2" /> Sign out
-                    </button>
-                  </>
-                }
-                actionsClassName="!w-40"
-              ></Dropdown>
-            ) : (
-              <span className="cursor-pointer" onClick={() => navigate("/user/auth")}>
-                Sign in
-              </span>
-            )}
           </div>
         </div>
       </div>

web/src/helpers/validator.ts

@@ -1,52 +0,0 @@
-// Validator
-// * use for validating form data
-const chineseReg = /[\u3000\u3400-\u4DBF\u4E00-\u9FFF]/;
-
-export interface ValidatorConfig {
-  // min length
-  minLength: number;
-  // max length
-  maxLength: number;
-  // no space
-  noSpace: boolean;
-  // no chinese
-  noChinese: boolean;
-}
-
-export function validate(text: string, config: Partial<ValidatorConfig>): { result: boolean; reason?: string } {
-  if (config.minLength !== undefined) {
-    if (text.length < config.minLength) {
-      return {
-        result: false,
-        reason: "Too short",
-      };
-    }
-  }
-
-  if (config.maxLength !== undefined) {
-    if (text.length > config.maxLength) {
-      return {
-        result: false,
-        reason: "Too long",
-      };
-    }
-  }
-
-  if (config.noSpace && text.includes(" ")) {
-    return {
-      result: false,
-      reason: "Don't allow space",
-    };
-  }
-
-  if (config.noChinese && chineseReg.test(text)) {
-    return {
-      result: false,
-      reason: "Don't allow chinese",
-    };
-  }
-
-  return {
-    result: true,
-  };
-}

web/src/pages/Account.tsx

@@ -0,0 +1,37 @@
+import { Button } from "@mui/joy";
+import { useState } from "react";
+import { useAppSelector } from "../stores";
+import ChangePasswordDialog from "../components/ChangePasswordDialog";
+import EditUserinfoDialog from "../components/EditUserinfoDialog";
+
+const Account: React.FC = () => {
+  const user = useAppSelector((state) => state.user).user as User;
+  const [showEditUserinfoDialog, setShowEditUserinfoDialog] = useState<boolean>(false);
+  const [showChangePasswordDialog, setShowChangePasswordDialog] = useState<boolean>(false);
+
+  return (
+    <>
+      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
+        <p className="text-3xl my-2">{user.nickname}</p>
+        <p className="leading-8 flex flex-row justify-start items-center">
+          <span className="mr-3 text-gray-500 font-mono">Email: </span>
+          {user.email}
+        </p>
+        <div className="flex flex-row justify-start items-center gap-2">
+          <Button variant="outlined" color="neutral" onClick={() => setShowEditUserinfoDialog(true)}>
+            Edit
+          </Button>
+          <Button variant="outlined" color="neutral" onClick={() => setShowChangePasswordDialog(true)}>
+            Change password
+          </Button>
+        </div>
+      </div>
+
+      {showEditUserinfoDialog && <EditUserinfoDialog onClose={() => setShowEditUserinfoDialog(false)} />}
+
+      {showChangePasswordDialog && <ChangePasswordDialog onClose={() => setShowChangePasswordDialog(false)} />}
+    </>
+  );
+};
+
+export default Account;

web/src/pages/Auth.tsx

@@ -14,10 +14,7 @@ const Auth: React.FC = () => {
   const actionBtnLoadingState = useLoading(false);
 
   useEffect(() => {
-    if (userService.getState().user) {
+    userService.doSignOut();
-      navigate("/");
-      return;
-    }
   }, []);
 
   const handleEmailInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {

web/src/pages/Home.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { shortcutService } from "../services";
-import { userService, shortcutService } from "../services";
 import { useAppSelector } from "../stores";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
@@ -13,7 +12,6 @@ interface State {
 }
 
 const Home: React.FC = () => {
-  const navigate = useNavigate();
   const loadingState = useLoading();
   const { shortcutList } = useAppSelector((state) => state.shortcut);
   const [state, setState] = useState<State>({
@@ -21,11 +19,6 @@ const Home: React.FC = () => {
   });
 
   useEffect(() => {
-    if (!userService.getState().user) {
-      navigate("/user/auth");
-      return;
-    }
-
     Promise.all([shortcutService.getMyAllShortcuts()]).finally(() => {
       loadingState.setFinish();
     });

web/src/pages/UserDetail.tsx

@@ -1,63 +0,0 @@
-import { Button } from "@mui/joy";
-import { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { useAppSelector } from "../stores";
-import { userService } from "../services";
-import ChangePasswordDialog from "../components/ChangePasswordDialog";
-
-interface State {
-  showChangePasswordDialog: boolean;
-}
-
-const UserDetail: React.FC = () => {
-  const navigate = useNavigate();
-  const { user } = useAppSelector((state) => state.user);
-  const [state, setState] = useState<State>({
-    showChangePasswordDialog: false,
-  });
-
-  useEffect(() => {
-    if (!userService.getState().user) {
-      navigate("/user/auth");
-      return;
-    }
-  }, []);
-
-  const handleChangePasswordBtnClick = async () => {
-    setState({
-      ...state,
-      showChangePasswordDialog: true,
-    });
-  };
-
-  return (
-    <>
-      <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start space-y-4">
-        <p className="text-3xl mt-2 mb-4">{user?.nickname}</p>
-        <p className="leading-8 flex flex-row justify-start items-center">
-          <span className="mr-3 text-gray-500 font-mono">Email: </span>
-          {user?.email}
-        </p>
-        <div className="leading-8 flex flex-row justify-start items-center">
-          <span className="mr-3 text-gray-500 font-mono">Password: </span>
-          <Button variant="soft" onClick={handleChangePasswordBtnClick}>
-            Change
-          </Button>
-        </div>
-      </div>
-
-      {state.showChangePasswordDialog && (
-        <ChangePasswordDialog
-          onClose={() => {
-            setState({
-              ...state,
-              showChangePasswordDialog: false,
-            });
-          }}
-        />
-      )}
-    </>
-  );
-};
-
-export default UserDetail;

web/src/routers/index.tsx

@@ -4,11 +4,11 @@ import { userService } from "../services";
 import Root from "../layouts/Root";
 import Auth from "../pages/Auth";
 import Home from "../pages/Home";
-import UserDetail from "../pages/UserDetail";
+import Account from "../pages/Account";
 
 const router = createBrowserRouter([
   {
-    path: "/user/auth",
+    path: "/auth",
     element: <Auth />,
   },
   {
@@ -27,14 +27,14 @@ const router = createBrowserRouter([
 
           const { user } = userService.getState();
           if (isNullorUndefined(user)) {
-            return redirect("/user/auth");
+            return redirect("/auth");
           }
           return null;
         },
       },
       {
         path: "/account",
-        element: <UserDetail />,
+        element: <Account />,
         loader: async () => {
           try {
             await userService.initialState();
@@ -44,7 +44,7 @@ const router = createBrowserRouter([
 
           const { user } = userService.getState();
           if (isNullorUndefined(user)) {
-            return redirect("/user/auth");
+            return redirect("/auth");
           }
           return null;
         },

web/src/types/modules/user.d.ts

@@ -18,9 +18,9 @@ interface UserPatch {
   id: UserId;
 
   rowStatus?: RowStatus;
-  displayName?: string;
+  email?: string;
+  nickname?: string;
   password?: string;
-  resetOpenId?: boolean;
 }
 
 interface UserDelete {