formik package added
This commit is contained in:
victorAnumudu
+3
-1
@@ -13,6 +13,7 @@
|
||||
"axios": "^1.7.9",
|
||||
"bootstrap": "^5.3.3",
|
||||
"dayjs": "^1.11.13",
|
||||
"formik": "^2.4.6",
|
||||
"react": "^18.3.1",
|
||||
"react-apexcharts": "^1.7.0",
|
||||
"react-big-calendar": "^1.17.0",
|
||||
@@ -23,7 +24,8 @@
|
||||
"react-scripts": "5.0.1",
|
||||
"redux": "^5.0.1",
|
||||
"sass": "^1.82.0",
|
||||
"web-vitals": "^2.1.4"
|
||||
"web-vitals": "^2.1.4",
|
||||
"yup": "^1.6.0"
|
||||
},
|
||||
"scripts": {
|
||||
"start": "react-scripts start -e .env.development",
|
||||
|
||||
@@ -1,13 +1,45 @@
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { Form, Formik } from "formik";
|
||||
import * as Yup from "yup";
|
||||
|
||||
import LoginImg from '../../assets/bg/login.svg'
|
||||
|
||||
import { Link, useNavigate } from 'react-router-dom'
|
||||
import siteLinks from '../../links/siteLinks'
|
||||
|
||||
const validationSchema = Yup.object().shape({
|
||||
email: Yup.string()
|
||||
.email("Wrong email format")
|
||||
.matches(
|
||||
/^[^0-9][a-zA-Z0-9._%+-]+@[a-zA-Z]+(\.[a-zA-Z]+)+$/,
|
||||
"Invalid email format"
|
||||
)
|
||||
.min(3, "Minimum 3 characters")
|
||||
.max(50, "Maximum 50 characters")
|
||||
.required("Email is required"),
|
||||
firstname: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
|
||||
lastname: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
|
||||
username: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
|
||||
password: Yup.string().min(3, "Minimum 3 characters").max(50, "Maximum 50 characters").required("Email is required"),
|
||||
})
|
||||
|
||||
const initialValues = {
|
||||
email: '',
|
||||
firstname: '',
|
||||
lastname: '',
|
||||
username: '',
|
||||
password: ''
|
||||
};
|
||||
|
||||
export default function Signup2() {
|
||||
|
||||
const navigate = useNavigate()
|
||||
|
||||
const signUp = (values, helpers) => {
|
||||
// helpers.resetForm()
|
||||
console.log('values', values, helpers)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="app">
|
||||
<div className="app-wrap">
|
||||
@@ -15,59 +47,69 @@ export default function Signup2() {
|
||||
<div className="bg-white">
|
||||
<div className="container-fluid p-0">
|
||||
<div className="row no-gutters">
|
||||
<div class="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div class="d-flex align-items-center h-100-vh">
|
||||
<div class="register p-5">
|
||||
<h1 class="mb-2">MERMS Panel</h1>
|
||||
<div className="col-sm-6 col-lg-5 col-xxl-3 align-self-center order-2 order-sm-1">
|
||||
<div className="d-flex align-items-center h-100-vh">
|
||||
<div className="register p-5">
|
||||
<h1 className="mb-2">MERMS Panel</h1>
|
||||
<p>Welcome, Please create your account.</p>
|
||||
<form class="mt-2 mt-sm-5">
|
||||
<div class="row">
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label">First Name*</label>
|
||||
<input type="text" class="form-control" placeholder="First Name" />
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={signUp}
|
||||
>
|
||||
{(props) => {
|
||||
return (
|
||||
<Form className='mt-2 mt-sm-5'>
|
||||
<div className="row">
|
||||
<div className="col-12 col-sm-6">
|
||||
<div className="form-group">
|
||||
<label className={`control-label ${(props.errors.firstname && props.touched.firstname) && 'text-danger'}`}>First Name*</label>
|
||||
<input type="text" name='firstname' className="form-control" placeholder="First Name" value={props.values.firstname} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 col-sm-6">
|
||||
<div class="form-group">
|
||||
<label class="control-label">Last Name*</label>
|
||||
<input type="text" class="form-control" placeholder="Last Name" />
|
||||
<div className="col-12 col-sm-6">
|
||||
<div className="form-group">
|
||||
<label className={`control-label ${(props.errors.lastname && props.touched.lastname) && 'text-danger'}`}>Last Name*</label>
|
||||
<input type="text" name='lastname' className="form-control" placeholder="Last Name" value={props.values.lastname} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label">Email*</label>
|
||||
<input type="email" class="form-control" placeholder="Email" />
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`control-label ${(props.errors.email && props.touched.email) && 'text-danger'}`}>Email*</label>
|
||||
<input type="email" name='email' className="form-control" placeholder="Email" value={props.values.email} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label">Username*</label>
|
||||
<input type="text" class="form-control" placeholder="Username" />
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`control-label ${(props.errors.username && props.touched.username) && 'text-danger'}`}>Username*</label>
|
||||
<input type="text" name='username' className="form-control" placeholder="Username" value={props.values.username} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-group">
|
||||
<label class="control-label">Password*</label>
|
||||
<input type="password" class="form-control" placeholder="Password" />
|
||||
<div className="col-12">
|
||||
<div className="form-group">
|
||||
<label className={`control-label ${(props.errors.password && props.touched.password) && 'text-danger'}`}>Password*</label>
|
||||
<input type="password" name='password' className="form-control" placeholder="Password" value={props.values.password} onChange={props.handleChange} />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="gridCheck" />
|
||||
<label class="form-check-label" for="gridCheck">
|
||||
<div className="col-12">
|
||||
<div className="form-check">
|
||||
<input className="form-check-input" type="checkbox" id="gridCheck" />
|
||||
<label className="form-check-label" htmlFor="gridCheck">
|
||||
I accept terms & policy
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12 mt-3 text-end">
|
||||
<button type='button' onClick={()=>navigate(siteLinks.dash)} class="btn btn-primary text-uppercase">Sign up</button>
|
||||
<div className="col-12 mt-3 text-end">
|
||||
<button type='submit' className="btn btn-primary text-uppercase">Sign up</button>
|
||||
</div>
|
||||
<div class="col-12 mt-3">
|
||||
<div className="col-12 mt-3">
|
||||
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
}}
|
||||
</Formik>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user