2018-04-18 08:19:12 +02:00
41 changed files with 12482 additions and 2572 deletions
--- a/README.md
+++ b/README.md
@@ -1,12 +1,98 @@
-first terminal 
-cd web
-npm install
-npm start
+To obtain new Auth Code :

-second terminal
-cd backend
-npm install
-node express.js
+https://www.amazon.com/ap/oa?client_id=amzn1.application-oa2-client.c748ca56ded04a95b236979898585ff7&scope=alexa::ask:skills:readwrite alexa::ask:models:readwrite alexa::ask:skills:test&response_type=code&redirect_uri=https://layla.amazon.com/api/skill/link/M2ODJY6EXOY6KO

+Response URL (Decoded) :
+
+https://layla.amazon.com/api/skill/link/M2ODJY6EXOY6KO?code=ANCgZUfEFdlRRkpSNFuA&scope=alexa::ask:skills:readwrite alexa::ask:models:readwrite alexa::ask:skills:test
+
+Code : ANCgZUfEFdlRRkpSNFuA
+=======================================
+
+Now to get Access Token :
+
+Send a POST request to https://api.amazon.com/auth/o2/token with the following parameters
+
+ - HTTP Header Parameters
+
+		Content-Type: application/x-www-form-urlencoded
+
+ - HTTP Body Parameters
+
+		grant_type: authorization_code
+		code: The authorization code that was returned in the response.
+		client_id: The product’s client ID. To access this information, navigate to Amazon’s Developer Console. After you’ve logged in, click Get Started > under Alexa Voice Service, then click Edit next to a registered product (or create a new one). From the left navigation select Security Profile. This page contains both Client ID and Client Secret for your product.
+		client_secret: The product’s client secret. To access this information, navigate to Amazon’s Developer Console. After you’ve logged in, click Get Started > under Alexa Voice Service, then click Edit next to a registered product (or create a new one). From the left navigation select Security Profile. This page contains both Client ID and Client Secret for your product.
+		redirect_uri: One of the return URIs that you added to your app’s security profile when signing up.
+
+Response : 
+
+{
+    "access_token": "Atza|IwEBIBe6gDqrrowEEav6N-_6s4NztYeP3oG8PGWmu8ZiZw6lbOh3wNla3TK6pY-VEpT1d8an-dVf_n3kXJzVFsNo_4xBfZyFHGoCTDTFjs3yBRul4PVdBOhwwiH3-sgRLcUofZbe2oE06GmTcbfYtaStfXpQI5dfpldfnsJg_CvhSA6AHb_snJT3F6lyXzbV076d_3cYUMJxFldJGnYcviNHHxjjmuQTD06hhGzCbAxxe9eBmkuopRsNfyedLT2UlKP_ublah9CUGA3AdIX_3Iuke82jMwGnNl9gv7pbaDNEjAbj7IQSl3B08uuREtJq-oTBOjALNXRvFxTJmQjZwXNf9eHC7fSHJDdEPdZQU0AcffRQObAyAkUuL6Jv39OHzhb3Q64-zzoyODqnJyLP5SQZ2JVF53Kc_cTBqjIc9pXljqe7yEVk6JDs7q1zKbBibx_AQm57TO79IzWyLBzBMlYL5HdTsqEfRzLeDw2tws-hGMgkx2HWfdbYnmf5Qb4SyIhzvmmdfPLg3MVKTxjIBu1rx0xf3n0PLZP1EO6jsJPoMRPg77Gm4oit5Zp6s37ek3A3Vxh-ntoASpkrkxGTG9kVtRNt",
+    "refresh_token": "Atzr|IwEBICA3kDhfSJxlwvnQp9AD1o115AC_KBbFd5GBg8oN_QHWn2or5xFQ09BruuK6a07tGHtTt_9q2Y21mnOMH4RDtYXTVG9ADgLE6mHWKZFxYVwt3kHMiUJdY5lJcsOtWLoblrS-bJ0BEXXK5nVDt_bSI5IB7NUf-9QVZxhovRH_ANSxdTjJT0_rMIAZY3WEj68FEap49q_pg72BhnxHVZD2TC3zvX96_DN65HE5SoSgT7OiMAeiJewB_SyemW_HxBwaB-_X-G1ifOtnrzZ4gXTpOrEUlHI2YPuvRMBMtmz1h-nXDZYv3vwU3RA57Qj_ZNVcScj8_RXf2xq8w48v0PzZFXYBSalfnqPq6eUvSSbAJUp6bB8y596JlvR5dFQe_Z--X0Gkfo85IcyrI9D44vK9sJhrGhCVi2FDDa8pHczmNSen99JYZvDif-zpYzgbcymAkOV0gC7JvYMxlZfETT3NTBy7eVA7fJI1SZaeA_qW49xRcBkZBu5gkqTpeGWUU1cGr2aXRVVmXGM22NfV5E7KzvEBsCeHml_tCfxZeKY8Msd8hJb0Cd59u-_hsuc8oNjsOpIdFF976dY3uTmAgHWpG2PH",
+    "token_type": "bearer",
+    "expires_in": 3600
+}
+
+================================
+
+Now to get new Access token using refresh token : 
+
+Send a POST request to https://api.amazon.com/auth/o2/token with the following parameters:
+
+	- HTTP Header Parameters
+
+		Content-Type: application/x-www-form-urlencoded
+
+	- HTTP Body Parameters
+
+		grant_type: refresh_token
+		refresh_token: The URL-encoded refresh token returned with the last request for a new access token.
+		client_id: To access this information, navigate to Amazon’s Developer Console. After you’ve logged in, click Get Started > under Alexa Voice Service, then click Edit next to a registered product (or create a new one). From the left navigation select Security Profile. This page contains both Client ID and Client Secret for your product.
+		client_secret: The website’s client secret. To access this information, navigate to Amazon’s Developer Console. After you’ve logged in, click Get Started > under Alexa Voice Service, then click Edit next to a registered product (or create a new one). From the left navigation select Security Profile. This page contains both Client ID and Client Secret for your product.
+
+Response : 
+
+{
+    "access_token": "Atza|IwEBILtBe3hrHovrMx7Oivng-RB2EKzvCm_epXJE2HXPMQzXTFqK10Zrqt-Z8paeRoLQBqbLCmqWvcr5RTNgw9qjtfzOTsOrXC1VKqKmxpqHTrJyn2TLGsCzFjBDfADNjCyufWTf2ZlsSzjxW2GiqCHlwoPSd9pFrLavtRThrm1J-5KvnFrj-yD-tYTSwrgX5W5p2SrjQxoE3aP5b96z6p8GvCL9lM1pddafAxkHb22A3IzR-pYGmEijb4ksRuaIf4WCNwssWV6GBIB2oJA5CU-Dtd2mOZZ5-dYpSSeCHyGumTYecTxxMVSdiVjCqB8WT6AtvvutWFQQoldHjJmIwBsTZP-iQcl-UyajOZJ03GqRUym5Hp-49uByzVG-MfR_Z5qVmYjjsLQEOLCY9kPVnmRGnOTj6YPjrHXibd6P8TQOMh4VTcgFpg-afKKABP6EeDwok1t2ivuYh5OJju-B1A6gzhMi4vQJYKq107e0QMYBBhrf_OqCgMbfnQZ8j40qocVGID5YWv8uk5wKyI61LrbzrTltmzxzNemzqbSBzwAlfNS6GW-jVjg8svsi1lb_EVRbhyOoWJWX3mEd-5GDYyUcyInleiAR0aIHVP94pZxqdiCamA",
+    "refresh_token": "Atzr|IwEBICA3kDhfSJxlwvnQp9AD1o115AC_KBbFd5GBg8oN_QHWn2or5xFQ09BruuK6a07tGHtTt_9q2Y21mnOMH4RDtYXTVG9ADgLE6mHWKZFxYVwt3kHMiUJdY5lJcsOtWLoblrS-bJ0BEXXK5nVDt_bSI5IB7NUf-9QVZxhovRH_ANSxdTjJT0_rMIAZY3WEj68FEap49q_pg72BhnxHVZD2TC3zvX96_DN65HE5SoSgT7OiMAeiJewB_SyemW_HxBwaB-_X-G1ifOtnrzZ4gXTpOrEUlHI2YPuvRMBMtmz1h-nXDZYv3vwU3RA57Qj_ZNVcScj8_RXf2xq8w48v0PzZFXYBSalfnqPq6eUvSSbAJUp6bB8y596JlvR5dFQe_Z--X0Gkfo85IcyrI9D44vK9sJhrGhCVi2FDDa8pHczmNSen99JYZvDif-zpYzgbcymAkOV0gC7JvYMxlZfETT3NTBy7eVA7fJI1SZaeA_qW49xRcBkZBu5gkqTpeGWUU1cGr2aXRVVmXGM22NfV5E7KzvEBsCeHml_tCfxZeKY8Msd8hJb0Cd59u-_hsuc8oNjsOpIdFF976dY3uTmAgHWpG2PH",
+    "token_type": "bearer",
+    "expires_in": 3600
+}
+
+=======================
+=======================
+
+Prerequests for step 3 (run on server):
 requires running mongodb service

+	Database (tellall) with collection (skill_list)
+		* Insert dummy skill with : db.skill_list.insert({"skillID" : "amzn1.ask.skill.efbf0564-a732-4ba9-958f-57939138adae", "intents" : [ 	{ 	"intentName" : "GetFirstQuestion", "questionExplanation" : "",	"questions" : [ 	"tell me something about projects", 	"tell me all about projects" ], 	"answer" : "blablabla bla bla" }, 	{ 	"intentName" : "GetThirdQuestion", "questionExplanation" : "",	"questions" : [ 	"Give me third question" ], 	"answer" : "This is answer to the third question" } ], "invocationName" : "Saburly", "invocationAnswer" : "We are Saburly team one" })
+		
+        *obtain _id and change in web/src/App.js, and also skill_db_id in backend/config.js
+		*enter web/ dir and run "npm run build"
+
+	Database (tellall) with collection (token_list)
+		* Insert tokens with : db.token_list.insert({"id" : 1, "refresh_token" : "...", "access_token" : "...", "expires_in" : 1515173601.754 })
+			(Change refresh_token and access_token dots with real ones)
+
+	Set skill_id, client_id and client_secret to appropriate values in backend/config.js
+	Set base_url to "tellall.saburly.com" in web/src/config.
+
+	Start backend service from backend/ running "node express.js"
+
+
+======
+for local testing :
+
+first terminal :
+    *cd web
+    *npm start
+
+second terminal :
+    * cd backend
+    *npm install
+    *node express.js
+
+
+
--- a/backend/config.js
+++ b/backend/config.js
@@ -1,2 +0,0 @@
-export const dbURL = 'mongodb://localhost:27017/tellall';
-export const PORT = 5000;
--- a/backend/config/config.js
+++ b/backend/config/config.js
@@ -0,0 +1,17 @@
+var config = {};
+
+config.DB_URL = 'mongodb://localhost:27017/tellall';
+config.PORT = 5000;
+
+config.TOKEN = 'Atza|IwEBIBe6gDqrrowEEav6N-_6s4NztYeP3oG8PGWmu8ZiZw6lbOh3wNla3TK6pY-VEpT1d8an-dVf_n3kXJzVFsNo_4xBfZyFHGoCTDTFjs3yBRul4PVdBOhwwiH3-sgRLcUofZbe2oE06GmTcbfYtaStfXpQI5dfpldfnsJg_CvhSA6AHb_snJT3F6lyXzbV076d_3cYUMJxFldJGnYcviNHHxjjmuQTD06hhGzCbAxxe9eBmkuopRsNfyedLT2UlKP_ublah9CUGA3AdIX_3Iuke82jMwGnNl9gv7pbaDNEjAbj7IQSl3B08uuREtJq-oTBOjALNXRvFxTJmQjZwXNf9eHC7fSHJDdEPdZQU0AcffRQObAyAkUuL6Jv39OHzhb3Q64-zzoyODqnJyLP5SQZ2JVF53Kc_cTBqjIc9pXljqe7yEVk6JDs7q1zKbBibx_AQm57TO79IzWyLBzBMlYL5HdTsqEfRzLeDw2tws-hGMgkx2HWfdbYnmf5Qb4SyIhzvmmdfPLg3MVKTxjIBu1rx0xf3n0PLZP1EO6jsJPoMRPg77Gm4oit5Zp6s37ek3A3Vxh-ntoASpkrkxGTG9kVtRNt';
+config.REFRESH_TOKEN = 'Atzr|IwEBICA3kDhfSJxlwvnQp9AD1o115AC_KBbFd5GBg8oN_QHWn2or5xFQ09BruuK6a07tGHtTt_9q2Y21mnOMH4RDtYXTVG9ADgLE6mHWKZFxYVwt3kHMiUJdY5lJcsOtWLoblrS-bJ0BEXXK5nVDt_bSI5IB7NUf-9QVZxhovRH_ANSxdTjJT0_rMIAZY3WEj68FEap49q_pg72BhnxHVZD2TC3zvX96_DN65HE5SoSgT7OiMAeiJewB_SyemW_HxBwaB-_X-G1ifOtnrzZ4gXTpOrEUlHI2YPuvRMBMtmz1h-nXDZYv3vwU3RA57Qj_ZNVcScj8_RXf2xq8w48v0PzZFXYBSalfnqPq6eUvSSbAJUp6bB8y596JlvR5dFQe_Z--X0Gkfo85IcyrI9D44vK9sJhrGhCVi2FDDa8pHczmNSen99JYZvDif-zpYzgbcymAkOV0gC7JvYMxlZfETT3NTBy7eVA7fJI1SZaeA_qW49xRcBkZBu5gkqTpeGWUU1cGr2aXRVVmXGM22NfV5E7KzvEBsCeHml_tCfxZeKY8Msd8hJb0Cd59u-_hsuc8oNjsOpIdFF976dY3uTmAgHWpG2PH';
+config.TOKEN_EXPIRES_IN = 1515100500;
+
+config.SKILL_ID = 'amzn1.ask.skill.efbf0564-a732-4ba9-958f-57939138adae';
+//config.SKILL_DB_ID = '5a5016e775becaef2015da10'; //for server
+config.SKILL_DB_ID = '5a232fb86ce046c749739455'; //for local
+
+config.CLIENT_ID = 'amzn1.application-oa2-client.c748ca56ded04a95b236979898585ff7';
+config.CLIENT_SECRET = '6dea8125cecd049d3c4cff7bb5bdfd3ff17bc6fed246c4c8f6b519d9ed08d0b3';
+
+module.exports = config;
--- a/backend/config/constants.js
+++ b/backend/config/constants.js
@@ -0,0 +1,42 @@
+const constants = {};
+
+constants.amazonResultCodes = {
+    OK:200,
+    ACCEPTED:202,
+    BAD_REQUEST:400,
+    UNAUTHORIZED:401,
+    NOT_FOUND:404,
+    CONFLICT:409,
+    PAYLOAD_TOO_LARGE:413
+}
+
+constants.apiResultCodes = {
+    GENERIC_ERROR : -1,
+    OK:0,
+    AMAZON_ERROR:1, //amazon api works, but error is some of the amazonResultCodes
+    AMAZON_FAIL:2, //amazon api doesn't work
+    DATABASE_ERROR:3,
+    NO_SKILL:4,
+    INCONSISTENT_STATE:5,
+}
+
+constants.HTTPResultCodes = {
+    INTERNAL_SERVER_ERROR : 500,
+}
+
+constants.SKILL_ID_LENGTH = 24;
+
+constants.voiceResponseStrings = {
+    QUESTION_NOT_FOUND : 'Sorry, I didnt understand',
+    GENERIC_CONTINUE : 'Would you like to continue'
+}
+
+//Timing is given in [ms]
+constants.voiceResponseTimings = {
+    PAUSE_BETWEEN_QUESTIONS : 650,
+    PAUSE_AFTER_WELCOME_MESSAGE : 650,
+}
+
+
+
+module.exports = constants;
--- a/backend/config/email.js
+++ b/backend/config/email.js
@@ -0,0 +1,14 @@
+var config = {};
+
+config.PORT = 587;
+config.SMTP_HOST = 'smtp.mail.com';
+config.SECURE = false;
+config.AUTH = {
+  user: 'saburly@mail.com',
+  pass: 'KeepSaburly',
+};
+
+config.FROM_EMAIL = 'saburly@mail.com';
+config.SUBJECT = 'Message from Saburly service';
+
+module.exports = config;
--- a/backend/controllers/index.js
+++ b/backend/controllers/index.js
@@ -0,0 +1,6 @@
+var express = require ('express'), router = express.Router ();
+
+router.use ('/skill', require ('./skill'));
+router.use ('/saburly', require('./saburlyEntryPoint'));
+
+module.exports = router;
--- a/backend/controllers/saburlyEntryPoint.js
+++ b/backend/controllers/saburlyEntryPoint.js
@@ -0,0 +1,9 @@
+var express = require ('express'), router = express.Router ();
+var bodyParser = require ('body-parser');
+var alexa = require ('../models/alexa');
+
+router.post ('/', bodyParser.json (), async (req, res) => {
+  alexa.run (req, res);
+});
+
+module.exports = router;
--- a/backend/controllers/skill.js
+++ b/backend/controllers/skill.js
@@ -0,0 +1,130 @@
+var express = require ('express'), router = express.Router ();
+const constants = require ('../config/constants');
+var databaseHelper = require ('../helpers/database');
+var amazonHelper = require ('../helpers/amazon');
+var bodyParser = require ('body-parser');
+var alexa = require ('../models/alexa');
+
+router.get ('/:id', async (req, res, next) => {
+  const id = req.params.id;
+
+  if (id.length !== constants.SKILL_ID_LENGTH) {
+    res.json ([]);
+  } else {
+    databaseHelper
+      .getSkill (id)
+      .then (result => {
+        res.json (result);
+      })
+      .catch (err => {
+        res.json ([]);
+      });
+  }
+});
+
+router.put ('/:id', bodyParser.json (), async (req, res, next) => {
+  let id = req.params.id;
+  let dataFromWeb = JSON.stringify (req.body);
+  let skill = JSON.parse (dataFromWeb);
+  let updateOnAmazon = skill.updateOnAmazon;
+
+  delete skill.updateOnAmazon;
+  delete skill._id;
+
+  //First get current skill from DB
+  databaseHelper
+    .getSkill (id)
+    .then (currentSkillState => {
+      //Now let's update skill in DB
+      databaseHelper
+        .updateSkill (id, skill)
+        .then (() => {
+          //Ok, done, now update skill on Amazon (if needed)
+          if (updateOnAmazon) {
+            //We need to update skill on Amazon
+            amazonHelper
+              .updateSkill (skill)
+              .then (amazonResult => {
+                if (
+                  amazonResult === constants.amazonResultCodes.OK ||
+                  amazonResult === constants.amazonResultCodes.ACCEPTED
+                ) {
+                  res.json ({result: constants.apiResultCodes.OK, message: ''});
+                  alexa.updateModel ();
+                } else {
+                  //Update on amazon failed, revert changes in database and send error to user
+                  databaseHelper
+                    .updateSkill (id, currentSkillState)
+                    .then (() => {
+                      res
+                        .status (
+                          constants.HTTPResultCodes.INTERNAL_SERVER_ERROR
+                        )
+                        .json ({
+                          result: constants.apiResultCodes.AMAZON_ERROR,
+                          message: amazonResult,
+                        });
+                    })
+                    .catch (() => {
+                      //This should never happen, something is seriously wrong, like no database connection
+                      res
+                        .status (
+                          constants.HTTPResultCodes.INTERNAL_SERVER_ERROR
+                        )
+                        .json ({
+                          result: constants.apiResultCodes.INCONSISTENT_STATE,
+                          message: '',
+                        });
+                    });
+                }
+              })
+              .catch (e => {
+                //Update on amazon failed, revert changes in database and send error to user
+                databaseHelper
+                  .updateSkill (id, currentSkillState)
+                  .then (() => {
+                    res
+                      .status (constants.HTTPResultCodes.INTERNAL_SERVER_ERROR)
+                      .json ({
+                        result: constants.apiResultCodes.AMAZON_FAIL,
+                        message: e,
+                      });
+                  })
+                  .catch (() => {
+                    //This should never happen, something is seriously wrong, like no database connection
+                    res
+                      .status (constants.HTTPResultCodes.INTERNAL_SERVER_ERROR)
+                      .json ({
+                        result: constants.apiResultCodes.INCONSISTENT_STATE,
+                        message: '',
+                      });
+                  });
+              });
+          } else {
+            //No need to update on Amazon, tell to user it's ok
+            res.json ({result: constants.apiResultCodes.OK, message: ''});
+            alexa.updateModel ();
+          }
+        })
+        .catch (() => {
+          //Update in database didn't go well, no need to revert since it failed to write in the first place
+          //just send error to user
+          res
+          .status (
+            constants.HTTPResultCodes.INTERNAL_SERVER_ERROR
+          )
+          .json ({
+            result: constants.apiResultCodes.DATABASE_ERROR,
+            message: '',
+          });
+        });
+    })
+    .catch (e => {
+      //I don't know why, but something went wrong, possibly ID of skill is wrong, doesn't exist in DB
+      res
+        .status (constants.HTTPResultCodes.INTERNAL_SERVER_ERROR)
+        .json ({result: constants.apiResultCodes.NO_SKILL, message: ''});
+    });
+});
+
+module.exports = router;
--- a/backend/express.js
+++ b/backend/express.js
@@ -1,120 +0,0 @@
-var express = require('express');
-var alexa = require('alexa-app');
-
-var bodyParser = require('body-parser');
-
-const dbURL = 'mongodb://localhost:27017/tellall';
-const PORT = 5000;
-
-
-var MongoClient = require ('mongodb').MongoClient;
-var ObjectID = require ('mongodb').ObjectID;
-
-const router = express.Router ();
-
-router.get ('/intents', async (req, res, next) => {
-  try {
-    const id = req.params.id;
-
-    db.collection ('intent_list').find({}).toArray((err,result)=>{
-      if (err) throw err;
-      res.json(result);
-    });
-    
-  } catch (e) {
-    console.log ('error:', e);
-    next (e);
-  }
-});
-
-router.get ('/deleteIntent/:id', async (req, res, next) => {
-  try {
-    let id = req.params.id;
-    let result = db.collection('intent_list').remove({_id: ObjectID(id)},(err,result)=>{
-      if (err) throw err;
-      res.json(result);
-    });
-  } catch (e) {
-    console.log ('error:', e);
-    next (e);
-  }
-});
-
-router.post ('/updateIntent/:id', async (req, res, next) => {
-  try {
-    let id = req.params.id;
-    let intent = req.body;
-    delete intent._id;
-    let result = db.collection('intent_list').update({_id: ObjectID(id)}, intent,{upsert:true}, (err, result)=>{
-      if (err) throw(err);
-      res.json(result);
-    });
-  } catch (e) {
-    console.log ('error:', e);
-    next (e);
-  }
-});
-
-
-
-
-var app = express();
-
-// ALWAYS setup the alexa app and attach it to express before anything else.
-var alexaApp = new alexa.app('step3');
-
-alexaApp.express({
-  expressApp: app,
-
-  // verifies requests come from amazon alexa. Must be enabled for production.
-  // You can disable this if you're running a dev environment and want to POST
-  // things to test behavior. enabled by default.
-  checkCert: false,
-
-  // sets up a GET route when set to true. This is handy for testing in
-  // development, but not recommended for production. disabled by default
-  debug: true
-});
-
-// now POST calls to /test in express will be handled by the app.request() function
-
-// from here on you can setup any other express routes or middlewares as normal
-alexaApp.launch(function(request, response) {
-  response.say("You launched Saburly app!");
-});
-
-alexaApp.request = (jsonRequest) => {
-  const alexaRequest = new alexa.request(jsonRequest);
-  if (alexaRequest.type() === "IntentRequest") {
-    const intent = db.collection('intent_list').findOne({
-      name: alexaRequest.data.request.intent.name
-    });
-    if (intent) {
-      const response = new alexa.response(alexaRequest.getSession());
-      return response.say(intent.answer);
-    }
-  }
-};
-
-app.use (function (req, res, next) {
-  res.header ('Access-Control-Allow-Origin', '*');
-  res.header (
-    'Access-Control-Allow-Headers',
-    'Origin, Content-Type'
-  );
-  res.header ('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
-  res.header ('Access-Control-Allow-Credentials', 'true');
-  next ();
-});
-
-app.use (bodyParser.json ());
-app.use ('/', router);
-
-
-MongoClient.connect (dbURL).then (database => {
-  db = database;
-  db.collection ('intent_list');
-  app.listen (PORT, () =>
-    console.log ('Express server running on port ' + PORT)
-  );
-});
--- a/backend/helpers/amazon.js
+++ b/backend/helpers/amazon.js
@@ -0,0 +1,282 @@
+require ('isomorphic-fetch');
+const config = require ('../config/config');
+var request = require ('request');
+var databaseHelper = require ('./database');
+
+var getBuildStatus = function (skillID) {
+  fetch (
+    `https://api.amazonalexa.com/v0/skills/${skillID}/interactionModel/locales/en-US/status`,
+    {
+      method: 'GET',
+      headers: {
+        Authorization: config.TOKEN,
+      },
+    }
+  ).then (result => {
+    return result.text ();
+  });
+};
+
+var refreshTokens = function () {
+  return new Promise ((resolve, reject) => {
+    var options = {
+      method: 'POST',
+      url: 'https://api.amazon.com/auth/o2/token',
+      headers: {
+        'cache-control': 'no-cache',
+        'content-type': 'application/x-www-form-urlencoded',
+      },
+      form: {
+        grant_type: 'refresh_token',
+        refresh_token: config.REFRESH_TOKEN,
+        client_id: config.CLIENT_ID,
+        client_secret: config.CLIENT_SECRET,
+      },
+    };
+
+    request (options, function (error, response, body) {
+      if (error) {
+        reject (error);
+      } else {
+        parsedResponse = JSON.parse (body);
+        if (parsedResponse.refresh_token) {
+          databaseHelper
+            .updateTokens (
+              parsedResponse.refresh_token,
+              parsedResponse.access_token,
+              parsedResponse.expires_in
+            )
+            .then (() => {
+              resolve ();
+            })
+            .catch (e => {
+              reject (e);
+            });
+        } else {
+          reject (body);
+        }
+      }
+    });
+  });
+};
+
+var generateInteractionModel = function (skill) {
+  let result = {};
+  let allIntents = [];
+
+  skill.intents.map (intent => {
+    allIntents.push ({name: intent.intentName, samples: intent.questions});
+  });
+
+  //Special intent for sending message (Dialog)
+
+  allIntents.push ({
+    name: 'SendMessageIntent',
+    samples: [
+      'I would like to send a message',
+      'I want to send a message',
+      'Send message',
+    ],
+    slots: [
+      {
+        name: 'Name',
+        type: 'AMAZON.US_FIRST_NAME',
+        samples: ['My name is {Name}', 'I am {Name}', '{Name}'],
+      },
+      {
+        name: 'Email',
+        type: 'EmailSlot',
+        samples: ['My email is {Email}', '{Email}'],
+      },
+      {
+        name: 'Message',
+        type: 'MessageSlot',
+        samples: ['{Message}'],
+      },
+    ],
+  });
+
+  let customSlotTypes = [
+    {
+      name: 'EmailSlot',
+      values: [
+        {
+          id: null,
+          name: {
+            value: 'bla@bla.bla',
+            synonyms: [],
+          },
+        },
+        {
+          id: null,
+          name: {
+            value: 'bla.bla@bla.bla.bla',
+            synonyms: [],
+          },
+        },
+        {
+          id: null,
+          name: {
+            value: 'bla_bla@bla.bla',
+            synonyms: [],
+          },
+        },
+      ],
+    },
+    {
+      name: 'MessageSlot',
+      values: [
+        {
+          id: null,
+          name: {
+            value: 'Quick brown fox jumps over lazy dog',
+            synonyms: [],
+          },
+        },
+        {
+          id: null,
+          name: {
+            value: 'Quick brown fox jumps over lazy dog. Quick brown fox jumps over lazy dog.',
+            synonyms: [],
+          },
+        },
+        {
+          id: null,
+          name: {
+            value: 'Quick brown fox jumps over lazy dog. Quick brown fox jumps over lazy dog. Quick brown fox jumps over lazy dog.',
+            synonyms: [],
+          },
+        },
+      ],
+    },
+  ];
+
+  let dialogPrompts = [
+    {
+      id: 'Elicit.Intent-SendMessageIntent.IntentSlot-Name',
+      variations: [
+        {
+          type: 'PlainText',
+          value: 'What is your name ?',
+        },
+        {
+          type: 'PlainText',
+          value: 'Tell me your name',
+        },
+      ],
+    },
+    {
+      id: 'Elicit.Intent-SendMessageIntent.IntentSlot-Email',
+      variations: [
+        {
+          type: 'PlainText',
+          value: 'What is your email ?',
+        },
+        {
+          type: 'PlainText',
+          value: 'Tell me your email',
+        },
+      ],
+    },
+    {
+      id: 'Elicit.Intent-SendMessageIntent.IntentSlot-Message',
+      variations: [
+        {
+          type: 'PlainText',
+          value: 'What is your message',
+        },
+      ],
+    },
+  ];
+
+  let dialogIntents = [
+    {
+      name: 'SendMessageIntent',
+      confirmationRequired: false,
+      prompts: {},
+      slots: [
+        {
+          name: 'Name',
+          type: 'AMAZON.US_FIRST_NAME',
+          elicitationRequired: true,
+          confirmationRequired: false,
+          prompts: {
+            elicitation: 'Elicit.Intent-SendMessageIntent.IntentSlot-Name',
+          },
+        },
+        {
+          name: 'Email',
+          type: 'EmailSlot',
+          elicitationRequired: true,
+          confirmationRequired: false,
+          prompts: {
+            elicitation: 'Elicit.Intent-SendMessageIntent.IntentSlot-Email',
+          },
+        },
+        {
+          name: 'Message',
+          type: 'MessageSlot',
+          elicitationRequired: true,
+          confirmationRequired: false,
+          prompts: {
+            elicitation: 'Elicit.Intent-SendMessageIntent.IntentSlot-Message',
+          },
+        },
+      ],
+    },
+  ];
+
+  result.interactionModel = {};
+
+  result.interactionModel.languageModel = {
+    invocationName: skill.invocationName,
+    types: customSlotTypes,
+    intents: allIntents,
+  };
+
+  result.interactionModel.prompts = dialogPrompts;
+  result.interactionModel.dialog = {};
+  result.interactionModel.dialog.intents = dialogIntents;
+
+  return JSON.stringify (result);
+};
+
+var uploadSkill = function (skill) {
+  let generatedInteractionModel = generateInteractionModel (skill);
+  return fetch (
+    `https://api.amazonalexa.com/v0/skills/${skill.skillID}/interactionModel/locales/en-US`,
+    {
+      method: 'POST',
+      headers: {
+        Authorization: config.TOKEN,
+      },
+      body: generatedInteractionModel,
+    }
+  );
+};
+
+module.exports = {
+  updateSkill: function (skill) {
+    return new Promise ((resolve, reject) => {
+      if (new Date () / 1000 > config.TOKEN_EXPIRES_IN) {
+        refreshTokens ()
+          .then (() => {
+            uploadSkill (skill).then (response => {
+              resolve (response.status);
+            });
+          })
+          .catch (e => {
+            reject (e);
+          });
+      } else {
+        uploadSkill (skill)
+          .then (response => {
+            resolve (response.status);
+          })
+          .catch (e => {
+            reject (e);
+          });
+      }
+    });
+  },
+};
--- a/backend/helpers/database.js
+++ b/backend/helpers/database.js
@@ -0,0 +1,99 @@
+const config = require ('../config/config');
+var ObjectID = require ('mongodb').ObjectID;
+
+var db = null;
+
+module.exports = {
+  initModule: function (databaseObject) {
+    db = databaseObject;
+    db.collection ('intent_list');
+  },
+
+  loadTokens: function () {
+    db
+      .collection ('token_list')
+      .findOne ()
+      .then (tokens => {
+        if (tokens !== null) {
+          config.TOKEN = tokens.access_token;
+          config.REFRESH_TOKEN = tokens.refresh_token;
+          config.TOKEN_EXPIRES_IN = tokens.expires_in;
+        } else {
+          //Cannot continue without tokens
+          console.log ('Cannot continue without tokens in database');
+          process.exit (-1);
+        }
+      })
+      .catch (e => {
+        console.log (
+          'Error loading tokens ! Cannot continue without tokens in database'
+        );
+        process.exit (-1);
+      });
+  },
+
+  updateTokens: function (refresh_token, access_token, expires_in) {
+    return new Promise ((resolve, reject) => {
+      let newTokenDocument = {
+        id: 1,
+        refresh_token: refresh_token,
+        access_token: access_token,
+        expires_in: new Date () / 1000 + expires_in,
+      };
+      db
+        .collection ('token_list')
+        .update ({id: 1}, newTokenDocument, {upsert: true}, (err, result) => {
+          if (err) { 
+            reject (err)
+          }else{
+            config.REFRESH_TOKEN = refresh_token;
+            config.TOKEN = access_token;
+            config.TOKEN_EXPIRES_IN = newTokenDocument.expires_in;
+            resolve ();
+          }
+        });
+    });
+  },
+
+  getSkill: function (skillDbID) {
+    return new Promise ((resolve, reject) => {
+      db
+        .collection ('skill_list')
+        .findOne ({_id: ObjectID (skillDbID)}, (err, skill) => {
+          if (skill) {
+            resolve (skill);
+          } else {
+            reject (err);
+          }
+        });
+    });
+  },
+
+  updateSkill: function (id, skill) {
+    return new Promise ((resolve, reject) => {
+      db
+        .collection ('skill_list')
+        .update ({_id: ObjectID (id)}, skill, {upsert: true}, (err, result) => {
+          if (err){
+            reject();
+          }else{
+            resolve();
+          }
+        });
+    });
+  },
+
+  deleteSkill: function (id) {
+    return new Promise ((resolve, reject) => {
+      db
+        .collection ('skill_list')
+        .remove ({_id: ObjectID (id)}, (err, result) => {
+          if (err){
+            reject (err);
+          }else{
+            resolve (result);
+          }
+        });
+    });
+  }
+};
--- a/backend/helpers/email.js
+++ b/backend/helpers/email.js
@@ -0,0 +1,75 @@
+const nodemailer = require ('nodemailer');
+const emailConfig = require('../config/email');
+
+module.exports = {
+  transformEmailFromAlexaResponse: function (email) {
+    //email from alexa response will contain words instead of symbols, like :
+    //at = @
+    //underscore = _
+    //dash = -
+    //dot = .
+    //TODO: This list should be longer
+    let transformedEmail = email
+      .replace (/\s/g, '') //remove all spaces
+      .replace (/at/gi, '@')
+      .replace (/underscore/gi, '_')
+      .replace (/dash/gi, '-')
+      .replace (/dot/gi, '.');
+
+    return transformedEmail;
+  },
+
+  isEmailValid: function (email) {
+    console.log ('Email to validate : ' + email);
+    let validEmailRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+
+    return validEmailRegex.test (email);
+  },
+
+  sendEmail: function (name, fromEmail, message, toEmail) {
+    return new Promise ((resolve, reject) => {
+      fromEmail = this.transformEmailFromAlexaResponse(fromEmail);
+      let messageBody =
+        'Hello. User left you a message on Saburly service using Alexa skill. \r\nMessage : ' +
+        message +
+        '\r\nName : ' +
+        name +
+        '\r\nEmail : ' +
+        fromEmail +
+        '\r\nYour Saburly team';
+
+      let messageBodyHTML =
+        '<p>Hello. User left you a message on Saburly service using Alexa skill.</p><br/><b>Message : </b><br/><p>' +
+        message +
+        '</p><br/><b>Name : </b>' +
+        name +
+        '<br/><b>Email : </b>' +
+        fromEmail +
+        '<br/><br/><b>Your Saburly team</b>';
+
+      let transporter = nodemailer.createTransport ({
+        host: emailConfig.SMTP_HOST,
+        port: emailConfig.PORT,
+        secure: emailConfig.SECURE,
+        auth: emailConfig.AUTH,
+      });
+
+      var mailOptions = {
+        from: emailConfig.FROM_EMAIL,
+        replyTo: fromEmail,
+        to: toEmail,
+        subject: emailConfig.SUBJECT,
+        text: messageBody,
+        html: messageBodyHTML,
+      };
+
+      transporter.sendMail (mailOptions, (error, info) => {
+        if (error) {
+          reject (error);
+        } else {
+          resolve (info);
+        }
+      });
+    });
+  },
+};
--- a/backend/middleware/index.js
+++ b/backend/middleware/index.js
@@ -0,0 +1,7 @@
+module.exports = function (req, res, next) {
+  res.header ('Access-Control-Allow-Origin', '*');
+  res.header ('Access-Control-Allow-Headers', 'Origin, Content-Type');
+  res.header ('Access-Control-Allow-Methods', 'GET, POST, PUT');
+  res.header ('Access-Control-Allow-Credentials', 'true');
+  next ();
+};
--- a/backend/models/alexa.js
+++ b/backend/models/alexa.js
@@ -0,0 +1,181 @@
+var Alexa = require ('alexa-sdk');
+const config = require ('../config/config');
+var databaseHelper = require ('../helpers/database');
+var emailHelper = require ('../helpers/email');
+const constants = require ('../config/constants');
+
+var handlers = {};
+var destinationEmail;
+
+module.exports = {
+  run: function (req, res) {
+    // Build the context manually, because Amazon Lambda is missing
+    var context = {
+      succeed: function (result) {
+        res.json (result);
+      },
+      fail: function (error) {
+        console.log (error);
+        //We could send error json from here
+      },
+    };
+
+    var alexa = Alexa.handler (req.body, context);
+    alexa.appId = config.SKILL_ID;
+    alexa.registerHandlers (handlers);
+    alexa.execute ();
+  },
+  updateModel: function () {
+    //Get info from database, and store it for faster response on intent
+    databaseHelper
+      .getSkill (config.SKILL_DB_ID)
+      .then (activeSkill => {
+        handlers = {};
+        destinationEmail = activeSkill.contactEmail;
+
+        let listOfPossibleQuestions = '';
+        activeSkill.intents.forEach(intent => {
+          if (intent.questions.length > 0 && intent.intentExplanation) {
+            listOfPossibleQuestions +=
+              intent.intentExplanation +
+              intent.questions[0] +
+              '<break time="' +
+              constants.voiceResponseTimings.PAUSE_BETWEEN_QUESTIONS +
+              'ms"/>';
+          }
+        });
+
+        console.log(listOfPossibleQuestions);
+
+        //Handler for launch requestconsole.log()
+        handlers = {
+          LaunchRequest: function () {
+            this.response
+              .speak (
+                activeSkill.invocationAnswer +
+                  '<break time="' +
+                  constants.voiceResponseTimings.PAUSE_AFTER_WELCOME_MESSAGE +
+                  'ms"/>' +
+                  listOfPossibleQuestions
+              )
+              .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!
+            this.emit (':responseReady');
+          },
+        };
+
+        //Handlers for user defined questions
+        activeSkill.intents.map (intent => {
+          handlers[intent.intentName] = function () {
+            this.response
+              .speak (intent.answer)
+              .listen (constants.voiceResponseStrings.GENERIC_CONTINUE); //Phrase from listen doesn't work !!!
+            this.emit (':responseReady');
+          };
+        });
+
+        //Handler for sending message
+        handlers.SendMessageIntent = function () {
+          let intent = this.event.request.intent;
+
+          console.log ('Dialog state : ' + this.event.request.dialogState);
+          console.log (intent);
+          //STARTED, IN_PROGRESS
+
+          if (!intent.slots.Name.value) {
+            //Name not defined yet, ask user for name
+            const slotToElicit = 'Name';
+            const speechOutput = 'What is your name';
+            const repromptSpeech = speechOutput;
+            this.emit (
+              ':elicitSlot',
+              slotToElicit,
+              speechOutput,
+              repromptSpeech
+            );
+          } else if (!intent.slots.Email.value) {
+            //Name not defined yet, ask user for email
+            const slotToElicit = 'Email';
+            const speechOutput =
+              'Ok ' + intent.slots.Name.value + '. What is your email';
+            const repromptSpeech = speechOutput;
+            this.emit (
+              ':elicitSlot',
+              slotToElicit,
+              speechOutput,
+              repromptSpeech
+            );
+          } else if (!intent.slots.Message.value) {
+            intent.slots.Email.value = emailHelper.transformEmailFromAlexaResponse (
+              intent.slots.Email.value
+            );
+            if (!emailHelper.isEmailValid (intent.slots.Email.value)) {
+              //Email is not valid, ask again
+              const slotToElicit = 'Email';
+              const speechOutput =
+                'Sorry, that was not valid email. What is your email';
+              const repromptSpeech = speechOutput;
+              this.emit (
+                ':elicitSlot',
+                slotToElicit,
+                speechOutput,
+                repromptSpeech
+              );
+            } else {
+              //Email is valid
+              const slotToElicit = 'Message';
+              const speechOutput = 'Great. What is your message';
+              const repromptSpeech = speechOutput;
+              this.emit (
+                ':elicitSlot',
+                slotToElicit,
+                speechOutput,
+                repromptSpeech
+              );
+            }
+          } else {
+            //all slots are filled
+            console.log ('Name : ' + intent.slots.Name.value);
+            console.log ('Email : ' + intent.slots.Email.value);
+            console.log ('Message : ' + intent.slots.Message.value);
+            emailHelper
+              .sendEmail (
+                intent.slots.Name.value,
+                intent.slots.Email.value,
+                intent.slots.Message.value,
+                destinationEmail
+              )
+              .then (info => {
+                console.log (info);
+                this.response.speak (
+                  'Ok. Message sent. Someone will contact you ASAP'
+                );
+                this.emit (':responseReady');
+              })
+              .catch (error => {
+                console.log (error);
+                this.response.speak (
+                  'Sorry, there was a problem with sending message.'
+                );
+                this.emit (':responseReady');
+              });
+          }
+        };
+
+        //Default handlers for unknown questions and session close
+
+        handlers.Unhandled = function () {
+          this.response
+            .speak (constants.voiceResponseStrings.QUESTION_NOT_FOUND)
+            .listen (constants.voiceResponseStrings.GENERIC_CONTINUE);
+        };
+
+        handlers.SessionEndedRequest = function () {
+          //We don't care for now
+        };
+      })
+      .catch (e => {
+        //Something is wrong, skill is not ready, use catch-all intent to inform user
+        console.log ('Error. Skill doesnt exist');
+      });
+  },
+};
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -211,6 +211,16 @@
        "concat-map": "0.0.1"
      }
    },
+    "bson": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/bson/-/bson-1.0.4.tgz",
+      "integrity": "sha1-k8ENOeqltYQVy8QFLz5T5WKwtyw="
+    },
+    "buffer-shims": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz",
+      "integrity": "sha1-mXjOMXOIxkmth5MCjDR37wRKi1E="
+    },
    "builtin-modules": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
@@ -428,6 +438,19 @@
      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.1.tgz",
      "integrity": "sha1-eePVhlU0aQn+bw9Fpd5oEDspTSA="
    },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "0.4.19"
+      }
+    },
+    "es6-promise": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz",
+      "integrity": "sha1-7FYjOGgDKQkgcXDDlEjiREndH8Q="
+    },
    "escape-html": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
@@ -711,11 +734,30 @@
      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.5.2.tgz",
      "integrity": "sha1-1LUFvemUaYfM8PxY2QEP+WB+P6A="
    },
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+    },
    "is-typedarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo="
    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
+    },
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
+      "requires": {
+        "node-fetch": "1.7.3",
+        "whatwg-fetch": "2.0.3"
+      }
+    },
    "isstream": {
      "version": "0.1.2",
      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -819,6 +861,25 @@
        "brace-expansion": "1.1.8"
      }
    },
+    "mongodb": {
+      "version": "2.2.33",
+      "resolved": "https://registry.npmjs.org/mongodb/-/mongodb-2.2.33.tgz",
+      "integrity": "sha1-tTfEcdNKZlG0jzb9vyl1A0Dgi1A=",
+      "requires": {
+        "es6-promise": "3.2.1",
+        "mongodb-core": "2.1.17",
+        "readable-stream": "2.2.7"
+      }
+    },
+    "mongodb-core": {
+      "version": "2.1.17",
+      "resolved": "https://registry.npmjs.org/mongodb-core/-/mongodb-core-2.1.17.tgz",
+      "integrity": "sha1-pBizN6FKFJkPtRC5I97mqBMXPfg=",
+      "requires": {
+        "bson": "1.0.4",
+        "require_optional": "1.0.1"
+      }
+    },
    "ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
@@ -840,6 +901,15 @@
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
      "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
    },
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
+      "requires": {
+        "encoding": "0.1.12",
+        "is-stream": "1.1.0"
+      }
+    },
    "node-forge": {
      "version": "0.7.1",
      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.1.tgz",
@@ -910,6 +980,11 @@
      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
      "integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
    },
+    "process-nextick-args": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+      "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
+    },
    "proxy-addr": {
      "version": "2.0.2",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.2.tgz",
@@ -945,6 +1020,20 @@
        "unpipe": "1.0.0"
      }
    },
+    "readable-stream": {
+      "version": "2.2.7",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.7.tgz",
+      "integrity": "sha1-BwV6y+JGeyIELTb5jFrVBwVOlbE=",
+      "requires": {
+        "buffer-shims": "1.0.0",
+        "core-util-is": "1.0.2",
+        "inherits": "2.0.3",
+        "isarray": "1.0.0",
+        "process-nextick-args": "1.0.7",
+        "string_decoder": "1.0.3",
+        "util-deprecate": "1.0.2"
+      }
+    },
    "request": {
      "version": "2.83.0",
      "resolved": "https://registry.npmjs.org/request/-/request-2.83.0.tgz",
@@ -974,6 +1063,15 @@
        "uuid": "3.1.0"
      }
    },
+    "require_optional": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/require_optional/-/require_optional-1.0.1.tgz",
+      "integrity": "sha512-qhM/y57enGWHAe3v/NcwML6a3/vfESLe/sGM2dII+gEO0BpKRUkWZow/tyloNqJyN6kXSl3RyyM8Ll5D/sJP8g==",
+      "requires": {
+        "resolve-from": "2.0.0",
+        "semver": "5.4.1"
+      }
+    },
    "resolve": {
      "version": "1.5.0",
      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.5.0.tgz",
@@ -983,6 +1081,11 @@
        "path-parse": "1.0.5"
      }
    },
+    "resolve-from": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-2.0.0.tgz",
+      "integrity": "sha1-lICrIOlP+h2egKgEx+oUdhGWa1c="
+    },
    "safe-buffer": {
      "version": "5.1.1",
      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
@@ -991,8 +1094,7 @@
    "semver": {
      "version": "5.4.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
-      "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg==",
-      "optional": true
+      "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
    },
    "send": {
      "version": "0.16.1",
@@ -1065,6 +1167,14 @@
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.4.0.tgz",
      "integrity": "sha512-zhSCtt8v2NDrRlPQpCNtw/heZLtfUDqxBM1udqikb/Hbk52LK4nQSwr10u77iopCW5LsyHpuXS0GnEc48mLeew=="
    },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
    "stringstream": {
      "version": "0.0.5",
      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@@ -1182,6 +1292,11 @@
      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw="
    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
+    },
    "utils-merge": {
      "version": "1.0.1",
      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
@@ -1212,6 +1327,11 @@
        "extsprintf": "1.3.0"
      }
    },
+    "whatwg-fetch": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz",
+      "integrity": "sha1-nITsLc9oGH/wC8ZOEnS0QhduHIQ="
+    },
    "wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
--- a/backend/package.json
+++ b/backend/package.json
@@ -4,10 +4,14 @@
  "description": "",
  "main": "test.js",
  "dependencies": {
+    "alexa-sdk": "^1.0.25",
    "body-parser": "^1.13.1",
-    "ejs": "^2.3.1",
+    "ejs": "^2.5.7",
    "express": "^4.13.0",
-    "alexa-app": "4.2.0"
+    "isomorphic-fetch": "^2.2.1",
+    "mongodb": "^2.2.33",
+    "nodemailer": "^4.4.1",
+    "request": "^2.83.0"
  },
  "author": "Matt Kruse <github@mattkruse.com> (http://mattkruse.com/)",
  "license": "MIT"
--- a/backend/server.js
+++ b/backend/server.js
@@ -0,0 +1,28 @@
+var databaseHelper = require ('./helpers/database');
+const config = require ('./config/config');
+var express = require ('express');
+var alexa = require ('./models/alexa');
+
+var MongoClient = require ('mongodb').MongoClient;
+var ObjectID = require ('mongodb').ObjectID;
+
+const router = express.Router ();
+var app = express ();
+
+app.set ('view engine', 'ejs'); // Should be removed
+app.use (require ('./middleware')); //common middleware for all requests
+app.use (require ('./controllers')); //all routes
+
+MongoClient.connect (config.DB_URL)
+  .then (database => {
+    databaseHelper.initModule (database);
+
+    app.listen (config.PORT, () => {
+      console.log ('Express server running on port  ' + config.PORT);
+      alexa.updateModel ();
+      databaseHelper.loadTokens ();
+    });
+  })
+  .catch (e => {
+    console.log ('error : ' + e);
+  });
--- a/web/README.md
+++ b/web/README.md
--- a/web/package-lock.json
+++ b/web/package-lock.json
--- a/web/package.json
+++ b/web/package.json
@@ -3,10 +3,13 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+    "keymaster": "^1.6.2",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-md": "^1.2.8",
-    "react-scripts": "1.0.17"
+    "react-popup": "^0.9.1",
+    "react-scripts": "1.0.17",
+    "webfontloader": "^1.6.28"
  },
  "scripts": {
    "build-css": "node-sass-chokidar --include-path ./node_modules src/ -o src/",
@@ -14,12 +17,14 @@
    "watch-css": "nodemon -e scss -x \"npm run watch-css-mine\"",
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
-    "build": "react-scripts build",
+    "react-build" : "react-scripts build",
+    "build": "npm-run-all -p build-css react-build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "node-sass": "^4.7.2",
-    "nodemon": "^1.12.1"
+    "nodemon": "^1.12.1",
+    "npm-run-all": "^4.1.2"
  }
 }
--- a/web/src/App.js
+++ b/web/src/App.js
@@ -1,87 +1,305 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import './css/App.css';
+import './css/popup.css';
 import IntentList from './components/IntentList';
 import IntentDetails from './components/IntentDetails';
-
-import {getAllIntents, deleteIntent, updateIntent} from './lib/api'
+import LaunchRequest from './components/LaunchRequest';
+import Contact from './components/Contact';
+import Popup from 'react-popup';
+import {getSkill, updateSkill} from './lib/api';
+import {
+  NEW_INTENT_SELECTED_INDEX,
+  LAUNCH_REQUEST_SELECTED_INDEX,
+  CONTACT_SELECTED_INDEX,
+  RESULT_CODES,
+} from './config/constants';

 class App extends Component {
+  constructor (props) {
+    super (props);

-  constructor(props){
-    super(props);
+    this.state = {
+      _id: '5a232fb86ce046c749739455',
+      skillID: '',
+      skillName: '',
+      invocationName: 'Saburly',
+      invocationAnswer: 'We are saburly',
+      allIntents: [],
+      selectedIntent: {
+        intentName: '',
+        intentExplanation: '',
+        questions: [''],
+        answer: '',
+      },
+      selectedIndex: NEW_INTENT_SELECTED_INDEX,
+      contactEmail: '',
+      waiting: false,
+    };

-    this.state={allIntents:[], selectedIntent: {questions:[''],answer:''}, selectedIndex:-1};
+    getSkill (this.state._id).then (l => l.json ()).then (result => {
+      if (result === undefined) return;
+      this.setState ({
+        skillID: result.skillID,
+        skillName: result.skillName,
+        invocationName: result.invocationName,
+        invocationAnswer: result.invocationAnswer,
+        allIntents: result.intents,
+        contactEmail: result.contactEmail,
+      });
+    });

-    getAllIntents().then(l=> l.text()).then(result=>{
-      this.setState({allIntents: JSON.parse(result), selectedIntent: this.state.selectedIntent})
-    })
-
-    this.handleIntentClick = this.handleIntentClick.bind(this);
-    this.handleDeleteIntentClick = this.handleDeleteIntentClick.bind(this);
-    this.handleSaveIntentClick = this.handleSaveIntentClick.bind(this);
-    this.handleAddIntentClick = this.handleAddIntentClick.bind(this);
+    this.handleIntentClick = this.handleIntentClick.bind (this);
+    this.handleLaunchRequestClick = this.handleLaunchRequestClick.bind (this);
+    this.handleDeleteIntentClick = this.handleDeleteIntentClick.bind (this);
+    this.handleSaveIntentClick = this.handleSaveIntentClick.bind (this);
+    this.handleAddIntentClick = this.handleAddIntentClick.bind (this);
+    this.handleSaveLaunchRequestClick = this.handleSaveLaunchRequestClick.bind (
+      this
+    );
+    this.createSkill = this.createSkill.bind (this);
+    this.sendSkill = this.sendSkill.bind (this);
+    this.handleContactClick = this.handleContactClick.bind (this);
+    this.handleSaveEmailClick = this.handleSaveEmailClick.bind (this);
  }

-  render() {
+  render () {
+    let rightPanel;
+    switch (this.state.selectedIndex) {
+      case LAUNCH_REQUEST_SELECTED_INDEX:
+        rightPanel = (
+          <LaunchRequest
+            invocationName={this.state.invocationName}
+            invocationAnswer={this.state.invocationAnswer}
+            onSaveClick={this.handleSaveLaunchRequestClick}
+            waiting={this.state.waiting}
+          />
+        );
+        break;
+      case CONTACT_SELECTED_INDEX:
+        rightPanel = (
+          <Contact
+            contactEmail={this.state.contactEmail}
+            onSaveEmailClick={this.handleSaveEmailClick}
+            waiting={this.state.waiting}
+          />
+        );
+        break;
+      default:
+        rightPanel = (
+          <IntentDetails
+            selectedIntent={this.state.selectedIntent}
+            onDeleteIntentClick={this.handleDeleteIntentClick}
+            onSaveIntentClick={this.handleSaveIntentClick}
+            waiting={this.state.waiting}
+          />
+        );
+    }
+
    return (
      <div className="App">
+        <Popup />
        <div className="App-header">
          <h1> Tell All </h1>
        </div>
-        <IntentList allIntents={this.state.allIntents} 
-                    onIntentClick={this.handleIntentClick}
-                    onAddIntentClick={this.handleAddIntentClick}
-                    selectedIndex={this.state.selectedIndex}>
-        </IntentList>
-        <IntentDetails  selectedIntent={this.state.selectedIntent}
-                        onDeleteIntentClick={this.handleDeleteIntentClick}
-                        onSaveIntentClick={this.handleSaveIntentClick}>
-        </IntentDetails>
+        <IntentList
+          allIntents={this.state.allIntents}
+          onLaunchRequestClick={this.handleLaunchRequestClick}
+          onContactClick={this.handleContactClick}
+          onIntentClick={this.handleIntentClick}
+          onAddIntentClick={this.handleAddIntentClick}
+          selectedIndex={this.state.selectedIndex}
+          waiting={this.state.waiting}
+        />
+
+        {rightPanel}
      </div>
    );
  }

-  handleIntentClick(selectedIntent, index){
-    this.setState({selectedIntent:selectedIntent, selectedIndex: index});
+  createSkill (intents, name, answer, email, updateOnAmazon) {
+    return {
+      _id: this.state._id,
+      skillID: this.state.skillID,
+      intents: intents,
+      invocationName: name,
+      invocationAnswer: answer,
+      contactEmail: email,
+      updateOnAmazon: updateOnAmazon,
+    };
  }

-  handleDeleteIntentClick(selectedIntent){
-    if (selectedIntent._id){
-      deleteIntent(selectedIntent._id).then(l=>l.text()).then(result=>{
-        if (JSON.parse(result).n===1){
-          let id = this.state.allIntents.indexOf(selectedIntent);
-          if (id!==-1){
-            this.state.allIntents.splice(id,1);
-            this.setState({allIntents: this.state.allIntents, selectedIntent: {questions:[''],answer:''}});
-          }else{
-            alert("Error");  
-          }
-        }else{
-          alert("Error");
-        }
-      });
-    }
-  }
-
-  handleSaveIntentClick(selectedIntent){
-    updateIntent(selectedIntent._id, selectedIntent).then(l=>l.text()).then(result=>{
-      if (JSON.parse(result).nModified===1){
-        this.state.allIntents.map((intent,index)=>{
-          if (intent._id === selectedIntent._id){
-            let newAllIntents = this.state.allIntents;
-            newAllIntents[index] = selectedIntent;
-            this.setState({allIntents: newAllIntents, selectedIntent: selectedIntent});
-            return 1;
-          }
-        });
-      }else{
-        alert("error - update went wrong");
-      }
+  handleIntentClick (selectedIntent, index) {
+    this.setState ({
+      selectedIntent: selectedIntent,
+      selectedIndex: index,
+      launchRequest: false,
    });
  }

-  handleAddIntentClick(){
-    this.setState({allIntents: this.state.allIntents, selectedIntent: {questions:[''], answer:''}});
+  handleLaunchRequestClick () {
+    this.setState ({selectedIndex: LAUNCH_REQUEST_SELECTED_INDEX});
+  }
+
+  handleContactClick () {
+    this.setState ({selectedIndex: CONTACT_SELECTED_INDEX});
+  }
+
+  handleSaveLaunchRequestClick (name, answer) {
+    this.setState ({
+      waiting: true,
+      invocationName: name,
+      invocationAnswer: answer,
+    });
+    this.sendSkill (
+      this.state.allIntents,
+      true,
+      {waiting: false},
+      {waiting: false},
+      name,
+      answer,
+      this.state.contactEmail,
+      true
+    );
+  }
+
+  handleSaveEmailClick (email) {
+    this.setState ({waiting: true});
+    this.sendSkill (
+      this.state.allIntents,
+      true,
+      {contactEmail: email, waiting: false},
+      {waiting: false},
+      this.state.invocationName,
+      this.state.invocationAnswer,
+      email,
+      false
+    );
+  }
+
+  handleDeleteIntentClick (selectedIntent) {
+    let id = -1;
+    //TODO : Change comparsion method ! Same object with different proeprty sorting will not be same string
+    this.state.allIntents.map ((intent, index) => {
+      if (
+        id === -1 &&
+        JSON.stringify (selectedIntent) === JSON.stringify (intent)
+      )
+        id = index;
+    });
+
+    if (id !== -1) {
+      try {
+        let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
+        let newAllIntents = JSON.parse (newAllIntentsJSON);
+        newAllIntents.splice (id, 1);
+        this.setState ({waiting: true});
+
+        let newState = {
+          allIntents: newAllIntents,
+          selectedIntent: {intentName: '', questions: [''], answer: ''},
+          waiting: false,
+        };
+        this.sendSkill (
+          newAllIntents,
+          true,
+          newState,
+          {waiting: false},
+          this.state.invocationName,
+          this.state.invocationAnswer,
+          this.state.contactEmail,
+          true
+        );
+      } catch (e) {
+        console.log ('error : ' + e);
+      }
+    }
+  }
+
+  handleSaveIntentClick (selectedIntent) {
+    let newAllIntentsJSON = JSON.stringify (this.state.allIntents);
+    let newAllIntents = JSON.parse (newAllIntentsJSON);
+
+    let newState = null;
+    if (this.state.selectedIndex === NEW_INTENT_SELECTED_INDEX) {
+      //new intent
+      newAllIntents.push (selectedIntent);
+      newState = {
+        allIntents: newAllIntents,
+        selectedIntent: selectedIntent,
+        selectedIndex: newAllIntents.length - 1,
+        waiting: false,
+      };
+    } else {
+      newAllIntents[this.state.selectedIndex] = selectedIntent;
+      newState = {
+        allIntents: newAllIntents,
+        selectedIntent: selectedIntent,
+        waiting: false,
+      };
+    }
+    this.setState ({waiting: true});
+    this.sendSkill (
+      newAllIntents,
+      true,
+      newState,
+      {waiting: false},
+      this.state.invocationName,
+      this.state.invocationAnswer,
+      this.state.contactEmail,
+      true
+    );
+  }
+
+  handleAddIntentClick () {
+    this.setState ({
+      allIntents: this.state.allIntents,
+      selectedIndex: NEW_INTENT_SELECTED_INDEX,
+      launchRequest: false,
+      selectedIntent: {intentName: '', questions: [''], answer: '', intentExplanation:''},
+    });
+  }
+
+  sendSkill (
+    newAllIntents,
+    showPopUp,
+    resolveState,
+    rejectState,
+    newName,
+    newAnswer,
+    email,
+    updateOnAmazon
+  ) {
+    return new Promise ((resolve, reject) => {
+      updateSkill (
+        this.createSkill (
+          newAllIntents,
+          newName,
+          newAnswer,
+          email,
+          updateOnAmazon
+        )
+      )
+        .then (l => l.json ())
+        .then (result => {
+          if (result.result !== RESULT_CODES.OK) {
+            console.log (result);
+            if (showPopUp)
+              Popup.alert ('Model was not saved. Please try again');
+            this.setState (rejectState);
+            //reject('Error code : ' + jResult.result);
+          } else {
+            if (showPopUp) Popup.alert ('Saved');
+            this.setState (resolveState);
+            resolve ();
+          }
+        })
+        .catch (e => {
+          console.log ('error : ' + e);
+          if (showPopUp) Popup.alert ('Model was not saved. Please try again');
+          this.setState (rejectState);
+          //reject(e);
+        });
+    });
  }
 }

--- a/web/src/components/Contact.js
+++ b/web/src/components/Contact.js
@@ -0,0 +1,48 @@
+import React, { Component } from 'react';
+import {Button, TextField} from 'react-md';
+import '../css/Common.css';
+import '../css/components/Contact.css';
+import {EMAIL_MAX_LENGTH} from '../config/constants';
+
+class Contact extends Component {
+  constructor(props){
+    super(props);
+
+    this.state = {contactEmail: props.contactEmail};
+
+    this.handleEmailEdit = this.handleEmailEdit.bind(this);
+  }
+
+  componentWillReceiveProps(props){
+    this.setState({contactEmail: props.contactEmail});
+  }
+
+  render() {
+    return (
+      <div className="RightPanelBox">
+        <h5 className="PanelSubTitle"> Contact address will be used for direct messaging through Alexa </h5>
+        <TextField
+          id="contact email"
+          lineDirection="center"
+          label="Contact email"
+          className="md-cell md-cell--bottom ContactEmailInput"
+          maxLength={EMAIL_MAX_LENGTH}
+          onChange={this.handleEmailEdit}
+          value={this.state.contactEmail}/>
+        <br></br>
+        <br></br>
+        <br></br>
+        <Button className="SaveButton" flat primary swapTheming 
+                onClick={()=>{this.props.onSaveEmailClick(this.state.contactEmail)}}
+                disabled={this.props.waiting}>Save</Button>
+      </div>
+    );
+  }
+
+  handleEmailEdit(e){
+    if (e.length === EMAIL_MAX_LENGTH) return;
+    this.setState({contactEmail: e});
+  }
+}
+
+export default Contact;
--- a/web/src/components/IntentDetails.js
+++ b/web/src/components/IntentDetails.js
@@ -1,6 +1,8 @@
 import React, { Component } from 'react';
 import {Button, SVGIcon, TextField} from 'react-md';
-import '../css/Intent.css'
+import '../css/components/IntentDetails.css';
+import '../css/Common.css';
+import {QUESTION_MAX_LENGTH, ANSWER_MAX_LENGTH, INTENT_NAME_MAX_LENGTH, INTENT_EXPLANATION_MAX_LENGTH} from '../config/constants';

 class IntentDetails extends Component {
  constructor(props){
@@ -10,6 +12,10 @@ class IntentDetails extends Component {

    this.addQuestion = this.addQuestion.bind(this);
    this.deleteQuestion = this.deleteQuestion.bind(this);
+    this.handleQuestionEdit = this.handleQuestionEdit.bind(this);
+    this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
+    this.handleIntentNameEdit = this.handleIntentNameEdit.bind(this);
+    this.handleIntentExplanationEdit = this.handleIntentExplanationEdit.bind(this);
  }

  componentWillReceiveProps(props){
@@ -18,19 +24,40 @@ class IntentDetails extends Component {

  render() {
    return (
-      <div className="IntentDetails">
-        <h5 style={{marginTop:'20px', marginLeft: '30px', float: 'left'}}>Questions</h5>
+      <div className="RightPanelBox">
+        <div className="QuestionBox">
+        <h5 className="PanelSubTitle"> In introduction, Alexa will help users to ask her the right questions about your business. For Example, she will say : "To ask us about our services, say : What do you do ? ". What do you do ? is defined in question field. Alexa will use first variation of question in intro.</h5>
+        <TextField
+            id="intent explanation"
+            lineDirection="center"
+            placeholder="To ask us about our services, say "
+            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+            onChange={this.handleIntentExplanationEdit}
+            maxLength={INTENT_EXPLANATION_MAX_LENGTH}
+            value={this.state.intent.intentExplanation} />
+          <br/>
+          <TextField
+            id="intent name"
+            lineDirection="center"
+            label="Question name"
+            className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+            onChange={this.handleIntentNameEdit}
+            maxLength={INTENT_NAME_MAX_LENGTH}
+            value={this.state.intent.intentName} />
+        </div>
+        <h5 className="QuestionTitle">Question variants</h5>
        {
          this.state.intent.questions.map((question, index)=>{
            return (
              <div key={index} className="QuestionBox">
                <TextField
-                  id="floating-center-title"
+                  id="intent question"
                  lineDirection="center"
                  placeholder="Question"
-                  className="md-cell md-cell--bottom"
-                  style={{width:'60%'}}
+                  className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+                  maxLength={QUESTION_MAX_LENGTH}
                  rightIcon={<SVGIcon onClick={()=>{this.deleteQuestion(question)}}> <path fill="#000000" d="M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z"/> </SVGIcon>}
+                  onChange={(e)=>{this.handleQuestionEdit(e,index)}}
                  value={question}/>
              </div>
            );
@@ -40,27 +67,29 @@ class IntentDetails extends Component {
        {
          <div className="QuestionBox">
            <TextField
-              id="floating-center-title"
+              id="intent answer"
              lineDirection="center"
              label="Answer"
              placeholder="Answer"
-              style={{width:'60%'}}
-              className="md-cell md-cell--bottom"
+              maxLength={ANSWER_MAX_LENGTH}
+              className="md-cell md-cell--bottom IntentDetailsInputBoxes"
+              onChange={this.handleAnswerEdit}
              value={this.state.intent.answer}/>
          </div>
        }
        <br></br>
        <br></br>
-        <Button style={{float:'left', marginLeft: '25px'}} flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}}>Delete intent</Button>
-        <Button style={{float:'left', marginLeft: '22%'}} flat primary swapTheming onClick={this.addQuestion}>Add question</Button>        
-        <Button style={{float:'left', marginLeft: '20px'}} flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}}>Save</Button>
+        <Button className="IntentDetailsButton" flat primary onClick={()=>{this.props.onDeleteIntentClick(this.state.intent)}} disabled={this.props.waiting}>Delete question</Button>
+        <Button className="IntentDetailsButton" flat primary swapTheming onClick={this.addQuestion} disabled={this.props.waiting}>Add variant</Button>        
+        <Button className="IntentDetailsButton" flat primary swapTheming onClick={()=>{this.props.onSaveIntentClick(this.state.intent)}} disabled={this.props.waiting}>Save</Button>
+        
      </div>
    );
  }

  addQuestion(){
    let newIntent = this.state.intent;
-    newIntent.questions.push('New question');
+    newIntent.questions.push('');
    this.setState({intent: newIntent});
  }

@@ -72,6 +101,34 @@ class IntentDetails extends Component {
    
    this.setState({intent: newIntent});
  }
+
+  handleQuestionEdit(e,index){
+    if (e.length === QUESTION_MAX_LENGTH) return;
+    let newIntent = this.state.intent;
+    newIntent.questions[index] = e;
+    this.setState({intent: newIntent});
+  }
+
+  handleIntentExplanationEdit(e,index){
+    if (e.length === INTENT_EXPLANATION_MAX_LENGTH) return;
+    let newIntent = this.state.intent;
+    newIntent.intentExplanation = e;
+    this.setState({intent: newIntent});
+  }
+
+  handleAnswerEdit(e){
+    if (e.length === ANSWER_MAX_LENGTH) return;
+    let newIntent = this.state.intent;
+    newIntent.answer = e;
+    this.setState({intent: newIntent});
+  }
+
+  handleIntentNameEdit(e){
+    if (e.length === INTENT_NAME_MAX_LENGTH) return;
+    let newIntent = this.state.intent;
+    newIntent.intentName = e;
+    this.setState({intent: newIntent});
+  }
 }

 export default IntentDetails;
--- a/web/src/components/IntentItem.js
+++ b/web/src/components/IntentItem.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import {Button} from 'react-md';
-import '../css/Intent.css'
+import '../css/components/IntentItem.css'
+import {INTENT_TITLE_MAX_LENGTH, INTENT_TITLE_TOOLTIP_DELAY} from '../config/constants'

 class IntentItem extends Component {
  
@@ -11,18 +12,19 @@ class IntentItem extends Component {
    }
  
    render() {
-        /*
-        <div className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'} onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}>
-                <Button className={"IntentItem"} flat swapTheming>OK</Button>
-                <p> {this.state.index+1}. {this.state.intent.questions[0]} </p>
-            </div>
-        */
+        let buttonTitle = this.state.intent.intentName;
+        if (buttonTitle.length > INTENT_TITLE_MAX_LENGTH){
+            buttonTitle = this.state.intent.intentName.substr(0,INTENT_TITLE_MAX_LENGTH-1) + '. . .';
+        }
        return (
            <div>
                <Button className={this.props.selectedIndex===this.state.index ? 'IntentItem-selected' : 'IntentItem'}
                        onClick={()=>{this.state.onClick(this.state.intent,this.state.index)}}
-                        flat>
-                            {this.state.index+1}. {this.state.intent.questions[0]}
+                        flat
+                        disabled={this.props.waiting}
+                        tooltipDelay={INTENT_TITLE_TOOLTIP_DELAY}
+                        tooltipLabel={this.state.intent.intentName.length>INTENT_TITLE_MAX_LENGTH ? this.state.intent.questions[0] : ''}>
+                            {buttonTitle}
                </Button>  
                <br></br>
            </div>
--- a/web/src/components/IntentList.js
+++ b/web/src/components/IntentList.js
@@ -1,7 +1,10 @@
 import React, { Component } from 'react';
 import {Button} from 'react-md';
 import IntentItem from './IntentItem';
-import '../css/Intent.css'
+import '../css/components/IntentList.css';
+import {
+    LAUNCH_REQUEST_SELECTED_INDEX,
+    CONTACT_SELECTED_INDEX} from '../config/constants'

 class IntentList extends Component {
    constructor (props){
@@ -17,20 +20,32 @@ class IntentList extends Component {
    render() {
        return (
            <div className="IntentList">
+                <Button className={this.props.selectedIndex===LAUNCH_REQUEST_SELECTED_INDEX ? "LaunchRequestButton-selected" : "LaunchRequestButton"} flat primary 
+                        onClick={this.props.onLaunchRequestClick}
+                        disabled={this.props.waiting} >Launch request</Button>
+
+                <Button className={this.props.selectedIndex===CONTACT_SELECTED_INDEX ? "ContactButton-selected" : "ContactButton"} flat primary 
+                        onClick={this.props.onContactClick}
+                        disabled={this.props.waiting} >Contact</Button>
+                
+                
                <div className="IntentList-title">
-                    <h3>Intents</h3>
+                    <h3>Questions</h3>
                </div>
                {
                    this.state.intents.map((intent,index)=>{
                    return <IntentItem 
-                                key={index} intent={intent} index={index} 
+                                key={intent.intentName} intent={intent} index={index} 
                                selectedIndex={this.props.selectedIndex} 
-                                onClick={this.state.onIntentClick}>
+                                onClick={this.state.onIntentClick}
+                                waiting={this.props.waiting}>
                            </IntentItem>
                    })
                }
                <br></br>
-                <Button className={"AddIntent"} flat primary swapTheming onClick={this.props.handleAddIntentClick}>Add intent</Button>
+                <Button className="AddIntent" flat primary swapTheming 
+                        onClick={this.props.onAddIntentClick}
+                        disabled={this.props.waiting}>Add question</Button>
            </div>  
        );
    }
--- a/web/src/components/LaunchRequest.js
+++ b/web/src/components/LaunchRequest.js
@@ -0,0 +1,65 @@
+import React, { Component } from 'react';
+import {Button, TextField} from 'react-md';
+import '../css/Common.css';
+import '../css/components/LaunchRequest.css';
+import { INVOCATION_NAME_MAX_LENGTH, INVOCATION_ANSWER_MAX_LENGTH } from '../config/constants';
+
+class LaunchRequest extends Component {
+  constructor(props){
+    super(props);
+
+    this.state = {invocationName: props.invocationName, invocationAnswer: props.invocationAnswer};
+
+    this.handleNameEdit = this.handleNameEdit.bind(this);
+    this.handleAnswerEdit = this.handleAnswerEdit.bind(this);
+  }
+
+  componentWillReceiveProps(props){
+    this.setState({invocationName: props.invocationName, invocationAnswer: props.invocationAnswer});
+  }
+
+  render() {
+    return (
+      <div className="RightPanelBox">
+        <h5 className="PanelSubTitle"> Invocation name customers use to activate the skill. For example "Open Saburly" or "Talk to Saburly" </h5>
+        <TextField
+          id="invocation name"
+          lineDirection="center"
+          placeholder="Saburly"
+          label="Invocation name"
+          className="md-cell md-cell--bottom InvocationInputBoxes"
+          maxLength={INVOCATION_NAME_MAX_LENGTH}
+          onChange={this.handleNameEdit}
+          value={this.state.invocationName}/>
+        <br></br>
+        <h5 className="PanelSubTitle" >Answer customers get from Alexa when they activate the skill.</h5>
+        <TextField
+          id="invocation answer"
+          lineDirection="center"
+          placeholder="We are Saburly, ask us something about us"
+          label="Answer"
+          className="md-cell md-cell--bottom InvocationInputBoxes"
+          maxLength={INVOCATION_ANSWER_MAX_LENGTH}
+          onChange={this.handleAnswerEdit}
+          value={this.state.invocationAnswer}/>
+        <br></br>
+        <br></br>
+        <Button className="SaveButton" flat primary swapTheming 
+                onClick={()=>{this.props.onSaveClick(this.state.invocationName, this.state.invocationAnswer)}}
+                disabled={this.props.waiting}>Save</Button>
+      </div>
+    );
+  }
+
+  handleNameEdit(e){
+    if (e.length === INVOCATION_NAME_MAX_LENGTH) return;
+    this.setState({invocationName: e});
+  }
+
+  handleAnswerEdit(e){
+    if (e.length === INVOCATION_ANSWER_MAX_LENGTH) return;
+    this.setState({invocationAnswer: e});
+  }
+}
+
+export default LaunchRequest;
--- a/web/src/config.js
+++ b/web/src/config.js
@@ -1 +0,0 @@
-export const BASE_URL = 'localhost:5000';
--- a/web/src/config/config.js
+++ b/web/src/config/config.js
@@ -0,0 +1,4 @@
+//export const BASE_URL = 'tellall.saburly.com'; //for server
+export const BASE_URL = 'localhost:5000'; //for local
+
+
--- a/web/src/config/constants.js
+++ b/web/src/config/constants.js
@@ -0,0 +1,21 @@
+export const INTENT_NAME_MAX_LENGTH = 30;
+export const INTENT_EXPLANATION_MAX_LENGTH = 70;
+export const QUESTION_MAX_LENGTH = 150;
+export const ANSWER_MAX_LENGTH = 150;
+
+export const INTENT_TITLE_MAX_LENGTH = 20;
+export const INTENT_TITLE_TOOLTIP_DELAY = 700;
+
+export const INVOCATION_NAME_MAX_LENGTH = 15;
+export const INVOCATION_ANSWER_MAX_LENGTH = 100;
+
+export const EMAIL_MAX_LENGTH = 100;
+
+export const NEW_INTENT_SELECTED_INDEX = -1;
+export const LAUNCH_REQUEST_SELECTED_INDEX = -2;
+export const CONTACT_SELECTED_INDEX = -3;
+
+export const RESULT_CODES = {
+  OK: 0,
+  ERROR: -1,
+};
--- a/web/src/css/Common.scss
+++ b/web/src/css/Common.scss
@@ -0,0 +1,21 @@
+$minHeight : calc(100vh - 80px); //80px is height of the title div container
+
+/* Common for right panel components */
+
+.RightPanelBox{
+    float: left;
+    width: 70%;
+    min-height:$minHeight;
+    background-color: #f5f5f5;
+}
+
+.PanelSubTitle{
+    text-align: left; 
+    margin-top: 30px; 
+    margin-left: 20px;
+}
+
+.SaveButton{
+    float: right; 
+    margin-right: 20px;
+}
--- a/web/src/css/Intent.css
+++ b/web/src/css/Intent.css
@@ -1,44 +0,0 @@
-/*IntentList and IntentItem CSS*/
-.IntentList {
-  width: 30%;
-  min-height: 9999px;
-  height: 9999px;
-  float: left;
-  background-color: #d5dae2; }
-
-.IntentList-title {
-  font-size: 1.5em;
-  height: 70px;
-  padding: 20px;
-  text-align: left; }
-
-.AddIntent {
-  float: right;
-  margin: 12px; }
-
-.IntentItem {
-  margin-top: 2px;
-  margin-bottom: 2px;
-  height: 50px;
-  width: 100%;
-  text-align: left;
-  background-color: #adb0b5; }
-
-.IntentItem-selected {
-  margin-top: 2px;
-  margin-bottom: 2px;
-  height: 50px;
-  width: 100%;
-  text-align: left;
-  background-color: #e8ecf2; }
-
-/*IntentDetails CSS*/
-.IntentDetails {
-  float: left;
-  width: 70%;
-  min-height: 9999px;
-  height: 9999px;
-  background-color: #e8ecf2; }
-
-.QuestionBox {
-  margin: 25px; }
--- a/web/src/css/Intent.scss
+++ b/web/src/css/Intent.scss
@@ -1,54 +0,0 @@
-/*IntentList and IntentItem CSS*/
-
-.IntentList{
-    width: 30%;
-    min-height:9999px;
-    height:9999px;
-    float:left;
-    background-color: #d5dae2;
-}
-
-.IntentList-title{
-    font-size: 1.5em;
-    height: 70px;
-    padding: 20px;
-    text-align:left;
-}
-
-.AddIntent{
-    float: right;
-    margin: 12px;
-}
-
-.IntentItem{
-    margin-top: 2px;
-    margin-bottom: 2px;
-    height: 50px;
-    width:100%;
-    text-align:left;
-    background-color: #adb0b5;
-}
-
-.IntentItem-selected{
-    margin-top: 2px;
-    margin-bottom: 2px;
-    height: 50px;
-    width:100%;
-    text-align:left;
-    background-color:#e8ecf2;
-    
-}
-
-/*IntentDetails CSS*/
-
-.IntentDetails{
-    float: left;
-    width: 70%;
-    min-height:9999px;
-    height:9999px;
-    background-color:#e8ecf2;
-}
-
-.QuestionBox{
-    margin:25px;
-}
--- a/web/src/css/components/Contact.scss
+++ b/web/src/css/components/Contact.scss
@@ -0,0 +1,4 @@
+.ContactEmailInput{
+    width: 60%;
+    margin-left: 20px;
+}
--- a/web/src/css/components/IntentDetails.scss
+++ b/web/src/css/components/IntentDetails.scss
@@ -0,0 +1,18 @@
+.QuestionBox{
+    margin:25px;
+}
+
+.QuestionTitle{
+    margin-top:20px; 
+    margin-left: 30px;
+    float: left;
+}
+
+.IntentDetailsInputBoxes{
+    width: 60%;
+}
+
+.IntentDetailsButton{
+    float: left;
+    margin-left: 25px;
+}
--- a/web/src/css/components/IntentItem.scss
+++ b/web/src/css/components/IntentItem.scss
@@ -0,0 +1,18 @@
+.IntentItem{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    height: 50px;
+    width:100%;
+    text-align:left;
+    background-color: #d8d8d8;
+}
+
+.IntentItem-selected{
+    margin-top: 2px;
+    margin-bottom: 2px;
+    height: 50px;
+    width:100%;
+    text-align:left;
+    background-color: #f5f5f5;
+    
+}
--- a/web/src/css/components/IntentList.scss
+++ b/web/src/css/components/IntentList.scss
@@ -0,0 +1,52 @@
+$minHeight : calc(100vh - 80px); //80px is height of the title div container
+
+
+.IntentList{
+    width: 30%;
+    min-height:$minHeight;
+    float:left;
+    background-color: #eff0f0;
+}
+
+.IntentList-title{
+    font-size: 1.5em;
+    height: 70px;
+    padding: 20px;
+    text-align:left;
+    background-color: #eff0f0;
+}
+
+.AddIntent{
+    float: right;
+    margin: 12px;
+}
+
+.LaunchRequestButton{
+    text-align: left;
+    width: 100%;
+    height: 50px;
+    background-color: #d8d8d8
+}
+
+.LaunchRequestButton-selected{
+    text-align: left;
+    width: 100%;
+    height: 50px;
+    background-color: #f5f5f5;
+}
+
+.ContactButton{
+    text-align: left;
+    color: #009b8a;
+    width: 100%;
+    height: 50px;
+    background-color: #d8d8d8
+}
+
+.ContactButton-selected{
+    text-align: left;
+    color: #009b8a;
+    width: 100%;
+    height: 50px;
+    background-color: #f5f5f5;
+}
--- a/web/src/css/components/LaunchRequest.scss
+++ b/web/src/css/components/LaunchRequest.scss
@@ -0,0 +1,11 @@
+.ExplanationText{
+    float: left;
+    margin-top: 30px;
+    margin-left: 20px;
+    text-align: left;
+}
+
+.InvocationInputBoxes{
+    width: 60%; 
+    margin-left: 20px;
+}
--- a/web/src/css/index.scss
+++ b/web/src/css/index.scss
@@ -2,7 +2,6 @@

@include react-md-everything;

-
 body {
  margin: 0;
  padding: 0;
--- a/web/src/css/popup.scss
+++ b/web/src/css/popup.scss
@@ -0,0 +1,174 @@
+.mm-popup {
+  display: none; }
+
+.mm-popup--visible {
+  display: block; }
+
+.mm-popup__overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  overflow: auto;
+  background: rgba(0, 0, 0, 0.1); }
+
+.mm-popup__close {
+  position: absolute;
+  top: 15px;
+  right: 20px;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  outline: none;
+  text-align: center;
+  border-radius: 10px;
+  border: none;
+  text-indent: -9999px;
+  background: transparent url("data:image/png;base64,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") no-repeat center center;
+  background-size: 100%;
+  margin: 0; }
+
+.mm-popup__input {
+  display: block;
+  width: 100%;
+  height: 30px;
+  border-radius: 3px;
+  background: #f5f5f5;
+  border: 1px solid #e9ebec;
+  outline: none;
+  -moz-box-sizing: border-box !important;
+  -webkit-box-sizing: border-box !important;
+  box-sizing: border-box !important;
+  font-size: 14px;
+  padding: 0 12px;
+  color: #808080; }
+
+.mm-popup__btn {
+  border-radius: 3px;
+  -moz-box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  padding: 0 10px;
+  margin: 0;
+  line-height: 32px;
+  height: 32px;
+  border: 1px solid #666;
+  text-align: center;
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 400;
+  color: #333;
+  background: transparent;
+  outline: none;
+  text-decoration: none;
+  cursor: pointer;
+  font-family: "Open Sans", sans-serif; }
+
+.mm-popup__btn--success {
+  background-color: #27ae60;
+  border-color: #27ae60;
+  color: #fff; }
+
+.mm-popup__btn--danger {
+  background-color: #c5545c;
+  border-color: #c5545c;
+  color: #fff; }
+
+.mm-popup__box {
+  width: 350px;
+  position: fixed;
+  top: 10%;
+  left: 50%;
+  margin-left: -175px;
+  background: #fff;
+  box-shadow: 0px 5px 20px 0px rgba(126, 137, 140, 0.2);
+  border-radius: 5px;
+  border: 1px solid #B8C8CC;
+  overflow: hidden;
+  z-index: 1001; }
+
+.mm-popup__box__header {
+  padding: 15px 20px;
+  background: #EDF5F7;
+  color: #454B4D; }
+
+.mm-popup__box__header__title {
+  margin: 0;
+  font-size: 16px;
+  text-align: left;
+  font-weight: 600; }
+
+.mm-popup__box__body {
+  padding: 20px;
+  line-height: 1.4;
+  font-size: 14px;
+  color: #454B4D;
+  background: #fff;
+  position: relative;
+  z-index: 2; }
+
+.mm-popup__box__body p {
+  margin: 0 0 5px; }
+
+.mm-popup__box__footer {
+  overflow: hidden;
+  padding: 40px 20px 20px; }
+
+.mm-popup__box__footer__right-space {
+  float: right; }
+
+.mm-popup__box__footer__right-space .mm-popup__btn {
+  margin-left: 5px; }
+
+.mm-popup__box__footer__left-space {
+  float: left; }
+
+.mm-popup__box__footer__left-space .mm-popup__btn {
+  margin-right: 5px; }
+
+.mm-popup__box--popover {
+  width: 300px;
+  margin-left: -150px; }
+
+.mm-popup__box--popover .mm-popup__close {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 0;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  outline: none;
+  text-align: center;
+  border-radius: 10px;
+  border: none;
+  text-indent: -9999px;
+  background: transparent url("data:image/png;base64,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") no-repeat center center;
+  background-size: 100%;
+  margin: 0;
+  z-index: 3; }
+
+.mm-popup__box--popover .mm-popup__box__body {
+  padding: 20px; }
+
+@media (max-width: 420px) {
+  .mm-popup__box {
+    width: auto;
+    left: 10px;
+    right: 10px;
+    top: 10px;
+    margin-left: 0; }
+  .mm-popup__box__footer__left-space {
+    float: none; }
+  .mm-popup__box__footer__right-space {
+    float: none; }
+  .mm-popup__box__footer {
+    padding-top: 30px; }
+  .mm-popup__box__footer .mm-popup__btn {
+    display: block;
+    width: 100%;
+    text-align: center;
+    margin-top: 10px; } }
--- a/web/src/lib/api.js
+++ b/web/src/lib/api.js
@@ -1,24 +1,20 @@
 import fetch from 'isomorphic-fetch';
-import {BASE_URL} from '../config';
+import {BASE_URL} from '../config/config';

-export const getAllIntents = ()=>{
-    let url = `http://${BASE_URL}/intents`
-    return fetch(url, {method: 'GET'});
-}
-
-export const deleteIntent = id=>{
-  let url = `http://${BASE_URL}/deleteIntent/${id}`
+export const getSkill = (id)=>{
+  let url = `http://${BASE_URL}/skill/${id}`
  return fetch(url, {method: 'GET'});
 }

-export const updateIntent = (id,intent)=>{
-  let url = `http://${BASE_URL}/updateIntent/${id}`
+export const updateSkill = (skill)=>{
+  let id = (skill._id) ? skill._id : -1;
+  let url = `http://${BASE_URL}/skill/${id}`
  return fetch(url, {
-    method: 'POST',
+    method: 'PUT',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json'
    },
-    body: JSON.stringify(intent),
+    body: JSON.stringify(skill),
  });
 }
--- a/web/src/logo.svg
+++ b/web/src/logo.svg
@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>