bendavis78 · January 13, 2016 20:52
diff --git a/- b/-
 <html>
 <head>
  <style>
    body {
      padding: 20px;
    }
    output {
      font-family: monospace;
      white-space: pre;
    }
    body:not(.resolved) #profile,
    body:not(.resolved) #login {
    }
    body:not(.authenticated) #profile {
      display: none;
    }
    body.authenticated #login {
      display: none;
    }
    #output {
      padding: 20px;
      display: block;
      border: 1px dashed #666;
      min-height: 20px;
    }
    #profile {
      display: flex;
    }
    #profile .avatar {
      display: block;
      width: 50px;
      height: 50px;
    }
    #profile .label {
      padding: 0 10px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  </style>
 </head>
 <body>

  <!-- login ui -->
  <div id="profile" data-provider="">
    <div>
      <img class="avatar" src=""></img>
    </div>
    <div class="label">
      <div class="status">
        Logged in as <span class="name"></span>
      </div>
      <div class="btn"><button id="logout">Log out</button></div>
    </div>
  </div>
  <button id="login">Log in with Facebook</button>

  <!-- JSON body input -->
  <p>
    <textarea cols="100" rows="20" id="body">
 {
  "urlName": "funtimes",
  "bandName": "Fun Times",
  "description": "As if creeping from the Southern swamps and mist-soaked cotton fields, SIMO’s “Stranger Blues” is the perfect table setter for the Nashville power trio’s vibrant new LP, Let Love Show the Way. They are a blueprint for reinvigorating the fusion of jazz improvisation, downhome blues and classic R&B, as well as many other genres’.",
  "photo": "http://placehold.it/250x250",
  "similarTo": "Foo, Bar",
  "genre": "Jazz",
  "website": "http://www.foobar.com"
 }
    </textarea>
    <br>
    <button id="create">Create</button>
  </p>
  <p>
    <input type="text" name="urlName"></input>
    <button id="get">Get</button>
  </p>
  <p id="output">
    <label>Output:</label>
    <output></output>
  </p>
  <script src="bower_components/hello/dist/hello.all.js"></script>
  <script src="bower_components/aws-sdk/dist/aws-sdk.min.js"></script>

  <script src="bower_components/browserify-cryptojs/rollups/hmac-sha256.js"></script>
  <script src="bower_components/browserify-cryptojs/rollups/sha256.js"></script>
  <script src="bower_components/browserify-cryptojs/components/hmac.js"></script>
  <script src="bower_components/browserify-cryptojs/components/enc-base64.js"></script>

  <script src="sigv4-authorization.js"></script>

  <script src='bower_components/swagger-js/browser/swagger-client.js' type='text/javascript'></script>
  <script type="text/javascript">
    /* global SwaggerClient, AWS, AWSSigV4Authorization */
    var $ = document.querySelector.bind(document);

    /**
     * AWS Cognito Authorization
     */ 
    AWS.config.region = 'us-east-1';

    function getAWSAuthorization(session, cb) {
      /* jshint camelcase: false */
      AWS.config.credentials = new AWS.CognitoIdentityCredentials({
        IdentityPoolId: 'us-east-1:dfaf3073-3c56-474c-84c4-5b650ee368dc',
        Logins: {
          'graph.facebook.com': session.access_token
        }
      });
      AWS.config.credentials.get(function(err) {
        if (err) {return cb(err);}
        var credentials = AWS.config.credentials;
        var sigV4Auth = new AWSSigV4Authorization({
          serviceName: 'execute-api',
          accessKey: credentials.accessKeyId,
          secretKey: credentials.secretAccessKey,
          sessionToken: credentials.sessionToken
        });
        cb(null, sigV4Auth);
      });
    }
    
    /**
     * Social Auth
     */
    /* global hello */
    var $body = $('body');
    var $profile = $('#profile');
    var $img = $('#profile .avatar');
    var $name = $('#profile .name');

    hello.init({
      facebook: '1676984842581934'
    });

    $('#login').addEventListener('click', function() {
      console.log('logging in...');
      hello('facebook').login();
    });

    function getClient(cb) {
      var client = new SwaggerClient({
        url: '/swagger.json',
        success: function() {
          cb(client);
        }
      });
    }

    function authReady(auth) {
      $('#logout').addEventListener('click', function() {
        console.log('logging out...');
        hello(auth.network).logout();
      });

      // Update the UI with social profile details
      hello(auth.network).api('/me').then(function(r) {
        /* jshint camelcase:false */
        console.log('profile data:', r);
        $profile.dataset.provider = auth.network;
        $name.innerText = r.first_name;
        $img.src = r.thumbnail;
      });
    }

    // lame debug error handler
    function handleError(error) {
      if (error.obj) {
        console.error(error.obj.code + ': ' + error.obj.message);
        console.log(error.obj);
      } else {
        console.log(error);
      }
    }

    function clientReady(client) {
      // enable any API-related actions
      $('#create').addEventListener('click', function() {
        var band = JSON.parse($('#body').value);
        client.bands.createBand({body: band}, function(response) {
          $('output').innerText = JSON.stringify(response.obj, null, 2);
        }, handleError);
      });

      $('#get').addEventListener('click', function() {
        var urlName = $('[name="urlName"]').value;
        client.bands.getBand({urlName: urlName}, function(response) {
          $('output').innerText = JSON.stringify(response.obj, null, 2);
        }, handleError);
      });
    }

    hello.on('auth.login', function(auth) {
      /* jshint camelcase:false */
      console.log('auth.login', auth);
      $body.classList.add('authenticated');

      // We're authenticated, but not authorized for API calls yet
      authReady(auth);

      // Get the authoirzation token from AWS
      getAWSAuthorization(auth.authResponse, function(err, sigV4Auth) {
        if (err) { handleError(err); }
        getClient(function(client) {
          // add the authorization to the client
          client.clientAuthorizations.add('sigV4', sigV4Auth);

          // NOW we're authorized to make API calls
          clientReady(client);
        });
      });
    });

    hello.on('auth.logout', function() {
      console.log('auth.logout');
      $body.classList.remove('authenticated');
      $profile.dataset.provider = '';
      $name.innerText = '';
      $img.src = '';
    });

  </script>
 </body>
 </html>
	<html>
	<head>
	<style>
	body {
	padding: 20px;
	}
	output {
	font-family: monospace;
	white-space: pre;
	}
	body:not(.resolved) #profile,
	body:not(.resolved) #login {
	}
	body:not(.authenticated) #profile {
	display: none;
	}
	body.authenticated #login {
	display: none;
	}
	#output {
	padding: 20px;
	display: block;
	border: 1px dashed #666;
	min-height: 20px;
	}
	#profile {
	display: flex;
	}
	#profile .avatar {
	display: block;
	width: 50px;
	height: 50px;
	}
	#profile .label {
	padding: 0 10px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}
	</style>
	</head>
	<body>

	<!-- login ui -->
	<div id="profile" data-provider="">
	<div>
	<img class="avatar" src=""></img>
	</div>
	<div class="label">
	<div class="status">
	Logged in as <span class="name"></span>
	</div>
	<div class="btn"><button id="logout">Log out</button></div>
	</div>
	</div>
	<button id="login">Log in with Facebook</button>

	<!-- JSON body input -->
	<p>
	<textarea cols="100" rows="20" id="body">
	{
	"urlName": "funtimes",
	"bandName": "Fun Times",
	"description": "As if creeping from the Southern swamps and mist-soaked cotton fields, SIMO’s “Stranger Blues” is the perfect table setter for the Nashville power trio’s vibrant new LP, Let Love Show the Way. They are a blueprint for reinvigorating the fusion of jazz improvisation, downhome blues and classic R&B, as well as many other genres’.",
	"photo": "http://placehold.it/250x250",
	"similarTo": "Foo, Bar",
	"genre": "Jazz",
	"website": "http://www.foobar.com"
	}
	</textarea>
	<br>
	<button id="create">Create</button>
	</p>
	<p>
	<input type="text" name="urlName"></input>
	<button id="get">Get</button>
	</p>
	<p id="output">
	<label>Output:</label>
	<output></output>
	</p>
	<script src="bower_components/hello/dist/hello.all.js"></script>
	<script src="bower_components/aws-sdk/dist/aws-sdk.min.js"></script>

	<script src="bower_components/browserify-cryptojs/rollups/hmac-sha256.js"></script>
	<script src="bower_components/browserify-cryptojs/rollups/sha256.js"></script>
	<script src="bower_components/browserify-cryptojs/components/hmac.js"></script>
	<script src="bower_components/browserify-cryptojs/components/enc-base64.js"></script>

	<script src="sigv4-authorization.js"></script>

	<script src='bower_components/swagger-js/browser/swagger-client.js' type='text/javascript'></script>
	<script type="text/javascript">
	/* global SwaggerClient, AWS, AWSSigV4Authorization */
	var $ = document.querySelector.bind(document);

	/**
	* AWS Cognito Authorization
	*/
	AWS.config.region = 'us-east-1';

	function getAWSAuthorization(session, cb) {
	/* jshint camelcase: false */
	AWS.config.credentials = new AWS.CognitoIdentityCredentials({
	IdentityPoolId: 'us-east-1:dfaf3073-3c56-474c-84c4-5b650ee368dc',
	Logins: {
	'graph.facebook.com': session.access_token
	}
	});
	AWS.config.credentials.get(function(err) {
	if (err) {return cb(err);}
	var credentials = AWS.config.credentials;
	var sigV4Auth = new AWSSigV4Authorization({
	serviceName: 'execute-api',
	accessKey: credentials.accessKeyId,
	secretKey: credentials.secretAccessKey,
	sessionToken: credentials.sessionToken
	});
	cb(null, sigV4Auth);
	});
	}

	/**
	* Social Auth
	*/
	/* global hello */
	var $body = $('body');
	var $profile = $('#profile');
	var $img = $('#profile .avatar');
	var $name = $('#profile .name');

	hello.init({
	facebook: '1676984842581934'
	});

	$('#login').addEventListener('click', function() {
	console.log('logging in...');
	hello('facebook').login();
	});

	function getClient(cb) {
	var client = new SwaggerClient({
	url: '/swagger.json',
	success: function() {
	cb(client);
	}
	});
	}

	function authReady(auth) {
	$('#logout').addEventListener('click', function() {
	console.log('logging out...');
	hello(auth.network).logout();
	});

	// Update the UI with social profile details
	hello(auth.network).api('/me').then(function(r) {
	/* jshint camelcase:false */
	console.log('profile data:', r);
	$profile.dataset.provider = auth.network;
	$name.innerText = r.first_name;
	$img.src = r.thumbnail;
	});
	}

	// lame debug error handler
	function handleError(error) {
	if (error.obj) {
	console.error(error.obj.code + ': ' + error.obj.message);
	console.log(error.obj);
	} else {
	console.log(error);
	}
	}

	function clientReady(client) {
	// enable any API-related actions
	$('#create').addEventListener('click', function() {
	var band = JSON.parse($('#body').value);
	client.bands.createBand({body: band}, function(response) {
	$('output').innerText = JSON.stringify(response.obj, null, 2);
	}, handleError);
	});

	$('#get').addEventListener('click', function() {
	var urlName = $('[name="urlName"]').value;
	client.bands.getBand({urlName: urlName}, function(response) {
	$('output').innerText = JSON.stringify(response.obj, null, 2);
	}, handleError);
	});
	}

	hello.on('auth.login', function(auth) {
	/* jshint camelcase:false */
	console.log('auth.login', auth);
	$body.classList.add('authenticated');

	// We're authenticated, but not authorized for API calls yet
	authReady(auth);

	// Get the authoirzation token from AWS
	getAWSAuthorization(auth.authResponse, function(err, sigV4Auth) {
	if (err) { handleError(err); }
	getClient(function(client) {
	// add the authorization to the client
	client.clientAuthorizations.add('sigV4', sigV4Auth);

	// NOW we're authorized to make API calls
	clientReady(client);
	});
	});
	});

	hello.on('auth.logout', function() {
	console.log('auth.logout');
	$body.classList.remove('authenticated');
	$profile.dataset.provider = '';
	$name.innerText = '';
	$img.src = '';
	});

	</script>
	</body>
	</html>