nb-password-validation-section

This is a password (validator) component for Vue.js 3+.

Loading component...

This component is designed to accept the most secure password standard that is currently recommended:

  • Minimum of 8 characters
  • At least 1 uppercase letter
  • At least 1 lowercase letter
  • At least 1 number
  • At least 1 special character (!@#$%^&*(),.?:{}\|<>+-_)

Installation

Yarn
yarn add @vlalg-nimbus/nb-password
NPM
npm install @vlalg-nimbus/nb-password

Usage

Vue 3
import { createApp } from 'vue'
import App from './App.vue'

import NbPasswordComponents from '@vlalg-nimbus/nb-password'
import "@vlalg-nimbus/nb-password/dist/style.css";

const app = createApp(App)
app.use(NbPasswordComponents)
app.mount('#app')
Nuxt 3
import NbPasswordComponents from '@vlalg-nimbus/nb-password'
import "@vlalg-nimbus/nb-password/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbPasswordComponents)
})

To use, simply call the component, in this case it will be NbPasswordValidationSection or nb-password-validation-section.

Mode 1
<template>
  <NbPasswordValidationSection />
</template>
Mode 2
<template>
  <nb-password-validation-section />
</template>
Mode 3
<template>
  <nb-password-validation-section></nb-password-validation-section>
</template>

Preview & Playground

Select the component you want to edit/test

Loading Sandbox...

Props

Items with an (*) mean they are required

nameValue typeDefaultDescription
nbId (*)StringSets the id attribute to differentiate from other components
displayString'b'Defines the display type. Accepts ib and b.
passwordString''Defines the password text.
hasLabelBooleanfalseDefines if the label is shown
labelString''Defines the label text. It only works when hasLabel is passed with the value true.
hasDescriptionsBooleanfalseDefines if the description is shown
descriptionsArray (Strings)Defines the descriptions text. It only works when hasLabel is passed with the value true. Accepts an array of 5 strings.
widthNumber56Defines the columns width.
gapNumber10Defines the columns gap.
labelGapNumber10Defines the label gap. It only works when hasLabel is passed with the value true.
statusColorString'#999999'Defines the status color. Accepts Color name and Hex
validStatusColorString'#72f258'Defines the valid status color. Accepts Color name and Hex
titleColorString'#000000'Defines the title color. Accepts Color name and Hex
descriptionColorString'#000000'Defines the description color. Accepts Color name and Hex
fontFamilyString"'Lato', sans-serif"Defines the font-family
fontSizeString'1.6em'Defines the columns font-size
fontSizeLabelString'.9em'Defines the label font-size
fontSizeDescriptionString'.8em'Defines the descriptins font-size
fontWeightNumber200Defines the label font-weight
Table of Contents