129 lines
3.4 KiB
TypeScript
129 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
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 {
|
|
Paper,
|
|
PasswordInput,
|
|
Stack,
|
|
Text,
|
|
TextInput,
|
|
Group,
|
|
Anchor,
|
|
Button,
|
|
} from "@mantine/core";
|
|
import { useForm } from "@mantine/form";
|
|
import { showNotification } from "@mantine/notifications";
|
|
import React, { useEffect, useState } from "react";
|
|
|
|
export default function RegisterPage() {
|
|
const [errorMessage, setErrorMessage] = useState("");
|
|
|
|
const form = useForm<CreateUserSchema>({
|
|
initialValues: {
|
|
email: "",
|
|
plainPassword: "",
|
|
plainPasswordConfirmation: "",
|
|
name: "",
|
|
},
|
|
validate: {
|
|
email: (value: string) =>
|
|
/^\S+@\S+$/.test(value) ? null : "Invalid email",
|
|
plainPassword: (value: string) =>
|
|
value.length >= 6
|
|
? null
|
|
: "Password should be at least 6 characters",
|
|
plainPasswordConfirmation: (value: string, values: CreateUserSchema) =>
|
|
value === values.plainPassword ? null : "Passwords should match",
|
|
name: (value: string) =>
|
|
value.length > 0 ? null : "Name is required",
|
|
},
|
|
});
|
|
|
|
const handleSubmit = async (values: CreateUserSchema) => {
|
|
withServerAction(createUserAction, form.values)
|
|
.then((response) => {
|
|
showNotification({message: "Register Success", color: "green"})
|
|
})
|
|
.catch((e) => {
|
|
if (e instanceof DashboardError) {
|
|
if (e.errorCode === "INVALID_FORM_DATA") {
|
|
form.setErrors(e.formErrors ?? {});
|
|
} else {
|
|
setErrorMessage(`ERROR: ${e.message} (${e.errorCode})`);
|
|
}
|
|
} else if (e instanceof Error) {
|
|
setErrorMessage(`ERROR: ${e.message}`);
|
|
} else {
|
|
setErrorMessage(
|
|
`Unkown error is occured. Please contact administrator`
|
|
);
|
|
}
|
|
})
|
|
};
|
|
|
|
return (
|
|
<div className="w-screen h-screen flex items-center justify-center">
|
|
<Paper radius="md" p="xl" withBorder w={400}>
|
|
<Text size="lg" fw={500} mb={30}>
|
|
Register
|
|
</Text>
|
|
<form
|
|
onSubmit={form.onSubmit((values) => handleSubmit(values))}
|
|
>
|
|
<Stack>
|
|
<TextInput
|
|
label="Name"
|
|
placeholder="Enter your name"
|
|
name="name"
|
|
autoComplete="name"
|
|
{...form.getInputProps("name")}
|
|
/>
|
|
<TextInput
|
|
label="Email"
|
|
placeholder="Enter your email"
|
|
name="email"
|
|
autoComplete="email"
|
|
{...form.getInputProps("email")}
|
|
/>
|
|
<PasswordInput
|
|
label="Password"
|
|
placeholder="Your password"
|
|
name="password"
|
|
autoComplete="new-password"
|
|
{...form.getInputProps("plainPassword")}
|
|
/>
|
|
<PasswordInput
|
|
label="Repeat Password"
|
|
placeholder="Repeat yout password"
|
|
name="passwordConfirmation"
|
|
autoComplete="new-password"
|
|
{...form.getInputProps("plainPasswordConfirmation")}
|
|
/>
|
|
</Stack>
|
|
|
|
<Group justify="space-between" mt="xl">
|
|
<Anchor
|
|
component="a"
|
|
type="button"
|
|
c="dimmed"
|
|
// onClick={() => toggle()}
|
|
size="xs"
|
|
href="/login"
|
|
>
|
|
Already have an account? Login
|
|
</Anchor>
|
|
|
|
<Button type="submit" radius="xl">
|
|
Register
|
|
</Button>
|
|
</Group>
|
|
</form>
|
|
</Paper>
|
|
</div>
|
|
);
|
|
}
|