vue-secure-component

VueJS Component for lock your component from viewing.

Support for both Vue 3 and Vue 2 + Composition API

Table of Contents

• Demo
• Installation
• Usage
  • Inject
  • Props
  • Slots
  • Methods
• License

Demo

Working on progress..., check here for updated demo

Installation

Install using package manager:

npm install --save-dev vue-secure-component

# or with Vue 2

npm install --save-dev vue-secure-component @vue/composition-api

Then add it to your component files

<!-- MyComponent.vue -->

<template>
  <vue-secure-component
    ref="YourRefNameHere"
  />
</template>

<script>
import VueSecureComponent from 'vue-secure-component';
import 'vue-secure-component/dist/vue-secure-component.css';

export default {
  name: 'MyComponent',
  components: {
    VueSecureComponent
  },
  provide: {
    passcode: "yourpasswordhere"
  }
}
// or with Vue 2
export default {
  name: 'MyComponent',
  components: {
    VueSecureComponent
  },
  provide() {
    return {
      passcode: "yourpasswordhere"
    }
  }
}
</script>

Usage

Inject

passcode

passcode: {
  type: String,
  default: () => "123456"
}

You MUST provide passcode for vue-secure-component to check input pascode.

If you do not provide passcode, default value is "123456".

Props

attempt

attempt: {
  type: Number,
  default: () => -1
}

Maximum unlock attempts.

Set -1 for no maximum unlock attempts.

timeout

timeout: {
  type: Number,
  default: () => 30
}

Timeout start when attempt reach maximum attempt.

value is in seconds.

dialog

dialog: {
  type: Boolean,
  default: () => false
}

Show vue-secure-component on dialog box.

unlockOnce

unlockOnce: {
  type: Boolean,
  default: () => false
}

Stay unlock if unlocked before.

placeholder

placeholder: {
  type: String,
  default: () => "Enter your password"
}

Password input field placeholder.

hideAttemptLabel

hideAttemptLabel: {
  type: Boolean,
  default: () => false
}

Hide current attempt label.

If attempt is -1, attempt label ALWAYS HIDE.

emptyPasswordLabel

emptyPasswordLabel: {
  type: String,
  default: () => "Please enter password."
}

Error message for empty password field.

wrongPasswordLabel

wrongPasswordLabel: {
  type: String,
  default: () => "Wrong password. Please try again."
}

Error message for wrong input password.

lockTimeoutLabel

lockTimeoutLabel: {
  type: [String, Function],
  default: (props) => `You've reached maximum unlock attempts. Please try again after ${props.timeout} seconds.`
}

Error messsage if you have reached maximum attempts.

Slots

image.lock

<template #image.lock>
  <svg xmlns="http://www.w3.org/2000/svg" width="52" height="48" viewBox="0 0 52.087 48.837">
    <g id="g3888">
      <path id="path3848" d="m26.046 11.624c-4.4275 0-8.0225 4.125-8.0675 9.25-1.8 0.1825-3.18 1.5-3.18 3.125v13.225h22.5v-13.225c0-1.5-1.375-2.95-3.18-3.125-0.045-5.125-3.6425-9.25-8.07-9.25zm0 2.5c3.28 0 5.95 3.05 6.005 6.825h-12.005c0.055-3.775 2.72-6.825 6-6.825zm-0.55 12.45h1.125c0.425 0 0.75 0.25 0.75 0.75v4.05c0 0.5-0.325 0.75-0.75 0.75h-1.125c-0.425 0-0.75-0.25-0.75-0.75v-4.05c0-0.5 0.325-0.75 0.75-0.75z" />
      <path id="path3201" d="m47.424 24.424c0 10.906-9.5701 19.746-21.376 19.746-11.805 0-21.376-8.8406-21.376-19.746 0-10.906 9.5701-19.746 21.376-19.746 11.805 0 21.376 8.8406 21.376 19.746z" stroke="#000" stroke-width="2.25" fill="none" />
    </g>
  </svg>
</template>

Change default lock image.

button.unlock

<template #button.unlock>
  <button type="submit" class="vsc-btn-unlock">UNLOCK</button>
</template>

Change default unlock button.

label.attempt

<template #label.attempt="{ attempt }">
  <span>Current Attempt: {{ attempt }}</span>
</template>

Current attempt label.

attempt is current attempt.

label.errorMessage

<template #label.errorMessage="{ message }">
  <span class="vsc-text-error"><em>{{ message }}</em></span>
</template>

Error message label.

message is error message.

Methods

unlock()

this.$refs.YourRefNameHere.unlock()

Manual unlock your component.

resetAttempt()

this.$refs.YourRefNameHere.resetAttempt()

Reset unlock attempts to 1.

License

MIT