Google signup options

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 {

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,37 @@ 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);
+            const userName = data.name
+              ? data.name.toLowerCase().replace(/\s+/g, "")
+              : data.email.split("@")[0];
+            setUsername(userName);
+          })
+          .catch((err) => error(err));
+      }
+    });
+    client.requestAccessToken();
+  };
+
   return (
     <>
       <Meta title={_t("sign-up.header")} />
@@ -300,6 +333,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")}>

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;