Refactor made changes to file structures

client/src/pages/auth/Account.jsx

@@ -0,0 +1,75 @@
+import { Box, Flex, Field, Input, Stack, Heading, Button } from "@chakra-ui/react"
+import { useForm } from 'react-hook-form';
+
+export default function Account()  {
+  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>
+  )
+}

client/src/pages/auth/Login.jsx

@@ -0,0 +1,91 @@
+import { useContext } from 'react';
+import { useForm } from 'react-hook-form';
+import {
+  Button,
+  Field,
+  Input,
+  Stack,
+  useRecipe,
+  Center,
+  Text,
+  Flex,
+  Heading,
+  Highlight,
+  GridItem,
+  Grid
+} from "@chakra-ui/react"
+import { PasswordInput } from "@/components/ui/password-input.jsx";
+
+export default function Login( signedIn, setSignedIn) {
+  const recipe = useRecipe({ key: "dashboard" });   // styling recipes option
+  const styles = recipe();                          // use style
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors, isSubmitSuccessful },
+  } = useForm({
+    defaultValues: {
+      username: "",
+      password: "",
+    }
+  });
+
+  const onSubmit = (data) => {
+    console.log(data);
+    // setUser(data.username);
+  };
+
+  return (
+    <Flex css={styles} width="100%" height="100%">
+      <Grid
+        templateRows="1fr 11fr"
+        height="100vh"
+        width="100vw"
+      >
+        <GridItem rowSpan={1} >
+          <Flex width="100%" height="100%" align="center" >
+            <Heading size="4xl" fontWeight="bold" pl="1rem" cursor="default" >
+              <Highlight query="A" styles={{ color: 'red.600'}}>
+                VDAP
+              </Highlight>
+            </Heading>
+          </Flex>
+        </GridItem>
+        <GridItem rowSpan={11} >
+          <Flex width="100%" height="100%" justify="center" align="center" direction="column" >
+            <Center background="white" width="40%" height="50%" borderRadius="1rem">
+              <form onSubmit={handleSubmit(onSubmit)}>
+                <Stack gap="4" align="center" maxW="sm">
+                  <Text textStyle="2xl" fontWeight="bold" cursor="default">Sign In</Text>
+                  <Field.Root invalid={!!errors.username}>
+                    <Input
+                      placeholder="username"
+                      {...register("username", {required: "Required"})}
+                    />
+                    <Field.ErrorText>{errors.username?.message}</Field.ErrorText>
+                  </Field.Root>
+
+                  <Field.Root invalid={!!errors.password}>
+                    <PasswordInput
+                      placeholder="password"
+                      {...register("password", {required: "Required"})}
+                    />
+                    <Field.ErrorText>{errors.password?.message}</Field.ErrorText>
+                  </Field.Root>
+
+                  <Button
+                    type="submit"
+                    disabled={isSubmitSuccessful}
+                  >
+                    Submit
+                  </Button>
+                </Stack>
+              </form>
+            </Center>
+          </Flex>
+        </GridItem>
+      </Grid>
+    </Flex>
+  );
+}

client/src/pages/auth/Personal.jsx

@@ -0,0 +1,24 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export default function Personal() {
+  return (
+    <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+      <Box 
+        bg="bg" 
+        shadow="md" 
+        borderRadius="md"
+        p={8}
+        width="600px"
+        height="100px"
+        textAlign="center"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+            Personal Info Canvas coming soon!
+        </Text>
+      </Box>
+    </Box>
+  );
+}

client/src/pages/auth/Security.jsx

@@ -0,0 +1,24 @@
+import { Box, Text } from "@chakra-ui/react";
+
+export default function Security() {
+  return (
+    <Box p={8} mt={4} ml="auto" mr="auto" width="600px">
+      <Box 
+        bg="bg" 
+        shadow="md" 
+        borderRadius="md"
+        p={8}
+        width="600px"
+        height="100px"
+        textAlign="center"
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+      >
+        <Text fontsize="2xl" fontWeight="bold" color="gray.700">
+            Security Canvas coming soon!
+        </Text>
+      </Box>
+    </Box>
+  );
+}