io3fix
Version:
toolkit for interior apps
203 lines (175 loc) • 7.61 kB
JavaScript
import runtime from '../../core/runtime.js'
import getSession from '../auth/get-session.js'
import listPublishableApiKeys from '../auth/list-publishable-api-keys.js'
import generatePublishableApiKey from '../auth/generate-publishable-api-key.js'
import revokePublishableApiKey from '../auth/revoke-publishable-api-key.js'
import updatePublishableApiKeyDomains from '../auth/update-publishable-api-key-domains.js'
import el from './common/dom-el.js'
import createOverlay from './common/create-overlay.js'
import message from './create-message-ui.js'
import createPromptUi from './create-prompt-ui.js'
import createConfirmUi from './create-confirm-ui.js'
import createSignUpUi from './create-sign-up-ui.js'
// configs
var CSS_WIDTH = 'width:620px;'
// main
export default function createPublishableApiKeysUi (a, b) {
runtime.assertBrowser()
return getSession().then(function (session) {
if (!session.isAuthenticated) {
// show sign up screen
message('Please sign up or log in to<br>access your publishable API keys.')
return createSignUpUi().then(function () {
return createPublishableApiKeysUi()
})
}
return new Promise(function (resolve, reject) {
// overlay
var overlay = createOverlay().show()
// close button
el('<div>', {
text: 'x',
class: 'button close-button',
click: cancel
}).appendTo(overlay.mainEl)
// centered
var centerEl = el('<div>', {
class: 'publishable-api-keys',
style:CSS_WIDTH
}).appendTo(overlay.centerEl)
el('<h1>', {html: 'Publishable API Keys'}).appendTo(centerEl)
var listEl = el('<div>', {class: 'list'}).appendTo(centerEl)
listPublishableApiKeys().then(function onSuccess (list) {
// create html elements for every key
list.forEach(function (item) {
var containerEl = el('<div>', {
class: 'key-item'
}).appendTo(listEl)
var keyEl = el('<input>', {
class: 'key',
type: 'text',
value: item.key
}).appendTo(containerEl)
keyEl.addEventListener('click', keyEl.select)
el('<div>', {
class: 'hint domains',
html: 'Domains: ' + item.allowedDomains.join(' ')
}).appendTo(containerEl)
el('<div>', {
class: 'button delete-key-button',
html: 'x',
click: function () {
destroy(function(){
createConfirmUi({
width: 500,
title: 'Delete Publishable API Key ?',
message: 'This action can not be undone.<br><br>Key:<br><b>'+item.key+'</b><br><br>Allowed domains:<br><b>'+item.allowedDomains.join(' ')+'</b>'
}).then(function(isConfirmed){
if (isConfirmed) {
return revokePublishableApiKey({ key: item.key }).then(function(){
message.success('Deleted publishable API key<br>'+item.key)
})
}
}).then(function(){
// return to publishable api key ui
createPublishableApiKeysUi().then(resolve, reject)
}).catch(function(error){
message.error('Error deleting publishable API key<br>'+error)
// return to publishable api key ui
createPublishableApiKeysUi().then(resolve, reject)
})
})
}
}).appendTo(containerEl)
el('<div>', {
class: 'button edit-domains-button',
html: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" enable-background="new 0 0 40 40"><style type="text/css">.st0{fill:none;stroke:#fff;stroke-miterlimit:10;}</style><line class="st0" x1="14" y1="25.8" x2="28.6" y2="11.2"/><polygon class="st0" points="8.4,31.6 10.1,24.1 25.8,8.4 31.5,14.1 15.8,29.8"/></svg>',
click: function () {
destroy(function () {
// ask user for allowed domains
createPromptUi({
title: 'Allowed Domains',
message: 'Publishable API key:<br><b>'+item.key+'</b><br><br>Please specify allowed domains separated by empty space.<br>Example: "localhost *.3d.io mypage.com"',
bottom: el('<a>', {
html: 'Read more about allowed domains',
href: 'https://3d.io/docs/api/1/authentication.html',
target: '_blank'
}),
value: item.allowedDomains.join(' ')
}).then(function (result) {
// update key if user has confirmed
if (result || result === '') {
return updatePublishableApiKeyDomains({
key: item.key,
allowedDomains: result.split(' ')
}).then(function(){
message.success('Updated allowed domains to:<br>'+result)
})
}
}).then(function () {
// return to publishable api key ui
createPublishableApiKeysUi().then(resolve, reject)
}).catch(function(error){
message.error('Error updating publishable API key:<br>'+error)
// return to publishable api key ui
createPublishableApiKeysUi().then(resolve, reject)
})
})
}
}).appendTo(containerEl)
})
})
el('<div>', {
class: 'generate-new-key-button',
html: 'Generate new key',
click: function () {
destroy(function () {
// ask user for allowed domains
createPromptUi({
width: 550,
title: 'Generate Publishable Api Key',
message: 'Please specify allowed domains separated by empty space.<br>Example: localhost *.3d.io mypage.com',
bottom: el('<a>', {
html: 'Read more about allowed domains',
href: 'https://3d.io/docs/api/1/authentication.html',
target: '_blank'
})
}).then(function (result) {
// generate key if user has confirmed
if (result || result === '') {
return generatePublishableApiKey({allowedDomains: result.split(' ')}).then(function(key){
message.success('Generated new publishable API key<br>'+key)
})
}
}).then(function () {
// return to publishable api key ui
createPublishableApiKeysUi().then(resolve, reject)
}).catch(function(error){
message.error('Error generating publishable API key:<br>'+error)
// return to publishable api key ui
createPublishableApiKeysUi().then(resolve, reject)
})
})
}
}).appendTo(centerEl)
// stuff at the bottom
el('<a>', {
class: 'clickable',
style: 'display:block;'+CSS_WIDTH,
html: 'Read documentaion about publishable API keys.',
href: 'https://3d.io/docs/api/1/authentication.html',
target: '_blank'
}).appendTo(overlay.bottomEl)
// methods
function cancel () {
destroy(function () {
resolve(false)
})
}
function destroy (callback) {
// remove DOM elements
overlay.destroy(callback)
}
})
})
}