82 lines
3.2 KiB
Vue
82 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import type { Plan, User } from '~/types/user';
|
|
|
|
definePageMeta({
|
|
middleware: ["auth", "admin"],
|
|
layout: "admin"
|
|
});
|
|
|
|
const route = useRoute();
|
|
|
|
let { data: user } = await useFetch<User>('/api/admin/users/' + route.params.id);
|
|
|
|
let username = ref(user.value?.username);
|
|
let email = ref(user.value?.email);
|
|
let password = ref('');
|
|
let plan_id = ref(user.value?.plan.id);
|
|
let is_admin = ref(user.value?.is_admin ? 'checked' : 'unchecked');
|
|
|
|
const updateUser = async () => {
|
|
let body = {
|
|
username: username.value,
|
|
email: email.value,
|
|
password: password.value,
|
|
plan_id: plan_id.value,
|
|
is_admin: is_admin.value === 'checked' ? true : false,
|
|
}
|
|
|
|
if (password.value === '') {
|
|
delete body.password
|
|
}
|
|
|
|
await $fetch('/api/admin/users/edit/' + route.params.id, {
|
|
method: "POST",
|
|
body,
|
|
})
|
|
}
|
|
|
|
let { data: plans } = await useFetch<Plan[]>('/api/admin/plans');
|
|
</script>
|
|
|
|
<template>
|
|
<div class="w-full h-fit mb-4">
|
|
<div class="overflow-hidden rounded-md border text-[15px]">
|
|
<h4 class="bg-surface px-3.5 py-3 border-b">Edit User Account
|
|
</h4>
|
|
<div class="p-4">
|
|
<label for="username" class="block max-w-64 text-sm">Username</label>
|
|
<Input v-model="username" :value="username" id="username" placeholder="Username" class="w-full mb-2" />
|
|
<label for="email" class="block max-w-64 text-sm">Email</label>
|
|
<Input v-model="email" :value="email" id="email" placeholder="Email" class="w-full mb-2" />
|
|
<div class="mb-2">
|
|
<label for="password" class="block max-w-64 text-sm">Password</label>
|
|
<Input v-model="password" id="password" placeholder="Password" class="w-full" />
|
|
<p class="text-muted text-sm">Leave the password empty to keep it unchanged</p>
|
|
</div>
|
|
<label for="plan_id" class="block max-w-64 text-sm">Plan</label>
|
|
<!-- select the one with the value of user.value.plan_id -->
|
|
<select v-model="plan_id" id="plan_id" :selected="plan_id"
|
|
class="w-full max-w-64 px-4 py-2 rounded-md bg-overlay border hover:border-muted/40 focus:border-muted/60 cursor-pointer">
|
|
<option v-for="plan in plans" :key="plan.id" :value="plan.id">
|
|
{{ formatBytes(plan.max_storage) }}
|
|
</option>
|
|
</select>
|
|
<hr class="my-4" />
|
|
<div class="flex items-center">
|
|
<Checkbox v-model="is_admin" id="is_admin" type="checkbox" class="mr-2" />
|
|
<label for="is_admin" class="text-sm">
|
|
Is Admin
|
|
</label>
|
|
</div>
|
|
<hr class="my-4" />
|
|
<div>
|
|
<button
|
|
class="transition-bg bg-pine/10 text-pine px-3 py-2 rounded-md hover:bg-pine/15 active:bg-pine/25"
|
|
v-on:click="updateUser">
|
|
Update User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template> |