@nextcloud/vue
Version:
Nextcloud vue components
1 lines • 9.65 kB
Source Map (JSON)
{"version":3,"file":"NcPasswordField.mjs","sources":["../../src/components/NcPasswordField/NcPasswordField.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2022 Marco Ambrosini <marcoambrosini@pm.me>\n -\n - @author Marco Ambrosini <marcoambrosini@pm.me>\n - @author Carl Schwan <carl@carlschwan.eu>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose password field component.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcPasswordField :value.sync=\"text1\"\n\t\t\tlabel=\"Old password\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">New password</label>\n\t\t\t<NcPasswordField id=\"textField\"\n\t\t\t\t:value.sync=\"text2\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\" />\n\t\t</div>\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField2\">New password</label>\n\t\t\t<NcPasswordField id=\"textField2\"\n\t\t\t\t:value.sync=\"text3\"\n\t\t\t\t:error=\"true\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\t\thelper-text=\"Password is insecure\" />\n\t\t</div>\n\n\t\t<NcPasswordField :value.sync=\"text4\"\n\t\t\tlabel=\"Good new password\"\n\t\t\t:success=\"true\"\n\t\t\tplaceholder=\"Min. 12 characters\"\n\t\t\thelper-text=\"Password is secure\" />\n\n\t\t<NcPasswordField :value.sync=\"text5\"\n\t\t\t:disabled=\"true\"\n\t\t\tlabel=\"Disabled\" />\n\t</div>\n</template>\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: 'hunter',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\tpadding-right: 14px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField v-bind=\"{...$attrs, ...$props }\"\n\t\tref=\"inputField\"\n\t\t:type=\"isPasswordHidden ? 'password' : 'text'\"\n\t\t:show-trailing-button=\"showTrailingButton && true\"\n\t\t:trailing-button-label=\"trailingButtonLabelPassword\"\n\t\t:helper-text=\"computedHelperText\"\n\t\t:error=\"computedError\"\n\t\t:success=\"computedSuccess\"\n\t\t:minlength=\"rules.minlength\"\n\t\tv-on=\"$listeners\"\n\t\t@trailing-button-click=\"togglePasswordVisibility\"\n\t\t@input=\"handleInput\">\n\t\t<!-- Default slot for the leading icon -->\n\t\t<slot />\n\t\t<template #trailing-button-icon>\n\t\t\t<Eye v-if=\"isPasswordHidden\" :size=\"18\" />\n\t\t\t<EyeOff v-else :size=\"18\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script>\n\nimport Eye from 'vue-material-design-icons/Eye.vue'\nimport EyeOff from 'vue-material-design-icons/EyeOff.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport debounce from 'debounce'\nimport axios from '@nextcloud/axios'\nimport { loadState } from '@nextcloud/initial-state'\nimport { generateOcsUrl } from '@nextcloud/router'\nimport { t } from '../../l10n.js'\nimport logger from '../../utils/logger.js'\n\nexport default {\n\tname: 'NcPasswordField',\n\n\tcomponents: {\n\t\tNcInputField,\n\t\tEye,\n\t\tEyeOff,\n\t},\n\n\t// Allow forwarding all attributes\n\tinheritAttrs: false,\n\n\tprops: {\n\t\t...NcInputField.props,\n\n\t\t/**\n\t\t * Additional error message\n\t\t *\n\t\t * This will be displayed beneath the input field\n\t\t */\n\t\thelperText: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\n\t\t/**\n\t\t * Check if the user entered a valid password using the password_policy\n\t\t * app if available.\n\t\t *\n\t\t * Warning: this doesn't replace server side checking and will do nothing\n\t\t * if the password_policy app is disabled.\n\t\t */\n\t\tcheckPasswordStrength: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\n\t\t/**\n\t\t * The minlength property defines the minimum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tminlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: 0,\n\t\t},\n\n\t\t/**\n\t\t * The maxlength property defines the maximum number of characters\n\t\t * (as UTF-16 code units) the user can enter\n\t\t */\n\t\tmaxlength: {\n\t\t\ttype: Number,\n\t\t\tdefault: null,\n\t\t},\n\n\t\t/**\n\t\t * Controls whether to display the trailing button.\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t},\n\n\temits: [\n\t\t'valid',\n\t\t'invalid',\n\t\t'update:value',\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tisPasswordHidden: true,\n\t\t\tinternalHelpMessage: '',\n\t\t\tpasswordPolicy: loadState('core', 'capabilities', {}).password_policy || null,\n\t\t\tisValid: null,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\tcomputedError() {\n\t\t\treturn this.error || this.isValid === false\n\t\t},\n\t\tcomputedSuccess() {\n\t\t\treturn this.success || this.isValid === true\n\t\t},\n\t\tcomputedHelperText() {\n\t\t\tif (this.helperText.length > 0) {\n\t\t\t\treturn this.helperText\n\t\t\t}\n\t\t\treturn this.internalHelpMessage\n\t\t},\n\n\t\trules() {\n\t\t\tconst { minlength, passwordPolicy } = this\n\t\t\treturn {\n\t\t\t\tminlength: minlength ?? passwordPolicy?.minLength,\n\t\t\t}\n\t\t},\n\n\t\ttrailingButtonLabelPassword() {\n\t\t\treturn this.isPasswordHidden ? t('Show password') : t('Hide password')\n\t\t},\n\t},\n\n\twatch: {\n\t\tvalue(newValue) {\n\t\t\tif (this.checkPasswordStrength) {\n\t\t\t\tif (this.passwordPolicy === null) {\n\t\t\t\t\treturn\n\t\t\t\t}\n\t\t\t\tif (this.passwordPolicy) {\n\t\t\t\t\tthis.checkPassword(newValue)\n\t\t\t\t}\n\t\t\t}\n\t\t},\n\t},\n\n\tmethods: {\n\t\t/**\n\t\t * Focus the input element\n\t\t *\n\t\t * @public\n\t\t */\n\t\tfocus() {\n\t\t\tthis.$refs.inputField.focus()\n\t\t},\n\n\t\t/**\n\t\t * Select all the text in the input\n\t\t *\n\t\t * @public\n\t\t */\n\t\tselect() {\n\t\t\tthis.$refs.inputField.select()\n\t\t},\n\n\t\thandleInput(event) {\n\t\t\t/**\n\t\t\t * Triggers when the value inside the password field is\n\t\t\t * updated.\n\t\t\t *\n\t\t\t * @property {string} The new value\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target.value)\n\t\t},\n\t\ttogglePasswordVisibility() {\n\t\t\tthis.isPasswordHidden = !this.isPasswordHidden\n\t\t},\n\t\tcheckPassword: debounce(async function(password) {\n\t\t\ttry {\n\t\t\t\tconst { data } = await axios.post(generateOcsUrl('apps/password_policy/api/v1/validate'), { password })\n\t\t\t\tthis.isValid = data.ocs.data.passed\n\t\t\t\tif (data.ocs.data.passed) {\n\t\t\t\t\tthis.internalHelpMessage = t('Password is secure')\n\t\t\t\t\t/**\n\t\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t\t * password entered is valid.\n\t\t\t\t\t */\n\t\t\t\t\tthis.$emit('valid')\n\t\t\t\t\treturn\n\t\t\t\t}\n\n\t\t\t\tthis.internalHelpMessage = data.ocs.data.reason\n\t\t\t\t/**\n\t\t\t\t * Triggers when the internal password_policy detect that the\n\t\t\t\t * password entered is invalid.\n\t\t\t\t */\n\t\t\t\tthis.$emit('invalid')\n\t\t\t} catch (e) {\n\t\t\t\tlogger.error('Password policy returned an error', e)\n\t\t\t}\n\t\t}, 500),\n\t},\n}\n</script>\n"],"names":["_sfc_main","NcInputField","Eye","EyeOff","loadState","minlength","passwordPolicy","t","newValue","event","debounce","password","data","axios","generateOcsUrl","logger"],"mappings":";;;;;;;;;;AAmIA,MAAAA,IAAA,EACA,MAAA,mBAEA,YAAA,EACA,cAAAC,GACA,KAAAC,GACA,QAAAC,EACA,GAGA,cAAA,IAEA,OAAA,EACA,GAAAF,EAAA,OAOA,YAAA,EACA,MAAA,QACA,SAAA,GACA,GASA,uBAAA,EACA,MAAA,SACA,SAAA,GACA,GAMA,WAAA,EACA,MAAA,QACA,SAAA,EACA,GAMA,WAAA,EACA,MAAA,QACA,SAAA,KACA,GAKA,oBAAA,EACA,MAAA,SACA,SAAA,GACA,EACA,GAEA,OAAA,CACA,SACA,WACA,cACA,GAEA,OAAA;AACA,SAAA,EACA,kBAAA,IACA,qBAAA,IACA,gBAAAG,EAAA,QAAA,gBAAA,CAAA,CAAA,EAAA,mBAAA,MACA,SAAA,KACA;AACA,GAEA,UAAA,EACA,gBAAA;AACA,SAAA,KAAA,SAAA,KAAA,YAAA;AACA,GACA,kBAAA;AACA,SAAA,KAAA,WAAA,KAAA,YAAA;AACA,GACA,qBAAA;AACA,SAAA,KAAA,WAAA,SAAA,IACA,KAAA,aAEA,KAAA;AACA,GAEA,QAAA;AACA,QAAA,EAAA,WAAAC,GAAA,gBAAAC,EAAA,IAAA;AACA,SAAA,EACA,WAAAD,gBAAAC,uBAAA,UACA;AACA,GAEA,8BAAA;AACA,SAAA,KAAA,mBAAAC,EAAA,eAAA,IAAAA,EAAA,eAAA;AACA,EACA,GAEA,OAAA,EACA,MAAAC,GAAA;AACA,MAAA,KAAA,uBAAA;AACA,QAAA,KAAA,mBAAA;AACA;AAEA,SAAA,kBACA,KAAA,cAAAA,CAAA;AAAA,EAAA;AAGA,EACA,GAEA,SAAA,EAMA,QAAA;AACA,OAAA,MAAA,WAAA,MAAA;AACA,GAOA,SAAA;AACA,OAAA,MAAA,WAAA,OAAA;AACA,GAEA,YAAAC,GAAA;AAOA,OAAA,MAAA,gBAAAA,EAAA,OAAA,KAAA;AACA,GACA,2BAAA;AACA,OAAA,mBAAA,CAAA,KAAA;AACA,GACA,eAAAC,EAAA,eAAAC,GAAA;AACA,MAAA;AACA,UAAA,EAAA,MAAAC,MAAA,MAAAC,EAAA,KAAAC,EAAA,sCAAA,GAAA,EAAA,UAAAH,GAAA;AAEA,QADA,KAAA,UAAAC,EAAA,IAAA,KAAA,QACAA,EAAA,IAAA,KAAA,QAAA;AACA,WAAA,sBAAAL,EAAA,oBAAA,GAKA,KAAA,MAAA,OAAA;AACA;AAAA,IAAA;AAGA,SAAA,sBAAAK,EAAA,IAAA,KAAA,QAKA,KAAA,MAAA,SAAA;AAAA,EACA,SAAA,GAAA;AACAG,MAAA,MAAA,qCAAA,CAAA;AAAA,EACA;AACA,GAAA,GAAA,EACA,EACA;;;;;;;;"}