npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

pinlocker

v0.0.1-beta.3

Published

A simple lock screen with PIN code for hybrid mobile app

Downloads

4

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 --save

  • modify '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 --save

  • modify index.js file 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 |

Contributing

License

Changelog