- add password strength meter for creating or editing user passwords
Some checks failed
CI Pipeline / japa-tests (push) Failing after 1m0s

- add public opensearch api host
This commit is contained in:
Kaimbacher 2024-08-07 14:22:36 +02:00
parent f4854d70b9
commit 010bead723
13 changed files with 392 additions and 23 deletions

View file

@ -1,4 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue';
import { Head, useForm, router } from '@inertiajs/vue3';
import { mdiAccountKey, mdiArrowLeftBoldOutline } from '@mdi/js';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
@ -13,6 +14,16 @@ import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
// import { Inertia } from '@inertiajs/inertia';
import passwordMeter from '@/Components/SimplePasswordMeter/password-meter.vue';
const enabled = ref(false);
const handleScore = (score: number) => {
if (score == 4){
enabled.value = true;
} else {
enabled.value = false;
}
};
const props = defineProps({
roles: {
@ -80,6 +91,7 @@ const submit = async () => {
</div>
</FormControl>
</FormField>
<password-meter :password="form.password" @score="handleScore" />
<FormField label="Password Confirmation" :class="{ 'text-red-400': errors.password_confirmation }">
<FormControl
@ -114,8 +126,8 @@ const submit = async () => {
type="submit"
color="info"
label="Submit"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing == true || enabled == false"
/>
</BaseButtons>
</template>

View file

@ -1,4 +1,5 @@
<script setup lang="ts">
import { ref } from 'vue';
import { Head, useForm, router } from '@inertiajs/vue3';
import { mdiAccountKey, mdiArrowLeftBoldOutline } from '@mdi/js';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
@ -13,7 +14,9 @@ import BaseButton from '@/Components/BaseButton.vue';
import BaseButtons from '@/Components/BaseButtons.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
// import { Inertia } from '@inertiajs/inertia';
import passwordMeter from '@/Components/SimplePasswordMeter/password-meter.vue';
const enabled = ref(false);
const props = defineProps({
user: {
type: Object,
@ -46,6 +49,15 @@ const submit = async () => {
// await Inertia.post(stardust.route('user.store'), form);
await router.put(stardust.route('settings.user.update', [props.user.id]), form);
};
const handleScore = (score: number) => {
if (score == 4){
enabled.value = true;
} else {
enabled.value = false;
}
// strengthLabel.value = scoreLabel;
// score.value = scoreValue;
};
</script>
<template>
@ -88,6 +100,8 @@ const submit = async () => {
</FormControl>
</FormField>
<password-meter :password="form.password" @score="handleScore" />
<FormField label="Password Confirmation" :class="{ 'text-red-400': errors.password_confirmation }">
<FormControl
v-model="form.password_confirmation"
@ -121,7 +135,7 @@ const submit = async () => {
color="info"
label="Submit"
:class="{ 'opacity-25': form.processing }"
:disabled="form.processing"
:disabled="form.processing == true || enabled == false"
/>
</BaseButtons>
</template>