browser/extensions/formautofill/content/editCreditCard.xhtml
author Matthew Noorenberghe <mozilla@noorenberghe.ca>
Mon, 24 Sep 2018 19:51:39 +0000
changeset 437937 32d9dbdfae6b74ee1e1144fc65b8ab1029cb1eff
parent 434965 4b3b3a1db0dfbffe3e08e8d1e4f660fabf584ac4
child 438562 4ff0fcd61c7a1f791414516a6e22efca94530f19
permissions -rw-r--r--
Bug 1480717 - Fix credit card form billing address and persist checkbox layout. r=sfoster Differential Revision: https://phabricator.services.mozilla.com/D4175

<?xml version="1.0" encoding="UTF-8"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE html [
  <!ENTITY % globalDTD SYSTEM "chrome://global/locale/global.dtd">
  %globalDTD;
]>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title data-localization="addNewCreditCardTitle"/>
  <link rel="stylesheet" href="resource://formautofill/editDialog-shared.css"/>
  <link rel="stylesheet" href="resource://formautofill/editCreditCard.css"/>
  <link rel="stylesheet" href="resource://formautofill/editDialog.css"/>
  <script src="chrome://formautofill/content/l10n.js"></script>
  <script src="chrome://formautofill/content/editDialog.js"></script>
  <script src="chrome://formautofill/content/autofillEditForms.js"></script>
</head>
<body dir="&locale.dir;">
  <form id="form" class="editCreditCardForm" autocomplete="off">
    <!--
        The <span class="label-text" …/> needs to be after the form field in the same element in
        order to get proper label styling with :focus and :moz-ui-invalid.
      -->
    <label id="cc-number-container" class="container">
      <span id="invalidCardNumberString" hidden="hidden" data-localization="invalidCardNumber"></span>
      <input id="cc-number" type="text" required="required" minlength="9" pattern="[- 0-9]+"/>
      <span data-localization="cardNumber" class="label-text"/>
    </label>
    <label id="cc-exp-month-container" class="container">
      <select id="cc-exp-month" required="required">
        <option/>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
      </select>
      <span data-localization="cardExpiresMonth" class="label-text"/>
    </label>
    <label id="cc-exp-year-container" class="container">
      <select id="cc-exp-year" required="required">
        <option/>
      </select>
      <span data-localization="cardExpiresYear" class="label-text"/>
    </label>
    <label id="cc-name-container" class="container">
      <input id="cc-name" type="text" required="required"/>
      <span data-localization="nameOnCard" class="label-text"/>
    </label>
    <label id="cc-type-container" class="container">
      <select id="cc-type" required="required">
      </select>
      <span data-localization="cardNetwork" class="label-text"/>
    </label>
    <div id="billingAddressGUID-container" class="billingAddressRow container rich-picker">
      <select id="billingAddressGUID" required="required">
      </select>
      <label for="billingAddressGUID" data-localization="billingAddress" class="label-text"/>
    </div>
  </form>
  <div id="controls-container">
    <button id="cancel" data-localization="cancelBtnLabel"/>
    <button id="save" disabled="disabled" data-localization="saveBtnLabel"/>
  </div>
  <script type="application/javascript"><![CDATA[
    "use strict";

    (async () => {
      let {
        getAddressLabel,
        isCCNumber,
        getCreditCardNetworks,
      } = FormAutofillUtils;
      let record = window.arguments && window.arguments[0];
      let addresses = {};
      for (let address of await formAutofillStorage.addresses.getAll()) {
        addresses[address.guid] = address;
      }

      /* import-globals-from autofillEditForms.js */
      let fieldContainer = new EditCreditCard({
        form: document.getElementById("form"),
      }, record, addresses,
        {
          getAddressLabel: getAddressLabel.bind(FormAutofillUtils),
          isCCNumber: isCCNumber.bind(FormAutofillUtils),
          getSupportedNetworks: getCreditCardNetworks.bind(FormAutofillUtils),
        });

      /* import-globals-from editDialog.js */
      new EditCreditCardDialog({
        title: document.querySelector("title"),
        fieldContainer,
        controlsContainer: document.getElementById("controls-container"),
        cancel: document.getElementById("cancel"),
        save: document.getElementById("save"),
      }, record);
    })();
  ]]></script>
</body>
</html>