Confirm Passcode UI Component

The confirm passcode UI component can be used together with the passcode UI component to validate the passcode that is inputted. This component ensures that both passcodes entered, match.

info

The confirm passcode UI component requires the passcode UI component to be embedded in the same form.

Embed the Confirm Passcode UI Component

The Confirm Passcode UI component accepts a passcode and checks that it matches the passcode that was entered by the user in the passcode UI component.

tip

To use Weavr UI components, you must first set up the Weavr UI library in your application.

<!-- Define a form in which you will ask your customer to enter and confirm their passcode -->
<div>
  <form onSubmit="onSubmit(); return false;">
    <label>Passcode Confirmation</label>
    <div id="input-passcode"></div>
    <br />
    <div id="input-passcode-confirm"></div>
    <br />

    <input type="submit" value="confirm" />
  </form>
  <div id="inputPasscodeConfirmResponse"></div>
</div>

<script type="text/javascript">
  // Create an instance of a secure form
  const form = window.OpcUxSecureClient.form();

  // Create an instance of a secure Passcode component
  const passcode = form.input("passcode", "passCode", {
    placeholder: "Passcode",
  });
  // Create an instance of a secure Confirm Passcode component
  const confirmPasscode = form.input("confirmPasscode", "confirmPassCode", {
    placeholder: "Confirm Passcode",
  });

  // Mount the components
  passcode.mount("#input-passcode");
  confirmPasscode.mount("#input-passcode-confirm");

  // Define a function that will be executed when the form is submitted by the user
  function onSubmit() {
    // Call tokenize to check the passcodes match and
    // tokenise the passcode inputted by your customer
    form.tokenize(
      (res) => {
        document.getElementById("inputPasscodeConfirmResponse").innerText =
          JSON.stringify(res);
      },
      (err) => {
        console.error("Error:", err.message);
        document.getElementById("inputPasscodeConfirmResponse").innerText =
          "ERROR: " + JSON.stringify(err);
      }
    );
  }
</script>