Add react-hook-forms to AccountCanvas

client/package-lock.json

@@ -18,6 +18,7 @@
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
         "react-grid-layout": "^1.5.2",
+        "react-hook-form": "^7.62.0",
         "react-icons": "^5.5.0",
         "react-leaflet": "^5.0.0",
         "react-resizable": "^3.0.5",
@@ -4301,6 +4302,22 @@
         "react-dom": ">= 16.3.0"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.62.0",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.62.0.tgz",
+      "integrity": "sha512-7KWFejc98xqG/F4bAxpL41NB3o1nnvQO1RWZT3TqRZYL8RryQETGfEdVnJN2fy1crCiBLLjkRBVK05j24FxJGA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18 || ^19"
+      }
+    },
     "node_modules/react-icons": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.5.0.tgz",

client/package.json

@@ -20,6 +20,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "react-grid-layout": "^1.5.2",
+    "react-hook-form": "^7.62.0",
     "react-icons": "^5.5.0",
     "react-leaflet": "^5.0.0",
     "react-resizable": "^3.0.5",

client/src/components/layout/Canvas/views/AccountCanvas.jsx

@@ -1,13 +1,26 @@
-import { Box, Flex, Field, Input, Stack, Switch, Text, Heading } from "@chakra-ui/react"
+import { Box, Flex, Field, Input, Stack, Heading, Button } from "@chakra-ui/react"
+import { useForm } from 'react-hook-form';
 
 export default function AccountCanvas()  {
+  const { 
+    register, 
+    handleSubmit,
+    watch,
+    formState: { errors },
+  } = useForm();
+
+  const onSubmit = (data) => {
+    console.log("Form submitted:", data);
+  }
+
+  console.log(watch("example")); // watch input value by passing the name of it 
+
   return (
     <Flex 
       height="100vh"
       direction="column"
       align="start"
       justify="start"
-      // hieght="100vh"
       bg="gray.50"
       pt={6}
       pl={6}
@@ -15,6 +28,8 @@ export default function AccountCanvas()  {
       <Heading as="h1" mb={2}>Account</Heading>
 
       <Box 
+        as="form"
+        onSubmit={handleSubmit(onSubmit)}
         border="1px solid"
         borderColor="gray.300"
         borderRadius="md"
@@ -31,31 +46,28 @@ export default function AccountCanvas()  {
         <Stack gap="6" maxW="sm" css={{ "--field-label-width": "96px" }}>
           <Field.Root orientation="horizontal">
             <Field.Label>User Name</Field.Label>
-            <Input placeholder="David Johnston" flex="1" />
+            <Input {...register("username")} placeholder="David Johnston" flex="1" />
           </Field.Root>
 
           <Field.Root orientation="horizontal">
             <Field.Label> First Name</Field.Label>
-            <Input placeholder="David" flex="1" />
+            <Input {...register("firstname")} placeholder="David" flex="1" />
           </Field.Root>
 
           <Field.Root orientation="horizontal">
             <Field.Label>Last Name</Field.Label>
-            <Input placeholder="Johnston" flex="1" />
+            <Input {...register("lastname")} placeholder="Johnston" flex="1" />
           </Field.Root>
 
           <Field.Root orientation="horizontal">
             <Field.Label>Email</Field.Label>
-            <Input placeholder="djohntson@usgs.gov" flex="1" />
+            <Input {...register("email")} placeholder="djohntson@usgs.gov" flex="1" />
           </Field.Root>
 
-          {/* <Field.Root orientation="horizontal">
-            <Field.Label>Hide email</Field.Label>
-            <Switch.Root>
-              <Switch.HiddenInput />
-              <Switch.Control />
-            </Switch.Root>
-          </Field.Root> */}
+          <Button type="submit">
+            Save
+          </Button>
+
         </Stack>
       </Box>
     </Flex>