feat(auth): finally better auth working as i wanted it to

frontend/src/lib/formStuff/components/CheckBox.tsx

@@ -0,0 +1,34 @@
+import { Label } from "@radix-ui/react-label";
+import { useFieldContext } from "..";
+import { FieldErrors } from "./FieldErrors";
+import { Checkbox } from "../../../components/ui/checkbox";
+
+type CheckboxFieldProps = {
+    label: string;
+    description?: string;
+};
+
+export const CheckboxField = ({ label }: CheckboxFieldProps) => {
+    const field = useFieldContext<boolean>();
+
+    return (
+        <div>
+            <div className="m-2 p-2 flex flex-row">
+                <div>
+                    <Label htmlFor="active">
+                        <span>{label}</span>
+                    </Label>
+                </div>
+                <Checkbox
+                    id={field.name}
+                    checked={field.state.value}
+                    onCheckedChange={(checked) => {
+                        field.handleChange(checked === true);
+                    }}
+                    onBlur={field.handleBlur}
+                />
+            </div>
+            <FieldErrors meta={field.state.meta} />
+        </div>
+    );
+};

frontend/src/lib/formStuff/components/FieldErrors.tsx

@@ -0,0 +1,16 @@
+import type { AnyFieldMeta } from "@tanstack/react-form";
+import { ZodError } from "zod";
+
+type FieldErrorsProps = {
+    meta: AnyFieldMeta;
+};
+
+export const FieldErrors = ({ meta }: FieldErrorsProps) => {
+    if (!meta.isTouched) return null;
+
+    return meta.errors.map(({ message }: ZodError, index) => (
+        <p key={index} className="text-sm font-medium text-destructive">
+            {message}
+        </p>
+    ));
+};

frontend/src/lib/formStuff/components/InputField.tsx

@@ -0,0 +1,28 @@
+import { useFieldContext } from "..";
+import { Input } from "../../../components/ui/input";
+import { Label } from "../../../components/ui/label";
+import { FieldErrors } from "./FieldErrors";
+
+type InputFieldProps = {
+    label: string;
+    inputType: string;
+    required: boolean;
+};
+export const InputField = ({ label, inputType, required }: InputFieldProps) => {
+    const field = useFieldContext<any>();
+
+    return (
+        <div className="grid gap-3">
+            <Label htmlFor={field.name}>{label}</Label>
+            <Input
+                id={field.name}
+                value={field.state.value}
+                onChange={(e) => field.handleChange(e.target.value)}
+                onBlur={field.handleBlur}
+                type={inputType}
+                required={required}
+            />
+            <FieldErrors meta={field.state.meta} />
+        </div>
+    );
+};

frontend/src/lib/formStuff/components/SelectField.tsx

@@ -0,0 +1,57 @@
+import { useFieldContext } from "..";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "../../../components/ui/select";
+import { FieldErrors } from "./FieldErrors";
+import { Label } from "../../../components/ui/label";
+
+type SelectOption = {
+    value: string;
+    label: string;
+};
+
+type SelectFieldProps = {
+    label: string;
+    options: SelectOption[];
+    placeholder?: string;
+};
+
+export const SelectField = ({
+    label,
+    options,
+    placeholder,
+}: SelectFieldProps) => {
+    const field = useFieldContext<string>();
+
+    return (
+        <div className="grid gap-3">
+            <div className="grid gap-3">
+                <Label htmlFor={field.name}>{label}</Label>
+                <Select
+                    value={field.state.value}
+                    onValueChange={(value) => field.handleChange(value)}
+                >
+                    <SelectTrigger
+                        id={field.name}
+                        onBlur={field.handleBlur}
+                        className="w-[380px]"
+                    >
+                        <SelectValue placeholder={placeholder} />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {options.map((option) => (
+                            <SelectItem key={option.value} value={option.value}>
+                                {option.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+            </div>
+            <FieldErrors meta={field.state.meta} />
+        </div>
+    );
+};

frontend/src/lib/formStuff/components/SubmitButton.tsx

@@ -0,0 +1,24 @@
+import { useStore } from "@tanstack/react-form";
+import { useFormContext } from "..";
+import { Button } from "../../../components/ui/button";
+
+type SubmitButtonProps = {
+    children: React.ReactNode;
+};
+
+export const SubmitButton = ({ children }: SubmitButtonProps) => {
+    const form = useFormContext();
+
+    const [isSubmitting] = useStore(form.store, (state) => [
+        state.isSubmitting,
+        state.canSubmit,
+    ]);
+
+    return (
+        <div className="">
+            <Button type="submit" disabled={isSubmitting}>
+                {children}
+            </Button>
+        </div>
+    );
+};