chore: update account page

web/src/components/ChangePasswordDialog.tsx

@@ -0,0 +1,123 @@
+import { useState } from "react";
+import { validate, ValidatorConfig } from "../helpers/validator";
+import useLoading from "../hooks/useLoading";
+import { userService } from "../services";
+import Icon from "./Icon";
+import { generateDialog } from "./Dialog";
+import toastHelper from "./Toast";
+
+const validateConfig: ValidatorConfig = {
+  minLength: 3,
+  maxLength: 24,
+  noSpace: true,
+  noChinese: true,
+};
+
+type Props = DialogProps;
+
+const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
+  const [newPassword, setNewPassword] = useState("");
+  const [newPasswordAgain, setNewPasswordAgain] = useState("");
+  const requestState = useLoading(false);
+
+  const handleCloseBtnClick = () => {
+    destroy();
+  };
+
+  const handleNewPasswordChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setNewPassword(text);
+  };
+
+  const handleNewPasswordAgainChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setNewPasswordAgain(text);
+  };
+
+  const handleSaveBtnClick = async () => {
+    if (newPassword === "" || newPasswordAgain === "") {
+      toastHelper.error("Please fill all inputs");
+      return;
+    }
+
+    if (newPassword !== newPasswordAgain) {
+      toastHelper.error("Not matched");
+      setNewPasswordAgain("");
+      return;
+    }
+
+    const passwordValidResult = validate(newPassword, validateConfig);
+    if (!passwordValidResult.result) {
+      toastHelper.error("New password is invalid");
+      return;
+    }
+
+    requestState.setLoading();
+    try {
+      const user = userService.getState().user as User;
+      await userService.patchUser({
+        id: user.id,
+        password: newPassword,
+      });
+      toastHelper.info("Password changed");
+      handleCloseBtnClick();
+    } catch (error: any) {
+      console.error(error);
+      toastHelper.error(error.response.data.message);
+    }
+    requestState.setFinish();
+  };
+
+  return (
+    <>
+      <div className="max-w-full w-80 flex flex-row justify-between items-center mb-4">
+        <p className="text-base">Change Password</p>
+        <button className="rounded p-1 hover:bg-gray-100" onClick={destroy}>
+          <Icon.X className="w-5 h-auto text-gray-600" />
+        </button>
+      </div>
+      <div className="w-full flex flex-col justify-start items-start">
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">New Password</span>
+          <input
+            className="w-full rounded border text-sm shadow-inner px-2 py-2"
+            type="text"
+            value={newPassword}
+            onChange={handleNewPasswordChanged}
+          />
+        </div>
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">New Password Again</span>
+          <input
+            className="w-full rounded border text-sm shadow-inner px-2 py-2"
+            type="text"
+            value={newPasswordAgain}
+            onChange={handleNewPasswordAgainChanged}
+          />
+        </div>
+        <div className="w-full flex flex-row justify-end items-center">
+          <button
+            disabled={requestState.isLoading}
+            className={`rounded px-3 py-2 ${requestState.isLoading ? "opacity-80" : ""}`}
+            onClick={destroy}
+          >
+            Cancel
+          </button>
+          <button
+            disabled={requestState.isLoading}
+            className={`rounded px-3 py-2 shadow bg-green-600 text-white hover:bg-green-700 ${requestState.isLoading ? "opacity-80" : ""}`}
+            onClick={handleSaveBtnClick}
+          >
+            Save
+          </button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+function showChangePasswordDialog() {
+  generateDialog({}, ChangePasswordDialog);
+}
+
+export default showChangePasswordDialog;

web/src/components/CreateWorkspaceDialog.tsx

@@ -63,6 +63,7 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
       return;
     }
 
+    requestState.setLoading();
     try {
       if (workspaceId) {
         await workspaceService.patchWorkspace({
@@ -79,6 +80,7 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
       console.error(error);
       toastHelper.error(error.response.data.error || error.response.data.message);
     }
+    requestState.setFinish();
   };
 
   return (
@@ -110,6 +112,7 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
         </div>
         <div className="w-full flex flex-row justify-end items-center">
           <button
+            disabled={requestState.isLoading}
             className={`rounded px-3 py-2 shadow bg-green-600 text-white hover:bg-green-700 ${requestState.isLoading ? "opacity-80" : ""}`}
             onClick={handleSaveBtnClick}
           >

web/src/components/Dialog/BaseDialog.tsx

@@ -6,7 +6,7 @@ import store from "../../store";
 import "../../less/base-dialog.less";
 
 interface DialogConfig {
-  className: string;
+  className?: string;
   clickSpaceDestroy?: boolean;
 }
 

web/src/components/Header.tsx

@@ -20,7 +20,7 @@ const Header: React.FC = () => {
 
   return (
     <div className="w-full bg-amber-50">
-      <div className="w-full max-w-4xl mx-auto px-3 py-4 flex flex-row justify-between items-center">
+      <div className="w-full max-w-4xl mx-auto px-3 py-5 flex flex-row justify-between items-center">
         <div className="flex flex-row justify-start items-center">
           <Link to={"/"} className="text-base font-mono font-medium cursor-pointer">
             Corgi
@@ -77,7 +77,7 @@ const Header: React.FC = () => {
               actions={
                 <>
                   <Link
-                    to={`/user/${user?.id}`}
+                    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-1" /> My Account