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
|
@ -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',
|
||||
|
|
|
@ -1,5 +1,9 @@
|
|||
# -*- coding: utf-8; -*-
|
||||
|
||||
from unittest.mock import patch
|
||||
|
||||
import colander
|
||||
|
||||
from wuttaweb.views import common as mod
|
||||
from tests.util import WebTestCase
|
||||
|
||||
|
@ -51,6 +55,68 @@ class TestCommonView(WebTestCase):
|
|||
context = view.home(session=self.session)
|
||||
self.assertEqual(context['index_title'], self.app.get_title())
|
||||
|
||||
def test_feedback_make_schema(self):
|
||||
view = self.make_view()
|
||||
schema = view.feedback_make_schema()
|
||||
self.assertIsInstance(schema, colander.Schema)
|
||||
self.assertIn('message', schema)
|
||||
|
||||
def test_feedback(self):
|
||||
self.pyramid_config.add_route('users.view', '/users/{uuid}')
|
||||
model = self.app.model
|
||||
user = model.User(username='barney')
|
||||
self.session.add(user)
|
||||
self.session.commit()
|
||||
|
||||
view = self.make_view()
|
||||
with patch.object(view, 'feedback_send') as feedback_send:
|
||||
|
||||
# basic send, no user
|
||||
self.request.client_addr = '127.0.0.1'
|
||||
self.request.method = 'POST'
|
||||
self.request.POST = {
|
||||
'referrer': '/foo',
|
||||
'user_name': "Barney Rubble",
|
||||
'message': "hello world",
|
||||
}
|
||||
context = view.feedback()
|
||||
self.assertEqual(context, {'ok': True})
|
||||
feedback_send.assert_called_once()
|
||||
|
||||
# reset
|
||||
feedback_send.reset_mock()
|
||||
|
||||
# basic send, with user
|
||||
self.request.user = user
|
||||
self.request.POST['user_uuid'] = user.uuid
|
||||
with patch.object(mod, 'Session', return_value=self.session):
|
||||
context = view.feedback()
|
||||
self.assertEqual(context, {'ok': True})
|
||||
feedback_send.assert_called_once()
|
||||
|
||||
# reset
|
||||
self.request.user = None
|
||||
feedback_send.reset_mock()
|
||||
|
||||
# invalid form data
|
||||
self.request.POST = {'message': 'hello world'}
|
||||
context = view.feedback()
|
||||
self.assertEqual(list(context), ['error'])
|
||||
self.assertIn('Required', context['error'])
|
||||
feedback_send.assert_not_called()
|
||||
|
||||
# error on send
|
||||
self.request.POST = {
|
||||
'referrer': '/foo',
|
||||
'user_name': "Barney Rubble",
|
||||
'message': "hello world",
|
||||
}
|
||||
feedback_send.side_effect = RuntimeError
|
||||
context = view.feedback()
|
||||
feedback_send.assert_called_once()
|
||||
self.assertEqual(list(context), ['error'])
|
||||
self.assertIn('RuntimeError', context['error'])
|
||||
|
||||
def test_setup(self):
|
||||
self.pyramid_config.add_route('home', '/')
|
||||
self.pyramid_config.add_route('login', '/login')
|
||||
|
|
Loading…
Reference in a new issue