# Présentation pas-à-pas de la création d'un mot de passe sur un site Web

Supposons que je veuille ajouter un compte mastodon (<https://mastodon.social>) lié à mon adresse mail. Je me rends sur le site

```{image} img/nouvel-identifiant.webp
:alt: Création d'un compte mastodon
:align: center
```

On ouvre l'extension qui nous montre que notre coffre est vide et nous permet d'ajouter un élément

```{image} img/nouvel-identifiant-1.webp
:alt: Cliquer sur "+" ou "Ajouter un élément"
:align: center
```

L'extension indique par défaut un nom pour cet élément et un mot de passe est automatiquement proposé

```{image} img/nouvel-identifiant-2.webp
:alt: On enregistre le nouvel élément, ici un identifiant
:align: center
```

Et les champs du site se remplissent !

```{image} img/nouvel-identifiant-3.webp
:alt: Les champs identifiant & mot de passe sont automatiquement remplis
:align: center
```


```{raw} html
<br>
<br>
<br>
```

La vidéo ci-dessous vous montre comment ajouter manuellement des identifiants dans votre gestionnaire de mot de passe (via le plugin du navigateur):  


```{raw} html
<iframe width="640" height="360" src="https://www.youtube.com/embed/VUbSHL4ytoI" title="Ajout manuel" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<br>
<br>
<br>
<br>
<br>
<br>
```

Autre exemple avec la vidéo ci-dessous pour enregistrer automatiquement ses identifiants dans son coffre lorsqu'on les saisit sur un site internet (dans cet exemple `https://ticnvault.com/login`) :  

```{raw} html
<iframe width="640" height="360" src="https://www.youtube.com/embed/iRVQChcfXwE" title="Ajout automatique" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<br>
<br>
<br>
<br>
<br>
<br>
```