vue-login-critter

Vue Login Critter

An attempt to build a customisable login form with an animated character based on https://github.com/cgoldsby/LoginCritter.

The goal is to build a login form component which allows:

• Drop in of different characters or avatars, supporting rich animations and interactivity
• Customisation of colours, form inputs and button
• TBC

If you like or use this project, please consider supporting my work. Thanks! 🙏🏼

Todo list

This project is in early stages of development, so expect bugs and breaking changes. If you give it a go, please let me know your thoughts!

• Rich animated interactive character responses as user types username and password.

  To allow for rich character animations and interactivity, I think supporting Lottie is the way forward here.

• Additional customisation options such as form inputs, colours, labels.

• Customise background color

• Submit button is a slot which can be replaced

• Character states represented by images (neutral, active, shy, peek and success)

Install

npm install vue-login-critter --save

Usage

In main.js in your Vue project

import Vue from 'vue'
import LoginCritter from 'vue-login-critter'

Vue.use(LoginCritter)

And then, in your template

<login-critter
  background-color="#fff"
  text-color="#333"
  :neutral-image="require('path/to/neutralimage.png')"
  :active-image="require('path/to/activeimage.png')"
  :shy-image="require('path/to/shyimage.png')"
  :peek-image="require('path/to/peekimage.png')"
  :success-image="require('path/to/successimage.png')"
>
  <template v-slot:footer>
    <button type="submit">My button label</button>
  </template>
</login-critter>

See documentation about props, slots and events below.

Props

Name	Type	Required	Default	Description
background-color	String	No	"#3DCEBA"	Background color of login form, any valid css colour value
text-color	String	No	"#2c3e50"	color of text in form, any valid css colour value
neutral-image	String	No	"./assets/neutral.png"	Chracter neutral state, displayed on load when form is empty
active-image	String	No	"./assets/active.png"	Character active state, displayed when username input is focused
shy-image	String	No	"#./assets/shy.png"	Character shy state, displayed when password field is focused
peek-image	String	No	"#./assets/peek.png"	Character peek state, displayed when user toggles show password
success-image	String	No	"./assets/ecstatic.png"	Character success state, displayed when submit button is pressed

Thanks to https://github.com/cgoldsby/LoginCritter for the default character assets.

Slots

Slot name	Description
footer	Allows overriding default submit button

Events

Event	Description
submit-form	Emitted when form is submitted, contains username and password as the first and second positional arguments respectively

<login-critter
  // ...props
  @submit-form="loginUser"
>
</login-critter>

// and in your methods
loginUser(username, password) {
  // do something here
}