pinlocker
v0.0.1-beta.3
Published
A simple lock screen with PIN code for hybrid mobile app
Downloads
3
Readme
A simple lock screen with PIN code for hybrid mobile app
PinLocker is a simple PIN code inspired by react-native-pincode and the api is similar to that.
PinLocker are built using the Web Components standard that work on any framework or without one.
Installation
Vanilla JS
- Put a script tag in the head of your html file then you can use the pinlocker anywhere:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/pinlocker/latest/dist/pinlocker.js"></script>
</head>
<body>
<pinlocker-app status="enter"></pinlocker-app>
</body>
</html>Vue
Run
npm install pinlocker --savemodify 'main.js' file as belows:
import Vue from 'vue';
import App from './App.vue';
import { defineCustomElements as definePinlocker } from 'pinlocker/dist/loader';
Vue.config.productionTip = false;
Vue.config.ignoredElements = ['pinlocker-app'];
definePinlocker(window)
new Vue({
render: h => h(App)
}).$mount('#app');React
Run
npm install pinlocker --savemodify
index.jsfile as below:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { applyPolyfills, defineCustomElements } from 'pinlocker/dist/loader';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
applyPolyfills().then(() => {
defineCustomElements(window);
});for more information please go to https://custom-elements-everywhere.com/.
Angular
- Run
npm install pinlocker --save - Including the CUSTOM_ELEMENTS_SCHEMA in the module:
import { BrowserModule } from '@angular/platform-browser';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, FormsModule],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}- Add function defineCustomElements() to your
main.ts:
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { defineCustomElements } from 'pinlocker/dist/loader';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));
defineCustomElements(window);Usage
Basic usage requires choosing between the choose, enter and locked modes.
- choose : requires the user to choose and to confirm a PIN code
- enter : requires the user to enter the PIN code he previously chose
- locked : prints a locked screen for a given time if the user failed to enter his/her PIN code too many times
<pinlocker-app status="enter"></pinlocker-app>
Options
| Attribute | Description | Default |
| ------------------------------------ | ----------- | ----------- |
| button-delete-text | Text of the of the button used to delete a previous entry on the PIN panel | delete |
| disable-lock-screen | Boolean to disable the lock screen | false |
| handle-result-enter-pin | Function to be used to handle the PIN code entered by the user. To be used with the pinStatus props | undefined |
| max-attempts | Number of attempts the user is given before locking the application | 3 |
| password-length | Length of the password the user has to enter | 4 |
| pin-status | Status coming back to the PIN component after the handleResultEnterPin function. The status type is a value of the PinResultStatus enum (initial, success, failure, locked) | undefined |
| status | Indicates the mode that should be used (see Usage section for the different modes available) | undefined |
| stored-pin | The PIN code previously stored with the storePin function | undefined |
| subtitle-choose | String used as a subtitle on the PIN code choose page | to keep your information secure |
| subtitle-confirm | String used as a subtitle on the PIN code confirmation page | undefined |
| subtitle-enter | String used as a subtitle on the PIN code enter page | undefined |
| subtitle-error | String used as a subtitle on the PIN code pages when an error occurs (wrong PIN code used for enter or confirm modes) | Please try again |
| text-button-locked-page | String to be used as text on the button in the locked application page | Quit |
| text-description-locked-page | String to be used as a description on the locked application page | To protect your information, access has been locked for {timeLocked} minutes. |
| text-sub-description-locked-page | String to be used as a subtitle on the locked application page | Come back later and try again. |
| text-title-locked-page | String to be used as a title on the locked application page | Maximum attempts reached |
| time-locked | Number of milliseconds where the application should be locked after maxAttempts failed attempts from the user | 300000 (5 minutes) |
| title-attempt-failed | String used as a title on the PIN enter page when the user enters a wrong PIN code | Incorrect PIN Code |
| title-choose | String used as a title on the PIN choose page | 1 - Enter a PIN Code |
| title-confirm | String used as a title on the PIN confirm page | 2 - Confirm your PIN Code |
| title-confirm-failed | String used as a title on the PIN confirm page when the user enters a wrong PIN code | Your entries did not match |
| title-enter | String used as a title on the PIN enter page | Enter your PIN Code |
Events
| Event | Description | Default |
| ----------------------- | ----------- | --------------------- |
| clickButtonLockedPage | Function to be used when the user taps the button on the locked application page | Kills the app by throwing Quit application |
| endProcessFunction | Function to handle the end of the process | None |
| finishProcess | Function to be used when the user enters the right PIN code | Removes the values in Storage and set the status to success |
| getCurrentPinLength | Function returning the length of the current PIN code | None |