mirror of
https://github.com/fastapi/full-stack-fastapi-template.git
synced 2026-11-03 20:36:27 +00:00
🛂 Migrate frontend to Shadcn (#2010)
* 🔧 Add Tailwind, update dependencies and config files * ✨ Introduce new Shadcn components and remove old ones * 🔧 Update dependencies * Add new components.json file * 🔥 Remove Chakra UI files * 🔧 Add ThemeProvider component and integrate it into main * 🔥 Remove common components * Update primary color * ✨ Add new components * ✨ Add AuthLayout component * 🔧 Add utility function cn * 🔧 Refactor devtools integration and update dependencies * ✨ Add Footer and Error components * ♻️ Update Footer * 🔥 Remove utils * ♻️ Refactor error handling in useAuth * ♻️ Refactor useCustomToast * ♻️ Refactor Login component and form handling * ♻️ Refactor SignUp component and form handling * 🔧 Update dependencies * ♻️ Refactor RecoverPassword component and form handling * ♻️ Refactor ResetPassword and form handling * ♻️ Add error component to root route * ♻️ Refactor error handling in utils * ♻️ Update buttons * 🍱 Add icons and logos assets * ♻️ Refactor Sidebar component * 🎨 Format * ♻️ Refactor ThemeProvider * ♻️ Refactor Common components * 🔥 Remove old Appearance component * ✨ Add Sidebar components * ♻️ Refactor DeleteAccount components * ♻️ Refactor ChangePassword component * ♻️ Refactor UserSettings * ✨ Add TanStack table * ♻️ Update SignUp * ✨ Add Select component * 🎨 Format * ♻️ Update Footer * ✨ Add useCopyToClipboard hook * 🎨 Tweak table styles * 🎨 Tweak styling * ♻️ Refactor AddUser and AddItem components * ♻️ Update DeleteConfirmation * ✅ Update tests * ✅ Update tests * ✅ Fix tests * ✨ Add DataTable for item and admin management * ♻️ Refactor DeleteUser and DeleteItem components * ✅ Fix tests * ♻️ Refactor EditUser and EditItem components * ♻️ Refactor UserInformation component * 🎨 Format * ♻️ Refactor pending components * 🎨 Format * ✅ Update tests * ✅ Update tests * ✅ Fix test * ♻️ Minor tweaks * ♻️ Update social media links
This commit is contained in:
Alejandra
GitHub
+101
-77
@@ -1,20 +1,36 @@
|
||||
import { Container, Image, Input, Text } from "@chakra-ui/react"
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import {
|
||||
createFileRoute,
|
||||
Link as RouterLink,
|
||||
redirect,
|
||||
} from "@tanstack/react-router"
|
||||
import { type SubmitHandler, useForm } from "react-hook-form"
|
||||
import { FiLock, FiMail } from "react-icons/fi"
|
||||
import { useForm } from "react-hook-form"
|
||||
import { z } from "zod"
|
||||
|
||||
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 { 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"
|
||||
import Logo from "/assets/images/fastapi-logo.svg"
|
||||
import { emailPattern, passwordRules } from "../utils"
|
||||
|
||||
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,
|
||||
@@ -28,12 +44,9 @@ export const Route = createFileRoute("/login")({
|
||||
})
|
||||
|
||||
function Login() {
|
||||
const { loginMutation, error, resetError } = useAuth()
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors, isSubmitting },
|
||||
} = useForm<AccessToken>({
|
||||
const { loginMutation } = useAuth()
|
||||
const form = useForm<FormData>({
|
||||
resolver: zodResolver(formSchema),
|
||||
mode: "onBlur",
|
||||
criteriaMode: "all",
|
||||
defaultValues: {
|
||||
@@ -42,71 +55,82 @@ function Login() {
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit: SubmitHandler<AccessToken> = async (data) => {
|
||||
if (isSubmitting) return
|
||||
|
||||
resetError()
|
||||
|
||||
try {
|
||||
await loginMutation.mutateAsync(data)
|
||||
} catch {
|
||||
// error is handled by useAuth hook
|
||||
}
|
||||
const onSubmit = (data: FormData) => {
|
||||
if (loginMutation.isPending) return
|
||||
loginMutation.mutate(data)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<Container
|
||||
as="form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
h="100vh"
|
||||
maxW="sm"
|
||||
alignItems="stretch"
|
||||
justifyContent="center"
|
||||
gap={4}
|
||||
centerContent
|
||||
>
|
||||
<Image
|
||||
src={Logo}
|
||||
alt="FastAPI logo"
|
||||
height="auto"
|
||||
maxW="2xs"
|
||||
alignSelf="center"
|
||||
mb={4}
|
||||
/>
|
||||
<Field
|
||||
invalid={!!errors.username}
|
||||
errorText={errors.username?.message || !!error}
|
||||
>
|
||||
<InputGroup w="100%" startElement={<FiMail />}>
|
||||
<Input
|
||||
{...register("username", {
|
||||
required: "Username is required",
|
||||
pattern: emailPattern,
|
||||
})}
|
||||
placeholder="Email"
|
||||
type="email"
|
||||
/>
|
||||
</InputGroup>
|
||||
</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?{" "}
|
||||
<RouterLink to="/signup" className="main-link">
|
||||
Sign Up
|
||||
</RouterLink>
|
||||
</Text>
|
||||
</Container>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user