Confirm Password UI Component

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

info

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

Embed the Confirm Password UI Component

The Confirm Password UI component accepts a password and checks that it matches the password that was entered by the user in the password 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 password -->
<div>
<form onSubmit="onSubmit(); return false;">
    <label>Password Confirmation</label>
    <div id="input-password"></div><br/>
    <div id="input-password-confirm"></div><br/>

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

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

// Create an instance of a secure Password component
const password = form.input('password', 'password', { placeholder: 
'Password'}); 
// Create an instance of a secure Confirm Password component
const confirmPassword = form.input('confirmPassword', 'confirmPassword', { 
placeholder: 'Confirm Password'});

// Mount the components
password.mount('#input-password'); 
confirmPassword.mount('#input-password-confirm'); 

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