chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
vkuchenik
2026-09-01 09:47:54 -07:00
parent 75b65bfcaa
commit 43cc39fd62
3 changed files with 145 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/App.jsx
+3
View File
@@ -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
+126
View File
@@ -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
+16 -1
View File
@@ -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;