mckiersey/final_home.html

## final_home.html
<!DOCTYPE html>
<html>

<head>
    <title>Web dev for absolute beginners</title>
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id"
        content="170958026096-1delfs3g8tg4hoeg6bgs5ickhpe7k5pt.apps.googleusercontent.com">
    <!--JQuery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
    <!--Clipboard-->
    <script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script>

</head>

<body>
    <h1>Full stack front end dev</h1>
    <p1>First step towards your website- nice one!</p1>

    <h2 id='AuthStatus'></h2>

    <h2>Adding content to our website</h2>
    <iframe id="video" width=" 560" height="315" src="https://www.youtube.com/embed/mceI44LrEKk" allow="clipboard-read"
        frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
        allowfullscreen>
    </iframe>


    <h2>Adding a sign in button</h2>
    <div class="g-signin2" data-onsuccess="onSignIn" id='signIn'></div>

    <h2>Adding a sign out button</h2>
    <a href="#" onclick="signOut();">Sign out</a>

    <h2>Adding a Protected Route button</h2>
    <a href="#" onclick="ProtectedRoute();">Protected Route</a>


</html>

<script>
    // GET COOKIE FUNCTION
    function getCookieValue(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }
    //Auth status
    var cookieToken = getCookieValue('USER_SESSION_TOKEN')
    console.log('cookie token value:', cookieToken)
    if (cookieToken == "") {
        document.getElementById('AuthStatus').innerHTML = "<span style='color: red;'>Not Signed in</span>";
    } else {
        document.getElementById('AuthStatus').innerHTML = "<span style='color: green;''>Signed in</span>";
        document.getElementById('AuthStatus').style.colour = "Green"

    }


    //SIGN IN/ SIGN UP
    function onSignIn(googleUser) {
        var id_token = googleUser.getAuthResponse().id_token;
        // POST NEW USER TO BACK END;
        try {
            $.post('http://localhost:80/SignIn', {
                token: id_token
            }).done(function (data) {
                console.log('Server response :', data)
            });
        } catch (err) {
            console.log('failed to post to backend')
            response.send('Error: ' + err)
        }

    }

    // A protected route function
    function ProtectedRoute() {
        // Get token from browser
        var CookieToken = getCookieValue('USER_SESSION_TOKEN')
        try {
            $.post('http://localhost:80/ProtectedRoute', {
                token: CookieToken
            }).done(function (data) {
                if (data == '* Token verification SUCCESS: User logged in *') {
                    console.log('Server response :', data)
                    window.location.href = 'http://localhost:80/ProtectedProfile'
                } else {
                    console.log('Server response :', data)
                    alert('Please sign in')
                    window.location.href = 'http://localhost:80/Home'

                };

            });
        } catch (err) {
            console.log('failed to post to backend')
            response.send('Error: ' + err)
            window.location.href = 'http://localhost:80/home'

        }
    }

    function signOut() {
        var getUrl = `http://localhost:80/SignOut`
        try {
            $.get(getUrl, {})
                .done(function (data) {
                    console.log('Sign out server response :', data)
                    window.location.href = "http://localhost:80/LoggedOutPage"
                });
        } catch (err) {
            console.log('failed to post to backend')
            response.send('Error: ' + err)
        }
    }
</script>

</body>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Web dev for absolute beginners</title>
	<script src="https://apis.google.com/js/platform.js" async defer></script>
	<meta name="google-signin-client_id"
	content="170958026096-1delfs3g8tg4hoeg6bgs5ickhpe7k5pt.apps.googleusercontent.com">
	<!--JQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" type="text/javascript"></script>
	<!--Clipboard-->
	<script src="//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.4.0/clipboard.min.js"></script>

	</head>

	<body>
	<h1>Full stack front end dev</h1>
	<p1>First step towards your website- nice one!</p1>

	<h2 id='AuthStatus'></h2>

	<h2>Adding content to our website</h2>
	<iframe id="video" width=" 560" height="315" src="https://www.youtube.com/embed/mceI44LrEKk" allow="clipboard-read"
	frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
	allowfullscreen>
	</iframe>


	<h2>Adding a sign in button</h2>
	<div class="g-signin2" data-onsuccess="onSignIn" id='signIn'></div>

	<h2>Adding a sign out button</h2>
	<a href="#" onclick="signOut();">Sign out</a>

	<h2>Adding a Protected Route button</h2>
	<a href="#" onclick="ProtectedRoute();">Protected Route</a>


	</html>

	<script>
	// GET COOKIE FUNCTION
	function getCookieValue(cname) {
	var name = cname + "=";
	var decodedCookie = decodeURIComponent(document.cookie);
	var ca = decodedCookie.split(';');
	for (var i = 0; i < ca.length; i++) {
	var c = ca[i];
	while (c.charAt(0) == ' ') {
	c = c.substring(1);
	}
	if (c.indexOf(name) == 0) {
	return c.substring(name.length, c.length);
	}
	}
	return "";
	}
	//Auth status
	var cookieToken = getCookieValue('USER_SESSION_TOKEN')
	console.log('cookie token value:', cookieToken)
	if (cookieToken == "") {
	document.getElementById('AuthStatus').innerHTML = "<span style='color: red;'>Not Signed in</span>";
	} else {
	document.getElementById('AuthStatus').innerHTML = "<span style='color: green;''>Signed in</span>";
	document.getElementById('AuthStatus').style.colour = "Green"

	}



	//SIGN IN/ SIGN UP
	function onSignIn(googleUser) {
	var id_token = googleUser.getAuthResponse().id_token;
	// POST NEW USER TO BACK END;
	try {
	$.post('http://localhost:80/SignIn', {
	token: id_token
	}).done(function (data) {
	console.log('Server response :', data)
	});
	} catch (err) {
	console.log('failed to post to backend')
	response.send('Error: ' + err)
	}

	}

	// A protected route function
	function ProtectedRoute() {
	// Get token from browser
	var CookieToken = getCookieValue('USER_SESSION_TOKEN')
	try {
	$.post('http://localhost:80/ProtectedRoute', {
	token: CookieToken
	}).done(function (data) {
	if (data == '* Token verification SUCCESS: User logged in *') {
	console.log('Server response :', data)
	window.location.href = 'http://localhost:80/ProtectedProfile'
	} else {
	console.log('Server response :', data)
	alert('Please sign in')
	window.location.href = 'http://localhost:80/Home'

	};

	});
	} catch (err) {
	console.log('failed to post to backend')
	response.send('Error: ' + err)
	window.location.href = 'http://localhost:80/home'

	}
	}

	function signOut() {
	var getUrl = `http://localhost:80/SignOut`
	try {
	$.get(getUrl, {})
	.done(function (data) {
	console.log('Sign out server response :', data)
	window.location.href = "http://localhost:80/LoggedOutPage"
	});
	} catch (err) {
	console.log('failed to post to backend')
	response.send('Error: ' + err)
	}
	}
	</script>

	</body>