Manuel de référence

# Logout Component

# Description

Ce composant est un bouton, permettant de supprimer les Smart Element verrouillés et lance une requête de déconnexion et de revenir sur la page d'accueil. La déconnexion est annulable, dans ce cas l'utilisateur reste connecté et n'est pas redirigé. Le contenu de ce bouton est personnalisable, en y insérant un fragment html (une icône au format image, une icône issue d'une police de caractères).

# Initialisation

Le composant AnkLogout est défini dans la bibliothèque "@anakeen/user-interfaces/components/lib/AnkLogout.esm".

Exemple d'initialisation

<template>
  <div>
    <ank-logout ref="logoutComponent" title="Déconnexion" />
  </div>
</template>
<script>
  import AnkLogout from "@anakeen/user-interfaces/components/lib/AnkLogout.esm";
  export default {
    components: {
      AnkLogout
    }
  };
</script>

Aperçu du composant

default

# Propriétés

# Title

Chaîne de caractères qui sera affichée sous forme d'info-bulle lors du survol de celui-ci. Sa valeur par défaut est 'Logout' ou 'Déconnexion', selon la langue choisie par l'utilisateur.

# withCloseConfirmation

Booléen qui sert a déterminer si l'on doit vérifier s'il reste des éléments non verrouillés. Sa valeur par défaut est 'true'.

# autoDestroy

Booléen qui sert a déterminer si l'on doit supprimer les éléments non verrouillés. Sa valeur par défaut est 'true'.

    <ank-logout ref="logoutComponent" title="Se déconnecter" withCloseConfirmation="true" autoDestroy="true" />

# Événements

# beforeLogout

Événement déclenché lorsque le bouton est cliqué, avant la déconnexion effective de l'utilisateur. La fonction preventDefault() de l'événement permet d'annuler la déconnexion de l'utilisateur.

L'exemple suivant affiche une alerte prévenant l'utilisateur qu'il va être déconnecté :

    <ank-logout ref="logoutComponent" title="Déconnexion" withCloseConfirmation="true" autoDestroy="true" />

let logoutComponent = this.$refs.logoutComponent;
logoutComponent.$on("beforeLogout", event => {
  window.alert("User will be logged out");
});

Il est possible d'annuler la déconnexion en faisant appel à la fonction preventDefault() de l'événement :

    <ank-logout ref="logoutComponent" title="Déconnexion" withCloseConfirmation="true" autoDestroy="true" />

let logoutComponent = this.$refs.logoutComponent;
logoutComponent.$on("beforeLogout", event => {
  window.alert("User will not be logged out");
  event.preventDefault();
});

# afterLogout

Événement déclenché lorsque l'utilisateur a été deconnecté sur le serveur, avant la redirection. Il transmet le nom, le prénom et le login de l'utilisateur déconnecté, ainsi que l'url de redirection.

Format des données transmises :

    "data" : {
    	"firstName": "Jean",
    	"lastName": "Dupont",
    	"login": "jean.dupont",
    	"location": "/",
    	"locale": "fr_FR"
    }

L'exemple suivant affiche une alerte prévenant l'utilisateur qu'il est bien déconnecté et lui affiche l'url à laquelle il va être redirigé :

    <ank-logout ref="logoutComponent" title="Déconnexion" withCloseConfirmation="true" autoDestroy="true" />

let logoutComponent = this.$refs.logoutComponent;
logoutComponent.$on("afterLogout", event => {
  let data = event.detail[0];
  window.alert(
    data.firstName +
      " " +
      data.lastName +
      " (" +
      data.login +
      ") logged out. User will be redirected to " +
      data.redirectionUrl
  );
});

# logoutCanceled

Événement déclenché lorsque la demande de déconnexion a été annulée via la fonction preventDefault() de l'événement beforeLogout.

En cas d'annulation, l'événement logoutCanceled est émis par le composant. L'exemple suivant affiche une alerte qui informe l'utilisateur que la déconnexion a été annulée :

    <ank-logout ref="logoutComponent" title="Déconnexion" withCloseConfirmation="true" autoDestroy="true" />

let logoutComponent = this.$refs.logoutComponent;
logoutComponent.$on("logoutCanceled", () => {
  window.alert("Logout canceled, User is still logged in");
});

# Exemples

# Composant avec l'icône par défaut

    <ank-logout ref="logoutComponent" title="Déconnexion" withCloseConfirmation="true" autoDestroy="true" />

Placement "top"

# Composant avec un contenu personnalisé

    <ank-logout title="Déconnexion">
      <template v-slot:content>
        <span>Click to log out</span>
      </template>
    </ank-logout>

Placement "top"

# Composant avec icône personnalisée

    <ank-logout title="Déconnexion">
      <template v-slot:content>
        <i class="fa fa-user"></i>
      </template>
    </ank-logout>

Placement "top"

Ici la police de caractères font-awesome est utilisée. Il faut que la police soit préalablement chargée.

← Smart Criteria →