Vault Auth Component

Vault Auth Component is a library for dealing with vault-fashioned authentication

Installation

Use a nodejs package manager to install Vault Auth Component.

# npm
npm i vault-auth-component

# yarn
yarn add vault-auth-component

# pnpm
pnpm add vault-auth-component

Usage

as a React component

/** @jsxImportSource theme-ui */
// my-component.tsx|jsx

import {
  VaultAuthComponent,
  theme
  } from "vault-auth-component";
import { ThemeUIProvider } from "theme-ui";

export default function MyComponent() {
  // handle click each case
  function click(value: Case) {
    console.log(value)
  }
  // Keypad data coming from external ressource
  const shuffleArray = [
    [ 0,1,2 ],
    [ 3,4,5 ],
    [ 6,7,8 ],
  ]

  // User vault pass
  const vaultPass = [ 1,5,7,9 ]

  // Use theme-ui under the hood
  return <ThemeUIProvider theme={theme}>
  <VaultAuthComponent
    shuffleArray={shuffleArray}
    onCaseClick={click}
    vaultPass={vaultPass}
  />
  </ThemeUIProvider>
}

VaultAuthComponent

args	status	description
shuffleArray	mandatory	visual keypad
vaultPass	mandatory	user password
onCaseClick	optional	triggered when user click a Case
onDeleteClick	optional	triggered when user click the Delete Button
SubmitButton	optional	SubmitButton custom component
DeleteButton	optional	DeleteButton custom component
config	optional	additional config
config.keypadAccess	default=false	authorize keyboard events
config.submitButton	default=false	show submit button

as a library

import { lib } from 'vault-auth-component'

const {
  ShuffleArraySchema,
  ValueInputSchema,
  VaultValidate,
} = lib

/* shuffleArray data validation */
const shuffleArray = ShuffleArraySchema.safeParse(
  [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9],
  ]
)
if (!shuffleArray.success) {
  // throw error
  console.error(shuffleArray.error)
}
// shuffleArray is validated, do anything with it

/* ValueInputSchema data validation */
const valueInput = ValueInputSchema.safeParse([
  1, 2, 3, 4,
])
if (!valueInput.success) {
  //throw error
  console.error(valueInput.error)
}
// valueInput is validated, do anything with it

/* Is vaultPass contained in shuffleArray */
const contained = VaultValidate({
  shuffleArray,
  vaultPass: valueInput,
})
if (!contained) {
  //throw error
  console.error(
    'vaultPass is not contained in shuffleArray'
  )
}

// everything’s fine, do anything with it

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

The repo now has an examples project powered by Storybook. Just run npm run storybook, yarn storybook or pnpm run storybook

License

MIT