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

🛂 Migrate to Chakra UI v3 (#1496)

Browse Source 
Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alejandra
2025-02-17 19:33:00 +00:00
committed by GitHub
parent 74e2604faf
commit 55df823739
60 changed files with 4682 additions and 4399 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,9 +1,9 @@
import { Flex, Spinner } from "@chakra-ui/react"
import { Flex } from "@chakra-ui/react"
import { Outlet, createFileRoute, redirect } from "@tanstack/react-router"
import Navbar from "../components/Common/Navbar"
import Sidebar from "../components/Common/Sidebar"
import UserMenu from "../components/Common/UserMenu"
import useAuth, { isLoggedIn } from "../hooks/useAuth"
import { isLoggedIn } from "../hooks/useAuth"
export const Route = createFileRoute("/_layout")({
component: Layout,
@@ -17,19 +17,17 @@ export const Route = createFileRoute("/_layout")({
})
function Layout() {
const { isLoading } = useAuth()
return (
<Flex maxW="large" h="auto" position="relative">
<Sidebar />
{isLoading ? (
<Flex justify="center" align="center" height="100vh" width="full">
<Spinner size="xl" color="ui.main" />
<Flex direction="column" h="100vh">
<Navbar />
<Flex flex="1" overflow="hidden">
<Sidebar />
<Flex flex="1" direction="column" p={4} overflowY="auto">
<Outlet />
</Flex>
) : (
<Outlet />
)}
<UserMenu />
</Flex>
</Flex>
)
}
export default Layout

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

@@ -1,38 +1,23 @@
import {
Badge,
Box,
Container,
Flex,
Heading,
SkeletonText,
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
} from "@chakra-ui/react"
import { Badge, Container, Flex, Heading, Table } from "@chakra-ui/react"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { createFileRoute, useNavigate } from "@tanstack/react-router"
import { useEffect } from "react"
import { z } from "zod"
import { type UserPublic, UsersService } from "../../client"
import AddUser from "../../components/Admin/AddUser"
import ActionsMenu from "../../components/Common/ActionsMenu"
import Navbar from "../../components/Common/Navbar"
import { PaginationFooter } from "../../components/Common/PaginationFooter.tsx"
import { UserActionsMenu } from "../../components/Common/UserActionsMenu"
import PendingUsers from "../../components/Pending/PendingUsers"
import {
PaginationItems,
PaginationNextTrigger,
PaginationPrevTrigger,
PaginationRoot,
} from "../../components/ui/pagination.tsx"
const usersSearchSchema = z.object({
page: z.number().catch(1),
})
export const Route = createFileRoute("/_layout/admin")({
component: Admin,
validateSearch: (search) => usersSearchSchema.parse(search),
})
const PER_PAGE = 5
function getUsersQueryOptions({ page }: { page: number }) {
@@ -43,106 +28,87 @@ function getUsersQueryOptions({ page }: { page: number }) {
}
}
export const Route = createFileRoute("/_layout/admin")({
component: Admin,
validateSearch: (search) => usersSearchSchema.parse(search),
})
function UsersTable() {
const queryClient = useQueryClient()
const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
const { page } = Route.useSearch()
const navigate = useNavigate({ from: Route.fullPath })
const setPage = (page: number) =>
navigate({ search: (prev: {[key: string]: string}) => ({ ...prev, page }) })
const { page } = Route.useSearch()
const {
data: users,
isPending,
isPlaceholderData,
} = useQuery({
const { data, isLoading, isPlaceholderData } = useQuery({
...getUsersQueryOptions({ page }),
placeholderData: (prevData) => prevData,
})
const hasNextPage = !isPlaceholderData && users?.data.length === PER_PAGE
const hasPreviousPage = page > 1
const setPage = (page: number) =>
navigate({
search: (prev: { [key: string]: string }) => ({ ...prev, page }),
})
useEffect(() => {
if (hasNextPage) {
queryClient.prefetchQuery(getUsersQueryOptions({ page: page + 1 }))
}
}, [page, queryClient, hasNextPage])
const users = data?.data.slice(0, PER_PAGE) ?? []
const count = data?.count ?? 0
if (isLoading) {
return <PendingUsers />
}
return (
<>
<TableContainer>
<Table size={{ base: "sm", md: "md" }}>
<Thead>
<Tr>
<Th width="20%">Full name</Th>
<Th width="50%">Email</Th>
<Th width="10%">Role</Th>
<Th width="10%">Status</Th>
<Th width="10%">Actions</Th>
</Tr>
</Thead>
{isPending ? (
<Tbody>
<Tr>
{new Array(4).fill(null).map((_, index) => (
<Td key={index}>
<SkeletonText noOfLines={1} paddingBlock="16px" />
</Td>
))}
</Tr>
</Tbody>
) : (
<Tbody>
{users?.data.map((user) => (
<Tr key={user.id}>
<Td
color={!user.full_name ? "ui.dim" : "inherit"}
isTruncated
maxWidth="150px"
>
{user.full_name || "N/A"}
{currentUser?.id === user.id && (
<Badge ml="1" colorScheme="teal">
You
</Badge>
)}
</Td>
<Td isTruncated maxWidth="150px">
{user.email}
</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"}
alignSelf="center"
/>
{user.is_active ? "Active" : "Inactive"}
</Flex>
</Td>
<Td>
<ActionsMenu
type="User"
value={user}
disabled={currentUser?.id === user.id}
/>
</Td>
</Tr>
))}
</Tbody>
)}
</Table>
</TableContainer>
<PaginationFooter
onChangePage={setPage}
page={page}
hasNextPage={hasNextPage}
hasPreviousPage={hasPreviousPage}
/>
<Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header>
<Table.Row>
<Table.ColumnHeader w="20%">Full name</Table.ColumnHeader>
<Table.ColumnHeader w="25%">Email</Table.ColumnHeader>
<Table.ColumnHeader w="15%">Role</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Status</Table.ColumnHeader>
<Table.ColumnHeader w="20%">Actions</Table.ColumnHeader>
</Table.Row>
</Table.Header>
<Table.Body>
{users?.map((user) => (
<Table.Row key={user.id} opacity={isPlaceholderData ? 0.5 : 1}>
<Table.Cell w="20%" color={!user.full_name ? "gray" : "inherit"}>
{user.full_name || "N/A"}
{currentUser?.id === user.id && (
<Badge ml="1" colorScheme="teal">
You
</Badge>
)}
</Table.Cell>
<Table.Cell w="25%">{user.email}</Table.Cell>
<Table.Cell w="15%">
{user.is_superuser ? "Superuser" : "User"}
</Table.Cell>
<Table.Cell w="20%">
{user.is_active ? "Active" : "Inactive"}
</Table.Cell>
<Table.Cell w="20%">
<UserActionsMenu
user={user}
disabled={currentUser?.id === user.id}
/>
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Flex justifyContent="flex-end" mt={4}>
<PaginationRoot
count={count}
pageSize={PER_PAGE}
onPageChange={({ page }) => setPage(page)}
>
<Flex>
<PaginationPrevTrigger />
<PaginationItems />
<PaginationNextTrigger />
</Flex>
</PaginationRoot>
</Flex>
</>
)
}
@@ -150,11 +116,11 @@ function UsersTable() {
function Admin() {
return (
<Container maxW="full">
<Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
<Heading size="lg" pt={12}>
Users Management
</Heading>
<Navbar type={"User"} addModalAs={AddUser} />
<AddUser />
<UsersTable />
</Container>
)

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

@@ -1,35 +1,31 @@
import {
Container,
EmptyState,
Flex,
Heading,
SkeletonText,
Table,
TableContainer,
Tbody,
Td,
Th,
Thead,
Tr,
VStack,
} from "@chakra-ui/react"
import { useQuery, useQueryClient } from "@tanstack/react-query"
import { createFileRoute, useNavigate } from "@tanstack/react-router"
import { useEffect } from "react"
import { FiSearch } from "react-icons/fi"
import { z } from "zod"
import { useQuery } from "@tanstack/react-query"
import { ItemsService } from "../../client"
import ActionsMenu from "../../components/Common/ActionsMenu"
import Navbar from "../../components/Common/Navbar"
import { ItemActionsMenu } from "../../components/Common/ItemActionsMenu"
import AddItem from "../../components/Items/AddItem"
import { PaginationFooter } from "../../components/Common/PaginationFooter.tsx"
import PendingItems from "../../components/Pending/PendingItems"
import {
PaginationItems,
PaginationNextTrigger,
PaginationPrevTrigger,
PaginationRoot,
} from "../../components/ui/pagination.tsx"
const itemsSearchSchema = z.object({
page: z.number().catch(1),
})
export const Route = createFileRoute("/_layout/items")({
component: Items,
validateSearch: (search) => itemsSearchSchema.parse(search),
})
const PER_PAGE = 5
function getItemsQueryOptions({ page }: { page: number }) {
@@ -40,83 +36,97 @@ function getItemsQueryOptions({ page }: { page: number }) {
}
}
function ItemsTable() {
const queryClient = useQueryClient()
const { page } = Route.useSearch()
const navigate = useNavigate({ from: Route.fullPath })
const setPage = (page: number) =>
navigate({ search: (prev: {[key: string]: string}) => ({ ...prev, page }) })
export const Route = createFileRoute("/_layout/items")({
component: Items,
validateSearch: (search) => itemsSearchSchema.parse(search),
})
const {
data: items,
isPending,
isPlaceholderData,
} = useQuery({
function ItemsTable() {
const navigate = useNavigate({ from: Route.fullPath })
const { page } = Route.useSearch()
const { data, isLoading, isPlaceholderData } = useQuery({
...getItemsQueryOptions({ page }),
placeholderData: (prevData) => prevData,
})
const hasNextPage = !isPlaceholderData && items?.data.length === PER_PAGE
const hasPreviousPage = page > 1
const setPage = (page: number) =>
navigate({
search: (prev: { [key: string]: string }) => ({ ...prev, page }),
})
useEffect(() => {
if (hasNextPage) {
queryClient.prefetchQuery(getItemsQueryOptions({ page: page + 1 }))
}
}, [page, queryClient, hasNextPage])
const items = data?.data.slice(0, PER_PAGE) ?? []
const count = data?.count ?? 0
if (isLoading) {
return <PendingItems />
}
if (items.length === 0) {
return (
<EmptyState.Root>
<EmptyState.Content>
<EmptyState.Indicator>
<FiSearch />
</EmptyState.Indicator>
<VStack textAlign="center">
<EmptyState.Title>You don't have any items yet</EmptyState.Title>
<EmptyState.Description>
Add a new item to get started
</EmptyState.Description>
</VStack>
</EmptyState.Content>
</EmptyState.Root>
)
}
return (
<>
<TableContainer>
<Table size={{ base: "sm", md: "md" }}>
<Thead>
<Tr>
<Th>ID</Th>
<Th>Title</Th>
<Th>Description</Th>
<Th>Actions</Th>
</Tr>
</Thead>
{isPending ? (
<Tbody>
<Tr>
{new Array(4).fill(null).map((_, index) => (
<Td key={index}>
<SkeletonText noOfLines={1} paddingBlock="16px" />
</Td>
))}
</Tr>
</Tbody>
) : (
<Tbody>
{items?.data.map((item) => (
<Tr key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
<Td>{item.id}</Td>
<Td isTruncated maxWidth="150px">
{item.title}
</Td>
<Td
color={!item.description ? "ui.dim" : "inherit"}
isTruncated
maxWidth="150px"
>
{item.description || "N/A"}
</Td>
<Td>
<ActionsMenu type={"Item"} value={item} />
</Td>
</Tr>
))}
</Tbody>
)}
</Table>
</TableContainer>
<PaginationFooter
page={page}
onChangePage={setPage}
hasNextPage={hasNextPage}
hasPreviousPage={hasPreviousPage}
/>
<Table.Root size={{ base: "sm", md: "md" }}>
<Table.Header>
<Table.Row>
<Table.ColumnHeader w="30%">ID</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Title</Table.ColumnHeader>
<Table.ColumnHeader w="30%">Description</Table.ColumnHeader>
<Table.ColumnHeader w="10%">Actions</Table.ColumnHeader>
</Table.Row>
</Table.Header>
<Table.Body>
{items?.map((item) => (
<Table.Row key={item.id} opacity={isPlaceholderData ? 0.5 : 1}>
<Table.Cell truncate maxW="30%">
{item.id}
</Table.Cell>
<Table.Cell truncate maxW="30%">
{item.title}
</Table.Cell>
<Table.Cell
color={!item.description ? "gray" : "inherit"}
truncate
maxW="30%"
>
{item.description || "N/A"}
</Table.Cell>
<Table.Cell width="10%">
<ItemActionsMenu item={item} />
</Table.Cell>
</Table.Row>
))}
</Table.Body>
</Table.Root>
<Flex justifyContent="flex-end" mt={4}>
<PaginationRoot
count={count}
pageSize={PER_PAGE}
onPageChange={({ page }) => setPage(page)}
>
<Flex>
<PaginationPrevTrigger />
<PaginationItems />
<PaginationNextTrigger />
</Flex>
</PaginationRoot>
</Flex>
</>
)
}
@@ -124,11 +134,10 @@ function ItemsTable() {
function Items() {
return (
<Container maxW="full">
<Heading size="lg" textAlign={{ base: "center", md: "left" }} pt={12}>
<Heading size="lg" pt={12}>
Items Management
</Heading>
<Navbar type={"Item"} addModalAs={AddItem} />
<AddItem />
<ItemsTable />
</Container>
)

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

@@ -1,26 +1,17 @@
import {
Container,
Heading,
Tab,
TabList,
TabPanel,
TabPanels,
Tabs,
} from "@chakra-ui/react"
import { useQueryClient } from "@tanstack/react-query"
import { Container, Heading, Tabs } from "@chakra-ui/react"
import { createFileRoute } from "@tanstack/react-router"
import type { UserPublic } 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 useAuth from "../../hooks/useAuth"
const tabsConfig = [
{ title: "My profile", component: UserInformation },
{ title: "Password", component: ChangePassword },
{ title: "Appearance", component: Appearance },
{ title: "Danger zone", component: DeleteAccount },
{ value: "my-profile", title: "My profile", component: UserInformation },
{ value: "password", title: "Password", component: ChangePassword },
{ value: "appearance", title: "Appearance", component: Appearance },
{ value: "danger-zone", title: "Danger zone", component: DeleteAccount },
]
export const Route = createFileRoute("/_layout/settings")({
@@ -28,31 +19,35 @@ export const Route = createFileRoute("/_layout/settings")({
})
function UserSettings() {
const queryClient = useQueryClient()
const currentUser = queryClient.getQueryData<UserPublic>(["currentUser"])
const { user: currentUser } = useAuth()
const finalTabs = currentUser?.is_superuser
? tabsConfig.slice(0, 3)
: tabsConfig
if (!currentUser) {
return null
}
return (
<Container maxW="full">
<Heading size="lg" textAlign={{ base: "center", md: "left" }} py={12}>
User Settings
</Heading>
<Tabs variant="enclosed">
<TabList>
{finalTabs.map((tab, index) => (
<Tab key={index}>{tab.title}</Tab>
<Tabs.Root defaultValue="my-profile" variant="subtle">
<Tabs.List>
{finalTabs.map((tab) => (
<Tabs.Trigger key={tab.value} value={tab.value}>
{tab.title}
</Tabs.Trigger>
))}
</TabList>
<TabPanels>
{finalTabs.map((tab, index) => (
<TabPanel key={index}>
<tab.component />
</TabPanel>
))}
</TabPanels>
</Tabs>
</Tabs.List>
{finalTabs.map((tab) => (
<Tabs.Content key={tab.value} value={tab.value}>
<tab.component />
</Tabs.Content>
))}
</Tabs.Root>
</Container>
)
}

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

@@ -1,18 +1,4 @@
import { ViewIcon, ViewOffIcon } from "@chakra-ui/icons"
import {
Button,
Container,
FormControl,
FormErrorMessage,
Icon,
Image,
Input,
InputGroup,
InputRightElement,
Link,
Text,
useBoolean,
} from "@chakra-ui/react"
import { Container, Image, Input, Text } from "@chakra-ui/react"
import {
Link as RouterLink,
createFileRoute,
@@ -20,10 +6,15 @@ import {
} from "@tanstack/react-router"
import { type SubmitHandler, useForm } from "react-hook-form"
import { FiLock, FiMail } from "react-icons/fi"
import Logo from "/assets/images/fastapi-logo.svg"
import type { Body_login_login_access_token as AccessToken } from "../client"
import { Button } from "../components/ui/button"
import { Field } from "../components/ui/field"
import { InputGroup } from "../components/ui/input-group"
import { PasswordInput } from "../components/ui/password-input"
import useAuth, { isLoggedIn } from "../hooks/useAuth"
import { emailPattern } from "../utils"
import { emailPattern, passwordRules } from "../utils"
export const Route = createFileRoute("/login")({
component: Login,
@@ -37,7 +28,6 @@ export const Route = createFileRoute("/login")({
})
function Login() {
const [show, setShow] = useBoolean()
const { loginMutation, error, resetError } = useAuth()
const {
register,
@@ -84,59 +74,40 @@ function Login() {
alignSelf="center"
mb={4}
/>
<FormControl id="username" isInvalid={!!errors.username || !!error}>
<Input
id="username"
{...register("username", {
required: "Username is required",
pattern: emailPattern,
})}
placeholder="Email"
type="email"
required
/>
{errors.username && (
<FormErrorMessage>{errors.username.message}</FormErrorMessage>
)}
</FormControl>
<FormControl id="password" isInvalid={!!error}>
<InputGroup>
<Field
invalid={!!errors.username}
errorText={errors.username?.message || !!error}
>
<InputGroup w="100%" startElement={<FiMail />}>
<Input
{...register("password", {
required: "Password is required",
id="username"
{...register("username", {
required: "Username is required",
pattern: emailPattern,
})}
type={show ? "text" : "password"}
placeholder="Password"
required
placeholder="Email"
type="email"
/>
<InputRightElement
color="ui.dim"
_hover={{
cursor: "pointer",
}}
>
<Icon
as={show ? ViewOffIcon : ViewIcon}
onClick={setShow.toggle}
aria-label={show ? "Hide password" : "Show password"}
>
{show ? <ViewOffIcon /> : <ViewIcon />}
</Icon>
</InputRightElement>
</InputGroup>
{error && <FormErrorMessage>{error}</FormErrorMessage>}
</FormControl>
<Link as={RouterLink} to="/recover-password" color="blue.500">
Forgot password?
</Link>
<Button variant="primary" type="submit" isLoading={isSubmitting}>
</Field>
<PasswordInput
type="password"
startElement={<FiLock />}
{...register("password", passwordRules())}
placeholder="Password"
errors={errors}
/>
<RouterLink to="/recover-password" className="main-link">
Forgot Password?
</RouterLink>
<Button variant="solid" type="submit" loading={isSubmitting} size="md">
Log In
</Button>
<Text>
Don't have an account?{" "}
<Link as={RouterLink} to="/signup" color="blue.500">
Sign up
</Link>
<RouterLink to="/signup" className="main-link">
Sign Up
</RouterLink>
</Text>
</Container>
</>

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

@@ -1,17 +1,13 @@
import {
Button,
Container,
FormControl,
FormErrorMessage,
Heading,
Input,
Text,
} from "@chakra-ui/react"
import { Container, Heading, Input, Text } from "@chakra-ui/react"
import { useMutation } from "@tanstack/react-query"
import { createFileRoute, redirect } from "@tanstack/react-router"
import { type SubmitHandler, useForm } from "react-hook-form"
import { FiMail } from "react-icons/fi"
import { type ApiError, LoginService } from "../client"
import { Button } from "../components/ui/button"
import { Field } from "../components/ui/field"
import { InputGroup } from "../components/ui/input-group"
import { isLoggedIn } from "../hooks/useAuth"
import useCustomToast from "../hooks/useCustomToast"
import { emailPattern, handleError } from "../utils"
@@ -38,7 +34,7 @@ function RecoverPassword() {
reset,
formState: { errors, isSubmitting },
} = useForm<FormData>()
const showToast = useCustomToast()
const { showSuccessToast } = useCustomToast()
const recoverPassword = async (data: FormData) => {
await LoginService.recoverPassword({
@@ -49,15 +45,11 @@ function RecoverPassword() {
const mutation = useMutation({
mutationFn: recoverPassword,
onSuccess: () => {
showToast(
"Email sent.",
"We sent an email with a link to get back into your account.",
"success",
)
showSuccessToast("Password recovery email sent successfully.")
reset()
},
onError: (err: ApiError) => {
handleError(err, showToast)
handleError(err)
},
})
@@ -79,24 +71,23 @@ function RecoverPassword() {
<Heading size="xl" color="ui.main" textAlign="center" mb={2}>
Password Recovery
</Heading>
<Text align="center">
<Text textAlign="center">
A password recovery email will be sent to the registered account.
</Text>
<FormControl isInvalid={!!errors.email}>
<Input
id="email"
{...register("email", {
required: "Email is required",
pattern: emailPattern,
})}
placeholder="Email"
type="email"
/>
{errors.email && (
<FormErrorMessage>{errors.email.message}</FormErrorMessage>
)}
</FormControl>
<Button variant="primary" type="submit" isLoading={isSubmitting}>
<Field invalid={!!errors.email} errorText={errors.email?.message}>
<InputGroup w="100%" startElement={<FiMail />}>
<Input
id="email"
{...register("email", {
required: "Email is required",
pattern: emailPattern,
})}
placeholder="Email"
type="email"
/>
</InputGroup>
</Field>
<Button variant="solid" type="submit" loading={isSubmitting}>
Continue
</Button>
</Container>

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

@@ -1,18 +1,12 @@
import {
Button,
Container,
FormControl,
FormErrorMessage,
FormLabel,
Heading,
Input,
Text,
} from "@chakra-ui/react"
import { Container, Heading, Text } from "@chakra-ui/react"
import { useMutation } from "@tanstack/react-query"
import { createFileRoute, redirect, useNavigate } from "@tanstack/react-router"
import { type SubmitHandler, useForm } from "react-hook-form"
import { FiLock } from "react-icons/fi"
import { type ApiError, LoginService, type NewPassword } from "../client"
import { Button } from "../components/ui/button"
import { PasswordInput } from "../components/ui/password-input"
import { isLoggedIn } from "../hooks/useAuth"
import useCustomToast from "../hooks/useCustomToast"
import { confirmPasswordRules, handleError, passwordRules } from "../utils"
@@ -46,7 +40,7 @@ function ResetPassword() {
new_password: "",
},
})
const showToast = useCustomToast()
const { showSuccessToast } = useCustomToast()
const navigate = useNavigate()
const resetPassword = async (data: NewPassword) => {
@@ -60,12 +54,12 @@ function ResetPassword() {
const mutation = useMutation({
mutationFn: resetPassword,
onSuccess: () => {
showToast("Success!", "Password updated successfully.", "success")
showSuccessToast("Password updated successfully.")
reset()
navigate({ to: "/login" })
},
onError: (err: ApiError) => {
handleError(err, showToast)
handleError(err)
},
})
@@ -90,31 +84,21 @@ function ResetPassword() {
<Text textAlign="center">
Please enter your new password and confirm it to reset your password.
</Text>
<FormControl mt={4} isInvalid={!!errors.new_password}>
<FormLabel htmlFor="password">Set Password</FormLabel>
<Input
id="password"
{...register("new_password", passwordRules())}
placeholder="Password"
type="password"
/>
{errors.new_password && (
<FormErrorMessage>{errors.new_password.message}</FormErrorMessage>
)}
</FormControl>
<FormControl mt={4} isInvalid={!!errors.confirm_password}>
<FormLabel htmlFor="confirm_password">Confirm Password</FormLabel>
<Input
id="confirm_password"
{...register("confirm_password", confirmPasswordRules(getValues))}
placeholder="Password"
type="password"
/>
{errors.confirm_password && (
<FormErrorMessage>{errors.confirm_password.message}</FormErrorMessage>
)}
</FormControl>
<Button variant="primary" type="submit">
<PasswordInput
startElement={<FiLock />}
type="new_password"
errors={errors}
{...register("new_password", passwordRules())}
placeholder="New Password"
/>
<PasswordInput
startElement={<FiLock />}
type="confirm_password"
errors={errors}
{...register("confirm_password", confirmPasswordRules(getValues))}
placeholder="Confirm Password"
/>
<Button variant="solid" type="submit">
Reset Password
</Button>
</Container>

130
frontend/src/routes/signup.tsx
View File

@@ -1,15 +1,4 @@
import {
Button,
Container,
Flex,
FormControl,
FormErrorMessage,
FormLabel,
Image,
Input,
Link,
Text,
} from "@chakra-ui/react"
import { Container, Flex, Image, Input, Text } from "@chakra-ui/react"
import {
Link as RouterLink,
createFileRoute,
@@ -17,8 +6,13 @@ import {
} from "@tanstack/react-router"
import { type SubmitHandler, useForm } from "react-hook-form"
import { FiLock, FiUser } from "react-icons/fi"
import Logo from "/assets/images/fastapi-logo.svg"
import type { UserRegister } from "../client"
import { Button } from "../components/ui/button"
import { Field } from "../components/ui/field"
import { InputGroup } from "../components/ui/input-group"
import { PasswordInput } from "../components/ui/password-input"
import useAuth, { isLoggedIn } from "../hooks/useAuth"
import { confirmPasswordRules, emailPattern, passwordRules } from "../utils"
@@ -80,80 +74,58 @@ function SignUp() {
alignSelf="center"
mb={4}
/>
<FormControl id="full_name" isInvalid={!!errors.full_name}>
<FormLabel htmlFor="full_name" srOnly>
Full Name
</FormLabel>
<Input
id="full_name"
minLength={3}
{...register("full_name", { required: "Full Name is required" })}
placeholder="Full Name"
type="text"
/>
{errors.full_name && (
<FormErrorMessage>{errors.full_name.message}</FormErrorMessage>
)}
</FormControl>
<FormControl id="email" isInvalid={!!errors.email}>
<FormLabel htmlFor="email" srOnly>
Email
</FormLabel>
<Input
id="email"
{...register("email", {
required: "Email is required",
pattern: emailPattern,
})}
placeholder="Email"
type="email"
/>
{errors.email && (
<FormErrorMessage>{errors.email.message}</FormErrorMessage>
)}
</FormControl>
<FormControl id="password" isInvalid={!!errors.password}>
<FormLabel htmlFor="password" srOnly>
Password
</FormLabel>
<Input
id="password"
{...register("password", passwordRules())}
placeholder="Password"
type="password"
/>
{errors.password && (
<FormErrorMessage>{errors.password.message}</FormErrorMessage>
)}
</FormControl>
<FormControl
id="confirm_password"
isInvalid={!!errors.confirm_password}
<Field
invalid={!!errors.full_name}
errorText={errors.full_name?.message}
>
<FormLabel htmlFor="confirm_password" srOnly>
Confirm Password
</FormLabel>
<InputGroup w="100%" startElement={<FiUser />}>
<Input
id="full_name"
minLength={3}
{...register("full_name", {
required: "Full Name is required",
})}
placeholder="Full Name"
type="text"
/>
</InputGroup>
</Field>
<Input
id="confirm_password"
{...register("confirm_password", confirmPasswordRules(getValues))}
placeholder="Repeat Password"
type="password"
/>
{errors.confirm_password && (
<FormErrorMessage>
{errors.confirm_password.message}
</FormErrorMessage>
)}
</FormControl>
<Button variant="primary" type="submit" isLoading={isSubmitting}>
<Field invalid={!!errors.email} errorText={errors.email?.message}>
<InputGroup w="100%" startElement={<FiUser />}>
<Input
id="email"
{...register("email", {
required: "Email is required",
pattern: emailPattern,
})}
placeholder="Email"
type="email"
/>
</InputGroup>
</Field>
<PasswordInput
type="password"
startElement={<FiLock />}
{...register("password", passwordRules())}
placeholder="Password"
errors={errors}
/>
<PasswordInput
type="confirm_password"
startElement={<FiLock />}
{...register("confirm_password", confirmPasswordRules(getValues))}
placeholder="Confirm Password"
errors={errors}
/>
<Button variant="solid" type="submit" loading={isSubmitting}>
Sign Up
</Button>
<Text>
Already have an account?{" "}
<Link as={RouterLink} to="/login" color="blue.500">
<RouterLink to="/login" className="main-link">
Log In
</Link>
</RouterLink>
</Text>
</Container>
</Flex>