keralawaterauthority/components/form/SignupForm.js

import { ErrorMessage, Field, Form, Formik } from "formik";
import * as Yup from "yup";
import AuthIcon from "./authselection/AuthIcon";
import Link from "next/link";

const initialValues = {
    fullName: "",
    email: "",
    password: "",
    acceptTerms: false,
};

const SignupFormSchema = Yup.object().shape({
    fullName: Yup.string().required("Full is required"),
    email: Yup.string().email("Email is invalid").required("Email is required"),
    password: Yup.string()
        .min(6, "Password must be at least 6 characters")
        .required("Password is required"),
    acceptTerms: Yup.bool().oneOf([true], "Accept Ts & Cs is required"),
});

function SignupForm() {
    return (
        <>
             <Formik
                initialValues={initialValues}
               
                onSubmit={(fields) => {
                    alert(
                        "SUCCESS!! :-)\n\n" + JSON.stringify(fields, null, 4)
                    );
                }}
            >
                {({ errors, status, touched }) => (
                    <Form>
                        <div className="row">

                            <div className="col-12 mb-1 d-flex justify-content-around">
                                <input type="radio" id="html" className="d-none" name="fav_language" value="HTML" />
                                <label className="auth-icon-label" for="html">
                                        <AuthIcon isActive={true} title="Consumer"  icon="user" />
                                </label>
                                <input className="d-none" type="radio" id="css" name="fav_language" value="CSS" />
                                <label className="auth-icon-label" for="css">
                                <AuthIcon title="Employee"  icon="address-card" />
                                </label>
                                <input className="d-none" type="radio" id="javascript" name="fav_language" value="JavaScript" />
                                <label className="auth-icon-label" for="javascript">
                                <AuthIcon title="Plumber"  icon="gear" />
                                </label>

                            </div>

                            <div className="col-12 mb-1">
                                <label className="form-label">Name</label>
                                <Field
                                    name="name"
                                    type="text"
                                    className={
                                        "form-control" +
                                        (errors.email && touched.email
                                            ? " is-invalid"
                                            : "")
                                    }
                                />
                                <ErrorMessage
                                    name="name"
                                    component="div"
                                    className="invalid-feedback"
                                />
                            </div>
                            <div className="col-12 mb-1">
                                <label className="form-label">Email</label>
                                <Field
                                    name="email"
                                    type="text"
                                    className={
                                        "form-control" +
                                        (errors.email && touched.email
                                            ? " is-invalid"
                                            : "")
                                    }
                                />
                                <ErrorMessage
                                    name="email"
                                    component="div"
                                    className="invalid-feedback"
                                />
                            </div>

                            <div className="col-12 mb-1">
                                <label className="form-label">Number</label>
                                <Field
                                    name="number"
                                    type="number"
                                    className={
                                        "form-control" +
                                        (errors.email && touched.email
                                            ? " is-invalid"
                                            : "")
                                    }
                                />
                                <ErrorMessage
                                    name="number"
                                    component="div"
                                    className="invalid-feedback"
                                />
                            </div>



                            <div className="col-12 mb-1">
                                <label className="form-label">Password</label>
                                <Field
                                    name="password"
                                    type="text"
                                    className={
                                        "form-control" +
                                        (errors.password && touched.password
                                            ? " is-invalid"
                                            : "")
                                    }
                                />
                                <ErrorMessage
                                    name="password"
                                    component="div"
                                    className="invalid-feedback"
                                />
                            </div>
                            <div className="col-6">
                                <div className="form-check">
                                    <Field
                                        type="checkbox"
                                        name="acceptTerms"
                                        className={
                                            "form-check-input "
                                        }
                                    />
                                    <label
                                        className="form-check-label"
                                    >
                                        Remember me
                                    </label>
                                </div>
                            </div>
                            <div className="col-6 text-end">
                                <Link href="/reset">
                                    <a>Forgot Password?</a>
                                </Link>
                            </div>
                        </div>

                        <div className="mt-1 d-grid gap-2">
                            <button
                                type="submit"
                                className="btn btn-primary mr-2"
                            >
                                Sign Up
                            </button>
                        </div>
                    </Form>
                )}
            </Formik>
        </>
    );
}
export default SignupForm;