0.1.9 • Published 3 years ago
@tadynas/gpass v0.1.9
gpass 🔑
Graphical Password Authentication System for Security
Check Live Version here
Features
- Easy to Use
- Efficient Way to Create New Password
- A lot of Usability Perks
- User Oriented Password Creation
Install
npm install @tadynas/gpass
or
yarn add @tadynas/gpass
then add style sheet to the root of your project
import '@tadynas/gpass/styles-min.css'
Registration Password
import { RegistrationPass } from '@tadynas/gpass'
<RegistrationPass
images={images}
email={email}
password={password}
disableButton={false}
handleChangePassword={(updatedPassword) => setPassword(updatedPassword)}
handleSignUp={() => console.log('Sign Up')}
error={error}
/>
- images - array of 4 images links that will be displayed for the user
- email - user provided email
- password - password that user will provide
- disableButton - disable button when waiting response from server
- handleChangePassword - updated password
- handleSignUp - user pressed 'Sign Up' button when available
- error - provide a message when server is not working or user password is incorrect
Login Password
import { LoginPass } from '@tadynas/gpass'
<LoginPass
images={images}
email={email}
password={password}
disableButton={false}
handleChangePassword={(updatedPassword) => setPassword(updatedPassword)}
handleSignIn={() => console.log('Sign In')}
error={error}
/>
- images - array of 4 images links that will be displayed for the user
- email - user provided email
- password - password that user will provide
- disableButton - disable button when waiting response from server
- handleChangePassword - updated password
- handleSignIn - user pressed 'Sign In' button when available
- error - provide a message when server is not working or user password is incorrect
Example Code
Login Page
import { useState } from 'react'
import '@tadynas/gpass/styles-min.css'
import { LoginPass } from '@tadynas/gpass'
function App() {
const [email, setEmail] = useState('test@email.com')
const [password, setPassword] = useState('')
const [error, setError] = useState('')
return (
<LoginPass
images={['https://tinyurl.com/ye9k9847',
'https://tinyurl.com/yttpmuyt',
'https://tinyurl.com/4nex98t3',
'https://tinyurl.com/y6nd8jha']}
email={email}
password={password}
handleChangePassword={(updatedPassword) => setPassword(updatedPassword)}
handleSignIn={() => console.log('Sign In')}
error={error}
/>
)
}
export default App
Registration Page
import { useState } from 'react'
import '@tadynas/gpass/styles-min.css'
import { RegistrationPass } from '@tadynas/gpass'
function App() {
const [email, setEmail] = useState('test@email.com')
const [password, setPassword] = useState('')
const [error, setError] = useState('')
return (
<RegistrationPass
images={['https://tinyurl.com/ye9k9847',
'https://tinyurl.com/yttpmuyt',
'https://tinyurl.com/4nex98t3',
'https://tinyurl.com/y6nd8jha']}
email={email}
password={password}
handleChangePassword={(updatedPassword) => setPassword(updatedPassword)}
handleSignUp={() => console.log('Sign Up')}
error={error}
/>
)
}
export default App