User Page Update

src/components/CreateUser/CreateUser.tsx

@@ -80,6 +80,8 @@ const CreateUser: React.FC<Props> =  ({ rules, auths }) => {
     try {
       formProps.reset({
         username: "",
+        name: "",
+        staffNo: "",
         addAuthIds: addAuthIds,
         removeAuthIds: [],
         password: "",

src/components/CreateUser/UserDetail.tsx

@@ -9,17 +9,15 @@ import {
   Stack,
   TextField,
   Typography,
-  makeStyles,
 } from "@mui/material";
 import { useFormContext } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 const UserDetail: React.FC = () => {
-  const { t } = useTranslation();
+  const { t } = useTranslation("user");
   const {
     register,
     formState: { errors },
-    control,
   } = useFormContext<UserInputs>();
 
   return (
@@ -39,6 +37,34 @@ const UserDetail: React.FC = () => {
               error={Boolean(errors.username)}
             />
           </Grid>
+          <Grid item xs={6}>
+            <TextField
+              label={t("staffNo")}
+              fullWidth
+              {...register("staffNo")}
+              error={Boolean(errors.staffNo)}
+              helperText={
+                Boolean(errors.staffNo) && errors.staffNo?.message
+                  ? t(errors.staffNo.message)
+                  : ""
+              }
+            />
+          </Grid>
+          <Grid item xs={6}>
+            <TextField
+              label={t("name")}
+              fullWidth
+              {...register("name", {
+                required: "name required!",
+              })}
+              error={Boolean(errors.name)}
+              helperText={
+                Boolean(errors.name) && errors.name?.message
+                  ? t(errors.name.message)
+                  : ""
+              }
+            />
+          </Grid>
           <Grid item xs={6}>
             <TextField
               label={t("password")}
@@ -71,16 +97,6 @@ const UserDetail: React.FC = () => {
               error={Boolean(errors.password)}
             />
           </Grid>
-          {/* <Grid item xs={6}>
-            <TextField
-              label={t("name")}
-              fullWidth
-              {...register("name", {
-                required: "name required!",
-              })}
-              error={Boolean(errors.name)}
-            />
-          </Grid> */}
         </Grid>
       </CardContent>
     </Card>
@@ -88,17 +104,3 @@ const UserDetail: React.FC = () => {
 };
 
 export default UserDetail;
-
-{
-  /* <>
-              - 8-20 characters
-              <br/>
-              - Uppercase letters
-              <br/>
-              - Lowercase letters
-              <br/>
-              - Numbers
-              <br/>
-              - Symbols 
-              </> */
-}