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" />
|
||||
<ul class="no" data-cy="lists">
|
||||
<li v-for="l in publicLists" :key="l.id">
|
||||
<b-checkbox v-model="checked" :native-value="l.uuid">
|
||||
<li v-for="(l, i) in publicLists" :key="l.id">
|
||||
<b-checkbox v-model="checked" :native-value="i">
|
||||
{{ l.name }}
|
||||
</b-checkbox>
|
||||
</li>
|
||||
|
@ -41,27 +41,7 @@
|
|||
{{ $t('forms.formHTMLHelp') }}
|
||||
</p>
|
||||
|
||||
<!-- eslint-disable max-len -->
|
||||
<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>
|
||||
<html-editor v-if="checked.length > 0" v-model="html" disabled />
|
||||
</div>
|
||||
</div><!-- columns -->
|
||||
</section>
|
||||
|
@ -70,19 +50,59 @@
|
|||
<script>
|
||||
import Vue from 'vue';
|
||||
import { mapState } from 'vuex';
|
||||
import HTMLEditor from '../components/HTMLEditor.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
name: 'ListForm',
|
||||
|
||||
components: {
|
||||
'html-editor': HTMLEditor,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
checked: [],
|
||||
html: '',
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getPublicLists(lists) {
|
||||
return lists.filter((l) => l.type === 'public');
|
||||
renderHTML() {
|
||||
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');
|
||||
},
|
||||
},
|
||||
|
||||
selected() {
|
||||
const sel = [];
|
||||
this.checked.forEach((uuid) => {
|
||||
sel[uuid] = true;
|
||||
});
|
||||
return sel;
|
||||
watch: {
|
||||
checked() {
|
||||
this.renderHTML();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
Loading…
Reference in a new issue