Auto Input for 2FA fields

Allows you to automatically change input once it is filled in. Then validate the form when all inputs are filled in correctly.

Table of content:

• Installation
  • npm
  • sources
• Usage
  • import
  • Init the class
  • Methods
• Example
  • Automatic fields creation
  • Improved customization

Installation

npm:

With npm:

npm i auto-input-a2f

With pnpm:

npm i auto-input-a2f

With yarn:

yarn add auto-input-a2f

If you are using a web server such asexpressjs,you need to set the file as static files to serve them. For example, forexpressjsyou'll need:

app.use(express.static('/node_modules/auto-input-a2f/dist/'));

In your html file:

<scriptsrc= "/autoinput.min.js"integrity= "sha384-p91U1bCVTJMP+YhKZTn2fYvOScTU3xokkfMUfc7A7XY5gndM1h2+8qbdtXICnS/b"crossorigin= "anonymous"></script>

For all other files, you canget the shashum below

From sources:

Minified JavaScript:

<scriptsrc= "https://pioupia.github.io/auto-input-a2f/autoinput.min.js"integrity= "sha384-p91U1bCVTJMP+YhKZTn2fYvOScTU3xokkfMUfc7A7XY5gndM1h2+8qbdtXICnS/b"crossorigin= "anonymous"></script>

Unminified JavaScript:

<scriptsrc= "https://pioupia.github.io/auto-input-a2f/autoinput.js"integrity= "sha384-fD5DnbGvuM3Yat97IQjMLbrbs0KGFPOAH9FMqB5ygLH6SALJvfT4s/UnDw/svN76"crossorigin= "anonymous"></script>

Usage

Import

Formoduletype, you'll need to import correctly theAutoInputclass:

importAutoInputfrom"./autoinput.esm.js";

Initiate the class:

First of all, you need to instantiate theAutoInputclass:

constautoinput=newAutoInput(options);

The class could take someoptionsas anobject.All options are optional.

name	type	default value	description
autoEnd	boolean	true	Fired an event when the text is completed.
selectAuto	boolean	true	Will automatically focus the first input field (just after initializing fields).
canPast	boolean	true	Enable / disable pasting in fields.
createAuto	boolean	false	Will automatically create input field for you.
buttonCallback	boolean	false	Add theonClicklistener on thevalidatebutton. If the user click on that one, this will trigger automatically thecallbackfunction.
beforeFire	number	400	Will waitsbeforeFiremilliseconds before firing the automatic event.
onCreate	Function	null	The callback when creates the input fields. This allows you to add some property on theHTMLElementor change it completly.
parent	HTMLElement	#a2fParentor[data-parent-a2f]	The parent element into which the input fields will be injected.
validate	HTMLElement	[data-button-validate]	The submit button to validate the 2fa code.

If you don't want thecreateAutooption, you can create input yourself. But keep in mind that they need to have thedata-a2fattributes.

autoEnd:

This option will fired thecallbackfunction, and click on thevalidatebutton when the 2FA code is completely filled.

Thecallbackfunctioncan be registered by calling the publiconValidatemethod.

createAuto:

This option will automatically create the input fields for you. The elements will beappendChildto theparentHTMLElement. During the creation of the input fields, if theonCreatecallback is defined, it'll be fired for each input field.

The number of created field is 6.

buttonCallback:

If enabled, when theautoEndoption is enabled, it will emit theonClickevent on thevalidateHTMLButton.

beforeFire:

The time in miliseconds waited by the class before calling thecallbackfunction,and fired theonClickevent.

onCreate:

This function will be called when the input fields are created. The function will take the createHTMLElementas argument, and should also returned anHTMLElementwhich will be added to the DOM. If nothing is returned from the function, the element will not be added. This can be usefull if you want to add custom classes or attributes to the input fields. Or if you want to change the type of the input fields, by adding a more complex structure to it.

However, you can also completely remove the field if you do not want it.

Methods:

onValidate:

This method will register thecallbackfunction. Thecallbackfunction will be called when the 2FA code is completely filled with theautoEndoptionenabled, or if the user click on thevalidatebutton and thebuttonCallbackoptionis enabled.

Callback function prototype:

functiononValidate(code:string):void;

getCode:

This function allows you to get the 2FA code. It will return astringwith the 2FA code.

If all fields are not complete, the function will still return a string with the fields filled in.

For example, if your field 0, 1, 3 and 5 are field with: 5 2. 4. 1,the function will return5241.

Function prototype:

functiongetCode():string;

removeEntries:

Allows you to clear each input fields values. Just a simple for reset.

Function prototype:

functionremoveEntries():void;

stopAutoEnd:

This function will disable theautoEndoption. This can be usefull if you want to disable the automatic validation when the 2FA code is completely filled.

Function prototype:

functionstopAutoEnd():void;

startAutoEnd:

This function will enable theautoEndoption. This can be usefull if you want to enable the automatic validation when the 2FA code is completely filled and you got an error for example.

Function prototype:

functionstartAutoEnd():void;

toggleAutoEnd:

This function will toggle theautoEndoption.

Function prototype:

functiontoggleAutoEnd():void;

Example:

Automatic fields creation

For example, you want to create automatically 6 input fields, and validate the form when all fields are filled in correctly after 800 miliseconds.

Because we have thebuttonCallbackenabled, if the user click on the validation button, theonValidatefunction will be automatically called.

But we can have a problem if the user is going to click on thevalidatebutton before the 800 miliseconds. To avoid this, we can disable thebuttonCallbackoption by calling thestopAutoEndmethod during the server verification.

⚠️This will not disabled theonValidatefunction call when the user click on it.

For each created input fields, we want to add some classes to it. We can do this by using theonCreatecallback.

If the input field is aSPAN,we don't want aspanelement (the dash-between the input fields) to be added to the DOM. So we can returnnullin this case.

Otherwise, we'll add some classes to our element. But if the inserted element is the fourth one, we'll add a margin to the left. Then, we'll return the element.

constinput=newAutoInput({
createAuto:true,
parent:document.getElementById("2fa_container"),
validate:document.getElementById("validate_2fa_code"),
buttonCallback:true,
beforeFire:800,
onCreate:(element,i)=>{
if(element.tagName==="SPAN")
return(null);
element.classList.add("form-control");
element.classList.add("otp_input");
element.classList.add(i===3?"ms-3":"ms-1");
element.classList.add("me-1");
element.classList.add("text-center");

return(element);
}
});

functiononValidate(code){
// do something with the code...
input.stopAutoEnd();

fetch("/api/code",{
method:"POST",
body:JSON.stringify({code}),
headers:{
"Content-Type":"application/json"
}
}).then(res=>{
if(res.ok){
// do something...
}else{
// do something...

// enable the autoEnd
input.startAutoEnd();

// clear the input fields
input.removeEntries();
}
});
}

input.onValidate(onValidate);

Manual fields creation

For example, you want a static complex structure, or have a different of input fields, that'll not be generated by JavaScript or by the script because it's too complex. You can create your complex structure. Just think of the only thing needed byauto-input-a2fis that yourinputfield exists and has at least adata-a2fattribute.

<divid= "2fa_container">
<div>
<inputtype= "text"data-a2f>
</div>
<div>
<inputtype= "text"data-a2f>
</div>
<div>
<inputtype= "text"data-a2f>
</div>
<div>
<inputtype= "text"data-a2f>
</div>
<buttonid= "validate_2fa_code">Valdidate</button>
</div>

Same thing than for the previous example:

constinput=newAutoInput({
parent:document.getElementById("2fa_container"),
validate:document.getElementById("validate_2fa_code"),
buttonCallback:true,
beforeFire:800
});

functiononValidate(code){
// do something with the code...
input.stopAutoEnd();

fetch("/api/code",{
method:"POST",
body:JSON.stringify({code}),
headers:{
"Content-Type":"application/json"
}
}).then(res=>{
if(res.ok){
// do something...
}else{
// do something...

// enable the autoEnd
input.startAutoEnd();

// clear the input fields
input.removeEntries();
}
});
}

input.onValidate(onValidate);

And you'll have the same behavior. Just, the only difference is that you'll only have 4 fields.