From fd7326ed4e971ca91aba2193be075b7a71742f16 Mon Sep 17 00:00:00 2001
From: Davydenkov Ivan <118854180+IvanDavydenkov@users.noreply.github.com>
Date: Mon, 20 Nov 2023 03:04:48 +0300
Subject: [PATCH] google auth
---
package-lock.json | 10 ++
package.json | 1 +
src/components/App/App.js | 39 ++---
src/pages/AuthPages/LoginPage.jsx | 15 +-
src/pages/AuthPages/index.module.scss | 197 ++++++++++++++------------
5 files changed, 148 insertions(+), 114 deletions(-)
diff --git a/package-lock.json b/package-lock.json
index 5bf90bb..18eacb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "document-template-frontend",
"version": "0.1.0",
"dependencies": {
+ "@react-oauth/google": "^0.12.1",
"@reduxjs/toolkit": "^1.9.7",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
@@ -5357,6 +5358,15 @@
"@babel/runtime": "^7.13.10"
}
},
+ "node_modules/@react-oauth/google": {
+ "version": "0.12.1",
+ "resolved": "https://registry.npmjs.org/@react-oauth/google/-/google-0.12.1.tgz",
+ "integrity": "sha512-qagsy22t+7UdkYAiT5ZhfM4StXi9PPNvw0zuwNmabrWyMKddczMtBIOARflbaIj+wHiQjnMAsZmzsUYuXeyoSg==",
+ "peerDependencies": {
+ "react": ">=16.8.0",
+ "react-dom": ">=16.8.0"
+ }
+ },
"node_modules/@reduxjs/toolkit": {
"version": "1.9.7",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.7.tgz",
diff --git a/package.json b/package.json
index ef82ab4..a850de3 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"private": true,
"homepage": ".",
"dependencies": {
+ "@react-oauth/google": "^0.12.1",
"@reduxjs/toolkit": "^1.9.7",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
diff --git a/src/components/App/App.js b/src/components/App/App.js
index 4d7033c..3ded214 100644
--- a/src/components/App/App.js
+++ b/src/components/App/App.js
@@ -3,6 +3,7 @@ import './App.css';
import { useEffect } from 'react';
import { Route, Routes, useNavigate } from 'react-router-dom'; // Импортируйте Outlet для вложенных маршрутов
import { useDispatch } from 'react-redux';
+import { GoogleOAuthProvider } from '@react-oauth/google';
import DraftsTemplates from '../../pages/DraftsTemplates';
import LoginPage from '../../pages/AuthPages/LoginPage';
import LogupPage from '../../pages/AuthPages/LogupPage';
@@ -40,24 +41,26 @@ function App() {
}, []);
return (
-
- } path="/templates">
- } />
-
- } path="favorite">
- } />
-
- } path="drafts">
- } />
-
- } path="/" />
- } path="/signin" exact />
- } path="/signup" exact />
- } path="/check-account" exact />
- } path="/forgot-password" exact />
- } path="/change-password" exact />
- } />
-
+
+
+ } path="/templates">
+ } />
+
+ } path="favorite">
+ } />
+
+ } path="drafts">
+ } />
+
+ } path="/" />
+ } path="/signin" exact />
+ } path="/signup" exact />
+ } path="/check-account" exact />
+ } path="/forgot-password" exact />
+ } path="/change-password" exact />
+ } />
+
+
);
}
diff --git a/src/pages/AuthPages/LoginPage.jsx b/src/pages/AuthPages/LoginPage.jsx
index de9589c..cd398d7 100644
--- a/src/pages/AuthPages/LoginPage.jsx
+++ b/src/pages/AuthPages/LoginPage.jsx
@@ -1,8 +1,9 @@
/* eslint-disable react-hooks/exhaustive-deps */
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { useDispatch } from 'react-redux';
import { useForm } from 'react-hook-form';
import { Link, useNavigate } from 'react-router-dom';
+import { GoogleLogin } from '@react-oauth/google';
import Modal from '../../components/Modal/Modal';
import AuthForm from '../../components/AuthForm/AuthTemplate';
import InputForm from '../../components/UI/AuthInputForm/InputForm';
@@ -12,8 +13,8 @@ import styles from './index.module.scss';
import Button from '../../components/UI/AuthButton/Button';
import { signIn } from '../../store/auth/authSlice';
import {
- useLazyLoginQuery,
useLazyGetUserDataQuery,
+ useLazyLoginQuery,
} from '../../store/auth-api/auth.api';
import { useActions } from '../../hooks/useActions';
@@ -147,6 +148,16 @@ export default function LoginPage() {
Регистрация
+
+ {
+ console.log(credentialResponse);
+ }}
+ onError={() => {
+ console.log('Login Failed');
+ }}
+ />
+
diff --git a/src/pages/AuthPages/index.module.scss b/src/pages/AuthPages/index.module.scss
index 1b84891..3bc76a9 100644
--- a/src/pages/AuthPages/index.module.scss
+++ b/src/pages/AuthPages/index.module.scss
@@ -2,140 +2,149 @@ $color-link: rgba(4, 21, 175, 1);
$color-link-l: rgba(0, 25, 255, 1);
@keyframes preloader-spin {
- 0% {
- transform: rotate(0deg);
- }
+ 0% {
+ transform: rotate(0deg);
+ }
- 100% {
- transform: rotate(360deg);
- }
+ 100% {
+ transform: rotate(360deg);
+ }
}
.back {
- font-size: 24px;
- line-height: 29px;
- color: $color-link;
- position: absolute;
- top: 32px;
- left: 32px;
- text-decoration: none;
+ font-size: 24px;
+ line-height: 29px;
+ color: $color-link;
+ position: absolute;
+ top: 32px;
+ left: 32px;
+ text-decoration: none;
}
.form {
- display: flex;
- flex-direction: column;
- gap: 16px;
- position: relative;
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+ position: relative;
}
.title {
- font-size: 35px;
- font-weight: 500;
- line-height: 39px;
+ font-size: 35px;
+ font-weight: 500;
+ line-height: 39px;
}
.checkboxContainer {
- margin: 0;
- display: flex;
- align-items: center;
+ margin: 0;
+ display: flex;
+ align-items: center;
}
.checkbox {
- width: 24px;
- height: 24px;
- border: 1px solid black;
- border-radius: 4px;
- margin-right: 9px;
- background-color: inherit;
- padding: 0;
- cursor: pointer;
- text-align: center;
- &Checked {
- background-color: rgba(0, 0, 0, 1);
- }
+ width: 24px;
+ height: 24px;
+ border: 1px solid black;
+ border-radius: 4px;
+ margin-right: 9px;
+ background-color: inherit;
+ padding: 0;
+ cursor: pointer;
+ text-align: center;
+
+ &Checked {
+ background-color: rgba(0, 0, 0, 1);
+ }
}
.link {
- color: $color-link;
- font-size: 14px;
- line-height: 19px;
- text-decoration: none;
- margin-left: auto;
+ color: $color-link;
+ font-size: 14px;
+ line-height: 19px;
+ text-decoration: none;
+ margin-left: auto;
}
+
.password {
- margin: 0;
- font-size: 14px;
+ margin: 0;
+ font-size: 14px;
}
.largeLink {
- border-radius: 24px;
- text-align: center;
- padding: 14px;
- border: 1px solid #a48dd3;
- color: #550fda;
- font-size: 24px;
- line-height: 28px;
- overflow: hidden;
- font-family: 'SF-Pro', 'Inter', sans-serif;
- font-size: 24px;
- line-height: 28px;
- text-decoration: none;
- text-align: center;
- margin: 14px 0 18px 0;
+ border-radius: 24px;
+ text-align: center;
+ padding: 14px;
+ border: 1px solid #a48dd3;
+ color: #550fda;
+ font-size: 24px;
+ line-height: 28px;
+ overflow: hidden;
+ font-family: 'SF-Pro', 'Inter', sans-serif;
+ font-size: 24px;
+ line-height: 28px;
+ text-decoration: none;
+ text-align: center;
+ margin: 14px 0 18px 0;
}
.orPar {
- margin: 0;
- font-size: 16px;
- line-height: 19.36px;
- text-align: center;
- margin-top: 8px;
- position: relative;
+ margin: 0;
+ font-size: 16px;
+ line-height: 19.36px;
+ text-align: center;
+ margin-top: 8px;
+ position: relative;
}
.orPar span {
- position: relative;
- background-color: white;
- padding: 0 8px;
- z-index: 2;
+ position: relative;
+ background-color: white;
+ padding: 0 8px;
+ z-index: 2;
}
.orPar:after {
- content: '';
- width: 100%;
- border-bottom: 1px solid rgba(234, 234, 234, 1);
- position: absolute;
- left: 0;
- top: 50%;
- z-index: 1;
+ content: '';
+ width: 100%;
+ border-bottom: 1px solid rgba(234, 234, 234, 1);
+ position: absolute;
+ left: 0;
+ top: 50%;
+ z-index: 1;
}
.parCheck {
- width: 507px;
- margin: 0 0 12px 0;
- font-size: 20px;
- line-height: 24px;
- &:last-of-type {
- margin: 0;
- }
- & span {
- color: $color-link-l;
- }
+ width: 507px;
+ margin: 0 0 12px 0;
+ font-size: 20px;
+ line-height: 24px;
+
+ &:last-of-type {
+ margin: 0;
+ }
+
+ & span {
+ color: $color-link-l;
+ }
}
.parForget {
- margin: 12px 0 28px 0;
- font-size: 16px;
- line-height: 19px;
- width: 449px;
+ margin: 12px 0 28px 0;
+ font-size: 16px;
+ line-height: 19px;
+ width: 449px;
}
.preloader {
- width: 35px;
- height: 28px;
- background-image: url('../../images/preloader.svg');
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- animation: preloader-spin 1.5s linear infinite;
+ width: 35px;
+ height: 28px;
+ background-image: url('../../images/preloader.svg');
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+ animation: preloader-spin 1.5s linear infinite;
+}
+
+.googleWrapper {
+ display: flex;
+ justify-content: center;
}