feat: update password page

src/app/(protected)/account/management/page.tsx

@@ -0,0 +1,7 @@
+import UpdatePasswordLink from 'module/protected/account/management/UpdatePasswordLink';
+
+const AccountManagement = () => {
+  return <UpdatePasswordLink />;
+};
+
+export default AccountManagement;

src/app/(protected)/account/settings/page.tsx

@@ -1,4 +1,4 @@
-import SettingForm from 'module/account/settings/SettingForm';
+import SettingForm from 'module/protected/account/settings/SettingForm';
 
 export default function SettingPage() {
   return <SettingForm />;

src/app/(protected)/account/update/password/page.tsx

@@ -0,0 +1,7 @@
+import UpdatePasswordForm from 'module/protected/account/update/password/UpdatePasswordForm';
+
+const UpdatePasswordPage = () => {
+  return <UpdatePasswordForm />;
+};
+
+export default UpdatePasswordPage;

src/containers/Layout/sidebar/SidebarContent.tsx

@@ -104,6 +104,11 @@ const SidebarContent = ({ onClick, $collapse }: SidebarContentProps) => {
             route={getRouteByKey(ROUTE_KEY.ACCOUNT_PROFILE).path}
             onClick={onClick}
           />
+          <SidebarLink
+            title={getRouteByKey(ROUTE_KEY.ACCOUNT_MANAGEMENT).name}
+            route={getRouteByKey(ROUTE_KEY.ACCOUNT_MANAGEMENT).path}
+            onClick={onClick}
+          />
           <SidebarLink
             title={getRouteByKey(ROUTE_KEY.EXCHANGE_MANAGEMENT).name}
             route={getRouteByKey(ROUTE_KEY.EXCHANGE_MANAGEMENT).path}

src/containers/Layout/topbar/TopbarProfile.tsx

@@ -65,6 +65,12 @@ const TopbarProfile = () => {
               onClick={toggleCollapse}
             />
             <TopbarMenuDivider />
+            <TopbarMenuLink
+              title="Account Management"
+              icon="users"
+              path="/account/management"
+              onClick={toggleCollapse}
+            />
             <TopbarMenuLink
               title="Settings"
               icon="cog"

src/graphql/auth.ts

@@ -18,3 +18,13 @@ export const USER_REGISTER = gql(`
     }
   }
 `);
+
+export const USER_CHANGE_PASSWORD = gql(`
+  mutation ChangePassword($input: UpdatePasswordInput!) {
+    changePassword(input: $input) {
+      code
+      message
+      data
+    }
+  }
+`);

src/graphql/codegen/gql.ts

@@ -17,6 +17,8 @@ const documents = {
     types.LoginDocument,
   '\n  mutation Register($input: CreateUserInput!) {\n    register(input: $input) {\n      code\n      message\n      data\n    }\n  }\n':
     types.RegisterDocument,
+  '\n  mutation ChangePassword($input: UpdatePasswordInput!) {\n    changePassword(input: $input) {\n      code\n      message\n      data\n    }\n  }\n':
+    types.ChangePasswordDocument,
   '\n  query getUserInfo {\n    getUserInfo {\n      id\n      displayName\n    }\n  }\n':
     types.GetUserInfoDocument,
   '\n  query getUserById($id: String!) {\n    getUserById(id: $id) {\n      id\n      email\n      realName\n      displayName\n      mobile\n    }\n  }\n':
@@ -51,6 +53,12 @@ export function gql(
 export function gql(
   source: '\n  mutation Register($input: CreateUserInput!) {\n    register(input: $input) {\n      code\n      message\n      data\n    }\n  }\n'
 ): (typeof documents)['\n  mutation Register($input: CreateUserInput!) {\n    register(input: $input) {\n      code\n      message\n      data\n    }\n  }\n'];
+/**
+ * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
+ */
+export function gql(
+  source: '\n  mutation ChangePassword($input: UpdatePasswordInput!) {\n    changePassword(input: $input) {\n      code\n      message\n      data\n    }\n  }\n'
+): (typeof documents)['\n  mutation ChangePassword($input: UpdatePasswordInput!) {\n    changePassword(input: $input) {\n      code\n      message\n      data\n    }\n  }\n'];
 /**
  * The gql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */

src/graphql/codegen/graphql.ts

@@ -226,6 +226,20 @@ export type RegisterMutation = {
   register: { __typename?: 'Result'; code: number; message?: string | null; data?: string | null };
 };
 
+export type ChangePasswordMutationVariables = Exact<{
+  input: UpdatePasswordInput;
+}>;
+
+export type ChangePasswordMutation = {
+  __typename?: 'Mutation';
+  changePassword: {
+    __typename?: 'Result';
+    code: number;
+    message?: string | null;
+    data?: string | null;
+  };
+};
+
 export type GetUserInfoQueryVariables = Exact<{ [key: string]: never }>;
 
 export type GetUserInfoQuery = {
@@ -357,6 +371,50 @@ export const RegisterDocument = {
     },
   ],
 } as unknown as DocumentNode<RegisterMutation, RegisterMutationVariables>;
+export const ChangePasswordDocument = {
+  kind: 'Document',
+  definitions: [
+    {
+      kind: 'OperationDefinition',
+      operation: 'mutation',
+      name: { kind: 'Name', value: 'ChangePassword' },
+      variableDefinitions: [
+        {
+          kind: 'VariableDefinition',
+          variable: { kind: 'Variable', name: { kind: 'Name', value: 'input' } },
+          type: {
+            kind: 'NonNullType',
+            type: { kind: 'NamedType', name: { kind: 'Name', value: 'UpdatePasswordInput' } },
+          },
+        },
+      ],
+      selectionSet: {
+        kind: 'SelectionSet',
+        selections: [
+          {
+            kind: 'Field',
+            name: { kind: 'Name', value: 'changePassword' },
+            arguments: [
+              {
+                kind: 'Argument',
+                name: { kind: 'Name', value: 'input' },
+                value: { kind: 'Variable', name: { kind: 'Name', value: 'input' } },
+              },
+            ],
+            selectionSet: {
+              kind: 'SelectionSet',
+              selections: [
+                { kind: 'Field', name: { kind: 'Name', value: 'code' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'message' } },
+                { kind: 'Field', name: { kind: 'Name', value: 'data' } },
+              ],
+            },
+          },
+        ],
+      },
+    },
+  ],
+} as unknown as DocumentNode<ChangePasswordMutation, ChangePasswordMutationVariables>;
 export const GetUserInfoDocument = {
   kind: 'Document',
   definitions: [

src/module/protected/account/management/CardLink.test.tsx

@@ -0,0 +1,49 @@
+import { ReactNode } from 'react';
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import CardLink from './CardLink';
+
+jest.mock('@/shared/components/Card', () => ({
+  Card: ({ children }: { children?: ReactNode }) => <div data-testid="card">{children}</div>,
+  CardBody: ({ children }: { children?: ReactNode }) => (
+    <div data-testid="card-body">{children}</div>
+  ),
+  CardTitle: ({ children }: { children?: ReactNode }) => (
+    <div data-testid="card-title">{children}</div>
+  ),
+  CardSubhead: ({ children }: { children?: ReactNode }) => (
+    <div data-testid="card-subhead">{children}</div>
+  ),
+  CardTitleWrap: ({ children }: { children?: ReactNode }) => (
+    <div data-testid="card-title-wrap">{children}</div>
+  ),
+}));
+
+describe('CardLink', () => {
+  const defaultProps = {
+    cardTitle: 'Test Title',
+    cardSubhead: 'Test Subhead',
+    route: '/test-route',
+  };
+
+  it('should render without crashing', () => {
+    render(
+      <Router>
+        <CardLink {...defaultProps} />
+      </Router>
+    );
+    expect(screen.getByTestId('card')).toBeInTheDocument();
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.getByText('Test Subhead')).toBeInTheDocument();
+  });
+
+  it('should navigate to the correct route on click', () => {
+    render(
+      <Router>
+        <CardLink {...defaultProps} />
+      </Router>
+    );
+    const linkElement = screen.getByRole('link');
+    expect(linkElement).toHaveAttribute('href', defaultProps.route);
+  });
+});

src/module/protected/account/management/CardLink.tsx

@@ -0,0 +1,26 @@
+import { Col } from 'react-bootstrap';
+import { Card, CardBody, CardTitle, CardTitleWrap, CardSubhead } from '@/shared/components/Card';
+import Link from 'next/link';
+
+type CardLinkProps = {
+  cardTitle: string;
+  cardSubhead: string;
+  route: string;
+};
+
+const CardLink = ({ cardTitle, cardSubhead, route }: CardLinkProps) => (
+  <Link href={route}>
+    <Col md={12}>
+      <Card>
+        <CardBody>
+          <CardTitleWrap $marginBottom="0">
+            <CardTitle>{cardTitle}</CardTitle>
+            <CardSubhead>{cardSubhead}</CardSubhead>
+          </CardTitleWrap>
+        </CardBody>
+      </Card>
+    </Col>
+  </Link>
+);
+
+export default CardLink;

src/module/protected/account/management/UpdatePasswordLink.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import UpdatePasswordLink from './UpdatePasswordLink';
+
+function renderAccountManagement() {
+  render(
+    <Router>
+      <UpdatePasswordLink />
+    </Router>
+  );
+}
+
+describe('AccountManagement Component', () => {
+  it('should render without crashing', () => {
+    renderAccountManagement();
+    expect(screen.getByText('Account Management')).toBeInTheDocument();
+  });
+
+  it('should display the page title correctly', () => {
+    renderAccountManagement();
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Account Management');
+  });
+
+  it('should render the CardLink component with correct props', () => {
+    renderAccountManagement();
+    expect(screen.getByText('Reset Password')).toBeInTheDocument();
+    expect(screen.getByText('Update your password')).toBeInTheDocument();
+  });
+});

src/module/protected/account/management/UpdatePasswordLink.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import { Col, Container, Row } from 'react-bootstrap';
+import { useTitle } from '@/hooks/useTitle';
+import CardLink from './CardLink';
+
+export default function UpdatePasswordLink() {
+  useTitle('Account Management - BeeQuant');
+
+  return (
+    <Container>
+      <Row>
+        <Col md={12}>
+          <h3 className="page-title">Account Management</h3>
+        </Col>
+      </Row>
+      <Row>
+        <CardLink
+          cardTitle="Reset Password"
+          cardSubhead="Update your password"
+          route="/account/update/password"
+        />
+      </Row>
+    </Container>
+  );
+}

src/module/account/settings/SettingFormLayout.tsx → src/module/protected/account/settings/SettingFormLayout.tsx

@@ -6,7 +6,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { Button } from '@/shared/components/Button';
 import * as z from 'zod';
 import { DisplayErrorMsgs, EmailErrorMsgs, RefErrorMsgs } from '@/shared/utils/helpers';
-import FormInput from './_component/FormInput/FormInput';
+import FormInput from '@/shared/components/form/FormInput';
 
 const formSchema = z.object({
   displayName: z

src/module/protected/account/update/password/ChangePasswordSuccess.tsx

@@ -0,0 +1,29 @@
+import { Button, Container, Row, Col } from 'react-bootstrap';
+import {
+  StyledModal,
+  StyledModalHeader,
+  StyledModalTitle,
+  StyledModalFooter,
+} from '@/shared/components/Modal';
+import Link from 'next/link';
+
+const ChangePasswordSuccess = ({ success }: { success: string }) => (
+  <Container>
+    <Row>
+      <Col>
+        <StyledModal show={!!success} backdrop="static" keyboard={false}>
+          <StyledModalHeader>
+            <StyledModalTitle>You have successfully reset your password!</StyledModalTitle>
+          </StyledModalHeader>
+          <StyledModalFooter>
+            <Link href="/login">
+              <Button variant="primary">Ready to trade again</Button>
+            </Link>
+          </StyledModalFooter>
+        </StyledModal>
+      </Col>
+    </Row>
+  </Container>
+);
+
+export default ChangePasswordSuccess;