{"_id":"@duc1607/bb10-picture-auth","_rev":"2-c4b5062f1479fa4961cc65726e6b9e7d","name":"@duc1607/bb10-picture-auth","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@duc1607/bb10-picture-auth","version":"1.0.0","keywords":["react","authentication","picture-password","blackberry","security","canvas"],"author":{"name":"Your Name","email":"3dogize@gmail.com"},"license":"MIT","_id":"@duc1607/bb10-picture-auth@1.0.0","maintainers":[{"name":"duc1607","email":"3dogize@gmail.com"}],"homepage":"https://github.com/mybabysexy/bb10-picture-auth#readme","bugs":{"url":"https://github.com/mybabysexy/bb10-picture-auth/issues"},"dist":{"shasum":"d60f9e66f0469e1531100db0c252611c17dd2bd2","tarball":"https://registry.npmjs.org/@duc1607/bb10-picture-auth/-/bb10-picture-auth-1.0.0.tgz","fileCount":11,"integrity":"sha512-uUO1viMn30aecxu8KpU/gLAqXYFkPivwjE6CLwCi1/3wjgtuD3qIg3aEmvdyTUSbyuvQCKpFESDQIXNfzgJvEw==","signatures":[{"sig":"MEUCIDEGYA2XDoKF+/acKVjnymeUg2D66kf4GHDXmIqAv50vAiEApXNJh/smnyOOPdEHl8np97oYoPqJg7nPz+3AnfjmQSM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":125124},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","module":"dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"gitHead":"59a454cb7cf7097805c7a4392e481911c4ccb479","scripts":{"dev":"vite","lint":"eslint .","build":"npm run build:lib && npm run build:types","preview":"vite preview","build:lib":"vite build --mode library","build:demo":"tsc -b && vite build","build:types":"tsc --project tsconfig.lib.json","prepublishOnly":"npm run build"},"_npmUser":{"name":"duc1607","email":"3dogize@gmail.com"},"repository":{"url":"git+https://github.com/mybabysexy/bb10-picture-auth.git","type":"git"},"_npmVersion":"10.9.2","description":"BlackBerry 10 style picture password authentication component for React","directories":{},"_nodeVersion":"23.11.1","_hasShrinkwrap":false,"devDependencies":{"vite":"^7.1.0","react":"^19.1.1","eslint":"^9.32.0","globals":"^16.3.0","react-dom":"^19.1.1","@eslint/js":"^9.32.0","typescript":"~5.8.3","@types/react":"^19.1.9","vite-plugin-dts":"^4.3.0","@types/react-dom":"^19.1.7","typescript-eslint":"^8.39.0","@vitejs/plugin-react":"^4.7.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"_npmOperationalInternal":{"tmp":"tmp/bb10-picture-auth_1.0.0_1754749702852_0.491222971499355","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@duc1607/bb10-picture-auth","version":"1.0.1","description":"BlackBerry 10 style picture password authentication component for React","main":"dist/index.js","module":"dist/index.esm.js","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.js"}},"keywords":["react","authentication","picture-password","blackberry","security","canvas"],"author":{"name":"Your Name","email":"3dogize@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/mybabysexy/bb10-picture-auth.git"},"homepage":"https://github.com/mybabysexy/bb10-picture-auth#readme","bugs":{"url":"https://github.com/mybabysexy/bb10-picture-auth/issues"},"type":"module","scripts":{"dev":"vite","build":"npm run build:lib && npm run build:types","build:lib":"vite build --mode library","build:types":"tsc --project tsconfig.lib.json","build:demo":"tsc -b && vite build","lint":"eslint .","preview":"vite preview","prepublishOnly":"npm run build"},"peerDependencies":{"react":">=16.8.0","react-dom":">=16.8.0"},"devDependencies":{"@eslint/js":"^9.32.0","@types/react":"^19.1.9","@types/react-dom":"^19.1.7","@vitejs/plugin-react":"^4.7.0","eslint":"^9.32.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","globals":"^16.3.0","react":"^19.1.1","react-dom":"^19.1.1","typescript":"~5.8.3","typescript-eslint":"^8.39.0","vite":"^7.1.0","vite-plugin-dts":"^4.3.0"},"_id":"@duc1607/bb10-picture-auth@1.0.1","gitHead":"865dae7ea792aafc9a433eedcbaa3fc83537d718","_nodeVersion":"23.11.1","_npmVersion":"10.9.2","dist":{"integrity":"sha512-0o9TrW891ms7xgrbvIoX7jiqq30yrlcTHcpN7SErpXpkxcUOJrI9qb799m07yva5pGyE/MVNuGNFOy++PG9S2g==","shasum":"9c4bc0fac759ec400228934f0bb47b70e9a614d4","tarball":"https://registry.npmjs.org/@duc1607/bb10-picture-auth/-/bb10-picture-auth-1.0.1.tgz","fileCount":11,"unpackedSize":128583,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCSj/OgUMYI7kOMP5yR5okJYKhDh6tZn1Bpo3S9QVSoJwIhAPF65gzfQwd3Ru8xMgYIvWN1kXO54geP/e/GJUMLrl4A"}]},"_npmUser":{"name":"duc1607","email":"3dogize@gmail.com"},"directories":{},"maintainers":[{"name":"duc1607","email":"3dogize@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/bb10-picture-auth_1.0.1_1754749861443_0.30904848145314356"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-09T14:28:22.762Z","modified":"2025-08-09T14:31:02.017Z","1.0.0":"2025-08-09T14:28:23.082Z","1.0.1":"2025-08-09T14:31:01.810Z"},"bugs":{"url":"https://github.com/mybabysexy/bb10-picture-auth/issues"},"author":{"name":"Your Name","email":"3dogize@gmail.com"},"license":"MIT","homepage":"https://github.com/mybabysexy/bb10-picture-auth#readme","keywords":["react","authentication","picture-password","blackberry","security","canvas"],"repository":{"type":"git","url":"git+https://github.com/mybabysexy/bb10-picture-auth.git"},"description":"BlackBerry 10 style picture password authentication component for React","maintainers":[{"name":"duc1607","email":"3dogize@gmail.com"}],"readme":"# BB10 Picture Auth\n\nA React component that replicates the BlackBerry 10 picture password authentication interface.\n\n## Installation\n\n```bash\nnpm install @duc1607/bb10-picture-auth\n```\n\n## Usage\n\n```typescript\nimport { useEffect, useState } from \"react\";\nimport PictureAuth from \"@duc1607/bb10-picture-auth\";\nimport { type SetupMode, type UserSetup } from \"@duc1607/bb10-picture-auth\";\n\nexport default function App() {\n const [userSetup, setUserSetup] = useState(null);\n const [mode, setMode] = useState(\"setup\");\n const [setupStep, setSetupStep] = useState<\n null | \"image\" | \"number\" | \"position\" | \"test\" | \"finish\"\n >(null);\n const [pictureDataUrl, setPictureDataUrl] = useState(null);\n\n const SIZE = 300;\n\n // Handle picture upload\n const handlePictureUpload = (event: React.ChangeEvent) => {\n if (!event.target.files || event.target.files.length === 0) return;\n\n const file = event.target.files?.[0];\n if (file && file.type.startsWith(\"image/\")) {\n const reader = new FileReader();\n reader.onload = (e) => {\n const dataUrl = e.target?.result as string;\n setPictureDataUrl(dataUrl);\n\n setUserSetup((prevSetup) => {\n if (!prevSetup || prevSetup.chosenNumber === undefined) {\n return prevSetup;\n }\n return {\n ...prevSetup,\n pictureDataUrl: dataUrl || undefined,\n };\n });\n };\n reader.readAsDataURL(file);\n }\n };\n\n useEffect(() => {\n // Initialize user setup if not already set\n if (!userSetup) {\n setSetupStep(\"number\");\n }\n }, [userSetup]);\n\n return (\n
\n {mode === \"auth\" && (\n console.log(\"Authentication successful!\")}\n onFailure={() => console.log(\"Authentication failed!\")}\n canvasWidth={SIZE}\n canvasHeight={SIZE}\n />\n )}\n\n {mode !== \"auth\" && (\n
\n

Welcome to the Picture Password Setup

\n {setupStep === \"number\" && (\n
\n

Choose a Number

\n \n setUserSetup({ chosenNumber: parseInt(e.target.value, 10) })\n }\n >\n \n {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => (\n \n ))}\n \n \n
\n )}\n {setupStep === \"image\" && (\n
\n

Upload Your Picture

\n \n {pictureDataUrl && (\n \n )}\n \n
\n )}\n {(setupStep === \"position\" || setupStep === \"test\") && (\n
\n {setupStep === \"position\" ? (\n

Click on the Picture to Set Position

\n ) : (\n

Test Your Setup

\n )}\n {\n setSetupStep(\"finish\");\n }}\n canvasWidth={SIZE}\n canvasHeight={SIZE}\n />\n {setupStep === \"position\" && (\n {\n setSetupStep(\"test\");\n setMode(\"auth-test\");\n }}\n >\n Next\n \n )}\n
\n )}\n {setupStep === \"finish\" && (\n
\n

Setup Complete

\n

Your picture password is ready to use!

\n 
{JSON.stringify(userSetup, null, 2)}
\n \n
\n )}\n
\n )}\n
\n );\n}\n```\n\n## Features\n\n- **Authentic BB10 Design**: Faithful recreation of the BlackBerry 10 picture password interface\n- **Canvas Rendering**: High-performance matrix rendering with smooth animations\n- **Touch/Mouse Support**: Works with both touch and mouse interactions\n- **TypeScript Support**: Full TypeScript definitions included\n- **Fade Animation**: Visual feedback with fade effects during interaction\n- **Secure Authentication**: Position-based password verification\n\n## Development\n\nThis component is built with:\n- React 19+\n- TypeScript\n- HTML5 Canvas API\n- Vite (for building)\n\n## License\n\nMIT\n","readmeFilename":"README.md"}