From 56a86bf298dce4cadbcc156bc0863c4fa7403be2 Mon Sep 17 00:00:00 2001
From: Hugh Willson <hugh@octonary.com>
Date: Wed, 13 Dec 2017 11:29:55 -0500
Subject: [PATCH] Help browser account saving with accounts-ui login/signup
 forms (#9442)

* Help browser account saving with accounts-ui login/signup forms

`accounts-ui-unstyled` currently uses `<div />`'s to hold its
login/signup forms, as well as `<div />`'s to represent the
login/signup buttons in the form. By not using proper
`<form />` and `<button />` elements, certain browser's do not
notice incoming login/signup requests, and therefore do not
trigger their built in "would you like to save your user/password"
functionality. This commit adjusts the `accounts-ui-unstyled`
login/signup form to use proper `<form />` and `<button />`
elements, allowing most (Chrome, Firefox, IE - Safari will
recognize the request when a user attempts to leave the page)
browsers to recognize incoming login/signup requests.

Fixes #1746.

* Add History.md entry outlining potential back compat issues

* Bump minor versions
---
 History.md                                    | 15 +++++++++
 .../login_buttons.import.less                 |  4 +++
 .../login_buttons_dropdown.html               | 31 +++++--------------
 .../login_buttons_dropdown.js                 |  3 +-
 packages/accounts-ui-unstyled/package.js      |  2 +-
 packages/accounts-ui/package.js               |  2 +-
 6 files changed, 30 insertions(+), 27 deletions(-)

diff --git a/History.md b/History.md
index 033a7767b2..c4081368ca 100644
--- a/History.md
+++ b/History.md
@@ -1,5 +1,20 @@
 ## v.NEXT
 
+* The `accounts-ui-unstyled` package has been updated to use `<form />` and
+  `<button />` tags with its login/signup form, instead of `<div />`'s. This
+  change helps browser's notice login/signup requests, allowing them to
+  trigger their "remember your login/password" functionality.
+
+  > **Note:** If your application is styling the login/signup form using a CSS
+    path that includes the replaced `div` elements (e.g.
+    `div.login-form { ...` or `div.login-button { ...`), your styles will
+    break. You can either update your CSS to use `form.` / `button.` or
+    adjust your CSS specificity by styling on `class` / `id` attributes
+    only.
+
+  [Issue #1746](https://github.com/meteor/meteor/issues/1746)
+  [PR #9442](https://github.com/meteor/meteor/pull/9442)
+
 * The `meteor-babel` npm package (along with its Babel-related
   dependencies) has been updated to version 7.0.0-beta.34, a major update
   from Babel 6. Thanks to the strong abstraction of the `meteor-babel`
diff --git a/packages/accounts-ui-unstyled/login_buttons.import.less b/packages/accounts-ui-unstyled/login_buttons.import.less
index 9fe144f9e7..0f4af375a3 100644
--- a/packages/accounts-ui-unstyled/login_buttons.import.less
+++ b/packages/accounts-ui-unstyled/login_buttons.import.less
@@ -73,6 +73,10 @@
     position: relative; // so that we can position the image absolutely within the button
   }
 
+  button.login-button {
+    width: 100%;
+  }
+
   .login-buttons-with-only-one-button {
     display: inline-block;
     .login-button { display: inline-block; }
diff --git a/packages/accounts-ui-unstyled/login_buttons_dropdown.html b/packages/accounts-ui-unstyled/login_buttons_dropdown.html
index f7d4a16f61..6b1f11b756 100644
--- a/packages/accounts-ui-unstyled/login_buttons_dropdown.html
+++ b/packages/accounts-ui-unstyled/login_buttons_dropdown.html
@@ -97,20 +97,23 @@
   {{#if inForgotPasswordFlow}}
     {{> _forgotPasswordForm}}
   {{else}}
-    <div class="login-form login-password-form">
+    <form class="login-form login-password-form">
       {{#each fields}}
         {{> _loginButtonsFormField}}
       {{/each}}
 
       {{> _loginButtonsMessages}}
 
-      <div class="login-button login-button-form-submit" id="login-buttons-password">
+      <button
+        class="login-button login-button-form-submit"
+        id="login-buttons-password"
+      >
         {{#if inSignupFlow}}
           Create account
         {{else}}
           Sign in
         {{/if}}
-      </div>
+      </button>
 
       {{#if inLoginFlow}}
         {{#if showCreateAccountLink}}
@@ -129,7 +132,7 @@
       {{#if inSignupFlow}}
         {{> _loginButtonsBackToLoginLink}}
       {{/if}}
-    </div>
+    </form>
   {{/if}}
 </template>
 
@@ -156,26 +159,6 @@
   </div>
 </template>
 
-
-<!--
-This strategy for login forms means that browsers' "Remember password"
-functionality does not work. Different browsers have different
-requirements for remembering passwords:
-
-- Firefox: Must be an actual form (with a submit button), but you can
-cancel the submit with onsubmit='return false'.
-
-- Safari: Must be an actual form, and the form must actually be
-submitted somewhere (though it can target a hidden iframe and go to a
-bogus URL)
-
-- Chrome: Must be an actual form, and the the form elements must be
-present in the initial HTML, not added to the page with javascript. This
-basically rules out using normal meteor templates.
-
-https://gist.github.com/968927
--->
-
 <template name="_loginButtonsFormField">
   {{#if visible}}
     <div id="login-{{fieldName}}-label-and-input">
diff --git a/packages/accounts-ui-unstyled/login_buttons_dropdown.js b/packages/accounts-ui-unstyled/login_buttons_dropdown.js
index 74d33d3052..2947f1d204 100644
--- a/packages/accounts-ui-unstyled/login_buttons_dropdown.js
+++ b/packages/accounts-ui-unstyled/login_buttons_dropdown.js
@@ -58,7 +58,8 @@ Template._loginButtonsLoggedInDropdownActions.helpers({
 //
 
 Template._loginButtonsLoggedOutDropdown.events({
-  'click #login-buttons-password': function () {
+  'click #login-buttons-password': function (event) {
+    event.preventDefault();
     loginOrSignup();
   },
 
diff --git a/packages/accounts-ui-unstyled/package.js b/packages/accounts-ui-unstyled/package.js
index f71a8a81a9..25c04a0738 100644
--- a/packages/accounts-ui-unstyled/package.js
+++ b/packages/accounts-ui-unstyled/package.js
@@ -1,6 +1,6 @@
 Package.describe({
   summary: "Unstyled version of login widgets",
-  version: "1.3.0"
+  version: "1.4.0"
 });
 
 Package.onUse(function (api) {
diff --git a/packages/accounts-ui/package.js b/packages/accounts-ui/package.js
index b58d179a4d..ff61d8ea9e 100644
--- a/packages/accounts-ui/package.js
+++ b/packages/accounts-ui/package.js
@@ -1,6 +1,6 @@
 Package.describe({
   summary: "Simple templates to add login widgets to an app",
-  version: "1.2.0"
+  version: "1.3.0"
 });
 
 Package.onUse(function (api) {