forms complete
This commit is contained in:
@@ -1,11 +1,69 @@
|
||||
<script setup lang="ts">
|
||||
import * as z from 'zod'
|
||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
||||
|
||||
definePageMeta({
|
||||
layout: "settings",
|
||||
middleware: ["login-required"]
|
||||
})
|
||||
|
||||
const { data: user_data, refresh: userRefresh } = useFetch("/me");
|
||||
const loading_btn = ref(false)
|
||||
|
||||
const schema = z.object({
|
||||
first_name: z.string(),
|
||||
last_name: z.string(),
|
||||
email: z.email()
|
||||
})
|
||||
|
||||
type Schema = z.output<typeof schema>
|
||||
|
||||
async function submitChanges(event: FormSubmitEvent<Schema>) {
|
||||
loading_btn.value = true
|
||||
await $fetch("/settings/edit_user", {
|
||||
method: "POST",
|
||||
body: {
|
||||
first_name: user_data.value.first_name,
|
||||
last_name: user_data.value.last_name,
|
||||
email: user_data.value.email
|
||||
}
|
||||
})
|
||||
loading_btn.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UContainer class="max-w-4xl">
|
||||
<UForm :schema="schema" :state="user_data" @submit="submitChanges">
|
||||
<div class="gap-3 justify-between">
|
||||
<div class="flex-1 w-full gap-2 mt-5 mb-5">
|
||||
<UFormField label="First Name" orientation="horizontal" name="first_name">
|
||||
<UInput v-if="user_data" v-model="user_data.first_name"/>
|
||||
<USkeleton v-else class="w-53 h-7" />
|
||||
</UFormField>
|
||||
</div>
|
||||
<div class="flex-1 w-full gap-2 mt-5 mb-5">
|
||||
<UFormField label="Last Name" orientation="horizontal">
|
||||
<UInput v-if="user_data" v-model="user_data.last_name" required/>
|
||||
<USkeleton v-else class="w-53 h-7" />
|
||||
|
||||
</UFormField>
|
||||
</div>
|
||||
<div class="flex-1 w-full gap-2 mt-5 mb-5">
|
||||
<UFormField label="E-mail" orientation="horizontal" name="email">
|
||||
<UInput v-if="user_data" v-model="user_data.email" required/>
|
||||
<USkeleton v-else class="w-53 h-7" />
|
||||
</UFormField>
|
||||
</div>
|
||||
<div class="text-center justify-items-center">
|
||||
<UButton variant="soft" icon="lucide:circle-check-big" :loading="loading_btn" type="submit" size="lg" :block="true" class="max-w-4/5 mt-4 mb-4 rounded-full">Submit</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UForm>
|
||||
</UContainer>
|
||||
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@@ -1,11 +1,109 @@
|
||||
<script setup lang="ts">
|
||||
import * as z from 'zod'
|
||||
import type { FormSubmitEvent } from '@nuxt/ui'
|
||||
|
||||
definePageMeta({
|
||||
layout: "settings",
|
||||
middleware: ["login-required"]
|
||||
})
|
||||
const loading_btn = ref(false)
|
||||
|
||||
|
||||
const schema = z.object({
|
||||
old_pw: z.string(),
|
||||
new_pw: z.string().min(8, "Min 8 chars"),
|
||||
confirm_new_pw: z.string().min(8, "Min 8 chars"),
|
||||
})
|
||||
type Schema = z.output<typeof schema>
|
||||
|
||||
const pw_fields = ref({
|
||||
old_pw: "",
|
||||
new_pw: "",
|
||||
confirm_new_pw: ""
|
||||
})
|
||||
|
||||
const show_pw = reactive({
|
||||
old_pw: false,
|
||||
new_pw: false,
|
||||
confirm_new_pw: false
|
||||
})
|
||||
|
||||
async function submitChanges(event: FormSubmitEvent<Schema>) {
|
||||
loading_btn.value = true
|
||||
await $fetch("/settings/changepw", {
|
||||
method: "POST",
|
||||
body: pw_fields.value
|
||||
})
|
||||
loading_btn.value = false
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UContainer class="max-w-4xl">
|
||||
<h1 class="text-lg ml-1 font-bold geist mb-1">Change password</h1>
|
||||
<USeparator />
|
||||
<div class="gap-3 justify-between">
|
||||
<UForm :schema="schema" :state="pw_fields" @submit="submitChanges">
|
||||
<div class="flex-1 w-full gap-2 mt-5 mb-5">
|
||||
<UFormField label="Current password" orientation="horizontal" name="old_pw">
|
||||
<UInput :type="show_pw.old_pw ? 'text' : 'password'" v-model="pw_fields.old_pw" required>
|
||||
<template #trailing>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="link"
|
||||
size="sm"
|
||||
:icon="show_pw.old_pw ? 'i-lucide-eye-off' : 'i-lucide-eye'"
|
||||
:aria-label="show_pw.old_pw ? 'Hide password' : 'Show password'"
|
||||
:aria-pressed="show_pw.old_pw"
|
||||
aria-controls="password"
|
||||
@click="show_pw.old_pw = !show_pw.old_pw"
|
||||
/>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
</div>
|
||||
<div class="flex-1 w-full gap-2 mt-5 mb-5">
|
||||
<UFormField label="New password" orientation="horizontal" name="new_pw">
|
||||
<UInput :type="show_pw.new_pw ? 'text' : 'password'" v-model="pw_fields.new_pw" required>
|
||||
<template #trailing>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="link"
|
||||
size="sm"
|
||||
:icon="show_pw.new_pw ? 'i-lucide-eye-off' : 'i-lucide-eye'"
|
||||
:aria-label="show_pw.new_pw ? 'Hide password' : 'Show password'"
|
||||
:aria-pressed="show_pw.new_pw"
|
||||
aria-controls="password"
|
||||
@click="show_pw.new_pw = !show_pw.new_pw"
|
||||
/>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
</div>
|
||||
<div class="flex-1 w-full gap-2 mt-5 mb-5">
|
||||
<UFormField label="Confirm new password" orientation="horizontal" name="confirm_new_pw">
|
||||
<UInput :type="show_pw.confirm_new_pw ? 'text' : 'password'" v-model="pw_fields.confirm_new_pw" required>
|
||||
<template #trailing>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="link"
|
||||
size="sm"
|
||||
:icon="show_pw.confirm_new_pw ? 'i-lucide-eye-off' : 'i-lucide-eye'"
|
||||
:aria-label="show_pw.confirm_new_pw ? 'Hide password' : 'Show password'"
|
||||
:aria-pressed="show_pw.confirm_new_pw"
|
||||
aria-controls="password"
|
||||
@click="show_pw.confirm_new_pw = !show_pw.confirm_new_pw"
|
||||
/>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
</div>
|
||||
<div class="text-center justify-items-center">
|
||||
<UButton variant="soft" icon="lucide:circle-check-big" :loading="loading_btn" type="submit" size="lg" :block="true" class="max-w-4/5 mt-4 mb-4 rounded-full">Submit</UButton>
|
||||
</div>
|
||||
</UForm>
|
||||
</div>
|
||||
</UContainer>
|
||||
|
||||
</template>
|
||||
Reference in New Issue
Block a user