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
}