mango-cms 0.0.13

package/frontend-starter/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "cfl-front",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@headlessui/vue": "^1.6.7",
+    "@mapbox/mapbox-gl-geocoder": "^5.0.0",
+    "@sweetalert2/theme-dark": "^5.0.10",
+    "@tinymce/tinymce-vue": "^4",
+    "@vitejs/plugin-vue": "^2.2.0",
+    "@vueup/vue-quill": "^1.0.0-beta.7",
+    "@vueuse/motion": "^2.0.0-beta.12",
+    "algoliasearch": "^4.12.0",
+    "axios": "^0.24.0",
+    "canvas-confetti": "^1.5.1",
+    "datebook": "^7.0.8",
+    "dayjs": "^1.10.7",
+    "express": "^4.18.1",
+    "google-maps": "^4.3.3",
+    "mapbox-gl": "^2.7.0",
+    "sweetalert2": "^11.4.0",
+    "vue": "^3.2.37",
+    "vue-router": "4",
+    "vue-slider-component": "^4.0.0-beta.4",
+    "vue-upload-component": "^3.1.2",
+    "vue3-clipboard": "^1.0.0",
+    "vue3-touch-events": "^4.1.0",
+    "vuedraggable": "^4.1.0"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.0",
+    "postcss": "^8.4.5",
+    "tailwindcss": "^3.0.2",
+    "vite": "^4.2.1"
+  }
+}

package/frontend-starter/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/frontend-starter/public/_redirects

@@ -0,0 +1 @@
+/*   /index.html   200

package/frontend-starter/public/index.js

@@ -0,0 +1,66 @@
+const express = require('express');
+const fs = require('fs')
+const axios = require('axios')
+const settings = require('../../config/config/settings.json')
+const collections = require('../../config/config/.collections.json')
+
+let port = 1337
+let metaComment = '<!-- Inject Meta -->'
+let appPlaceholder = '<!--SSR-->'
+
+let serve = async function (req, res) {
+
+    // Cookies
+    let cookies
+    const { headers: { cookie } } = req;
+    if (cookie) {
+        const values = cookie.split(';').reduce((res, item) => {
+            const data = item.trim().split('=');
+            return { ...res, [data[0]]: data[1] };
+        }, {});
+        cookies = values;
+    }
+
+    // User Data Injection
+    let index = fs.readFileSync('./index.html', 'utf8')
+    let authorization = cookies?.Authorization
+    if (authorization) {
+
+        let hash = authorization.split(':')[0]
+        let userId = authorization.split(':')[1]
+        let user = (await axios.get(`http://localhost:${settings.port}/members?search={"password.hash": "${hash}", "id": "${userId}"}`, { headers: { 'Authorization': authorization } }))
+        user = user?.data?.response?.[0]
+        if (user) index = index.replace('window.user = null;', `window.user = ${JSON.stringify(user)};`)
+
+    }
+
+    // Define the collection and ID
+    let collection = req.path.split('/')[1]
+    let id = req.path.split('/')[2] ? req.path.split('/')[2] : null
+
+    console.log('collection', collection)
+    console.log('id', id)
+
+    let entry = (await axios.get(`http://localhost:${settings.port}/${collection}/${id}`))?.data?.response
+
+    console.log('entry', entry)
+
+    if (!entry) return res.send(index)
+
+    // Main Content Injection
+    try { index = index.replace('window.mainEntry = null;', `window.mainEntry = ${JSON.stringify(entry)};`) }
+    catch (e) { console.log(e) }
+
+    return res.send(index)
+
+}
+
+const app = express()
+
+app.get(["/index.html", "/"], serve);
+app.use(express.static('./'))
+app.get('/*', serve)
+
+app.listen(port, () => {
+    console.log(`Example app listening at http://localhost:${port}`)
+})

package/frontend-starter/src/App.vue

@@ -0,0 +1,27 @@
+<template>
+    <div :class="{'dark':darkMode.enabled}">
+        <div class="relative from-white to-slate-50 bg-gradient-to-b dark:from-black dark:to-gray-700 dark:selection:bg-gray-400 dark:text-gray-400 w-full min-h-screen">
+
+            <RouterView v-slot="{ Component, route }" @navHidden="navHidden = $event">
+                <Suspense :timeout="200" >
+                    <Component :is="Component" :key="route.meta.usePathKey ? route.path : undefined" />
+                    <template #fallback><spinner /></template>
+                </Suspense>
+            </RouterView>
+
+        </div>
+    </div>
+</template>
+
+<script>
+import login from './components/layout/login.vue'
+export default {
+  components: { login },
+    inject: ['store','darkMode'],
+    data() {
+        return {
+            navHidden: false
+        }
+    }
+}
+</script>

package/frontend-starter/src/components/layout/login.vue

@@ -0,0 +1,212 @@
+<template>
+    <div class="w-full p-8 flex items-center">
+        <slot
+            :logout="logout"
+            :login="login"
+            :createAccount="createAccount"
+            :sendRecoveryEmail="sendRecoveryEmail"
+            :resetPassword="resetPassword"
+        >
+            <form @submit.stop.prevent class="rounded-lg flex flex-col space-y-4 w-full">
+
+                <template v-if="creatingAccount">
+                    <div class="text-2xl">Create an Account</div>
+                    <div class="text-sm text-gray-500">The first account you create is automatically made an admin account.</div>
+
+                    <div class="flex gap-4 w-full">
+                        <input type="text" v-model.trim="user.firstName" placeholder="First Name" />
+                        <input type="text" v-model.trim="user.lastName" placeholder="Last Name" />
+                    </div>
+
+                    <input type="email" v-model.trim="user.email" placeholder="Email" />
+                    <input type="password" v-model.trim="user.password" placeholder="Password" autocomplete="new-password" />
+
+                    <!-- <div><input type="text" v-model="user.address.address" placeholder="Address" /></div>
+                    <div class="space-x-4 flex">
+                        <input type="text" v-model="user.address.zip" placeholder="Zip Code" @input="extractZip" />
+                    </div>
+                    <div class="space-x-4 flex">
+                        <input type="text" v-model="user.address.city" placeholder="City" />
+                        <input type="text" v-model="user.address.state" placeholder="State" />
+                    </div> -->
+                </template>
+
+                <template v-else>
+                    <div class="text-2xl">Mango Login</div>
+                    <input type="email" v-model.trim="user.email" placeholder="Email" />
+                    <input type="password" v-model.trim="user.password" placeholder="Password" autocomplete="current-password" />
+                </template>
+
+                <button @click="action" class="px-3 py-2 bg-orange-500 dark:bg-orange-500/80 dark:text-white/75 text-white rounded flex justify-center">
+                    <template v-if="!processing">{{ buttonText }}</template>
+                    <Spinner v-else class="border-t-family-at-church-orange w-4 h-4 my-1" :small="true" color="border-t-white/50" />
+                </button>
+
+                <button v-if="store.user?.member?.id" @click="logout" class="text-xs text-gray-400 hover:underline">Logout</button>
+
+                <div class="text-center select-none" >
+                    <button v-if="!creatingAccount"     @click="creatingAccount = true; guest = false; forgotPassword = false" class="text-xs text-gray-400 hover:underline">Create Account</button>
+                    <button v-if="creatingAccount || resettingPassword"      @click="creatingAccount = false; guest = false; forgotPassword = false" class="text-xs text-gray-400 hover:underline" :class="{'ml-2 pl-2 border-l dark:border-gray-500': resettingPassword}">{{ resettingPassword || (allowGuest && !guest) ? 'Login' : 'Have an account? Login instead.' }}</button>
+                    <button v-if="allowGuest && !guest" @click="creatingAccount = true; guest = true; forgotPassword = false" class="text-xs text-gray-400 hover:underline ml-2 pl-2 border-l dark:border-gray-500">Continue as Guest</button>
+                    <button v-if="!creatingAccount && !resettingPassword"     @click="creatingAccount = false; guest = false; forgotPassword = true" class="text-xs text-gray-400 hover:underline ml-2 pl-2 border-l dark:border-gray-500">Forgot Password?</button>
+                </div>
+            </form>
+        </slot>
+    </div>
+</template>
+
+<script>
+import Swal from 'sweetalert2'
+import { validateEmail } from '../../helpers/email'
+import { getUser } from '../../helpers/user'
+import Mango from '../../helpers/mango'
+
+// Function for setting cookies
+let setCookie = function (cname, cvalue) {
+    var d = new Date();
+    d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
+    var expires = "expires=" + d.toUTCString();
+    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
+}
+
+export default {
+    inject: ['store','axios'],
+    data() {
+        return {
+            user: {
+                email: null,
+                password: null,
+                firstName: null,
+                lastName: null,
+                // address: {
+                //     name: null,
+                //     address: null,
+                //     city: null,
+                //     state: null,
+                //     zip: null,
+                // },
+            },
+            processing: false,
+            creatingAccount: true,
+            guest: false,
+            forgotPassword: false,
+        }
+    },
+    watch: {
+        loggedIn() {
+            this.$emit('hide')
+        }
+    },
+    methods: {
+        validateEmail,
+        async login() {
+            this.processing = true
+            let member = (await Mango.login({ email: this.user.email, password: this.user.password }))
+
+            if (member?.memberId) {
+                if (member.roles?.includes('admin')) member.admin = true
+
+                window.localStorage.setItem('user', member.memberId)
+                window.localStorage.setItem('token', member.token)
+                window.localStorage.setItem('email', this.user.email)
+
+                setCookie(`Authorization`, `${member.token}`)
+                this.axios.defaults.headers.common['Authorization'] = `${member.token}`
+
+                const user = await getUser()
+                this.store.user = user
+                if (user?.company?.id) this.store.theme = user.company
+
+                this.$emit('loggedIn')
+
+                let restrictedPath = this.store?.login?.next || '/'
+                if (restrictedPath) this.$router.push(restrictedPath)
+
+                this.$emit('hide')
+            } else if (member?.invalidFields) {
+                Swal.fire({ title: `Invalid ${member.invalidFields.join(', ')}`, icon: 'error' })
+            }
+
+            this.processing = false
+        },
+        logout() {
+            this.store.user = {}
+            window.user = null
+            window.localStorage.removeItem('user')
+            setCookie(`Authorization`, ``)
+            delete this.axios.defaults.headers.common['Authorization']
+            this.$emit('loggedOut')
+            this.$emit('hide')
+            this.$router.push('/login')
+        },
+		async createAccount() {
+			if (!this.validateEmail(this.user.email)) return Swal.fire('Email must be a valid email.')
+			if (this.user.password.length < 6 && !this.guest) return Swal.fire('Password must be at least 6 characters.')
+			this.processing = true
+
+			var data = {
+				...this.user,
+                title: `${this.user.firstName} ${this.user.lastName || ''}`.trim()
+			}
+
+			let response = await Mango.members.save(data)
+            if (!response.id) {
+                Swal.fire('Account Exists', response, 'info')
+            } else {
+                await this.login()
+            }
+            this.$emit('accountCreated')
+            this.$emit('hide')
+            this.processing = false
+        },
+		async sendRecoveryEmail () {
+			this.processing = true
+			let response = await this.axios.post(`${this.store.api}/controllers/account/sendResetInstructions`, {email: this.user.email, forgot: true})
+            if (response.data.success) Swal.fire('Success!', `Recovery instructions sent to: ${this.user.email}`, 'success')
+            else Swal.fire('Invalid Email!', `The following user does not exist: ${this.user.email}`, 'warning')
+            this.$emit('emailSent')
+            this.$emit('hide')
+            this.processing = false
+		},
+		async resetPassword () {
+            if (this.user.password.length < 6) return Swal.fire('Password must be at least 6 characters.')
+			this.processing = true
+
+            let data = {
+                email: this.$route.query.email,
+                salt: this.$route.query.salt,
+                password: this.user.password,
+            }
+
+			let response = await this.axios.post(`${this.store.api}/controllers/account/resetPassword`, data)
+            if (response.data.success) {
+                this.user.email = this.$route.query.email
+                await this.login()
+                this.$router.push({query: null})
+                swal('Success!', 'Your password has been reset.', 'success')
+            } else {
+                swal('Invalid Link!', `The link you're using is invalid.`, 'error')
+            }
+
+            this.processing = false
+            this.$emit('passwordReset')
+            this.$emit('hide')
+		},
+    },
+    computed: {
+        guestPassword() { return Math.random().toString(36).substr(2)+Math.random().toString(36).substr(2) },
+        labelText() { return this.resettingPassword ? 'Reset Password' : this.forgotPassword ? 'Recover Password' : this.creatingAccount ? this.guest ? 'Continue as Guest' : 'Create Account' : 'Login' },
+        buttonText() { return this.resettingPassword ? 'Update Password' : this.forgotPassword ? 'Send Recovery Email' : this.creatingAccount ? this.guest ? 'Continue' : 'Create' : 'Login' },
+        action() { return this.resettingPassword ? this.resetPassword : this.forgotPassword ? this.sendRecoveryEmail : this.creatingAccount ? this.createAccount : this.login },
+        resettingPassword() { return !!this.$route.query?.salt },
+        loggedIn() { return !!this.store.user?.id }
+    }
+}
+</script>
+
+
+<style lang="postcss" scoped>
+input {
+    @apply border rounded outline-blue-400 px-3 py-2 w-full dark:bg-transparent dark:border-gray-600 dark:placeholder-gray-600
+}
+</style>

package/frontend-starter/src/components/layout/modal.vue

@@ -0,0 +1,113 @@
+<template>
+    <div
+        ref="modal"
+        @click.prevent.stop="close"
+        tabindex="-1"
+        class="
+            fixed w-full h-screen bg-gray-800/50 dark:bg-black/60 backdrop-blur-sm md:backdrop-blur-md opacity-0 transition-all duration-500
+            flex items-start sm:items-center justify-center z-[100] inset-0 !m-0 overscroll-none cursor-default
+        "
+        :class="{'!opacity-100': fadeIn}"
+        aria-modal="true"
+        v-show="active"
+        role="dialog"
+    >
+        <button @click.prevent.stop="close" class="absolute top-2 right-3"><i class="fa fa-times md:text-4xl" /></button>
+        <div
+            ref="modalContent"
+            @click.stop
+            class="shadow-card rounded w-full p-4 md:p-8 m-2 dark:bg-gray-800 bg-white relative
+            border dark:border-gray-700 space-y-4 md:space-y-8 max-h-[75vh]"
+            :class="[dialogClasses, maxWidth, allowOverflow ? 'overflow-visible' : 'overflow-y-scroll']"
+        >
+            <slot :close="close"/>
+        </div>
+    </div>
+    <!-- max-w-md max-w-lg max-w-xl max-w-sm -->
+</template>
+
+<script>
+export default {
+    props: {
+        dialogClasses: {type: String, default: ''},
+        maxWidth: {default: 'max-w-md'},
+        active: {default: true},
+        allowOverflow: {type: Boolean, default: false},
+    },
+    data() {
+        return {
+            fadeIn: false
+        }
+    },
+    watch: {
+        active: {
+            handler() {
+                if (this.active) this.freeze()
+                else this.thaw()
+            },
+            immediate: true
+        }
+    },
+    beforeDestroy() {
+        this.thaw();
+    },
+    unmounted() {
+        this.thaw();
+    },
+    methods: {
+        freeze() {
+            this.$nextTick(() => {
+                this.$refs.modalContent.focus()
+                this.fadeIn = true
+                document.body.style.overflow = 'hidden';
+                document.getElementById('app').setAttribute('aria-hidden', 'true');
+                this.$refs.modal.setAttribute('aria-modal', 'true');
+                this.attachListeners();
+            });
+        },
+        thaw() {
+            document.body.style.overflow = '';
+            document.getElementById('app').setAttribute('aria-hidden', 'false');
+            this.$refs?.modal?.removeAttribute('aria-modal');
+            this.removeListeners();
+        },
+        close() {
+            this.fadeIn = false
+            this.thaw()
+            setTimeout(() => {
+                this.$emit('hide')
+            }, 500);
+        },
+        attachListeners() {
+            window.addEventListener('keydown', this.handleKeydown);
+        },
+        removeListeners() {
+            window.removeEventListener('keydown', this.handleKeydown);
+        },
+        handleKeydown(e) {
+            if (e.key === 'Tab') {
+                this.manageFocus(e);
+            } else if (e.key === 'Escape') {
+                this.close()
+            }
+        },
+        manageFocus(e) {
+            let focusable = Array.from(this.$refs.modal.querySelectorAll('button, [href], input:not([type="hidden"]), select, textarea, [tabindex]:not([tabindex="-1"])'));
+            focusable = focusable.filter(el => window.getComputedStyle(el).display !== 'none');
+            console.log('focusable', focusable)
+
+            if (!focusable.includes(document.activeElement)) {
+                e.preventDefault();
+                focusable[0].focus();
+            } else if (e.shiftKey && document.activeElement === focusable[0]) {
+                e.preventDefault();
+                focusable[focusable.length - 1].focus();
+            } else if (document.activeElement === focusable[focusable.length - 1]) {
+                e.preventDefault();
+                focusable[0].focus();
+            }
+
+        }
+    }
+}
+</script>

package/frontend-starter/src/components/layout/spinner.vue

@@ -0,0 +1,17 @@
+<template>
+	<div
+		class="flex justify-center items-center border-transparent"
+		:class="{'w-full h-screen': !small}"
+	>
+		<div class="rounded-full border-4 animate-spin w-full h-full max-w-32 max-h-32 border-inherit" :class="color"/>
+	</div>
+</template>
+
+<script>
+export default {
+	props: {
+        small: {type: Boolean, default: false},
+        color: {default: 'border-t-blue-500'}
+    },
+}
+</script>

package/frontend-starter/src/components/pages/404.vue

@@ -0,0 +1,28 @@
+<template>
+	<main class="w-full pt-16 flex flex-col justify-center items-center text-center min-h-screen">
+		<div class="w-full flex flex-wrap justify-center items-center relative px-8 md:px-16">
+			<h1 class="w-full text-8xl sm:text-9xl md:text-10xl font-bold text-gray-800 leading-none">404</h1>
+			<p class="w-full text-4xl font-semibold text-gray-600">Are you lost?</p>
+			<p class="w-full text-2xl font-semibold text-gray-600 mt-4">
+				How about messages on
+				<router-link
+					class="text-3xl text-ncfic-blue-500 dark:text-ncfic-blue-800 hover:text-ncfic-blue-600 font-bold hover:underline hover:-translate-y-2 transition-all duration-500 inline-block"
+					:to="`/resources/topics/60c927e8826ba92e9196fcd5`"
+				>
+					The Gospel
+					<i class="fas fa-long-arrow-right text-gray-200 dark:text-gray-800"></i>
+				</router-link>
+			</p>
+		</div>
+	</main>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

package/frontend-starter/src/components/pages/home.vue

@@ -0,0 +1,74 @@
+<template>
+
+    <div class="relative">
+
+        <div class="fixed top-4 left-4 rounded border border-gray-400 dark:border-gray-600 dark:bg-black px-2 flex space-x-2 items-center">
+            <div class="rounded-full w-2 h-2 shrink-0" :class="online ? 'bg-green-500' : 'bg-red-500'" />
+            <div>{{ online ? 'Online' : 'Offline' }}</div>
+        </div>
+
+        <div class="pt-16 lg:pt-32 flex items-center justify-center w-full">
+
+            <div class="w-full max-2xl py-16 md:py-32 text-center flex flex-col items-center px-8 md:px-16">
+                <div class="text-9xl pb-8">🥭</div>
+                <h1 class="font-bold text-5xl pb-4 bg-clip-text bg-gradient-to-r from-orange-500 to-green-500 text-transparent">Welcome to Mango</h1>
+                <h1 class="font-bold text-lg bg-clip-text bg-gradient-to-r from-orange-500 to-green-500 text-transparent italic opacity-50">Here to make your life stinking easy.</h1>
+            </div>
+
+        </div>
+
+        <div v-if="!store.user?.id || !online" class="flex w-full justify-center">
+            <login v-if="online" class="max-w-md" />
+            <div v-else class="space-y-8">
+                <div class="text-lg">Looks like the local Mango server isn't up and running yet. Please start it by running:</div>
+                <div class="w-full">
+                    <code class="bg-gray-200 dark:bg-black p-3 border border-gray-700 rounded-lg w-full">cd mango; yarn; yarn watch;</code>
+                </div>
+            </div>
+        </div>
+
+        <div v-else-if="store.user?.id" class="w-full flex flex-col p-4 items-center space-y-4">
+
+            <div class="w-full max-w-xl">
+                <div class="text mb-4">Great! Now you're logged in as:</div>
+                    <div class="text-2xl mb-8">{{ store.user.title }}</div>
+                <div class="rounded-lg bg-gray-100 dark:bg-gray-800 p-4 ">
+                    <div class="tracking-widest opacity-75 font-mono mt-2 truncate" v-html="JSON.stringify(store.user, undefined, 4).replaceAll('\n', '<br>').replaceAll(' ', '&nbsp;')" />
+                </div>
+            </div>
+
+            <!-- <Mango collection="members" v-slot="{data, loading}" >
+                <div v-if="data">
+                    <div v-for="member in data">{{ member.title }}</div>
+                </div>
+            </Mango> -->
+
+        </div>
+    </div>
+
+</template>
+
+<script>
+import Mango from '../../helpers/mango'
+import Login from '../layout/login.vue'
+
+export default {
+    components: { Login },
+    inject: ['store'],
+    data() {
+        return {
+            online: false,
+            checker: null,
+        }
+    },
+    async created() {
+        this.online = await Mango.online()
+        this.checker = setInterval(async () => {
+            this.online = await Mango.online()
+        }, 500);
+    },
+    beforeDestroy() {
+        clearInterval(this.checker)
+    }
+}
+</script>

package/frontend-starter/src/components/partials/button.vue

@@ -0,0 +1,31 @@
+<template>
+	<div class="relative pb-[4px]">
+		<button
+			class="relative z-10 w-full text-3xl rounded-xl text-white uppercase"
+			:class="[`bg-${store.theme.color}-500`, selected ? 'py-4 px-6' : 'py-6 px-8', selected ? `border-8 border-${store.theme.color}-400`: '']"
+		>
+			{{ label }}
+		</button>
+		<div :class="`bg-${store.theme.color}-600`" class="absolute bottom-0 w-full text-3xl px-8 py-6 rounded-xl">&nbsp;</div>
+		<div :class="`bg-${store.theme.color}-400`" class="absolute z-20 -top-2 -right-2 rounded-full flex items-center justify-center w-8 h-8 shrink-0 text-white" v-if="selected">
+			<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="4" stroke="currentColor" class="w-4 h-4">
+				<path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+			</svg>
+		</div>
+	</div>
+</template>
+
+<script>
+	export default {
+        inject: ['store'],
+		props: {
+			label: {
+				type: String,
+			},
+			selected: {
+				type: Boolean,
+				default: false,
+			}
+		}
+	}
+</script>