diff options
| -rw-r--r-- | perllib/FixMyStreet/App/Controller/Report/New.pm | 6 | ||||
| -rw-r--r-- | perllib/FixMyStreet/TestMech.pm | 9 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/header_extra.html | 34 | ||||
| -rw-r--r-- | templates/web/fixmystreet.com/report/new/form_user_loggedout.html | 91 | ||||
| -rw-r--r-- | templates/web/fixmystreet/report/new/fill_in_details_form.html | 105 | ||||
| -rw-r--r-- | templates/web/fixmystreet/report/new/form_user_loggedin.html | 32 | ||||
| -rw-r--r-- | templates/web/fixmystreet/report/new/form_user_loggedout.html | 69 | ||||
| -rw-r--r-- | web/cobrands/sass/_base.scss | 4 | ||||
| -rw-r--r-- | web/js/fixmystreet.js | 4 |
9 files changed, 247 insertions, 107 deletions
diff --git a/perllib/FixMyStreet/App/Controller/Report/New.pm b/perllib/FixMyStreet/App/Controller/Report/New.pm index 1e9f83aec..c885e1a8a 100644 --- a/perllib/FixMyStreet/App/Controller/Report/New.pm +++ b/perllib/FixMyStreet/App/Controller/Report/New.pm @@ -719,7 +719,8 @@ sub process_user : Private { # Extract all the params to a hash to make them easier to work with my %params = map { $_ => scalar $c->req->param($_) } - ( 'email', 'name', 'phone', 'password_register', 'fms_extra_title' ); + ( 'email', 'name', 'phone', 'password_register', 'fms_extra_title', + 'email_y', 'email_n' ); my $user_title = Utils::trim_text( $params{fms_extra_title} ); @@ -744,6 +745,9 @@ sub process_user : Private { # cleanup the email address my $email = $params{email} ? lc $params{email} : ''; + my $email_y = $params{email_y} ? lc $params{email_y} : ''; + my $email_n = $params{email_n} ? lc $params{email_n} : ''; + $email = $email || $email_y || $email_n; $email =~ s{\s+}{}g; $report->user( $c->model('DB::User')->find_or_new( { email => $email } ) ) diff --git a/perllib/FixMyStreet/TestMech.pm b/perllib/FixMyStreet/TestMech.pm index be8f004a5..5b3cc39a7 100644 --- a/perllib/FixMyStreet/TestMech.pm +++ b/perllib/FixMyStreet/TestMech.pm @@ -238,7 +238,10 @@ sub page_errors { process 'div.form-error, p.form-error, p.error, ul.error li', 'errors[]', 'TEXT'; } ->scrape( $mech->response ); - return $result->{errors} || []; + my $err = $result->{errors} || []; + my %seen = (); + $err = [ grep { not $seen{$_}++ } @$err ]; + return $err; } =head2 import_errors @@ -479,6 +482,10 @@ sub visible_form_values { my %params = map { $_ => $form->value($_) } @visible_field_names; + # Ignore content experiment fields + delete $params{email_y}; + delete $params{email_n}; + return \%params; } diff --git a/templates/web/fixmystreet.com/header_extra.html b/templates/web/fixmystreet.com/header_extra.html index f31d846f3..38208277c 100644 --- a/templates/web/fixmystreet.com/header_extra.html +++ b/templates/web/fixmystreet.com/header_extra.html @@ -1,2 +1,36 @@ <script src="[% start %][% version('/js/jquery.cookie.min.js') %]" type="text/javascript" charset="utf-8"></script> + +[%# We are conducting an A/B experiment on people not logged in, on the new report form %] +[% IF ( NOT c.user_exists ) AND ( page == 'around' OR page == 'new' ) %] +<script src="//www.google-analytics.com/cx/api.js?experiment=Ln84qfBuQc6X51-kLqy5YA"></script> +<script> +var variation = cxApi.chooseVariation(), + docElement = document.documentElement, + className = docElement.className; +docElement.className = className + ' ' + 'variant' + variation; + +if (variation == 2 || variation == 3) { + $(function(){ + $('h5.variant-click').click(function(){ + $(this).next().show(); + }); + [%- IF field_errors AND field_errors.size %] + $('h5.variant-click').click(); + [%- END %] + }); +} +</script> +<style> +html.variant0 .variant1, html.variant0 .variant2, html.variant0 .variant3 { display: none; } +html.variant0 .variant0 { display: block; } +html.variant1 .variant0, html.variant1 .variant2, html.variant1 .variant3 { display: none; } +html.variant1 .variant1 { display: block; } +html.variant2 .variant0, html.variant2 .variant1, html.variant2 .variant3 { display: none; } +html.variant2 .variant2 { display: block; } +html.variant3 .variant0, html.variant3 .variant1, html.variant3 .variant2 { display: none; } +html.variant3 .variant3 { display: block; } +html.variant2 .variant-click, html.variant3 .variant-click { cursor: pointer; } +</style> +[% END %] + [% INCLUDE 'tracking_code.html' %] diff --git a/templates/web/fixmystreet.com/report/new/form_user_loggedout.html b/templates/web/fixmystreet.com/report/new/form_user_loggedout.html new file mode 100644 index 000000000..bfe4e9f14 --- /dev/null +++ b/templates/web/fixmystreet.com/report/new/form_user_loggedout.html @@ -0,0 +1,91 @@ +<div class="variant0 variant2"> +<label for="form_email">[% loc('Your email') %]</label> +[% IF field_errors.email %] + <p class='form-error'>[% field_errors.email %]</p> +[% END %] +<input type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]" required> +</div> + +<div id="form_sign_in"> + <h3>[% loc("Now to submit your report…") %]</h3> + <h2>[% loc("Do you have a FixMyStreet password?") %]</h2> + + <div id="form_sign_in_yes" class="form-box"> + + <h5 class="variant-click">[% loc('<strong>Yes</strong> I have a password') %]</h5> + + <div class="variant0 variant1"> + <div class="variant1 variant3"> + <label for="form_email_y">[% loc('Your email') %]</label> + [% IF field_errors.email %] + <p class='form-error'>[% field_errors.email %]</p> + [% END %] + <input type="email" value="[% report.user.email | html %]" name="email_y" id="form_email_y" placeholder="[% loc('Please enter your email address') %]"> + </div> + + <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label> + [% IF field_errors.password %] + <p class='form-error'>[% field_errors.password %]</p> + [% END %] + <div class="form-txt-submit-box"> + <input type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value=""> + <input class="green-btn" type="submit" id="submit_sign_in" name="submit_sign_in" value="[% loc('Submit') %]"> + </div> + + <div class="checkbox-group"> + <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]> + <label class="n inline" for="remember_me">[% loc('Keep me signed in on this computer') %]</label> + </div> + + <div class="general-sidebar-notes" id="forgotten-pw"> + <p class="dark">[% loc('Forgotten your password?') %]</p> + <p>[% loc('Confirm by email below, providing a new password at that point. When you confirm, your password will be updated.') %]</p> + </div> + + </div> + </div> + + <div id="form_sign_in_no" class="form-box"> + <h5 class="variant-click">[% loc('<strong>No</strong> Let me confirm my report by email') %]</h5> + + <div class="variant0 variant1"> + <div class="variant1 variant3"> + <label for="form_email_n">[% loc('Your email') %]</label> + [% IF field_errors.email %] + <p class='form-error'>[% field_errors.email %]</p> + [% END %] + <input type="email" class="form-focus-trigger" value="[% report.user.email | html %]" name="email_n" id="form_email_n" placeholder="[% loc('Please enter your email address') %]"> + </div> + + [% INCLUDE 'report/new/extra_name.html' %] + + <label for="form_name">[% loc('Name') %]</label> + [% IF field_errors.name %] + <p class='form-error'>[% field_errors.name %]</p> + [% END %] + + <input type="text" class="form-focus-trigger validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> + + [%# if there is nothing in the name field then set check box as default on form %] + <div class="checkbox-group"> + <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF report.anonymous==0 OR (c.cobrand.default_show_name AND report.anonymous=='') %]> + <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %]</label> + </div> + + <div class="general-sidebar-notes form-focus-hidden"> + <p class="dark">[% loc('We never show your email address or phone number.') %]</p> + <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p> + </div> + + <label class="form-focus-hidden" for="form_phone">[% loc('Phone number (optional)') %]</label> + <input class="form-focus-hidden" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]"> + + <label class="form-focus-hidden" for="password_register">[% loc('Password (optional)') %]</label> + + <div class="form-txt-submit-box form-focus-hidden"> + <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]"> + </div> + </div> + </div> +</div> diff --git a/templates/web/fixmystreet/report/new/fill_in_details_form.html b/templates/web/fixmystreet/report/new/fill_in_details_form.html index e2e091460..9f25145a7 100644 --- a/templates/web/fixmystreet/report/new/fill_in_details_form.html +++ b/templates/web/fixmystreet/report/new/fill_in_details_form.html @@ -110,110 +110,9 @@ [% END %] [% IF c.user_exists %] - <div class="form-box"> - - <label for="form_email">[% loc('Your email') %]</label> - <input disabled type="text" value="[% c.user.email | html %]"> - - [% INCLUDE 'report/new/extra_name.html' %] - - <label for="form_name">[% loc('Name') %]</label> - [% IF field_errors.name %] - <p class='form-error'>[% field_errors.name %]</p> - [% END %] - <input type="text" class="validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> - - [%# if there is nothing in the name field then set check box as default on form %] - <div class="checkbox-group"> - <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF report.anonymous==0 OR (c.cobrand.default_show_name AND report.anonymous=='') %]> - <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %] </label> - </div> - - [% IF c.cobrand.moniker != 'fixmybarangay' || c.user.from_body %] - <div class="general-sidebar-notes"> - <p>[% loc('We never show your email address or phone number.') %]</p> - </div> - [% END %] - - <label for="form_phone">[% loc('Phone number (optional)') %]</label> - <input class="" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]"> - - <div class="form-txt-submit-box"> - <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]"> - </div> - </div> + [% PROCESS "report/new/form_user_loggedin.html" %] [% ELSE %] - - <label for="form_email">[% loc('Your email') %]</label> - [% IF field_errors.email %] - <p class='form-error'>[% field_errors.email %]</p> - [% END %] - <input type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]" required> - - <div id="form_sign_in"> - <h3>[% loc("Now to submit your report…") %]</h3> - <h2>[% loc("Do you have a FixMyStreet password?") %]</h2> - - <div id="form_sign_in_yes" class="form-box"> - - <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5> - - <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label> - <div class="form-txt-submit-box"> - [% IF field_errors.password %] - <p class='form-error'>[% field_errors.password %]</p> - [% END %] - <input type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value=""> - <input class="green-btn" type="submit" id="submit_sign_in" name="submit_sign_in" value="[% loc('Submit') %]"> - </div> - - <div class="checkbox-group"> - <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]> - <label class="n inline" for="remember_me">[% loc('Keep me signed in on this computer') %]</label> - </div> - - <div class="general-sidebar-notes" id="forgotten-pw"> - <p class="dark">[% loc('Forgotten your password?') %]</p> - <p>[% loc('Confirm by email below, providing a new password at that point. When you confirm, your password will be updated.') %]</p> - </div> - - </div> - - <div id="form_sign_in_no" class="form-box"> - <h5>[% loc('<strong>No</strong> Let me confirm my report by email') %]</h5> - - [% INCLUDE 'report/new/extra_name.html' %] - - <label for="form_name">[% loc('Name') %]</label> - [% IF field_errors.name %] - <p class='form-error'>[% field_errors.name %]</p> - [% END %] - - <input type="text" class="form-focus-trigger validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> - - [%# if there is nothing in the name field then set check box as default on form %] - <div class="checkbox-group"> - <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF report.anonymous==0 OR (c.cobrand.default_show_name AND report.anonymous=='') %]> - <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %]</label> - </div> - - <div class="general-sidebar-notes form-focus-hidden"> - <p class="dark">[% loc('We never show your email address or phone number.') %]</p> - <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p> - </div> - - <label class="form-focus-hidden" for="form_phone">[% loc('Phone number (optional)') %]</label> - <input class="form-focus-hidden" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]"> - - <label class="form-focus-hidden" for="password_register">[% loc('Password (optional)') %]</label> - - <div class="form-txt-submit-box form-focus-hidden"> - <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> - <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]"> - </div> - </div> - </div> - + [% PROCESS "report/new/form_user_loggedout.html" %] [% END %] </div> </fieldset> diff --git a/templates/web/fixmystreet/report/new/form_user_loggedin.html b/templates/web/fixmystreet/report/new/form_user_loggedin.html new file mode 100644 index 000000000..8cdf98e3d --- /dev/null +++ b/templates/web/fixmystreet/report/new/form_user_loggedin.html @@ -0,0 +1,32 @@ +<div class="form-box"> + + <label for="form_email">[% loc('Your email') %]</label> + <input disabled type="text" value="[% c.user.email | html %]"> + + [% INCLUDE 'report/new/extra_name.html' %] + + <label for="form_name">[% loc('Name') %]</label> + [% IF field_errors.name %] + <p class='form-error'>[% field_errors.name %]</p> + [% END %] + <input type="text" class="validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> + + [%# if there is nothing in the name field then set check box as default on form %] + <div class="checkbox-group"> + <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF report.anonymous==0 OR (c.cobrand.default_show_name AND report.anonymous=='') %]> + <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %] </label> + </div> + + [% IF c.cobrand.moniker != 'fixmybarangay' || c.user.from_body %] + <div class="general-sidebar-notes"> + <p>[% loc('We never show your email address or phone number.') %]</p> + </div> + [% END %] + + <label for="form_phone">[% loc('Phone number (optional)') %]</label> + <input class="" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]"> + + <div class="form-txt-submit-box"> + <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]"> + </div> +</div> diff --git a/templates/web/fixmystreet/report/new/form_user_loggedout.html b/templates/web/fixmystreet/report/new/form_user_loggedout.html new file mode 100644 index 000000000..a35beca24 --- /dev/null +++ b/templates/web/fixmystreet/report/new/form_user_loggedout.html @@ -0,0 +1,69 @@ +<label for="form_email">[% loc('Your email') %]</label> +[% IF field_errors.email %] + <p class='form-error'>[% field_errors.email %]</p> +[% END %] +<input type="email" value="[% report.user.email | html %]" name="email" id="form_email" placeholder="[% loc('Please enter your email address') %]" required> + +<div id="form_sign_in"> + <h3>[% loc("Now to submit your report…") %]</h3> + <h2>[% loc("Do you have a FixMyStreet password?") %]</h2> + + <div id="form_sign_in_yes" class="form-box"> + + <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5> + + <label class="hidden-js n" for="password_sign_in">[% loc('Yes I have a password') %]</label> + [% IF field_errors.password %] + <p class='form-error'>[% field_errors.password %]</p> + [% END %] + <div class="form-txt-submit-box"> + <input type="password" name="password_sign_in" id="password_sign_in" placeholder="[% loc('Your password') %]" value=""> + <input class="green-btn" type="submit" id="submit_sign_in" name="submit_sign_in" value="[% loc('Submit') %]"> + </div> + + <div class="checkbox-group"> + <input type="checkbox" id="remember_me" name="remember_me" value='1'[% ' checked' IF remember_me %]> + <label class="n inline" for="remember_me">[% loc('Keep me signed in on this computer') %]</label> + </div> + + <div class="general-sidebar-notes" id="forgotten-pw"> + <p class="dark">[% loc('Forgotten your password?') %]</p> + <p>[% loc('Confirm by email below, providing a new password at that point. When you confirm, your password will be updated.') %]</p> + </div> + + </div> + + <div id="form_sign_in_no" class="form-box"> + <h5>[% loc('<strong>No</strong> Let me confirm my report by email') %]</h5> + + [% INCLUDE 'report/new/extra_name.html' %] + + <label for="form_name">[% loc('Name') %]</label> + [% IF field_errors.name %] + <p class='form-error'>[% field_errors.name %]</p> + [% END %] + + <input type="text" class="form-focus-trigger validName" value="[% report.name | html %]" name="name" id="form_name" placeholder="[% loc('Your name') %]"> + + [%# if there is nothing in the name field then set check box as default on form %] + <div class="checkbox-group"> + <input type="checkbox" name="may_show_name" id="form_may_show_name" value="1"[% ' checked' IF report.anonymous==0 OR (c.cobrand.default_show_name AND report.anonymous=='') %]> + <label class="inline" for="form_may_show_name">[% loc('Show my name publicly') %]</label> + </div> + + <div class="general-sidebar-notes form-focus-hidden"> + <p class="dark">[% loc('We never show your email address or phone number.') %]</p> + <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report problems, leave updates and manage your reports.') %]</p> + </div> + + <label class="form-focus-hidden" for="form_phone">[% loc('Phone number (optional)') %]</label> + <input class="form-focus-hidden" type="text" value="[% report.user.phone | html %]" name="phone" id="form_phone" placeholder="[% loc('Your phone number') %]"> + + <label class="form-focus-hidden" for="password_register">[% loc('Password (optional)') %]</label> + + <div class="form-txt-submit-box form-focus-hidden"> + <input type="password" name="password_register" id="password_register" value="" placeholder="[% loc('Enter a password') %]"> + <input class="green-btn" type="submit" id="submit_register" name="submit_register" value="[% loc('Submit') %]"> + </div> + </div> +</div> diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index df44a3af2..0faafd20d 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -322,7 +322,7 @@ label{ margin: 0 -2em 0.25em -2em; background:#eeeeee; padding:1em 2em 1em 2em; - >input[type=text] { + >input[type=text], input[type=email] { margin-bottom:1em; } .title { @@ -351,7 +351,7 @@ label{ // Prevent grey displaying oddly by giving it a width, and stop odd left margin issue .ie7 .form-box { width: 100%; - > input[type=text] { + > input[type=text], input[type=email] { margin-left: 2em; } } diff --git a/web/js/fixmystreet.js b/web/js/fixmystreet.js index 7d75c8b65..158ba8bb4 100644 --- a/web/js/fixmystreet.js +++ b/web/js/fixmystreet.js @@ -104,6 +104,8 @@ $(function(){ $('#form_first_name').removeClass(); $('#form_last_name').removeClass(); $('#form_fms_extra_title').removeClass(); + $('#form_email_y').addClass('required'); + $('#form_email_n').removeClass(); } ); $('#submit_register').click( function(e) { @@ -115,6 +117,8 @@ $(function(){ $('#form_first_name').addClass('required'); $('#form_last_name').addClass('required'); $('#form_fms_extra_title').addClass('required'); + $('#form_email_y').removeClass(); + $('#form_email_n').addClass('required'); } ); $('#problem_submit > input[type="submit"]').click( function(e) { |