feat: googleSignIn: FE

src/App.tsx

@@ -21,6 +21,8 @@ const Cookies = require('js-cookie');
 
 const RoleSelection = lazy(() => import('./pages/RoleSelection'));
 
+const GoogleRoleSelection = lazy(() => import('./pages/GoogleRoleSelection'));
+
 const SignIn = lazy(() => import('pages/SigninPage'));
 
 const JobPostPage = lazy(() => import('pages/JobPostPage'));
@@ -56,6 +58,7 @@ const App: FC = () => {
 							<Route path="/create-job-post" element={<JobPostPage />} />
 							<Route path="/role-selection" element={<RoleSelection />} />
 							<Route path="/role-selection/:user" element={<RoleSelection />} />
+							<Route path="/google-role-selection/:user" element={<GoogleRoleSelection />} />
 							<Route path="post-job/:id/edit" element={<JobDescriptionEditPage />} />
 							<Route path="post-job/:id" element={<JobDescriptionPage />} />
 							<Route path="post-job" element={<PostJobPage />} />

src/components/GoogleAuth/GoogleAuth.tsx

@@ -2,16 +2,26 @@ import React from 'react';
 import googleIcon from 'assets/googleIcon.png';
 import { Image, Typography, Container } from 'components/GoogleAuth/GoogleAuthStyle';
 import { useTranslation } from 'react-i18next';
+import { useLocation } from 'react-router-dom';
+import { SignUp } from 'constants/routes';
 
 function GoogleAuth() {
 	const { t } = useTranslation();
+	const location = useLocation();
+
 	const googleAuth = () => {
-		window.open(`${process.env.REACT_APP_GOOGLE_REDIRECT}`, '_self');
+		location.pathname === SignUp
+			? window.open(`${process.env.REACT_APP_GOOGLE_REDIRECT}`, '_self')
+			: window.open(`${process.env.REACT_APP_GOOGLE_SIGNIN}`, '_self');
 	};
 	return (
 		<Container onClick={googleAuth}>
 			<Image src={googleIcon} />
-			<Typography>{`${t('GoogleAuthButton.googleAuth')}`}</Typography>
+			<Typography>
+				{location.pathname === SignUp
+					? `${t('GoogleAuthButton.googleAuth')}`
+					: `${t('GoogleAuthButton.googleSignin')}`}
+			</Typography>
 		</Container>
 	);
 }

src/components/signIn/Signin.styles.ts

@@ -19,6 +19,12 @@ export const Div2 = styled.div`
 	margin: auto;
 `;
 
+export const DivGoogle = styled.div`
+	display: flex;
+	align-content: center;
+	margin-top: 10px;
+`;
+
 export const H1 = styled.h2`
 	text-align: center;
 `;

src/components/signIn/Signin.tsx

@@ -7,6 +7,7 @@ import { notification } from 'antd';
 import {
 	Div,
 	Div2,
+	DivGoogle,
 	H1,
 	H2,
 	Form,
@@ -23,6 +24,7 @@ import { saveEmail, saveRole, saveToken, saveUserId } from 'redux/reducers/userS
 import { useSignInMutation } from 'service/httpService';
 import { CreateJobPost, PostJobPage, Welcome } from 'constants/routes';
 import { ALERT_SUCCESS } from 'constants/links';
+import GoogleAuth from 'components/GoogleAuth/GoogleAuth';
 
 export type FormData = {
 	email: string;
@@ -81,7 +83,6 @@ const signIn = () => {
 		} catch (e) {
 			reset({ email: '', password: '' });
 			alert('error');
-			// console.log(e);
 		}
 	};
 
@@ -94,6 +95,9 @@ const signIn = () => {
 				<H2>{`${t('SignIn.upperText')}`}</H2>
 			</div>
 			<Form onSubmit={handleSubmit(onSubmit)}>
+				<DivGoogle>
+					<GoogleAuth />
+				</DivGoogle>
 				<ControlStyle>{`${t('SignIn.email')}`}</ControlStyle>
 				<Controller
 					render={({ field }) => <Input type="email" {...field} />}

src/localization/en/en.json

@@ -50,7 +50,8 @@
 		"errorEmail": "Invalid email or password"
 	},
 	"GoogleAuthButton": {
-		"googleAuth": "Sign up with Google"
+		"googleAuth": "Sign up with Google",
+		"googleSignin": "Sign in with Google"
 	},
 	"Registration": {
 		"title": "Complete your registration",
@@ -329,5 +330,10 @@
 		"description": "Do you really want to delete contract?",
 		"delete": "Delete",
 		"cancel": "Cancel"
+	},
+	"GoogleRoleSelection": {
+		"title": "Role Selection",
+		"text": "Please select your role",
+		"button": "Enter"
 	}
 }

src/pages/GoogleRoleSelection.tsx

@@ -0,0 +1,68 @@
+import { FC, useEffect } from 'react';
+import { Div1, H1, P, Div2, Div3, Button2 } from './RoleSelection.styles';
+import { useTranslation } from 'react-i18next';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useSelector } from 'react-redux';
+import { Radio, RadioChangeEvent } from 'antd';
+import { RootState } from 'redux/store';
+import { saveEmail, saveRole, saveUserId } from 'redux/reducers/userSlice';
+import { useAppDispatch } from 'redux/hooks';
+import { useSignUpUpdateMutation } from 'service/httpService';
+import { CreateJobPost, PostJobPage } from 'constants/routes';
+
+export const Role = {
+	Freelancer: 'freelancer',
+	Client: 'client',
+};
+
+const GoogleRoleSelection: FC = () => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const dispatch = useAppDispatch();
+	const [signUpUpdate] = useSignUpUpdateMutation();
+	const user = useSelector((state: RootState) => state.user);
+	const params = useParams();
+
+	useEffect(() => {
+		if (params.user) {
+			dispatch(saveEmail(String(params.user)));
+		}
+	}, []);
+
+	const handleChange = (event: RadioChangeEvent) => {
+		dispatch(saveRole(event.target.value));
+	};
+	const handleClick = async () => {
+		try {
+			const res = await signUpUpdate({
+				email: user.email ?? String(params.user),
+				role: user.role,
+			}).unwrap();
+			dispatch(saveUserId(res.id));
+			res.role === Role.Freelancer ? navigate(`${PostJobPage}`) : navigate(`${CreateJobPost}`);
+		} catch (e) {
+			console.log(e);
+			alert('error');
+		}
+	};
+
+	return (
+		<Div1>
+			<H1>{`${t('GoogleRoleSelection.title')}`}</H1>
+			<Div2>
+				<P>{`${t('GoogleRoleSelection.text')}`}</P>
+				<Div3>
+					<Radio.Group buttonStyle="solid" onChange={handleChange} value={user.role}>
+						<Radio.Button value={Role.Freelancer}>{`${t(
+							'Registration.buttonText1',
+						)}`}</Radio.Button>
+						<Radio.Button value={Role.Client}>{`${t('Registration.buttonText2')}`}</Radio.Button>
+					</Radio.Group>
+				</Div3>
+				<Button2 onClick={() => handleClick()}>{`${t('GoogleRoleSelection.button')}`}</Button2>
+			</Div2>
+		</Div1>
+	);
+};
+
+export default GoogleRoleSelection;