feat: add sign up page

api/v1/auth.go

@@ -18,6 +18,7 @@ type SignInRequest struct {
 }
 
 type SignUpRequest struct {
+	Nickname string `json:"nickname"`
 	Email    string `json:"email"`
 	Password string `json:"password"`
 }
@@ -77,7 +78,7 @@ func (s *APIV1Service) registerAuthRoutes(g *echo.Group, secret string) {
 
 		create := &store.User{
 			Email:        signup.Email,
-			Nickname:     signup.Email,
+			Nickname:     signup.Nickname,
 			PasswordHash: string(passwordHash),
 		}
 		existingUsers, err := s.Store.ListUsers(ctx, &store.FindUser{})

web/src/helpers/api.ts

@@ -11,9 +11,10 @@ export function signin(email: string, password: string) {
   });
 }
 
-export function signup(email: string, password: string) {
+export function signup(email: string, nickname: string, password: string) {
   return axios.post<User>("/api/v1/auth/signup", {
     email,
+    nickname,
     password,
   });
 }

web/src/pages/SignIn.tsx

@@ -1,17 +1,18 @@
 import { Button, Input } from "@mui/joy";
 import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { toast } from "react-hot-toast";
 import * as api from "../helpers/api";
 import { userService } from "../services";
 import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
 
-const Auth: React.FC = () => {
+const SignIn: React.FC = () => {
   const navigate = useNavigate();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const actionBtnLoadingState = useLoading(false);
+  const allowConfirm = email.length > 0 && password.length > 0;
 
   useEffect(() => {
     userService.doSignOut();
@@ -50,29 +51,6 @@ const Auth: React.FC = () => {
     actionBtnLoadingState.setFinish();
   };
 
-  const handleSignupBtnClick = async () => {
-    if (actionBtnLoadingState.isLoading) {
-      return;
-    }
-
-    try {
-      actionBtnLoadingState.setLoading();
-      await api.signup(email, password);
-      const user = await userService.doSignIn();
-      if (user) {
-        navigate("/", {
-          replace: true,
-        });
-      } else {
-        toast.error("Signup failed");
-      }
-    } catch (error: any) {
-      console.error(error);
-      toast.error(error.response.data.message);
-    }
-    actionBtnLoadingState.setFinish();
-  };
-
   return (
     <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">
@@ -84,28 +62,45 @@ const Auth: React.FC = () => {
               {actionBtnLoadingState.isLoading && <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />}
             </div>
           </div>
-          <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>
+          <form className="w-full" onSubmit={handleSigninBtnClick}>
-            <div className="w-full flex flex-col mb-2">
+            <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>
-              <span className="leading-8 mb-1 text-gray-600">Email</span>
+              <div className="w-full flex flex-col mb-2">
-              <Input className="w-full py-3" type="email" value={email} onChange={handleEmailInputChanged} />
+                <span className="leading-8 mb-1 text-gray-600">Email</span>
+                <Input
+                  className="w-full py-3"
+                  type="email"
+                  value={email}
+                  placeholder="steven@shortify.com"
+                  onChange={handleEmailInputChanged}
+                />
+              </div>
+              <div className="w-full flex flex-col mb-2">
+                <span className="leading-8 text-gray-600">Password</span>
+                <Input className="w-full py-3" type="password" value={password} placeholder="····" onChange={handlePasswordInputChanged} />
+              </div>
             </div>
-            <div className="w-full flex flex-col mb-2">
+            <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
-              <span className="leading-8 text-gray-600">Password</span>
+              <Button
-              <Input className="w-full py-3" type="password" value={password} onChange={handlePasswordInputChanged} />
+                className="w-full"
+                type="submit"
+                color="primary"
+                disabled={actionBtnLoadingState.isLoading || !allowConfirm}
+                onClick={handleSigninBtnClick}
+              >
+                Sign in
+              </Button>
             </div>
-          </div>
+          </form>
-          <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
+          <p className="w-full mt-4 text-sm">
-            <Button variant="plain" disabled={actionBtnLoadingState.isLoading} onClick={() => handleSignupBtnClick()}>
+            <span>{"Don't have an account yet?"}</span>
+            <Link to="/auth/signup" className="cursor-pointer ml-2 text-blue-600 hover:underline">
               Sign up
-            </Button>
+            </Link>
-            <Button color="primary" disabled={actionBtnLoadingState.isLoading} onClick={() => handleSigninBtnClick()}>
+          </p>
-              Sign in
-            </Button>
-          </div>
         </div>
       </div>
     </div>
   );
 };
 
-export default Auth;
+export default SignIn;

web/src/pages/SignUp.tsx

@@ -0,0 +1,117 @@
+import { Button, Input } from "@mui/joy";
+import React, { useEffect, useState } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import { toast } from "react-hot-toast";
+import * as api from "../helpers/api";
+import { userService } from "../services";
+import useLoading from "../hooks/useLoading";
+import Icon from "../components/Icon";
+
+const SignUp: React.FC = () => {
+  const navigate = useNavigate();
+  const [email, setEmail] = useState("");
+  const [nickname, setNickname] = useState("");
+  const [password, setPassword] = useState("");
+  const actionBtnLoadingState = useLoading(false);
+  const allowConfirm = email.length > 0 && nickname.length > 0 && password.length > 0;
+
+  useEffect(() => {
+    userService.doSignOut();
+  }, []);
+
+  const handleEmailInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setEmail(text);
+  };
+
+  const handleNicknameInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setNickname(text);
+  };
+
+  const handlePasswordInputChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const text = e.target.value as string;
+    setPassword(text);
+  };
+
+  const handleSignupBtnClick = async () => {
+    if (actionBtnLoadingState.isLoading) {
+      return;
+    }
+
+    try {
+      actionBtnLoadingState.setLoading();
+      await api.signup(email, nickname, password);
+      const user = await userService.doSignIn();
+      if (user) {
+        navigate("/", {
+          replace: true,
+        });
+      } else {
+        toast.error("Signup failed");
+      }
+    } catch (error: any) {
+      console.error(error);
+      toast.error(error.response.data.message);
+    }
+    actionBtnLoadingState.setFinish();
+  };
+
+  return (
+    <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-row justify-start items-center w-full mb-4">
+            <img src="/logo.png" className="w-14 h-auto mr-1" alt="" />
+            <div className="text-3xl font-medium font-mono flex flex-row justify-start items-center">
+              Shortify
+              {actionBtnLoadingState.isLoading && <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />}
+            </div>
+          </div>
+          <p className="w-full mb-4 mt-2 text-2xl">Create your account</p>
+          <form className="w-full" onSubmit={handleSignupBtnClick}>
+            <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="w-full py-3"
+                  type="email"
+                  value={email}
+                  placeholder="steven@shortify.com"
+                  onChange={handleEmailInputChanged}
+                />
+              </div>
+              <div className="w-full flex flex-col mb-2">
+                <span className="leading-8 text-gray-600">Nickname</span>
+                <Input className="w-full py-3" type="text" value={nickname} placeholder="steven" onChange={handleNicknameInputChanged} />
+              </div>
+              <div className="w-full flex flex-col mb-2">
+                <span className="leading-8 text-gray-600">Password</span>
+                <Input className="w-full py-3" type="password" value={password} placeholder="····" onChange={handlePasswordInputChanged} />
+              </div>
+            </div>
+            <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
+              <Button
+                className="w-full"
+                type="submit"
+                color="primary"
+                disabled={actionBtnLoadingState.isLoading || !allowConfirm}
+                onClick={handleSignupBtnClick}
+              >
+                Sign up
+              </Button>
+            </div>
+          </form>
+          <p className="w-full mt-4 text-sm">
+            <span>{"Already has an account?"}</span>
+            <Link to="/auth" className="cursor-pointer ml-2 text-blue-600 hover:underline">
+              Sign in
+            </Link>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SignUp;

web/src/routers/index.tsx

@@ -2,14 +2,19 @@ import { createBrowserRouter, redirect } from "react-router-dom";
 import { isNullorUndefined } from "../helpers/utils";
 import { userService } from "../services";
 import Root from "../layouts/Root";
-import Auth from "../pages/Auth";
+import SignIn from "../pages/SignIn";
+import SignUp from "../pages/SignUp";
 import Home from "../pages/Home";
 import Setting from "../pages/Setting";
 
 const router = createBrowserRouter([
   {
     path: "/auth",
-    element: <Auth />,
+    element: <SignIn />,
+  },
+  {
+    path: "/auth/signup",
+    element: <SignUp />,
   },
   {
     path: "/",