diff --git a/client/src/pages/Book.tsx b/client/src/pages/Book.tsx index eca31428a723e0cb88b7c763550547d5ba268dbe..ed590caac236c9d110009fdf3be480459d567947 100644 --- a/client/src/pages/Book.tsx +++ b/client/src/pages/Book.tsx @@ -1,6 +1,8 @@ import React from "react"; import { Button, Col, Container, Form, Row } from "react-bootstrap"; import { Controller, useForm } from "react-hook-form"; +import { useTranslation } from "react-i18next"; +import validator from "validator"; import Divider from "../components/Divider"; import Modal from "../components/Modal"; @@ -15,17 +17,20 @@ type FormData = { }; function Book() { - const { control, handleSubmit } = useForm<FormData>(); + const { + control, + handleSubmit, + formState: { errors }, + } = useForm<FormData>({ mode: "onBlur" }); + const { t, i18n } = useTranslation(); const onSubmit = (data: FormData) => console.log(data); return ( <Container className="pt-5"> <Row> <Col xs={{ span: 10, offset: 1 }}> <Modal> - <h1 className="text-center">Book a Boat!</h1> - <p className="text-center"> - Please enter the information for your booking - </p> + <h1 className="text-center">{t("book.title")}</h1> + <p className="text-center">{t("book.subtitle")}</p> <Divider /> <Form onSubmit={handleSubmit(onSubmit)}> <Controller @@ -33,84 +38,142 @@ function Book() { control={control} render={({ field }) => ( <div className="mb-2"> - <Form.Label>Boat name</Form.Label> + <Form.Label>{t("book.labelBoatName")}</Form.Label> <Form.Control type="text" {...field} /> </div> )} + rules={{ + required: { + value: true, + message: t("book.messages.required", { + val: t("book.labelBoatName"), + }), + }, + }} /> <Controller name="startTime" control={control} render={({ field }) => ( <div className="mb-2"> - <Form.Label>Start time</Form.Label> + <Form.Label>{t("book.labelStartTime")}</Form.Label> <Form.Control type="text" {...field} /> </div> )} + rules={{ + required: { + value: true, + message: t("book.messages.required", { + val: t("book.labelStartTime"), + }), + }, + pattern: { + value: /(((0|1)\d)|(2[0-3])):[0-5]\d/, + message: t("book.messages.invalidTime", { + val: t("book.labelStartTime"), + }), + }, + }} /> <Controller name="estimatedEndTime" control={control} render={({ field }) => ( <div className="mb-2"> - <Form.Label>Estimated end time</Form.Label> + <Form.Label>{t("book.labelEstimatedEndTime")}</Form.Label> <Form.Control type="text" {...field} /> </div> )} + rules={{ + required: { + value: true, + message: t("book.messages.required", { + val: t("book.labelEstimatedEndTime"), + }), + }, + pattern: { + value: /(((0|1)\d)|(2[0-3])):[0-5]\d/, + message: t("book.messages.invalidTime", { + val: t("book.labelEstimatedEndTime"), + }), + }, + }} /> <Controller name="destination" control={control} render={({ field }) => ( <div className="mb-2"> - <Form.Label>Destination</Form.Label> - <Form.Control type="text" {...field} /> - </div> - )} - /> - <Controller - name="name" - control={control} - render={({ field }) => ( - <div className="mb-2"> - <Form.Label>Destination</Form.Label> + <Form.Label>{t("book.labelDestination")}</Form.Label> <Form.Control type="text" {...field} /> </div> )} + rules={{ + required: { + value: true, + message: t("book.messages.required", { + val: t("book.labelDestination"), + }), + }, + }} /> <Controller name="email" control={control} render={({ field }) => ( <div className="mb-2"> - <Form.Label>Your Mail</Form.Label> + <Form.Label>{t("book.labelEmail")}</Form.Label> <Form.Control type="email" {...field} /> </div> )} + rules={{ + required: { + value: true, + message: t("book.messages.required", { + val: t("book.labelEmail"), + }), + }, + validate: (value: string) => + validator.isEmail(value) || + t("book.messages.invalidEmail").toString(), + }} /> <Controller name="name" control={control} render={({ field }) => ( <div className="mb-2"> - <Form.Label>Your Name</Form.Label> + <Form.Label>{t("book.labelName")}</Form.Label> <Form.Control type="text" {...field} /> </div> )} + rules={{ + required: { + value: true, + message: t("book.messages.required", { + val: t("book.labelName"), + }), + }, + }} /> <Controller name="annotations" control={control} render={({ field }) => ( <div className="mb-2"> - <Form.Label>Annotations (optional)</Form.Label> + <Form.Label>{t("book.labelAnnotations")}</Form.Label> <Form.Control as="textarea" type="text" {...field} /> </div> )} /> <Button type="submit" variant="secondary" className="mt-2 w-100"> - Book this boat! + {t("book.buttonBookBoat")} </Button> + <div className="mt-2"> + {Object.values(errors).map((error) => ( + <p className="m-0 text-center text-danger">{error.message}</p> + ))} + </div> </Form> </Modal> </Col>