Hocam kıymetli zamanınızı ayırdıgınız için çok teşşekkür ederim.
Sorun laravel tarafında değilmiş. Qwik tarafındaymış. Dökümanları tekrar inceliyerek aşağıdaki örneği oluşturdum ve çalıştı.
// @ts-nocheck
/* eslint-disable @typescript-eslint/no-unused-vars */
import { $, component$, type QRL } from '@builder.io/qwik';
import { routeLoader$ } from '@builder.io/qwik-city';
import type { InitialValues, SubmitHandler } from '@modular-forms/qwik';
import { useNavigate } from '@builder.io/qwik-city';
import { formAction$, useForm, valiForm$ } from '@modular-forms/qwik';
import * as v from 'valibot';
const LoginSchema = v.object({
email: v.pipe(
v.string(),
v.nonEmpty('Please enter your email.'),
v.email('The email address is badly formatted.'),
),
password: v.pipe(
v.string(),
v.nonEmpty('Please enter your password.'),
v.minLength(4, 'Your password must have 8 characters or more.'),
),
});
type LoginForm = v.InferInput<typeof LoginSchema>;
export const useFormLoader = routeLoader$<InitialValues<LoginForm>>(() => ({
email: '',
password: '',
}));
export const useFormAction = formAction$<LoginForm>((values) => {
// Runs on server
}, valiForm$(LoginSchema));
export default component$(() => {
const nav = useNavigate(); // Ensure useNavigate is called here
const [loginForm, { Form, Field }] = useForm<LoginForm>({
loader: useFormLoader(),
action: useFormAction(),
validate: valiForm$(LoginSchema),
});
const getBrowserCookieValue = $(function getBrowserCookieValue(cname: string) {
const name = cname + "=";
const decodedCookie = decodeURIComponent(document.cookie);
const ca = decodedCookie.split(";");
for (let i = 0; i < ca.length; i++) {
let c = ca[i];
while (c.charAt(0) == " ") {
c = c.substring(1);
}
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
});
const handleSubmit: QRL<SubmitHandler<LoginForm>> = $(async (values, event) => {
await fetch(`http://localhost:8000/sanctum/csrf-cookie`, { credentials: "include" });
const token = await getBrowserCookieValue("XSRF-TOKEN");
const response = await fetch(`http://localhost:8000/login`, {
method: "POST",
credentials: "include",
headers: {
"Content-Type": "application/json",
Accept: "application/json",
"X-XSRF-TOKEN": token,
},
body: JSON.stringify(values),
});
if (response.ok) {
nav('/');
} else {
switch (response.status) {
case 422:
const json = await response.json();
const errors = json.errors;
Object.keys(errors).forEach((key) => {
setError(loginForm, key as "email" | "password", errors[key]);
});
break;
default:
throw new Error("Sorry, there was an error when logging in. Refresh the page and try again.");
}
}
});
return (
<Form onSubmit$={handleSubmit}>
<Field name="email">
{(field, props) => (
<div>
<input {...props} type="email" value={field.value} />
{field.error && <div>{field.error}</div>}
</div>
)}
</Field>
<Field name="password">
{(field, props) => (
<div>
<input {...props} type="password" value={field.value} />
{field.error && <div>{field.error}</div>}
</div>
)}
</Field>
<button type="submit">Login</button>
</Form>
);
});
Ayrıca önerdiğiniz gibi http:// kısımlarını kaldırmam gerekti.
SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:3000