MERMS/MermsPanelReactJS
1
0
Fork 0
Code Issues Pull Requests 1 Releases Activity

login input label font color updated

Browse Source
This commit is contained in:
victorAnumudu
2024-12-17 13:25:17 +01:00
parent 4258e1a615
commit f6e714ed4b
3 changed files with 73 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/auth/Signup2.jsx
+58 -48
View File
@@ -19,16 +19,16 @@ const validationSchema = Yup.object().shape({
.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"),
// 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: ''
// username: '',
// password: ''
};
export default function Signup2() {
@@ -61,50 +61,60 @@ export default function Signup2() {
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 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 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 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 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 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 className="col-12 mt-3 text-end">
<button type='submit' className="btn btn-primary text-uppercase">Sign up</button>
</div>
<div className="col-12 mt-3">
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
</div>
<>
<div className="col-12 col-sm-6">
<div className="form-group">
<label className={`text-black 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 className="col-12 col-sm-6">
<div className="form-group">
<label className={`text-black 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 className="col-12">
<div className="form-group">
<label className={`text-black 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 className="col-12">
<div className="form-group">
<label className={`text-black 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 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 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 className="col-12 mt-3 text-end">
<button type='submit' className="btn btn-primary text-uppercase">Sign up</button>
</div>
</>
<div className='col-12'>
<div className="card w-100 justify-content-between align-items-center" style={{height: '200px'}}>
<p className='p-2 text-black'>Check your email to continue.</p>
<p className='p-2 text-primary'>Home</p>
</div>
</div>
<div className="col-12 mt-3">
<p>Already have an account ?<Link to={siteLinks.login}> Sign In</Link></p>
</div>
</div>
</Form>
);