@linofischer/react-simple-login
v1.0.4
Published
A simple react based login window.
Downloads
19
Maintainers
Readme
Simple react login window
This is a simple react based login window.
Installation
Use npm to install the package.
npm install @linofischer/react-simple-login
LoginProps
You have to use one of theses attributes: formEvents, credentials or checkCredentials!
export type LoginProps = {
// Headline of the window
headline?: string;
// Message when the login failed
loginFailedMessage?: string;
// Set the credentials -> the component will check if credentials are
// matching - DO NOT USE THIS IN PRODUCTION!
credentials?: {
// Callback if login was successfull
callback: (loginSuccess: boolean) => void;
password: string;
username?: string;
// If the login was successfull, save a flag in localstorage to
// skip login next time
saveLoginStateToLocalStorage?: boolean = false;
},
// Function to check credentials
checkCredentials?: {
checkPassword: (password: string, username?: string) => Promise<boolean>;
// If a username is needed in the function above
username?: boolean = false;
},
// Get the raw events
formEvents?: {
// Password input field value changed
onPasswordChange: (password: string) => void;
// Login button clicked
onLoginTrigger: (logintriggered: true) => void;
// Username input field value changed
onUsernameChange?: (username: string) => void;
// Show "wrong username/password" message
showLoginFailedMessage?: boolean = true;
}
}
Usage
formEvents - get the raw events and the full control:
<Login
formEvents={{
onPasswordChange: (password: string) => console.log("password", password),
onUsernameChange: (username: string) => console.log("username", username),
onLoginTrigger: (loginClicked: true) => console.log("loginClicked", loginClicked)
}}
/>
credentials - use password (and username), the component then checks if it matches the input fields (DO NOT USE IN PRODUCTION):
<Login
credentials={{
password: '1234',
username: 'user',
callback:(success: boolean) => {console.log('Login success', success)}
}}
/>
checkCredentials - use a function that checks the password (and username):
<Login
checkCredentials={{
checkPassword: async (password: string, username: string) => {
// await anyAsyncFunction();
// return resultof anyAsyncFunction
console.log("username", username);
console.log("password", password);
return true;
},
username: true
}}
/>