Untitled
raw download clone
JSX
views 10
,
size 13669 b
import React, { useEffect, useState } from 'react'
import { Link, useLocation, useNavigate, } from 'react-router-dom'
import { useForm } from "react-hook-form";
import { useDispatch, useSelector } from 'react-redux';
import { signin, userregister } from '../actions/userAction';
import { ErrorMessage } from '@hookform/error-message';


export const RegisterScreen = () => {

    const data = useSelector(state => state.state)


    const [passwordShown, setPasswordShown] = useState(false);
    const { register, handleSubmit, formState: { errors } } = useForm();
    const { loading, userInfo } = useSelector(state => state.userSignin)
    const { state } = useLocation();

    const navigate = useNavigate()
    console.log(errors)



    const dispatch = useDispatch()
    const submitHandler = (data) => {

        dispatch(userregister(data))

    }


    useEffect(() => {
        if (userInfo) {


            navigate(state?.path || "/");


        }
    }, [userInfo, navigate, state])

    return (
        <div className="page-content footer-clear">
            {/* Page Title*/}
            <div className="pt-3">
                <div className="page-title d-flex">
                    <div className="align-self-center me-auto">
                        <p className="color-white opacity-50 header-date" />
                        <h1 className="color-white">Mspay</h1>
                    </div>

                </div>
            </div>
            <svg id="header-deco" viewBox="0 0 1440 600" xmlns="http://www.w3.org/2000/svg" className="transition duration-300 ease-in-out delay-150">
                <path id="header-deco-1" d="M 0,600 C 0,600 0,120 0,120 C 92.36363636363635,133.79904306220095 184.7272727272727,147.59808612440193 287,148 C 389.2727272727273,148.40191387559807 501.4545454545455,135.40669856459328 592,129 C 682.5454545454545,122.5933014354067 751.4545454545455,122.77511961722489 848,115 C 944.5454545454545,107.22488038277511 1068.7272727272727,91.49282296650718 1172,91 C 1275.2727272727273,90.50717703349282 1357.6363636363635,105.25358851674642 1440,120 C 1440,120 1440,600 1440,600 Z" />
                <path id="header-deco-2" d="M 0,600 C 0,600 0,240 0,240 C 98.97607655502392,258.2105263157895 197.95215311004785,276.4210526315789 278,282 C 358.04784688995215,287.5789473684211 419.16746411483257,280.5263157894737 524,265 C 628.8325358851674,249.4736842105263 777.377990430622,225.47368421052633 888,211 C 998.622009569378,196.52631578947367 1071.3205741626793,191.57894736842107 1157,198 C 1242.6794258373207,204.42105263157893 1341.3397129186603,222.21052631578948 1440,240 C 1440,240 1440,600 1440,600 Z" />
                <path id="header-deco-3" d="M 0,600 C 0,600 0,360 0,360 C 65.43540669856458,339.55023923444975 130.87081339712915,319.1004784688995 245,321 C 359.12918660287085,322.8995215311005 521.9521531100479,347.1483253588517 616,352 C 710.0478468899521,356.8516746411483 735.3205741626795,342.3062200956938 822,333 C 908.6794258373205,323.6937799043062 1056.7655502392345,319.62679425837325 1170,325 C 1283.2344497607655,330.37320574162675 1361.6172248803828,345.1866028708134 1440,360 C 1440,360 1440,600 1440,600 Z" />
                <path id="header-deco-4" d="M 0,600 C 0,600 0,480 0,480 C 70.90909090909093,494.91866028708137 141.81818181818187,509.8373205741627 239,499 C 336.18181818181813,488.1626794258373 459.6363636363636,451.5693779904306 567,446 C 674.3636363636364,440.4306220095694 765.6363636363636,465.88516746411483 862,465 C 958.3636363636364,464.11483253588517 1059.8181818181818,436.8899521531101 1157,435 C 1254.1818181818182,433.1100478468899 1347.090909090909,456.555023923445 1440,480 C 1440,480 1440,600 1440,600 Z" />
            </svg>
            <div className="card card-style">
                <div className="content">
                    <h1 className="mb-0 pt-2">Sign Up</h1>
                    <p>
                        Create a Mspay Account
                    </p>

                    <form onSubmit={handleSubmit(submitHandler)} className="needs-validation" noValidate>

                        <div className="form-custom form-label form-icon mb-3">
                            <i className="fas fa-user-check fa-20"></i>
                            <input type="text" id="c1" placeholder="Username" className={errors.username ? "form-control is-invalid rounded-xs" : "form-control rounded-xs"}  {...register("username", {
                                required: "username is required",

                                pattern: {
                                    value: new RegExp("^[A-Za-z|0-9]{3,32}$"),
                                    message: "Enter Valid Username",
                                },
                            })} />
                            <label htmlFor="c1" className="color-theme">Username</label>

                            <ErrorMessage
                                errors={errors}
                                name="username"
                                render={({ message }) => <div className="invalid-feedback">
                                    {message}
                                </div>}
                            />
                        </div>

                        <div className="form-custom form-label form-icon mb-3">
                            <i className="fas fa-user-circle font-20"></i>
                            <input type="text" id="c1" placeholder="First Name" className={errors.firstname ? "form-control is-invalid rounded-xs" : "form-control rounded-xs"}  {...register("firstname", {
                                required: "firstname is required", minLength: {
                                    value: 3,
                                    message: "Enter Valid firstname",
                                },
                                pattern: {
                                    value: new RegExp("^[A-Za-z]{3,32}$"),
                                    message: "Enter Valid firstname",
                                },
                            })} />
                            <label htmlFor="c1" className="color-theme">First Name</label>


                            <ErrorMessage
                                errors={errors}
                                name="firstname"
                                render={({ message }) => <div className="invalid-feedback">
                                    {message}
                                </div>}
                            />
                        </div>

                        <div className="form-custom form-label form-icon mb-3">
                            <i className="bi bi-person-circle font-20" />
                            <input type="text" id="c1" placeholder="Last Name" className={errors.lastname ? "form-control is-invalid rounded-xs" : "form-control rounded-xs"}  {...register("lastname", {
                                required: "lastname is required", minLength: {
                                    value: 3,
                                    message: "Enter Valid Lastname",
                                },
                                pattern: {
                                    value: new RegExp("^[A-Za-z]{3,32}$"),
                                    message: "Enter Valid Lastname",
                                },
                            })} />
                            <label htmlFor="c1" className="color-theme">Last Name</label>

                            <ErrorMessage
                                errors={errors}
                                name="lastname"
                                render={({ message }) => <div className="invalid-feedback">
                                    {message}
                                </div>}
                            />
                        </div>

                        <div className="form-custom form-label form-icon mb-3">
                            <i className="fa fa-phone font-20" />
                            <input type="number" id="c1" placeholder="Phone Number" className={errors.phone ? "form-control is-invalid rounded-xs" : "form-control rounded-xs"}  {...register("phone", {
                                required: "phone is required", minLength: {
                                    value: 11,
                                    message: "Enter Valid Phone Number",
                                },
                                pattern: {
                                    value: new RegExp("^([0]{1})([7-9]{1})([0|1]{1})([0-9]{8})"),
                                    message: "Enter Valid Phone Number without country code,090xxxxxxxx",
                                },
                            })} />
                            <label htmlFor="c1" className="color-theme">Phone Number</label>

                            <ErrorMessage
                                errors={errors}
                                name="phone"
                                render={({ message }) => <div className="invalid-feedback">
                                    {message}
                                </div>}
                            />
                        </div>
                        <div className="form-custom form-label form-icon mb-3">
                            <i className="bi bi-at font-20" />
                            <input type="email" id="c1" placeholder="Email" className={errors.email ? "form-control is-invalid rounded-xs" : "form-control rounded-xs"}  {...register("email", {
                                required: "email is required", pattern: {
                                    value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                                    message: "Enter a valid e-mail address",
                                },
                            })} />
                            <label htmlFor="c1" className="color-theme">Email</label>

                            <ErrorMessage
                                errors={errors}
                                name="email"
                                render={({ message }) => <div className="invalid-feedback">
                                    {message}
                                </div>}
                            />
                        </div>
                        <div className="form-custom form-label form-icon mb-3">
                            <i className="bi bi-key font-14" />
                            <input type={passwordShown ? "text" : "password"} className={errors.password ? "form-control rounded-xs is-invalid" : "form-control rounded-xs"} placeholder="Password" {...register("password", {
                                required: "Password is required.", pattern: {
                                    value: new RegExp("^(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])(?=.*[?!~|'@#$%^&+=])(?=.{8,})"),
                                    message: "Enter a valid Password Must contain at least one  number and one uppercase and lowercase letter,one special character and at least 8 or more characters, i.e Test2001?",
                                },
                            })} />
                            <label htmlFor="c1" className="color-theme">Password</label>
                            <span onClick={() => setPasswordShown(!passwordShown)} className={passwordShown ? "bi bi-eye-slash font-20" : "bi bi-eye font-20 "}></span>


                            <ErrorMessage
                                errors={errors}
                                name="password"
                                render={({ message }) => <div className="invalid-feedback">
                                    {message}
                                </div>}
                            />

                        </div>

                        <div className="form-check form-check-custom">
                            <input className={errors.accept_terms ? "form-check-input is-invalid" : "form-check-input"}    {...register("accept_terms", { required: "Accept terms and conditions ", })} type="checkbox" defaultValue id="c2a" />
                            <label className="form-check-label font-12" htmlFor="c2a">I agree with the <Link to="#">Terms and Conditions</Link>.</label>
                            <i className="is-checked color-highlight font-13 bi bi-check-circle-fill" />
                            <i className="is-unchecked color-highlight font-13 bi bi-circle" />
                            <ErrorMessage
                                errors={errors}
                                name="accept_terms"
                                render={({ message }) => <div className="invalid-feedback">
                                    {message}
                                </div>}
                            />
                        </div>

                        <button type="submit" className="w-100 btn btn-full gradient-highlight shadow-bg shadow-bg-s mt-4" disabled={loading && true}> {loading ? <> <i className="fas fa-circle-notch fa-spin"></i> Processing... </> : 'Create Account'}</button>

                        <div className=" text-center">
                            <Link to="/signin" className="font-11 color-theme opacity-40 pt-4 d-block">Sign In Account</Link>
                        </div>
                    </form>
                </div>
            </div>
        </div>

    )
}
close fullscreen
Login or Register to edit or fork this paste. It's free.