SPasswordField <s-password-field>

Un champ de texte pour les mots de passe qui masque la saisie. SPasswordField est le wrapper Vue 3 typé du web component <s-password-field> de Shopify Polaris.

import { SPasswordField } from 'polaris-vue-elements'

Bonnes pratiques

• Prenez en charge les gestionnaires de mots de passe. Définissez une valeur autocomplete adaptée, comme new-password ou current-password, pour que les gestionnaires de mots de passe aident les marchands à générer et enregistrer des mots de passe robustes.
• Annoncez les règles dès le départ. Listez toutes les exigences du mot de passe avant que les marchands ne commencent à saisir, au lieu de ne les révéler qu'après une saisie invalide. Cela évite la frustration et les formulaires abandonnés.
• Guidez les marchands qui créent un mot de passe. Donnez un retour en temps réel sur la robustesse du mot de passe et expliquez ce qui le rendrait plus robuste, plutôt que d'imposer des règles sans contexte.
• Autorisez le collage. Les gestionnaires de mots de passe et outils similaires reposent sur le collage, et le bloquer pousse les marchands vers des mots de passe plus faibles qu'ils peuvent taper de mémoire.
• Considérez les vérifications côté client comme un simple retour. Validez toujours le mot de passe sur votre serveur, car les contraintes du navigateur sont faciles à contourner. La validation côté client sert à réagir rapidement, pas à assurer la sécurité.

<SPasswordField label="New password" autocomplete="new-password" details="Use at least 12 characters." />

Consultez les bonnes pratiques de Shopify pour <s-password-field> (en anglais) pour l'ensemble des recommandations.

Exemple

Length: 0

<script setup>
import { ref } from 'vue'
import { SPasswordField } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SPasswordField label="Password" placeholder="Enter your password" v-model="value" />
  <p>Length: {{ value.length }}</p>
</template>

v-model

v-model sur <SPasswordField> est lié à la propriété value et écoute l'event DOM input.

<SPasswordField v-model="value" />

équivaut à :

<SPasswordField :value="value" @input="value = $event.target.value" />

Props

Prop	Type	Description
autocomplete	"current-password" | "new-password" | "on" | "off" | "shipping current-password" | "shipping new-password" | "billing current-password" | "billing new-password"	Une indication sur le contenu attendu du champ. Lorsqu'elle vaut on (valeur par défaut), cette propriété indique que le champ doit prendre en charge le remplissage automatique, sans autre information sémantique sur le contenu attendu. Lorsqu'elle vaut off, vous indiquez que ce champ contient des informations sensibles ou des contenus jamais enregistrés, comme des codes à usage unique. Vous pouvez aussi fournir une valeur décrivant précisément les données que vous souhaitez voir saisies dans ce champ lors du remplissage automatique.
defaultValue	string	La valeur par défaut du champ.
details	any	Texte supplémentaire apportant du contexte ou des indications pour le champ. Ce texte est affiché avec le champ et son libellé afin de fournir davantage d'informations ou d'instructions à l'utilisateur. Il est également exposé aux utilisateurs de lecteurs d'écran.
disabled	boolean	Désactive le champ, empêchant toute interaction.
error	any	Signale une erreur à l'utilisateur. Le champ reçoit un traitement visuel spécifique pour signaler des problèmes à résoudre immédiatement.
id	string	Un identifiant unique pour l'élément.
label	any	Contenu à utiliser comme libellé du champ.
labelAccessibilityVisibility	"visible" | "exclusive"	Modifie la visibilité du libellé du composant. - visible : le libellé est visible par tous les utilisateurs. - exclusive : le libellé est masqué visuellement mais reste dans l'arbre d'accessibilité.
maxLength	number	Indique le nombre maximal de caractères autorisés.
minLength	number	Indique le nombre minimal de caractères autorisés.
name	string	Un identifiant du champ, unique au sein du formulaire parent le plus proche.
placeholder	string	Une courte indication décrivant la valeur attendue du champ.
readOnly	boolean	Le champ ne peut pas être modifié par l'utilisateur. Il reste focalisable et est annoncé par les lecteurs d'écran.
required	boolean	Indique si le champ exige une valeur. Cette exigence ajoute une valeur sémantique au champ, mais n'affiche pas automatiquement d'erreur. Pour afficher une erreur lorsque ce champ est vide, utilisez la propriété error.
value	string	La valeur actuelle du champ. Si elle est omise, le champ sera vide.

Events

Event	Type
blur	FocusEvent
change	Event
focus	FocusEvent
input	Event

Écoutez-les avec des listeners de la forme @blur sur <SPasswordField>.

Slots

Slot	Description
details
error