geolba/tethys.backend
geolba/tethys.backend
2
0
Fork 2
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

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

Browse source 
- 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
Download patch file Download diff file Expand all files Collapse all files

16
resources/js/Pages/Admin/User/Create.vue
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>

16
resources/js/Pages/Admin/User/Edit.vue
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>

18
resources/js/Pages/Auth/AccountInfo.vue
View file

@ -1,5 +1,6 @@
<script setup lang="ts">
// import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import { ref } from 'vue';
import { useForm } from '@inertiajs/vue3';
// import { ref } from 'vue';
// import { reactive } from 'vue';
@ -24,7 +25,7 @@ import NotificationBar from '@/Components/NotificationBar.vue';
import LayoutAuthenticated from '@/Layouts/LayoutAuthenticated.vue';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import { stardust } from '@eidellev/adonis-stardust/client';
// import { Inertia } from '@inertiajs/inertia';
import passwordMeter from '@/Components/SimplePasswordMeter/password-meter.vue';
import { computed, Ref } from 'vue';
import { usePage } from '@inertiajs/vue3';
import FormValidationErrors from '@/Components/FormValidationErrors.vue';
@ -35,6 +36,17 @@ import PersonalTotpSettings from '@/Components/PersonalTotpSettings.vue';
const emit = defineEmits(['confirm', 'update:confirmation'])
const enabled = ref(false);
const handleScore = (score: number) => {
if (score == 4){
enabled.value = true;
} else {
enabled.value = false;
}
// strengthLabel.value = scoreLabel;
// score.value = scoreValue;
};
defineProps({
// user will be returned from controller action
user: {
@ -183,6 +195,8 @@ const flash: Ref<any> = computed(() => {
</div>
</FormControl>
</FormField>
<password-meter :password="passwordForm.new_password" @score="handleScore" />
<FormField label="Confirm password" help="Required. New password one more time"
:class="{ 'text-red-400': passwordForm.errors.confirm_password }">
@ -205,7 +219,7 @@ const flash: Ref<any> = computed(() => {
<template #footer>
<BaseButtons>
<BaseButton type="submit" color="info" label="Change password" />
<BaseButton type="submit" color="info" label="Change password" :disabled="passwordForm.processing == true || enabled == false" />
</BaseButtons>
</template>
</CardBox>