Atlantis-auth NPM

Utilização

Requisitos

Para utilizar os componentes o projeto deve respeitar os seguintes requisitos:

Vue 2.x
Vuetify 2.x
Vue router
Material Design Icons

Instalação

Adicione a dependencia yarn add atlantis-auth
Configure o plugin:

// ./plugins/atlantis.js
import Vue from "vue";
import VueAtlantisComponents from "atlantis-auth";
import {
  CLIENT_ID,
  ATLANTIS_URL
} from "@/constants/env.constant";
import store from '@/store';
import router from '@/router';
import api from '@/api';

Vue.use(VueAtlantisComponents, {
  clientId: CLIENT_ID,
  atlantisUrl: ATLANTIS_URL,
  privateRoute: "private",
  publicRoute: "public",
  store,
  router,
  axiosInstance: api,
  lang: "pt-BR"
});

O módulo AtlantisAuthModule será instalado automaticamente no seu store;
Sua rota 'private' e todos seus filhos irão executar o AtlantisPrivateGuard;
Sua rota 'public' e todos seus filhos irão executar o AtlantisPublicGuard;
Configura interceptors na instancia do axios;

Importe o arquivo criado em main.js

import "./plugins/atlantis";

Adicione o mixin de resposta do código na view pública (landing neste caso):

<script>
import { AtlantisVertifyCodeMixin } from "atlantis-auth";

export default {
  mixins: [AtlantisVertifyCodeMixin],
  ...
};
</script>

Adicione os componentes no arquivo /plugins/vuetify.js.

import Vuetify, {
  VIcon,
  VMenu,
  VAvatar,
  VSubheader,
  VList,
  VListItem,
  VListItemAvatar,
  VListItemContent,
  VListItemTitle,
  VListItemSubtitle,
  VDivider
} from "vuetify/lib";

Vue.use(Vuetify, {
  components: {
    VIcon,
    VMenu,
    VAvatar,
    VSubheader,
    VList,
    VListItem,
    VListItemAvatar,
    VListItemContent,
    VListItemTitle,
    VListItemSubtitle,
    VDivider
  }
});

Componentes

AtlantisLoginBtn

Botão que redireciona o usário o Atlantis.

<template>
  <AtlantisLoginBtn />
</template>

<script>
import { AtlantisLoginBtn } from "atlantis-auth";

export default {
  components: {
    AtlantisLoginBtn
  }
};
</script>

AtlantisAccount

Exibe o avatar e menu com dados da conta e links de logout e configuração de conta.

<template>
 <AtlantisAccount />
</template>


<script>
import { AtlantisAccount } from "atlantis-auth";

export default {
  components: {
    AtlantisAccount
  }
};
</script>