Web-Frontend/client/src/components/Canvas/views/Account.jsx

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"
      bg="gray.50"
      pt={6}
      pl={6}
    >
      <Heading as="h1" mb={2}>Account</Heading>

      <Box 
        as="form"
        onSubmit={handleSubmit(onSubmit)}
        border="1px solid"
        borderColor="gray.300"
        borderRadius="md"
        padding={4}
        bg="white"
        boxShadow="md"
        width="100%"
        maxW="sm"
      >
        {/* <Text fontSize="xl" fontWeight="bold" mb={6}>
          Account
        </Text> */}

        <Stack gap="6" maxW="sm" css={{ "--field-label-width": "96px" }}>
          <Field.Root orientation="horizontal">
            <Field.Label>User Name</Field.Label>
            <Input {...register("username")} placeholder="David Johnston" flex="1" />
          </Field.Root>

          <Field.Root orientation="horizontal">
            <Field.Label> First Name</Field.Label>
            <Input {...register("firstname")} placeholder="David" flex="1" />
          </Field.Root>

          <Field.Root orientation="horizontal">
            <Field.Label>Last Name</Field.Label>
            <Input {...register("lastname")} placeholder="Johnston" flex="1" />
          </Field.Root>

          <Field.Root orientation="horizontal">
            <Field.Label>Email</Field.Label>
            <Input {...register("email")} placeholder="djohntson@usgs.gov" flex="1" />
          </Field.Root>

          <Button type="submit">
            Save
          </Button>

        </Stack>
      </Box>
    </Flex>
  )
}