Skip to content

Commit 648f68b

Browse files
sirwisdomsirwisdom
committed
feat: SigUp Page styling completed
1 parent a3ed122 commit 648f68b

File tree

3 files changed

+228
-7
lines changed

3 files changed

+228
-7
lines changed

‎src/components/Signup/Signup.jsx‎

Lines changed: 121 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,125 @@
1-
import React from 'react';
1+
import React, { useState } from 'react';
2+
import { Formik, Form, Field } from 'formik';
3+
import * as yup from 'yup';
4+
import { Link } from 'react-router-dom';
25

3-
function Signup() {
6+
import './signup.scss';
7+
import { useDispatch, useSelector } from 'react-redux';
8+
import { signUpUser } from '../../redux/actions/userActions';
9+
10+
const SignUp = () => {
11+
const initialValues = {
12+
firstName: '',
13+
lastName: '',
14+
email: '',
15+
phoneNumber: '',
16+
password: '',
17+
confirmPassword: ''
18+
};
19+
20+
const dispatch = useDispatch();
21+
22+
let loginSchema = yup.object().shape({
23+
firstName: yup.string().required(),
24+
lastName: yup.string().required(),
25+
phoneNumber: yup.string().required(),
26+
email: yup.string().email().required(),
27+
password: yup.string().required(),
28+
confirmPassword: yup.string().required(),
29+
termsAndCondition: yup.string().required()
30+
});
31+
32+
const handleSubmit = (data) => {
33+
dispatch(signUpUser(data));
34+
};
435
return (
5-
<div>
6-
<h3>Hellow Signup</h3>
7-
</div>
36+
<>
37+
<div className="signup-form-wrapper">
38+
<h2 className="welcome-text">Welcome to FarmReach</h2>
39+
<div className="form-container">
40+
<p>
41+
<strong>Let's Get Started</strong>
42+
</p>
43+
<div className="signup-form">
44+
<Formik
45+
initialValues={initialValues}
46+
validationSchema={loginSchema}
47+
validateOnChange={true}
48+
validateOnBlur={true}
49+
onSubmit={(data) => {
50+
handleSubmit(data);
51+
}}
52+
>
53+
{({ errors, touched }) => (
54+
<Form>
55+
<div className="form-div">
56+
<Field type="text" className="form-control" name="firstName" placeholder="First Name" />
57+
{errors.firstName && touched.firstName ? (
58+
<div className="text-danger">{errors.firstName}</div>
59+
) : null}
60+
</div>
61+
<div className="form-div">
62+
<Field type="text" className="form-control" name="lastName" placeholder="Last Name" />
63+
{errors.lastName && touched.lastName ? <div className="text-danger">{errors.lastName}</div> : null}
64+
</div>
65+
<div className="form-div">
66+
<Field type="email" className="form-control" name="email" placeholder="Email" />
67+
{errors.email && touched.email ? <div className="text-danger">{errors.email}</div> : null}
68+
</div>
69+
<div className="form-div">
70+
<Field type="tel" className="form-control" name="phoneNumber" placeholder="Phone Number" />
71+
{errors.phoneNumber && touched.phoneNumber ? (
72+
<div className="text-danger">{errors.phoneNumber}</div>
73+
) : null}
74+
</div>
75+
76+
<div className="form-div">
77+
<Field
78+
type="password"
79+
className="form-control"
80+
id="password"
81+
name="password"
82+
placeholder="Password"
83+
/>
84+
{errors.password && touched.password ? <div className="text-danger">{errors.password}</div> : null}
85+
</div>
86+
87+
<div className="form-div">
88+
<Field
89+
type="password"
90+
className="form-control"
91+
name="confirmPassword"
92+
placeholder="Confirm Password"
93+
/>
94+
</div>
95+
96+
<button type="submit" className="signup-btn">
97+
SIGN UP
98+
</button>
99+
<p className="login-text">
100+
{' '}
101+
I already have an account &nbsp;
102+
<Link to="/login">Login</Link>
103+
</p>
104+
105+
<div className="form-div-checkbox">
106+
<Field
107+
type="checkbox"
108+
className="form-control-check"
109+
id="terms"
110+
name="termsAndCondition"
111+
placeholder="Confirm Password"
112+
/>
113+
<label htmlFor="terms">I agree to the terms and conditions</label>
114+
</div>
115+
</Form>
116+
)}
117+
</Formik>
118+
</div>
119+
</div>
120+
</div>
121+
</>
8122
);
9-
}
123+
};
10124

11-
export default Signup;
125+
export default SignUp;

‎src/components/Signup/signup.scss‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
$greenColor: #209403;
2+
$yellowColor: #f3b01e;
3+
$blackColor: #04070e;
4+
@mixin customShadow {
5+
box-shadow: 0px 0px 5px #b3b3b3;
6+
}
7+
8+
.signup-form-wrapper {
9+
width: 100%;
10+
display: flex;
11+
flex-direction: column;
12+
justify-content: center;
13+
align-items: center;
14+
15+
.welcome-text {
16+
font-weight: 500;
17+
text-align: center;
18+
}
19+
20+
.form-container {
21+
width: 80%;
22+
display: flex;
23+
flex-direction: column;
24+
justify-content: center;
25+
align-items: center;
26+
position: relative;
27+
max-width: 700px;
28+
padding: 8px;
29+
padding-bottom: 30px;
30+
border-top-left-radius: 7px;
31+
border-top-right-radius: 7px;
32+
@include customShadow();
33+
34+
&::before {
35+
content: '';
36+
position: absolute;
37+
top: 0;
38+
left: 0;
39+
right: 0;
40+
height: 10px;
41+
width: 100%;
42+
background: $greenColor;
43+
border-top-left-radius: 7px;
44+
border-top-right-radius: 7px;
45+
}
46+
}
47+
}
48+
49+
.signup-form {
50+
padding: 7px;
51+
height: 100%;
52+
width: 80%;
53+
@include customShadow();
54+
55+
.form-div {
56+
width: 98%;
57+
58+
margin: 8px 2px;
59+
60+
.form-control {
61+
width: 100%;
62+
height: 33px;
63+
margin: 8px 0px;
64+
padding-left: 5px;
65+
background: transparent;
66+
border: 1px solid #d1cece;
67+
border-radius: 4px;
68+
}
69+
.login-text {
70+
text-align: center;
71+
}
72+
}
73+
}
74+
75+
.signup-btn {
76+
border: none;
77+
text-align: center;
78+
background: $yellowColor;
79+
height: 35px;
80+
// margin-left: 15px;
81+
width: 100%;
82+
}
83+
84+
.forgot-password {
85+
text-align: right;
86+
margin-right: 8px;
87+
margin-bottom: 10px;
88+
}
89+
90+
.form-div-checkbox {
91+
margin-bottom: 2rem;
92+
display: flex;
93+
align-items: center;
94+
95+
.form-control-check {
96+
width: 15px;
97+
height: 15px;
98+
}
99+
}

‎src/redux/actions/userActions.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
11
export function loginUser(data) {
22
return console.log(data);
33
}
4+
5+
export function logOutUser() {
6+
return console.log('loged out');
7+
}
8+
9+
export function signUpUser() {
10+
return console.log('User Signup');
11+
}

0 commit comments

Comments
 (0)