feat: add basic user feedback email mechanism
this definitely needs some more work. using pyramid_mailer for testing although not ready to declare that dependency. for now this is "broken" without it being installed.
This commit is contained in:
parent
8669ca2283
commit
4934ed1d93
6 changed files with 461 additions and 2 deletions
|
@ -420,7 +420,153 @@
|
|||
|
||||
<%def name="render_theme_picker()"></%def>
|
||||
|
||||
<%def name="render_feedback_button()"></%def>
|
||||
<%def name="render_feedback_button()">
|
||||
% if request.has_perm('common.feedback'):
|
||||
<wutta-feedback-form action="${url('feedback')}" />
|
||||
% endif
|
||||
</%def>
|
||||
|
||||
<%def name="render_vue_template_feedback()">
|
||||
<script type="text/x-template" id="wutta-feedback-template">
|
||||
<div>
|
||||
|
||||
<b-button type="is-primary"
|
||||
@click="showFeedback()"
|
||||
icon-pack="fas"
|
||||
icon-left="comment">
|
||||
Feedback
|
||||
</b-button>
|
||||
|
||||
<b-modal has-modal-card
|
||||
:active.sync="showDialog">
|
||||
<div class="modal-card">
|
||||
|
||||
<header class="modal-card-head">
|
||||
<p class="modal-card-title">User Feedback</p>
|
||||
</header>
|
||||
|
||||
<section class="modal-card-body">
|
||||
<p class="block">
|
||||
Feedback regarding this website may be submitted below.
|
||||
</p>
|
||||
|
||||
<b-field label="User Name"
|
||||
:type="userName && userName.trim() ? null : 'is-danger'">
|
||||
<b-input v-model.trim="userName"
|
||||
% if request.user:
|
||||
disabled
|
||||
% endif
|
||||
/>
|
||||
</b-field>
|
||||
|
||||
<b-field label="Referring URL">
|
||||
<b-input v-model="referrer"
|
||||
disabled="true" />
|
||||
</b-field>
|
||||
|
||||
<b-field label="Message"
|
||||
:type="message && message.trim() ? null : 'is-danger'">
|
||||
<b-input type="textarea"
|
||||
v-model.trim="message"
|
||||
ref="textarea" />
|
||||
</b-field>
|
||||
</section>
|
||||
|
||||
<footer class="modal-card-foot">
|
||||
<b-button @click="showDialog = false">
|
||||
Cancel
|
||||
</b-button>
|
||||
<b-button type="is-primary"
|
||||
icon-pack="fas"
|
||||
icon-left="paper-plane"
|
||||
@click="sendFeedback()"
|
||||
:disabled="submitDisabled">
|
||||
{{ sendingFeedback ? "Working, please wait..." : "Send Message" }}
|
||||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
<%def name="render_vue_script_feedback()">
|
||||
<script>
|
||||
|
||||
const WuttaFeedbackForm = {
|
||||
template: '#wutta-feedback-template',
|
||||
mixins: [WuttaRequestMixin],
|
||||
props: {
|
||||
action: String,
|
||||
},
|
||||
computed: {
|
||||
|
||||
submitDisabled() {
|
||||
if (this.sendingFeedback) {
|
||||
return true
|
||||
}
|
||||
if (!this.userName || !this.userName.trim()) {
|
||||
return true
|
||||
}
|
||||
if (!this.message || !this.message.trim()) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
showFeedback() {
|
||||
// nb. update referrer to include anchor hash if any
|
||||
this.referrer = location.href
|
||||
this.showDialog = true
|
||||
this.$nextTick(function() {
|
||||
this.$refs.textarea.focus()
|
||||
})
|
||||
},
|
||||
|
||||
sendFeedback() {
|
||||
this.sendingFeedback = true
|
||||
|
||||
const params = {
|
||||
referrer: this.referrer,
|
||||
user_uuid: this.userUUID,
|
||||
user_name: this.userName,
|
||||
message: this.message.trim(),
|
||||
}
|
||||
|
||||
this.wuttaPOST(this.action, params, response => {
|
||||
|
||||
this.$buefy.toast.open({
|
||||
message: "Message sent! Thank you for your feedback.",
|
||||
type: 'is-info',
|
||||
duration: 4000, // 4 seconds
|
||||
})
|
||||
|
||||
this.showDialog = false
|
||||
// clear out message, in case they need to send another
|
||||
this.message = ""
|
||||
this.sendingFeedback = false
|
||||
|
||||
}, response => { // failure
|
||||
this.sendingFeedback = false
|
||||
})
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
const WuttaFeedbackFormData = {
|
||||
referrer: null,
|
||||
userUUID: ${json.dumps(request.user.uuid if request.user else None)|n},
|
||||
userName: ${json.dumps(str(request.user) if request.user else None)|n},
|
||||
showDialog: false,
|
||||
sendingFeedback: false,
|
||||
message: '',
|
||||
}
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
<%def name="render_vue_script_whole_page()">
|
||||
<script>
|
||||
|
@ -578,18 +724,33 @@
|
|||
##############################
|
||||
|
||||
<%def name="render_vue_templates()">
|
||||
|
||||
## nb. must make wutta components first; they are stable so
|
||||
## intermediate pages do not need to modify them. and some pages
|
||||
## may need the request mixin to be defined.
|
||||
${make_wutta_components()}
|
||||
|
||||
${self.render_vue_template_whole_page()}
|
||||
${self.render_vue_script_whole_page()}
|
||||
% if request.has_perm('common.feedback'):
|
||||
${self.render_vue_template_feedback()}
|
||||
${self.render_vue_script_feedback()}
|
||||
% endif
|
||||
</%def>
|
||||
|
||||
<%def name="modify_vue_vars()"></%def>
|
||||
|
||||
<%def name="make_vue_components()">
|
||||
${make_wutta_components()}
|
||||
<script>
|
||||
WholePage.data = function() { return WholePageData }
|
||||
Vue.component('whole-page', WholePage)
|
||||
</script>
|
||||
% if request.has_perm('common.feedback'):
|
||||
<script>
|
||||
WuttaFeedbackForm.data = function() { return WuttaFeedbackFormData }
|
||||
Vue.component('wutta-feedback-form', WuttaFeedbackForm)
|
||||
</script>
|
||||
% endif
|
||||
</%def>
|
||||
|
||||
<%def name="make_vue_app()">
|
||||
|
|
40
src/wuttaweb/templates/temporary/feedback.html.mako
Normal file
40
src/wuttaweb/templates/temporary/feedback.html.mako
Normal file
|
@ -0,0 +1,40 @@
|
|||
## -*- coding: utf-8 -*-
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-top: 1em;
|
||||
}
|
||||
p {
|
||||
margin: 1em 0 1em 1.5em;
|
||||
}
|
||||
p.msg {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>User feedback from website</h1>
|
||||
|
||||
<label>User Name</label>
|
||||
<p>
|
||||
% if user:
|
||||
<a href="${user_url}">${user}</a>
|
||||
% else:
|
||||
${user_name}
|
||||
% endif
|
||||
</p>
|
||||
|
||||
<label>Referring URL</label>
|
||||
<p><a href="${referrer}">${referrer}</a></p>
|
||||
|
||||
<label>Client IP</label>
|
||||
<p>${client_ip}</p>
|
||||
|
||||
<label>Message</label>
|
||||
<p class="msg">${message}</p>
|
||||
|
||||
</body>
|
||||
</html>
|
23
src/wuttaweb/templates/temporary/feedback.txt.mako
Normal file
23
src/wuttaweb/templates/temporary/feedback.txt.mako
Normal file
|
@ -0,0 +1,23 @@
|
|||
## -*- coding: utf-8; -*-
|
||||
|
||||
# User feedback from website
|
||||
|
||||
**User Name**
|
||||
|
||||
% if user:
|
||||
${user}
|
||||
% else:
|
||||
${user_name}
|
||||
% endif
|
||||
|
||||
**Referring URL**
|
||||
|
||||
${referrer}
|
||||
|
||||
**Client IP**
|
||||
|
||||
${client_ip}
|
||||
|
||||
**Message**
|
||||
|
||||
${message}
|
|
@ -1,10 +1,87 @@
|
|||
|
||||
<%def name="make_wutta_components()">
|
||||
${self.make_wutta_request_mixin()}
|
||||
${self.make_wutta_button_component()}
|
||||
${self.make_wutta_filter_component()}
|
||||
${self.make_wutta_filter_value_component()}
|
||||
</%def>
|
||||
|
||||
<%def name="make_wutta_request_mixin()">
|
||||
<script>
|
||||
|
||||
const WuttaRequestMixin = {
|
||||
methods: {
|
||||
|
||||
wuttaGET(url, params, success, failure) {
|
||||
|
||||
this.$http.get(url, {params: params}).then(response => {
|
||||
|
||||
if (response.data.error) {
|
||||
this.$buefy.toast.open({
|
||||
message: `Request failed: ${'$'}{response.data.error}`,
|
||||
type: 'is-danger',
|
||||
duration: 4000, // 4 seconds
|
||||
})
|
||||
if (failure) {
|
||||
failure(response)
|
||||
}
|
||||
|
||||
} else {
|
||||
success(response)
|
||||
}
|
||||
|
||||
}, response => {
|
||||
this.$buefy.toast.open({
|
||||
message: "Request failed: (unknown server error)",
|
||||
type: 'is-danger',
|
||||
duration: 4000, // 4 seconds
|
||||
})
|
||||
if (failure) {
|
||||
failure(response)
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
|
||||
wuttaPOST(action, params, success, failure) {
|
||||
|
||||
const csrftoken = ${json.dumps(h.get_csrf_token(request))|n}
|
||||
const headers = {'X-CSRF-TOKEN': csrftoken}
|
||||
|
||||
this.$http.post(action, params, {headers: headers}).then(response => {
|
||||
|
||||
if (response.data.error) {
|
||||
this.$buefy.toast.open({
|
||||
message: "Submit failed: " + (response.data.error ||
|
||||
"(unknown error)"),
|
||||
type: 'is-danger',
|
||||
duration: 4000, // 4 seconds
|
||||
})
|
||||
if (failure) {
|
||||
failure(response)
|
||||
}
|
||||
|
||||
} else {
|
||||
success(response)
|
||||
}
|
||||
|
||||
}, response => {
|
||||
this.$buefy.toast.open({
|
||||
message: "Submit failed! (unknown server error)",
|
||||
type: 'is-danger',
|
||||
duration: 4000, // 4 seconds
|
||||
})
|
||||
if (failure) {
|
||||
failure(response)
|
||||
}
|
||||
})
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
||||
<%def name="make_wutta_button_component()">
|
||||
<script type="text/x-template" id="wutta-button-template">
|
||||
<b-button :type="type"
|
||||
|
|
|
@ -24,13 +24,19 @@
|
|||
Common Views
|
||||
"""
|
||||
|
||||
import logging
|
||||
|
||||
import colander
|
||||
from pyramid.renderers import render
|
||||
|
||||
from wuttaweb.views import View
|
||||
from wuttaweb.forms import widgets
|
||||
from wuttaweb.db import Session
|
||||
|
||||
|
||||
log = logging.getLogger(__name__)
|
||||
|
||||
|
||||
class CommonView(View):
|
||||
"""
|
||||
Common views shared by all apps.
|
||||
|
@ -78,6 +84,80 @@ class CommonView(View):
|
|||
"""
|
||||
return {'index_title': self.app.get_title()}
|
||||
|
||||
def feedback(self):
|
||||
""" """
|
||||
model = self.app.model
|
||||
session = Session()
|
||||
|
||||
# validate form
|
||||
schema = self.feedback_make_schema()
|
||||
form = self.make_form(schema=schema)
|
||||
if not form.validate():
|
||||
# TODO: native Form class should better expose error(s)
|
||||
dform = form.get_deform()
|
||||
return {'error': str(dform.error)}
|
||||
|
||||
# build email template context
|
||||
context = dict(form.validated)
|
||||
if context['user_uuid']:
|
||||
context['user'] = session.get(model.User, context['user_uuid'])
|
||||
context['user_url'] = self.request.route_url('users.view', uuid=context['user_uuid'])
|
||||
context['client_ip'] = self.request.client_addr
|
||||
|
||||
# send email
|
||||
try:
|
||||
self.feedback_send(context)
|
||||
except Exception as error:
|
||||
log.warning("failed to send feedback email", exc_info=True)
|
||||
return {'error': str(error) or error.__class__.__name__}
|
||||
|
||||
return {'ok': True}
|
||||
|
||||
def feedback_make_schema(self):
|
||||
""" """
|
||||
schema = colander.Schema()
|
||||
|
||||
schema.add(colander.SchemaNode(colander.String(),
|
||||
name='referrer'))
|
||||
|
||||
schema.add(colander.SchemaNode(colander.String(),
|
||||
name='user_uuid',
|
||||
missing=None))
|
||||
|
||||
schema.add(colander.SchemaNode(colander.String(),
|
||||
name='user_name'))
|
||||
|
||||
schema.add(colander.SchemaNode(colander.String(),
|
||||
name='message'))
|
||||
|
||||
return schema
|
||||
|
||||
def feedback_send(self, context): # pragma: no cover
|
||||
""" """
|
||||
|
||||
# TODO: this is definitely a stopgap bit of logic, until we
|
||||
# have a more robust way to handle email via wuttjamaican etc.
|
||||
|
||||
from pyramid_mailer.mailer import Mailer
|
||||
from pyramid_mailer.message import Message
|
||||
|
||||
From = self.config.require(f'{self.config.appname}.email.default.sender')
|
||||
To = self.config.require(f'{self.config.appname}.email.feedback.to')
|
||||
Subject = self.config.get(f'{self.config.appname}.email.feedback.subject',
|
||||
default="User Feedback")
|
||||
|
||||
text_body = render('/temporary/feedback.txt.mako', context, request=self.request)
|
||||
html_body = render('/temporary/feedback.html.mako', context, request=self.request)
|
||||
|
||||
msg = Message(subject=Subject,
|
||||
sender=From,
|
||||
recipients=[To],
|
||||
body=text_body,
|
||||
html=html_body)
|
||||
|
||||
mailer = Mailer()
|
||||
mailer.send_immediately(msg)
|
||||
|
||||
def setup(self, session=None):
|
||||
"""
|
||||
View for first-time app setup, to create admin user.
|
||||
|
@ -203,6 +283,8 @@ class CommonView(View):
|
|||
@classmethod
|
||||
def _defaults(cls, config):
|
||||
|
||||
config.add_wutta_permission_group('common', "(common)", overwrite=False)
|
||||
|
||||
# home page
|
||||
config.add_route('home', '/')
|
||||
config.add_view(cls, attr='home',
|
||||
|
@ -219,6 +301,16 @@ class CommonView(View):
|
|||
append_slash=True,
|
||||
renderer='/notfound.mako')
|
||||
|
||||
# feedback
|
||||
config.add_route('feedback', '/feedback',
|
||||
request_method='POST')
|
||||
config.add_view(cls, attr='feedback',
|
||||
route_name='feedback',
|
||||
permission='common.feedback',
|
||||
renderer='json')
|
||||
config.add_wutta_permission('common', 'common.feedback',
|
||||
"Send user feedback about the app")
|
||||
|
||||
# setup
|
||||
config.add_route('setup', '/setup')
|
||||
config.add_view(cls, attr='setup',
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue