diff --git a/src/assets/javascripts/components/interactive.js b/src/assets/javascripts/components/interactive.js index 6112885..7c4da8d 100644 --- a/src/assets/javascripts/components/interactive.js +++ b/src/assets/javascripts/components/interactive.js @@ -1,115 +1,155 @@ -function InfoCard({element, onChange, index}) { +function InfoCard({ element, onChange, index }) { let $editBtn = element.querySelector('[data-action="edit"]'); let $cancelBtn = element.querySelector('[data-action="cancel"]'); - let $editModeBtns = element.querySelector('.disable-editing'); - let $editEnableBtns = element.querySelector('.enable-editing'); - let $staticDataWrapper = element.querySelector('.card-footer__static-data'); - let $dynamicDataWrapper = element.querySelector('.card-footer__dynamic-data'); + let $editModeBtns = element.querySelector(".disable-editing"); + let $editEnableBtns = element.querySelector(".enable-editing"); + let $staticDataWrapper = element.querySelector(".card-footer__static-data"); + let $dynamicDataWrapper = element.querySelector(".card-footer__dynamic-data"); const showEditMode = () => { - $editBtn?.classList.replace('d-block', 'd-none'); - $editEnableBtns?.classList.replace('d-block', 'd-none'); - $editModeBtns?.classList.replace('d-none', 'd-block'); - $staticDataWrapper?.classList.replace('d-block', 'd-none'); - $dynamicDataWrapper?.classList.replace('d-none', 'd-block'); - onChange({index, state: true}); + $editBtn?.classList.replace("d-block", "d-none"); + $editEnableBtns?.classList.replace("d-block", "d-none"); + $editModeBtns?.classList.replace("d-none", "d-block"); + $staticDataWrapper?.classList.replace("d-block", "d-none"); + $dynamicDataWrapper?.classList.replace("d-none", "d-block"); + onChange({ index, state: true }); }; const hideEditMode = () => { - $editModeBtns?.classList.replace('d-block', 'd-none'); - $editBtn?.classList.replace('d-none', 'd-block'); - $editEnableBtns?.classList.replace('d-none', 'd-block'); - $staticDataWrapper?.classList.replace('d-none', 'd-block'); - $dynamicDataWrapper?.classList.replace('d-block', 'd-none'); - onChange({index, state: false}); - } + $editModeBtns?.classList.replace("d-block", "d-none"); + $editBtn?.classList.replace("d-none", "d-block"); + $editEnableBtns?.classList.replace("d-none", "d-block"); + $staticDataWrapper?.classList.replace("d-none", "d-block"); + $dynamicDataWrapper?.classList.replace("d-block", "d-none"); + onChange({ index, state: false }); + }; const bindEvents = () => { - $editBtn?.addEventListener('click', showEditMode); - $cancelBtn?.addEventListener('click', hideEditMode); + $editBtn?.addEventListener("click", showEditMode); + $cancelBtn?.addEventListener("click", hideEditMode); }; bindEvents(); return { showEditMode, - hideEditMode + hideEditMode, }; -}; +} -function Toggle({element, onChange, index, contentWrapper, stepsSelector, contentSelector }) { +function Toggle({ + element, + onChange, + index, + contentWrapper, + stepsSelector, + contentSelector, +}) { let stepsCollection = element.querySelectorAll(`${stepsSelector} .step`); - let contentCollection = contentWrapper[index].querySelectorAll(contentSelector); + let contentCollection = + contentWrapper[index].querySelectorAll(contentSelector); function handleContent(i, stepsCollection, contentCollection) { - onChange({ stepIndex: i, stepsCollection, contentCollection}); + onChange({ stepIndex: i, stepsCollection, contentCollection }); } const bindEvents = () => { stepsCollection.forEach((s, i) => { - s.addEventListener('click', handleContent.bind(null, i, stepsCollection, contentCollection), false); - }) + s.addEventListener( + "click", + handleContent.bind(null, i, stepsCollection, contentCollection), + false, + ); + }); }; - const init = () => { + const init = () => { bindEvents(); }; init(); - } - - - - export function Interactive({cardSelector, stepsSelector, contentsSelector, contentSelector}) { +} +export function Interactive({ + cardSelector, + stepsSelector, + contentsSelector, + contentSelector, +}) { let infoCardsCollection = document.querySelectorAll(cardSelector); let stepsWrapper = document.querySelectorAll(stepsSelector); let contentWrapper = document.querySelectorAll(contentsSelector); - const onCardToggles = ({index}) => { - if(stepsWrapper) { + const onCardToggles = ({ index }) => { + if (stepsWrapper) { stepsWrapper.forEach((instance, i) => { - if(index !== i) { + if (index !== i) { instance.hideEditMode(); - }; + } }); } }; - const toggleSections = ({ stepIndex, stepsCollection, contentCollection}) => { - contentCollection?.forEach(c => { - c.classList.replace('d-block', 'd-none'); - contentCollection[stepIndex].classList.replace('d-none', 'd-block'); + const toggleSections = ({ + stepIndex, + stepsCollection, + contentCollection, + }) => { + contentCollection?.forEach((c) => { + c.classList.replace("d-block", "d-none"); + contentCollection[stepIndex].classList.replace("d-none", "d-block"); }); - stepsCollection?.forEach(s => { - s.classList.remove('active'); - stepsCollection[stepIndex].classList.add('active'); + stepsCollection?.forEach((s) => { + s.classList.remove("active"); + stepsCollection[stepIndex].classList.add("active"); let footer = document.querySelector("footer"); let activeTab = stepsCollection[stepIndex]; let redoc = document.getElementById("redoc-wrapper"); if (activeTab && activeTab.innerHTML != "API SPECIFICATIONS") { footer.style.marginTop = "0px"; - }else if (activeTab && activeTab.innerHTML == "API SPECIFICATIONS" && redoc){ + } else if ( + activeTab && + activeTab.innerHTML == "API SPECIFICATIONS" && + redoc + ) { footer.style.marginTop = redoc.clientHeight + "px"; } }); }; const init = () => { - infoCardsCollection.forEach((el, index) => InfoCard({element: el, onChange: onCardToggles, index})); - stepsWrapper.forEach((el, index) => Toggle({element: el, onChange: toggleSections, index, contentWrapper, stepsSelector, contentSelector})); + infoCardsCollection.forEach((el, index) => + InfoCard({ element: el, onChange: onCardToggles, index }), + ); + stepsWrapper.forEach((el, index) => + Toggle({ + element: el, + onChange: toggleSections, + index, + contentWrapper, + stepsSelector, + contentSelector, + }), + ); }; init(); } - function isOAS(value) { return /^.*\.(json|yaml|yml)$/i.test(value); } function isRedoc(value) { - return value === "product_doc_redoc" + return value === "product_doc_redoc"; +} + +function isStoplight(value) { + return value === "product_doc_stoplight_spec"; +} + +function isAsyncApi(value) { + return value === "product_doc_asyncapi"; } function handleContent(element, content) { @@ -118,81 +158,191 @@ function handleContent(element, content) { } element.appendChild(content); } + function getURLValue(urlArr) { - if (urlArr.length > 1 ) { + if (urlArr.length > 1) { return urlArr.join("-"); } return urlArr[0]; } -export function HandleApiSpecSelect({selectorId, downloadSelectorId, displaySelectorId}) { +export function HandleApiSpecSelect({ + selectorId, + downloadSelectorId, + displaySelectorId, +}) { let selector = document.getElementById(selectorId); let downloadSelector = document.getElementById(downloadSelectorId); let displaySelector = document.getElementById(displaySelectorId); - let oasTemplate = selector?.getAttribute("data-template"); + let oasTemplate = + selector?.options[selector.selectedIndex]?.getAttribute("data-template"); let path = downloadSelector?.getAttribute("data-path"); - let [, ...docURL] = selector && selector.value ? selector.value.split("-") : []; + let [, ...docURL] = + selector && selector.value ? selector.value.split("-") : []; let tmplIsRedoc = isRedoc(oasTemplate); + let tmplIsAsyncApi = isAsyncApi(oasTemplate); + let tmplIsStoplight = isStoplight(oasTemplate); let url = getURLValue(docURL); - if (selector && isOAS(url) && tmplIsRedoc) { - initRedoc(url); - } - selector?.addEventListener('change', (e) => { + + if (selector && isOAS(url)) { + if (tmplIsRedoc) { + initRedoc(url); + } else if (tmplIsAsyncApi) { + initAsyncApi(url); + } else if (tmplIsStoplight) { + initStoplight(url); + } + } + + selector?.addEventListener("change", (e) => { + let oasTemplate = + selector?.options[selector.selectedIndex]?.getAttribute("data-template"); + let tmplIsRedoc = isRedoc(oasTemplate); + let tmplIsAsyncApi = isAsyncApi(oasTemplate); + let tmplIsStoplight = isStoplight(oasTemplate); + let [apiID, ...docURL] = e.target.value.split("-"); let url = getURLValue(docURL); downloadSelector.action = `${path}/${apiID}/docs/download`; - if (tmplIsRedoc && isOAS(url)) { + + if (!isOAS(url)) return; + + if (tmplIsRedoc) { initRedoc(url); - return + } else if (tmplIsAsyncApi) { + initAsyncApi(url); + } else if (tmplIsStoplight) { + initStoplight(url); } - let elementsApi = document.createElement('elements-api'); - elementsApi.setAttribute('apiDescriptionUrl', url); - elementsApi.setAttribute('router', 'hash'); - elementsApi.setAttribute('layout', 'responsive'); - elementsApi.setAttribute('hideExport', 'true'); - handleContent(displaySelector, elementsApi); }); } +function hideAllElements(apiDocWrapper) { + if (apiDocWrapper) { + Array.from(apiDocWrapper.children).forEach((child) => { + child.style.display = "none"; + }); + } +} + +function getOrCreateWrapper(apiDocWrapper, wrapperId) { + let existingWrapper = document.getElementById(wrapperId); + let wrapper; + + if (!existingWrapper) { + wrapper = document.createElement("div"); + wrapper.id = wrapperId; + apiDocWrapper.appendChild(wrapper); + } else { + wrapper = existingWrapper; + wrapper.style.display = "block"; + } + return wrapper; +} function initRedoc(url) { - let wrapper = document.getElementById("redoc-wrapper"); + let apiDocWrapper = document.getElementById("api_doc_wrapper"); + + hideAllElements(apiDocWrapper); + + let wrapper = getOrCreateWrapper(apiDocWrapper, "redoc-wrapper"); + if (Redoc) { - Redoc.init(url, { - scrollYOffset: ".navbar", - }, wrapper, (redoc) => { - let footer = document.querySelector("footer"); - let activeTab = document.querySelector(".step.active.tab"); - if (activeTab?.innerHTML == "API SPECIFICATIONS") { - footer.style.marginTop = wrapper.clientHeight + "px"; - } - }) + Redoc.init( + url, + { + scrollYOffset: ".navbar", + }, + wrapper, + (redoc) => { + let footer = document.querySelector("footer"); + let activeTab = document.querySelector(".step.active.tab"); + if (activeTab?.innerHTML == "API SPECIFICATIONS") { + footer.style.marginTop = wrapper.clientHeight + "px"; + } + }, + ); + } +} + +function initAsyncApi(url) { + let apiDocWrapper = document.getElementById("api_doc_wrapper"); + + hideAllElements(apiDocWrapper); + + let wrapper = getOrCreateWrapper(apiDocWrapper, "asyncapi"); + + if (AsyncApiStandalone) { + AsyncApiStandalone.render( + { + schema: { + url: url, + options: { method: "GET", mode: "cors" }, + }, + config: { + show: { + sidebar: false, + info: true, + operations: true, + servers: true, + messages: true, + schemas: true, + errors: true, + }, + expand: { + messageExamples: false, + }, + sidebar: { + showServers: "byDefault", + showOperations: "byDefault", + }, + }, + }, + wrapper, + ); } } +function initStoplight(url) { + let apiDocWrapper = document.getElementById("api_doc_wrapper"); + + hideAllElements(apiDocWrapper); + + let wrapper = getOrCreateWrapper(apiDocWrapper, "oas-display-stoplight"); + + let elementsApi = document.createElement("elements-api"); + elementsApi.setAttribute("apiDescriptionUrl", url); + elementsApi.setAttribute("router", "hash"); + elementsApi.setAttribute("layout", "responsive"); + elementsApi.setAttribute("hideExport", "true"); + handleContent(wrapper, elementsApi); +} + export function HandleTruncateText(selectorWrapper, selector, attribute) { let elementWrapper = document.querySelectorAll(selectorWrapper); - elementWrapper?.forEach(element => { + elementWrapper?.forEach((element) => { let textElement = element.querySelector(selector); let maxHeight = element.style.maxHeight; - if (textElement && textElement.getAttribute(attribute) != textElement.innerText) { - element.addEventListener('mouseover', function () { + if ( + textElement && + textElement.getAttribute(attribute) != textElement.innerText + ) { + element.addEventListener("mouseover", function () { handleTextExpand(textElement, attribute); - element.style.maxHeight = 'none'; - + element.style.maxHeight = "none"; }); - - element.addEventListener('mouseout', function () { + + element.addEventListener("mouseout", function () { handleTextExpand(textElement, attribute); element.style.maxHeight = maxHeight; }); } - }) + }); } function handleTextExpand(textElement, attribute) { let data = textElement?.getAttribute(attribute); textElement.setAttribute(attribute, textElement.innerText); textElement.innerText = data; -} \ No newline at end of file +} diff --git a/src/layouts/portal_layout.tmpl b/src/layouts/portal_layout.tmpl index e4f1fc4..33466e5 100644 --- a/src/layouts/portal_layout.tmpl +++ b/src/layouts/portal_layout.tmpl @@ -23,7 +23,7 @@ })(window,document,'script','dataLayer','GTM-NGN82WCD'); {{end}} - + + + + + @@ -53,7 +57,7 @@ - + {{if not $isAuth}} {{ render "top_nav" . }} {{end}} diff --git a/src/layouts/product_layout_doc_asyncapi.tmpl b/src/layouts/product_layout_doc_asyncapi.tmpl new file mode 100644 index 0000000..a1f526f --- /dev/null +++ b/src/layouts/product_layout_doc_asyncapi.tmpl @@ -0,0 +1,31 @@ + + + + + + + + + + {{.product.Name}}: {{.api.Name}} Documentation + + + + + + + + + + + + + + +{{ render "top_nav" . }} + + {{ yield }} +{{ render "footer" . }} + + + \ No newline at end of file diff --git a/src/mailers/keyexpired.html.tmpl b/src/mailers/keyexpired.html.tmpl new file mode 100644 index 0000000..2776ec7 --- /dev/null +++ b/src/mailers/keyexpired.html.tmpl @@ -0,0 +1,51 @@ + + + + + + Credential Expiring Soon + + + +
+
+ Credential Expired +
+
+

Hi {{.user.First}},

+

Your credential {{.credential.CredentialHash}} is expired.

+
+
+

Regards,

+

The Team

+
+
+ + \ No newline at end of file diff --git a/src/mailers/keyexpired.text.tmpl b/src/mailers/keyexpired.text.tmpl new file mode 100644 index 0000000..3b83d62 --- /dev/null +++ b/src/mailers/keyexpired.text.tmpl @@ -0,0 +1,7 @@ +Hi {{.user.First}}, + +Your credential {{.credential.CredentialHash}} is expired. + +Regards, + +The Team diff --git a/src/mailers/keyexpired.tmpl b/src/mailers/keyexpired.tmpl new file mode 100644 index 0000000..3b83d62 --- /dev/null +++ b/src/mailers/keyexpired.tmpl @@ -0,0 +1,7 @@ +Hi {{.user.First}}, + +Your credential {{.credential.CredentialHash}} is expired. + +Regards, + +The Team diff --git a/src/mailers/keytoexpire.html.tmpl b/src/mailers/keytoexpire.html.tmpl new file mode 100644 index 0000000..8a217a4 --- /dev/null +++ b/src/mailers/keytoexpire.html.tmpl @@ -0,0 +1,51 @@ + + + + + + Credential Expiring Soon + + + +
+
+ Credential Expiring Soon +
+
+

Hi {{.user.First}},

+

Your credential {{.credential.CredentialHash}} is expiring soon. Please log in to the developer portal to renew it.

+
+
+

Regards,

+

The Team

+
+
+ + \ No newline at end of file diff --git a/src/mailers/keytoexpire.text.tmpl b/src/mailers/keytoexpire.text.tmpl new file mode 100644 index 0000000..bc2e5df --- /dev/null +++ b/src/mailers/keytoexpire.text.tmpl @@ -0,0 +1,7 @@ +Hi {{.user.First}}, + +Your credential {{.credential.CredentialHash}} is expiring soon, please log in to the developer portal to renew it. + +Regards, + +The Team diff --git a/src/mailers/keytoexpire.tmpl b/src/mailers/keytoexpire.tmpl new file mode 100644 index 0000000..bc2e5df --- /dev/null +++ b/src/mailers/keytoexpire.tmpl @@ -0,0 +1,7 @@ +Hi {{.user.First}}, + +Your credential {{.credential.CredentialHash}} is expiring soon, please log in to the developer portal to renew it. + +Regards, + +The Team diff --git a/src/views/app_form_update.tmpl b/src/views/app_form_update.tmpl index 5ca0951..029d8a8 100644 --- a/src/views/app_form_update.tmpl +++ b/src/views/app_form_update.tmpl @@ -134,6 +134,52 @@ {{end}} {{ range $app.Credentials }} + {{ if eq .CredentialType "CREDENTIAL_TYPE_CUSTOM" }} +
+
+
+
+
+

Access and Credentials info

+
+
+
+
+
+
+ Key + A unique ID used to identify the application. +
+
+ + +
+
+
+
+
+
+ Secret + This is the unique password for the app and auth server, do not share this information. +
+
+ + +
+
+
+
+
+
+ Expires: +
+
+ {{ .ExpiresAsString }} +
+
+
+
+ {{ else }}
@@ -205,7 +251,7 @@ A unique ID used to identify the application.
- +
@@ -522,6 +568,7 @@
+ {{end}} {{end}}
diff --git a/src/views/portal_product_detail.tmpl b/src/views/portal_product_detail.tmpl index 4bbfa37..05fc671 100644 --- a/src/views/portal_product_detail.tmpl +++ b/src/views/portal_product_detail.tmpl @@ -9,6 +9,7 @@ {{ $initialAPI := index $thisProduct.APIDetails 0}} {{ $initialAPIOasUrl := ""}} {{ $initialAPIID := ""}} +{{ $initialTemplate := ""}} {{ range $thisProduct.APIDetails }} {{ $oasfile := gt (.OASDocument.Base.Url | trim | length) 0 }} {{ $oasurl := gt (.OASUrl | trim | length) 0 }} @@ -17,6 +18,7 @@ {{ end }} {{ end }} {{ $redoc := "product_doc_redoc" }} +{{ $asyncapi := "product_doc_asyncapi" }}
@@ -139,7 +141,7 @@

{{ $api.Name }}

-

Listen path: +

Listen path: {{ $api.ListenPath }}

@@ -190,7 +192,7 @@ {{end}} {{else}} - +
{{end}} - + {{if .posts}}
@@ -258,7 +260,7 @@ {{$post_id := .ID}}
- {{.CreatedAt | date "2 Jan, 2006" }} - {{.Author.DisplayName}} + {{.CreatedAt | date "2 Jan, 2006" }} - {{.Author.DisplayName}}

{{.Title}}

@@ -278,7 +280,7 @@
{{end}} - +
@@ -287,9 +289,8 @@

Select an API

- {{$oas_template := ProductDocRenderer}} - + {{ range $index, $api_detail := $thisProduct.APIDetails }} {{ $oasfile := gt ($api_detail.OASDocument.Base.Url | trim | length) 0 }} {{ $oasurl := gt ($api_detail.OASUrl | trim | length) 0 }} {{ if or $oasfile $oasurl }} @@ -299,28 +300,64 @@ {{else}} {{$url = .OASUrl}} {{end}} - + {{$template := ProductDocTemplate req $thisProduct.Path $api_detail.APIID }} + {{if eq $initialAPIOasUrl ""}}{{ $initialAPIOasUrl = $url }}{{end}} {{if eq $initialAPIID ""}}{{ $initialAPIID = $api_detail.APIID }}{{end}} + {{if eq $initialTemplate ""}}{{ $initialTemplate = $template }}{{end}} {{end}} {{end}}
- +
- {{if eq $oas_template $redoc}} -
- -
- {{else}} -
- -
- {{end}} + +
+ {{if eq $initialTemplate $redoc}} +
+ +
+ {{else if eq $initialTemplate $asyncapi}} +
+ + + {{else}} +
+ +
+ {{end}} +
{{else}}
- +
{{if gt (len $thisProduct.Docs) 0}}
@@ -368,7 +405,7 @@
{{end}}
- +
Value has been copied successfully
diff --git a/src/views/product_doc_asyncapi.tmpl b/src/views/product_doc_asyncapi.tmpl new file mode 100644 index 0000000..8c87def --- /dev/null +++ b/src/views/product_doc_asyncapi.tmpl @@ -0,0 +1,42 @@ +
+
+
+

+ {{.Name}} +

+

+ {{.Description}} +

+
+
+
+
+ + +
+
diff --git a/src/views/user_profile.tmpl b/src/views/user_profile.tmpl index 98994dc..d5515ca 100644 --- a/src/views/user_profile.tmpl +++ b/src/views/user_profile.tmpl @@ -93,6 +93,10 @@
{{if $user.IsPasswordProvider}} +
+ + +