TireTargetsWeb/Components/Layout/MainLayout.razor

194 lines
6.2 KiB
Plaintext

@inherits LayoutComponentBase
@inject NavigationManager _navigationManager
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
</head>
<TelerikRootComponent>
<!-- Login/Register Modal -->
<div class="modal-register mfp-hide" id="modal-register">
<div class="card mx-auto" style="max-width: 400px;">
<div class="card-header py-3 bg-transparent text-center">
<h3 class="mb-0 fw-normal">Please Sign In:</h3>
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-12 text-center justify-content-center align-items-center">
@if (MainLayout.Session.Count == 0)
{
<!-- Google Sign In-->
<script src="https://accounts.google.com/gsi/client" async></script>
<script>
function decodeJwtResponse(token) {
var base64Url = token.split(".")[1];
var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
var jsonPayload = decodeURIComponent(
atob(base64)
.split("")
.map(function (c) {
return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
})
.join("")
);
return JSON.parse(jsonPayload);
}
var saved_response;
function onClickHandler(response) {
const responsePayload = decodeJwtResponse(response.credential);
saved_response = responsePayload;
/*
console.log("ID: " + responsePayload.sub);
console.log('Full Name: ' + responsePayload.name);
console.log('Given Name: ' + responsePayload.given_name);
console.log('Family Name: ' + responsePayload.family_name);
console.log("Image URL: " + responsePayload.picture);
console.log("Email: " + responsePayload.email); */
var url = new URL("https://localhost:7219/AuthGoogle/id=" + responsePayload.sub + "&fname=" + responsePayload.name + "&email=" + responsePayload.email);
window.location.href = url;
}
</script>
<div id="g_id_onload"
data-client_id="166700556504-8t29okj2dp63ak7navmauj3200uns3ci.apps.googleusercontent.com"
data-auto_prompt="false"
data-callback="onClickHandler">
</div>
<div class="g_id_signin"
data-type="standard"
data-size="large"
data-theme="outline"
data-text="sign_in_with"
data-shape="rectangular"
data-logo_alignment="left">
</div>
<!-- Facebook Sign In -->
<script>
let clicked = false;
function statusChangeCallback(response) { // Called with the results from FB.getLoginStatus().
if (response.status === 'connected') { // Logged into your webpage and Facebook.
loginFB();
}
}
function checkLoginState() { // Called when a person is finished with the Login Button.
FB.getLoginStatus(function (response) { // See the onlogin handler
statusChangeCallback(response);
});
}
window.fbAsyncInit = function () {
FB.init({
status: false,
appId: '1293246192236822',
cookie: false, // Enable cookies to allow the server to access the session.
xfbml: true, // Parse social plugins on this webpage.
version: 'v23.0' // Use this Graph API version for this call.
});
}
function clickButton() {
clicked = true;
console.log('Click!');
}
function loginFB() { // Testing Graph API after login. See statusChangeCallback() for when this call is made.
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function (response) {
console.log('Successful login for: ' + response.name);
if (clicked) {
var url = new URL("https://localhost:7219/AuthFacebook/id=" + response.id + "&fname=" + response.name + "&email=" + response.email);
window.location.href = url;
}
});
}
/* LIST OF FIELDS RETURNED:
name = response.name
id = response.id
email = response.email
*/
</script>
<br />
<!-- The JS SDK Login Button -->
<fb:login-button class="text-center" scope="public_profile,email" onclick="clickButton();" onlogin="checkLoginState();">
</fb:login-button>
<!-- Load the JS SDK asynchronously -->
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js"></script>
}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Header
============================================= -->
<header id="header" class="transparent-header" data-sticky-shrink="false">
<div id="header-wrap" class="border-default">
<div class="container">
<div class="header-row">
<!-- Logo
============================================= -->
<div id="logo">
<a href="/">
<img class="logo-default" srcset="demos/ecommerce/images/logo.png, demos/ecommerce/images/logo@2x.png 2x" src="demos/ecommerce/images/logo@2x.png" alt="TireTargets Logo">
</a>
</div><!-- #logo end -->
<div class="header-misc">
@if(MainLayout.Session.Count != 0)
{
<a href="/logout" data-lightbox="inline" class="button button-small fw-semibold button-border button-rounded ls-0 fw-medium text-transform-none">Sign Out</a>
}
</div>
<!-- Primary Navigation
============================================= -->
<nav class="primary-menu">
@if(MainLayout.Session.Count == 0)
{
<a href="#modal-register" onclick="clickButton(); return true;" data-lightbox="inline" class="button button-large fw-semibold button-border button-rounded ls-0 text-transform-none">Sign In</a>
<br>
}
else
{
}
</nav><!-- #primary-menu end -->
</div>
</div>
</div>
<div class="header-wrap-clone"></div>
</header><!-- #header end -->
@Body
</TelerikRootComponent>