YunoHost/yunohost-portal
1
0
Fork 0
mirror of https://github.com/YunoHost/yunohost-portal.git synced 2024-09-03 20:06:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

update Edit + Password without BaseForm

Browse source
This commit is contained in:
axolotle 2023-07-27 17:54:29 +02:00
parent 077fb2827a
commit c5bb881d30
2 changed files with 64 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
pages/edit.vue
View file

@ -1,15 +1,20 @@
<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/yup'
import * as yup from 'yup'
const me = await useUserInfo()
const schema = {
const { handleSubmit } = useForm({
validationSchema: toTypedSchema(
yup.object({
username: yup.string(),
fullname: yup.string().required().min(1),
mailAliases: yup.array().of(yup.string().email()),
mailForward: yup.array().of(yup.string().email()),
}
const initialValues = {
}),
),
initialValues: {
username: me.value.username,
fullname: me.value.fullname,
mailAliases: me.value['mail-aliases'].length
@ -18,16 +23,17 @@ const initialValues = {
mailForward: me.value['mail-forward'].length
? me.value['mail-forward']
: [''],
}
},
})
function onSubmit(form) {
const onSubmit = handleSubmit((form) => {
console.log('SUBMIT user edit', form)
}
})
</script>
<template>
<!-- {{ initialValues }} -->
<BaseForm :schema="schema" :initial-values="initialValues" @submit="onSubmit">
<form novalidate @submit="onSubmit">
<div class="flex justify-between">
<div class="w-1/3">
<FormField name="username" :label="$t('username')" class="mb-3">
@ -45,6 +51,8 @@ function onSubmit(form) {
name="fullname"
type="text"
:placeholder="$t('fullname')"
autocomplete="name"
class="w-full"
/>
</FormField>
</div>
@ -81,5 +89,5 @@ function onSubmit(form) {
</NuxtLink>
<YButton :text="$t('ok')" type="submit" variant="success" />
</div>
</BaseForm>
</form>
</template>

39
pages/password.vue
View file

@ -1,22 +1,28 @@
<script setup lang="ts">
import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/yup'
import * as yup from 'yup'
const schema = {
const { handleSubmit } = useForm({
validationSchema: toTypedSchema(
yup.object({
currentPassword: yup.string(),
newPassword: yup.string().required().min(8),
confirmNewPassword: yup
.string()
.oneOf([yup.ref('newPassword')])
.required(),
}
}),
),
})
function onSubmit(form) {
const onSubmit = handleSubmit((form) => {
console.log('SUBMIT user password edit', form)
}
})
</script>
<template>
<BaseForm :schema="schema" @submit="onSubmit">
<form novalidate @submit="onSubmit">
<!-- FIXME replace with accessible component -->
<div role="alert" class="alert alert-warning mb-10">
<Icon name="mdi:warning-outline" size="2em" />
@ -26,20 +32,35 @@ function onSubmit(form) {
<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" />
<TextInput
name="currentPassword"
type="text"
autocomplete="currrent-password"
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" />
<TextInput
name="newPassword"
type="text"
autocomplete="new-password"
class="w-full"
/>
</FormField>
<FormField
name="confirmNewPassword"
:label="$t('confirm_new_password')"
>
<TextInput name="confirmNewPassword" type="text" class="w-full" />
<TextInput
name="confirmNewPassword"
type="text"
autocomplete="new-password"
class="w-full"
/>
</FormField>
</div>
</div>
@ -50,5 +71,5 @@ function onSubmit(form) {
</NuxtLink>
<YButton :text="$t('ok')" type="submit" variant="success" />
</div>
</BaseForm>
</form>
</template>