@unicorns/sign-me-up NPM

About this package

This is a vue2 generic and dynamic signup package.

Compatible with UnicornGlobal/quick-dash-framework.

Designed to work with a UnicornGlobal/strong-lumen based backend.

Installation

npm install @unicorns/sign-me-up --save

Usage

// In your vue component
<template>
    <div>
        <sign-me-up :options="signupOptions"></sign-me-up>
    </div>
</template>
<script>
    import SignMeUp from '@unicorns/sign-me-up'

    export default {
        components: {
          SignMeUp
        },
        data(){
            return {
                signupOptions: {
                    title: 'Sign Up',
                    registrationUrl: 'https://api.example.com/register',
                    registrationAccessKey: 'some-key',
                    debugToken: 'some-debug-token',
                    loginUrl: 'https://dashboard.example.com/login',
                    pages: [
                        {
                          name: 'personal',
                          tag: 'personal',
                          fields: [
                            {
                              id: 'firstName',
                              label: 'First Name',
                              type: 'text',
                              disabled: false,
                              required: true
                            },
                            {
                              id: 'lastName',
                              label: 'Last Name',
                              type: 'text',
                              disabled: false,
                              required: true
                            },
                            {
                              id: 'email',
                              label: 'Email',
                              type: 'email',
                              disabled: false,
                              required: true
                            },
                            {
                              id: 'mobile',
                              label: 'Mobile',
                              type: 'phone',
                              disabled: false,
                              required: true
                            },
                            {
                              id: 'password',
                              label: 'Password',
                              type: 'password',
                              disabled: false,
                              required: true,
                              confirm: true
                            }
                          ]
                        }
                    ]
                }
            }
        }
    }
</script>

Setup

The component accepts only one prop, options - A configuration object for the dynamic signup process

Basic Theme Support

You can set a basic theme on the signups

It uses CSS modules and variables and a little bit of upfront processing to override the included defaults.

To pass in the theme you now need to Vue.use(SignMeUp)

You can also add custom assets for dropdowns, checkboxes, etc.

Example

// In the host application
import SignMeUp from '@unicorns/sign-me-up'

// This example will override these theme variables.
Vue.use(SignMeUp), {
  theme: {
    primary: '#DAB',
    secondary: '#343',
    padding: '1em'
  },
  // you can also add custom assets
  assets: {
    dropdown: 'url(data:image/svg+xml;utf8,<svg><path stroke="#000" d="m2,2 15,15m0-15-15,15"/></svg>)'
  }
})

Special Fields

There are some special field types that add enhanced inputs

Phone Number

Phone number inputs includes a dropdown with flags.

Example

{
  id: 'phone',
  label: 'phone',
  type: 'phone',
  disabled: false,
  required: true,
  autocomplete: 'tel-country-code',
  placeholder: '+27 82 222 2222',
  preferredCountries: ['US'],
  disableFetchingCountries: true,
  name: 'mobile'
}

Google Places Autocomplete

Autocomplete using Google places

{
  id: 'city',
  label: 'City',
  type: 'google-places',
  googlePlacesKey: 'add-your-api-key-here'
  disabled: false,
  required: true,
  autocomplete: 'address-level1',
  name: 'location'
}