{"id":27256315,"url":"https://github.com/bobhageman/pinlogin","last_synced_at":"2025-07-12T13:08:49.062Z","repository":{"id":47984341,"uuid":"195978521","full_name":"bobhageman/pinlogin","owner":"bobhageman","description":"Javascript cross-browser and flexible pincode login input experience","archived":false,"fork":false,"pushed_at":"2022-12-04T05:15:55.000Z","size":343,"stargazers_count":14,"open_issues_count":10,"forks_count":5,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-11T20:55:37.377Z","etag":null,"topics":["code-login","javascript-library","javascript-plugin","jquery-plugin","login","login-script","pincode","pincode-login","pincode-registration","pinlogin"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bobhageman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-09T09:35:43.000Z","updated_at":"2023-11-30T22:21:55.000Z","dependencies_parsed_at":"2023-01-22T18:25:11.894Z","dependency_job_id":null,"html_url":"https://github.com/bobhageman/pinlogin","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/bobhageman/pinlogin","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobhageman%2Fpinlogin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobhageman%2Fpinlogin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobhageman%2Fpinlogin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobhageman%2Fpinlogin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bobhageman","download_url":"https://codeload.github.com/bobhageman/pinlogin/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bobhageman%2Fpinlogin/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264995673,"owners_count":23695010,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-login","javascript-library","javascript-plugin","jquery-plugin","login","login-script","pincode","pincode-login","pincode-registration","pinlogin"],"created_at":"2025-04-11T02:57:26.621Z","updated_at":"2025-07-12T13:08:49.023Z","avatar_url":"https://github.com/bobhageman.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pinlogin\nComponent to create a cross-device pincode login experience. \n\nThe number of pincode input fields are configurable and the plugin is made in such way that it's able to tackle most usecases. After entering a complete pin code the 'complete' callback will be fired which gives you the possibility to do any further processing. No form or hidden input fields are used to give you the freedom of choice how to handle the pincode input. It is also possible to have multiple instances so you can have a 'registration' procedure where the user needs to enter the pincode twice. How this works is visible in the demo.\n\nThis is a remake of the [jQuery-Pinlogin](https://github.com/bobhageman/jquery-pinlogin) plugin I created a while ago, but now built to be independent of jQuery while it is still possible to use it as a jQuery plugin.\n\n## Demo\nA screenshot of the plugins pincode input fields with single instance to illustrate a login procedure and two instances for registration purposes:   \n![screenshot](https://raw.githubusercontent.com/bobhageman/pinlogin/master/demo/example.png)\n\nFor a working example go to:   \nhttps://www.mybo.nu/static/pinlogin/   \n\nOr go to the `demo` folder and view the contents of the `index.html` file.   \n\n## Install\nYou can use Pinlogin using different methods; with or without jQuery:\n  \n\n### NPM\n   \n1. Install with one simple command in your project using [npm](https://www.npmjs.com/):   \n\n\t`npm install --save pinlogin`   \n   \n2. Call the plugin:\n\n\t```javascript\n\tvar pinlogin = new Pinlogin(document.querySelector('#element'), {\n\t\tfields: 5,\n\t\tcomplete : function(pin){\n\t\t\talert ('Awesome! You entered: ' + pin);\n\t\t\t\t\t\t\n\t\t\t// further processing here\n\t\t}\n\t});\n\t```\n   \n### Standalone, without jquery\n\n1. Include code:\n\n\t```html\n\t\u003cscript src=\"pinlogin.pkgd.min.js\"\u003e\u003c/script\u003e\n\t```\n\t\n2. Include css:\n\n\t```html\n\t\u003clink href=\"pinlogin.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\t```\t\n\n3. Call the plugin:\n\n\t```javascript\n\tvar pinlogin = new Pinlogin(document.querySelector('#element'), {\n\t\tfields: 5,\n\t\tcomplete : function(pin){\n\t\t\talert ('Awesome! You entered: ' + pin);\n\t\t\t\t\t\t\n\t\t\t// further processing here\n\t\t}\n\t});\n\t```\n\n### Standalone, as a jQuery plugin\n\n1. Include jQuery:\n\n\t```html\n\t\u003cscript src=\"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js\"\u003e\u003c/script\u003e\n\t```\n\n2. Include plugin's code:\n\n\t```html\n\t\u003cscript src=\"pinlogin.pkgd.min.js\"\u003e\u003c/script\u003e\n\t```\n\n2. Include plugin's css:\n\n\t```html\n\t\u003clink href=\"pinlogin.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\t```\t\n\t\n3. Call the plugin:\n\n\t```javascript\n\tvar pinlogin = $(\"#element\").pinlogin({\n\t\tfields: 5,\n\t\tcomplete : function(pin){\n\t\t\talert ('Awesome! You entered: ' + pin);\n\t\t\t\t\t\t\n\t\t\t// further processing here\n\t\t}\n\t});\n\t```\n\n\n## Usage\n\n### fields \nNumber. Default `5`\n\nThe amount of pincode input fields where the user needs to enter a pin code.   \n\n### placeholder\nString. Default `•`   \n\nContains the placeholder that's displayed instead of the entered digits. You can use special characters, but if you do make sure your HTML page is properly encoded. For example UTF8:\n\n```html\n\u003cmeta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" /\u003e\n```\n\n### autofocus\nBoolean. Default `true`.   \n\nWhen the plugin is loaded, automatically focus on the first input field.   \n\n### hideinput\nBoolean. Default `true`.   \n\nHides or displays the user entered digits in the input field. When enabled, the caharacter in `placeholder` immediately replaces the entered digit.   \n\n### reset\nBoolean. Default `true`.   \n\nWhen true, this resets all input fields when filled.   \n\n### pattern\nString. Default `^[0-9]*$`.   \n\nA regular expression that is used to match the entered value in the input field. If no match, the entered value will be considered incorrect.\n\n### copypaste\nBoolean. Default `true`.   \n\nThis determines whether it is possible to paste a copied pincode into the pinlogin fields. It also checks for invalid input using the `pattern`. Note that this will only work when:\n\n* it is pasted into the first field\n* the length of the pasted string is exact the same as the number of fields\n\n\n### complete\n\nCallback function that will fire when all input fields are filled.   \n\nPassed parameters:   \n* ```pin``` String. The entered pincode.   \n\n```javascript\n   $('#element').pinlogin({\n\t\tcomplete : function(pin){\n\t\t\tconsole.log('You entered: ' + pin);\n    }});\n```\n\n### invalid\n\nCallback function that will fire when user enters an invalid character in a pincode field.   \n\nPassed parameters:   \n* ```field``` Element. The object of the field that's invalid.   \n* ```nr``` Number. The number of the field that's invalid (start counting at 0).   \n\n```javascript\n   $('#element').pinlogin({\n\t\tinvalid : function(field, nr){\n\t\t\tconsole.log('The field with nr : ' + nr + ' contains an invalid character');\n    }});\n```\n\n### keydown\n\nCallback function that will fire when user presses the key, and right before it reaches the pincode field.   \n\nPassed parameters:   \n* ```e``` Event. The 'keydown' event.   \n* ```field``` Element. The object of the field that's getting the keydown.   \n* ```nr``` Number. The number of the field that's getting the keydown (start counting at 0).   \n\n```javascript\n   $('#element').pinlogin({\n\t\tkeydown : function(e, field, nr){\n\t\t\tconsole.log('The field with nr : ' + nr + ' is about to get a value');\n    }});\n```\n\n## Public methods\nIf you assign Pinlogin to a variable the jQuery element to a variable, for example `var pinlogin = new Pinlogin(...);` it's possible to use some public methods, explained below, so you can alter the behaviour of Pinlogin. Look at the demo to see an example use case for the usage of the public methods described below.\n\n\n### pinlogin.getFieldId(nr)\n\nReturns the ID of the field \n\nParameters:   \n* ```nr``` Number. The number of the fields' ID to be returned (start counting at 0).  \n\n### pinlogin.getField(nr)\n\nReturns the field Object\n\nParameters:   \n* ```nr``` Number. The number of the fields' Object to be returned (start counting at 0).  \n\n\n### pinlogin.reset()\n\nResets the whole instance and all the input fields.   \n\n### pinlogin.resetField(nr)\n\nReset a single input field. \n\nParameters:   \n* ```nr``` Number. The number of the field that will be reset (start counting at 0).   \n\n### pinlogin.disable()\n\nDisables the whole instance and all the input fields. \n\n### pinlogin.disableField(nr)\n\nDisable a single input field. \n\nParameters:   \n* ```nr``` Number. The number of the field that will be disabled (start counting at 0).   \n\n### pinlogin.enable()\n\nEnables the whole instance and all the input fields. \n\n### pinlogin.enableField(nr)\n\nEnable a single input field. \n\nParameters:   \n* ```nr``` Number. The number of the field that will be enabled (start counting at 0). \n\n### pinlogin.focus(nr)\n\nFocus on the specified input field.   \n\nParameters:   \n* ```nr``` Number. The number of the field that will recieve focus (start counting at 0). \n\n### pinlogin.validateInput(nr)\n\nValidates the input of the specified field using `pattern`. \n\nParameters:   \n* ```nr``` Number. The number of the field that will recieve focus (start counting at 0). \n\n## License\n\n[MIT License](https://opensource.org/licenses/mit-license) © Bob Hageman\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobhageman%2Fpinlogin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbobhageman%2Fpinlogin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbobhageman%2Fpinlogin/lists"}