feat(SW-360): Added register form with server action
This commit is contained in:
Tobias Johansson
committed by
Chuma McPhoy
Chuma McPhoy
parent
c69e4b4b29
commit
e086857072
53
components/Forms/Register/form.module.css
Normal file
53
components/Forms/Register/form.module.css
Normal file
@@ -0,0 +1,53 @@
|
||||
.container {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x3);
|
||||
}
|
||||
|
||||
.title {
|
||||
grid-area: title;
|
||||
}
|
||||
|
||||
.form {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x5);
|
||||
grid-area: form;
|
||||
}
|
||||
|
||||
.btnContainer {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
gap: var(--Spacing-x1);
|
||||
grid-area: buttons;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
.form {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.btnContainer {
|
||||
align-self: center;
|
||||
flex-direction: row;
|
||||
gap: var(--Spacing-x2);
|
||||
justify-self: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.password,
|
||||
.user,
|
||||
.terms {
|
||||
align-self: flex-start;
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
.container {
|
||||
display: grid;
|
||||
gap: var(--Spacing-x2);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.divider {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
156
components/Forms/Register/index.tsx
Normal file
156
components/Forms/Register/index.tsx
Normal file
@@ -0,0 +1,156 @@
|
||||
"use client"
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod"
|
||||
import { FormProvider, useForm } from "react-hook-form"
|
||||
import { useIntl } from "react-intl"
|
||||
|
||||
import { registerUser } from "@/actions/registerUser"
|
||||
import Button from "@/components/TempDesignSystem/Button"
|
||||
import Divider from "@/components/TempDesignSystem/Divider"
|
||||
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
|
||||
import CountrySelect from "@/components/TempDesignSystem/Form/Country"
|
||||
import DateSelect from "@/components/TempDesignSystem/Form/Date"
|
||||
import Input from "@/components/TempDesignSystem/Form/Input"
|
||||
import NewPassword from "@/components/TempDesignSystem/Form/NewPassword"
|
||||
import Phone from "@/components/TempDesignSystem/Form/Phone"
|
||||
import Link from "@/components/TempDesignSystem/Link"
|
||||
import Body from "@/components/TempDesignSystem/Text/Body"
|
||||
import { toast } from "@/components/TempDesignSystem/Toasts"
|
||||
|
||||
import { RegisterSchema, registerSchema } from "./schema"
|
||||
|
||||
import styles from "./form.module.css"
|
||||
|
||||
export default function Form() {
|
||||
const intl = useIntl()
|
||||
const methods = useForm<RegisterSchema>({
|
||||
defaultValues: {
|
||||
firstName: "",
|
||||
lastName: "",
|
||||
email: "",
|
||||
phoneNumber: "",
|
||||
dateOfBirth: "",
|
||||
address: {
|
||||
countryCode: "",
|
||||
zipCode: "",
|
||||
},
|
||||
password: "",
|
||||
termsAccepted: false,
|
||||
},
|
||||
mode: "all",
|
||||
criteriaMode: "all",
|
||||
resolver: zodResolver(registerSchema),
|
||||
reValidateMode: "onChange",
|
||||
})
|
||||
const country = intl.formatMessage({ id: "Country" })
|
||||
const email = `${intl.formatMessage({ id: "Email" })} ${intl.formatMessage({ id: "Address" }).toLowerCase()}`
|
||||
const phoneNumber = intl.formatMessage({ id: "Phone number" })
|
||||
const zipCode = intl.formatMessage({ id: "Zip code" })
|
||||
|
||||
async function handleSubmit(data: RegisterSchema) {
|
||||
console.log("submit", data)
|
||||
const isSuccessResponse = await registerUser(data)
|
||||
if (!isSuccessResponse) {
|
||||
toast.error("Something went wrong!")
|
||||
} else {
|
||||
// TODO: Toast should be removed and we should show a different page
|
||||
toast.success("Form submitted successfully")
|
||||
// should we navigate to sub route like /signup/success ?
|
||||
// router.push("/")
|
||||
|
||||
methods.reset()
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<section className={styles.container}>
|
||||
<FormProvider {...methods}>
|
||||
<form
|
||||
/**
|
||||
* Ignoring since ts doesn't recognize that tRPC
|
||||
* parses FormData before reaching the route
|
||||
* @ts-ignore */
|
||||
action={registerUser}
|
||||
className={styles.form}
|
||||
id="register"
|
||||
onSubmit={methods.handleSubmit(handleSubmit)}
|
||||
>
|
||||
<section className={styles.user}>
|
||||
<div className={styles.container}>
|
||||
<Input
|
||||
label={"firstName"}
|
||||
name="firstName"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
<Input
|
||||
label={"lastName"}
|
||||
name="lastName"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
</div>
|
||||
<DateSelect
|
||||
name="dateOfBirth"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
<div className={styles.container}>
|
||||
<Input
|
||||
label={zipCode}
|
||||
name="address.zipCode"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
<CountrySelect
|
||||
label={country}
|
||||
name="address.countryCode"
|
||||
registerOptions={{ required: true }}
|
||||
/>
|
||||
</div>
|
||||
<Input
|
||||
label={email}
|
||||
name="email"
|
||||
registerOptions={{ required: true }}
|
||||
type="email"
|
||||
/>
|
||||
<Phone label={phoneNumber} name="phoneNumber" />
|
||||
</section>
|
||||
<Divider className={styles.divider} color="subtle" />
|
||||
<section className={styles.password}>
|
||||
<header>
|
||||
<Body textTransform="bold">
|
||||
{intl.formatMessage({ id: "Password" })}
|
||||
</Body>
|
||||
</header>
|
||||
<NewPassword
|
||||
name="password"
|
||||
placeholder="Password"
|
||||
label={intl.formatMessage({ id: "Password" })}
|
||||
/>
|
||||
</section>
|
||||
<section className={styles.terms}>
|
||||
<header>
|
||||
<Body textTransform="bold">
|
||||
{intl.formatMessage({ id: "Terms and conditions" })}
|
||||
</Body>
|
||||
</header>
|
||||
<Checkbox name="termsAccepted" registerOptions={{ required: true }}>
|
||||
<Body>
|
||||
{intl.formatMessage({
|
||||
id: "Yes, I accept the Terms and conditions for Scandic Friends and understand that Scandic will process my personal data in accordance with",
|
||||
})}{" "}
|
||||
<Link variant="underscored" color="peach80" href="/privacy">
|
||||
{intl.formatMessage({ id: "Scandic's Privacy Policy." })}
|
||||
</Link>
|
||||
</Body>
|
||||
</Checkbox>
|
||||
</section>
|
||||
<Button
|
||||
type="submit"
|
||||
intent="primary"
|
||||
disabled={methods.formState.isSubmitting}
|
||||
>
|
||||
{intl.formatMessage({ id: "Sign up to Scandic Friends" })}
|
||||
</Button>
|
||||
</form>
|
||||
</FormProvider>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
35
components/Forms/Register/schema.ts
Normal file
35
components/Forms/Register/schema.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { z } from "zod"
|
||||
|
||||
import { passwordValidator } from "@/utils/passwordValidator"
|
||||
import { phoneValidator } from "@/utils/phoneValidator"
|
||||
|
||||
export const registerSchema = z.object({
|
||||
firstName: z
|
||||
.string()
|
||||
.max(250)
|
||||
.refine((value) => value.trim().length > 0, {
|
||||
message: "First name is required",
|
||||
}),
|
||||
lastName: z
|
||||
.string()
|
||||
.max(250)
|
||||
.refine((value) => value.trim().length > 0, {
|
||||
message: "Last name is required",
|
||||
}),
|
||||
email: z.string().max(250).email(),
|
||||
phoneNumber: phoneValidator(
|
||||
"Phone is required",
|
||||
"Please enter a valid phone number"
|
||||
),
|
||||
dateOfBirth: z.string().min(1),
|
||||
address: z.object({
|
||||
countryCode: z.string(),
|
||||
zipCode: z.string().min(1),
|
||||
}),
|
||||
password: passwordValidator("Password is required"),
|
||||
termsAccepted: z.boolean().refine((value) => value === true, {
|
||||
message: "You must accept the terms and conditions",
|
||||
}),
|
||||
})
|
||||
|
||||
export type RegisterSchema = z.infer<typeof registerSchema>
|
||||
Reference in New Issue
Block a user