Skip to content

Commit

Permalink
Merge pull request #173 from ckhmer1/optional_States
Browse files Browse the repository at this point in the history 
Migrate to the new Google Identity Services library
  • Loading branch information
@Caprico85
Caprico85 authored Aug 18, 2021
2 parents 7090a2d + 171ecb5 commit 6bc006b
Showing 1 changed file with 87 additions and 81 deletions.
168 changes: 87 additions & 81 deletions lib/frontend/login.html
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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>

0 comments on commit 6bc006b

Please sign in to comment.