-
Notifications
You must be signed in to change notification settings - Fork 30
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Création d’un composant de feedback (#3428)
* simple view of feedback component * JS to display full form * move to liveview * start making a real form * wip * move to gtfs stops for no log noise * contact form moved to a simple view * change dummy email sender so it has the same return format as mailjet * use form helpers * working form * I18n * Check it works inside a liveview * Add tests * mix format * insert feedback template on validators * better mail output * fix scss margin top * mix format * fix test * guard clause and trimming * replace get_env by fetch_env * espaces avant double signe de ponctuation Co-authored-by: Antoine Augusti <[email protected]> * reindent scss * fix test * move to module attributes * change sender of feedback form * space before : * remove double honeypot (mistake) * remove params redirect * sanitize inputs function * french localization * straight apostrophe in English * improve tests * wrap contact tests in describe block * remove useless case * Use swoosh for feedback component * Apply suggestions from code review Co-authored-by: Antoine Augusti <[email protected]> * Pass current user email to feedback * use Kernel.get_in * use maps in sanitize inputs * mix format * start working on liveview * duplicate feedback to liveview * add test for live feedback * Localisation * migrate feedback view to feedback live * remove feedback view / controller * update locales * revert to previous livecontrollers * revert router * add inclusion tests for feedback * remove test * verify on exit * Apply suggestions from code review Co-authored-by: Antoine Augusti <[email protected]> * fix tests * setup locale in component * use notification class --------- Co-authored-by: Thibaut Barrère <[email protected]> Co-authored-by: Antoine Augusti <[email protected]>
- Loading branch information
1 parent
30b13cd
commit f130873
Showing
17 changed files
with
440 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
apps/transport/client/stylesheets/components/_feedback.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
.feedback-selector { | ||
input { | ||
display: none; | ||
} | ||
|
||
label { | ||
cursor: pointer; | ||
display: inline-block; | ||
margin-right: 12px; | ||
filter: brightness(1.8) grayscale(1) opacity(0.7); | ||
} | ||
|
||
label:hover { | ||
filter: brightness(1.2) grayscale(0.5) opacity(0.9); | ||
} | ||
|
||
input:checked + label { | ||
filter: none; | ||
color: $primary; | ||
} | ||
|
||
.feedback-emojis { | ||
font-size: 48px; | ||
} | ||
} | ||
|
||
.feedback-form { | ||
#full-feedback-form.hidden { | ||
display: none; | ||
} | ||
|
||
.form__group + #full-feedback-form { | ||
margin-top: var(--space-l); | ||
} | ||
|
||
.form-special-field { | ||
// hide field used as honey-pot | ||
display: none; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,67 @@ | ||
defmodule TransportWeb.Live.FeedbackLive do | ||
use Phoenix.LiveView | ||
use TransportWeb.InputHelpers | ||
import TransportWeb.InputHelpers | ||
import TransportWeb.Gettext | ||
require Logger | ||
|
||
@moduledoc """ | ||
A reusable module to display a feedback form for a given feature, you can display inside a normal view or a live view. | ||
In case of normal view, don’t forget to add the app.js script with LiveView js inside the page as if it is not included in the general layout. | ||
If you add feedback for a new feature, add it to the list of features. | ||
""" | ||
|
||
@feedback_rating_values ["like", "neutral", "dislike"] | ||
@feedback_features ["gtfs-stops", "on-demand-validation", "gbfs-validation"] | ||
|
||
def mount(_params, %{"feature" => feature, "locale" => locale} = session, socket) | ||
when feature in @feedback_features do | ||
current_email = session |> get_in(["current_user", "email"]) | ||
|
||
socket = | ||
socket | ||
|> assign( | ||
feature: feature, | ||
current_email: current_email, | ||
feedback_sent: false, | ||
feedback_error: false | ||
) | ||
|
||
Gettext.put_locale(locale) | ||
|
||
{:ok, socket} | ||
end | ||
|
||
def handle_event("submit", %{"feedback" => %{"name" => name, "email" => email}}, socket) when name !== "" do | ||
# someone filled the honeypot field ("name") => discard as spam | ||
Logger.info("Feedback coming from #{email} has been discarded because it filled the feedback form honeypot") | ||
# spammer get a little fox emoji in their flash message, useful for testing purpose | ||
{:noreply, socket |> assign(:feedback_sent, true)} | ||
end | ||
|
||
def handle_event( | ||
"submit", | ||
%{"feedback" => %{"rating" => rating, "explanation" => explanation, "email" => email, "feature" => feature}}, | ||
socket | ||
) | ||
when rating in @feedback_rating_values and feature in @feedback_features do | ||
%{email: email, explanation: explanation} = sanitize_inputs(%{email: email, explanation: explanation}) | ||
|
||
feedback_email = TransportWeb.ContactEmail.feedback(rating, explanation, email, feature) | ||
|
||
case Transport.Mailer.deliver(feedback_email) do | ||
{:ok, _} -> | ||
{:noreply, socket |> assign(:feedback_sent, true)} | ||
|
||
{:error, _} -> | ||
{:noreply, socket |> assign(:feedback_error, true)} | ||
end | ||
end | ||
|
||
def handle_event("submit", session, socket) do | ||
Logger.error("Bad parameters for feedback #{inspect(session)}") | ||
{:noreply, socket |> assign(:feedback_error, true)} | ||
end | ||
|
||
defp sanitize_inputs(map), do: Map.new(map, fn {k, v} -> {k, v |> String.trim() |> HtmlSanitizeEx.strip_tags()} end) | ||
end |
59 changes: 59 additions & 0 deletions
59
apps/transport/lib/transport_web/live/feedback_live.html.heex
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
<div class="container"> | ||
<h2><%= dgettext("feedback", "Leave your feedback") %></h2> | ||
<.form :let={f} :if={!@feedback_sent} for={%{}} as={:feedback} phx-submit="submit" class="feedback-form no-margin"> | ||
<div class="form__group feedback-selector"> | ||
<fieldset> | ||
<legend><%= dgettext("feedback", "What's your feedback on this page?") %></legend> | ||
|
||
<%= radio_button(f, :rating, "like", id: "like") %> | ||
<%= label f, "like", class: "label-inline", for: "like" do %> | ||
<i class="fa-regular fa-face-smile feedback-emojis"></i> | ||
<% end %> | ||
<%= radio_button(f, :rating, "neutral", id: "neutral") %> | ||
<%= label f, "neutral", class: "label-inline", for: "neutral" do %> | ||
<i class="fa-regular fa-face-meh feedback-emojis"></i> | ||
<% end %> | ||
<%= radio_button(f, :rating, "dislike", id: "dislike") %> | ||
<%= label f, "like", class: "label-inline", for: "dislike" do %> | ||
<i class="fa-regular fa-face-frown feedback-emojis"></i> | ||
<% end %> | ||
</fieldset> | ||
</div> | ||
|
||
<div id="full-feedback-form" class="hidden"> | ||
<div class="form__group"> | ||
<%= label(f, :explanation, dgettext("feedback", "Why?"), class: "required") %> | ||
<%= textarea(f, :explanation, required: true) %> | ||
</div> | ||
|
||
<div class="form__group"> | ||
<%= label(f, :email, dgettext("feedback", "Your email (optional)")) %> | ||
<%= text_input(f, :email, type: "email", value: @current_email) %> | ||
</div> | ||
|
||
<%= text_input(f, :name, | ||
placeholder: "your name", | ||
class: "form-special-field", | ||
tabindex: "-1", | ||
autocomplete: "off" | ||
) %> | ||
|
||
<%= hidden_input(f, :feature, value: @feature) %> | ||
|
||
<%= submit(dgettext("feedback", "Send the feedback"), class: "button") %> | ||
</div> | ||
</.form> | ||
|
||
<p :if={@feedback_sent} class="notification"><%= dgettext("feedback", "Thanks for your feedback!") %></p> | ||
<p :if={@feedback_error}><%= gettext("There has been an error, try again later") %></p> | ||
|
||
<script> | ||
document.querySelectorAll(".feedback-selector label").forEach( | ||
function(el) { | ||
el.addEventListener('click', function() { | ||
document.getElementById("full-feedback-form").classList.remove("hidden"); | ||
}); | ||
} | ||
); | ||
</script> | ||
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
## "msgid"s in this file come from POT (.pot) files. | ||
### | ||
### Do not add, change, or remove "msgid"s manually here as | ||
### they're tied to the ones in the corresponding POT file | ||
### (with the same domain). | ||
### | ||
### Use "mix gettext.extract --merge" or "mix gettext.merge" | ||
### to merge POT files into PO files. | ||
msgid "" | ||
msgstr "" | ||
"Language: en\n" | ||
"Plural-Forms: nplurals=2; plural=(n != 1);\n" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "Send the feedback" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "Why?" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "Your email (optional)" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "What's your feedback on this page?" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "Leave your feedback" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "Thanks for your feedback!" | ||
msgstr "" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
## This file is a PO Template file. | ||
## | ||
## "msgid"s here are often extracted from source code. | ||
## Add new messages manually only if they're dynamic | ||
## messages that can't be statically extracted. | ||
## | ||
## Run "mix gettext.extract" to bring this file up to | ||
## date. Leave "msgstr"s empty as changing them here has no | ||
## effect: edit them in PO (.po) files instead. | ||
# | ||
msgid "" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "Send the feedback" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "Why?" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "Your email (optional)" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "What's your feedback on this page?" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "Leave your feedback" | ||
msgstr "" | ||
|
||
#, elixir-autogen, elixir-format | ||
msgid "Thanks for your feedback!" | ||
msgstr "" |
Oops, something went wrong.