@dzangolab/vue-user v0.2.0

@dzangolab/vue-user

Installation

via npm

npm install @dzangolab/vue-user

via yarn

yarn add @dzangolab/vue-user

Usage

Provided components are built on Bootstrap 4 so install bootstrap 4 as stated here.

Install Vuejs user module as follows:

# main.js

import initUserModule from '@dzangolab/vue-user'

const apiRoutes = {
    enable: '/user/enable',
    login: '/login',
    logout: '/logout',
    me: '/me',
    refresh: '/login/refresh',
    requestPasswordReset: '/request-password-reset',
    resetPassword: '/reset-password/:token', // dynamic segments start with a colon
    signup: '/signup',
    updatePassword: '/user/change-password',
    updateProfile: '/me',
    updateUser: '/me'
}

const options = {
}

initUserModule(
  store,
  axios,
  router,
  apiRoutes,
  options
)

arguments

options

default options

import {ProfileModel, UserModel} from '@dzangolab/vue-user'

const options = {
    login: {
      emailAsUsername: false,
      showPasswordToggle: true,
      showSubTitles: false
    },
    namespace: '$_user',
    onLoginSuccess: null, //callback
    onLogoutSuccess: null, //callback
    password: {
      length: {
        max: 255,
        min: 6
      }
    },
    profileModel: new ProfileModel(),
    routes: {
      login: 'login',
      home: 'home',
      pageNotFound: null,
      redirectAfterLogout: 'login',
      redirectAfterSignup: 'profile',
      resetPassword: 'reset_password',
      resetPasswordRequest: 'reset_password_request',
      signup: 'signup'
    },
    signup: {
      enabled: true,
      showPasswordToggle: true
    },
    sso: {
      apiBaseUrl: '',
      enabled: false,
      layout: {
        direction: 'v', //supports 'v' or 'vertical' and 'h' or 'horizontal'
        ssoFirst: false
      },
      providers: [],
      showLabels: false
    },
    userModel: new UserModel()
  }

Localization

import VueI18n from 'vue-i18n'

import userEn from '@dzangolab/vue-user/src/locales/en/user.json'
import userFr from '@dzangolab/vue-user/src/locales/fr/user.json'

const i18n = new VueI18n({
  locale: 'en',
  en: userEn,
  fr: userFr
})

Route meta fields

This plugin uses following meta fields in beforeEach guard of router instance. These can be specified when defining a route in the app

Social login

For social login, internally it uses vue-authenticate

providers = {
  facebook: {
    clientId: process.env.VUE_APP_SSO_FACEBOOK_APP_ID, // https://developers.facebook.com/appspage/
    enabled: parse(process.env.VUE_APP_SSO_FACEBOOK_ENABLED, true),
    rank: parse(process.env.VUE_APP_SSO_FACEBOOK_RANK, 2)
  },
  github: {
    clientId: process.env.VUE_APP_SSO_GITHUB_CLIENT_ID, // https://github.com/settings/applications
    enabled: parse(process.env.VUE_APP_SSO_GITHUB_ENABLED, true),
    rank: parse(process.env.VUE_APP_SSO_GITHUB_RANK, 4)
  },
  google: {
    clientId: process.env.VUE_APP_SSO_GOOGLE_CLIENT_ID, // https://console.developers.google.com > credentials
    enabled: parse(process.env.VUE_APP_SSO_GOOGLE_ENABLED, false),
    rank: parse(process.env.VUE_APP_SSO_GOOGLE_RANK, 1)
  },
  linkedin: {
    clientId: process.env.VUE_APP_SSO_LINKEDIN_CLIENT_ID, // https://www.linkedin.com/developers/apps
    enabled: parse(process.env.VUE_APP_SSO_LINKEDIN_ENABLED, false),
    rank: parse(process.env.VUE_APP_SSO_LINKEDIN_RANK, 3)
  }
}

Component Reference TODO review these

<Login>

Events

<Profile>

Events

<RequestPasswordReset>

Events

<ResetPassword>

Events

<Confirm>

Events

<Signup>

Properties

Events