diff options
31 files changed, 306 insertions, 164 deletions
diff --git a/.cypress/cypress/integration/simple_spec.js b/.cypress/cypress/integration/simple_spec.js index 003662d59..01fb77f49 100644 --- a/.cypress/cypress/integration/simple_spec.js +++ b/.cypress/cypress/integration/simple_spec.js @@ -11,7 +11,9 @@ describe('Clicking the map', function() { cy.get('#map_box').click(200, 200); cy.get('[name=title]').type('Title'); cy.get('[name=detail]').type('Detail'); + cy.get('#js-new-report-user-show').click(); cy.get('[name=username]').type('user@example.org'); + cy.get('#js-new-report-show-sign-in').click(); cy.get('[name=password_sign_in]').type('password'); cy.get('[name=password_sign_in]').parents('form').submit(); cy.get('#map_sidebar').should('contain', 'check and confirm your details'); diff --git a/CHANGELOG.md b/CHANGELOG.md index e26bb9e31..67c93128e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ - default_to_body permission to control default report as behaviour - report_prefill permission to control report prefill behaviour - Front end improvements: + - Simplify new report/update sign in flow. #642 - Clearer relocation options while you’re reporting a problem #2238 - Simplify /auth sign in page. #2208 - Enforce maximum photo size server side, strip EXIF data. #2326 #2134 diff --git a/t/app/controller/report_new.t b/t/app/controller/report_new.t index 8a391f318..b796578a0 100644 --- a/t/app/controller/report_new.t +++ b/t/app/controller/report_new.t @@ -1319,7 +1319,7 @@ subtest "check map click ajax response" => sub { }; ok $extra_details->{titles_list}, 'Bromley sends back list of titles'; like $extra_details->{councils_text}, qr/Bromley Council/, 'correct council text'; - like $extra_details->{councils_text_private}, qr/^These will be sent to the council, but will never be shown online/, 'correct private council text'; + like $extra_details->{councils_text_private}, qr/^These details will be sent to the council, but will never be shown online/, 'correct private council text'; like $extra_details->{category}, qr/Trees/, 'category looks correct'; is_deeply $extra_details->{bodies}, [ "Bromley Council" ], 'correct bodies'; ok !$extra_details->{contribute_as}, 'no contribute as section'; diff --git a/templates/web/base/report/form/private_details.html b/templates/web/base/report/form/private_details.html new file mode 100644 index 000000000..7184d7e25 --- /dev/null +++ b/templates/web/base/report/form/private_details.html @@ -0,0 +1,21 @@ +<!-- private_details.html --> +<h2 class="form-section-heading form-section-heading--private">[% loc('Tell us about you') %]</h2> + +[% UNLESS c.user_exists %] +<p class="hidden-nojs js-new-report-sign-in-hidden"> + <a id="js-new-report-show-sign-in" href="#">[% loc('Or sign in with password to prefill this information.') %]</a> +</p> +[% END %] + +[% IF type == 'report' %] +<p class="form-section-description js-new-report-sign-in-hidden" id="js-councils_text_private"> + [% IF js %] + [% loc('These details will be sent to the council, but will never be shown online without your permission.') %] + (<a href="/privacy">[% loc('See our privacy policy') %]</a>.) + [% ELSE %] + [% PROCESS 'report/new/councils_text_private.html' %] + [% END %] +</p> +[% END %] + +<!-- /private_details.html --> diff --git a/templates/web/base/report/form/user.html b/templates/web/base/report/form/user.html new file mode 100644 index 000000000..9e5eaf3af --- /dev/null +++ b/templates/web/base/report/form/user.html @@ -0,0 +1,25 @@ +<!-- report/form/user.html --> +<div class="js-new-report-user-hidden form-section-preview form-section-preview--next + [%~ ' hidden-nojs' IF c.user_exists OR NOT c.cobrand.social_auth_enabled %]"> + <h2 class="form-section-heading form-section-heading--private hidden-nojs"> + [% loc('Next:') %] [% loc('Tell us about you') %] + </h2> +[% IF c.user_exists OR NOT c.cobrand.social_auth_enabled %] + <button id="js-new-report-user-show" class="btn btn--block hidden-nojs">[% loc('Continue') %]</button> +[% ELSE %] + [% IF c.config.FACEBOOK_APP_ID %] + <button name="facebook_sign_in" id="facebook_sign_in" value="facebook_sign_in" class="btn btn--block btn--social btn--facebook"> + <img alt="" src="/i/facebook-icon-32.png" width="17" height="32"> + [% loc('Log in with Facebook') %] + </button> + [% END %] + [% IF c.config.TWITTER_KEY %] + <button name="twitter_sign_in" id="twitter_sign_in" value="twitter_sign_in" class="btn btn--block btn--social btn--twitter"> + <img alt="" src="/i/twitter-icon-32.png" width="17" height="32"> + [% loc('Log in with Twitter') %] + </button> + [% END %] + <button id="js-new-report-user-show" class="btn btn--block hidden-nojs">[% loc('Log in with email') %]</button> +[% END %] +</div> +<!-- /report/form/user.html --> diff --git a/templates/web/base/report/form/user_loggedout.html b/templates/web/base/report/form/user_loggedout.html index b5e5d2970..8743883ee 100644 --- a/templates/web/base/report/form/user_loggedout.html +++ b/templates/web/base/report/form/user_loggedout.html @@ -1,32 +1,17 @@ +<!-- user_loggedout.html --> + +<div id="form_sign_in"> + [% PROCESS 'report/form/private_details.html' %] + [% IF c.cobrand.social_auth_enabled %] - [% IF c.config.FACEBOOK_APP_ID %] - <div class="form-box"> - <button name="facebook_sign_in" id="facebook_sign_in" value="facebook_sign_in" class="btn btn--block btn--social btn--facebook"> - <img alt="" src="/i/facebook-icon-32.png" width="17" height="32"> - [% loc('Log in with Facebook') %] - </button> - </div> - [% END %] - [% IF c.config.TWITTER_KEY %] - <div class="form-box"> - <button name="twitter_sign_in" id="twitter_sign_in" value="twitter_sign_in" class="btn btn--block btn--social btn--twitter"> - <img alt="" src="/i/twitter-icon-32.png" width="17" height="32"> - [% loc('Log in with Twitter') %] - </button> - </div> - [% END %] - <div id="js-social-email-hide"> [% PROCESS 'report/form/user_loggedout_email.html' required=0 %] [% ELSE %] [% PROCESS 'report/form/user_loggedout_email.html' required=1 %] [% END %] -<div id="form_sign_in"> - <h2>[% tprintf(loc("Do you have a %s password?", "%s is the site name"), site_name) %]</h2> + <h2 class="hidden-js">[% tprintf(loc("Do you have a %s password?", "%s is the site name"), site_name) %]</h2> [% PROCESS 'report/form/user_loggedout_password.html' %] [% PROCESS 'report/form/user_loggedout_by_email.html' %] </div> -[% IF c.cobrand.social_auth_enabled %] - </div> -[% END %] +<!-- /user_loggedout.html --> diff --git a/templates/web/base/report/form/user_loggedout_by_email.html b/templates/web/base/report/form/user_loggedout_by_email.html index 4c19cdf76..e115f6d20 100644 --- a/templates/web/base/report/form/user_loggedout_by_email.html +++ b/templates/web/base/report/form/user_loggedout_by_email.html @@ -1,4 +1,5 @@ -<div id="form_sign_in_no" class="form-box"> +<!-- user_loggedout_by_email.html --> +<div id="form_sign_in_no" class="form-box js-new-report-sign-in-hidden"> [% PROCESS 'report/form/user_loggedout_by_email_heading.html' %] [% INCLUDE 'report/new/extra_name.html' %] @@ -6,12 +7,7 @@ [% INCLUDE 'report/form/user_name.html' %] [% INCLUDE 'report/_show_name_label.html' %] - [% IF type == 'update' %] - <div class="checkbox-group"> - <input type="checkbox" name="add_alert" id="form_add_alert" value="1"[% ' checked' IF add_alert %]> - <label class="inline" for="form_add_alert">[% loc( 'Alert me to future updates' ) %]</label> - </div> - [% ELSE %] + [% IF type != 'update' %] [% UNLESS c.cobrand.call_hook('disable_phone_number_entry') %] <div id="js-hide-if-username-phone"> <label for="form_phone">[% loc('Phone number (optional)') %]</label> @@ -35,11 +31,19 @@ </div> [% END %] - <label for="password_register">[% loc('Password (optional)') %]</label> + [% IF type == 'update' %] + <div class="checkbox-group"> + <input type="checkbox" name="add_alert" id="form_add_alert" value="1"[% ' checked' IF add_alert %]> + <label class="inline" for="form_add_alert">[% loc( 'Alert me to future updates' ) %]</label> + </div> + [% END %] + + <label class="hidden-js hidden-nojs js-new-report-forgotten-shown" for="password_register">[% loc('New password:') %]</label> + <label for="password_register" class="js-new-report-forgotten-hidden">[% loc('Password (optional)') %]</label> [% IF field_errors.password_register %] <p class='form-error'>[% field_errors.password_register %]</p> [% END %] - <div class="general-notes" id="password_register_hint"> + <div class="general-notes js-new-report-forgotten-hidden" id="password_register_hint"> [% IF c.cobrand.moniker == 'bromley' %] <p>[% loc('Providing a password is optional, but doing so will allow you to more easily report future problems, leave updates and manage your reports.') %] [% tprintf(loc('Your password should include %d or more characters.'), c.cobrand.password_minimum_length) %]</p> [% ELSE %] @@ -52,3 +56,4 @@ <input class="btn btn--primary btn--block btn--final js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]"> </div> +<!-- /user_loggedout_by_email.html --> diff --git a/templates/web/base/report/form/user_loggedout_by_email_heading.html b/templates/web/base/report/form/user_loggedout_by_email_heading.html index 178d54dfe..6aa90c2fd 100644 --- a/templates/web/base/report/form/user_loggedout_by_email_heading.html +++ b/templates/web/base/report/form/user_loggedout_by_email_heading.html @@ -1,13 +1,13 @@ [% IF c.config.SMS_AUTHENTICATION %] [% IF type == 'update' %] - <h5>[% loc('<strong>No</strong> Let me confirm my update by email/text') %]</h5> + <h5 class="hidden-js">[% loc('<strong>No</strong> Let me confirm my update by email/text') %]</h5> [% ELSE %] - <h5>[% loc('<strong>No</strong> Let me confirm my report by email/text') %]</h5> + <h5 class="hidden-js">[% loc('<strong>No</strong> Let me confirm my report by email/text') %]</h5> [% END %] [% ELSE %] [% IF type == 'update' %] - <h5>[% loc('<strong>No</strong> Let me confirm my update by email') %]</h5> + <h5 class="hidden-js">[% loc('<strong>No</strong> Let me confirm my update by email') %]</h5> [% ELSE %] - <h5>[% loc('<strong>No</strong> Let me confirm my report by email') %]</h5> + <h5 class="hidden-js">[% loc('<strong>No</strong> Let me confirm my report by email') %]</h5> [% END %] [% END %] diff --git a/templates/web/base/report/form/user_loggedout_email.html b/templates/web/base/report/form/user_loggedout_email.html index d2ff4a820..932bc97a7 100644 --- a/templates/web/base/report/form/user_loggedout_email.html +++ b/templates/web/base/report/form/user_loggedout_email.html @@ -1,3 +1,4 @@ +<!-- user_loggedout_email.html --> [% IF c.config.SMS_AUTHENTICATION %] [% SET username_label = loc('Your email or mobile') %] [% SET username_type = 'text' %] @@ -16,3 +17,4 @@ value="[% username_value | html %]" [% IF required %]required[% END %] class="form-control required"> +<!-- /user_loggedout_email.html --> diff --git a/templates/web/base/report/form/user_loggedout_password.html b/templates/web/base/report/form/user_loggedout_password.html index 72c055342..016da88ad 100644 --- a/templates/web/base/report/form/user_loggedout_password.html +++ b/templates/web/base/report/form/user_loggedout_password.html @@ -1,6 +1,12 @@ -<div id="form_sign_in_yes" class="form-box"> +<!-- user_loggedout_password.html --> +<div id="form_sign_in_yes" class="form-box hidden-js js-new-report-sign-in-shown"> - <h5>[% loc('<strong>Yes</strong> I have a password') %]</h5> + <h5 class="hidden-js">[% loc('<strong>Yes</strong> I have a password') %]</h5> + + <p class="hidden-nojs"> + [% loc('No account?') %] + <a id="js-new-report-hide-sign-in" href="#">[% loc('Fill in your details manually.') %]</a> + </p> <label for="password_sign_in">[% loc('Your password') %]</label> [% IF field_errors.password %] @@ -8,11 +14,17 @@ [% END %] <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" value=""> + <p class="hidden-nojs"> + [% loc('Forgotten your password?') %] + <a id="js-new-report-sign-in-forgotten" href="#">[% loc('Fill in your details manually.') %]</a> + </p> + <div class="general-notes"> - <p><strong>[% loc('Forgotten your password?') %]</strong> + <p class="hidden-js"><strong>[% loc('Forgotten your password?') %]</strong> [% loc('Confirm by email instead, providing a new password at that point. When you confirm, your password will be updated.') %]</p> </div> <input class="btn btn--primary btn--block btn--final js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]"> </div> +<!-- /user_loggedout_password.html --> diff --git a/templates/web/base/report/form/user_name.html b/templates/web/base/report/form/user_name.html index c7b0bf7fa..4a90ee5b7 100644 --- a/templates/web/base/report/form/user_name.html +++ b/templates/web/base/report/form/user_name.html @@ -1,3 +1,4 @@ +<!-- user_name.html --> <label for="form_name">[% loc('Name') %] [% TRY %] [% INCLUDE 'report/form/after_name.html' %] @@ -9,3 +10,4 @@ [% END %] <input type="text" class="form-control [% valid_class OR 'validName' %] js-form-name [% extra_class %]" value="[% object.name || c.user.name | html %]" name="name" id="form_name"> +<!-- /user_name.html --> diff --git a/templates/web/base/report/new/councils_text_private.html b/templates/web/base/report/new/councils_text_private.html index 4ee7846f1..b6141d500 100644 --- a/templates/web/base/report/new/councils_text_private.html +++ b/templates/web/base/report/new/councils_text_private.html @@ -1,8 +1,8 @@ [% FILTER collapse %] [% IF unresponsive.$category OR unresponsive.ALL OR bodies_to_list.size == 0 %] - [% loc('These will never be shown online.') %] + [% loc('These details will never be shown online without your permission.') %] [% ELSE %] - [% loc('These will be sent to the council, but will never be shown online.') %] + [% loc('These details will be sent to the council, but will never be shown online without your permission.') %] [% END %] (<a href="/privacy">[% loc('See our privacy policy') %]</a>.) [% END -%] diff --git a/templates/web/base/report/new/fill_in_details_form.html b/templates/web/base/report/new/fill_in_details_form.html index c819d34a0..c9bb2bf87 100644 --- a/templates/web/base/report/new/fill_in_details_form.html +++ b/templates/web/base/report/new/fill_in_details_form.html @@ -1,5 +1,7 @@ <h1>[% loc('Report your problem') %]</h1> +<div class="js-new-report-user-hidden"> + [% IF report.used_map %] <ul class="change_location"> <li class="change_location__map">[% loc('Click the map or drag the pin to adjust the location') %]</li> @@ -7,8 +9,12 @@ </ul> [% END %] +</div> + [% TRY %][% INCLUDE 'report/new/roads_message.html' %][% CATCH file %][% END %] +<div class="js-new-report-user-hidden"> + <div id="js-top-message"> [% PROCESS 'report/new/top_message.html' %] </div> @@ -24,9 +30,13 @@ [% INCLUDE 'errors.html' %] +</div> + <fieldset> <div id="problem_form"> - [% PROCESS 'report/new/form_report.html' %] + <div class="js-new-report-user-hidden"> + [% PROCESS 'report/new/form_report.html' %] + </div> [% PROCESS 'report/new/form_user.html' %] </div> </fieldset> diff --git a/templates/web/base/report/new/form_report.html b/templates/web/base/report/new/form_report.html index 87956c9cf..39e29c723 100644 --- a/templates/web/base/report/new/form_report.html +++ b/templates/web/base/report/new/form_report.html @@ -1,3 +1,4 @@ +<!-- report/new/form_report.html --> [% INCLUDE 'report/new/form_heading.html' %] [% IF field_errors.bodies %] @@ -77,3 +78,4 @@ <input type="hidden" id="do_not_send" name="do_not_send" value=""> <input type="hidden" name="submit_problem" value="1"> </div> +<!-- /report/new/form_report.html --> diff --git a/templates/web/base/report/new/form_user.html b/templates/web/base/report/new/form_user.html index 92fc9af42..a3f236964 100644 --- a/templates/web/base/report/new/form_user.html +++ b/templates/web/base/report/new/form_user.html @@ -1,17 +1,24 @@ +<!-- report/new/form_user.html --> <div class="js-hide-if-invalid-category"> -<h2 class="form-section-heading form-section-heading--private">[% loc('Private details') %]</h2> -<p class="form-section-description" id="js-councils_text_private"> - [% IF js %] - [% loc('These will be sent to the council, but will never be shown online.') %] - (<a href="/privacy">[% loc('See our privacy policy') %]</a>.) - [% ELSE %] - [% PROCESS 'report/new/councils_text_private.html' %] - [% END %] -</p> + + [% PROCESS 'report/form/user.html' %] + + <div class="hidden-js js-new-report-user-shown"> + <div class="hidden-nojs form-section-preview"> + <h2 class="form-section-heading">[% loc('About the problem') %]</h2> + <p> + <strong class="js-form-section-preview" data-source="#form_title"></strong> + <span class="js-form-section-preview" data-source="#form_detail"></span> + </p> + <button id="js-new-report-user-hide" class="btn btn--block">[% loc('Edit report details') %]</button> + </div> [% IF c.user_exists %] [% PROCESS "report/new/form_user_loggedin.html" %] [% ELSE %] [% PROCESS "report/form/user_loggedout.html" type='report' object=report %] [% END %] + + </div> </div> +<!-- /report/new/form_user.html --> diff --git a/templates/web/base/report/new/form_user_loggedin.html b/templates/web/base/report/new/form_user_loggedin.html index 0c6c66e27..cf6c067c6 100644 --- a/templates/web/base/report/new/form_user_loggedin.html +++ b/templates/web/base/report/new/form_user_loggedin.html @@ -1,4 +1,5 @@ -<div class="form-box" id="form-box--logged-in-name"> +<!-- report/new/form_user_loggedin.html --> +[% PROCESS 'report/form/private_details.html' %] [% IF js %] <div style="display:none" id="js-contribute-as-wrapper"> @@ -68,4 +69,4 @@ [% END %] <input class="btn btn--primary btn--block btn--final js-submit_register" type="submit" name="submit_register" value="[% loc('Submit') %]"> -</div> +<!-- /report/new/form_user_loggedin.html --> diff --git a/templates/web/base/report/update-form.html b/templates/web/base/report/update-form.html index 6817a0792..9a3717ed9 100644 --- a/templates/web/base/report/update-form.html +++ b/templates/web/base/report/update-form.html @@ -22,21 +22,15 @@ <input type="hidden" name="token" value="[% csrf_token %]"> <fieldset> [% IF NOT login_success AND NOT oauth_need_email %] - [% INCLUDE 'report/update/form_update.html' %] - [% END %] - [% IF c.user_exists %] - [% PROCESS "report/update/form_user_loggedin.html" %] - [% ELSIF oauth_need_email %] - [% PROCESS 'report/form/user_loggedout_email.html' type='update' object=update required=1 %] - <div id="form_sign_in"> - [% PROCESS 'report/form/user_loggedout_by_email.html' object=update type='update' valid_class='validNameU' %] - <input type="hidden" name="oauth_need_email" value="1"> + <div class="js-new-report-user-hidden"> + [% INCLUDE 'report/update/form_update.html' %] </div> - [% ELSE %] - [% PROCESS "report/form/user_loggedout.html" type='update' object=update %] [% END %] + [% PROCESS "report/update/form_user.html" %] [% IF login_success OR oauth_need_email %] - [% INCLUDE 'report/update/form_update.html' %] + <div class="js-new-report-user-hidden"> + [% INCLUDE 'report/update/form_update.html' %] + </div> [% END %] </fieldset> </form> diff --git a/templates/web/base/report/update/form_user.html b/templates/web/base/report/update/form_user.html new file mode 100644 index 000000000..5d4c67528 --- /dev/null +++ b/templates/web/base/report/update/form_user.html @@ -0,0 +1,22 @@ +[% PROCESS 'report/form/user.html' %] + +<div class="hidden-js js-new-report-user-shown"> + <div class="hidden-nojs form-section-preview"> + <h2 class="form-section-heading">[% loc('Your update') %]</h2> + <p class="js-form-section-preview" data-source="#form_update"></p> + <button id="js-new-report-user-hide" class="btn btn--block">[% loc('Edit your update') %]</button> + </div> + + [% IF c.user_exists %] + [% PROCESS "report/update/form_user_loggedin.html" %] + [% ELSIF oauth_need_email %] + [% PROCESS 'report/form/user_loggedout_email.html' type='update' object=update required=1 %] + <div id="form_sign_in"> + [% PROCESS 'report/form/user_loggedout_by_email.html' object=update type='update' valid_class='validNameU' %] + <input type="hidden" name="oauth_need_email" value="1"> + </div> + [% ELSE %] + [% PROCESS "report/form/user_loggedout.html" type='update' object=update %] + [% END %] + +</div> diff --git a/templates/web/base/report/update/form_user_loggedin.html b/templates/web/base/report/update/form_user_loggedin.html index f001d51b1..bec783bb4 100644 --- a/templates/web/base/report/update/form_user_loggedin.html +++ b/templates/web/base/report/update/form_user_loggedin.html @@ -1,3 +1,5 @@ +<!-- report/update/form_user_loggedin.html --> +[% PROCESS 'report/form/private_details.html' %] [% INCLUDE 'report/new/extra_name.html' %] [% PROCESS 'user/_anonymity.html' anonymous = update.anonymous %] @@ -34,3 +36,4 @@ </div> <div class="clearfix"><input class="btn btn--primary btn--block btn--final js-submit_register" type="submit" name="submit_register" value="[% loc('Post') %]"></div> +<!-- /report/update/form_user_loggedin.html --> diff --git a/templates/web/bromley/report/form/private_details.html b/templates/web/bromley/report/form/private_details.html new file mode 100644 index 000000000..d146c7ca3 --- /dev/null +++ b/templates/web/bromley/report/form/private_details.html @@ -0,0 +1,18 @@ +<!-- private_details.html --> +<h2 class="form-section-heading form-section-heading--private">[% loc('Tell us about you') %]</h2> + +[% UNLESS c.user_exists %] +<p class="hidden-nojs js-new-report-sign-in-hidden"> + <a id="js-new-report-show-sign-in" href="#">[% loc('Or sign in with password to prefill this information.') %]</a> +</p> +[% END %] + +<p class="form-section-description js-new-report-sign-in-hidden" id="js-councils_text_private"> + [% IF js %] + [% loc('These details will be sent to the council, but will never be shown online without your permission.') %] + (<a href="/faq#privacy">[% loc('See our privacy policy') %]</a>.) + [% ELSE %] + [% PROCESS 'report/new/councils_text_private.html' %] + [% END %] +</p> +<!-- /private_details.html --> diff --git a/templates/web/bromley/report/form/user_loggedout.html b/templates/web/bromley/report/form/user_loggedout.html deleted file mode 100644 index ceb6d0cf9..000000000 --- a/templates/web/bromley/report/form/user_loggedout.html +++ /dev/null @@ -1,11 +0,0 @@ -[% PROCESS 'report/form/user_loggedout_email.html' required=1 %] - -<div id="form_sign_in"> - [% IF type == 'update' %] - <p>To submit your update you now need to confirm it either by email or by using a FixMyStreet password.</p> - [% ELSE %] - <p>To submit your report you now need to confirm it either by email or by using a FixMyStreet password.</p> - [% END %] - [% PROCESS 'report/form/user_loggedout_by_email.html' %] - [% PROCESS 'report/form/user_loggedout_password.html' %] -</div> diff --git a/templates/web/bromley/report/form/user_loggedout_by_email_heading.html b/templates/web/bromley/report/form/user_loggedout_by_email_heading.html deleted file mode 100644 index e88cf404a..000000000 --- a/templates/web/bromley/report/form/user_loggedout_by_email_heading.html +++ /dev/null @@ -1 +0,0 @@ -<h5>Confirm my report by email</h5> diff --git a/templates/web/bromley/report/form/user_loggedout_email.html b/templates/web/bromley/report/form/user_loggedout_email.html index 4315807ba..fc4f83f9c 100644 --- a/templates/web/bromley/report/form/user_loggedout_email.html +++ b/templates/web/bromley/report/form/user_loggedout_email.html @@ -1,10 +1,22 @@ +[% IF c.config.SMS_AUTHENTICATION %] + [% SET username_label = loc('Your email or mobile') %] + [% SET username_type = 'text' %] + [% SET username_value = object.user.username %] +[% ELSE %] + [% SET username_label = loc('Your email') %] + [% SET username_type = 'email' %] + [% SET username_value = object.user.email %] +[% END %] + <label for="form_username">[% loc('Email' ) %] [% IF type == 'update' %] <span class="muted">([% loc('We never show your email') %])</span> [% END %] </label> - [% IF field_errors.username %] <p class='form-error'>[% field_errors.username %]</p> [% END %] -<input class="form-control" type="email" name="username" id="form_username" value="[% object.user.email | html %]" required> +<input type="[% username_type %]" name="username" id="form_username" + value="[% username_value | html %]" + [% IF required %]required[% END %] + class="form-control required"> diff --git a/templates/web/bromley/report/form/user_loggedout_password.html b/templates/web/bromley/report/form/user_loggedout_password.html deleted file mode 100644 index def5a51b7..000000000 --- a/templates/web/bromley/report/form/user_loggedout_password.html +++ /dev/null @@ -1,13 +0,0 @@ -<div id="form_sign_in_yes" class="form-box"> - - <h5>Confirm my report with my FixMyStreet password</h5> - - <label for="password_sign_in">[% loc('Your password') %]</label> - [% IF field_errors.password %] - <p class='form-error'>[% field_errors.password %]</p> - [% END %] - <div class="form-txt-submit-box"> - <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" value=""> - <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]"> - </div> -</div> diff --git a/templates/web/bromley/report/new/form_user.html b/templates/web/bromley/report/new/form_user.html deleted file mode 100644 index e48b390bf..000000000 --- a/templates/web/bromley/report/new/form_user.html +++ /dev/null @@ -1,22 +0,0 @@ -[%# - Bromley overrides form_user.html so that they link to their own - privacy statement in /faq#privacy, swap the order of the "confirm - by email" and "confirm by password" boxes, and ask people for their - title, first name, and last name separately. -%] - -<h2 class="form-section-heading form-section-heading--private">[% loc('Private details') %]</h2> -<p class="form-section-description" id="js-councils_text_private"> - [% IF js %] - [% loc('These will be sent to the council, but will never be shown online.') %] - (<a href="/faq#privacy">[% loc('See our privacy policy') %]</a>.) - [% ELSE %] - [% PROCESS 'report/new/councils_text_private.html' %] - [% END %] -</p> - -[% IF c.user_exists %] - [% PROCESS "report/new/form_user_loggedin.html" %] -[% ELSE %] - [% PROCESS "report/form/user_loggedout.html" type='report' object=report %] -[% END %] diff --git a/templates/web/bromley/report/update-form.html b/templates/web/bromley/report/update-form.html index aeabfdfbd..9d589bc93 100644 --- a/templates/web/bromley/report/update-form.html +++ b/templates/web/bromley/report/update-form.html @@ -12,24 +12,18 @@ <input type="hidden" name="token" value="[% csrf_token %]"> <fieldset> [% IF NOT login_success AND NOT oauth_need_email %] - [% INCLUDE 'report/update/form_update.html' %] - [% END %] - [% IF c.user_exists %] - [% PROCESS 'report/update/form_user_loggedin.html' %] - [% ELSIF oauth_need_email %] - [% PROCESS 'report/form/user_loggedout_email.html' type='update' object=update required=1 %] - <div id="form_sign_in"> - [% PROCESS 'report/form/user_loggedout_by_email.html' object=update type='update' valid_class='validNameU' %] - <input type="hidden" name="oauth_need_email" value="1"> + <div class="js-new-report-user-hidden"> + [% INCLUDE 'report/update/form_update.html' %] </div> - [% ELSE %] - [% PROCESS "report/form/user_loggedout.html" type='update' object=update %] [% END %] + [% PROCESS "report/update/form_user.html" %] <p>Your information will only be used in accordance with our <a href="/faq#privacy">privacy policy</a>.</p> [% IF login_success OR oauth_need_email %] - [% INCLUDE 'report/update/form_update.html' %] + <div class="js-new-report-user-hidden"> + [% INCLUDE 'report/update/form_update.html' %] + </div> [% END %] </fieldset> </form> diff --git a/templates/web/fixamingata/report/form/user_loggedout.html b/templates/web/fixamingata/report/form/user_loggedout.html deleted file mode 100644 index 7744739f3..000000000 --- a/templates/web/fixamingata/report/form/user_loggedout.html +++ /dev/null @@ -1,6 +0,0 @@ - [% PROCESS 'report/form/user_loggedout_email.html' required=1 %] - -<div id="form_sign_in"> - [% PROCESS 'report/form/user_loggedout_by_email.html' %] - [% PROCESS 'report/form/user_loggedout_password.html' %] -</div> diff --git a/templates/web/fixamingata/report/form/user_loggedout_by_email_heading.html b/templates/web/fixamingata/report/form/user_loggedout_by_email_heading.html deleted file mode 100644 index 6dd8a3c93..000000000 --- a/templates/web/fixamingata/report/form/user_loggedout_by_email_heading.html +++ /dev/null @@ -1 +0,0 @@ -<h5>Om du inte har ett lösenord fyller du i ditt namn och eventuellt telefonnummer och nytt lösenord (valfria) här. När du skickar din rapport får du epost med en länk som du måste klicka på för att bekräfta rapporten. Om du redan har ett lösenord fyller du i detta längre ner på sidan och behöver då inte bekräfta rapporten.</h5> diff --git a/templates/web/fixamingata/report/form/user_loggedout_password.html b/templates/web/fixamingata/report/form/user_loggedout_password.html deleted file mode 100644 index be0f97ef3..000000000 --- a/templates/web/fixamingata/report/form/user_loggedout_password.html +++ /dev/null @@ -1,11 +0,0 @@ -<div id="form_sign_in_yes" class="form-box"> - - <label for="password_sign_in">Jag har ett lösenord sedan tidigare:</label> - [% IF field_errors.password %] - <p class='form-error'>[% field_errors.password %]</p> - [% END %] - <div class="form-txt-submit-box"> - <input class="form-control" type="password" name="password_sign_in" id="password_sign_in" value=""> - <input class="green-btn js-submit_sign_in" type="submit" name="submit_sign_in" value="[% loc('Submit') %]"> - </div> -</div> diff --git a/web/cobrands/fixmystreet/fixmystreet.js b/web/cobrands/fixmystreet/fixmystreet.js index b26c90971..31b47f7a7 100644 --- a/web/cobrands/fixmystreet/fixmystreet.js +++ b/web/cobrands/fixmystreet/fixmystreet.js @@ -855,22 +855,100 @@ $.extend(fixmystreet.set_up, { $('.js-sign-in-password').show().css('visibility', 'visible'); }); - // Log in with email button - var email_form = $('#js-social-email-hide'), - button = $('<button class="btn btn--social btn--social-email">'+translation_strings.login_with_email+'</button>'), - form_box = $('<div class="form-box"></div>'); - button.click(function(e) { + var show = function(selector) { + var deferred = $.Deferred(); + $(selector).hide().removeClass('hidden-js').slideDown(400, function(){ + $(this).css('display', ''); + deferred.resolveWith(this); + }); + return deferred.promise(); + }; + + var hide = function(selector) { + var deferred = $.Deferred(); + $(selector).slideUp(400, function(){ + $(this).addClass('hidden-js').css('display', ''); + deferred.resolveWith(this); + }); + return deferred.promise(); + }; + + var focusFirstVisibleInput = function() { + // Ignore logged-in form here, because it should all be pre-filled already! + $('#form_sign_in_yes input, #form_sign_in_no input').filter(':visible').eq(0).focus(); + }; + + // Display tweak + $('.js-new-report-sign-in-hidden.form-box, .js-new-report-sign-in-shown.form-box').removeClass('form-box'); + + $('#js-new-report-user-hide').click(function(e) { + e.preventDefault(); + $('.js-new-report-user-shown')[0].scrollIntoView({behavior: "smooth"}); + hide('.js-new-report-user-shown'); + show('.js-new-report-user-hidden'); + }); + $('#js-new-report-user-show').click(function(e) { + e.preventDefault(); + if (!$(this).closest('form').validate().form()) { + return; + } + $('.js-new-report-user-hidden')[0].scrollIntoView({behavior: "smooth"}); + hide('.js-new-report-user-hidden'); + show('.js-new-report-user-shown').then(function(){ + focusFirstVisibleInput(); + }); + }); + + $('#js-new-report-show-sign-in').click(function(e) { + $('.js-new-report-sign-in-shown').removeClass('hidden-js'); + $('.js-new-report-sign-in-hidden').addClass('hidden-js'); + focusFirstVisibleInput(); + }); + + $('#js-new-report-hide-sign-in').click(function(e) { e.preventDefault(); - email_form.fadeIn(500); - form_box.hide(); + $('.js-new-report-sign-in-shown').addClass('hidden-js'); + $('.js-new-report-sign-in-hidden').removeClass('hidden-js'); + focusFirstVisibleInput(); + }); + + $('#js-new-report-sign-in-forgotten').click(function() { + $('.js-new-report-sign-in-shown').addClass('hidden-js'); + $('.js-new-report-sign-in-hidden').removeClass('hidden-js'); + $('.js-new-report-forgotten-shown').removeClass('hidden-js'); + $('.js-new-report-forgotten-hidden').addClass('hidden-js'); + focusFirstVisibleInput(); }); - form_box.append(button).insertBefore(email_form); - if ($('.form-error').length) { - button.click(); + + var err = $('.form-error'); + if (err.length) { $('.js-sign-in-password-btn').click(); + if (err.closest(".js-new-report-sign-in-shown").length) { + $('.js-new-report-user-shown').removeClass('hidden-js'); + $('.js-new-report-user-hidden').addClass('hidden-js'); + $('.js-new-report-sign-in-shown').removeClass('hidden-js'); + $('.js-new-report-sign-in-hidden').addClass('hidden-js'); + } else if (err.closest('.js-new-report-sign-in-hidden, .js-new-report-user-shown').length) { + $('.js-new-report-user-shown').removeClass('hidden-js'); + $('.js-new-report-user-hidden').addClass('hidden-js'); + } } }, + form_section_previews: function() { + $('.js-form-section-preview').each(function(){ + var $el = $(this); + var $source = $( $el.attr('data-source') ); + $source.on('change', function(){ + var val = $source.val(); + if ( val.length > 80 ) { + val = val.substring(0, 80) + '…'; + } + $el.text( val ); + }); + }); + }, + reporting_hide_phone_email: function() { $('#form_username').on('keyup change', function() { var username = $(this).val(); diff --git a/web/cobrands/sass/_base.scss b/web/cobrands/sass/_base.scss index 54d1b4f02..98e043e0e 100644 --- a/web/cobrands/sass/_base.scss +++ b/web/cobrands/sass/_base.scss @@ -359,6 +359,27 @@ select.form-control { line-height: 1em * (22/16); } +.form-section-preview { + // If social_auth_enabled, but no javascript, we want the "Next" preview + // to be visible but without any other styling. Once javascript is enabled, + // the "next"/"back" buttons will work, so we want the styling back. + html.js & { + background-color: #eee; + border-radius: 4px; + padding: 1em; + + .form-section-heading { + margin: 0 0 0.5em 0; + } + } +} + +// Purposefully *not* wrapped in `html.js` because the margin-top helps +// separate the social login buttons from the .description_tips list. +.form-section-preview--next { + margin-top: 1.5em; +} + // grey background, full width box .form-box { margin: 0 -1em 0.25em; @@ -395,12 +416,6 @@ select.form-control { } } -// When the user is logged in, we show a shorter form-box, -// without a heading before it. So add some space before. -#form-box--logged-in-name { - margin-top: 1.25em; -} - .change_location { color: #666; margin: 0; @@ -907,10 +922,6 @@ input.final-submit { margin-top: 1.25em; // matches margin-top on `label` } -.js #js-social-email-hide { - display: none; -} - .banner { position: relative; p { |