tvl-depot/users/wpcarro/assessments/tt/client/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="google-signin-client_id" content="580018768696-4beppspj6cu7rhjnfgok8lbmh9a4n3ok.apps.googleusercontent.com">
    <title>Elm SPA</title>
    <link rel="stylesheet" type="text/css" href="./output.css" />
    <link rel="stylesheet" type="text/css" href="./print.css" media="print" />
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <script src="./Main.min.js"></script>
  </head>
  <body class="font-serif">
    <div id="mount"></div>
    <script>
     function onSignIn(googleUser) {
       console.log(googleUser);
     }

     var app = Elm.Main.init({node: document.getElementById("mount")});

     app.ports.printPage.subscribe(function() {
       window.print();
     });

     app.ports.googleSignIn.subscribe(function() {
       var auth2 = gapi.auth2.getAuthInstance();
       var googleUser = auth2.signIn();
     });

     app.ports.googleSignOut.subscribe(function() {
       var auth2 = gapi.auth2.getAuthInstance();
       auth2.signOut().then(function() {
         console.log('Google user successfully signed out.');
       });
     });
    </script>
  </body>
</html>
Add Elm boilerplate to project Create a top-level client directory to store my Elm boilerplate. 2020-07-29 10:51:18 +02:00			`<!DOCTYPE html>`
			`<html lang="en">`
			`<head>`
			`<meta charset="UTF-8" />`
Add boilerplate for Google sign-in For more information, read: https://developers.google.com/identity/sign-in/web/sign-in?authuser=1 TODO: Use Elm ports or something similar to properly interop with the onSignIn and signOn functions defined in index.html. 2020-07-29 11:13:19 +02:00			`<meta name="google-signin-client_id" content="580018768696-4beppspj6cu7rhjnfgok8lbmh9a4n3ok.apps.googleusercontent.com">`
Add Elm boilerplate to project Create a top-level client directory to store my Elm boilerplate. 2020-07-29 10:51:18 +02:00			`<title>Elm SPA</title>`
Support printing user's itinerary - Define print.css with media=print type (note: could've been handled with @media queries) - Define printPage port to interop with window.print() JS function - Support UI.wrapNoPrint to wrap components with a the no-print CSS 2020-08-02 15:23:38 +02:00			`<link rel="stylesheet" type="text/css" href="./output.css" />`
			`<link rel="stylesheet" type="text/css" href="./print.css" media="print" />`
Add boilerplate for Google sign-in For more information, read: https://developers.google.com/identity/sign-in/web/sign-in?authuser=1 TODO: Use Elm ports or something similar to properly interop with the onSignIn and signOn functions defined in index.html. 2020-07-29 11:13:19 +02:00			`<script src="https://apis.google.com/js/platform.js" async defer></script>`
Add Elm boilerplate to project Create a top-level client directory to store my Elm boilerplate. 2020-07-29 10:51:18 +02:00			`<script src="./Main.min.js"></script>`
			`</head>`
			`<body class="font-serif">`
			`<div id="mount"></div>`
			`<script>`
Add boilerplate for Google sign-in For more information, read: https://developers.google.com/identity/sign-in/web/sign-in?authuser=1 TODO: Use Elm ports or something similar to properly interop with the onSignIn and signOn functions defined in index.html. 2020-07-29 11:13:19 +02:00			`function onSignIn(googleUser) {`
Partially support federated login Two things: 1. I've never attempted to support this before. 2. It seems surprisingly and perhaps deceptively simpler than what I expected. I'm unsure what to do once Google's API authenticates the user. I currently look-up the user's role, trips, etc. using their email address. The role is stored in the Accounts table alongside username, email, password. I will speak with the interviewer tomorrow about this. 2020-08-02 22:27:08 +02:00			`console.log(googleUser);`
Add boilerplate for Google sign-in For more information, read: https://developers.google.com/identity/sign-in/web/sign-in?authuser=1 TODO: Use Elm ports or something similar to properly interop with the onSignIn and signOn functions defined in index.html. 2020-07-29 11:13:19 +02:00			`}`

Support printing user's itinerary - Define print.css with media=print type (note: could've been handled with @media queries) - Define printPage port to interop with window.print() JS function - Support UI.wrapNoPrint to wrap components with a the no-print CSS 2020-08-02 15:23:38 +02:00			`var app = Elm.Main.init({node: document.getElementById("mount")});`

			`app.ports.printPage.subscribe(function() {`
			`window.print();`
			`});`
Partially support federated login Two things: 1. I've never attempted to support this before. 2. It seems surprisingly and perhaps deceptively simpler than what I expected. I'm unsure what to do once Google's API authenticates the user. I currently look-up the user's role, trips, etc. using their email address. The role is stored in the Accounts table alongside username, email, password. I will speak with the interviewer tomorrow about this. 2020-08-02 22:27:08 +02:00
			`app.ports.googleSignIn.subscribe(function() {`
			`var auth2 = gapi.auth2.getAuthInstance();`
			`var googleUser = auth2.signIn();`
			`});`

			`app.ports.googleSignOut.subscribe(function() {`
			`var auth2 = gapi.auth2.getAuthInstance();`
			`auth2.signOut().then(function() {`
			`console.log('Google user successfully signed out.');`
			`});`
			`});`
Add Elm boilerplate to project Create a top-level client directory to store my Elm boilerplate. 2020-07-29 10:51:18 +02:00			`</script>`
			`</body>`
			`</html>`