From d2ce5c946ab52f286762ce12333d2d12888a1114 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Fri, 28 Apr 2023 19:00:08 +0500
Subject: [PATCH 1/3] WIP

---
 src/common/pages/sign-up.scss | 37 +++++++++++++++++++++++++++++++++++
 src/common/pages/sign-up.tsx  | 37 +++++++++++++++++++++++++++++++++++
 src/server/template.tsx       |  1 +
 3 files changed, 75 insertions(+)

diff --git a/src/common/pages/sign-up.scss b/src/common/pages/sign-up.scss
index f0ba5b72b32..46602e9d2a2 100644
--- a/src/common/pages/sign-up.scss
+++ b/src/common/pages/sign-up.scss
@@ -155,6 +155,43 @@
         }
       }
     }
+    .google-signup-btn {
+      background-color: #ffffff;
+      border-radius: 4px;
+      border: 1px solid #dcdcdc;
+      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
+      color: #5f6368;
+      cursor: pointer;
+      display: inline-block;
+      font-family: Roboto, sans-serif;
+      font-size: 14px;
+      font-weight: 500;
+      height: 39px;
+      line-height: 36px;
+      margin-bottom: 12px;
+      padding: 0 24px;
+      text-align: center;
+      text-decoration: none;
+      width: 100%;
+    }
+    .google-signup-btn:hover {
+      background-color: #f5f5f5;
+    }
+    .google-icon-wrapper {
+      display: inline-block;
+      height: 18px;
+      margin-right: 10px;
+      width: 18px;
+    }
+    .google-icon {
+      border-radius: 2px;
+      height: 100%;
+      width: 100%;
+    }
+    .btn-text {
+      margin: 0;
+      padding: 0;
+    }
   }
 
   .card {
diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
index af3e34cc53c..fd284c86ff3 100644
--- a/src/common/pages/sign-up.tsx
+++ b/src/common/pages/sign-up.tsx
@@ -31,6 +31,8 @@ enum Stage {
   BUY_ACCOUNT = "buy-account"
 }
 
+declare var google: any;
+
 export const SignUp = (props: PageProps) => {
   const [lsReferral, setLsReferral] = useLocalStorage<string>(PREFIX + "_referral");
 
@@ -154,6 +156,31 @@ export const SignUp = (props: PageProps) => {
     }
   };
 
+  const handleSignUpClick = () => {
+    const client = google.accounts.oauth2.initTokenClient({
+      client_id: "106495050489-tm2kep6d89h1m1o4ejvmqcnh3qeusf02.apps.googleusercontent.com",
+      scope: "https://www.googleapis.com/auth/userinfo.email",
+      ux_mode: "redirect",
+      prompt: "consent",
+      include_granted_scopes: true,
+      callback: (response: any) => {
+        const requestOptions = {
+          method: "GET",
+          headers: {
+            Authorization: `Bearer ${response.access_token}`,
+            "Content-Type": "application/json"
+          }
+        };
+
+        fetch("https://www.googleapis.com/oauth2/v3/userinfo", requestOptions)
+          .then((response) => response.json())
+          .then((data) => setEmail(data.email))
+          .catch((error) => error(error));
+      }
+    });
+    client.requestAccessToken();
+  };
+
   return (
     <>
       <Meta title={_t("sign-up.header")} />
@@ -300,6 +327,16 @@ export const SignUp = (props: PageProps) => {
                     <></>
                   )}
                 </Form>
+                <Button className="google-signup-btn" onClick={handleSignUpClick}>
+                  <span className="google-icon-wrapper">
+                    <img
+                      className="google-icon"
+                      src="https://upload.wikimedia.org/wikipedia/commons/5/53/Google_%22G%22_Logo.svg"
+                      alt="Google logo"
+                    />
+                  </span>
+                  <span className="btn-text">Sign up with Google</span>
+                </Button>
                 <div className="text-center">
                   {_t("sign-up.login-text-1")}
                   <a className="pl-1" href="#" onClick={(e) => props.toggleUIProp("login")}>
diff --git a/src/server/template.tsx b/src/server/template.tsx
index 89e90b0a06d..022d65e9232 100644
--- a/src/server/template.tsx
+++ b/src/server/template.tsx
@@ -100,6 +100,7 @@ export const render = (req: express.Request, state: AppState) => {
                     }]
                   }
                 </script>
+                <script src="https://accounts.google.com/gsi/client"></script>
                 <style>
                   body {
                     display: block !important;

From 431816bc602dda74e31bdefdb9f12b47bb2a0313 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 3 May 2023 12:17:55 +0500
Subject: [PATCH 2/3] Set username too

---
 src/common/pages/sign-up.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
index fd284c86ff3..013f6c0ff74 100644
--- a/src/common/pages/sign-up.tsx
+++ b/src/common/pages/sign-up.tsx
@@ -174,7 +174,11 @@ export const SignUp = (props: PageProps) => {
 
         fetch("https://www.googleapis.com/oauth2/v3/userinfo", requestOptions)
           .then((response) => response.json())
-          .then((data) => setEmail(data.email))
+          .then((data) => {
+            const userName = data.name.toLowerCase().replace(/\s+/g, "");
+            setEmail(data.email);
+            setUsername(userName);
+          })
           .catch((error) => error(error));
       }
     });

From 890fc9ed3897df7c45cd572d5a0c7c53ece0bb48 Mon Sep 17 00:00:00 2001
From: Talha Saeed <talha.saeed@rolustech.net>
Date: Wed, 3 May 2023 15:54:46 +0500
Subject: [PATCH 3/3] Add condition while setting username4

---
 src/common/pages/sign-up.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/common/pages/sign-up.tsx b/src/common/pages/sign-up.tsx
index 013f6c0ff74..6c5e057aa3b 100644
--- a/src/common/pages/sign-up.tsx
+++ b/src/common/pages/sign-up.tsx
@@ -175,11 +175,13 @@ export const SignUp = (props: PageProps) => {
         fetch("https://www.googleapis.com/oauth2/v3/userinfo", requestOptions)
           .then((response) => response.json())
           .then((data) => {
-            const userName = data.name.toLowerCase().replace(/\s+/g, "");
             setEmail(data.email);
+            const userName = data.name
+              ? data.name.toLowerCase().replace(/\s+/g, "")
+              : data.email.split("@")[0];
             setUsername(userName);
           })
-          .catch((error) => error(error));
+          .catch((err) => error(err));
       }
     });
     client.requestAccessToken();