Frontend form handling done

frontend/.prettierrc.mjs

@@ -1,6 +1,6 @@
 const config = {
     trailingComma: "es5",
-    printWidth: 120,
+    printWidth: 110,
     tabWidth: 4,
     semi: true,
     singleQuote: false,

frontend/bun.lock

@@ -17,6 +17,7 @@
         "lucide-react": "^0.525.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-hot-toast": "^2.5.2",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.0.6",
         "zod": "^3.24.2",
@@ -536,6 +537,8 @@
 
     "react-dom": ["react-dom@19.1.0", "", { "dependencies": { "scheduler": "^0.26.0" }, "peerDependencies": { "react": "^19.1.0" } }, "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g=="],
 
+    "react-hot-toast": ["react-hot-toast@2.5.2", "", { "dependencies": { "csstype": "^3.1.3", "goober": "^2.1.16" }, "peerDependencies": { "react": ">=16", "react-dom": ">=16" } }, "sha512-Tun3BbCxzmXXM7C+NI4qiv6lT0uwGh4oAfeJyNOjYUejTsm35mK9iCaYLGv8cBz9L5YxZLx/2ii7zsIwPtPUdw=="],
+
     "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
 
     "react-refresh": ["react-refresh@0.17.0", "", {}, "sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ=="],

frontend/package.json

@@ -22,6 +22,7 @@
         "lucide-react": "^0.525.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-hot-toast": "^2.5.2",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.0.6",
         "zod": "^3.24.2"

frontend/src/components/forms/TextField.tsx

@@ -0,0 +1,48 @@
+import { useFieldContext } from "@/hooks/formHook";
+import { cn } from "@/lib/utils";
+import { Input } from "../ui/input";
+
+// --- field components ---
+interface TextFieldProps {
+    placeholder?: string;
+    label?: string;
+    type?: React.ComponentProps<"input">["type"];
+    className?: string;
+}
+
+export default function TextField({
+    placeholder,
+    type = "text",
+    className = "",
+    label = "",
+}: TextFieldProps) {
+    // Get field with predefined text type
+    const field = useFieldContext<string>();
+
+    // Render custom field
+    return (
+        <div className={cn("flex flex-col", className)}>
+            {label && (
+                <label htmlFor={field.name} className="ml-1 mb-2 text-secondary-foreground text-sm">
+                    {label}
+                </label>
+            )}
+
+            <Input
+                id={field.name}
+                name={field.name}
+                value={field.state.value}
+                onBlur={field.handleBlur}
+                onChange={(e) => field.handleChange(e.target.value)}
+                type={type}
+                placeholder={placeholder || `${type} input`}
+            />
+
+            {!field.state.meta.isValid && (
+                <span className="text-xs text-danger mt-1">
+                    {field.state.meta.errors.map((e) => e.message).join(", ")}
+                </span>
+            )}
+        </div>
+    );
+}

frontend/src/consts.ts

@@ -0,0 +1,2 @@
+export const BASE = "/";
+export const API_BASE = `${BASE}/api/`;

frontend/src/hooks/formHook.tsx

@@ -0,0 +1,14 @@
+import TextField from "@/components/forms/TextField";
+import { createFormHookContexts, createFormHook } from "@tanstack/react-form";
+
+// export useFieldContext for use in your custom components
+export const { fieldContext, formContext, useFieldContext } = createFormHookContexts();
+
+export const { useAppForm } = createFormHook({
+    fieldComponents: {
+        TextField,
+    },
+    formComponents: {},
+    fieldContext,
+    formContext,
+});

frontend/src/lib/requests.ts

@@ -0,0 +1,63 @@
+import { API_BASE } from "@/consts";
+import { normalizeLink } from "./utils";
+import type { ApiResponse } from "@/types/api";
+import toast from "react-hot-toast";
+
+interface RequestProps<T> {
+    error?: (err: Error) => void;
+    success?: (data: T) => void;
+    before?: () => void;
+    finally?: () => void;
+}
+
+interface PostProps<T> extends RequestProps<T> {
+    data: Record<string, any>;
+}
+
+class Requests {
+    constructor() {}
+
+    async post<T>(url: string, props: PostProps<T>): Promise<T | void> {
+        props.before?.();
+
+        // Normalize url
+        const finalUrl = normalizeLink(`${API_BASE}/${url}`);
+
+        try {
+            // Do request
+            const res = await fetch(finalUrl, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(props.data),
+            });
+
+            // Get response data
+            const data = (await res.json()) as ApiResponse<T>;
+
+            // Check if data is ok
+            if ("success" in data && !data.success) {
+                throw new Error(data.error);
+            }
+
+            // Another check for unexpected error
+            if (!res.ok) {
+                throw new Error("Unexpected API ERROR with code: " + res.status);
+            }
+
+            // Otherwise return response data
+            props.success?.(data.data);
+            return data.data;
+        } catch (error) {
+            const err = error as Error;
+            // Show notification, and call error callback
+            toast.error(err.message);
+            props.error?.(err);
+        } finally {
+            props.finally?.();
+        }
+    }
+}
+
+export default new Requests();

frontend/src/lib/utils.ts

@@ -1,6 +1,17 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+    return twMerge(clsx(inputs));
+}
+
+export function normalizeLink(link: string) {
+    let tmp = link;
+
+    // Remove double slashes
+    while (tmp.includes("//")) {
+        tmp = tmp.replaceAll("//", "/");
+    }
+
+    return tmp;
 }

frontend/src/main.tsx

@@ -9,6 +9,7 @@ import { routeTree } from "./routeTree.gen";
 
 import "./styles.css";
 import reportWebVitals from "./reportWebVitals.ts";
+import { Toaster } from "react-hot-toast";
 
 // Create a new router instance
 const router = createRouter({
@@ -34,11 +35,11 @@ const rootElement = document.getElementById("app");
 if (rootElement && !rootElement.innerHTML) {
     const root = ReactDOM.createRoot(rootElement);
     root.render(
-        <StrictMode>
-            <TanStackQueryProvider.Provider>
-                <RouterProvider router={router} />
-            </TanStackQueryProvider.Provider>
-        </StrictMode>
+        <TanStackQueryProvider.Provider>
+            {/* Toaster for notifications */}
+            <Toaster position="top-right" reverseOrder={false} />
+            <RouterProvider router={router} />
+        </TanStackQueryProvider.Provider>
     );
 }
 

frontend/src/routes/register.tsx

@@ -1,8 +1,7 @@
 import { Button } from "@/components/ui/button";
 import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
+import { useAppForm } from "@/hooks/formHook";
 import Guest from "@/layouts/Guest";
-import { useForm } from "@tanstack/react-form";
 import { createFileRoute, Link } from "@tanstack/react-router";
 import * as z from "zod/v4";
 
@@ -13,8 +12,9 @@ export const Route = createFileRoute("/register")({
 const registerSchema = z
     .object({
         email: z.string().email(),
-        password: z.string().min(8),
-        repeatPassword: z.string().min(8),
+        name: z.string().min(2, "Name is too short"),
+        password: z.string().min(8, "Password is too short"),
+        repeatPassword: z.string().min(8, "Password is too short"),
     })
     .refine((data) => data.password === data.repeatPassword, {
         message: "Passwords don't match",
@@ -22,10 +22,11 @@ const registerSchema = z
     });
 
 function RouteComponent() {
-    const form = useForm({
+    const form = useAppForm({
         defaultValues: {
             email: "",
             password: "",
+            name: "",
             repeatPassword: "",
         },
         validators: {
@@ -36,6 +37,10 @@ function RouteComponent() {
         },
     });
 
+    // useEffect(() => {
+    //     requests.post<{ message: string }>("/ping", { data: { hello: "world" } });
+    // }, []);
+
     return (
         <Guest className="h-screen w-screen grid place-items-center">
             <Card className="w-full max-w-[400px]">
@@ -48,23 +53,47 @@ function RouteComponent() {
                         </Button>
                     </CardAction>
                 </CardHeader>
-                <CardContent className="space-y-2">
-                    <form.Field
+                <CardContent className="space-y-3">
+                    <form.AppField
                         name="email"
                         children={(field) => (
-                            <Input
-                                id={field.name}
-                                name={field.name}
-                                value={field.state.value}
-                                onBlur={field.handleBlur}
-                                onChange={(e) => field.handleChange(e.target.value)}
+                            <field.TextField
+                                label="Email address"
+                                placeholder="Your email address"
                                 type="email"
-                                placeholder="Email address"
                             />
                         )}
                     />
-                    <Input type="password" placeholder="Password" />
-                    <Input type="password" placeholder="Repeat password" />
+
+                    <form.AppField
+                        name="name"
+                        children={(field) => (
+                            <field.TextField label="Name" placeholder="Full name or nickname" />
+                        )}
+                    />
+
+                    <form.AppField
+                        name="password"
+                        children={(field) => (
+                            <field.TextField
+                                label="Password"
+                                placeholder="Your accounts password"
+                                type="password"
+                            />
+                        )}
+                    />
+
+                    <form.AppField
+                        name="repeatPassword"
+                        children={(field) => (
+                            <field.TextField
+                                label="Repeat password"
+                                placeholder="Repeat your password"
+                                type="password"
+                            />
+                        )}
+                    />
+
                     <Button onClick={form.handleSubmit} className="w-full">
                         Register
                     </Button>

frontend/src/styles.css

@@ -112,6 +112,7 @@
     /* My own variables */
     --color-body: var(--background);
     --color-panel: var(--card);
+    --color-danger: var(--destructive);
 }
 
 @layer base {

frontend/src/types/api.ts

@@ -0,0 +1,13 @@
+// Data structure for successful responses
+export interface SuccessResponse<T> {
+    success: true;
+    data: T;
+}
+
+// Data structure for error responses
+export interface ErrorResponse {
+    success: false;
+    error: string;
+}
+
+export type ApiResponse<T> = SuccessResponse<T> | ErrorResponse;