add — settings page has basic ui, changes to preferences currently do not take effect

client/src/App.jsx

@@ -18,6 +18,7 @@ import Volcano from "@/pages/volcano/Volcano.jsx";
 import GlobalMap from "./pages/maps/GlobalMap.jsx";
 import Admin from "./pages/admin/Admin.jsx";
 import MyDashboard from "./pages/home/tabs/MyDashboard.jsx";
+import Settings from "./pages/auth/Settings.jsx";
 
 function AppFoundation() {
   const recipe = useRecipe({ key: "dashboard" });
@@ -81,6 +82,8 @@ function App() {
                         <Route path="daily" element={<Placeholder name="Daily Activity" />} />
                     </Route>
 
+                    <Route path="/settings" element={<Settings />} />
+
                     <Route path="/global-map" element={<GlobalMap />} />
                     <Route path="/regional-map" element={<RegionalMap />} />
                     <Route path="/volcano" element={<Volcano />} />

client/src/pages/auth/Settings.jsx

@@ -0,0 +1,126 @@
+import { Flex, Text, Input, Field, Button, Separator, NativeSelect, Image } from '@chakra-ui/react';
+import useAuthStore from "../../store/authStore.js";
+import { useForm } from "react-hook-form";
+import { useState } from "react";
+
+export default function Settings() {
+  const { user } = useAuthStore();
+  const { register, handleSubmit, errors } = useForm();
+  const [value, setValue] = useState(undefined);
+  const updateProfile = useAuthStore((state) => state.updateProfile);
+
+  const onSubmit = (data, event) => {
+    // TODO: check for identical usernames
+    event.preventDefault();
+    console.log(data);
+    if (data.username && data.username.length !== "") updateProfile(data);
+  }
+
+  const ivansRequest = () => {
+    console.log(user.username, "requested ivans permissions");
+    // TODO: log users request in database here which will then display request in web-admin page
+  }
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Flex direction="column" w="100%" h="100%" p="15rem" pt="4rem" gap="5rem">
+
+        {/* CONTENT */}
+        <Flex direction="column" w="100%" h="100%" gap={4}>
+          <Text fontWeight="semibold" fontSize="xl">Personal Information</Text>
+          <Flex direction="column" w="100%" align="center" gap={4}>
+            {/* avatar */}
+            <Flex direction="row" w="100%" align="center" justify="space-between" gap={5}>
+              <Flex direction="row" w="100%" align="center" gap={5}>
+                <Image borderRadius="full" boxSize="100px" src="https://i.pravatar.cc/300?img=10" />
+                  <Flex direction="column">
+                    <Text fontWeight="semibold">Name</Text>
+                    <Text pl={2}>{user.firstName || "first name"}, {user.lastName || "last name"}</Text>
+                  </Flex>
+              </Flex>
+              <Button variant="subtle" size="sm">Update photo</Button>
+            </Flex>
+
+            {/* personal info */}
+            <Flex direction="row" w="100%" gap={5}>
+              <Field.Root>
+                <Field.Label fontWeight="semibold">Username</Field.Label>
+                <Input {...register("username")} placeholder={user.username} variant="subtle" />
+              </Field.Root>
+
+              <Field.Root>
+                <Field.Label fontWeight="semibold">Email</Field.Label>
+                <Input {...register("email")} type="email" placeholder={user.email || "example@usgs.gov"} variant="subtle" />
+              </Field.Root>
+            </Flex>
+
+            <Flex direction="row" w="100%" gap={5}>
+              <Field.Root pb={8}>
+                <Field.Label fontWeight="semibold">Descipline</Field.Label>
+                <NativeSelect.Root size="sm" variant="subtle">
+                  <NativeSelect.Field
+                    w="100%"
+                    h="2.5rem"
+                    placeholder="Select option"
+                    {...register("discipline")}
+                  >
+                    <option value="RS">Remote Sensing</option>
+                    <option value="CS">Computer Science</option>
+                    <option value="Engineering">Engineering</option>
+                    <option value="HR">Human Resources (HR)</option>
+                  </NativeSelect.Field>
+                  <NativeSelect.Indicator />
+                </NativeSelect.Root>
+                <Field.ErrorText></Field.ErrorText>
+              </Field.Root>
+              <Flex w="100%"></Flex> {/* filler so that discipline dropdown sizes correctly */}
+            </Flex>
+          </Flex>
+
+          <Separator borderColor="gray.300"/>
+
+          {/* permissions */}
+          <Flex direction="column" gap={2}>
+            <Text fontWeight="semibold" fontSize="xl">Permissions</Text>
+            <Flex direction="row" w="100%" align="center" justify="space-between" pl={2}>
+              <Text>Request access to IVANS</Text>
+              <Button variant="subtle" size="sm" onClick={ivansRequest}>IVANS Request</Button>
+            </Flex>
+            <Flex direction="row" w="100%" align="center" justify="space-between" pl={2}>
+              <Text>Request access to Remote Sensing</Text>
+              <Button variant="subtle" size="sm" onClick={ivansRequest}>Remote Sensing Request</Button>
+            </Flex>
+          </Flex>
+
+          <Separator borderColor="gray.300" />
+
+          {/* themes */}
+          <Flex direction="column">
+            <Text fontWeight="semibold" fontSize="xl">Theme</Text>
+            <Flex direction="row" align="center" justify="space-between" pl={2}>
+              <Text fontSize="md">Appearance</Text>
+              <NativeSelect.Root size="sm" w="10rem" variant="subtle">
+                <NativeSelect.Field
+                  placeholder="Select option"
+                  {...register("theme")}
+                  value={value}
+                  onChange={(e) => setValue(e.currentTarget.value)}
+                >
+                  <option value="Light">Light</option>
+                  <option value="Dark">Dark</option>
+                </NativeSelect.Field>
+                <NativeSelect.Indicator />
+              </NativeSelect.Root>
+            </Flex>
+          </Flex>
+        </Flex>
+
+        {/* SAVE-ALL BUTTON */}
+        {/* TODO: grey out button until changes are detected */}
+        <Button type="submit" w="150px" variant="subtle" borderRadius="lg" alignSelf="center">
+          Save Changes
+        </Button>
+      </Flex>
+    </form>
+  );
+}

client/src/store/authStore.js

@@ -86,7 +86,22 @@ const useAuthStore = create((set) => ({
         } catch (error) {
             console.error("Failed to save layout to database", error);
         }
-    }
+    },
+
+    // updateProfile: async (newProfile) => {
+    //     try {
+    //         set((state) => ({
+    //             user: {
+    //                 ...state.user,
+    //                 username: newProfile.username,
+    //             }
+    //         }));
+    //
+    //         await api.post('profile/update/', { profile: newProfile });
+    //     } catch (error) {
+    //         console.error("Failed to update profile", error);
+    //     }
+    // }
 }));
 
 export default useAuthStore;