diff --git a/src/App.tsx b/src/App.tsx index 92965f0..12c1cae 100644 --- a/src/App.tsx +++ b/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 = () => { } /> } /> } /> + } /> } /> } /> } /> diff --git a/src/components/GoogleAuth/GoogleAuth.tsx b/src/components/GoogleAuth/GoogleAuth.tsx index eae96e6..dd9710b 100644 --- a/src/components/GoogleAuth/GoogleAuth.tsx +++ b/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 ( - {`${t('GoogleAuthButton.googleAuth')}`} + + {location.pathname === SignUp + ? `${t('GoogleAuthButton.googleAuth')}` + : `${t('GoogleAuthButton.googleSignin')}`} + ); } diff --git a/src/components/signIn/Signin.styles.ts b/src/components/signIn/Signin.styles.ts index 9ea3903..9808ea4 100644 --- a/src/components/signIn/Signin.styles.ts +++ b/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; `; diff --git a/src/components/signIn/Signin.tsx b/src/components/signIn/Signin.tsx index 3d727c6..0f225b2 100644 --- a/src/components/signIn/Signin.tsx +++ b/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 = () => {

{`${t('SignIn.upperText')}`}

+ + + {`${t('SignIn.email')}`} } diff --git a/src/localization/en/en.json b/src/localization/en/en.json index 0023e1c..46ff46f 100644 --- a/src/localization/en/en.json +++ b/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" } } diff --git a/src/pages/GoogleRoleSelection.tsx b/src/pages/GoogleRoleSelection.tsx new file mode 100644 index 0000000..f280e3e --- /dev/null +++ b/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 ( + +

{`${t('GoogleRoleSelection.title')}`}

+ +

{`${t('GoogleRoleSelection.text')}`}

+ + + {`${t( + 'Registration.buttonText1', + )}`} + {`${t('Registration.buttonText2')}`} + + + handleClick()}>{`${t('GoogleRoleSelection.button')}`} +
+
+ ); +}; + +export default GoogleRoleSelection;