From 193a6f3ee8cb7de343eac39ad7beb1f9ae6f5571 Mon Sep 17 00:00:00 2001
From: biersoeckli <meow@biersoeckli.ch>
Date: Sat, 19 Oct 2024 16:13:32 +0000
Subject: [PATCH] updated form action to use react frontend form

---
 src/app/auth/actions.ts                  |  7 +++----
 src/app/auth/register-from.tsx           | 18 ++++++++++--------
 src/components/custom/submit-button.tsx  |  4 ++--
 src/server/utils/action-wrapper.utils.ts |  4 ++--
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/app/auth/actions.ts b/src/app/auth/actions.ts
index b633670..a6baebd 100644
--- a/src/app/auth/actions.ts
+++ b/src/app/auth/actions.ts
@@ -1,14 +1,13 @@
 'use server'
 
-import { authFormInputSchemaZod } from "@/model/auth-form";
+import { AuthFormInputSchema, authFormInputSchemaZod } from "@/model/auth-form";
 import { ServiceException } from "@/model/service.exception.model";
 import userService from "@/server/services/user.service";
 import { saveFormAction } from "@/server/utils/action-wrapper.utils";
 
 
-export const registerUser = async (prevState: any, formData: FormData) =>
-    saveFormAction(formData, authFormInputSchemaZod, async (validatedData) => {
-
+export const registerUser = async (prevState: any, inputData: AuthFormInputSchema) =>
+    saveFormAction(inputData, authFormInputSchemaZod, async (validatedData) => {
         const allUsers = await userService.getAllUsers();
         if (allUsers.length !== 0) {
             throw new ServiceException("User registration is currently not possible");
diff --git a/src/app/auth/register-from.tsx b/src/app/auth/register-from.tsx
index f08260e..6a3ebf8 100644
--- a/src/app/auth/register-from.tsx
+++ b/src/app/auth/register-from.tsx
@@ -11,15 +11,15 @@ import {
 import { Input } from "@/components/ui/input"
 import { zodResolver } from "@hookform/resolvers/zod"
 import { useForm } from "react-hook-form"
-import { z } from "zod";
 import { useFormState } from 'react-dom'
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 import { FormUtils } from "@/lib/form.utilts";
 import { SubmitButton } from "@/components/custom/submit-button";
 import { AuthFormInputSchema, authFormInputSchemaZod } from "@/model/auth-form"
 import { registerUser } from "./actions"
 import { signIn } from "next-auth/react";
 import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { redirect } from "next/navigation"
 
 export default function UserRegistrationForm() {
     const form = useForm<AuthFormInputSchema>({
@@ -34,8 +34,9 @@ export default function UserRegistrationForm() {
             signIn("credentials", {
                 username: formValues.email,
                 password: formValues.password,
-                redirect: true,
+                redirect: false,
             });
+            redirect('/');
         }
     }, [state]);
 
@@ -46,7 +47,8 @@ export default function UserRegistrationForm() {
                 <CardDescription>Enter your credentials to register for the service.</CardDescription>
             </CardHeader>
             <Form {...form}>
-                <form action={formAction} className="space-y-8">
+                <form action={(e) => form.handleSubmit((data) => formAction(data))()}
+                    className="space-y-8">
                     <CardContent className="space-y-4">
                         <FormField
                             control={form.control}
@@ -75,14 +77,14 @@ export default function UserRegistrationForm() {
                                 </FormItem>
                             )}
                         />
-
+                        <p className="text-red-500">{state?.message}</p>
                     </CardContent>
                     <CardFooter>
-                        <p className="text-red-500">{state?.message}</p>
-                        <SubmitButton>Register</SubmitButton>
+
+                        <SubmitButton className="w-full">Register</SubmitButton>
                     </CardFooter>
                 </form>
             </Form>
-        </Card>
+        </Card >
     )
 }
diff --git a/src/components/custom/submit-button.tsx b/src/components/custom/submit-button.tsx
index 7a40709..48b7a44 100644
--- a/src/components/custom/submit-button.tsx
+++ b/src/components/custom/submit-button.tsx
@@ -4,7 +4,7 @@ import { useFormStatus } from "react-dom";
 import LoadingSpinner from "../ui/loading-spinner";
 import { Button } from "../ui/button";
 
-export function SubmitButton(props: { children: React.ReactNode }) {
+export function SubmitButton(props: { children: React.ReactNode, className?: string }) {
     const { pending, data, method, action } = useFormStatus();
-    return <Button type="submit" disabled={pending}>{pending ?<LoadingSpinner></LoadingSpinner> : props.children}</Button>
+    return <Button type="submit" className={props.className} disabled={pending}>{pending ?<LoadingSpinner></LoadingSpinner> : props.children}</Button>
 }
\ No newline at end of file
diff --git a/src/server/utils/action-wrapper.utils.ts b/src/server/utils/action-wrapper.utils.ts
index 6cc7941..5732453 100644
--- a/src/server/utils/action-wrapper.utils.ts
+++ b/src/server/utils/action-wrapper.utils.ts
@@ -27,13 +27,13 @@ export async function checkIfCurrentUserHasAccessToContract(contractId: string |
     return { ...session };
 }
 */
-export async function saveFormAction<ReturnType, ZodType extends ZodRawShape>(formData: FormData,
+export async function saveFormAction<ReturnType, TInputData, ZodType extends ZodRawShape>(
+    inputData: TInputData,
     validationModel: ZodObject<ZodType>,
     func: (validateData: { [k in keyof objectUtil.addQuestionMarks<baseObjectOutputType<ZodType>, any>]: objectUtil.addQuestionMarks<baseObjectOutputType<ZodType>, any>[k]; }) => Promise<ReturnType>,
     redirectOnSuccessPath?: string,
     ignoredFields: (keyof ZodType)[] = []) {
     return simpleAction<ReturnType, z.infer<typeof validationModel>>(async () => {
-        const inputData = convertFormDataToJson(formData);
 
         // Omit ignored fields from validation model
         const omitBody = {};