chore(sample): new logout + typescript implementation

Author: mt-roberto

sample/package.json

@@ -4,25 +4,23 @@
   "author": "Moneytree",
   "description": "An example of the Moneytree Web SDK.",
   "license": "MIT",
-  "main": "src/index.js",
+  "main": "./src/index.ts",
   "scripts": {
     "start": "webpack-dev-server"
   },
   "devDependencies": {
-    "@babel/core": "^7.5.4",
-    "@babel/preset-env": "^7.5.4",
-    "babel-loader": "^8.0.6",
-    "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.1.0",
     "html-webpack-plugin": "^3.2.0",
     "node-sass": "^4.12.0",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
+    "ts-loader": "^6.2.1",
+    "typescript": "^3.7.3",
     "webpack": "^4.35.3",
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@moneytree/mt-link-javascript-sdk": "../",
+    "@moneytree/mt-link-javascript-sdk": "file:../",
     "qs": "^6.7.0"
   }
 }

sample/src/index.html

@@ -8,9 +8,10 @@
     <div id="root">
       <h3>Welcome to the Moneytree Link Web SDK Sample App</h3>
       <p id="access-token-text">You currently don't have an access token.</p>
-      <input type="button" id="authorize-btn" class="btn" value="Authorize" />
-      <input type="button" id="settings-btn" class="btn" value="Open Moneytree Settings" />
-      <input type="button" id="vault-btn" class="btn" value="Open Vault" />
+      <button id="authorize-btn">Authorize</button>
+      <button id="settings-btn">Open Moneytree Settings</button>
+      <button id="vault-btn">Open Vault</button>
+      <button id="logout-btn">Logout</button>
     </div>
   </body>
 </html>

sample/src/index.js

@@ -0,0 +1,92 @@
+import LinkSDK from '@moneytree/mt-link-javascript-sdk';
+import qs from 'qs';
+
+interface ITokenInfo {
+  aud: {
+    name: string;
+  };
+  exp: number;
+  scopes: string[];
+}
+
+const AWESOME_APP_ID = 'af84f08f40970caf17f2e53b31771ceb50d0f32f7d44b826753982e809395290';
+
+const authorizeBtn = document.getElementById('authorize-btn') as HTMLButtonElement;
+const logoutBtn = document.getElementById('logout-btn') as HTMLButtonElement;
+const goToSettingsBtn = document.getElementById('settings-btn') as HTMLButtonElement;
+const goToVaultBtn = document.getElementById('vault-btn') as HTMLButtonElement;
+const tokenInfoLbl = document.getElementById('access-token-text') as HTMLButtonElement;
+const accessTokenLabel = document.getElementById('access-token-text') as HTMLParagraphElement;
+
+if (!authorizeBtn || !logoutBtn || !goToSettingsBtn || !goToVaultBtn) {
+  throw new Error('An error occurred');
+}
+
+// Launch authorize route when clicked
+authorizeBtn.onclick = () => {
+  LinkSDK.authorize();
+};
+
+// Launch logout route when clicked
+logoutBtn.onclick = () => {
+  LinkSDK.logout();
+};
+
+// Launch settings route when clicked
+goToSettingsBtn.onclick = () => {
+  LinkSDK.openSettings({ newTab: false });
+};
+
+// Launch vault route when clicked
+goToVaultBtn.onclick = () => {
+  LinkSDK.openVault({ newTab: false });
+};
+
+const initializeLinkSDK = () => {
+  LinkSDK.init({
+    clientId: AWESOME_APP_ID,
+    responseType: 'token',
+    scope: ['accounts_read', 'points_read'],
+    redirectUri: 'https://localhost:9000',
+    locale: 'ja-JP',
+    isTestEnvironment: true
+  });
+};
+
+const validateToken = async () => {
+  const { hash, search } = location;
+  const accessToken =
+    qs.parse(hash.slice(1)).access_token || qs.parse(search, { ignoreQueryPrefix: true }).access_token;
+
+  // Disables buttons when a session has not been initialized.
+  if (!accessToken) {
+    goToSettingsBtn.disabled = true;
+    goToVaultBtn.disabled = true;
+    logoutBtn.disabled = true;
+    return;
+  }
+
+  accessTokenLabel.innerText = `Your access token is ${accessToken}.`;
+
+  const authHeaders = new Headers({
+    method: 'GET',
+    Authorization: `Bearer ${accessToken}`
+  });
+
+  const response = await fetch('https://myaccount-staging.getmoneytree.com/oauth/token/info.json', {
+    headers: authHeaders
+  });
+
+  const data: ITokenInfo = await response.json();
+
+  tokenInfoLbl.innerText = `
+    Your access token is ${accessToken}.
+    It was generated for the app: ${data.aud.name}.
+    It will expire on ${new Date(data.exp * 1000)}.
+    It allows you to: ${data.scopes.join(', ')}
+  `;
+};
+
+initializeLinkSDK();
+// tslint:disable-next-line: no-floating-promises
+validateToken();

sample/src/index.ts

@@ -0,0 +1,8 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "module": "commonjs",
+    "target": "es5",
+    "lib": ["es6", "es2017", "dom"]
+  }
+}

sample/tsconfig.json

@@ -1,21 +1,12 @@
 const path = require('path');
 const webpack = require('webpack');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 
 module.exports = {
   mode: 'development',
 
-  context: path.join(process.cwd(), 'src'),
-  entry: {
-    app: './index.js'
-  },
-
-  output: {
-    path: path.join(process.cwd(), 'dist'),
-    filename: '[name].[hash].js',
-    publicPath: '/',
-    sourceMapFilename: '[name].map'
+  resolve: {
+    extensions: ['.ts', '.js']
   },
 
   devtool: 'source-map', // enhance debugging by adding meta info for the browser devtools
@@ -24,7 +15,6 @@ module.exports = {
     publicPath: '/',
     port: 9000,
     https: true,
-    contentBase: path.join(process.cwd(), 'dist'), // static file location
     host: 'localhost',
     historyApiFallback: true, // true for index.html upon 404, object for multiple paths
     noInfo: false,
@@ -35,20 +25,14 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.js$/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ['@babel/preset-env']
-          }
-        }
+        test: /\.tsx?$/,
+        loader: 'ts-loader'
       }
     ]
   },
   plugins: [
-    new CleanWebpackPlugin(),
     new HtmlWebpackPlugin({
-      template: 'index.html'
+      template: './src/index.html'
     }),
     new webpack.HotModuleReplacementPlugin()
   ]