From 171ecb592fa6f6b27682265260ffd16d3c41f520 Mon Sep 17 00:00:00 2001
From: Claudio Chimera <Claudio.Chimera@ericsson.com>
Date: Tue, 17 Aug 2021 16:37:51 +0200
Subject: [PATCH] Migrate to the new Google Identity Services library

---
 lib/frontend/login.html | 168 +++++++++++++++++++++-------------------
 1 file changed, 87 insertions(+), 81 deletions(-)
diff --git a/lib/frontend/login.html b/lib/frontend/login.html
index 0042a583..199e45de 100755
--- a/lib/frontend/login.html
+++ b/lib/frontend/login.html
@@ -1,24 +1,15 @@
 <!doctype html>
 <html lang="en">
+
 <head>
     <meta charset="utf-8">
-    <meta name="viewport"
-          content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
-    <meta name="google-signin-scope" content="profile email">
-    <meta name="google-signin-client_id" content="GOOGLE_CLIENT_ID">
-    <script src="https://apis.google.com/js/platform.js" async defer></script>
+    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
+
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
 
     <title>Node-RED SmartHome</title>
 
     <style>
-        .g-signin2{
-            width: 100%;
-        }
-
-        .g-signin2 > div{
-            margin: 0 auto;
-        }
-
         body {
             margin: 0;
             font-family: 'Roboto', 'Noto', sans-serif;
@@ -159,81 +150,96 @@
         }
     </style>
 </head>
-<body>
-
 
-<div id="app-header">
-    <div id="app-toolbar">
-        <div id="home-icon">
-            <svg viewbox="0 0 24 24" preserveaspectratio="xMidYMid meet" focusable="false"
-                 style="pointer-events: none; display: block; fill: white; stroke: white;">
-                <g>
-                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
-                </g>
-            </svg>
+<body>
+    <div id="app-header">
+        <div id="app-toolbar">
+            <div id="home-icon">
+                <svg viewbox="0 0 24 24" preserveaspectratio="xMidYMid meet" focusable="false"
+                    style="pointer-events: none; display: block; fill: white; stroke: white;">
+                    <g>
+                        <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"></path>
+                    </g>
+                </svg>
+            </div>
+            <div id="main-title">Node-RED SmartHome</div>
         </div>
-        <div id="main-title">Node-RED SmartHome</div>
     </div>
-</div>
 
-<div class="main">
-    <h1>Link your devices to Google</h1>
-    <svg xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" width="100px" height="100px" id="Layer_1" viewBox="0 0 512 512" xml:space="preserve"><g><circle cx="156.268" cy="167.705" fill="#4285F4" r="156.268"/><path d="M512,182.95c0,17.544-14.224,31.762-31.762,31.762s-31.762-14.218-31.762-31.762   c0-17.543,14.224-31.762,31.762-31.762S512,165.407,512,182.95z" fill="#34A853"/><path d="M454.829,260.449c0,35.081-28.438,63.522-63.523,63.522c-35.088,0-63.524-28.441-63.524-63.522   c0-35.083,28.437-63.524,63.524-63.524C426.392,196.925,454.829,225.367,454.829,260.449z" fill="#EA4335"/><path d="M467.533,424.339c0,42.1-34.124,76.225-76.228,76.225c-42.104,0-76.229-34.125-76.229-76.225   c0-42.098,34.124-76.227,76.229-76.227C433.409,348.112,467.533,382.241,467.533,424.339z" fill="#FBBC05"/></g></svg>
-
-    <form method="post" id="loginform" style="display: none;">
-
-        <div id="error_invalid_user">
+    <div class="main">
+        <h1>Link your devices to Google</h1>
+        <svg xmlns="http://www.w3.org/2000/svg" baseProfile="tiny" width="100px" height="100px" id="Layer_1"
+            viewBox="0 0 512 512" xml:space="preserve">
+            <g>
+                <circle cx="156.268" cy="167.705" fill="#4285F4" r="156.268" />
+                <path
+                    d="M512,182.95c0,17.544-14.224,31.762-31.762,31.762s-31.762-14.218-31.762-31.762   c0-17.543,14.224-31.762,31.762-31.762S512,165.407,512,182.95z"
+                    fill="#34A853" />
+                <path
+                    d="M454.829,260.449c0,35.081-28.438,63.522-63.523,63.522c-35.088,0-63.524-28.441-63.524-63.522   c0-35.083,28.437-63.524,63.524-63.524C426.392,196.925,454.829,225.367,454.829,260.449z"
+                    fill="#EA4335" />
+                <path
+                    d="M467.533,424.339c0,42.1-34.124,76.225-76.228,76.225c-42.104,0-76.229-34.125-76.229-76.225   c0-42.098,34.124-76.227,76.229-76.227C433.409,348.112,467.533,382.241,467.533,424.339z"
+                    fill="#FBBC05" />
+            </g>
+        </svg>
+
+        <div id="error_invalid_user" >
             Invalid username or password. Please try again!
         </div>
 
-        <div class="field">
-            <input type="text" name="username" id="username" autocomplete="off" autocapitalize="none" placeholder=" ">
-            <label for="username">Username</label>
-        </div>
+        <form method="post" id="loginform" style="display: none;">
 
-        <div class="field">
-            <input type="password" name="password" id="password" placeholder=" ">
-            <label for="password">Password</label>
-        </div>
+            <div class="field">
+                <input type="text" name="username" id="username" autocomplete="off" autocapitalize="none" placeholder=" ">
+                <label for="username">Username</label>
+            </div>
+
+            <div class="field">
+                <input type="password" name="password" id="password" placeholder=" ">
+                <label for="password">Password</label>
+            </div>
+
+            <input type="hidden" name="client_id">
+            <input type="hidden" name="redirect_uri">
+            <input type="hidden" name="state" />
+            <input type="hidden" name="response_type" />
+            <input type="hidden" name="id_token" />
+
+            <button id="login-button">LOGIN</button>
+        </form>
+        <div id="g_id_onload" data-client_id="GOOGLE_CLIENT_ID" data-context="signin" data-ux_mode="popup" data-auto_prompt="false" data-callback="handleCredentialResponse"></div>
+        <div id='login-google' style="display:none;align-items: center;" class="g_id_signin" data-type="standard"></div>
+    </div>
+
+    <script>
+        function handleCredentialResponse(response) {
+            document.querySelector('[name="id_token"]').value = response.credential;
+            document.getElementById("loginform").submit();
+        }
 
-        <input type="hidden" name="client_id">
-        <input type="hidden" name="redirect_uri">
-        <input type="hidden" name="state"/>
-        <input type="hidden" name="response_type"/>
-        <input type="hidden" name="id_token"/>
-
-        <button id="login-button">LOGIN</button>
-    </form>
-    <div id='login-google' style="display:none;" class="g-signin2" data-onsuccess="onSignIn"></div>
-</div>
-
-<script>
-    function onSignIn(googleUser) {
-        var id_token = googleUser.getAuthResponse().id_token;
-        document.querySelector('[name="id_token"]').value = id_token;
-        document.getElementById("loginform").submit();
-        googleUser.disconnect();
-    }
-
-    document.addEventListener("DOMContentLoaded", function(event) {
-        let url = window.location.href.split('?')[0];
-        document.getElementById("loginform").action = url;
-
-        // Set each hidden input from a value obtained from the URL
-        let params = new URLSearchParams(window.location.search);
-        document.querySelector('[name="client_id"]').value = params.get('client_id');
-        document.querySelector('[name="redirect_uri"]').value = decodeURIComponent(params.get('redirect_uri'));
-        document.querySelector('[name="state"]').value = params.get('state');
-
-        if (USE_GOOGLE_LOGIN) {
-            document.getElementById('login-google').style.display = 'block';
-        } else {
-            document.getElementById('loginform').style.display = 'block';
-        }
-
-        if(params.get('error') === 'invalid_user')
-            document.getElementById('error_invalid_user').style.display = 'block';
-    });
-</script>
+        document.addEventListener("DOMContentLoaded", function (event) {
+            let url = window.location.href.split('?')[0];
+            document.getElementById("loginform").action = url;
+
+            // Set each hidden input from a value obtained from the URL
+            let params = new URLSearchParams(window.location.search);
+            document.querySelector('[name="client_id"]').value = params.get('client_id');
+            document.querySelector('[name="redirect_uri"]').value = decodeURIComponent(params.get('redirect_uri'));
+            document.querySelector('[name="state"]').value = params.get('state');
+
+            if (USE_GOOGLE_LOGIN) {
+                document.getElementById('login-google').style.display = 'block';
+            } else {
+                document.getElementById('loginform').style.display = 'block';
+            }
+
+            if (params.get('error')) {
+                console.log("CCHI ERRORE " + params.get("error"));
+                document.getElementById('error_invalid_user').style.display = 'block';
+            }
+        });
+    </script>
 </body>
-</html>
+
+</html>
\ No newline at end of file
