Add edit information account page

hotel-management/src/pages/Account/AccountInforForm.tsx

@@ -0,0 +1,59 @@
+import { useForm } from 'react-hook-form';
+
+// Styled
+import Input from '@commonStyle/Input';
+
+// Components
+import Form from '@component/Form';
+
+// Constants
+import { REQUIRED_FIELD_ERROR } from '@constant/formValidateMessage';
+
+// Hooks
+import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
+import { useAccount } from '@hook/authentication/useAccount';
+
+interface IAccountForm {
+  fullName: string;
+}
+
+const AccountInforForm = () => {
+  const { account } = useAccount();
+
+  const { updateAccount, isUpdating } = useUpdateAccount();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<IAccountForm>();
+
+  const onSubmit = (data: IAccountForm) => {
+    updateAccount(data);
+  };
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <Form.Row label="Email:">
+        <Input id="email" readOnly value={account?.email} />
+      </Form.Row>
+
+      <Form.Row label="Full Name:" error={errors?.fullName?.message as string}>
+        <Input
+          id="fullName"
+          {...register('fullName', {
+            required: REQUIRED_FIELD_ERROR,
+            value: account?.user_metadata.fullName,
+          })}
+        />
+      </Form.Row>
+
+      <Form.Action>
+        <Form.Button type="submit" name="submit" disabled={isUpdating}>
+          Update account
+        </Form.Button>
+      </Form.Action>
+    </Form>
+  );
+};
+
+export default AccountInforForm;

hotel-management/src/pages/Account/AccountPasswordForm.tsx

@@ -0,0 +1,93 @@
+import { useEffect } from 'react';
+import { useForm } from 'react-hook-form';
+import toast from 'react-hot-toast';
+
+// Styled
+import Input from '@commonStyle/Input';
+
+// Components
+import Form from '@component/Form';
+
+// Constants
+import { REGEX } from '@constant/commons';
+import {
+  PASSWORD_CONDITION,
+  PASSWORD_NOT_MATCH,
+  PASSWORD_NOT_MATCH_REQUIREMENT,
+} from '@constant/formValidateMessage';
+
+// Helpers
+import { isValidRegex } from '@helper/validators';
+
+// Hooks
+import { useUpdateAccount } from '@hook/authentication/useUpdateAccount';
+
+interface IAccountPasswordForm {
+  password: string;
+  confirmPassword: string;
+}
+
+const AccountPasswordForm = () => {
+  const { updateAccount, isUpdating } = useUpdateAccount();
+  const {
+    register,
+    handleSubmit,
+    getValues,
+    reset,
+    formState: { errors },
+  } = useForm<IAccountPasswordForm>();
+
+  useEffect(() => {
+    if (errors?.password?.message) {
+      toast.error(PASSWORD_CONDITION);
+    }
+  }, [errors?.password?.message]);
+
+  const onSubmit = (data: IAccountPasswordForm) => {
+    updateAccount(data, {
+      onSuccess: () => {
+        reset();
+      },
+    });
+  };
+
+  return (
+    <Form onSubmit={handleSubmit(onSubmit)}>
+      <Form.Row label="Password:" error={errors?.password?.message}>
+        <Input
+          id="password"
+          type="password"
+          {...register('password', {
+            validate: {
+              checkPassword: (v) =>
+                isValidRegex(REGEX.PASSWORD, v) ||
+                PASSWORD_NOT_MATCH_REQUIREMENT,
+            },
+          })}
+        />
+      </Form.Row>
+
+      <Form.Row
+        label="Confirm Password:"
+        error={errors?.confirmPassword?.message}
+      >
+        <Input
+          id="confirmPassword"
+          type="password"
+          {...register('confirmPassword', {
+            validate: (value) =>
+              getValues().password === value || PASSWORD_NOT_MATCH,
+          })}
+        />
+      </Form.Row>
+
+      <Form.Action>
+        <Form.Button type="submit" name="submit" disabled={isUpdating}>
+          Update password
+        </Form.Button>
+      </Form.Action>
+    </Form>
+  );
+};
+
+export default AccountPasswordForm;

hotel-management/src/pages/Account/index.tsx

@@ -0,0 +1,26 @@
+// Styled
+import { FormArea, StyledAccount, SubTitle, Title } from './styled';
+
+// Components
+import AccountInforForm from './AccountInforForm';
+import AccountPasswordForm from './AccountPasswordForm';
+
+const Account = () => {
+  return (
+    <StyledAccount>
+      <Title>Update account</Title>
+
+      <FormArea>
+        <SubTitle>Update information</SubTitle>
+        <AccountInforForm />
+      </FormArea>
+
+      <FormArea>
+        <SubTitle>Update password</SubTitle>
+        <AccountPasswordForm />
+      </FormArea>
+    </StyledAccount>
+  );
+};
+
+export default Account;

hotel-management/src/pages/Account/styled.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+
+const Title = styled.h2`
+  font-size: var(--fs-md);
+  color: var(--dark-text);
+  text-transform: capitalize;
+`;
+
+const SubTitle = styled.h3`
+  font-size: var(--fs-sm);
+  text-transform: capitalize;
+
+  text-align: center;
+
+  margin-bottom: 20px;
+`
+
+const StyledAccount = styled.div`
+  padding: 20px;
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const FormArea = styled.div`
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border-color);
+  
+  padding: 20px 40px;
+  width: 500px;
+
+  margin-top: 50px;
+`
+
+export { Title, StyledAccount, FormArea, SubTitle };