Vendor backend and frontend into the monorepo
The submodule collapse was only half applied: .gitmodules was deleted but backend/ and frontend/ were still recorded as gitlinks, so none of their files were tracked. Replace the gitlinks with the real trees. Also untrack .env (it carried placeholder secrets) in favour of a tracked .env.example, drop the committed __pycache__, and narrow the blanket *.png ignore that would have swallowed design assets. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Melvin Strobl
co-authored by
Claude Opus 5
Claude Opus 5
parent
3cb16958ba
commit
1916f7f778
@@ -0,0 +1,18 @@
|
||||
import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
|
||||
import { createRootRoute, HeadContent, Outlet } from "@tanstack/react-router"
|
||||
import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"
|
||||
import ErrorComponent from "@/components/Common/ErrorComponent"
|
||||
import NotFound from "@/components/Common/NotFound"
|
||||
|
||||
export const Route = createRootRoute({
|
||||
component: () => (
|
||||
<>
|
||||
<HeadContent />
|
||||
<Outlet />
|
||||
<TanStackRouterDevtools position="bottom-right" />
|
||||
<ReactQueryDevtools initialIsOpen={false} />
|
||||
</>
|
||||
),
|
||||
notFoundComponent: () => <NotFound />,
|
||||
errorComponent: () => <ErrorComponent />,
|
||||
})
|
||||
@@ -0,0 +1,42 @@
|
||||
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router"
|
||||
|
||||
import { Footer } from "@/components/Common/Footer"
|
||||
import AppSidebar from "@/components/Sidebar/AppSidebar"
|
||||
import {
|
||||
SidebarInset,
|
||||
SidebarProvider,
|
||||
SidebarTrigger,
|
||||
} from "@/components/ui/sidebar"
|
||||
import { isLoggedIn } from "@/hooks/useAuth"
|
||||
|
||||
export const Route = createFileRoute("/_layout")({
|
||||
component: Layout,
|
||||
beforeLoad: async () => {
|
||||
if (!isLoggedIn()) {
|
||||
throw redirect({
|
||||
to: "/login",
|
||||
})
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
function Layout() {
|
||||
return (
|
||||
<SidebarProvider>
|
||||
<AppSidebar />
|
||||
<SidebarInset>
|
||||
<header className="sticky top-0 z-10 flex h-16 shrink-0 items-center gap-2 border-b px-4">
|
||||
<SidebarTrigger className="-ml-1 text-muted-foreground" />
|
||||
</header>
|
||||
<main className="flex-1 p-6 md:p-8">
|
||||
<div className="mx-auto max-w-7xl">
|
||||
<Outlet />
|
||||
</div>
|
||||
</main>
|
||||
<Footer />
|
||||
</SidebarInset>
|
||||
</SidebarProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout
|
||||
@@ -0,0 +1,73 @@
|
||||
import { useSuspenseQuery } from "@tanstack/react-query"
|
||||
import { createFileRoute, redirect } from "@tanstack/react-router"
|
||||
import { Suspense } from "react"
|
||||
|
||||
import { type UserPublic, UsersService } from "@/client"
|
||||
import AddUser from "@/components/Admin/AddUser"
|
||||
import { columns, type UserTableData } from "@/components/Admin/columns"
|
||||
import { DataTable } from "@/components/Common/DataTable"
|
||||
import PendingUsers from "@/components/Pending/PendingUsers"
|
||||
import useAuth from "@/hooks/useAuth"
|
||||
|
||||
function getUsersQueryOptions() {
|
||||
return {
|
||||
queryFn: () => UsersService.readUsers({ skip: 0, limit: 100 }),
|
||||
queryKey: ["users"],
|
||||
}
|
||||
}
|
||||
|
||||
export const Route = createFileRoute("/_layout/admin")({
|
||||
component: Admin,
|
||||
beforeLoad: async () => {
|
||||
const user = await UsersService.readUserMe()
|
||||
if (!user.is_superuser) {
|
||||
throw redirect({
|
||||
to: "/",
|
||||
})
|
||||
}
|
||||
},
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
title: "Admin - FastAPI Cloud",
|
||||
},
|
||||
],
|
||||
}),
|
||||
})
|
||||
|
||||
function UsersTableContent() {
|
||||
const { user: currentUser } = useAuth()
|
||||
const { data: users } = useSuspenseQuery(getUsersQueryOptions())
|
||||
|
||||
const tableData: UserTableData[] = users.data.map((user: UserPublic) => ({
|
||||
...user,
|
||||
isCurrentUser: currentUser?.id === user.id,
|
||||
}))
|
||||
|
||||
return <DataTable columns={columns} data={tableData} />
|
||||
}
|
||||
|
||||
function UsersTable() {
|
||||
return (
|
||||
<Suspense fallback={<PendingUsers />}>
|
||||
<UsersTableContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
|
||||
function Admin() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Users</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage user accounts and permissions
|
||||
</p>
|
||||
</div>
|
||||
<AddUser />
|
||||
</div>
|
||||
<UsersTable />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,31 @@
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
|
||||
import useAuth from "@/hooks/useAuth"
|
||||
|
||||
export const Route = createFileRoute("/_layout/")({
|
||||
component: Dashboard,
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
title: "Dashboard - FastAPI Cloud",
|
||||
},
|
||||
],
|
||||
}),
|
||||
})
|
||||
|
||||
function Dashboard() {
|
||||
const { user: currentUser } = useAuth()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div>
|
||||
<h1 className="text-2xl truncate max-w-sm">
|
||||
Hi, {currentUser?.full_name || currentUser?.email} 👋
|
||||
</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Welcome back, nice to see you again!!!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,69 @@
|
||||
import { useSuspenseQuery } from "@tanstack/react-query"
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
import { Search } from "lucide-react"
|
||||
import { Suspense } from "react"
|
||||
|
||||
import { ItemsService } from "@/client"
|
||||
import { DataTable } from "@/components/Common/DataTable"
|
||||
import AddItem from "@/components/Items/AddItem"
|
||||
import { columns } from "@/components/Items/columns"
|
||||
import PendingItems from "@/components/Pending/PendingItems"
|
||||
|
||||
function getItemsQueryOptions() {
|
||||
return {
|
||||
queryFn: () => ItemsService.readItems({ skip: 0, limit: 100 }),
|
||||
queryKey: ["items"],
|
||||
}
|
||||
}
|
||||
|
||||
export const Route = createFileRoute("/_layout/items")({
|
||||
component: Items,
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
title: "Items - FastAPI Cloud",
|
||||
},
|
||||
],
|
||||
}),
|
||||
})
|
||||
|
||||
function ItemsTableContent() {
|
||||
const { data: items } = useSuspenseQuery(getItemsQueryOptions())
|
||||
|
||||
if (items.data.length === 0) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center text-center py-12">
|
||||
<div className="rounded-full bg-muted p-4 mb-4">
|
||||
<Search className="h-8 w-8 text-muted-foreground" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold">You don't have any items yet</h3>
|
||||
<p className="text-muted-foreground">Add a new item to get started</p>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return <DataTable columns={columns} data={items.data} />
|
||||
}
|
||||
|
||||
function ItemsTable() {
|
||||
return (
|
||||
<Suspense fallback={<PendingItems />}>
|
||||
<ItemsTableContent />
|
||||
</Suspense>
|
||||
)
|
||||
}
|
||||
|
||||
function Items() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">Items</h1>
|
||||
<p className="text-muted-foreground">Create and manage your items</p>
|
||||
</div>
|
||||
<AddItem />
|
||||
</div>
|
||||
<ItemsTable />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,61 @@
|
||||
import { createFileRoute } from "@tanstack/react-router"
|
||||
|
||||
import ChangePassword from "@/components/UserSettings/ChangePassword"
|
||||
import DeleteAccount from "@/components/UserSettings/DeleteAccount"
|
||||
import UserInformation from "@/components/UserSettings/UserInformation"
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
|
||||
import useAuth from "@/hooks/useAuth"
|
||||
|
||||
const tabsConfig = [
|
||||
{ value: "my-profile", title: "My profile", component: UserInformation },
|
||||
{ value: "password", title: "Password", component: ChangePassword },
|
||||
{ value: "danger-zone", title: "Danger zone", component: DeleteAccount },
|
||||
]
|
||||
|
||||
export const Route = createFileRoute("/_layout/settings")({
|
||||
component: UserSettings,
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
title: "Settings - FastAPI Cloud",
|
||||
},
|
||||
],
|
||||
}),
|
||||
})
|
||||
|
||||
function UserSettings() {
|
||||
const { user: currentUser } = useAuth()
|
||||
const finalTabs = currentUser?.is_superuser
|
||||
? tabsConfig.slice(0, 3)
|
||||
: tabsConfig
|
||||
|
||||
if (!currentUser) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold tracking-tight">User Settings</h1>
|
||||
<p className="text-muted-foreground">
|
||||
Manage your account settings and preferences
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="my-profile">
|
||||
<TabsList>
|
||||
{finalTabs.map((tab) => (
|
||||
<TabsTrigger key={tab.value} value={tab.value}>
|
||||
{tab.title}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
{finalTabs.map((tab) => (
|
||||
<TabsContent key={tab.value} value={tab.value}>
|
||||
<tab.component />
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import {
|
||||
createFileRoute,
|
||||
Link as RouterLink,
|
||||
redirect,
|
||||
} from "@tanstack/react-router"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
|
||||
import type { Body_login_login_access_token as AccessToken } from "@/client"
|
||||
import { AuthLayout } from "@/components/Common/AuthLayout"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { LoadingButton } from "@/components/ui/loading-button"
|
||||
import { PasswordInput } from "@/components/ui/password-input"
|
||||
import useAuth, { isLoggedIn } from "@/hooks/useAuth"
|
||||
|
||||
const formSchema = z.object({
|
||||
username: z.email(),
|
||||
password: z
|
||||
.string()
|
||||
.min(1, { message: "Password is required" })
|
||||
.min(8, { message: "Password must be at least 8 characters" }),
|
||||
}) satisfies z.ZodType<AccessToken>
|
||||
|
||||
type FormData = z.infer<typeof formSchema>
|
||||
|
||||
export const Route = createFileRoute("/login")({
|
||||
component: Login,
|
||||
beforeLoad: async () => {
|
||||
if (isLoggedIn()) {
|
||||
throw redirect({
|
||||
to: "/",
|
||||
})
|
||||
}
|
||||
},
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
title: "Log In - FastAPI Cloud",
|
||||
},
|
||||
],
|
||||
}),
|
||||
})
|
||||
|
||||
function Login() {
|
||||
const { loginMutation } = useAuth()
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
mode: "onBlur",
|
||||
criteriaMode: "all",
|
||||
defaultValues: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
if (loginMutation.isPending) return
|
||||
loginMutation.mutate(data)
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<h1 className="text-2xl font-bold">Login to your account</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="username"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
data-testid="email-input"
|
||||
placeholder="user@example.com"
|
||||
type="email"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage className="text-xs" />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<div className="flex items-center">
|
||||
<FormLabel>Password</FormLabel>
|
||||
<RouterLink
|
||||
to="/recover-password"
|
||||
className="ml-auto text-sm underline-offset-4 hover:underline"
|
||||
>
|
||||
Forgot your password?
|
||||
</RouterLink>
|
||||
</div>
|
||||
<FormControl>
|
||||
<PasswordInput
|
||||
data-testid="password-input"
|
||||
placeholder="Password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage className="text-xs" />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<LoadingButton type="submit" loading={loginMutation.isPending}>
|
||||
Log In
|
||||
</LoadingButton>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm">
|
||||
Don't have an account yet?{" "}
|
||||
<RouterLink to="/signup" className="underline underline-offset-4">
|
||||
Sign up
|
||||
</RouterLink>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useMutation } from "@tanstack/react-query"
|
||||
import {
|
||||
createFileRoute,
|
||||
Link as RouterLink,
|
||||
redirect,
|
||||
} from "@tanstack/react-router"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
|
||||
import { LoginService } from "@/client"
|
||||
import { AuthLayout } from "@/components/Common/AuthLayout"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { LoadingButton } from "@/components/ui/loading-button"
|
||||
import { isLoggedIn } from "@/hooks/useAuth"
|
||||
import useCustomToast from "@/hooks/useCustomToast"
|
||||
import { handleError } from "@/utils"
|
||||
|
||||
const formSchema = z.object({
|
||||
email: z.email(),
|
||||
})
|
||||
|
||||
type FormData = z.infer<typeof formSchema>
|
||||
|
||||
export const Route = createFileRoute("/recover-password")({
|
||||
component: RecoverPassword,
|
||||
beforeLoad: async () => {
|
||||
if (isLoggedIn()) {
|
||||
throw redirect({
|
||||
to: "/",
|
||||
})
|
||||
}
|
||||
},
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
title: "Recover Password - FastAPI Cloud",
|
||||
},
|
||||
],
|
||||
}),
|
||||
})
|
||||
|
||||
function RecoverPassword() {
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
email: "",
|
||||
},
|
||||
})
|
||||
const { showSuccessToast, showErrorToast } = useCustomToast()
|
||||
|
||||
const recoverPassword = async (data: FormData) => {
|
||||
await LoginService.recoverPassword({
|
||||
email: data.email,
|
||||
})
|
||||
}
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: recoverPassword,
|
||||
onSuccess: () => {
|
||||
showSuccessToast("Password recovery email sent successfully")
|
||||
form.reset()
|
||||
},
|
||||
onError: handleError.bind(showErrorToast),
|
||||
})
|
||||
|
||||
const onSubmit = async (data: FormData) => {
|
||||
if (mutation.isPending) return
|
||||
mutation.mutate(data)
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<h1 className="text-2xl font-bold">Password Recovery</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
data-testid="email-input"
|
||||
placeholder="user@example.com"
|
||||
type="email"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<LoadingButton
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={mutation.isPending}
|
||||
>
|
||||
Continue
|
||||
</LoadingButton>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm">
|
||||
Remember your password?{" "}
|
||||
<RouterLink to="/login" className="underline underline-offset-4">
|
||||
Log in
|
||||
</RouterLink>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,166 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { useMutation } from "@tanstack/react-query"
|
||||
import {
|
||||
createFileRoute,
|
||||
Link as RouterLink,
|
||||
redirect,
|
||||
useNavigate,
|
||||
} from "@tanstack/react-router"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
|
||||
import { LoginService } from "@/client"
|
||||
import { AuthLayout } from "@/components/Common/AuthLayout"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form"
|
||||
import { LoadingButton } from "@/components/ui/loading-button"
|
||||
import { PasswordInput } from "@/components/ui/password-input"
|
||||
import { isLoggedIn } from "@/hooks/useAuth"
|
||||
import useCustomToast from "@/hooks/useCustomToast"
|
||||
import { handleError } from "@/utils"
|
||||
|
||||
const searchSchema = z.object({
|
||||
token: z.string().catch(""),
|
||||
})
|
||||
|
||||
const formSchema = z
|
||||
.object({
|
||||
new_password: z
|
||||
.string()
|
||||
.min(1, { message: "Password is required" })
|
||||
.min(8, { message: "Password must be at least 8 characters" }),
|
||||
confirm_password: z
|
||||
.string()
|
||||
.min(1, { message: "Password confirmation is required" }),
|
||||
})
|
||||
.refine((data) => data.new_password === data.confirm_password, {
|
||||
message: "The passwords don't match",
|
||||
path: ["confirm_password"],
|
||||
})
|
||||
|
||||
type FormData = z.infer<typeof formSchema>
|
||||
|
||||
export const Route = createFileRoute("/reset-password")({
|
||||
component: ResetPassword,
|
||||
validateSearch: searchSchema,
|
||||
beforeLoad: async ({ search }) => {
|
||||
if (isLoggedIn()) {
|
||||
throw redirect({ to: "/" })
|
||||
}
|
||||
if (!search.token) {
|
||||
throw redirect({ to: "/login" })
|
||||
}
|
||||
},
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
title: "Reset Password - FastAPI Cloud",
|
||||
},
|
||||
],
|
||||
}),
|
||||
})
|
||||
|
||||
function ResetPassword() {
|
||||
const { token } = Route.useSearch()
|
||||
const { showSuccessToast, showErrorToast } = useCustomToast()
|
||||
const navigate = useNavigate()
|
||||
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
mode: "onBlur",
|
||||
criteriaMode: "all",
|
||||
defaultValues: {
|
||||
new_password: "",
|
||||
confirm_password: "",
|
||||
},
|
||||
})
|
||||
|
||||
const mutation = useMutation({
|
||||
mutationFn: (data: { new_password: string; token: string }) =>
|
||||
LoginService.resetPassword({ requestBody: data }),
|
||||
onSuccess: () => {
|
||||
showSuccessToast("Password updated successfully")
|
||||
form.reset()
|
||||
navigate({ to: "/login" })
|
||||
},
|
||||
onError: handleError.bind(showErrorToast),
|
||||
})
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
mutation.mutate({ new_password: data.new_password, token })
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<h1 className="text-2xl font-bold">Reset Password</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="new_password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>New Password</FormLabel>
|
||||
<FormControl>
|
||||
<PasswordInput
|
||||
data-testid="new-password-input"
|
||||
placeholder="New Password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirm_password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Confirm Password</FormLabel>
|
||||
<FormControl>
|
||||
<PasswordInput
|
||||
data-testid="confirm-password-input"
|
||||
placeholder="Confirm Password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<LoadingButton
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={mutation.isPending}
|
||||
>
|
||||
Reset Password
|
||||
</LoadingButton>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm">
|
||||
Remember your password?{" "}
|
||||
<RouterLink to="/login" className="underline underline-offset-4">
|
||||
Log in
|
||||
</RouterLink>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,189 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import {
|
||||
createFileRoute,
|
||||
Link as RouterLink,
|
||||
redirect,
|
||||
} from "@tanstack/react-router"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
import { AuthLayout } from "@/components/Common/AuthLayout"
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@/components/ui/form"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { LoadingButton } from "@/components/ui/loading-button"
|
||||
import { PasswordInput } from "@/components/ui/password-input"
|
||||
import useAuth, { isLoggedIn } from "@/hooks/useAuth"
|
||||
|
||||
const formSchema = z
|
||||
.object({
|
||||
email: z.email(),
|
||||
full_name: z.string().min(1, { message: "Full Name is required" }),
|
||||
password: z
|
||||
.string()
|
||||
.min(1, { message: "Password is required" })
|
||||
.min(8, { message: "Password must be at least 8 characters" }),
|
||||
confirm_password: z
|
||||
.string()
|
||||
.min(1, { message: "Password confirmation is required" }),
|
||||
})
|
||||
.refine((data) => data.password === data.confirm_password, {
|
||||
message: "The passwords don't match",
|
||||
path: ["confirm_password"],
|
||||
})
|
||||
|
||||
type FormData = z.infer<typeof formSchema>
|
||||
|
||||
export const Route = createFileRoute("/signup")({
|
||||
component: SignUp,
|
||||
beforeLoad: async () => {
|
||||
if (isLoggedIn()) {
|
||||
throw redirect({
|
||||
to: "/",
|
||||
})
|
||||
}
|
||||
},
|
||||
head: () => ({
|
||||
meta: [
|
||||
{
|
||||
title: "Sign Up - FastAPI Cloud",
|
||||
},
|
||||
],
|
||||
}),
|
||||
})
|
||||
|
||||
function SignUp() {
|
||||
const { signUpMutation } = useAuth()
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
mode: "onBlur",
|
||||
criteriaMode: "all",
|
||||
defaultValues: {
|
||||
email: "",
|
||||
full_name: "",
|
||||
password: "",
|
||||
confirm_password: "",
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = (data: FormData) => {
|
||||
if (signUpMutation.isPending) return
|
||||
|
||||
// exclude confirm_password from submission data
|
||||
const { confirm_password: _confirm_password, ...submitData } = data
|
||||
signUpMutation.mutate(submitData)
|
||||
}
|
||||
|
||||
return (
|
||||
<AuthLayout>
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={form.handleSubmit(onSubmit)}
|
||||
className="flex flex-col gap-6"
|
||||
>
|
||||
<div className="flex flex-col items-center gap-2 text-center">
|
||||
<h1 className="text-2xl font-bold">Create an account</h1>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="full_name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Full Name</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
data-testid="full-name-input"
|
||||
placeholder="User"
|
||||
type="text"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="email"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Email</FormLabel>
|
||||
<FormControl>
|
||||
<Input
|
||||
data-testid="email-input"
|
||||
placeholder="user@example.com"
|
||||
type="email"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Password</FormLabel>
|
||||
<FormControl>
|
||||
<PasswordInput
|
||||
data-testid="password-input"
|
||||
placeholder="Password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="confirm_password"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>Confirm Password</FormLabel>
|
||||
<FormControl>
|
||||
<PasswordInput
|
||||
data-testid="confirm-password-input"
|
||||
placeholder="Confirm Password"
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<LoadingButton
|
||||
type="submit"
|
||||
className="w-full"
|
||||
loading={signUpMutation.isPending}
|
||||
>
|
||||
Sign Up
|
||||
</LoadingButton>
|
||||
</div>
|
||||
|
||||
<div className="text-center text-sm">
|
||||
Already have an account?{" "}
|
||||
<RouterLink to="/login" className="underline underline-offset-4">
|
||||
Log in
|
||||
</RouterLink>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</AuthLayout>
|
||||
)
|
||||
}
|
||||
|
||||
export default SignUp
|
||||
Reference in New Issue
Block a user