mirror of
https://github.com/YunoHost/yunohost-portal.git
synced 2024-09-03 20:06:23 +02:00
add Password page
This commit is contained in:
parent
50e3d29c65
commit
9cc3bad2d5
3 changed files with 65 additions and 5 deletions
|
@ -2,11 +2,16 @@
|
||||||
import { useField } from 'vee-validate'
|
import { useField } from 'vee-validate'
|
||||||
import { formGroupExtras } from '@/composables/form'
|
import { formGroupExtras } from '@/composables/form'
|
||||||
|
|
||||||
const props = defineProps<{
|
const props = withDefaults(
|
||||||
|
defineProps<{
|
||||||
name: string
|
name: string
|
||||||
type: HTMLInputElement['type']
|
type: HTMLInputElement['type']
|
||||||
placeholder?: string
|
placeholder?: string
|
||||||
}>()
|
}>(),
|
||||||
|
{
|
||||||
|
placeholder: '',
|
||||||
|
},
|
||||||
|
)
|
||||||
const attrs = useAttrs()
|
const attrs = useAttrs()
|
||||||
const { describedBy, invalid } = inject(formGroupExtras, {
|
const { describedBy, invalid } = inject(formGroupExtras, {
|
||||||
describedBy: ref(undefined),
|
describedBy: ref(undefined),
|
||||||
|
|
|
@ -17,6 +17,7 @@
|
||||||
"edit": "Edit",
|
"edit": "Edit",
|
||||||
"current_password": "Current password",
|
"current_password": "Current password",
|
||||||
"new_password": "New password",
|
"new_password": "New password",
|
||||||
|
"confirm_new_password": "Confirm new password",
|
||||||
"confirm": "Confirm",
|
"confirm": "Confirm",
|
||||||
"login": "Log in",
|
"login": "Log in",
|
||||||
"logout": "Log out",
|
"logout": "Log out",
|
||||||
|
|
54
pages/password.vue
Normal file
54
pages/password.vue
Normal file
|
@ -0,0 +1,54 @@
|
||||||
|
<script setup lang="ts">
|
||||||
|
import * as yup from 'yup'
|
||||||
|
|
||||||
|
const schema = {
|
||||||
|
currentPassword: yup.string(),
|
||||||
|
newPassword: yup.string().required().min(8),
|
||||||
|
confirmNewPassword: yup
|
||||||
|
.string()
|
||||||
|
.oneOf([yup.ref('newPassword')])
|
||||||
|
.required(),
|
||||||
|
}
|
||||||
|
|
||||||
|
function onSubmit(form) {
|
||||||
|
console.log('SUBMIT user password edit', form)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<BaseForm :schema="schema" @submit="onSubmit">
|
||||||
|
<!-- FIXME replace with accessible component -->
|
||||||
|
<div role="alert" class="alert alert-warning mb-10">
|
||||||
|
<Icon name="mdi:warning-outline" size="2em" />
|
||||||
|
{{ $t('good_practices_about_user_password') }}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="md:flex">
|
||||||
|
<div class="basis-1/2 mb-10 md:mr-10">
|
||||||
|
<FormField name="currentPassword" :label="$t('current_password')">
|
||||||
|
<TextInput name="username" type="text" class="w-full" />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="basis-1/2 md:ml-10">
|
||||||
|
<FormField name="newPassword" :label="$t('new_password')" class="mb-3">
|
||||||
|
<TextInput name="newPassword" type="text" class="w-full" />
|
||||||
|
</FormField>
|
||||||
|
|
||||||
|
<FormField
|
||||||
|
name="confirmNewPassword"
|
||||||
|
:label="$t('confirm_new_password')"
|
||||||
|
>
|
||||||
|
<TextInput name="confirmNewPassword" type="text" class="w-full" />
|
||||||
|
</FormField>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex mt-10">
|
||||||
|
<NuxtLink to="/" class="btn ml-auto mr-2">
|
||||||
|
{{ $t('cancel') }}
|
||||||
|
</NuxtLink>
|
||||||
|
<YButton :text="$t('ok')" type="submit" variant="success" />
|
||||||
|
</div>
|
||||||
|
</BaseForm>
|
||||||
|
</template>
|
Loading…
Add table
Reference in a new issue