This is a simple react based login window.
Use npm to install the package.
npm install @linofischer/react-simple-login
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;
}
}
<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)}
}}
/>
<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
}}
/>