Adding the first pass of the website

cloudnative · Apr 22, 2015 · 8a38902 · 8a38902
1 parent 3592c8d
commit 8a38902
Show file tree

Hide file tree

Showing 8 changed files with 354 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -28,3 +28,4 @@ node_modules
 
 # Ignore the config file as it has secrets in it
 config.yml
+s3-website/public/config.js
diff --git a/s3-website/public/error.html b/s3-website/public/error.html
diff --git a/s3-website/public/index.html b/s3-website/public/index.html
@@ -0,0 +1,92 @@
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="description" content="An example chat application taking advantage of AWS Lambda">
+    <meta name="author" content="CloudNative (@CloudNativeIO)">
+    <title>Lambda Chat</title>
+
+    <!-- Latest compiled and minified CSS -->
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
+
+    <!-- Custom styles for this template -->
+    <link href="lambda-chat.css" rel="stylesheet">
+
+    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
+    <!--[if lt IE 9]>
+      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+    <![endif]-->
+
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
+
+    <script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.12.min.js"></script>
+
+    <script src="config.js"></script>
+    <script src="lambda-chat.js"></script>
+
+    <!-- Google signing Javascript -->
+    <script src="https://plus.google.com/js/client:platform.js" type="text/javascript"></script>
+  </head>
+<body>
+
+    <!-- Fixed navbar -->
+    <nav class="navbar navbar-default navbar-fixed-top">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="/">Lambda Chat</a>
+        </div>
+
+        <div id="navbar" class="collapse navbar-collapse">
+          <ul class="nav navbar-nav">
+            <!--
+            <li class="active"><a href="#">Home</a></li>
+            <li><a href="#about">About</a></li>
+            <li><a href="#contact">Contact</a></li>
+          -->
+          </ul>
+          <div class="navbar-form navbar-right">
+            <button id="signout-button" class="btn btn-default hidden">
+                Sign out
+            </button>
+          </div>
+        </div><!--/.nav-collapse -->
+      </div>
+    </nav>
+
+    <!-- Begin page content -->
+    <div class="container">
+      <p class="lead">A simple chat application using AWS Lambda, SNS, DynamoDB and hosted on S3.</p>
+
+      <div id="signed-out">
+        <p>Please sign in so we can assign you temporary AWS credentials.</p>
+
+        <div id="signin-button">
+          <div id="renderMe"></div>
+        </div>
+
+      </div> <!-- signed-out -->
+
+      <div id="signed-in">
+        TODO Awesome chat interface here
+      </div> <!-- signed-out -->
+
+    </div> <!-- container -->
+
+    <footer class="footer">
+      <div class="container">
+        <p class="footer-text text-muted">Created by <a href="https://cloudnative.io/">CloudNative</a></p>
+      </div>
+    </footer>
+</body>
+</html>
diff --git a/s3-website/public/lambda-chat.css b/s3-website/public/lambda-chat.css
@@ -0,0 +1,33 @@
+html {
+  position: relative;
+  min-height: 100%;
+}
+
+body {
+  /* Margin bottom by footer height */
+  margin-bottom: 60px;
+}
+
+body > .container {
+  padding: 60px 15px 0;
+}
+
+.footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  /* Set the fixed height of the footer here */
+  height: 60px;
+  background-color: #f5f5f5;
+}
+
+.footer > .container {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+.footer > .container > p  {
+  margin: 20px 0;
+}
+
+
diff --git a/s3-website/public/lambda-chat.js b/s3-website/public/lambda-chat.js
@@ -0,0 +1,115 @@
+var web_identity_token = null;
+
+function showSigninButton() {
+    var options = {
+        'callback' : signinCallback,
+        'approvalprompt' : 'force',
+        'scope' : 'profile',
+        'cookiepolicy' : 'single_host_origin',
+        'clientid' : google_oauth_client_id,
+    };
+    gapi.signin.render('renderMe', options);
+}
+
+
+function signinCallback(authResult) {
+    console.log('signinCallback() START');
+    console.log(authResult);
+
+    if (authResult['status']['signed_in']) {
+        console.log('User is signed in!');
+
+        // Toggle state to signed in
+        setStateSignedIn();
+
+        // Get the profile details about the user
+        gapi.client.load('plus', 'v1', getUserProfile)
+
+        // Save the token
+        web_identity_token = authResult['id_token']
+
+        getAwsCredentials();
+        // AWS.config.credentials = new AWS.WebIdentityCredentials({
+        //     RoleArn: 'arn:aws:iam::1234567890:role/WebIdentity',
+        //     WebIdentityToken: authResult['id_token']
+        // });
+
+        // console.log('Temporary AWS credentials are:')
+        // console.log(AWS.config.credentials)
+
+    } else {
+        // Update the app to reflect a signed out user
+        // Possible error values:
+        //   "user_signed_out" - User is signed-out
+        //   "access_denied" - User denied access to your app
+        //   "immediate_failed" - Could not automatically log in the user
+        console.log('Sign-in state: ' + authResult['error']);
+
+        console.log('User is signed out');
+
+
+        // Toggle state to signed out
+        setStateSignedOut();
+    }
+
+    console.log('signinCallback() END');
+}
+
+
+function getAwsCredentials() {
+    var params = {
+        RoleArn: website_iam_role_arn,
+        RoleSessionName: 'lambda-chat',
+        WebIdentityToken: web_identity_token
+    };
+    console.log('Setting AWS credentials')
+    var sts = new AWS.STS();
+    sts.assumeRoleWithWebIdentity(params, function(err, data) {
+        if (err) console.log(err, err.stack); // an error occurred
+        else     console.log(data);           // successful response
+    });
+}
+
+
+function getUserProfile() {
+    gapi.client.plus.people.get({userId: 'me'}).execute(function(resp) {
+        console.log('Got user details')
+        console.log(resp);
+    });
+}
+
+function setStateSignedOut() {
+    // Toggle state to signed out
+    $('#signout-button').addClass('hidden');
+    $('#signed-out').show();
+    $('#signed-in').hide();
+}
+
+function setStateSignedIn() {
+    // Toggle state to signed in
+    $('#signout-button').removeClass('hidden');
+    $('#signed-out').hide();
+    $('#signed-in').show();
+}
+
+function signOut() {
+    console.log('signOut() START');
+    gapi.auth.signOut();
+
+    setStateSignedOut();
+
+    console.log('signOut() END');
+}
+
+
+// Load
+$(function() {
+    // Set initial state to signed out
+    setStateSignedOut();
+
+    // Add listener for signout button clicks
+    $('#signout-button').click(signOut);
+
+    // Show the sign in button
+    showSigninButton();
+});
diff --git a/s3-website/setup.sh b/s3-website/setup.sh
@@ -0,0 +1,57 @@
+#!/bin/bash
+# Copyright 2015 CloudNative, Inc.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+# Stop execution if something goes wrong
+set -e
+
+# Read configuration details and set them as environment variables
+echo "Loading configuration file: ../config.yml"
+source ../yaml2shell.sh
+eval $(parse_yaml ../config.yml)
+echo "Configuration loaded"
+
+echo "Creating an S3 bucket called '${s3_bucket}' in '${region}' for hosting the static website..."
+aws s3 mb --region ${region} s3://${s3_bucket}/
+
+echo "Setting the S3 bucket up to host a static website..."
+aws s3 website  --region ${region} s3://${s3_bucket}/ --index-document 'index.html' --error-document 'error.html'
+
+echo "Add an S3 bucket policy that allows public read access to the website..."
+cat > s3-policy.json <<EOF
+{
+  "Version": "2012-10-17",
+  "Statement": [
+    {
+      "Sid": "PublicAccess",
+      "Effect": "Allow",
+      "Principal": "*",
+      "Action": ["s3:GetObject"],
+      "Resource": ["arn:aws:s3:::${s3_bucket}/*"
+      ]
+    }
+  ]
+}
+EOF
+aws s3api put-bucket-policy --bucket ${s3_bucket} --policy file://s3-policy.json
+rm s3-policy.json
+
+echo "Upload the website files to S3..."
+aws s3 sync --region ${region} public/ s3://${s3_bucket}/
+
+echo "-- DONE --"
+
+echo "The website is now available at: http://${s3_bucket}.s3-website-${region}.amazonaws.com"
+
diff --git a/s3-website/update.sh b/s3-website/update.sh
@@ -0,0 +1,36 @@
+#!/bin/bash
+# Copyright 2015 CloudNative, Inc.
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#    http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+# Stop execution if something goes wrong
+set -e
+
+# Read configuration details and set them as environment variables
+echo "Loading configuration file: ../config.yml"
+source ../yaml2shell.sh
+eval $(parse_yaml ../config.yml)
+echo "Configuration loaded"
+
+echo "Writing Javascript config file..."
+cat > public/config.js <<EOF
+/* Config file generated by running Lambda Chat's update.sh script */
+var google_oauth_client_id = '${google_oauth_client_id}';
+var website_iam_role_arn = '${website_iam_role_arn}';
+EOF
+
+echo "Upload the website files to S3..."
+aws s3 sync --region ${region} public/ s3://${s3_bucket}/
+
+echo "-- DONE --"
diff --git a/yaml2shell.sh b/yaml2shell.sh
@@ -0,0 +1,20 @@
+# Code from: http://stackoverflow.com/questions/5014632/how-can-i-parse-a-yaml-file-from-a-linux-shell-script
+# Will parse a YAML file and output shell environment variables
+# Usage: parse_yaml sample.yml
+# Typical usage: eval $(parse_yaml sample.yml)
+function parse_yaml {
+   local prefix=$2
+   local s='[[:space:]]*' w='[a-zA-Z0-9_]*' fs=$(echo @|tr @ '\034')
+   sed -ne "s|^\($s\):|\1|" \
+        -e "s|^\($s\)\($w\)$s:$s[\"']\(.*\)[\"']$s\$|\1$fs\2$fs\3|p" \
+        -e "s|^\($s\)\($w\)$s:$s\(.*\)$s\$|\1$fs\2$fs\3|p"  $1 |
+   awk -F$fs '{
+      indent = length($1)/2;
+      vname[indent] = $2;
+      for (i in vname) {if (i > indent) {delete vname[i]}}
+      if (length($3) > 0) {
+         vn=""; for (i=0; i<indent; i++) {vn=(vn)(vname[i])("_")}
+         printf("%s%s%s=\"%s\"\n", "'$prefix'",vn, $2, $3);
+      }
+   }'
+}