Manuel de référence

# Identity Component

# Description

Badge permettant d'identifier l'utilisateur courant (initiales et éventuellement prénom et nom). Permet aussi, suivant configuration, de modifier des informations sur son profil (adresse email et/ou mot de passe).

# Initialisation

Le composant AnkIdentity est défini dans la bibliothèque "@anakeen/user-interfaces/components/lib/AnkIdentity.esm" et sa CSS provient de @anakeen/user-interfaces/components/scss/AnkIdentity.scss.

Exemple d'initialisation

<template>
  <div>
    <ank-identity />
  </div>
</template>
<script>
  import AnkIdentity from "@anakeen/user-interfaces/components/lib/AnkIdentity.esm";
  import "@anakeen/user-interfaces/components/scss/AnkIdentity.scss";
  export default {
    components: {
      AnkIdentity
    }
  };
</script>

Aperçu du composant

identityDefault

# Propriétés

# large

Booléen, définit si le composant doit afficher uniquement le badge avec les initiales (large="false"), ou également afficher le nom et l'email de l'utilisateur (large="true"). Sa valeur est définie à false par défaut.

    <ank-identity :large="true" />

identityLarge

# email-alterable

Booléen, définit si l'utilisateur peut ou non modifier l'adresse email rattachée à son profil depuis le composant. Sa valeur est définie a false par défaut.

    <ank-identity :email-alterable="true" />

identityMailAlterable

Si la valeur est true, alors un bouton sera affiché dans un menu déroulant pour permettre la saisie d'adresse email.

# password-alterable

Booléen, définit si l'utilisateur peut ou non modifier son mot de passe depuis le composant. Sa valeur est définie à false par défaut.

    <ank-identity :password-alterable="true" />

Si la valeur est true, alors un bouton sera affiché dans un menu déroulant pour permettre la saisie du changement de mot de passe.

Placement "left"

# Événements

# beforeUserLoaded

Événement déclenché lorsque les informations de l'utilisateur ont été chargées depuis le serveur mais n'ont pas encore été chargées dans le composant. Il transmet les informations chargées de l'utilisateur connecté (initiales, nom, prénom, login, email et langue). La fonction preventDefault() de l'événement permet d'annuler le chargement des informations de l'utilisateur dans le composant. L'événement peut être intercepté pour modifier les données reçues qui seront affichées par le composant.

Format des données transmises dans l'événement, dans le champ event.detail[0] :

    "data": {
        "initials": "JD",
        "firstName": "Jean",
        "lastName": "Dupont",
        "login": "jean.dupont",
        "email": "jean.dupont@example.com",
        "locale": "fr_FR.UTF-8"
    }

L'exemple suivant modifie les initiales renvoyées par le serveur pour les mettre en minuscules :

    <ank-identity ref="identityComponent"
                  :large="false"
                  :email-alterable="false"
                  :password-alterable="false" />

let identityComponent = this.$refs.identityComponent;
identityComponent.$on("beforeUserLoaded", event => {
  let data = event.detail[0];
  data.initials = data.initials.toLowerCase();
});

L'exemple suivant annule le chargement des données utilisateur dans le composant :

    <ank-identity ref="identityComponent"/>

let identityComponent = this.$refs.identityComponent;
identityComponent.$on("userLoaded", event => {
  event.preventDefault();
});

# afterUserLoaded

Événement déclenché lorsque les informations de l'utilisateur ont été chargées dans le composant. Il transmet les informations chargées de l'utilisateur connecté (initiales, nom, prénom, login et email).

Format des données transmises dans l'événement, dans le champ event.detail[0] :

    "data": {
        "initials": "JD",
        "firstName": "Jean",
        "lastName": "Dupont",
        "login": "jean.dupont",
        "email": "jean.dupont@example.com",
    }

L'exemple suivant affiche les données utilisateurs :

    <ank-identity ref="identityComponent"/>

let identityComponent = this.$refs.identityComponent;
identityComponent.$on("afterUserLoaded", event => {
  let data = event.detail[0];
  alert(JSON.stringify(data));
});

# beforeMailAddressChange

Événement déclenché lorsque le bouton de validation a été cliqué pour envoyer la requête de modification de son adresse email, et avant que cette requête ne soit envoyée au serveur. La fonction preventDefault() de l'événement permet d'annuler la modification de l'email. L'événement beforeMailAddressChange transmet la nouvelle valeur de mail demandée.

Format des données transmises, dans le champ event.detail[0] :

    "data": {
        "newEmail": "new.mail.adress@example.com",
    }

L'exemple suivant empêche le changement de l'adresse email si la nouvelle adresse n'appartient pas au domaine @example.com :

    <ank-identity ref="identityComponent"
                  :large="false"
                  :email-alterable="true"
                  :password-alterable="true" />

let identityComponent = this.$refs.identityComponent;
identityComponent.$on("beforeMailAddressChange", event => {
  let data = event.detail[0];
  if (!data.newEmail.match(/\S+@example.com/)) {
    event.preventDefault();
    alert("The new email doesn't belong to an authorized domain");
  }
});

# afterMailAddressChange

Événement déclenché lorsque l'adresse email a été modifiée sur le serveur. Il transmet la nouvelle adresse email enregistrée sur le serveur.

Format des données transmises dans le champ event.detail[0] :

    "data": {
        "email": "jean.dupont@example.com"
    }

L'exemple suivant indique à l'utilisateur sa nouvelle adresse email enregistrée sur le serveur :

    <ank-identity ref="identityComponent"
                  :large="false"
                  :email-alterable="true"
                  :password-alterable="true" />

let identityComponent = this.$refs.identityComponent;
identityComponent.$on("afterMailAddressChange", event => {
  let data = event.detail[0];
  alert("Your email has been updated. Your new email is " + data.email);
});

# beforePasswordChange

Événement déclenché lorsque l'utilisateur a cliqué sur le bouton de validation pour envoyer la requête de modification de son mot de passe, et avant que cette requête ne soit envoyée au serveur. La fonction preventDefault de l'événement permet d'annuler la modification du mot de passe. L'événement beforePasswordChange ne transmet pas d'informations

L'exemple suivant empêche le changement du mot de passe :

    <ank-identity ref="identityComponent"
                  :large="false"
                  :email-alterable="true"
                  :password-alterable="true" />

let identityComponent = this.$refs.identityComponent;
identityComponent.$on("beforePasswordChange", event => {
  event.preventDefault();
  alert("The admin password can't be changed");
});

# afterPasswordChange

Événement déclenché lorsque le mot de passe a été modifié sur le serveur. Il transmet les informations de l'utilisateur connecté (initiales, nom, prénom, login et email).

Format des données transmises dans l'événement, dans le champ event.detail[0] :

    "data": {
        "initials": "JD",
        "firstName": "Jean",
        "lastName": "Dupont",
        "login": "jean.dupont",
        "email": "jean.dupont@example.com",
    }

L'exemple suivant affiche une alerte à l'utilisateur lui indiquant que son mot de passe a bien été modifié :

    <ank-identity ref="identityComponent"
                  :large="false"
                  :email-alterable="true"
                  :password-alterable="true" />

let identityComponent = this.$refs.identityComponent;
identityComponent.$on("afterPasswordChange", () => {
  alert("Your password was successfully modified");
});

← Logout →