Verification Code

Display a set of input fields to accept verification code from a user. It is common place to add email and phone number verification to websites these days. These codes range from four to six digits. The verification code Bladewind component however, allows you to specify how many digits you want the enduser to type, by specifying the total_digits attribute. There is no restriction on the maximum value you can specify for the total_digits. In a finance app, you could use this to collect account numbers. The default number of digits displayed by the component is four (4). We interchange the words PIN, PIN code and verification code. We mean the same thing.

        
            <x-bladewind.code  />
        
    

        
            <x-bladewind.code total_digits="5"  />
        
    

Access the Verification Code

What happens after the user enters their verification code? The component creates a hidden input field with the name passed to the name attribute.

            
                <x-bladewind.code name="pin_code"  />
            
        

The above will create the input fields for the verification codes and create the hidden input below

            
                <input type="hidden" name="pin_code" class="pin_code ..." id="pin_code"  />
            
        

You can access the value of pin_code either via Javascript or via PHP if you intend to post it in a form to your backend. The on_verify attribute allows you to specify a function that should be called when the user has entered a value into the last verification code field. This should just be the function name without parentheses and parameters. If you wish to call verifyPin() after the user enters the pin/code, just type on_verify="verifyPin". The component passes the code entered by the user to your function, so, your function declaration needs to expect one parameter. Still using the verifyPin example, your function declaration will be:

            
                verifyPin = (code) => {

                    // do something here with the code
                }
            
        

Let's consider a practical example. Enter any code in the fields below and get notified of the code you entered.

            
                <x-bladewind.code
                    total_digits="5"
                    on_verify="checkPin" />


                <script>
                    checkPin = (code) => {
                        alert(`You entered: ${code}`);
                    }
                </script>
            
        

Clear PIN/Code

There are cases where you will want to clear the verification code input fields. Probably after a user enters a wrong code, you clear the fields so they can enter the code all over again. There is also the case where you require a pin code to be entered to authorize payments or other actions on your web app. If you have the verification code in a Modal component, the values entered may persist everytime the modal is opened.

clearPin(name) is a helper Javascript function that easily lets you reset your verification codes.

            
                <x-bladewind.code name="pin_code"  />
            
        

            
                <script>
                    checkPin = (code) => {
                        if( code !== '20201') {
                            clearPin('pin_code');
                        }
                    }
                </script>
            
        

Displaying Errors

The verification code component comes with a hidden field that has the error message to display when validation fails for the code the user entered. To make this translatable, the error message is defined on the component using the error_message attribute.

The error message is displayed by invoking the Javascript helper function showPinError(name). It accepts the name provided to the code component as a parameter. The error message can be hidden by calling the hidePinError(name) Javascript helper function.

The verification code below is supposed to be 2022. Enter any other code and see how the error is displayed.

        
            <x-bladewind.code
                name="pcode"
                error_message="Yoh! check your code"
                on_verify="checkPinCode" />
        
    

        
            <script>
                checkPinCode = (code) => {
                    if( code !== '2022') {
                        clearPin('pcode');
                        // accepts name of the code
                        // component as a parameter
                        showPinError('pcode');
                    }
                }
            </script>
        
    

Show the Spinner

The verification code component comes with a hidden spinner that can be made visible by invoking the showSpinner(name) Javascript helper function. It accepts the name provided to the code component as a parameter. The verification code spinner can be useful if your verification is done via an ajax call to an API that may take a second or two. Showing the spinner will let the user know you are performing an action. The error message can be hidden by calling the hideSpinner(name) Javascript helper function.

        
            <x-bladewind.code
                name="spin_me"
                on_verify="validatePin"  />
        
    

        
            <script>
                validatePin = (code) => {
                    showSpinner('spin_me');
                    ajaxCall('/verify/pin', `code=${code}`, ...
                }
            </script>
        
    

Show Success Icon

The verification code component also comes with a hidden checkmark to show when a pin is valid. This can be invoked using the showPinSuccess(name) Javascript helper function. It accepts the name provided to the code component as a parameter. In the example below, the spinner shows after the code is entered and disappears to give way to the checkmark after 5 seconds.

        
            <x-bladewind.code
                name="spin_me"
                on_verify="spinAndSucceed"  />
        
    

        
            <script>
                    spinAndSucceed = (code) => {
                    showSpinner('spin_me_yes');
                    setTimeout(()=>{
                       showPinSuccess('spin_me_yes');
                    }, 5000);
                }
            </script>
        
    

Full List Of Attributes

The table below shows a comprehensive list of all the attributes available for the Spinner component.

Verification Code with all attributes defined

        
            <x-bladewind.code
                name="pin-code"
                total_digits="5"
                on_verify="verifyPin"
                has_spinner="false"
                error_message="please enter the correct pin code"  />