nt_web_template/full-stack-fastapi-template
2
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

🎨 Format with Biome (#1097)

Browse Source
This commit is contained in:
Alejandra
2024-03-17 17:28:45 +01:00
committed by GitHub
parent d4ee4db2f0
commit 94a2037f8a
31 changed files with 407 additions and 391 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/modify-openapi-operationids.js
View File

@@ -1,4 +1,4 @@
import * as fs from 'fs'
import * as fs from "node:fs"
async function modifyOpenAPIFile(filePath) {
try {
@@ -26,11 +26,11 @@ async function modifyOpenAPIFile(filePath) {
filePath,
JSON.stringify(openapiContent, null, 2),
)
console.log('File successfully modified')
console.log("File successfully modified")
} catch (err) {
console.error('Error:', err)
console.error("Error:", err)
}
}
const filePath = './openapi.json'
const filePath = "./openapi.json"
modifyOpenAPIFile(filePath)

58
frontend/src/components/Admin/AddUser.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Button,
Checkbox,
@@ -14,13 +13,14 @@ import {
ModalFooter,
ModalHeader,
ModalOverlay,
} from '@chakra-ui/react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { useMutation, useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import type React from "react"
import { type SubmitHandler, useForm } from "react-hook-form"
import { useMutation, useQueryClient } from "react-query"
import { UserCreate, UsersService } from '../../client'
import { ApiError } from '../../client/core/ApiError'
import useCustomToast from '../../hooks/useCustomToast'
import { type UserCreate, UsersService } from "../../client"
import type { ApiError } from "../../client/core/ApiError"
import useCustomToast from "../../hooks/useCustomToast"
interface AddUserProps {
isOpen: boolean
@@ -41,13 +41,13 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
getValues,
formState: { errors, isSubmitting },
} = useForm<UserCreateForm>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
defaultValues: {
email: '',
full_name: '',
password: '',
confirm_password: '',
email: "",
full_name: "",
password: "",
confirm_password: "",
is_superuser: false,
is_active: false,
},
@@ -59,16 +59,16 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
const mutation = useMutation(addUser, {
onSuccess: () => {
showToast('Success!', 'User created successfully.', 'success')
showToast("Success!", "User created successfully.", "success")
reset()
onClose()
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
onSettled: () => {
queryClient.invalidateQueries('users')
queryClient.invalidateQueries("users")
},
})
@@ -81,7 +81,7 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
<Modal
isOpen={isOpen}
onClose={onClose}
size={{ base: 'sm', md: 'md' }}
size={{ base: "sm", md: "md" }}
isCentered
>
<ModalOverlay />
@@ -93,11 +93,11 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
<FormLabel htmlFor="email">Email</FormLabel>
<Input
id="email"
{...register('email', {
required: 'Email is required',
{...register("email", {
required: "Email is required",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: 'Invalid email address',
message: "Invalid email address",
},
})}
placeholder="Email"
@@ -111,7 +111,7 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
<FormLabel htmlFor="name">Full name</FormLabel>
<Input
id="name"
{...register('full_name')}
{...register("full_name")}
placeholder="Full name"
type="text"
/>
@@ -123,11 +123,11 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
<FormLabel htmlFor="password">Set Password</FormLabel>
<Input
id="password"
{...register('password', {
required: 'Password is required',
{...register("password", {
required: "Password is required",
minLength: {
value: 8,
message: 'Password must be at least 8 characters',
message: "Password must be at least 8 characters",
},
})}
placeholder="Password"
@@ -145,11 +145,11 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
<Input
id="confirm_password"
{...register('confirm_password', {
required: 'Please confirm your password',
{...register("confirm_password", {
required: "Please confirm your password",
validate: (value) =>
value === getValues().password ||
'The passwords do not match',
"The passwords do not match",
})}
placeholder="Password"
type="password"
@@ -162,12 +162,12 @@ const AddUser: React.FC<AddUserProps> = ({ isOpen, onClose }) => {
</FormControl>
<Flex mt={4}>
<FormControl>
<Checkbox {...register('is_superuser')} colorScheme="teal">
<Checkbox {...register("is_superuser")} colorScheme="teal">
Is superuser?
</Checkbox>
</FormControl>
<FormControl>
<Checkbox {...register('is_active')} colorScheme="teal">
<Checkbox {...register("is_active")} colorScheme="teal">
Is active?
</Checkbox>
</FormControl>

51
frontend/src/components/Admin/EditUser.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Button,
Checkbox,
@@ -14,12 +13,18 @@ import {
ModalFooter,
ModalHeader,
ModalOverlay,
} from '@chakra-ui/react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { useMutation, useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import type React from "react"
import { type SubmitHandler, useForm } from "react-hook-form"
import { useMutation, useQueryClient } from "react-query"
import { ApiError, UserOut, UserUpdate, UsersService } from '../../client'
import useCustomToast from '../../hooks/useCustomToast'
import {
type ApiError,
type UserOut,
type UserUpdate,
UsersService,
} from "../../client"
import useCustomToast from "../../hooks/useCustomToast"
interface EditUserProps {
user: UserOut
@@ -42,8 +47,8 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
getValues,
formState: { errors, isSubmitting, isDirty },
} = useForm<UserUpdateForm>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
defaultValues: user,
})
@@ -53,20 +58,20 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
const mutation = useMutation(updateUser, {
onSuccess: () => {
showToast('Success!', 'User updated successfully.', 'success')
showToast("Success!", "User updated successfully.", "success")
onClose()
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
onSettled: () => {
queryClient.invalidateQueries('users')
queryClient.invalidateQueries("users")
},
})
const onSubmit: SubmitHandler<UserUpdateForm> = async (data) => {
if (data.password === '') {
if (data.password === "") {
data.password = undefined
}
mutation.mutate(data)
@@ -82,7 +87,7 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
<Modal
isOpen={isOpen}
onClose={onClose}
size={{ base: 'sm', md: 'md' }}
size={{ base: "sm", md: "md" }}
isCentered
>
<ModalOverlay />
@@ -94,11 +99,11 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
<FormLabel htmlFor="email">Email</FormLabel>
<Input
id="email"
{...register('email', {
required: 'Email is required',
{...register("email", {
required: "Email is required",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: 'Invalid email address',
message: "Invalid email address",
},
})}
placeholder="Email"
@@ -110,16 +115,16 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
</FormControl>
<FormControl mt={4}>
<FormLabel htmlFor="name">Full name</FormLabel>
<Input id="name" {...register('full_name')} type="text" />
<Input id="name" {...register("full_name")} type="text" />
</FormControl>
<FormControl mt={4} isInvalid={!!errors.password}>
<FormLabel htmlFor="password">Set Password</FormLabel>
<Input
id="password"
{...register('password', {
{...register("password", {
minLength: {
value: 8,
message: 'Password must be at least 8 characters',
message: "Password must be at least 8 characters",
},
})}
placeholder="Password"
@@ -133,10 +138,10 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
<Input
id="confirm_password"
{...register('confirm_password', {
{...register("confirm_password", {
validate: (value) =>
value === getValues().password ||
'The passwords do not match',
"The passwords do not match",
})}
placeholder="Password"
type="password"
@@ -149,12 +154,12 @@ const EditUser: React.FC<EditUserProps> = ({ user, isOpen, onClose }) => {
</FormControl>
<Flex>
<FormControl mt={4}>
<Checkbox {...register('is_superuser')} colorScheme="teal">
<Checkbox {...register("is_superuser")} colorScheme="teal">
Is superuser?
</Checkbox>
</FormControl>
<FormControl mt={4}>
<Checkbox {...register('is_active')} colorScheme="teal">
<Checkbox {...register("is_active")} colorScheme="teal">
Is active?
</Checkbox>
</FormControl>

18
frontend/src/components/Common/ActionsMenu.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Button,
Menu,
@@ -6,14 +5,15 @@ import {
MenuItem,
MenuList,
useDisclosure,
} from '@chakra-ui/react'
import { BsThreeDotsVertical } from 'react-icons/bs'
import { FiEdit, FiTrash } from 'react-icons/fi'
} from "@chakra-ui/react"
import type React from "react"
import { BsThreeDotsVertical } from "react-icons/bs"
import { FiEdit, FiTrash } from "react-icons/fi"
import EditUser from '../Admin/EditUser'
import EditItem from '../Items/EditItem'
import Delete from './DeleteAlert'
import { ItemOut, UserOut } from '../../client'
import type { ItemOut, UserOut } from "../../client"
import EditUser from "../Admin/EditUser"
import EditItem from "../Items/EditItem"
import Delete from "./DeleteAlert"
interface ActionsMenuProps {
type: string
@@ -49,7 +49,7 @@ const ActionsMenu: React.FC<ActionsMenuProps> = ({ type, value, disabled }) => {
Delete {type}
</MenuItem>
</MenuList>
{type === 'User' ? (
{type === "User" ? (
<EditUser
user={value as UserOut}
isOpen={editUserModal.isOpen}

32
frontend/src/components/Common/DeleteAlert.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
AlertDialog,
AlertDialogBody,
@@ -7,12 +6,13 @@ import {
AlertDialogHeader,
AlertDialogOverlay,
Button,
} from '@chakra-ui/react'
import { useForm } from 'react-hook-form'
import { useMutation, useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import React from "react"
import { useForm } from "react-hook-form"
import { useMutation, useQueryClient } from "react-query"
import { ItemsService, UsersService } from '../../client'
import useCustomToast from '../../hooks/useCustomToast'
import { ItemsService, UsersService } from "../../client"
import useCustomToast from "../../hooks/useCustomToast"
interface DeleteProps {
type: string
@@ -31,9 +31,9 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
} = useForm()
const deleteEntity = async (id: number) => {
if (type === 'Item') {
if (type === "Item") {
await ItemsService.deleteItem({ id: id })
} else if (type === 'User') {
} else if (type === "User") {
await UsersService.deleteUser({ userId: id })
} else {
throw new Error(`Unexpected type: ${type}`)
@@ -43,21 +43,21 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
const mutation = useMutation(deleteEntity, {
onSuccess: () => {
showToast(
'Success',
"Success",
`The ${type.toLowerCase()} was deleted successfully.`,
'success',
"success",
)
onClose()
},
onError: () => {
showToast(
'An error occurred.',
"An error occurred.",
`An error occurred while deleting the ${type.toLowerCase()}.`,
'error',
"error",
)
},
onSettled: () => {
queryClient.invalidateQueries(type === 'Item' ? 'items' : 'users')
queryClient.invalidateQueries(type === "Item" ? "items" : "users")
},
})
@@ -71,7 +71,7 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
isOpen={isOpen}
onClose={onClose}
leastDestructiveRef={cancelRef}
size={{ base: 'sm', md: 'md' }}
size={{ base: "sm", md: "md" }}
isCentered
>
<AlertDialogOverlay>
@@ -79,9 +79,9 @@ const Delete: React.FC<DeleteProps> = ({ type, id, isOpen, onClose }) => {
<AlertDialogHeader>Delete {type}</AlertDialogHeader>
<AlertDialogBody>
{type === 'User' && (
{type === "User" && (
<span>
All items associated with this user will also be{' '}
All items associated with this user will also be{" "}
<strong>permantly deleted. </strong>
</span>
)}

14
frontend/src/components/Common/Navbar.tsx
View File

@@ -1,9 +1,9 @@
import React from 'react'
import { Button, Flex, Icon, useDisclosure } from '@chakra-ui/react'
import { FaPlus } from 'react-icons/fa'
import { Button, Flex, Icon, useDisclosure } from "@chakra-ui/react"
import type React from "react"
import { FaPlus } from "react-icons/fa"
import AddUser from '../Admin/AddUser'
import AddItem from '../Items/AddItem'
import AddUser from "../Admin/AddUser"
import AddItem from "../Items/AddItem"
interface NavbarProps {
type: string
@@ -26,8 +26,8 @@ const Navbar: React.FC<NavbarProps> = ({ type }) => {
<Button
variant="primary"
gap={1}
fontSize={{ base: 'sm', md: 'inherit' }}
onClick={type === 'User' ? addUserModal.onOpen : addItemModal.onOpen}
fontSize={{ base: "sm", md: "inherit" }}
onClick={type === "User" ? addUserModal.onOpen : addItemModal.onOpen}
>
<Icon as={FaPlus} /> Add {type}
</Button>

6
frontend/src/components/Common/NotFound.tsx
View File

@@ -1,6 +1,6 @@
import React from 'react'
import { Button, Container, Text } from '@chakra-ui/react'
import { Link } from '@tanstack/react-router'
import { Button, Container, Text } from "@chakra-ui/react"
import { Link } from "@tanstack/react-router"
import type React from "react"
const NotFound: React.FC = () => {
return (

28
frontend/src/components/Common/Sidebar.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Box,
Drawer,
@@ -12,21 +11,22 @@ import {
Text,
useColorModeValue,
useDisclosure,
} from '@chakra-ui/react'
import { FiLogOut, FiMenu } from 'react-icons/fi'
import { useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import type React from "react"
import { FiLogOut, FiMenu } from "react-icons/fi"
import { useQueryClient } from "react-query"
import Logo from '../../assets/images/fastapi-logo.svg'
import { UserOut } from '../../client'
import useAuth from '../../hooks/useAuth'
import SidebarItems from './SidebarItems'
import Logo from "../../assets/images/fastapi-logo.svg"
import type { UserOut } from "../../client"
import useAuth from "../../hooks/useAuth"
import SidebarItems from "./SidebarItems"
const Sidebar: React.FC = () => {
const queryClient = useQueryClient()
const bgColor = useColorModeValue('ui.white', 'ui.dark')
const textColor = useColorModeValue('ui.dark', 'ui.white')
const secBgColor = useColorModeValue('ui.secondary', 'ui.darkSlate')
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
const bgColor = useColorModeValue("ui.white", "ui.dark")
const textColor = useColorModeValue("ui.dark", "ui.white")
const secBgColor = useColorModeValue("ui.secondary", "ui.darkSlate")
const currentUser = queryClient.getQueryData<UserOut>("currentUser")
const { isOpen, onOpen, onClose } = useDisclosure()
const { logout } = useAuth()
@@ -39,7 +39,7 @@ const Sidebar: React.FC = () => {
{/* Mobile */}
<IconButton
onClick={onOpen}
display={{ base: 'flex', md: 'none' }}
display={{ base: "flex", md: "none" }}
aria-label="Open Menu"
position="absolute"
fontSize="20px"
@@ -84,7 +84,7 @@ const Sidebar: React.FC = () => {
h="100vh"
position="sticky"
top="0"
display={{ base: 'none', md: 'flex' }}
display={{ base: "none", md: "flex" }}
>
<Flex
flexDir="column"

28
frontend/src/components/Common/SidebarItems.tsx
View File

@@ -1,15 +1,15 @@
import React from 'react'
import { Box, Flex, Icon, Text, useColorModeValue } from '@chakra-ui/react'
import { FiBriefcase, FiHome, FiSettings, FiUsers } from 'react-icons/fi'
import { Link } from '@tanstack/react-router'
import { useQueryClient } from 'react-query'
import { Box, Flex, Icon, Text, useColorModeValue } from "@chakra-ui/react"
import { Link } from "@tanstack/react-router"
import type React from "react"
import { FiBriefcase, FiHome, FiSettings, FiUsers } from "react-icons/fi"
import { useQueryClient } from "react-query"
import { UserOut } from '../../client'
import type { UserOut } from "../../client"
const items = [
{ icon: FiHome, title: 'Dashboard', path: '/' },
{ icon: FiBriefcase, title: 'Items', path: '/items' },
{ icon: FiSettings, title: 'User Settings', path: '/settings' },
{ icon: FiHome, title: "Dashboard", path: "/" },
{ icon: FiBriefcase, title: "Items", path: "/items" },
{ icon: FiSettings, title: "User Settings", path: "/settings" },
]
interface SidebarItemsProps {
@@ -18,12 +18,12 @@ interface SidebarItemsProps {
const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
const queryClient = useQueryClient()
const textColor = useColorModeValue('ui.main', 'ui.white')
const bgActive = useColorModeValue('#E2E8F0', '#4A5568')
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
const textColor = useColorModeValue("ui.main", "ui.white")
const bgActive = useColorModeValue("#E2E8F0", "#4A5568")
const currentUser = queryClient.getQueryData<UserOut>("currentUser")
const finalItems = currentUser?.is_superuser
? [...items, { icon: FiUsers, title: 'Admin', path: '/admin' }]
? [...items, { icon: FiUsers, title: "Admin", path: "/admin" }]
: items
const listItems = finalItems.map((item) => (
@@ -36,7 +36,7 @@ const SidebarItems: React.FC<SidebarItemsProps> = ({ onClose }) => {
activeProps={{
style: {
background: bgActive,
borderRadius: '12px',
borderRadius: "12px",
},
}}
color={textColor}

14
frontend/src/components/Common/UserMenu.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Box,
IconButton,
@@ -6,12 +5,13 @@ import {
MenuButton,
MenuItem,
MenuList,
} from '@chakra-ui/react'
import { FaUserAstronaut } from 'react-icons/fa'
import { FiLogOut, FiUser } from 'react-icons/fi'
} from "@chakra-ui/react"
import type React from "react"
import { FaUserAstronaut } from "react-icons/fa"
import { FiLogOut, FiUser } from "react-icons/fi"
import useAuth from '../../hooks/useAuth'
import { Link } from '@tanstack/react-router'
import { Link } from "@tanstack/react-router"
import useAuth from "../../hooks/useAuth"
const UserMenu: React.FC = () => {
const { logout } = useAuth()
@@ -24,7 +24,7 @@ const UserMenu: React.FC = () => {
<>
{/* Desktop */}
<Box
display={{ base: 'none', md: 'block' }}
display={{ base: "none", md: "block" }}
position="fixed"
top={4}
right={4}

34
frontend/src/components/Items/AddItem.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Button,
FormControl,
@@ -12,12 +11,13 @@ import {
ModalFooter,
ModalHeader,
ModalOverlay,
} from '@chakra-ui/react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { useMutation, useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import type React from "react"
import { type SubmitHandler, useForm } from "react-hook-form"
import { useMutation, useQueryClient } from "react-query"
import { ApiError, ItemCreate, ItemsService } from '../../client'
import useCustomToast from '../../hooks/useCustomToast'
import { type ApiError, type ItemCreate, ItemsService } from "../../client"
import useCustomToast from "../../hooks/useCustomToast"
interface AddItemProps {
isOpen: boolean
@@ -33,11 +33,11 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
reset,
formState: { errors, isSubmitting },
} = useForm<ItemCreate>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
defaultValues: {
title: '',
description: '',
title: "",
description: "",
},
})
@@ -47,16 +47,16 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
const mutation = useMutation(addItem, {
onSuccess: () => {
showToast('Success!', 'Item created successfully.', 'success')
showToast("Success!", "Item created successfully.", "success")
reset()
onClose()
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
onSettled: () => {
queryClient.invalidateQueries('items')
queryClient.invalidateQueries("items")
},
})
@@ -69,7 +69,7 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
<Modal
isOpen={isOpen}
onClose={onClose}
size={{ base: 'sm', md: 'md' }}
size={{ base: "sm", md: "md" }}
isCentered
>
<ModalOverlay />
@@ -81,8 +81,8 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
<FormLabel htmlFor="title">Title</FormLabel>
<Input
id="title"
{...register('title', {
required: 'Title is required.',
{...register("title", {
required: "Title is required.",
})}
placeholder="Title"
type="text"
@@ -95,7 +95,7 @@ const AddItem: React.FC<AddItemProps> = ({ isOpen, onClose }) => {
<FormLabel htmlFor="description">Description</FormLabel>
<Input
id="description"
{...register('description')}
{...register("description")}
placeholder="Description"
type="text"
/>

35
frontend/src/components/Items/EditItem.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Button,
FormControl,
@@ -12,12 +11,18 @@ import {
ModalFooter,
ModalHeader,
ModalOverlay,
} from '@chakra-ui/react'
import { SubmitHandler, useForm } from 'react-hook-form'
} from "@chakra-ui/react"
import type React from "react"
import { type SubmitHandler, useForm } from "react-hook-form"
import { useMutation, useQueryClient } from 'react-query'
import { ApiError, ItemOut, ItemUpdate, ItemsService } from '../../client'
import useCustomToast from '../../hooks/useCustomToast'
import { useMutation, useQueryClient } from "react-query"
import {
type ApiError,
type ItemOut,
type ItemUpdate,
ItemsService,
} from "../../client"
import useCustomToast from "../../hooks/useCustomToast"
interface EditItemProps {
item: ItemOut
@@ -34,8 +39,8 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
reset,
formState: { isSubmitting, errors, isDirty },
} = useForm<ItemUpdate>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
defaultValues: item,
})
@@ -45,15 +50,15 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
const mutation = useMutation(updateItem, {
onSuccess: () => {
showToast('Success!', 'Item updated successfully.', 'success')
showToast("Success!", "Item updated successfully.", "success")
onClose()
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
onSettled: () => {
queryClient.invalidateQueries('items')
queryClient.invalidateQueries("items")
},
})
@@ -71,7 +76,7 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
<Modal
isOpen={isOpen}
onClose={onClose}
size={{ base: 'sm', md: 'md' }}
size={{ base: "sm", md: "md" }}
isCentered
>
<ModalOverlay />
@@ -83,8 +88,8 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
<FormLabel htmlFor="title">Title</FormLabel>
<Input
id="title"
{...register('title', {
required: 'Title is required',
{...register("title", {
required: "Title is required",
})}
type="text"
/>
@@ -96,7 +101,7 @@ const EditItem: React.FC<EditItemProps> = ({ item, isOpen, onClose }) => {
<FormLabel htmlFor="description">Description</FormLabel>
<Input
id="description"
{...register('description')}
{...register("description")}
placeholder="Description"
type="text"
/>

4
frontend/src/components/UserSettings/Appearance.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Badge,
Container,
@@ -7,7 +6,8 @@ import {
RadioGroup,
Stack,
useColorMode,
} from '@chakra-ui/react'
} from "@chakra-ui/react"
import type React from "react"
const Appearance: React.FC = () => {
const { colorMode, toggleColorMode } = useColorMode()

38
frontend/src/components/UserSettings/ChangePassword.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
Box,
Button,
@@ -9,19 +8,20 @@ import {
Heading,
Input,
useColorModeValue,
} from '@chakra-ui/react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { useMutation } from 'react-query'
} from "@chakra-ui/react"
import type React from "react"
import { type SubmitHandler, useForm } from "react-hook-form"
import { useMutation } from "react-query"
import { ApiError, UpdatePassword, UsersService } from '../../client'
import useCustomToast from '../../hooks/useCustomToast'
import { type ApiError, type UpdatePassword, UsersService } from "../../client"
import useCustomToast from "../../hooks/useCustomToast"
interface UpdatePasswordForm extends UpdatePassword {
confirm_password: string
}
const ChangePassword: React.FC = () => {
const color = useColorModeValue('inherit', 'ui.white')
const color = useColorModeValue("inherit", "ui.white")
const showToast = useCustomToast()
const {
register,
@@ -30,8 +30,8 @@ const ChangePassword: React.FC = () => {
getValues,
formState: { errors, isSubmitting },
} = useForm<UpdatePasswordForm>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
})
const UpdatePassword = async (data: UpdatePassword) => {
@@ -40,12 +40,12 @@ const ChangePassword: React.FC = () => {
const mutation = useMutation(UpdatePassword, {
onSuccess: () => {
showToast('Success!', 'Password updated.', 'success')
showToast("Success!", "Password updated.", "success")
reset()
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
})
@@ -59,14 +59,14 @@ const ChangePassword: React.FC = () => {
<Heading size="sm" py={4}>
Change Password
</Heading>
<Box w={{ sm: 'full', md: '50%' }}>
<Box w={{ sm: "full", md: "50%" }}>
<FormControl isRequired isInvalid={!!errors.current_password}>
<FormLabel color={color} htmlFor="current_password">
Current password
</FormLabel>
<Input
id="current_password"
{...register('current_password')}
{...register("current_password")}
placeholder="Password"
type="password"
/>
@@ -80,11 +80,11 @@ const ChangePassword: React.FC = () => {
<FormLabel htmlFor="password">Set Password</FormLabel>
<Input
id="password"
{...register('new_password', {
required: 'Password is required',
{...register("new_password", {
required: "Password is required",
minLength: {
value: 8,
message: 'Password must be at least 8 characters',
message: "Password must be at least 8 characters",
},
})}
placeholder="Password"
@@ -98,11 +98,11 @@ const ChangePassword: React.FC = () => {
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
<Input
id="confirm_password"
{...register('confirm_password', {
required: 'Please confirm your password',
{...register("confirm_password", {
required: "Please confirm your password",
validate: (value) =>
value === getValues().new_password ||
'The passwords do not match',
"The passwords do not match",
})}
placeholder="Password"
type="password"

6
frontend/src/components/UserSettings/DeleteAccount.tsx
View File

@@ -1,13 +1,13 @@
import React from 'react'
import {
Button,
Container,
Heading,
Text,
useDisclosure,
} from '@chakra-ui/react'
} from "@chakra-ui/react"
import type React from "react"
import DeleteConfirmation from './DeleteConfirmation'
import DeleteConfirmation from "./DeleteConfirmation"
const DeleteAccount: React.FC = () => {
const confirmationModal = useDisclosure()

30
frontend/src/components/UserSettings/DeleteConfirmation.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react'
import {
AlertDialog,
AlertDialogBody,
@@ -7,13 +6,14 @@ import {
AlertDialogHeader,
AlertDialogOverlay,
Button,
} from '@chakra-ui/react'
import { useForm } from 'react-hook-form'
import { useMutation, useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import React from "react"
import { useForm } from "react-hook-form"
import { useMutation, useQueryClient } from "react-query"
import { ApiError, UserOut, UsersService } from '../../client'
import useAuth from '../../hooks/useAuth'
import useCustomToast from '../../hooks/useCustomToast'
import { type ApiError, type UserOut, UsersService } from "../../client"
import useAuth from "../../hooks/useAuth"
import useCustomToast from "../../hooks/useCustomToast"
interface DeleteProps {
isOpen: boolean
@@ -28,7 +28,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
handleSubmit,
formState: { isSubmitting },
} = useForm()
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
const currentUser = queryClient.getQueryData<UserOut>("currentUser")
const { logout } = useAuth()
const deleteCurrentUser = async (id: number) => {
@@ -38,19 +38,19 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
const mutation = useMutation(deleteCurrentUser, {
onSuccess: () => {
showToast(
'Success',
'Your account has been successfully deleted.',
'success',
"Success",
"Your account has been successfully deleted.",
"success",
)
logout()
onClose()
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
onSettled: () => {
queryClient.invalidateQueries('currentUser')
queryClient.invalidateQueries("currentUser")
},
})
@@ -64,7 +64,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
isOpen={isOpen}
onClose={onClose}
leastDestructiveRef={cancelRef}
size={{ base: 'sm', md: 'md' }}
size={{ base: "sm", md: "md" }}
isCentered
>
<AlertDialogOverlay>
@@ -72,7 +72,7 @@ const DeleteConfirmation: React.FC<DeleteProps> = ({ isOpen, onClose }) => {
<AlertDialogHeader>Confirmation Required</AlertDialogHeader>
<AlertDialogBody>
All your account data will be{' '}
All your account data will be{" "}
<strong>permanently deleted.</strong> If you are sure, please
click <strong>"Confirm"</strong> to proceed. This action cannot be
undone.

54
frontend/src/components/UserSettings/UserInformation.tsx
View File

@@ -1,4 +1,3 @@
import React, { useState } from 'react'
import {
Box,
Button,
@@ -11,17 +10,24 @@ import {
Input,
Text,
useColorModeValue,
} from '@chakra-ui/react'
import { SubmitHandler, useForm } from 'react-hook-form'
import { useMutation, useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import type React from "react"
import { useState } from "react"
import { type SubmitHandler, useForm } from "react-hook-form"
import { useMutation, useQueryClient } from "react-query"
import { ApiError, UserOut, UserUpdateMe, UsersService } from '../../client'
import useAuth from '../../hooks/useAuth'
import useCustomToast from '../../hooks/useCustomToast'
import {
type ApiError,
type UserOut,
type UserUpdateMe,
UsersService,
} from "../../client"
import useAuth from "../../hooks/useAuth"
import useCustomToast from "../../hooks/useCustomToast"
const UserInformation: React.FC = () => {
const queryClient = useQueryClient()
const color = useColorModeValue('inherit', 'ui.white')
const color = useColorModeValue("inherit", "ui.white")
const showToast = useCustomToast()
const [editMode, setEditMode] = useState(false)
const { user: currentUser } = useAuth()
@@ -32,8 +38,8 @@ const UserInformation: React.FC = () => {
getValues,
formState: { isSubmitting, errors, isDirty },
} = useForm<UserOut>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
defaultValues: {
full_name: currentUser?.full_name,
email: currentUser?.email,
@@ -50,15 +56,15 @@ const UserInformation: React.FC = () => {
const mutation = useMutation(updateInfo, {
onSuccess: () => {
showToast('Success!', 'User updated successfully.', 'success')
showToast("Success!", "User updated successfully.", "success")
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
onSettled: () => {
queryClient.invalidateQueries('users')
queryClient.invalidateQueries('currentUser')
queryClient.invalidateQueries("users")
queryClient.invalidateQueries("currentUser")
},
})
@@ -77,7 +83,7 @@ const UserInformation: React.FC = () => {
<Heading size="sm" py={4}>
User Information
</Heading>
<Box w={{ sm: 'full', md: '50%' }}>
<Box w={{ sm: "full", md: "50%" }}>
<FormControl>
<FormLabel color={color} htmlFor="name">
Full name
@@ -85,7 +91,7 @@ const UserInformation: React.FC = () => {
{editMode ? (
<Input
id="name"
{...register('full_name', { maxLength: 30 })}
{...register("full_name", { maxLength: 30 })}
type="text"
size="md"
/>
@@ -93,9 +99,9 @@ const UserInformation: React.FC = () => {
<Text
size="md"
py={2}
color={!currentUser?.full_name ? 'gray.400' : 'inherit'}
color={!currentUser?.full_name ? "gray.400" : "inherit"}
>
{currentUser?.full_name || 'N/A'}
{currentUser?.full_name || "N/A"}
</Text>
)}
</FormControl>
@@ -106,11 +112,11 @@ const UserInformation: React.FC = () => {
{editMode ? (
<Input
id="email"
{...register('email', {
required: 'Email is required',
{...register("email", {
required: "Email is required",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: 'Invalid email address',
message: "Invalid email address",
},
})}
type="email"
@@ -129,11 +135,11 @@ const UserInformation: React.FC = () => {
<Button
variant="primary"
onClick={toggleEditMode}
type={editMode ? 'button' : 'submit'}
type={editMode ? "button" : "submit"}
isLoading={editMode ? isSubmitting : false}
isDisabled={editMode ? !isDirty || !getValues('email') : false}
isDisabled={editMode ? !isDirty || !getValues("email") : false}
>
{editMode ? 'Save' : 'Edit'}
{editMode ? "Save" : "Edit"}
</Button>
{editMode && (
<Button onClick={onCancel} isDisabled={isSubmitting}>

22
frontend/src/hooks/useAuth.ts
View File

@@ -1,21 +1,21 @@
import { useQuery } from 'react-query'
import { useNavigate } from '@tanstack/react-router'
import { useNavigate } from "@tanstack/react-router"
import { useQuery } from "react-query"
import {
Body_login_login_access_token as AccessToken,
type Body_login_login_access_token as AccessToken,
LoginService,
UserOut,
type UserOut,
UsersService,
} from '../client'
} from "../client"
const isLoggedIn = () => {
return localStorage.getItem('access_token') !== null
return localStorage.getItem("access_token") !== null
}
const useAuth = () => {
const navigate = useNavigate()
const { data: user, isLoading } = useQuery<UserOut | null, Error>(
'currentUser',
"currentUser",
UsersService.readUserMe,
{
enabled: isLoggedIn(),
@@ -26,13 +26,13 @@ const useAuth = () => {
const response = await LoginService.loginAccessToken({
formData: data,
})
localStorage.setItem('access_token', response.access_token)
navigate({ to: '/' })
localStorage.setItem("access_token", response.access_token)
navigate({ to: "/" })
}
const logout = () => {
localStorage.removeItem('access_token')
navigate({ to: '/login' })
localStorage.removeItem("access_token")
navigate({ to: "/login" })
}
return { login, logout, user, isLoading }

8
frontend/src/hooks/useCustomToast.ts
View File

@@ -1,17 +1,17 @@
import { useCallback } from 'react'
import { useToast } from '@chakra-ui/react'
import { useToast } from "@chakra-ui/react"
import { useCallback } from "react"
const useCustomToast = () => {
const toast = useToast()
const showToast = useCallback(
(title: string, description: string, status: 'success' | 'error') => {
(title: string, description: string, status: "success" | "error") => {
toast({
title,
description,
status,
isClosable: true,
position: 'bottom-right',
position: "bottom-right",
})
},
[toast],

22
frontend/src/main.tsx
View File

@@ -1,28 +1,28 @@
import ReactDOM from 'react-dom/client'
import { ChakraProvider } from '@chakra-ui/react'
import { QueryClient, QueryClientProvider } from 'react-query'
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
import { ChakraProvider } from "@chakra-ui/react"
import { RouterProvider, createRouter } from "@tanstack/react-router"
import ReactDOM from "react-dom/client"
import { QueryClient, QueryClientProvider } from "react-query"
import { routeTree } from "./routeTree.gen"
import { OpenAPI } from './client'
import theme from './theme'
import { StrictMode } from 'react'
import { StrictMode } from "react"
import { OpenAPI } from "./client"
import theme from "./theme"
OpenAPI.BASE = import.meta.env.VITE_API_URL
OpenAPI.TOKEN = async () => {
return localStorage.getItem('access_token') || ''
return localStorage.getItem("access_token") || ""
}
const queryClient = new QueryClient()
const router = createRouter({ routeTree })
declare module '@tanstack/react-router' {
declare module "@tanstack/react-router" {
interface Register {
router: typeof router
}
}
ReactDOM.createRoot(document.getElementById('root')!).render(
ReactDOM.createRoot(document.getElementById("root")!).render(
<StrictMode>
<ChakraProvider theme={theme}>
<QueryClientProvider client={queryClient}>

10
frontend/src/routes/__root.tsx
View File

@@ -1,13 +1,13 @@
import React, { Suspense } from 'react'
import { createRootRoute, Outlet } from '@tanstack/react-router'
import { Outlet, createRootRoute } from "@tanstack/react-router"
import React, { Suspense } from "react"
import NotFound from '../components/Common/NotFound'
import NotFound from "../components/Common/NotFound"
const TanStackRouterDevtools =
process.env.NODE_ENV === 'production'
process.env.NODE_ENV === "production"
? () => null
: React.lazy(() =>
import('@tanstack/router-devtools').then((res) => ({
import("@tanstack/router-devtools").then((res) => ({
default: res.TanStackRouterDevtools,
})),
)

14
frontend/src/routes/_layout.tsx
View File

@@ -1,16 +1,16 @@
import { Flex, Spinner } from '@chakra-ui/react'
import { Outlet, createFileRoute, redirect } from '@tanstack/react-router'
import { Flex, Spinner } from "@chakra-ui/react"
import { Outlet, createFileRoute, redirect } from "@tanstack/react-router"
import Sidebar from '../components/Common/Sidebar'
import UserMenu from '../components/Common/UserMenu'
import useAuth, { isLoggedIn } from '../hooks/useAuth'
import Sidebar from "../components/Common/Sidebar"
import UserMenu from "../components/Common/UserMenu"
import useAuth, { isLoggedIn } from "../hooks/useAuth"
export const Route = createFileRoute('/_layout')({
export const Route = createFileRoute("/_layout")({
component: Layout,
beforeLoad: async () => {
if (!isLoggedIn()) {
throw redirect({
to: '/login',
to: "/login",
})
}
},

38
frontend/src/routes/_layout/admin.tsx
View File

@@ -12,33 +12,33 @@ import {
Th,
Thead,
Tr,
} from '@chakra-ui/react'
import { createFileRoute } from '@tanstack/react-router'
import { useQuery, useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"
import { useQuery, useQueryClient } from "react-query"
import { ApiError, UserOut, UsersService } from '../../client'
import ActionsMenu from '../../components/Common/ActionsMenu'
import Navbar from '../../components/Common/Navbar'
import useCustomToast from '../../hooks/useCustomToast'
import { type ApiError, type UserOut, UsersService } from "../../client"
import ActionsMenu from "../../components/Common/ActionsMenu"
import Navbar from "../../components/Common/Navbar"
import useCustomToast from "../../hooks/useCustomToast"
export const Route = createFileRoute('/_layout/admin')({
export const Route = createFileRoute("/_layout/admin")({
component: Admin,
})
function Admin() {
const queryClient = useQueryClient()
const showToast = useCustomToast()
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
const currentUser = queryClient.getQueryData<UserOut>("currentUser")
const {
data: users,
isLoading,
isError,
error,
} = useQuery('users', () => UsersService.readUsers({}))
} = useQuery("users", () => UsersService.readUsers({}))
if (isError) {
const errDetail = (error as ApiError).body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
}
return (
@@ -53,14 +53,14 @@ function Admin() {
<Container maxW="full">
<Heading
size="lg"
textAlign={{ base: 'center', md: 'left' }}
textAlign={{ base: "center", md: "left" }}
pt={12}
>
User Management
</Heading>
<Navbar type={'User'} />
<Navbar type={"User"} />
<TableContainer>
<Table fontSize="md" size={{ base: 'sm', md: 'md' }}>
<Table fontSize="md" size={{ base: "sm", md: "md" }}>
<Thead>
<Tr>
<Th>Full name</Th>
@@ -73,8 +73,8 @@ function Admin() {
<Tbody>
{users.data.map((user) => (
<Tr key={user.id}>
<Td color={!user.full_name ? 'gray.400' : 'inherit'}>
{user.full_name || 'N/A'}
<Td color={!user.full_name ? "gray.400" : "inherit"}>
{user.full_name || "N/A"}
{currentUser?.id === user.id && (
<Badge ml="1" colorScheme="teal">
You
@@ -82,17 +82,17 @@ function Admin() {
)}
</Td>
<Td>{user.email}</Td>
<Td>{user.is_superuser ? 'Superuser' : 'User'}</Td>
<Td>{user.is_superuser ? "Superuser" : "User"}</Td>
<Td>
<Flex gap={2}>
<Box
w="2"
h="2"
borderRadius="50%"
bg={user.is_active ? 'ui.success' : 'ui.danger'}
bg={user.is_active ? "ui.success" : "ui.danger"}
alignSelf="center"
/>
{user.is_active ? 'Active' : 'Inactive'}
{user.is_active ? "Active" : "Inactive"}
</Flex>
</Td>
<Td>

12
frontend/src/routes/_layout/index.tsx
View File

@@ -1,17 +1,17 @@
import { Box, Container, Text } from '@chakra-ui/react'
import { useQueryClient } from 'react-query'
import { createFileRoute } from '@tanstack/react-router'
import { Box, Container, Text } from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"
import { useQueryClient } from "react-query"
import { UserOut } from '../../client'
import type { UserOut } from "../../client"
export const Route = createFileRoute('/_layout/')({
export const Route = createFileRoute("/_layout/")({
component: Dashboard,
})
function Dashboard() {
const queryClient = useQueryClient()
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
const currentUser = queryClient.getQueryData<UserOut>("currentUser")
return (
<>

32
frontend/src/routes/_layout/items.tsx
View File

@@ -10,16 +10,16 @@ import {
Th,
Thead,
Tr,
} from '@chakra-ui/react'
import { createFileRoute } from '@tanstack/react-router'
import { useQuery } from 'react-query'
} from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"
import { useQuery } from "react-query"
import { ApiError, ItemsService } from '../../client'
import ActionsMenu from '../../components/Common/ActionsMenu'
import Navbar from '../../components/Common/Navbar'
import useCustomToast from '../../hooks/useCustomToast'
import { type ApiError, ItemsService } from "../../client"
import ActionsMenu from "../../components/Common/ActionsMenu"
import Navbar from "../../components/Common/Navbar"
import useCustomToast from "../../hooks/useCustomToast"
export const Route = createFileRoute('/_layout/items')({
export const Route = createFileRoute("/_layout/items")({
component: Items,
})
@@ -30,11 +30,11 @@ function Items() {
isLoading,
isError,
error,
} = useQuery('items', () => ItemsService.readItems({}))
} = useQuery("items", () => ItemsService.readItems({}))
if (isError) {
const errDetail = (error as ApiError).body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
}
return (
@@ -49,14 +49,14 @@ function Items() {
<Container maxW="full">
<Heading
size="lg"
textAlign={{ base: 'center', md: 'left' }}
textAlign={{ base: "center", md: "left" }}
pt={12}
>
Items Management
</Heading>
<Navbar type={'Item'} />
<Navbar type={"Item"} />
<TableContainer>
<Table size={{ base: 'sm', md: 'md' }}>
<Table size={{ base: "sm", md: "md" }}>
<Thead>
<Tr>
<Th>ID</Th>
@@ -70,11 +70,11 @@ function Items() {
<Tr key={item.id}>
<Td>{item.id}</Td>
<Td>{item.title}</Td>
<Td color={!item.description ? 'gray.400' : 'inherit'}>
{item.description || 'N/A'}
<Td color={!item.description ? "gray.400" : "inherit"}>
{item.description || "N/A"}
</Td>
<Td>
<ActionsMenu type={'Item'} value={item} />
<ActionsMenu type={"Item"} value={item} />
</Td>
</Tr>
))}

30
frontend/src/routes/_layout/settings.tsx
View File

@@ -6,37 +6,37 @@ import {
TabPanel,
TabPanels,
Tabs,
} from '@chakra-ui/react'
import { createFileRoute } from '@tanstack/react-router'
import { useQueryClient } from 'react-query'
} from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"
import { useQueryClient } from "react-query"
import { UserOut } from '../../client'
import Appearance from '../../components/UserSettings/Appearance'
import ChangePassword from '../../components/UserSettings/ChangePassword'
import DeleteAccount from '../../components/UserSettings/DeleteAccount'
import UserInformation from '../../components/UserSettings/UserInformation'
import type { UserOut } from "../../client"
import Appearance from "../../components/UserSettings/Appearance"
import ChangePassword from "../../components/UserSettings/ChangePassword"
import DeleteAccount from "../../components/UserSettings/DeleteAccount"
import UserInformation from "../../components/UserSettings/UserInformation"
const tabsConfig = [
{ title: 'My profile', component: UserInformation },
{ title: 'Password', component: ChangePassword },
{ title: 'Appearance', component: Appearance },
{ title: 'Danger zone', component: DeleteAccount },
{ title: "My profile", component: UserInformation },
{ title: "Password", component: ChangePassword },
{ title: "Appearance", component: Appearance },
{ title: "Danger zone", component: DeleteAccount },
]
export const Route = createFileRoute('/_layout/settings')({
export const Route = createFileRoute("/_layout/settings")({
component: UserSettings,
})
function UserSettings() {
const queryClient = useQueryClient()
const currentUser = queryClient.getQueryData<UserOut>('currentUser')
const currentUser = queryClient.getQueryData<UserOut>("currentUser")
const finalTabs = currentUser?.is_superuser
? tabsConfig.slice(0, 3)
: tabsConfig
return (
<Container maxW="full">
<Heading size="lg" textAlign={{ base: 'center', md: 'left' }} py={12}>
<Heading size="lg" textAlign={{ base: "center", md: "left" }} py={12}>
User Settings
</Heading>
<Tabs variant="enclosed">

42
frontend/src/routes/login.tsx
View File

@@ -1,5 +1,4 @@
import React from 'react'
import { ViewIcon, ViewOffIcon } from '@chakra-ui/icons'
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons"
import {
Button,
Center,
@@ -13,25 +12,26 @@ import {
InputRightElement,
Link,
useBoolean,
} from '@chakra-ui/react'
} from "@chakra-ui/react"
import {
Link as RouterLink,
createFileRoute,
redirect,
} from '@tanstack/react-router'
import { SubmitHandler, useForm } from 'react-hook-form'
} from "@tanstack/react-router"
import React from "react"
import { type SubmitHandler, useForm } from "react-hook-form"
import Logo from '../assets/images/fastapi-logo.svg'
import { ApiError } from '../client'
import { Body_login_login_access_token as AccessToken } from '../client/models/Body_login_login_access_token'
import useAuth, { isLoggedIn } from '../hooks/useAuth'
import Logo from "../assets/images/fastapi-logo.svg"
import type { ApiError } from "../client"
import type { Body_login_login_access_token as AccessToken } from "../client/models/Body_login_login_access_token"
import useAuth, { isLoggedIn } from "../hooks/useAuth"
export const Route = createFileRoute('/login')({
export const Route = createFileRoute("/login")({
component: Login,
beforeLoad: async () => {
if (isLoggedIn()) {
throw redirect({
to: '/',
to: "/",
})
}
},
@@ -46,11 +46,11 @@ function Login() {
handleSubmit,
formState: { errors, isSubmitting },
} = useForm<AccessToken>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
defaultValues: {
username: '',
password: '',
username: "",
password: "",
},
})
@@ -86,10 +86,10 @@ function Login() {
<FormControl id="username" isInvalid={!!errors.username || !!error}>
<Input
id="username"
{...register('username', {
{...register("username", {
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: 'Invalid email address',
message: "Invalid email address",
},
})}
placeholder="Email"
@@ -102,19 +102,19 @@ function Login() {
<FormControl id="password" isInvalid={!!error}>
<InputGroup>
<Input
{...register('password')}
type={show ? 'text' : 'password'}
{...register("password")}
type={show ? "text" : "password"}
placeholder="Password"
/>
<InputRightElement
color="gray.400"
_hover={{
cursor: 'pointer',
cursor: "pointer",
}}
>
<Icon
onClick={setShow.toggle}
aria-label={show ? 'Hide password' : 'Show password'}
aria-label={show ? "Hide password" : "Show password"}
>
{show ? <ViewOffIcon /> : <ViewIcon />}
</Icon>

28
frontend/src/routes/recover-password.tsx
View File

@@ -6,24 +6,24 @@ import {
Heading,
Input,
Text,
} from '@chakra-ui/react'
import { createFileRoute, redirect } from '@tanstack/react-router'
import { SubmitHandler, useForm } from 'react-hook-form'
} from "@chakra-ui/react"
import { createFileRoute, redirect } from "@tanstack/react-router"
import { type SubmitHandler, useForm } from "react-hook-form"
import { LoginService } from '../client'
import useCustomToast from '../hooks/useCustomToast'
import { isLoggedIn } from '../hooks/useAuth'
import { LoginService } from "../client"
import { isLoggedIn } from "../hooks/useAuth"
import useCustomToast from "../hooks/useCustomToast"
interface FormData {
email: string
}
export const Route = createFileRoute('/recover-password')({
export const Route = createFileRoute("/recover-password")({
component: RecoverPassword,
beforeLoad: async () => {
if (isLoggedIn()) {
throw redirect({
to: '/',
to: "/",
})
}
},
@@ -42,9 +42,9 @@ function RecoverPassword() {
email: data.email,
})
showToast(
'Email sent.',
'We sent an email with a link to get back into your account.',
'success',
"Email sent.",
"We sent an email with a link to get back into your account.",
"success",
)
}
@@ -68,11 +68,11 @@ function RecoverPassword() {
<FormControl isInvalid={!!errors.email}>
<Input
id="email"
{...register('email', {
required: 'Email is required',
{...register("email", {
required: "Email is required",
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: 'Invalid email address',
message: "Invalid email address",
},
})}
placeholder="Email"

44
frontend/src/routes/reset-password.tsx
View File

@@ -7,25 +7,25 @@ import {
Heading,
Input,
Text,
} from '@chakra-ui/react'
import { createFileRoute, redirect, useNavigate } from '@tanstack/react-router'
import { SubmitHandler, useForm } from 'react-hook-form'
import { useMutation } from 'react-query'
} from "@chakra-ui/react"
import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router"
import { type SubmitHandler, useForm } from "react-hook-form"
import { useMutation } from "react-query"
import { ApiError, LoginService, NewPassword } from '../client'
import { isLoggedIn } from '../hooks/useAuth'
import useCustomToast from '../hooks/useCustomToast'
import { type ApiError, LoginService, type NewPassword } from "../client"
import { isLoggedIn } from "../hooks/useAuth"
import useCustomToast from "../hooks/useCustomToast"
interface NewPasswordForm extends NewPassword {
confirm_password: string
}
export const Route = createFileRoute('/reset-password')({
export const Route = createFileRoute("/reset-password")({
component: ResetPassword,
beforeLoad: async () => {
if (isLoggedIn()) {
throw redirect({
to: '/',
to: "/",
})
}
},
@@ -39,17 +39,17 @@ function ResetPassword() {
reset,
formState: { errors },
} = useForm<NewPasswordForm>({
mode: 'onBlur',
criteriaMode: 'all',
mode: "onBlur",
criteriaMode: "all",
defaultValues: {
new_password: '',
new_password: "",
},
})
const showToast = useCustomToast()
const navigate = useNavigate()
const resetPassword = async (data: NewPassword) => {
const token = new URLSearchParams(window.location.search).get('token')
const token = new URLSearchParams(window.location.search).get("token")
if (!token) return
await LoginService.resetPassword({
requestBody: { new_password: data.new_password, token: token },
@@ -58,13 +58,13 @@ function ResetPassword() {
const mutation = useMutation(resetPassword, {
onSuccess: () => {
showToast('Success!', 'Password updated.', 'success')
showToast("Success!", "Password updated.", "success")
reset()
navigate({ to: '/login' })
navigate({ to: "/login" })
},
onError: (err: ApiError) => {
const errDetail = err.body?.detail
showToast('Something went wrong.', `${errDetail}`, 'error')
showToast("Something went wrong.", `${errDetail}`, "error")
},
})
@@ -93,11 +93,11 @@ function ResetPassword() {
<FormLabel htmlFor="password">Set Password</FormLabel>
<Input
id="password"
{...register('new_password', {
required: 'Password is required',
{...register("new_password", {
required: "Password is required",
minLength: {
value: 8,
message: 'Password must be at least 8 characters',
message: "Password must be at least 8 characters",
},
})}
placeholder="Password"
@@ -111,11 +111,11 @@ function ResetPassword() {
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
<Input
id="confirm_password"
{...register('confirm_password', {
required: 'Please confirm your password',
{...register("confirm_password", {
required: "Please confirm your password",
validate: (value) =>
value === getValues().new_password ||
'The passwords do not match',
"The passwords do not match",
})}
placeholder="Password"
type="password"

32
frontend/src/theme.tsx
View File

@@ -1,31 +1,31 @@
import { extendTheme } from '@chakra-ui/react'
import { extendTheme } from "@chakra-ui/react"
const disabledStyles = {
_disabled: {
backgroundColor: 'ui.main',
backgroundColor: "ui.main",
},
}
const theme = extendTheme({
colors: {
ui: {
main: '#009688',
secondary: '#EDF2F7',
success: '#48BB78',
danger: '#E53E3E',
white: '#FFFFFF',
dark: '#1A202C',
darkSlate: '#252D3D',
main: "#009688",
secondary: "#EDF2F7",
success: "#48BB78",
danger: "#E53E3E",
white: "#FFFFFF",
dark: "#1A202C",
darkSlate: "#252D3D",
},
},
components: {
Button: {
variants: {
primary: {
backgroundColor: 'ui.main',
color: 'ui.white',
backgroundColor: "ui.main",
color: "ui.white",
_hover: {
backgroundColor: '#00766C',
backgroundColor: "#00766C",
},
_disabled: {
...disabledStyles,
@@ -35,10 +35,10 @@ const theme = extendTheme({
},
},
danger: {
backgroundColor: 'ui.danger',
color: 'ui.white',
backgroundColor: "ui.danger",
color: "ui.white",
_hover: {
backgroundColor: '#E32727',
backgroundColor: "#E32727",
},
},
},
@@ -48,7 +48,7 @@ const theme = extendTheme({
enclosed: {
tab: {
_selected: {
color: 'ui.main',
color: "ui.main",
},
},
},

6
frontend/vite.config.ts
View File

@@ -1,6 +1,6 @@
import react from '@vitejs/plugin-react-swc'
import { TanStackRouterVite } from '@tanstack/router-vite-plugin'
import { defineConfig } from 'vite'
import { TanStackRouterVite } from "@tanstack/router-vite-plugin"
import react from "@vitejs/plugin-react-swc"
import { defineConfig } from "vite"
// https://vitejs.dev/config/
export default defineConfig({