80 lines
No EOL
2.9 KiB
Vue
80 lines
No EOL
2.9 KiB
Vue
<script setup lang="ts">
|
|
|
|
import Message from "primevue/message";
|
|
import Password from "primevue/password";
|
|
import {Form, type FormResolverOptions, type FormSubmitEvent} from "@primevue/forms";
|
|
import Button from "primevue/button";
|
|
import Divider from "primevue/divider";
|
|
|
|
const formResolver = (ev: FormResolverOptions): Record<string, any> => {
|
|
const resp = {
|
|
errors: {
|
|
CurrentPassword: [],
|
|
Password: [],
|
|
RepeatPassword: []
|
|
}
|
|
};
|
|
|
|
const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@#$%^&*!])[A-Za-z\d@#$%^&*!]{8,}$/;
|
|
if ("CurrentPassword" in ev.values && ev.values["CurrentPassword"] === undefined || !ev.values["CurrentPassword"].match(regex)) {
|
|
resp.errors["Password"] = ["Current password doesn't meet requirements."];
|
|
}
|
|
|
|
if ("Password" in ev.values && ev.values["Password"] === undefined || !ev.values["Password"].match(regex)) {
|
|
resp.errors["Password"] = ["New password doesn't meet requirements."];
|
|
}
|
|
|
|
if ("RepeatPassword" in ev.values && ev.values["RepeatPassword"] === undefined || ev.values["RepeatPassword"] != ev.values["Password"]) {
|
|
resp.errors["RepeatPassword"] = ["Invalid repeat password."];
|
|
}
|
|
|
|
return resp;
|
|
};
|
|
|
|
const onFormSubmit = (event: FormSubmitEvent) => {
|
|
if (!event.valid) {
|
|
|
|
} else {
|
|
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<Form v-slot="$form" :resolver="formResolver" :validateOnValueUpdate="true" :validateOnBlur="true" @submit="onFormSubmit" class="flex flex-col space-y-2">
|
|
<div class="flex flex-col gap-1">
|
|
<Password name="CurrentPassword" type="text" placeholder="Current Password" toggleMask required />
|
|
<Message v-if="$form.CurrentPassword?.invalid" severity="error" size="small" variant="simple">{{ $form.CurrentPassword.error }}</Message>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<Password name="Password" type="text" placeholder="Password" toggleMask required>
|
|
<template #header>
|
|
<h6>Pick a password</h6>
|
|
</template>
|
|
<template #footer>
|
|
<Divider />
|
|
<p class="mt-2">Requirements</p>
|
|
<ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
|
|
<li>At least one lowercase</li>
|
|
<li>At least one uppercase</li>
|
|
<li>At least one numeric</li>
|
|
<li>At least one of @#$%^&*!</li>
|
|
<li>Minimum 8 characters</li>
|
|
</ul>
|
|
</template>
|
|
</Password>
|
|
<Message v-if="$form.Password?.invalid" severity="error" size="small" variant="simple">{{ $form.Password.error }}</Message>
|
|
</div>
|
|
<div class="flex flex-col gap-1">
|
|
<Password name="RepeatPassword" type="text" placeholder="Repeat Password" toggleMask required />
|
|
<Message v-if="$form.RepeatPassword?.invalid" severity="error" size="small" variant="simple">{{ $form.RepeatPassword.error }}</Message>
|
|
</div>
|
|
<Button type="submit" severity="secondary" label="Change password" />
|
|
</Form>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |