@marketally/nopwd-vue3-library

Provides a login module for the nopwd system and support libraries
3,168
Install
npm install @marketally/nopwd-vue3-library
Latest Version:4.9.2
Vue:3
License:MIT
Last Updated:Jan 27, 2025
Links: npm
Maintainer: logikonline

NoPWD Vue3 Library

Easy NoPWD Authentication Library for Vue3.

NoPWD is a powerful, easy-to-use library for incorporating NoPWD based login functionality into your Vue 3 applications. It primarily focuses on leveraging QR codes for seamless and secure passwordless authentication.

🚀 Features

  • QR Code Integration: Generate and display QR codes for login to the NoPWD System platform.
  • Responsive: Adaptable display for various screen sizes, including mobile screens.
  • Custom Theming: Configurable themes for light and dark modes.
  • Event Emitters: Emit events for errors, redirections, and authentication status updates.
  • Encrypted Data Transmission: Securely handle data with encryption.
  • Vue3 Compatible: Designed specifically for Vue 3 environments.

🔧 Installation

Install NoPWD with npm:

npm install @marketally/nopwd-vue3-library

🎈 Usage

To use the NoPWD Vue3 component in your project, follow the steps below:

  1. Using the Component:
<script setup>
import Login from '@marketally/nopwd-vue3-library';
</script>

<template>
  <Login 
    :isMobileScreen="true"
    :isDark="false"
    primaryDark="#c48a56"
    secondaryDark="#18181b"
    logoDark="path_to_dark_logo.png"
  />
</template>
  1. Listening to Events:

You can also listen to events emitted by the component, such as Error, Redirect, and Status to handle different scenarios in the authentication process.

📖 Documentation

Property Type Default Value Description
isMobileScreen Boolean false Determines if the screen size is mobile.
primaryDark String #c48a56 Primary dark color theme.
primaryLight String #606C38 Primary light color theme.
secondaryDark String #18181b Secondary dark color theme.
secondaryLight String #ffffff Secondary light color theme.
isDark Boolean false Determines if dark mode is active.
positionLight String #000000 Light color for QR code position markers.
positionDark String #ffffff Dark color for QR code position markers.
accentColor String #ffffff Accent color for various UI elements.
logoDark String '' URL for the dark-themed logo.
logoLight String '' URL for the light-themed logo.
configDev String '' Configuration URL for the development environment. (e.g. http://localhost:3000)
configProduction String '' Configuration URL for the production environment. (e.g. https://www.yoursite.com)
configApp String '' App configuration URL. (e.g. '/app')
configLogin String '' Login configuration URL. (e.g. '/auth/login')
configRequest String '' Request configuration URL. This is used to request the code from your service which contacts the NoPWD system.
configVerify String '' Verify configuration URL. Calls your service to verify the status of the request
configConfirm String '' Confirmation configuration URL. oOnfirms the access is still valid
configLogout String '' Logout configuration URL. THe service call to your service whethr to log the user out.

Each property can be easily customized to fit the design and functionality needs of your application. Adjust the defaults as necessary to achieve your desired look and behavior.

📃 License

NoPWD is licensed under the MIT License.

🎯 Support

If you need help or have any questions, please open an issue on our GitHub page.

🎉 About Us

NoPWD is maintained by @MarketAlly. We are a team of passionate developers dedicated to creating useful, high-quality software.

Version History

Version Released Vue License
4.9.2 ^3.2.45 MIT
4.9.1 ^3.2.45 MIT
4.9.0 ^3.2.45 MIT
4.8.9 ^3.2.45 MIT
4.8.8 ^3.2.45 MIT