148 lines
5.7 KiB
Vue
148 lines
5.7 KiB
Vue
<script setup lang="ts">
|
|
import * as z from 'zod'
|
|
import type { FormSubmitEvent } from '@nuxt/ui'
|
|
import urlJoin from 'url-join'
|
|
|
|
useHead({
|
|
title: "Security"
|
|
})
|
|
|
|
definePageMeta({
|
|
layout: "settings",
|
|
})
|
|
const loading_btn = ref(false)
|
|
const toast = useToast()
|
|
const config = useRuntimeConfig()
|
|
//const base_url = config.app.baseURL.endsWith('/') ? config.app.baseURL.slice(0, -1) : config.app.baseURL
|
|
|
|
|
|
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
|
|
try {
|
|
fetch(useBasedPath("/settings/changepw"), {
|
|
method: "POST",
|
|
headers: {
|
|
"Content-Type": "application/json"
|
|
},
|
|
body: JSON.stringify(pw_fields.value)
|
|
}).then(async (response) => {
|
|
|
|
if (response.ok) {
|
|
toast.add({
|
|
title: "Done!",
|
|
description: "It's changed!",
|
|
color: "success"
|
|
})
|
|
}
|
|
else {
|
|
const body = await response.json()
|
|
console.log(body.statusMessage || "")
|
|
toast.add({
|
|
title: 'Error',
|
|
description : body.data?.detail || body.statusMessage || 'Something went wrong',
|
|
color: 'error'
|
|
})
|
|
}
|
|
})
|
|
}
|
|
catch(err:any) {
|
|
toast.add({
|
|
title: 'Error',
|
|
description: err?.data?.statusMessage || err.message || 'Something went wrong',
|
|
color: 'error'
|
|
})
|
|
}
|
|
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> |