chore: update frontend actions

web/src/pages/Auth.tsx

@@ -7,7 +7,6 @@ import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
 import Only from "../components/common/OnlyWhen";
 import toastHelper from "../components/Toast";
-import "../less/auth.less";
 
 const validateConfig: ValidatorConfig = {
   minLength: 4,
@@ -73,7 +72,42 @@ const Auth: React.FC = () => {
           replace: true,
         });
       } else {
-        toastHelper.error("Login failed");
+        toastHelper.error("Signin failed");
+      }
+    } catch (error: any) {
+      console.error(error);
+      toastHelper.error(error.response.data.message);
+    }
+    actionBtnLoadingState.setFinish();
+  };
+
+  const handleSignupBtnsClick = async () => {
+    if (actionBtnLoadingState.isLoading) {
+      return;
+    }
+
+    const emailValidResult = validate(email, validateConfig);
+    if (!emailValidResult.result) {
+      toastHelper.error("Email: " + emailValidResult.reason);
+      return;
+    }
+
+    const passwordValidResult = validate(password, validateConfig);
+    if (!passwordValidResult.result) {
+      toastHelper.error("Password: " + passwordValidResult.reason);
+      return;
+    }
+
+    try {
+      actionBtnLoadingState.setLoading();
+      await api.signup(email, password);
+      const user = await userService.doSignIn();
+      if (user) {
+        navigate("/", {
+          replace: true,
+        });
+      } else {
+        toastHelper.error("Signup failed");
       }
     } catch (error: any) {
       console.error(error);
@@ -83,33 +117,50 @@ const Auth: React.FC = () => {
   };
 
   return (
-    <div className="page-wrapper auth">
-      <div className="page-container">
-        <div className="auth-form-wrapper">
-          <div className="page-header-container">
-            <div className="title-container">
-              <img className="logo-img" src="/logo-full.webp" alt="" />
-            </div>
-            <p className="slogan-text">Corgi</p>
-          </div>
-          <div className={`page-content-container ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}>
-            <div className="form-item-container input-form-container">
-              <span className={`normal-text ${email ? "not-null" : ""}`}>Email</span>
-              <input type="email" value={email} onChange={handleEmailInputChanged} />
-            </div>
-            <div className="form-item-container input-form-container">
-              <span className={`normal-text ${password ? "not-null" : ""}`}>Password</span>
-              <input type="password" value={password} onChange={handlePasswordInputChanged} />
+    <div className="flex flex-row justify-center items-center w-full h-screen bg-white">
+      <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="flex flex-col justify-start items-start w-full mb-4">
+            <div className="text-3xl font-medium font-mono flex flex-row justify-start items-center">
+              Corgi
+              <Only when={actionBtnLoadingState.isLoading}>
+                <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />
+              </Only>
             </div>
           </div>
-          <div className="action-btns-container">
+          <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>
+            <div className="w-full flex flex-col mb-2">
+              <span className="leading-8 mb-1 text-gray-600">Email</span>
+              <input
+                className="border rounded-md px-3 p-2 leading-7 focus:border-blue-600"
+                type="email"
+                value={email}
+                onChange={handleEmailInputChanged}
+              />
+            </div>
+            <div className="w-full flex flex-col mb-2">
+              <span className="leading-8 text-gray-600">Password</span>
+              <input
+                className="border rounded-md px-3 p-2 leading-7 focus:border-blue-600"
+                type="password"
+                value={password}
+                onChange={handlePasswordInputChanged}
+              />
+            </div>
+          </div>
+          <div className="w-full flex flex-row justify-end items-center mt-4">
             <button
-              className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
+              className={`mr-4 text-gray-600 hover:text-black ${actionBtnLoadingState.isLoading ? "opacity-80 cursor-wait" : ""}`}
+              onClick={() => handleSignupBtnsClick()}
+            >
+              Sign up
+            </button>
+            <button
+              className={`border rounded-md border-green-600 bg-green-600 text-white px-3 py-2 leading-6 hover:bg-green-700 ${
+                actionBtnLoadingState.isLoading ? "opacity-80 cursor-wait" : ""
+              }`}
               onClick={() => handleSigninBtnsClick()}
             >
-              <Only when={actionBtnLoadingState.isLoading}>
-                <Icon.Loader className="img-icon" />
-              </Only>
               Sign in
             </button>
           </div>

web/src/pages/Home.tsx

@@ -25,7 +25,7 @@ const Home: React.FC = () => {
           <p className="font-mono mb-2 text-gray-400">Workspace List</p>
           <WorkspaceListView workspaceList={workspaceList} />
           <div
-            className="flex flex-row justify-start items-center border px-3 py-3 rounded-lg mt-4 cursor-pointer"
+            className="flex flex-row justify-start items-center border px-3 py-3 rounded-lg cursor-pointer"
             onClick={() => showCreateWorkspaceDialog()}
           >
             <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace

web/src/pages/WorkspaceDetail.tsx

@@ -48,16 +48,19 @@ const WorkspaceDetail: React.FC = () => {
       <Header />
       {loadingState.isLoading ? null : (
         <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
-          <div
-            className="flex flex-row justify-start items-center mb-4 text-gray-600 border rounded px-2 py-1 cursor-pointer"
-            onClick={() => handleBackToHome()}
-          >
-            <Icon.ChevronLeft className="w-5 h-auto mr-1" /> Back to Home
+          <div className="w-full flex flex-row justify-start items-center mb-4">
+            <div
+              className="flex flex-row justify-start items-center text-gray-600 border rounded-md px-2 py-1 cursor-pointer"
+              onClick={() => handleBackToHome()}
+            >
+              <Icon.ChevronLeft className="w-5 h-auto" /> Back to Home
+            </div>
+            <span className="ml-4 font-mono text-gray-600">Workspace: {state?.workspace.name}</span>
           </div>
-          <p className="font-mono mb-2 text-gray-600">Workspace: {state?.workspace.name}</p>
-          <ShortcutListView shortcutList={shortcutList} />
+          <p className="font-mono mb-2 text-gray-400">Shortcut List</p>
+          <ShortcutListView workspaceId={state.workspace.id} shortcutList={shortcutList} />
           <div
-            className="flex flex-row justify-start items-center border px-3 py-3 rounded-lg mt-4 cursor-pointer"
+            className="flex flex-row justify-start items-center border px-3 py-3 rounded-lg cursor-pointer"
             onClick={() => showCreateShortcutDialog(state.workspace.id)}
           >
             <Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut