mirror of
https://github.com/knadh/listmonk.git
synced 2024-09-20 07:16:33 +08:00
Refactor subscription form generator to render syntax-highlighted HTML.
This commit is contained in:
parent
c2e7c713ca
commit
326fc300ed
|
@ -17,8 +17,8 @@
|
||||||
|
|
||||||
<b-loading :active="loading.lists" :is-full-page="false" />
|
<b-loading :active="loading.lists" :is-full-page="false" />
|
||||||
<ul class="no" data-cy="lists">
|
<ul class="no" data-cy="lists">
|
||||||
<li v-for="l in publicLists" :key="l.id">
|
<li v-for="(l, i) in publicLists" :key="l.id">
|
||||||
<b-checkbox v-model="checked" :native-value="l.uuid">
|
<b-checkbox v-model="checked" :native-value="i">
|
||||||
{{ l.name }}
|
{{ l.name }}
|
||||||
</b-checkbox>
|
</b-checkbox>
|
||||||
</li>
|
</li>
|
||||||
|
@ -41,27 +41,7 @@
|
||||||
{{ $t('forms.formHTMLHelp') }}
|
{{ $t('forms.formHTMLHelp') }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<!-- eslint-disable max-len -->
|
<html-editor v-if="checked.length > 0" v-model="html" disabled />
|
||||||
<pre v-if="checked.length > 0"><form method="post" action="{{ settings['app.root_url'] }}/subscription/form" class="listmonk-form">
|
|
||||||
<div>
|
|
||||||
<h3>Subscribe</h3>
|
|
||||||
<input type="hidden" name="nonce" />
|
|
||||||
<p><input type="email" name="email" required placeholder="{{ $t('subscribers.email') }}" /></p>
|
|
||||||
<p><input type="text" name="name" placeholder="{{ $t('public.subName') }}" /></p>
|
|
||||||
<template v-for="l in publicLists"><span v-if="l.uuid in selected" :key="l.id" :set="id = l.uuid.substr(0, 5)">
|
|
||||||
<p>
|
|
||||||
<input id="{{ id }}" type="checkbox" name="l" checked value="{{ l.uuid }}" />
|
|
||||||
<label for="{{ id }}">{{ l.name }}</label><template v-if="l.description"><br /><span>{{ l.description }}</span></template>
|
|
||||||
</p></span></template>
|
|
||||||
<template v-if="this.settings['security.enable_captcha']">
|
|
||||||
<div class="captcha">
|
|
||||||
<div class="h-captcha" data-sitekey="{{ this.settings['security.captcha_key'] }}"></div>
|
|
||||||
<script src="https://js.hcaptcha.com/1/api.js" async defer></script>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<p><input type="submit" value="{{ $t('public.sub') }}" /></p>
|
|
||||||
</div>
|
|
||||||
</form></pre>
|
|
||||||
</div>
|
</div>
|
||||||
</div><!-- columns -->
|
</div><!-- columns -->
|
||||||
</section>
|
</section>
|
||||||
|
@ -70,19 +50,59 @@
|
||||||
<script>
|
<script>
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import { mapState } from 'vuex';
|
import { mapState } from 'vuex';
|
||||||
|
import HTMLEditor from '../components/HTMLEditor.vue';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
name: 'ListForm',
|
name: 'ListForm',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
'html-editor': HTMLEditor,
|
||||||
|
},
|
||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
checked: [],
|
checked: [],
|
||||||
|
html: '',
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
getPublicLists(lists) {
|
renderHTML() {
|
||||||
return lists.filter((l) => l.type === 'public');
|
let h = `<form method="post" action="${this.settings['app.root_url']}/subscription/form" class="listmonk-form">\n`
|
||||||
|
+ ' <div>\n'
|
||||||
|
+ ` <h3>${this.$t('public.sub')}</h3>\n`
|
||||||
|
+ ' <input type="hidden" name="nonce" />\n\n'
|
||||||
|
+ ` <p><input type="email" name="email" required placeholder="${this.$t('subscribers.email')}" /></p>\n`
|
||||||
|
+ ` <p><input type="text" name="name" placeholder="${this.$t('public.subName')}" /></p>\n\n`;
|
||||||
|
|
||||||
|
this.checked.forEach((i) => {
|
||||||
|
const l = this.publicLists[parseInt(i, 10)];
|
||||||
|
|
||||||
|
h += ' <p>\n'
|
||||||
|
+ ` <input id="${l.uuid.substr(0, 5)}" type="checkbox" name="l" checked value="${l.uuid}" />\n`
|
||||||
|
+ ` <label for="${l.uuid.substr(0, 5)}">${l.name}</label>\n`;
|
||||||
|
|
||||||
|
if (l.description) {
|
||||||
|
h += ' <br />\n'
|
||||||
|
+ ` <span>${l.description}</span>\n`;
|
||||||
|
}
|
||||||
|
|
||||||
|
h += ' </p>\n';
|
||||||
|
});
|
||||||
|
|
||||||
|
// Captcha?
|
||||||
|
if (this.settings['security.enable_captcha']) {
|
||||||
|
h += '\n'
|
||||||
|
+ ` <div class="h-captcha" data-sitekey="${this.settings['security.captcha_key']}"></div>\n`
|
||||||
|
+ ` <${'script'} src="https://js.hcaptcha.com/1/api.js" async defer></${'script'}>\n`;
|
||||||
|
}
|
||||||
|
|
||||||
|
h += '\n'
|
||||||
|
+ ` <input type="submit" value="${this.$t('public.sub')} " />\n`
|
||||||
|
+ ' </div>\n'
|
||||||
|
+ '</form>';
|
||||||
|
|
||||||
|
this.html = h;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -95,13 +115,11 @@ export default Vue.extend({
|
||||||
}
|
}
|
||||||
return this.lists.results.filter((l) => l.type === 'public');
|
return this.lists.results.filter((l) => l.type === 'public');
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
|
||||||
selected() {
|
watch: {
|
||||||
const sel = [];
|
checked() {
|
||||||
this.checked.forEach((uuid) => {
|
this.renderHTML();
|
||||||
sel[uuid] = true;
|
|
||||||
});
|
|
||||||
return sel;
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue