Skip to content

Commit ffba286

Browse files
irsyadadlirsyadadl
committed
upgrade inertiajs
1 parent d911b00 commit ffba286

File tree

9 files changed

+2016
-1815
lines changed

9 files changed

+2016
-1815
lines changed

‎composer.lock‎

Lines changed: 449 additions & 206 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json‎

Lines changed: 1339 additions & 1323 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎resources/js/layouts/app-navbar.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,14 @@ export function AppNavbar({ children, ...props }: React.ComponentProps<typeof Na
5757
</NavbarSection>
5858
<NavbarSpacer />
5959
<NavbarSection className="ml-auto hidden gap-x-2 lg:flex">
60-
{auth.user ? <UserMenu /> : <NavbarItem href="/login">Login</NavbarItem>}
60+
{auth.user ? (
61+
<UserMenu />
62+
) : (
63+
<>
64+
<NavbarItem href="/login">Login</NavbarItem>
65+
<NavbarItem href="/register">Register</NavbarItem>
66+
</>
67+
)}
6168
</NavbarSection>
6269
</Navbar>
6370
<NavbarMobile>

‎resources/js/pages/auth/confirm-password.tsx‎

Lines changed: 21 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,10 @@
11
import GuestLayout from "@/layouts/guest-layout"
2-
import { Head, useForm } from "@inertiajs/react"
3-
import { useEffect } from "react"
2+
import { Head, Form } from "@inertiajs/react"
43
import { Button } from "@/components/ui/button"
5-
import { Form } from "@/components/ui/form"
64
import { TextField } from "@/components/ui/text-field"
75
import { Loader } from "@/components/ui/loader"
86

97
export default function ConfirmPassword() {
10-
const { data, setData, post, processing, errors, reset } = useForm({
11-
password: "",
12-
})
13-
14-
useEffect(() => {
15-
return () => {
16-
reset("password")
17-
}
18-
}, [])
19-
20-
const submit = (e: React.FormEvent) => {
21-
e.preventDefault()
22-
23-
post("/confirm-password")
24-
}
25-
268
return (
279
<>
2810
<Head title="Confirm Password" />
@@ -31,24 +13,26 @@ export default function ConfirmPassword() {
3113
This is a secure area of the application. Please confirm your password before continuing.
3214
</div>
3315

34-
<Form validationErrors={errors} onSubmit={submit}>
35-
<TextField
36-
id="password"
37-
label="Password"
38-
type="password"
39-
name="password"
40-
value={data.password}
41-
className="mt-1 block w-full"
42-
autoFocus
43-
onChange={(v) => setData("password", v)}
44-
/>
45-
46-
<div className="mt-4 flex items-center justify-end">
47-
<Button isPending={processing}>
48-
{processing && <Loader />}
49-
Confirm
50-
</Button>
51-
</div>
16+
<Form method="post" action={route("password.confirm")} resetOnSuccess={["password"]}>
17+
{({ processing, errors }) => (
18+
<>
19+
<TextField
20+
id="password"
21+
label="Password"
22+
type="password"
23+
name="password"
24+
errorMessage={errors.password}
25+
autoFocus
26+
/>
27+
28+
<div className="mt-4 flex items-center justify-end">
29+
<Button isPending={processing}>
30+
{processing && <Loader />}
31+
Confirm
32+
</Button>
33+
</div>
34+
</>
35+
)}
5236
</Form>
5337
</>
5438
)

‎resources/js/pages/auth/forgot-password.tsx‎

Lines changed: 13 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import GuestLayout from "@/layouts/guest-layout"
2-
import { Head, useForm } from "@inertiajs/react"
2+
import { Head, Form } from "@inertiajs/react"
33
import { Button } from "@/components/ui/button"
4-
import { Form } from "@/components/ui/form"
54
import { TextField } from "@/components/ui/text-field"
65
import { Loader } from "@/components/ui/loader"
76

@@ -10,37 +9,24 @@ interface ForgotPasswordProps {
109
}
1110

1211
export default function ForgotPassword({ status }: ForgotPasswordProps) {
13-
const { data, setData, post, processing, errors } = useForm({
14-
email: "",
15-
})
16-
17-
const submit = (e: React.FormEvent) => {
18-
e.preventDefault()
19-
post(route("password.email"))
20-
}
21-
2212
return (
2313
<>
2414
<Head title="Forgot Password" />
2515
{status && <div className="font-medium text-sm text-success">{status}</div>}
2616

27-
<Form className="mt-4 space-y-4" validationErrors={errors} onSubmit={submit}>
28-
<TextField
29-
type="text"
30-
name="email"
31-
value={data.email}
32-
isRequired
33-
errorMessage={errors.email}
34-
autoFocus
35-
onChange={(v) => setData("email", v)}
36-
/>
17+
<Form className="mt-4 space-y-4" action={route("password.email")} method="post">
18+
{({ processing, errors }) => (
19+
<>
20+
<TextField type="text" name="email" isRequired errorMessage={errors.email} autoFocus />
3721

38-
<div className="flex items-center justify-end">
39-
<Button type="submit" className="w-full" isPending={processing}>
40-
{processing && <Loader />}
41-
Email Password Reset Link
42-
</Button>
43-
</div>
22+
<div className="flex items-center justify-end">
23+
<Button type="submit" className="w-full" isPending={processing}>
24+
{processing && <Loader />}
25+
Email Password Reset Link
26+
</Button>
27+
</div>
28+
</>
29+
)}
4430
</Form>
4531
</>
4632
)

‎resources/js/pages/auth/login.tsx‎

Lines changed: 62 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
11
import GuestLayout from "@/layouts/guest-layout"
2-
import { Head, useForm } from "@inertiajs/react"
2+
import { Head, Form } from "@inertiajs/react"
33
import type React from "react"
4-
import { useEffect } from "react"
54
import { Button } from "@/components/ui/button"
65
import { Checkbox } from "@/components/ui/checkbox"
7-
import { Form } from "@/components/ui/form"
86
import { Link } from "@/components/ui/link"
97
import { TextField } from "@/components/ui/text-field"
108
import { Loader } from "@/components/ui/loader"
@@ -16,23 +14,23 @@ interface LoginProps {
1614

1715
export default function Login(args: LoginProps) {
1816
const { status, canResetPassword } = args
19-
const { data, setData, post, processing, errors, reset } = useForm({
20-
email: "",
21-
password: "",
22-
remember: "",
23-
})
24-
25-
useEffect(() => {
26-
return () => {
27-
reset("password")
28-
}
29-
}, [])
30-
31-
const submit = (e: React.FormEvent) => {
32-
e.preventDefault()
33-
34-
post("/login")
35-
}
17+
// const { data, setData, post, processing, errors, reset } = useForm({
18+
// email: "",
19+
// password: "",
20+
// remember: "",
21+
// })
22+
//
23+
// useEffect(() => {
24+
// return () => {
25+
// reset("password")
26+
// }
27+
// }, [])
28+
//
29+
// const submit = (e: React.FormEvent) => {
30+
// e.preventDefault()
31+
//
32+
// post("/login")
33+
// }
3634

3735
return (
3836
<>
@@ -44,48 +42,50 @@ export default function Login(args: LoginProps) {
4442
</div>
4543
)}
4644

47-
<Form validationErrors={errors} onSubmit={submit} className="flex flex-col gap-y-4">
48-
<TextField
49-
label="Email"
50-
type="email"
51-
name="email"
52-
value={data.email}
53-
autoComplete="username"
54-
autoFocus
55-
onChange={(v) => setData("email", v)}
56-
errorMessage={errors.email}
57-
isRequired
58-
/>
59-
<TextField
60-
type="password"
61-
name="password"
62-
label="Password"
63-
value={data.password}
64-
autoComplete="current-password"
65-
onChange={(v) => setData("password", v)}
66-
errorMessage={errors.password}
67-
isRequired
68-
/>
69-
70-
<div className="flex items-center justify-between">
71-
<Checkbox name="remember" onChange={(v) => setData("remember", v as any)}>
72-
Remember me
73-
</Checkbox>
74-
{canResetPassword && (
75-
<Link href="/forgot-password" className="sm:text-sm" intent="secondary">
76-
Forgot your password?
77-
</Link>
78-
)}
79-
</div>
80-
<Button isPending={processing} type="submit">
81-
{processing && <Loader />}
82-
Log in
83-
</Button>
84-
<div className="text-center">
85-
<Link href="/register" className="sm:text-sm" intent="secondary">
86-
Dont have account? Register
87-
</Link>
88-
</div>
45+
<Form
46+
method="post"
47+
action="/login"
48+
resetOnSuccess={["password"]}
49+
className="flex flex-col gap-y-4"
50+
>
51+
{({ processing, errors }) => (
52+
<>
53+
<TextField
54+
label="Email"
55+
type="email"
56+
name="email"
57+
autoComplete="username"
58+
autoFocus
59+
errorMessage={errors.email}
60+
isRequired
61+
/>
62+
<TextField
63+
type="password"
64+
name="password"
65+
label="Password"
66+
errorMessage={errors.password}
67+
autoComplete="current-password"
68+
isRequired
69+
/>
70+
<div className="flex items-center justify-between">
71+
<Checkbox name="remember">Remember me</Checkbox>
72+
{canResetPassword && (
73+
<Link href="/forgot-password" className="sm:text-sm" intent="secondary">
74+
Forgot your password?
75+
</Link>
76+
)}
77+
</div>
78+
<Button isPending={processing} type="submit">
79+
{processing && <Loader />}
80+
Log in
81+
</Button>
82+
<div className="text-center">
83+
<Link href="/register" className="sm:text-sm" intent="secondary">
84+
Dont have account? Register
85+
</Link>
86+
</div>
87+
</>
88+
)}
8989
</Form>
9090
</>
9191
)

0 commit comments

Comments
 (0)