Implement Auth account dropdown

frontend/messages/en.json

@@ -22,7 +22,11 @@
     "title": "Open Source Test Case Management Tool",
     "description": "Integrate and manage all your software testing",
     "docs": "Docs",
-    "projects": "Projects"
+    "projects": "Projects",
+    "account": "Account",
+    "signup": "Sign up",
+    "signin": "Sign in",
+    "signout": "Sign out"
   },
   "Auth": {
     "account": "Account",

frontend/messages/ja.json

@@ -22,7 +22,11 @@
     "title": "オープンソーステストケース管理ツール",
     "description": "ソフトウェア開発にかかわるすべてのテストを統合管理",
     "docs": "ドキュメント",
-    "projects": "プロジェクト"
+    "projects": "プロジェクト",
+    "account": "アカウント",
+    "signup": "新規登録",
+    "signin": "サインイン",
+    "signout": "サインアウト"
   },
   "Auth": {
     "account": "アカウント",

frontend/src/app/[locale]/DropdownAccount.tsx

@@ -6,56 +6,103 @@ import {
   DropdownMenu,
   DropdownItem,
 } from "@nextui-org/react";
-import { User, ChevronDown } from "lucide-react";
+import {
+  User,
+  ChevronDown,
+  PenTool,
+  ArrowRightFromLine,
+  ArrowRightToLine,
+} from "lucide-react";
 import { useContext } from "react";
 import { TokenContext } from "./TokenProvider";
-import { Link } from "@/src/navigation";
+import { useRouter } from "@/src/navigation";
+import { AccountDropDownMessages } from "@/types/user";
 
 type Props = {
+  messages: AccountDropDownMessages;
   locale: string;
 };
 
-const signinItems = [
-  { uid: "account", title: "Account", href: "/account" },
-  { uid: "signout", title: "Sign out", href: "/account/signout" },
-];
-
-const signoutItems = [
-  { uid: "signin", title: "Sign in", href: "/account/signin" },
-];
-
-export default function LangSwitch({ locale }: Props) {
+export default function DropdownAccount({ messages, locale }: Props) {
+  const router = useRouter();
   const context = useContext(TokenContext);
+
+  const signOut = () => {
+    context.setToken(null);
+    context.removeTokenFromLocalStorage();
+    router.push(`/`, { locale: locale });
+  };
+
+  const signinItems = [
+    {
+      uid: "account",
+      title: messages.account,
+      icon: <User size={16} />,
+      onPress: () => {
+        router.push("/account", { locale: locale });
+      },
+    },
+    {
+      uid: "signout",
+      title: messages.signOut,
+      icon: <ArrowRightFromLine size={16} />,
+      onPress: signOut,
+    },
+  ];
+
+  const signoutItems = [
+    {
+      uid: "signin",
+      title: messages.signIn,
+      icon: <ArrowRightToLine size={16} />,
+      onPress: () => {
+        router.push("/account/signin", { locale: locale });
+      },
+    },
+    {
+      uid: "signup",
+      title: messages.signUp,
+      icon: <PenTool size={16} />,
+      onPress: () => {
+        router.push("/account/signup", { locale: locale });
+      },
+    },
+  ];
+
   return (
     <Dropdown>
       <DropdownTrigger>
         <Button
           size="sm"
-          variant="faded"
+          variant="light"
           startContent={<User size={16} />}
           endContent={<ChevronDown size={16} />}
         >
-          {context.token ? context.token.user.username : "SignIn"}
+          {context.token && context.token.user
+            ? context.token.user.username
+            : messages.signIn}
         </Button>
       </DropdownTrigger>
-      {context.token ? (
+      {context.token && context.token.user ? (
         <DropdownMenu aria-label="account actions when sign in">
           {signinItems.map((entry) => (
-            <DropdownItem key={entry.uid}>
-              <Link href={entry.href} locale={locale}>
-                {entry.title}
-              </Link>
-            </DropdownItem>
+            <DropdownItem
+              key={entry.uid}
+              title={entry.title}
+              startContent={entry.icon}
+              onPress={entry.onPress}
+            />
           ))}
         </DropdownMenu>
       ) : (
         <DropdownMenu aria-label="account actions when sign out">
           {signoutItems.map((entry) => (
-            <DropdownItem key={entry.uid}>
-              <Link href={entry.href} locale={locale}>
-                {entry.title}
-              </Link>
-            </DropdownItem>
+            <DropdownItem
+              key={entry.uid}
+              title={entry.title}
+              startContent={entry.icon}
+              onPress={entry.onPress}
+            />
           ))}
         </DropdownMenu>
       )}

frontend/src/app/[locale]/DropdownLanguage.tsx

@@ -15,7 +15,7 @@ const locales = [
   { code: "ja", name: "日本語" },
 ];
 
-export default function LangSwitch(params: { locale: string }) {
+export default function DropdownLanguage(params: { locale: string }) {
   const router = useRouter();
   const pathname = usePathname();
 
@@ -36,7 +36,7 @@ export default function LangSwitch(params: { locale: string }) {
       <DropdownTrigger>
         <Button
           size="sm"
-          variant="faded"
+          variant="light"
           startContent={<Globe size={16} />}
           endContent={<ChevronDown size={16} />}
         >

frontend/src/app/[locale]/Header.tsx

@@ -12,14 +12,20 @@ import {
 import { MoveUpRight } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Link } from "@/src/navigation";
-import LangSwitch from "./LangSwitch";
 import { ThemeSwitch } from "@/components/theme-switch";
 import { GithubIcon } from "@/components/icons";
 import Image from "next/image";
 import DropdownAccount from "./DropdownAccount";
+import DropdownLanguage from "./DropdownLanguage";
 
 export default function Header(params: { locale: string }) {
   const t = useTranslations("Header");
+  const messages = {
+    account: t("account"),
+    signUp: t("signup"),
+    signIn: t("signin"),
+    signOut: t("signout"),
+  };
 
   // Links shown Header or slider
   const commonLinks = [
@@ -102,13 +108,21 @@ export default function Header(params: { locale: string }) {
           <GithubIcon className="text-default-500" />
         </NextUiLink>
         <ThemeSwitch />
-        <LangSwitch locale={params.locale} />
-        <DropdownAccount locale={params.locale} />
+        <div className="hidden md:block">
+          <DropdownAccount messages={messages} locale={params.locale} />
+          <DropdownLanguage locale={params.locale} />
+        </div>
         <NavbarMenuToggle className="md:hidden" />
       </NavbarContent>
 
       <NavbarMenu>
         <div className="mx-4 mt-2 flex flex-col gap-2">
+          <NavbarMenuItem>
+            <DropdownAccount messages={messages} locale={params.locale} />
+          </NavbarMenuItem>
+          <NavbarMenuItem>
+            <DropdownLanguage locale={params.locale} />
+          </NavbarMenuItem>
           {commonLinks.map((link) =>
             link.isExternal ? (
               <NavbarMenuItem key={link.uid}>

frontend/src/app/[locale]/TokenProvider.tsx

@@ -1,23 +1,47 @@
 "use client";
-import { createContext, useState } from "react";
-import { TokenType, UserType } from "@/types/user";
+import { createContext, useState, useEffect } from "react";
+import { TokenType } from "@/types/user";
 import { TokenProps } from "@/types/user";
 
-const defaultTokenContext = {
-  token: null,
-  setUser: (token: TokenType) => {},
-};
+const LOCAL_STORAGE_KEY = "testplat-auth-token";
+
+function storeTokenToLocalStorage(token: TokenType) {
+  localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(token));
+}
+
+function removeTokenFromLocalStorage() {
+  localStorage.removeItem(LOCAL_STORAGE_KEY);
+}
+
+const defaultTokenContext = {};
 const TokenContext = createContext(defaultTokenContext);
 
 const TokenProvider = ({ children }: TokenProps) => {
-  const [token, setToken] = useState<TokenType>(null);
+  const [token, setToken] = useState<TokenType>({
+    access_token: "",
+    user: null,
+  });
   const tokenContext = {
     token,
     setToken,
+    storeTokenToLocalStorage,
+    removeTokenFromLocalStorage,
   };
 
+  useEffect(() => {
+    const restoreTokenFromLocalStorage = () => {
+      const tokenString = localStorage.getItem(LOCAL_STORAGE_KEY);
+      if (tokenString) {
+        setToken(JSON.parse(tokenString));
+      }
+    };
+    restoreTokenFromLocalStorage();
+  }, []);
+
   return (
-    <TokenContext.Provider value={tokenContext}>{children}</TokenContext.Provider>
+    <TokenContext.Provider value={tokenContext}>
+      {children}
+    </TokenContext.Provider>
   );
 };
 

frontend/src/app/[locale]/account/authControl.ts

@@ -18,9 +18,8 @@ async function signUp(newUser: UserType) {
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
-    const accessToken = await response.json();
-    storeToken(accessToken);
-    return accessToken;
+    const token = await response.json();
+    return token;
   } catch (error: any) {
     console.error("Error sign up:", error);
     throw error;
@@ -43,21 +42,12 @@ async function signIn(signInUser: UserType) {
     if (!response.ok) {
       throw new Error(`HTTP error! Status: ${response.status}`);
     }
-    const accessToken = await response.json();
-    storeToken(accessToken);
-    return accessToken;
+    const token = await response.json();
+    return token;
   } catch (error: any) {
     console.error("Error sign in:", error);
     throw error;
   }
 }
 
-function storeToken(accessToken: Object) {
-  localStorage.setItem("testplat-auth-token", JSON.stringify(accessToken));
-}
-
-function signOut() {
-  localStorage.removeItem("testplat-auth-token");
-}
-
-export { signUp, signIn, signOut };
+export { signUp, signIn };

frontend/src/app/[locale]/account/authPage.tsx

@@ -9,6 +9,8 @@ import { roles } from "@/config/selection";
 import { signUp, signIn } from "./authControl";
 import { isValidEmail, isValidPassword } from "./validate";
 import { TokenContext } from "../TokenProvider";
+import { useRouter } from "@/src/navigation";
+
 type Props = {
   isSignup: Boolean;
   messages: AuthMessages;
@@ -16,6 +18,7 @@ type Props = {
 };
 
 export default function AuthPage({ isSignup, messages, locale }: Props) {
+  const router = useRouter();
   const context = useContext(TokenContext);
   const [user, setUser] = useState<UserType>({
     id: null,
@@ -59,30 +62,36 @@ export default function AuthPage({ isSignup, messages, locale }: Props) {
   };
 
   const submit = async () => {
+    let token;
     if (isSignup) {
       try {
-        const token = await signUp(user);
-        context.setToken(token);
-        // Move to signin page
+        token = await signUp(user);
       } catch {
         setErrorMessage(messages.signupError);
+        return;
       }
     } else {
       try {
-        const token = await signIn(user);
-        context.setToken(token);
-        // Move to signin page
+        token = await signIn(user);
       } catch {
         setErrorMessage(messages.signinError);
+        return;
       }
     }
+
+    context.setToken(token);
+    context.storeTokenToLocalStorage(token);
+    router.push("/account", { locale: locale });
   };
 
   return (
     <Card className="border-none bg-background/60 dark:bg-default-100/50 w-[480px]">
       <CardHeader className="px-4 pt-4 pb-0 flex justify-between">
         <h4 className="font-bold text-large">{messages.title}</h4>
-        <Link href={isSignup ? "/auth/signin" : "/auth/signup"} locale={locale}>
+        <Link
+          href={isSignup ? "/account/signin" : "/account/signup"}
+          locale={locale}
+        >
           <Button
             color="primary"
             variant="light"

frontend/types/user.ts

@@ -12,11 +12,18 @@ export type TokenProps = {
 };
 
 export type TokenType = {
+  access_token: string;
+  user: UserType;
+};
+
+export type TokenContextType = {
   token: {
     access_token: string;
     user: UserType;
   };
-  setToken: () => {};
+  setToken: (token: TokenType) => {};
+  storeTokenToLocalStorage: (token: TokenType) => {};
+  removeTokenFromLocalStorage: () => {};
 };
 
 export type AuthMessages = {
@@ -36,3 +43,10 @@ export type AuthMessages = {
   signupError: string;
   signinError: string;
 };
+
+export type AccountDropDownMessages = {
+  account: string;
+  signUp: string;
+  signIn: string;
+  signOut: string;
+};