From df0bc31047597d95f02f754bd5e4446b8bd4669f Mon Sep 17 00:00:00 2001
From: Justin Reese <justin@justinreese.com>
Date: Wed, 24 Jun 2020 02:53:57 -0500
Subject: [PATCH] Add SSO Plugin

This commit adds the first version of the SSO Plugin, including:

- A settings control for app owners to set the Auth0 API credentials
  (domain and client ID).
- A plugin widget for negotiating with the Auth0 API, determining
  authentication status, offering the user the ability to login via
  popup, saving the resulting user object to local storage, and
  instructing the user to go to the RSS plugin.

It does not yet automatically forward the user to the RSS plugin
automatically. Also, the plugin.json file may need further tweaking as
we understand its intended contents.

Affects #3
---
 ssoPlugin/control/settings/index.html | 194 ++++++++++++++++++
 ssoPlugin/plugin.json                 |  21 ++
 ssoPlugin/widget/index.html           | 278 ++++++++++++++++++++++++++
 3 files changed, 493 insertions(+)
 create mode 100644 ssoPlugin/control/settings/index.html
 create mode 100644 ssoPlugin/plugin.json
 create mode 100644 ssoPlugin/widget/index.html
diff --git a/ssoPlugin/control/settings/index.html b/ssoPlugin/control/settings/index.html
new file mode 100644
index 0000000..da4e15f
--- /dev/null
+++ b/ssoPlugin/control/settings/index.html
@@ -0,0 +1,194 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<!-- The BuildFire JS library is required. -->
+	<script src="../../../../scripts/buildfire.min.js"></script>
+	<style type="text/css">
+		#bif-sso__wrapper {
+			padding: 1em;
+		}
+
+		.form-control-group {
+			margin: 0.5em 0;
+		}
+		.form-control-group label {
+			font-weight: bold;
+			display: inline-block;
+			text-align: right;
+			width: 7em;
+			margin-right: 0.25em
+		}
+		.form-control-group.align-with-labels {
+			padding-left: 7.25em;
+		}
+
+		form.disabled {
+			opacity: 0.5;
+			cursor: not-allowed;
+		}
+
+		.bif-sso__auth-api-settings__alert-message--success {
+			color: #00b500;
+		}
+		.bif-sso__auth-api-settings__alert-message--error {
+			color: #ec0000;
+		}
+	</style>
+</head>
+<body>
+
+	<div id="bif-sso__wrapper">
+		<form id="bif-sso__auth-api-settings">
+			<fieldset>
+				<legend>Auth0 API Settings</legend>
+				<div class="form-control-group">
+					<label for="bif-sso__auth-api-settings__domain">Domain</label>
+					<input id="bif-sso__auth-api-settings__domain" type="text">
+				</div>
+				<div class="form-control-group">
+					<label for="bif-sso__auth-api-settings__client-id">Client ID</label>
+					<input id="bif-sso__auth-api-settings__client-id" type="text">
+				</div>
+				<div class="form-control-group align-with-labels">
+					<button type="submit">Save settings</button>
+					<span id="bif-sso__auth-api-settings__alert-message"></span>
+				</div>
+			</fieldset>
+		</form>
+	</div>
+
+	<script type="text/javascript">
+		// ============================================================================================
+		// UTILITY METHODS
+		// ============================================================================================
+
+		/**
+		 * Runs the provided function when the document is fully loaded.
+		 *
+		 * @param {Function} fn The function to be run.
+		 */
+		const ready = (fn) => {
+			if (document.readyState != 'loading') fn()
+			else document.addEventListener('DOMContentLoaded', fn)
+		}
+
+		/**
+		 * Enables or disables the provided form element, depending on its current state.
+		 *
+		 * In this case we disable a form by adding the "disabled" class and setting the `disabled`
+		 * property to `true` on all its child form elements, and enable by doing the opposite.
+		 *
+		 * @param {HTMLElement} $form The form element to toggle.
+		 */
+		const toggleForm = ($form) => {
+			const $formElements = $form.querySelectorAll('input, textarea, select, button')
+			if ($form.classList.contains('disabled')) {
+				$form.classList.remove('disabled')
+				$formElements.forEach(($el) => $el.disabled = false)
+			} else {
+				$form.classList.add('disabled')
+				$formElements.forEach(($el) => $el.disabled = true)
+			}
+		}
+
+		// ============================================================================================
+		// APPLICATION METHODS
+		// ============================================================================================
+
+		// Set DOM variables that we'll reference in the following methods thanks to lexical scoping.
+		const $apiSettingsForm = document.getElementById('bif-sso__auth-api-settings')
+		const $apiSettingsFieldDomain = document.getElementById('bif-sso__auth-api-settings__domain')
+		const $apiSettingsFieldClientId = document.getElementById('bif-sso__auth-api-settings__client-id')
+		const $apiSettingsAlertMessage = document.getElementById('bif-sso__auth-api-settings__alert-message')
+
+		/**
+		 * Updates the alert message placeholder with the provided message and type.
+		 *
+		 * Expected types are "error" or "success". Default is "notification" and has no special style.
+		 *
+		 * @param {String}  message      The message that should be displayed.
+		 * @param {String} messageType? The message type, from the list above.
+		 */
+		const alertMessage = (message, messageType = 'notification') => {
+			const filteredClassNames = $apiSettingsAlertMessage.className
+				.split(' ')
+				.filter((className) => !className.startsWith('bif-sso__auth-api-settings__alert-message--'))
+			if (message) filteredClassNames.push(`bif-sso__auth-api-settings__alert-message--${messageType}`)
+			$apiSettingsAlertMessage.className = filteredClassNames.join(' ').trim()
+			$apiSettingsAlertMessage.innerHTML = message
+		}
+
+		/**
+		 * Validates that the required settings exist and aren't falsey.
+		 *
+		 * @param {Object} settings An object containing the settings.
+		 */
+		const areValidSettings = (settings) => {
+			return settings && settings.domain && settings.clientId
+		}
+
+		/**
+		 * Prefills the settings form with the provided values, if they're set.
+		 *
+		 * @param {Object} settings An object containing the settings.
+		 */
+		const prefillSettingsForm = (settings) => {
+			$apiSettingsFieldDomain.value = settings.domain || ''
+			$apiSettingsFieldClientId.value = settings.clientId || ''
+		}
+
+		/**
+		 * Saves the settings to the remote BuildFire datastore.
+		 *
+		 * TODO: Make this a Promise, probably.
+		 *
+		 * @param {Object} settings An object containing the settings.
+		 */
+		const saveSettings = (settings) => {
+			toggleForm($apiSettingsForm)
+			buildfire.datastore.save(settings, 'bif__sso__auth_api_settings', (err, status) => {
+				toggleForm($apiSettingsForm)
+				if (err || !status) alertMessage('❌ Unable to save settings', 'error')
+				else alertMessage('✅ Settings saved!', 'success')
+			})
+		}
+
+		/**
+		 * Handler for the form submission that saves to the BuildFire datastore.
+		 *
+		 * @param {SubmitEvent} e The native submit event fired by the browser.
+		 */
+		const handleSettingsFormSubmit = (e) => {
+			// Stop the native form submission
+			e.preventDefault()
+
+			// Clear the alert message
+			alertMessage('')
+
+			const settings = {
+				domain: $apiSettingsFieldDomain.value,
+				clientId: $apiSettingsFieldClientId.value,
+			}
+
+			if (areValidSettings(settings)) saveSettings(settings)
+			else alertMessage('❌ Please provide a valid domain and client ID.', 'error')
+		}
+
+		// ============================================================================================
+		// INIT/START
+		// ============================================================================================
+
+		ready(() => {
+			$apiSettingsForm.addEventListener('submit', handleSettingsFormSubmit)
+
+			// Fetch and prefill the existing auth API settings.
+			buildfire.datastore.get('bif__sso__auth_api_settings', (err, data) => {
+				// An error here means interacting with BuildFire failed, not just that data doesn't exist.
+				if (err) alertMessage('Error fetching existing API settings from BuildFire.', 'error')
+				else if (data.data) prefillSettingsForm(data.data)
+			})
+		})
+	</script>
+</body>
+</html>
diff --git a/ssoPlugin/plugin.json b/ssoPlugin/plugin.json
new file mode 100644
index 0000000..00d8a28
--- /dev/null
+++ b/ssoPlugin/plugin.json
@@ -0,0 +1,21 @@
+{
+  "author": "Bad Idea Factory",
+  "pluginName": "SSO Management",
+  "pluginDescription": "Allow users to sign into your application.",
+  "supportEmail": "biffuddotcom@biffud.com",
+  "control": {
+    "content": {
+      "enabled": false
+    },
+    "design": {
+      "enabled": false
+    },
+    "settings": {
+      "enabled": true
+    }
+  },
+  "widget": {
+  },
+  "features": [],
+  "languages": ["en"]
+}
\ No newline at end of file
diff --git a/ssoPlugin/widget/index.html b/ssoPlugin/widget/index.html
new file mode 100644
index 0000000..9068c58
--- /dev/null
+++ b/ssoPlugin/widget/index.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<!-- The BuildFire JS library is required. -->
+	<script src="../../../scripts/buildfire.min.js"></script>
+	<!-- The Auth0 SPA library is used for authentication negotiation. -->
+	<script src="https://cdn.auth0.com/js/auth0-spa-js/1.9/auth0-spa-js.production.js"></script>
+	<style type="text/css">
+		#bif-sso__wrapper {
+			padding: 1em;
+		}
+
+		#bif-sso__banner {
+			background-color: #222;
+			color: white;
+			text-align: center;
+			padding: 0.5em;
+			text-transform: uppercase;
+			font-size: 0.9em;
+			font-weight: 500;
+			margin: 0;
+		}
+
+		.bif-sso__content {
+			display: none;
+		}
+		.uninitialized #bif-sso__content--uninitialized,
+		.unauthenticated #bif-sso__content--unauthenticated,
+		.authenticated #bif-sso__content--authenticated {
+			display: initial;
+		}
+
+		#bif-sso__alert-message {
+			padding: 1em;
+			background-color: #ffd;
+		}
+		#bif-sso__alert-message:empty {
+			padding: 0;
+		}
+		.bif-sso__alert-message--success {
+			color: #00b500;
+		}
+		.bif-sso__alert-message--error {
+			color: #ec0000;
+		}
+	</style>
+</head>
+<body class="uninitialized">
+
+	<div id="bif-sso__banner">Widget - SSO</div>
+
+	<div id="bif-sso__wrapper">
+		<div id="bif-sso__alert-message"></div>
+
+		<div id="bif-sso__content--uninitialized" class="bif-sso__content">
+			<p>Initializing...</p>
+		</div>
+
+		<div id="bif-sso__content--unauthenticated" class="bif-sso__content">
+			<p>Click the button below to authenticate.</p>
+			<button id="bif-sso__login-button">Log In</button>
+		</div>
+
+		<div id="bif-sso__content--authenticated" class="bif-sso__content">
+			<p>Successfully authenticated!</p>
+		</div>
+	</div>
+
+	<script type="text/javascript">
+		// ============================================================================================
+		// UTILITY METHODS
+		// ============================================================================================
+
+		/**
+		 * Runs the provided function when the document is fully loaded.
+		 *
+		 * @param {Function} fn The function to be run.
+		 */
+		const ready = (fn) => {
+			if (document.readyState != 'loading') fn()
+			else document.addEventListener('DOMContentLoaded', fn)
+		}
+
+		/**
+		 * Saves the provided data object to the browser's localStorage using the BuildFire library.
+		 *
+		 * @param   {Object}  data An object containing the data to save.
+		 * @returns {Promise}      Resolves with boolean true, rejects with an error message.
+		 */
+		const saveToLocalStorage = (data) => new Promise((resolve, reject) => {
+			buildfire.localStorage.setItem('@bif/sso', data, (err, result) => {
+				if (err || !result) reject('There was a problem saving to local storage.')
+				else resolve(true)
+			})
+		})
+
+		// ============================================================================================
+		// APPLICATION METHODS
+		// ============================================================================================
+
+		// Set DOM variables that we'll reference in the following methods thanks to lexical scoping.
+		const $body = document.querySelector('body')
+		const $alertMessage = document.getElementById('bif-sso__alert-message')
+		const $loginButton = document.getElementById('bif-sso__login-button')
+
+		/**
+		 * Marks the completion of initialization by changing some body classes.
+		 */
+		const initComplete = () => {
+			$body.classList.remove('uninitialized')
+			$body.classList.add('initialized')
+		}
+
+		/**
+		 * Updates the alert message placeholder with the provided message and type.
+		 *
+		 * Expected types are "error" or "success". Default is "notification" and has no special style.
+		 *
+		 * @param {String}  message      The message that should be displayed.
+		 * @param {String} messageType? The message type, from the list above.
+		 */
+		const alertMessage = (message, messageType = 'notification') => {
+			const filteredClassNames = $alertMessage.className
+				.split(' ')
+				.filter((className) => !className.startsWith('bif-sso__alert-message--'))
+			if (message) filteredClassNames.push(`bif-sso__alert-message--${messageType}`)
+			$alertMessage.className = filteredClassNames.join(' ').trim()
+			$alertMessage.innerHTML = message
+		}
+
+		/**
+		 * Validates that the required settings exist and aren't falsey.
+		 *
+		 * @param {Object} settings An object containing the settings.
+		 */
+		const areValidSettings = (settings) => {
+			return settings && settings.domain && settings.clientId
+		}
+
+		/**
+		 * Gets and validates the authentication API settings from the BuildFire datastore.
+		 *
+		 * @returns {Promise} Resolves with the settings object, rejects with an error message.
+		 */
+		const getAuthApiSettings = () => new Promise((resolve, reject) => {
+			buildfire.datastore.get('bif__sso__auth_api_settings', (err, data) => {
+				if (err) reject('Could not fetch auth API settings.')
+				else {
+					const settings = data.data
+					if (areValidSettings(settings)) resolve(settings)
+					else reject('Fetched invalid API settings.')
+				}
+			})
+		})
+
+		/**
+		 * Checks authentication status against the Auth0 API using the provided settings object.
+		 *
+		 * @returns {Promise} Resolves with an object that contains both the isAuthenticated boolean
+		                      value and the API client object, rejects with the API error response.
+		 */
+		const checkAuthenticationStatus = (authApiSettings) => new Promise((resolve, reject) => {
+			createAuth0Client({
+				domain: authApiSettings.domain,
+				client_id: authApiSettings.clientId,
+				// cacheLocation: 'localstorage',
+			})
+				.then(auth0 => {
+					auth0.isAuthenticated()
+						.then((isAuthenticated) => resolve({ isAuthenticated, auth0 }))
+						.catch((error) => reject(error))
+				})
+				.catch((error) => reject(error))
+		})
+
+		/**
+		 * Provided an Auth0 API client, gets the active user object and stores it in localStorage.
+		 *
+		 * @returns {Promise} Resolves true, or rejects with an error message.
+		 */
+		const getAndStoreUser = (auth0) => new Promise((resolve, reject) => {
+			auth0.getUser()
+				.then((user) => {
+					saveToLocalStorage({ user })
+						.then(() => resolve(true))
+						.catch((error) => reject('There was a problem storing your authentication data.'))
+				})
+				.catch((error) => reject(error))
+		})
+
+		/**
+		 * Handles a confirmed authentication by trying to get/store the user object and then
+		 * navigating to the RSS plugin.
+		 */
+		const handleAuthenticated = (auth0) => {
+			$body.classList.remove('unauthenticated')
+
+			getAndStoreUser(auth0)
+				.then(() => {
+					$body.classList.add('authenticated')
+					goToRss()
+				})
+				.catch((error) => alertMessage(`${error} Please try again.`, 'error'))
+				.finally(() => initComplete())
+		}
+
+		/**
+		 * Handles a confirmed lack of authentication by cleaning up the DOM and binding login actions
+		 * to the login button.
+		 */
+		const handleUnauthenticated = (auth0) => {
+			initComplete()
+			$body.classList.add('unauthenticated')
+
+			$loginButton.addEventListener('click', (e) => {
+				e.preventDefault()
+
+				$loginButton.disabled = true
+
+				auth0.loginWithPopup()
+					.then(() => handleAuthenticated(auth0))
+					.catch((error) => alertMessage('There was a problem trying to log you in.', error))
+					.finally(() => $loginButton.disabled = false)
+			})
+		}
+
+		/**
+		 * Navigates the user to the RSS Plugin.
+		 *
+		 * This currently does not work because the BuildFire SDK throws an inscrutable error, so
+		 * temporarily just telling the user to navigate to the user. Will fix.
+		 */
+		const goToRss = () => {
+			// TODO: Figure out:
+			//       (1) why this doesn't seem to work in the SDK, and
+			//       (2) how we can navigate reliably to the RSS Plugin.
+			// buildfire.navigation.navigateTo({
+			// 	pluginId: 'rssPlugin',
+			// 	instanceId: '1591887442595-005759697297339572',
+			// 	title: 'RSS Plugin',
+			// })
+			// Thus, this very temporary workaround:
+			const tempMessage = document.createTextNode("Please navigate to the RSS Plugin. (The BuildFire SDK environment doesn't support navigating there automatically.)")
+			const tempMessageWrapper = document.createElement('P')
+			tempMessageWrapper.appendChild(tempMessage)
+			document.getElementById('bif-sso__content--authenticated').appendChild(tempMessageWrapper)
+		}
+
+		// ============================================================================================
+		// INIT/START
+		// ============================================================================================
+
+		ready(() => {
+			getAuthApiSettings()
+				.then((settings) => {
+					checkAuthenticationStatus(settings)
+						.then(({ isAuthenticated, auth0 }) => {
+							if (isAuthenticated) handleAuthenticated(auth0)
+							else handleUnauthenticated(auth0)
+						})
+						.catch((error) => {
+							initComplete()
+							alertMessage(
+								`There was a problem communicating with the authentication server. \
+								 Please try again. (Error: ${error.error_description})`,
+								'error'
+							)
+						})
+				})
+				.catch((error) => {
+					initComplete()
+					alertMessage(error, 'error')
+				})
+		})
+	</script>
+</body>
+</html>
\ No newline at end of file
