@nextcloud/vueNcPasswordField
Props
| Prop name | Description | Type | Values | Default |
|---|---|---|---|---|
| helperText | Additional error message This will be displayed beneath the input field | string | - | '' |
| checkPasswordStrength | Check if the user entered a valid password using the password_policy app if available. Warning: this doesn't replace server side checking and will do nothing if the password_policy app is disabled. | boolean | - | false |
| minlength | The minlength property defines the minimum number of characters (as UTF-16 code units) the user can enter | number | - | 0 |
| maxlength | The maxlength property defines the maximum number of characters (as UTF-16 code units) the user can enter | number | - | null |
Events
| Event name | Properties | Description |
|---|---|---|
| valid | Triggers when the internal password_policy detect that the password entered is valid. | |
| invalid | Triggers when the internal password_policy detect that the password entered is invalid. | |
| update:value | The string - new value | Triggers when the value inside the password field is updated. |
Slots
| Name | Description | Bindings |
|---|---|---|
| default |
Description
See NcInputField for a list of all available props.
General purpose password field component.
<template>
<div class="wrapper">
<NcPasswordField :value.sync="text1"
label="Old password" />
<div class="external-label">
<label for="textField">New password</label>
<NcPasswordField :value.sync="text2"
id="textField"
:label-outside="true" />
</div>
<div class="external-label">
<label for="textField2">New password</label>
<NcPasswordField :value.sync="text3"
:error="true"
id="textField2"
:label-outside="true"
helper-text="Password is insecure" />
</div>
<NcPasswordField :value.sync="text4"
label="Good new password"
:label-visible="true"
:success="true"
helper-text="Password is secure" />
<NcPasswordField :value.sync="text5"
:disabled="true"
label="Disabled" />
</div>
</template>
<script>
export default {
data() {
return {
text1: '',
text2: '',
text3: 'hunter',
text4: '',
text5: '',
}
},
}
</script>
<style lang="scss" scoped>
.wrapper {
display: flex;
gap: 4px;
align-items: flex-end;
flex-wrap: wrap;
}
.external-label {
display: flex;
width: 100%;
margin-top: 1rem;
}
.external-label label {
padding-top: 7px;
padding-right: 14px;
white-space: nowrap;
}
</style>