bladewindUI

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>
                    
                



 

Full List Of Attributes

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

IMPORTANT: Projects running Laravel 8 please read this

Option Default Available Values
name pin-code-{uniqid()} Unique name for the component. The code entered by the enduser will be available in an input field with the specified name. If for example you named your component vcode, the following input will be created and have the value of the full code the user entered .
total_digits 6 Determines number of input boxes to be created for entry of the verification code. Any realistic number.
on_verify blank Function to call after user has finished entering the codes. When passed, this function will be triggered when the user enters a number into the last input field. This should just be the function name without parentheses and parameters. If you wish to call verifyPin() after the user enters the pin, just type on_verify="verifyPin". The component passes the code to your function, so, your function declaration needs to expect one parameter. Still using the verifyPin example, your function declaration should be verifyPin = (code) => { ... }
error_mesage Verification code is invalid Error message to display when the verification code entered is invalid

 

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"  />
                
            

 

The source file for this component is available in resources > views > components > bladewind > code.blade.php