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

hotfix(admin/user): implement password reset and update user password

Browse source 
- Implemented password reset functionality for admin users.
- Updated the user edit and create forms to use a password meter component for password strength validation.
- Modified the `AdminuserController` to handle the new password field and update user passwords.
- Updated the `createUserValidator` and `updateUserValidator` to validate the new password field.
- Updated the password field to `new_password` in the `Edit.vue` and `Create.vue` components.
- Added `showRequiredMessage` prop to `SimplePasswordMeter` component.
- Added conditional rendering for password strength bar in `SimplePasswordMeter` component.
- Added `fieldLabel` prop to `SimplePasswordMeter` component.
- Updated form submission to handle errors and reset password field.
This commit is contained in:
Kaimbacher 2025-03-19 15:52:37 +01:00
parent 9f5d35f7ba
commit 70f016422c
5 changed files with 77 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

35
resources/js/Components/SimplePasswordMeter/password-meter.vue
View file

@ -6,10 +6,29 @@ import FormField from '@/Components/FormField.vue';
import FormControl from '@/Components/FormControl.vue';
// Define props
const props = defineProps<{
modelValue: string;
errors: Partial<Record<"new_password" | "old_password" | "confirm_password", string>>;
}>();
// const props = defineProps<{
// modelValue: string,
// errors: Partial<Record<"new_password" | "old_password" | "confirm_password", string>>,
// showRequiredMessage: boolean,
// }>();
const props = defineProps({
modelValue: {
type: String,
},
errors: {
type: Object,
default: () => ({} as Partial<Record<"new_password" | "old_password" | "confirm_password", string>>),
},
showRequiredMessage: {
type: Boolean,
default:true,
},
fieldLabel: {
type: String,
default: 'New password',
}
});
const emit = defineEmits(['update:modelValue', 'score']);
@ -61,8 +80,8 @@ const passwordMetrics = computed<PasswordMetrics>(() => {
<template>
<!-- Password input Form -->
<FormField label="New password" help="Required. New password" :class="{'text-red-400': errors.new_password }">
<FormControl v-model="localPassword" :icon="mdiFormTextboxPassword" name="new_password" type="password" required
<FormField :label="fieldLabel" :help="showRequiredMessage ? 'Required. New password' : ''" :class="{'text-red-400': errors.new_password }">
<FormControl v-model="localPassword" :icon="mdiFormTextboxPassword" name="new_password" type="password" :required="showRequiredMessage"
:error="errors.new_password">
<!-- Secure Icon -->
<template #right>
@ -84,10 +103,10 @@ const passwordMetrics = computed<PasswordMetrics>(() => {
<div class="text-gray-700 text-sm">
{{ passwordMetrics.score }} / 6 points max
</div>
</FormField>
</FormField>
<!-- Password Strength Bar -->
<div class="po-password-strength-bar w-full h-2 rounded transition-all duration-200 mb-4"
<div v-if="passwordMetrics.score > 0"class="po-password-strength-bar w-full h-2 rounded transition-all duration-200 mb-4"
:class="passwordMetrics.scoreLabel" :style="{ width: `${(passwordMetrics.score / 6) * 100}%` }"
role="progressbar" :aria-valuenow="passwordMetrics.score" aria-valuemin="0" aria-valuemax="6"
:aria-label="`Password strength: ${passwordMetrics.scoreLabel || 'unknown'}`">