From 08d291b9133582d1fa4b8f5ee78295b67b13710d Mon Sep 17 00:00:00 2001
From: nick-delirium <nikita@openreplay.com>
Date: Fri, 14 Jun 2024 15:20:07 +0200
Subject: [PATCH] oauth button test

---
 frontend/app/components/Login/GoogleLogin.tsx | 57 +++++++++++++++++++
 frontend/app/components/Login/Login.tsx       |  4 +-
 .../Signup/SignupForm/SignupForm.tsx          |  4 ++
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 frontend/app/components/Login/GoogleLogin.tsx

diff --git a/frontend/app/components/Login/GoogleLogin.tsx b/frontend/app/components/Login/GoogleLogin.tsx
new file mode 100644
index 000000000..5d9f55e4f
--- /dev/null
+++ b/frontend/app/components/Login/GoogleLogin.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+function GoogleLogin({ isLogin }: { isLogin?: boolean }) {
+  return (
+    <div className={'w-full'}>
+      <a href={window.env.API_EDP + '/signup-oauth'} role={'button'}>
+        <div className="w-full flex justify-center items-center bg-white border border-gray-300 rounded px-6 py-2 font-medium text-gray-800 hover:bg-gray-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500">
+          <svg
+            className="h-5 w-5 mr-2"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlnsXlink="http://www.w3.org/1999/xlink"
+            width="800px"
+            height="800px"
+            viewBox="-0.5 0 48 48"
+            version="1.1"
+          >
+            <g
+              id="Icons"
+              stroke="none"
+              strokeWidth="1"
+              fill="none"
+              fillRule="evenodd"
+            >
+              <g id="Color-" transform="translate(-401.000000, -860.000000)">
+                <g id="Google" transform="translate(401.000000, 860.000000)">
+                  <path
+                    d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24"
+                    id="Fill-1"
+                    fill="#FBBC05"
+                  ></path>
+                  <path
+                    d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333"
+                    id="Fill-2"
+                    fill="#EB4335"
+                  ></path>
+                  <path
+                    d="M23.7136364,37.8666667 C17.5491591,37.8666667 12.3545909,33.888 10.5322727,28.3562667 L2.62345455,34.3946667 C6.44540909,42.1557333 14.4268636,47.4666667 23.7136364,47.4666667 C29.4455,47.4666667 34.9177955,45.4314667 39.0249545,41.6181333 L31.5177727,35.8144 C29.3995682,37.1488 26.7323182,37.8666667 23.7136364,37.8666667"
+                    id="Fill-3"
+                    fill="#34A853"
+                  ></path>
+                  <path
+                    d="M46.1454545,24 C46.1454545,22.6133333 45.9318182,21.12 45.6113636,19.7333333 L23.7136364,19.7333333 L23.7136364,28.8 L36.3181818,28.8 C35.6879545,31.8912 33.9724545,34.2677333 31.5177727,35.8144 L39.0249545,41.6181333 C43.3393409,37.6138667 46.1454545,31.6490667 46.1454545,24"
+                    id="Fill-4"
+                    fill="#4285F4"
+                  ></path>
+                </g>
+              </g>
+            </g>
+          </svg>
+          <span>{isLogin ? 'Login' : 'Sign up'} with Google</span>
+        </div>
+      </a>
+    </div>
+  );
+}
+
+export default GoogleLogin;
diff --git a/frontend/app/components/Login/Login.tsx b/frontend/app/components/Login/Login.tsx
index bd8052b32..c917cb30c 100644
--- a/frontend/app/components/Login/Login.tsx
+++ b/frontend/app/components/Login/Login.tsx
@@ -20,7 +20,7 @@ import {
 import { Button, Form, Icon, Input, Link, Loader, Tooltip } from 'UI';
 
 import Copyright from 'Shared/Copyright';
-
+import GoogleLogin from "./GoogleLogin";
 import stl from './login.module.css';
 
 const FORGOT_PASSWORD = forgotPassword();
@@ -177,6 +177,8 @@ const Login: React.FC<LoginProps> = ({
                   />
                 )}
                 <div style={{ width: '350px' }} className="px-8">
+                  <GoogleLogin isLogin />
+                  <div className={'my-4 text-disabled-text w-full text-center'}>Or continue with</div>
                   <Form.Field>
                     <label>Email Address</label>
                     <Input
diff --git a/frontend/app/components/Signup/SignupForm/SignupForm.tsx b/frontend/app/components/Signup/SignupForm/SignupForm.tsx
index 2a5981573..44787e2a0 100644
--- a/frontend/app/components/Signup/SignupForm/SignupForm.tsx
+++ b/frontend/app/components/Signup/SignupForm/SignupForm.tsx
@@ -10,6 +10,7 @@ import { validatePassword } from 'App/validate';
 import { PASSWORD_POLICY } from 'App/constants';
 import { Alert, Space } from 'antd';
 import { toast } from 'react-toastify';
+import GoogleLogin from "../../Login/GoogleLogin";
 
 const LOGIN_ROUTE = login();
 
@@ -113,6 +114,9 @@ const SignupForm: React.FC<SignupFormProps> = ({ tenants, errors, loading, signu
             />
           )}
           <div className='px-8'>
+            <GoogleLogin isLogin={false} />
+            <div className={'my-4 text-disabled-text w-full text-center'}>Or continue with</div>
+
             {tenants.length > 0 && (
               <Form.Field>
                 <label>Existing Accounts</label>