Migrate front-end to Nuxt app (#284)
* wip * Managed to load a page * Stuck at changing routes * Fixed the router, and editable div * WIP * Fix app loader * WIP * Fix check-auth middleware * Started to refactor input components * WIP * Added select input, v-click-outside for vselect * update vselect & phone input * Fixed the mixin * input component updates * Fix signature input import * input component updates in vue3 * image input in vue3 * small fixes * fix useFormInput watcher * scale input in vue3 * Vue3: migrating from vuex to Pinia (#249) * Vue3: migrating from vuex to Pinia * toggle input fixes * update configureCompat --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> * support vue3 query builder * Refactor inpus * fix: Vue3 Query Builder - Logic Editor (#251) * support vue3 query builder * upgrade * remove local from middleware * Submission table pagination & migrate chart to vue3 (#254) * Submission table Pagination in background * migrate chart to vue3 * Form submissions pagination * Form submissions * Fix form starts * Fix openSelect key issue --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> Co-authored-by: Julien Nahum <julien@nahum.net> * Vue 3 better animation (#257) * vue-3-better-animation * Working on migration to vueuse/motion * Form sidebar animations * Clean code * Added animations for modal * Finished implementing better animations --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> * Work in progress * Migrating amplitude and crisp plugin/composable * Started to refactor pages * WIP * vue3-scroll-shadow-fixes (#260) * WIP * WIP * WIP * Figured out auth & middlewares * WI * Refactoring stores and templates pages to comp. api * Finishing the templates pages * fix collapsible * Finish reworking most templates pages * Reworked workspaces store * Working on home page and modal * Fix dropdown * Fix modal * Fixed form creation * Fixed most of the form/show pages * Updated cors dependency * fix custom domain warning * NuxtLink migration (#262) Co-authored-by: Forms Dev <chirag+new@notionforms.io> * Tiny fixes + start pre-rendering * migrate-to-nuxt-useappconfig (#263) * migrate-to-nuxt-useappconfig * defineAppConfig --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> * Working on form/show and editor * Globally import form inputs to fix resolve * Remove vform - working on form public page * Remove initform mixin * Work in progress for form create guess user * Nuxt Migration notifications (#265) * Nuxt Migration notifications * @input to @update:model-value * change field type fixes * @update:model-value * Enable form-block-logic-editor * vue-confetti migration * PR request changes * useAlert in setup * Migrate to nuxt settings page AND remove axios (#266) * Settings pages migration * remove axios and use opnFetch * Make created form reactive (#267) * Remove verify pages and axios lib --------- Co-authored-by: Julien Nahum <julien@nahum.net> * Fix alert styling + bug fixes and cleaning * Refactor notifications + add shadow * Fix vselect issue * Working on page pre-rendering * Created NotionPages store * Added sitemap on nuxt side * Sitemap done, working on aws amplify * Adding missing module * Remove axios and commit backend changes to sitemap * Fix notifications * fix guestpage editor (#269) Co-authored-by: Julien Nahum <julien@nahum.net> * Remove appconfig in favor of runtimeconfig * Fixed amplitude bugs, and added staging environment * Added amplify file * Change basdirectory amplify * Fix loading bar position * Fix custom redirect (#273) * Dirty form handling - nuxt migration (#272) * SEO meta nuxt migration (#274) * SEO meta nuxt migration * Polish seo metas, add defaults for OG and twitter --------- Co-authored-by: Julien Nahum <julien@nahum.net> * migrate to nuxt useClipboard (#268) * Set middleware on pages (#278) * Se middleware on pages * Se middleware on account page * add robots.txt (#276) * 404 page migration (#277) * Templates pages migration (#275) * NuxtImg Migration (#279) Co-authored-by: Julien Nahum <julien@nahum.net> * Update package json * Fix build script * Add loglevel param * Disable page pre-rendering * Attempt to allow svgs * Fix SVGs with NuxtImage * Add .env file at AWS build time * tRGIGGER deploy * Fix issue * ANother attrempt * Fix typo * Fix env? * Attempt to simplify build * Enable swr caching instead of prerenderign * Better image compression * Last attempt at nuxt images efficiency * Improve image optimization again * Remove NuxtImg for non asset files * Restore templates pages cache * Remove useless images + fix templates show page * image optimization caching + fix hydratation issue form template page * URL generation (front&back) + fixed authJWT for SSR * Fix composable issue * Fix form share page * Embeddable form as a nuxt middleware * Fix URL for embeddable middleware * Debugging embeddable on amplify * Add custom domain support * No follow for non-production env * Fix sentry nuxt and custom domain redirect * remove api prefix from routes (#280) * remove api prefix from routes * PR changes --------- Co-authored-by: Julien Nahum <julien@nahum.net> * nuxt migration -file upload - WIP (#271) Co-authored-by: Julien Nahum <julien@nahum.net> * Fix local file upload * Fix file submissions preview * API redirect to back-end from nuxt * API redirect to back-end from nuxt * Remove old JS app, update deploy script * Fix tests, added gh action nuxt step * Updated package-lock.json * Setup node in GH Nuxt action * Setup client directory for GH workflow --------- Co-authored-by: Forms Dev <chirag+new@notionforms.io> Co-authored-by: Chirag Chhatrala <60499540+chiragchhatrala@users.noreply.github.com> Co-authored-by: Rishi Raj Jain <rishi18304@iiitd.ac.in> Co-authored-by: formsdev <136701234+formsdev@users.noreply.github.com>
This commit is contained in:
Julien Nahum
GitHub
20
client/public/widgets/embed-min.js
vendored
Normal file
20
client/public/widgets/embed-min.js
vendored
Normal file
@@ -0,0 +1,20 @@
|
||||
!(function (n, e) {
|
||||
if (typeof document !== 'undefined') {
|
||||
const e = document.head || document.getElementsByTagName('head')[0]; const t = document.createElement('style')
|
||||
t.type = 'text/css', e.appendChild(t), t.styleSheet ? t.styleSheet.cssText = n : t.appendChild(document.createTextNode(n))
|
||||
}
|
||||
}('.nf-main {\n position: fixed;\n width: 100%;\n height: 100vh;\n top: 0px;\n bottom: 0px;\n left: 0px;\n right: 0px;\n z-index: 500;\n pointer-events: none;\n }\n .nf-main .nf-emoji {\n pointer-events: auto;\n width:60px;\n height: 60px;\n display: flex;\n align-items:center;\n justify-content:center;\n text-align: center;\n background-color: #3B82F6;\n padding: 8px 10px;\n border: none;\n cursor: pointer;\n position: fixed;\n bottom: 23px;\n right: 28px;\n border-radius: 100%;\n z-index: 999\n }\n .nf-main.nf-left .nf-emoji{\n left: 28px !important;\n right: inherit !important\n }\n .nf-main .nf-emoji .nf-emoji-icon, .nf-main .nf-emoji .nf-emoji-icon-close{\n font-size: 30px;\n color:white;\n }\n .nf-main .nf-emoji .nf-emoji-icon-close {\n display: none;\n }\n .nf-main.open .nf-emoji .nf-emoji-icon{\n display: none !important\n }\n .nf-main.open .nf-emoji .nf-emoji-icon-close{\n display: block !important\n }\n .nf-main .nf-popup {\n\n display: flex;\n align-items: end;\n flex-direction: column-reverse;\n align-content: flex-end;\n padding: 20px;\n padding-bottom: 100px;\n width: 100%;\n height: 100vh;\n visibility: hidden;\n opacity:0; transition:\n opacity 0.2s, 0.2s ease-in-out;\n transform: translateY(30px);\n }\n .nf-main.open .nf-popup {\n visibility: visible !important;\n opacity: 1;\n transform: translateY(0px);\n }\n .nf-main .nf-popup iframe {\n width: 100%;\n pointer-events: auto;\n z-index: 999!important;\n bottom: 100px;\n right: 20px;\n height: 450px;\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 6px 6px 0 rgba(0,0,0,.02),0 8px 24px 0 rgba(0,0,0,.12)!important\n }\n .nf-main.nf-left .nf-popup {\n align-items: start !important;\n }')), (function () {
|
||||
const n = JSON.parse(document.currentScript.getAttribute('data-nf'))
|
||||
let e = n?.formurl || null
|
||||
if (window.location !== window.parent.location || window.frameElement || !e) return !1
|
||||
e = e + (e.indexOf('?') === -1 ? '?' : '&') + 'popup=true'
|
||||
const t = n?.emoji || '💬'; const i = n?.position === 'left' ? 'nf-left' : ''; const o = n?.bgcolor || '#3B82F6'
|
||||
const a = n?.width || 500; const r = document.body.querySelector('.nf-main')
|
||||
r && r.remove()
|
||||
const p = document.createElement('div')
|
||||
p.className = `nf-main ${i}`, p.innerHTML = `<div class='nf-popup'><iframe src='${e}' frameborder='0' marginheight='0' marginwidth='0' title='OpnForm'></iframe></div>`
|
||||
p.querySelector('iframe').style.maxWidth = `${a}px`
|
||||
const s = document.createElement('div')
|
||||
s.className = 'nf-emoji', s.role = 'button', s.style.backgroundColor = `${o}`, s.innerHTML = `<span class='nf-emoji-icon'>${t}</span><span class='nf-emoji-icon-close'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'>\n <path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />\n</svg>\n</span>`, s.onclick = () => { p.classList.toggle('open') }, p.appendChild(s), document.body.appendChild(p)
|
||||
}())
|
||||
|
||||
139
client/public/widgets/embed.js
vendored
Normal file
139
client/public/widgets/embed.js
vendored
Normal file
@@ -0,0 +1,139 @@
|
||||
/**
|
||||
* OpenForms Embed, allowing you to add a popup form to your website.
|
||||
* All changes to this file should be followed by an update of the minified version (embed-min.js)
|
||||
*/
|
||||
!(function () {
|
||||
!(function (e, t) {
|
||||
if (e && typeof document !== 'undefined') {
|
||||
const head = document.head || document.getElementsByTagName('head')[0]
|
||||
const styleEl = document.createElement('style')
|
||||
styleEl.type = 'text/css', head.appendChild(styleEl), styleEl.styleSheet ? styleEl.styleSheet.cssText = e : styleEl.appendChild(document.createTextNode(e))
|
||||
}
|
||||
}
|
||||
(`.nf-main {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
z-index: 500;
|
||||
pointer-events: none;
|
||||
}
|
||||
.nf-main .nf-emoji {
|
||||
pointer-events: auto;
|
||||
width:60px;
|
||||
height: 60px;
|
||||
display: flex;
|
||||
align-items:center;
|
||||
justify-content:center;
|
||||
text-align: center;
|
||||
background-color: #3B82F6;
|
||||
padding: 8px 10px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
position: fixed;
|
||||
bottom: 23px;
|
||||
right: 28px;
|
||||
border-radius: 100%;
|
||||
z-index: 999
|
||||
}
|
||||
.nf-main.nf-left .nf-emoji{
|
||||
left: 28px !important;
|
||||
right: inherit !important
|
||||
}
|
||||
.nf-main .nf-emoji .nf-emoji-icon, .nf-main .nf-emoji .nf-emoji-icon-close{
|
||||
font-size: 30px;
|
||||
color:white;
|
||||
}
|
||||
.nf-main .nf-emoji .nf-emoji-icon-close {
|
||||
display: none;
|
||||
}
|
||||
.nf-main.open .nf-emoji .nf-emoji-icon{
|
||||
display: none !important
|
||||
}
|
||||
.nf-main.open .nf-emoji .nf-emoji-icon-close{
|
||||
display: block !important
|
||||
}
|
||||
.nf-main .nf-popup {
|
||||
|
||||
display: flex;
|
||||
align-items: end;
|
||||
flex-direction: column-reverse;
|
||||
align-content: flex-end;
|
||||
padding: 20px;
|
||||
padding-bottom: 100px;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
visibility: hidden;
|
||||
opacity:0; transition:
|
||||
opacity 0.2s, 0.2s ease-in-out;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
.nf-main.open .nf-popup {
|
||||
visibility: visible !important;
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
.nf-main .nf-popup iframe {
|
||||
width: 100%;
|
||||
pointer-events: auto;
|
||||
z-index: 999!important;
|
||||
bottom: 100px;
|
||||
right: 20px;
|
||||
height: 450px;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 6px 6px 0 rgba(0,0,0,.02),0 8px 24px 0 rgba(0,0,0,.12)!important
|
||||
}
|
||||
.nf-main.nf-left .nf-popup {
|
||||
align-items: start !important;
|
||||
}`))
|
||||
}());
|
||||
|
||||
(function () {
|
||||
const nfData = JSON.parse(document.currentScript.getAttribute('data-nf'))
|
||||
let formUrl = nfData?.formurl || null
|
||||
if (window.location !== window.parent.location || window.frameElement || !formUrl) {
|
||||
// Do nothing
|
||||
return false
|
||||
}
|
||||
|
||||
// Add popup param to formUrl
|
||||
formUrl = formUrl + (formUrl.indexOf('?') === -1 ? '?' : '&') + 'popup=true'
|
||||
|
||||
// Settings
|
||||
const emoji = nfData?.emoji || '💬'
|
||||
const position = (nfData?.position === 'left') ? 'nf-left' : ''
|
||||
const emojiBgColor = nfData?.bgcolor || '#3B82F6'
|
||||
const width = nfData?.width || 500
|
||||
|
||||
// Remove old popup, if there
|
||||
const oldEl = document.body.querySelector('.nf-main')
|
||||
if (oldEl) {
|
||||
oldEl.remove()
|
||||
}
|
||||
|
||||
// Iframe popup
|
||||
const mainDiv = document.createElement('div')
|
||||
mainDiv.className = `nf-main ${position}`
|
||||
mainDiv.innerHTML = `<div class='nf-popup'><iframe src='${formUrl}' frameborder='0' marginheight='0' marginwidth='0' title='OpnForm'></iframe></div>`
|
||||
const iframe = mainDiv.querySelector('iframe')
|
||||
iframe.style.maxWidth = `${width}px`
|
||||
|
||||
// Emoji button
|
||||
const emojiButton = document.createElement('div')
|
||||
emojiButton.className = 'nf-emoji'
|
||||
emojiButton.role = 'button'
|
||||
emojiButton.style.backgroundColor = `${emojiBgColor}`
|
||||
emojiButton.innerHTML = `<span class='nf-emoji-icon'>${emoji}</span><span class='nf-emoji-icon-close'><svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='currentColor' class='w-8 h-8'>
|
||||
<path stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12' />
|
||||
</svg>
|
||||
</span>`
|
||||
emojiButton.onclick = () => { mainDiv.classList.toggle('open') }
|
||||
mainDiv.appendChild(emojiButton)
|
||||
|
||||
// Append to the body
|
||||
document.body.appendChild(mainDiv)
|
||||
})()
|
||||
Reference in New Issue
Block a user