init
This commit is contained in:
Andreas Wilms
78
frontend/components/auth/actions.ts
Normal file
78
frontend/components/auth/actions.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
"use server";
|
||||
|
||||
import { SignupFormSchema, FormState } from "../../lib/definitions";
|
||||
import { login } from "@/lib/session";
|
||||
|
||||
const apiUrl = process.env.NEXT_SERVER_API_URL;
|
||||
|
||||
export async function signup(state: FormState, formData: FormData) {
|
||||
// Validate form fields
|
||||
const validatedFields = SignupFormSchema.safeParse({
|
||||
name: formData.get("name"),
|
||||
password: formData.get("password"),
|
||||
});
|
||||
|
||||
// If any form fields are invalid, return early
|
||||
if (!validatedFields.success) {
|
||||
return {
|
||||
errors: validatedFields.error.flatten().fieldErrors,
|
||||
};
|
||||
}
|
||||
|
||||
// Call the provider or db to create a user...
|
||||
const name = formData.get("name") as string;
|
||||
const password = formData.get("password") as string;
|
||||
|
||||
const payload = {
|
||||
name,
|
||||
password,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/auth/signup`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
console.error("Response status:", response.status);
|
||||
throw new Error("Failed to submit form");
|
||||
} else {
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error submitting form:", error);
|
||||
throw new Error("An error occurred while submitting the form.");
|
||||
}
|
||||
}
|
||||
|
||||
export async function signin(name: string, password: string) {
|
||||
const payload = {
|
||||
name,
|
||||
password,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`${apiUrl}/auth/signin`, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
cache: "no-store",
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
return false;
|
||||
}
|
||||
|
||||
await login(name);
|
||||
return true;
|
||||
} catch (error) {
|
||||
console.error("Error submitting form:", error);
|
||||
throw new Error("An error occurred while submitting the form.");
|
||||
}
|
||||
}
|
||||
117
frontend/components/auth/signin-form.tsx
Normal file
117
frontend/components/auth/signin-form.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { signin } from "./actions"; // optional: remove if you use your own API
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardFooter,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
} from "@/components/ui/card";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { toast, Bounce } from "react-toastify";
|
||||
import { useRouter } from "next/navigation";
|
||||
|
||||
type FormData = {
|
||||
name: string;
|
||||
password: string;
|
||||
};
|
||||
|
||||
export default function SignInPage() {
|
||||
const { register, handleSubmit, formState } = useForm<FormData>({
|
||||
mode: "onSubmit",
|
||||
});
|
||||
const router = useRouter();
|
||||
|
||||
async function onSubmit(data: FormData) {
|
||||
// Example with next-auth credential sign in (optional)
|
||||
// If you use your own API, replace this block with a fetch to /api/auth/signin
|
||||
const res = await signin(data.name, data.password);
|
||||
if (res) {
|
||||
router.push("/dashboard");
|
||||
} else {
|
||||
toast.error("Falsche Anmeldedaten!", {
|
||||
position: "bottom-right",
|
||||
autoClose: 5000,
|
||||
hideProgressBar: false,
|
||||
closeOnClick: false,
|
||||
pauseOnHover: true,
|
||||
draggable: true,
|
||||
progress: undefined,
|
||||
theme: "light",
|
||||
transition: Bounce,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-slate-50 p-4">
|
||||
<Card className="w-full max-w-md">
|
||||
<CardHeader>
|
||||
<CardTitle>Anmelden</CardTitle>
|
||||
<CardDescription>
|
||||
Nutze deinen Namen und Passwort zum anmelden.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form
|
||||
id="signin-form"
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="space-y-4"
|
||||
>
|
||||
<div>
|
||||
<Label htmlFor="name">Name</Label>
|
||||
<Input
|
||||
id="name"
|
||||
placeholder="Dein Name"
|
||||
suppressHydrationWarning={true}
|
||||
{...register("name", { required: "Name is required" })}
|
||||
aria-invalid={Boolean(formState.errors.name)}
|
||||
/>
|
||||
{formState.errors.name && (
|
||||
<p className="text-sm text-red-600 mt-1">
|
||||
{formState.errors.name.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="password">Password</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
placeholder="Dein Passwort"
|
||||
suppressHydrationWarning={true}
|
||||
{...register("password", {
|
||||
required: "Password is required",
|
||||
minLength: 4,
|
||||
})}
|
||||
aria-invalid={Boolean(formState.errors.password)}
|
||||
/>
|
||||
{formState.errors.password && (
|
||||
<p className="text-sm text-red-600 mt-1">
|
||||
{formState.errors.password.type === "minLength"
|
||||
? "Password must be at least 6 characters"
|
||||
: formState.errors.password.message}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
<CardFooter>
|
||||
<div className="w-full flex justify-end">
|
||||
<Button
|
||||
form="signin-form"
|
||||
type="submit"
|
||||
disabled={formState.isSubmitting}
|
||||
>
|
||||
{formState.isSubmitting ? "Anmelden..." : "Anmelden"}
|
||||
</Button>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
35
frontend/components/auth/signup-form.tsx
Normal file
35
frontend/components/auth/signup-form.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
"use client";
|
||||
|
||||
import { signup } from "./actions";
|
||||
import { useActionState } from "react";
|
||||
|
||||
export default function SignupForm() {
|
||||
const [state, action, pending] = useActionState(signup, undefined);
|
||||
|
||||
return (
|
||||
<form action={action}>
|
||||
<div>
|
||||
<label htmlFor="name">Name</label>
|
||||
<input id="name" name="name" placeholder="Name" />
|
||||
</div>
|
||||
{state?.errors?.name && <p>{state.errors.name}</p>}
|
||||
<div>
|
||||
<label htmlFor="password">Password</label>
|
||||
<input id="password" name="password" type="password" />
|
||||
</div>
|
||||
{state?.errors?.password && (
|
||||
<div>
|
||||
<p>Password must:</p>
|
||||
<ul>
|
||||
{state.errors.password.map((error) => (
|
||||
<li key={error}>- {error}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
<button disabled={pending} type="submit">
|
||||
Sign Up
|
||||
</button>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user