Differential D3319 Diff 9487 src/resources/vue/Widgets/PasswordInput.vue

Changeset View

Standalone View

src/resources/vue/Widgets/PasswordInput.vue

This file was added.

				<template>
				<div class="password-input">
				<div :id="prefix + 'password_input'">
				<input type="password"
				class="form-control"
				autocomplete="new-password"
				:id="prefix + 'password'"
				:placeholder="$t('form.password')"
				v-model="password"
				@input="onInput"
				>
				<input type="password"
				class="form-control mt-2"
				autocomplete="new-password"
				:id="prefix + 'password_confirmation'"
				:placeholder="$t('form.password-confirm')"
				v-model="password_confirmation"
				@input="onInputConfirm"
				>
				</div>
				<ul v-if="policy.length" :id="prefix + 'password_policy'" class="list-group pt-2">
				<li v-for="rule in policy" :key="rule.label" class="list-group-item border-0 p-0">
				<svg-icon v-if="rule.status" icon="check" class="text-success"></svg-icon>
				<span v-else class="text-secondary">&bullet;</span>
				<small class="ps-1 form-text">{{ rule.name }}</small>
				</li>
				</ul>
				</div>
				</template>

				<script>
				export default {
				props: {
				focus: { type: Boolean, default: false },
				value: { type: Object, default: () => {} },
				user: { type: [String, Number], default: '' }
				},
				data() {
				return {
				password: '',
				password_confirmation: '',
				policy: [],
				prefix: ''
				}
				},
				mounted() {
				this.checkPolicy('')

				const input = $('#password')[0]

				this.prefix = $(input.form).data('validation-prefix') \|\| ''

				$(input.form).on('reset', () => { this.checkPolicy('') })

				if (this.focus) {
				input.focus()
				}
				},
				methods: {
				checkPolicy(password) {
				if (this.cancelToken) {
				this.cancelToken.cancel()
				}

				const post = { password, user: this.user }

				if (!post.user && this.$store.state.authInfo) {
				post.user = this.$store.state.authInfo.id
				}

				const cancelToken = axios.CancelToken;
				this.cancelToken = cancelToken.source();

				axios.post('/api/auth/password-policy/check', post, { cancelToken: this.cancelToken.token })
				.then(response => {
				if (response.data.list) {
				this.policy = response.data.list
				}
				})
				},
				onInput(event) {
				this.checkPolicy(event.target.value)
				this.update()
				},
				onInputConfirm(event) {
				this.update()
				},
				update() {
				const update = { password: this.password, password_confirmation: this.password_confirmation }
				this.$emit('input', {...this.value, ...update})
				}
				}
				}
				</script>