Skip to content

Commit

Permalink
arrowing user to register as seller by using checkbox
Browse files Browse the repository at this point in the history
  • Loading branch information
@pacifiquemboni
pacifiquemboni committed Jul 25, 2024
1 parent 78e9fe9 commit 7a5452d
Show file tree
Hide file tree
Showing 3 changed files with 131 additions and 75 deletions.
29 changes: 24 additions & 5 deletions src/Pages/Signup/Signup.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@
input {
width: 100%;
border: 2px solid $border-color;
height: 30px;
}
input::placeholder {
color: grey;
Expand All @@ -94,10 +95,25 @@
}
}
}

.btn {
.seller-checkbox{

height: 30px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 1px 1px 2px 2px $primary-color;
border-radius: 5px;
padding: 4px;
}
.signup-buttons{
display: flex;
justify-content: space-between;
height: 45px;
.btn {
display: block;
width: 100%;
width: 46%;
height: 40px;
padding: $btn-padding;
margin: 0;
font-size: $btn-font-size;
Expand All @@ -117,14 +133,15 @@
display: flex;
align-items: center;
justify-content: center;
width: 100%;
width: 46%;
height: 40px;
padding: $btn-padding;
margin: 0;
font-size: $btn-font-size;
color: #fff;
// background-color: $primary-color;
border: none;
border-radius: 4px;
// border-radius: 4px;
cursor: pointer;
text-align: center;

Expand Down Expand Up @@ -163,7 +180,9 @@
text-decoration: underline;
}
}
}
}


.text-right {
text-align: right;
Expand Down
176 changes: 106 additions & 70 deletions src/Pages/Signup/Signup.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,52 +1,54 @@
import React, {
useState, ChangeEvent, FormEvent, useEffect,
} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import axios from 'axios';
import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { ThunkDispatch } from '@reduxjs/toolkit';
import { useGoogleLogin } from '@react-oauth/google';
import { AnyAction } from 'redux';
import { RootState } from '../../redux/store';
import { signupUser } from '../../redux/slices/SignupSlice';
import { googleLoginUser } from '../../redux/slices/googleLoginSlice';
import './Signup.scss';
import Spinner from '../../components/Spinner/Spinner';
import Toast from '../../components/Toast/Toast';
import React, { useState, ChangeEvent, FormEvent, useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";
import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { ThunkDispatch } from "@reduxjs/toolkit";
import { useGoogleLogin } from "@react-oauth/google";
import { AnyAction } from "redux";
import { RootState } from "../../redux/store";
import { signupUser } from "../../redux/slices/SignupSlice";
import { googleLoginUser } from "../../redux/slices/googleLoginSlice";
import "./Signup.scss";
import Spinner from "../../components/Spinner/Spinner";
import Toast from "../../components/Toast/Toast";

interface FormData {
firstName: string;
lastName: string;
email: string;
password: string;
confirmPassword: string;
isSeller: boolean;
}

const validatePassword = (password: string): boolean => {
const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
const passwordRegex =
/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
return passwordRegex.test(password);
};

const Signup: React.FC = () => {
const dispatch: ThunkDispatch<RootState, unknown, AnyAction> = useDispatch();
const {
loading, isSucceeded, userInfo, error,
} = useSelector(
(state: RootState) => state.signup,
const { loading, isSucceeded, userInfo, error } = useSelector(
(state: RootState) => state.signup
);
const [isChecked, setIsChecked] = useState(false);
const handleCheckboxChange = () => {
setIsChecked(!isChecked);
setFormData({ ...formData, isSeller: !isChecked });
};
const [formData, setFormData] = useState<FormData>({
firstName: '',
lastName: '',
email: '',
password: '',
confirmPassword: '',
firstName: "",
lastName: "",
email: "",
password: "",
confirmPassword: "",
isSeller:false
});
const [formErrors, setFormErrors] = useState<Partial<FormData>>({});

const {
firstName, lastName, email, password, confirmPassword,
} = formData;
const { firstName, lastName, email, password, confirmPassword,isSeller } = formData;
const [showPassword, setShowPassword] = useState(false);

const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
Expand All @@ -55,11 +57,13 @@ const Signup: React.FC = () => {

const validateForm = () => {
const errors: Partial<FormData> = {};
if (!firstName.trim()) errors.firstName = 'First name is required';
if (!lastName.trim()) errors.lastName = 'Last name is required';
if (!password.trim()) errors.password = 'Password is required';
else if (!validatePassword(password)) errors.password = 'Password is not strong';
if (password !== confirmPassword) errors.confirmPassword = 'Passwords do not match';
if (!firstName.trim()) errors.firstName = "First name is required";
if (!lastName.trim()) errors.lastName = "Last name is required";
if (!password.trim()) errors.password = "Password is required";
else if (!validatePassword(password))
errors.password = "Password is not strong";
if (password !== confirmPassword)
errors.confirmPassword = "Passwords do not match";
return errors;
};

Expand All @@ -71,39 +75,51 @@ const Signup: React.FC = () => {
return;
}
setFormErrors({});
dispatch(signupUser({
firstName, lastName, email, password,
}));
dispatch(
signupUser({
firstName,
lastName,
email,
password,
isSeller
})

);
};

useEffect(() => {
if (isSucceeded) {
setFormData({
firstName: '',
lastName: '',
email: '',
password: '',
confirmPassword: '',
firstName: "",
lastName: "",
email: "",
password: "",
confirmPassword: "",
isSeller:false
});
setIsChecked(false)
}
}, [isSucceeded]);

const loginViaGoogle = useGoogleLogin({
onSuccess: async (tokenResponse) => {
try {
const userInfo = await axios.get('https://www.googleapis.com/oauth2/v1/userinfo', {
headers: {
Authorization: `Bearer ${tokenResponse.access_token}`,
},
});
const userInfo = await axios.get(
"https://www.googleapis.com/oauth2/v1/userinfo",
{
headers: {
Authorization: `Bearer ${tokenResponse.access_token}`,
},
}
);

dispatch(googleLoginUser(userInfo.data));
} catch (error) {
console.error('Error fetching user info:', error);
console.error("Error fetching user info:", error);
}
},
onError: (errorResponse) => {
console.error('Google login failure:', errorResponse);
console.error("Google login failure:", errorResponse);
},
});

Expand All @@ -130,7 +146,7 @@ const Signup: React.FC = () => {
placeholder="First Name"
onChange={handleChange}
className={`form-control ${
formErrors.firstName ? 'is-invalid' : ''
formErrors.firstName ? "is-invalid" : ""
}`}
required
/>
Expand All @@ -148,7 +164,7 @@ const Signup: React.FC = () => {
placeholder="Last Name"
onChange={handleChange}
className={`form-control ${
formErrors.lastName ? 'is-invalid' : ''
formErrors.lastName ? "is-invalid" : ""
}`}
required
/>
Expand All @@ -168,20 +184,19 @@ const Signup: React.FC = () => {
className="form-control"
required
/>

</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<div className="password-wrapper">
<input
type={showPassword ? 'text' : 'password'}
type={showPassword ? "text" : "password"}
id="password"
name="password"
value={password}
placeholder="Password"
onChange={handleChange}
className={`form-control ${
formErrors.password ? 'is-invalid' : ''
formErrors.password ? "is-invalid" : ""
}`}
required
/>
Expand All @@ -199,14 +214,14 @@ const Signup: React.FC = () => {
<label htmlFor="confirmPassword">Confirm Password</label>
<div className="password-wrapper">
<input
type={showPassword ? 'text' : 'password'}
type={showPassword ? "text" : "password"}
id="confirmPassword"
name="confirmPassword"
value={confirmPassword}
placeholder="Confirm Password"
onChange={handleChange}
className={`form-control ${
formErrors.confirmPassword ? 'is-invalid' : ''
formErrors.confirmPassword ? "is-invalid" : ""
}`}
required
/>
Expand All @@ -220,36 +235,57 @@ const Signup: React.FC = () => {
<span className="errors">{formErrors.confirmPassword}</span>
)}
</div>

<button
<div className="seller-checkbox">
<label htmlFor="checkbox">
<input
type="checkbox"
name="checkbox"
checked={isChecked}
onChange={handleCheckboxChange}
/>
Check this box if you want to sell products.
</label>
</div>
<div className="signup-buttons">
<button
type="submit"
className={`btn ${loading ? 'loading' : ''}`}
className={`btn ${loading ? "loading" : ""}`}
disabled={loading}
>
{loading ? 'Processing...' : 'Sign Up'}
{loading ? "Processing..." : "Sign Up"}
</button>

<p className="or-with-google">Or</p>
<div className="text-center">
<button className="btn btn-google" type="button" onClick={() => loginViaGoogle()}>
<img src="https://img.icons8.com/?size=100&id=17949&format=png&color=000000" alt="" className="google-icon" />

{/* <div className="text-center"> */}
<button
className="btn btn-google"
type="button"
onClick={() => loginViaGoogle()}
>
<img
src="https://img.icons8.com/?size=100&id=17949&format=png&color=000000"
alt=""
className="google-icon"
/>
Continue with Google
</button>
</div>
{/* </div> */}

<div className="text-right">
<p>
Already have an account?
{' '}
<a href="/login">Login</a>
Already have an account? <a href="/login">Login</a>
</p>
</div>
</form>
</div>
{loading && <Spinner />}
{!loading
&& (isSucceeded ? (
<Toast messageType="success" message={`${userInfo?.message} Go and check your email to veify your account`} />
{!loading &&
(isSucceeded ? (
<Toast
messageType="success"
message={`${userInfo?.message} Go and check your email to veify your account`}
/>
) : (
error && <Toast messageType="error" message={error.message} />
))}
Expand Down
1 change: 1 addition & 0 deletions src/redux/slices/SignupSlice.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ interface UserData {
lastName: string;
email: string;
password: string;
isSeller:boolean
}

interface UserInfoInterface extends UserData {
Expand Down

0 comments on commit 7a5452d

Please sign in to comment.