CodeCoupler Authentication Module Status Vue

What is this?

This Vue component uses an authentication module to display an icon indicating the user's authentication status. Depending on the status, four different icons are displayed, providing different actions:

• Loading: The authentication module is initialising. No action occurs when clicked.
• Error: The authentication module did not initialise successfully. Clicking opens a dropdown menu which provides information about the cause of the error and the option to reload the page.
• Login: The authentication module has been initialised and the user is not authenticated. Clicking will start the login process.
• User: The authentication module is initialised and the user is not authenticated. Clicking will open a dropdown menu with the option to log out and display all available user information.

The component uses bootstrap in combination with @popperjs/core to display the dropdown.

Setup

Install Bundle:

npm i vue bootstrap @popperjs/core @codecoupler/auth-bundle

Define Aliases, Externals and Assets:

{
  module: "vue",
  global: "Vue",
  entries: ["dist/vue.runtime.global.prod.js"]
},
{
  module: "@popperjs/core",
  global: "Popper",
  entries: ["dist/umd/popper.min.js"]
},
{
  module: "bootstrap",
  global: "bootstrap",
  entries: ["dist/css/bootstrap.min.css", "dist/js/bootstrap.min.js"]
},
{
  module: "@codecoupler/auth-status-vue",
  global: ["codecoupler", "auth", "statusVue"]
},
{
  module: "@codecoupler/auth-bundle",
  global: ["codecoupler", "auth", "bundle"],
  entries: ["dist/codecoupler-auth-bundle.js"]
},

Basic Usage

Use it with JavaScript:

import { AuthStatusVue } from "@codecoupler/auth-status-vue";
import { AuthMockup } from "@codecoupler/auth-mockup";
import { createApp } from "vue";

let vueApp = createApp(AuthStatusVue, {
  auth: new AuthMockup(),
  /* optional additional props */
});
vueApp.mount(element);

Use it as a CodeCoupler Costa Component:

import { AuthStatusVue } from "@codecoupler/auth-status-vue";
import { AuthMockup } from "@codecoupler/auth-mockup";

await this.getStage("stage-id").load({
  component: Vue,
  options: {
    vue: AuthStatusVue,
    props: {
      auth: new AuthMockup(),
      /* optional additional props */
    }
  }
});

Use it as Vue component:

<template>
  <AuthStatusVue :auth="auth"></AuthStatusVue>
</template>
<script>
import { AuthStatusVue } from "@codecoupler/auth-status-vue";
import { AuthMockup } from "@codecoupler/auth-mockup";

export default {
  components: { AuthStatusVue },
  data: function() {
    return {
      auth: new AuthMockup();
    }
  },
}
</script>

Icons

All standard icons are defined as SVG. They have no background, width and height are set to 1em and all shapes use the current text color (fill or stroke attributes are set to "currentColor"). For custom SVG icons, it is recommended that you follow this principle as well.

You can override the default icons using the property iconsComponent. Create a Vue file with multiple svg icons and tag them with v-if like shown below. Place them all in one span element. Define then one prop icon:

<template>
  <span>
    <svg v-if="icon === '{identifier}'"><!-- svg data --></svg>
    <svg v-if="icon === '{identifier}'"><!-- svg data --></svg>
    <svg v-if="icon === '{identifier}'"><!-- svg data --></svg>
  </span>
</template>
<script setup>
defineProps({ icon: { type: String, default: "" } });
</script>

Import this file and use this as prop:

import iconsComponentCustom from "icons-component-custom.vue"
import { AuthStatusVue } from "@codecoupler/auth-status-vue";
import { AuthMockup } from "@codecoupler/auth-mockup";
import { createApp } from "vue";

let vueApp = createApp(AuthStatusVue, {
  auth: auth,
  iconsComponent: iconsComponentCustom
});
vueApp.mount(element);

The following identifiers can be used:

• error
• loading
• login
• logout
• user
• reload

Styling

CSS Classes

The internal HTML structure can be accessed as follows:

& span.icon {
  & svg {}
}

You can select a specific icon by adding the identifier: "& span.icon.identifier {}". Possible identifiers can be found in the above section.

& span.icon.identifier {
  & svg {}
}

Dropdown Menu and Items

The dropdown menu will be rendered into the body of the document. For this reason, in addition to the dropdown-menu class, you can assign an additional class to the dropdown using the dropdownClasses prop to target it more precisely.

Use this class in conjunction with the dropdown-menu class to access the inner HTML elements. Otherwise, Bootstrap's predefined styles may override yours if the Bootstrap stylesheet is loaded after your own:

.your-class.dropdown-menu {
  /* For more styling options, see below */
}

Each entry in the dropdown menu has the class dropdown-item. In addition, an extra class specifies the type of content, which contains specific inner elements.

Dropdown item with an icon and text:

& a.dropdown-item {
  & span.icon {
    & svg {}
  }
  & span.text {}
}

You can select a specific dropdown menu item with an icon and text by adding the identifier: & a.dropdown-item.identifier {}. Possible identifiers:

• logout
• loading
• reload

Dropdown item with error message:

& div.dropdown-item.error {
  & p {}
  & code {}
}

Dropdown item with user information:

& table.dropdown-item.user {}

Reference

The following props can be passed:

auth: Object

Authentication module instance.

dropdownClasses: String

Additional class names for dropdown menu element. The specified classes will be set via the setClass function from the @codecoupler/dom-bundle package. You can provide one or more class names as a string of space-separated values or as an array of strings. See above.

iconsComponent: Vue

Overrides the default icons. See above.

texts: Object

Redefine all texts here:

{
  error: "Cannot Load Authentication Module. Cause:",
  reload: "Reload Page",
  loading: "Loading",
  logout: "Logout",
  username: "Username",
  givenName: "Given Name",
  familyName: "Familiy Name",
  email: "EMail",
  roles: "Roles",
  permissions: "Permissions",
  groups: "Groups",
  id: "ID"
}

showIcons: Object

To show the icons regardless of the current status you can pass the identifier as properties and the value true to this object. Example: { identifier1: true }.