Fix bug on register

This commit is contained in:
sianida26 2024-02-27 10:31:27 +07:00
parent e2a8b208bc
commit 5d8afc7c0f
3 changed files with 63 additions and 85 deletions

View File

@ -1,6 +1,10 @@
"use client"; "use client";
import createUser from "@/modules/auth/actions/createUser"; import createUserAction from "@/modules/auth/actions/createUserAction";
import createUser from "@/modules/auth/actions/createUserAction";
import { CreateUserSchema } from "@/modules/auth/formSchemas/CreateUserFormSchema";
import DashboardError from "@/modules/dashboard/errors/DashboardError";
import withServerAction from "@/modules/dashboard/utils/withServerAction";
import { import {
Paper, Paper,
PasswordInput, PasswordInput,
@ -12,65 +16,53 @@ import {
Button, Button,
} from "@mantine/core"; } from "@mantine/core";
import { useForm } from "@mantine/form"; import { useForm } from "@mantine/form";
import { showNotification } from "@mantine/notifications";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
export interface RegisterFormSchema {
email: string;
password: string;
passwordConfirmation: string;
name: string;
}
export default function RegisterPage() { export default function RegisterPage() {
const [errorMessage, setErrorMessage] = useState(""); const [errorMessage, setErrorMessage] = useState("");
const form = useForm<RegisterFormSchema>({ const form = useForm<CreateUserSchema>({
initialValues: { initialValues: {
email: "", email: "",
password: "", plainPassword: "",
passwordConfirmation: "", plainPasswordConfirmation: "",
name: "", name: "",
}, },
validate: { validate: {
email: (value: string) => email: (value: string) =>
/^\S+@\S+$/.test(value) ? null : "Invalid email", /^\S+@\S+$/.test(value) ? null : "Invalid email",
password: (value: string) => plainPassword: (value: string) =>
value.length >= 6 value.length >= 6
? null ? null
: "Password should be at least 6 characters", : "Password should be at least 6 characters",
passwordConfirmation: (value: string, values: RegisterFormSchema) => plainPasswordConfirmation: (value: string, values: CreateUserSchema) =>
value === values.password ? null : "Passwords should match", value === values.plainPassword ? null : "Passwords should match",
name: (value: string) => name: (value: string) =>
value.length > 0 ? null : "Name is required", value.length > 0 ? null : "Name is required",
}, },
}); });
const handleSubmit = async (values: RegisterFormSchema) => { const handleSubmit = async (values: CreateUserSchema) => {
const formData = new FormData(); withServerAction(createUserAction, form.values)
Object.entries(values).forEach(([key, value]) => { .then((response) => {
formData.append(key, value); showNotification({message: "Register Success", color: "green"})
}); })
.catch((e) => {
const response = await createUser(formData); if (e instanceof DashboardError) {
if (e.errorCode === "INVALID_FORM_DATA") {
if (!response.success) { form.setErrors(e.formErrors ?? {});
setErrorMessage(response.error.message); } else {
setErrorMessage(`ERROR: ${e.message} (${e.errorCode})`);
if (response.error.errors) { }
const errors = Object.entries(response.error.errors).reduce( } else if (e instanceof Error) {
(prev, [k, v]) => { setErrorMessage(`ERROR: ${e.message}`);
prev[k] = v[0]; } else {
return prev; setErrorMessage(
}, `Unkown error is occured. Please contact administrator`
{} as { [k: string]: string } );
); }
})
form.setErrors(errors);
console.log(form.errors);
} else {
form.clearErrors();
}
}
}; };
return ( return (
@ -102,14 +94,14 @@ export default function RegisterPage() {
placeholder="Your password" placeholder="Your password"
name="password" name="password"
autoComplete="new-password" autoComplete="new-password"
{...form.getInputProps("password")} {...form.getInputProps("plainPassword")}
/> />
<PasswordInput <PasswordInput
label="Repeat Password" label="Repeat Password"
placeholder="Repeat yout password" placeholder="Repeat yout password"
name="passwordConfirmation" name="passwordConfirmation"
autoComplete="new-password" autoComplete="new-password"
{...form.getInputProps("passwordConfirmation")} {...form.getInputProps("plainPasswordConfirmation")}
/> />
</Stack> </Stack>

View File

@ -1,43 +0,0 @@
"use server";
import { z } from "zod";
import prisma from "@/core/db";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { hashPassword } from "../utils/hashPassword";
import { createJwtToken } from "../utils/createJwtToken";
import createUser from "../services/createUser";
/**
* Creates a new user in the system.
*
* @param formData - The form data containing user details.
* @returns An object indicating the result of the operation.
*/
export default async function createUserAction(formData: FormData) {
//TODO: Add Throttling
//TODO: Add validation check if the user is already logged in
try {
const parsedData = {
email: formData.get("email")?.toString() ?? "",
name: formData.get("name")?.toString() ?? "",
plainPassword: formData.get("password")?.toString() ?? "",
plainPasswordConfirmation:
formData.get("passwordConfirmation")?.toString() ?? "",
};
await createUser(parsedData);
redirect("/dashboard");
} catch (e: unknown) {
// Handle unexpected errors
console.error(e);
//@ts-ignore
console.log(e.message);
return {
success: false,
error: {
message:
"An unexpected error occurred on the server. Please try again or contact the administrator.",
},
};
}
}

View File

@ -0,0 +1,29 @@
"use server";
import { z } from "zod";
import prisma from "@/core/db";
import { cookies } from "next/headers";
import { redirect } from "next/navigation";
import { hashPassword } from "../utils/hashPassword";
import { createJwtToken } from "../utils/createJwtToken";
import createUser from "../services/createUser";
import ServerResponseAction from "@/modules/dashboard/types/ServerResponseAction";
import handleCatch from "@/modules/dashboard/utils/handleCatch";
import { CreateUserSchema } from "../formSchemas/CreateUserFormSchema";
/**
* Creates a new user in the system.
*
* @param formData - The form data containing user details.
* @returns An object indicating the result of the operation.
*/
export default async function createUserAction(formData: CreateUserSchema): Promise<ServerResponseAction> {
//TODO: Add Throttling
//TODO: Add validation check if the user is already logged in
try {
await createUser(formData);
redirect("/dashboard");
} catch (e) {
return handleCatch(e)
}
}