93 lines
3.2 KiB
Vue
93 lines
3.2 KiB
Vue
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import { API_URL } from '@/main.ts'
|
|
import { type User, primaryUser } from '@/composable/auth.ts'
|
|
import { deleteUser, addUser } from '@/composable/settings'
|
|
|
|
import UserInfo from '@/components/UserInfo.vue'
|
|
|
|
const new_user_name = ref('')
|
|
const new_user_passwd = ref('')
|
|
const new_admin = ref(false)
|
|
const userCreationMsg = ref({ message: '', type: 'info' })
|
|
const userDeletionMsg = ref({ message: '', type: 'info' })
|
|
|
|
const onNewUserCreation = async () => {
|
|
addUser(new_user_name.value, new_user_passwd.value, new_admin.value)
|
|
.then(() => {
|
|
userCreationMsg.value = { message: 'User created successfully', type: 'success' }
|
|
new_user_name.value = ''
|
|
new_user_passwd.value = ''
|
|
new_admin.value = false
|
|
})
|
|
.catch((error) => {
|
|
userCreationMsg.value = { message: `${error}`, type: 'error' }
|
|
console.error(error)
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<main>
|
|
<div v-if="primaryUser.currentUser.value" class="flex flex-wrap space-x-4 space-y-4">
|
|
<div class="boxed">
|
|
<h3>User Profile</h3>
|
|
<p><a class="font-bold">Name:</a> {{ primaryUser.currentUser.value.user }}</p>
|
|
<p><a class="font-bold">Role:</a> {{ primaryUser.currentUser.value.role }}</p>
|
|
</div>
|
|
<template v-if="primaryUser.currentUser.value.role === 'admin'">
|
|
<div class="boxed">
|
|
<h3>Users</h3>
|
|
<table>
|
|
<tr>
|
|
<th class="font-bold">Username</th>
|
|
<th class="font-bold">Role</th>
|
|
<th class="font-bold">Actions</th>
|
|
</tr>
|
|
<tr v-for="user in primaryUser.allUsers.value" :key="user.user">
|
|
<td>{{ user.user }}</td>
|
|
<td>{{ user.role }}</td>
|
|
<td>
|
|
<button
|
|
@click="
|
|
() =>
|
|
deleteUser(user)
|
|
.then(() => (userDeletionMsg = { message: 'Success', type: 'success' }))
|
|
.catch((e) => (userDeletionMsg = { message: e, type: 'error' }))
|
|
"
|
|
>
|
|
Delete
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<UserInfo :type="userDeletionMsg.type as any" v-if="userDeletionMsg.message">
|
|
<template #default>
|
|
<p>{{ userDeletionMsg.message }}</p>
|
|
</template>
|
|
</UserInfo>
|
|
</div>
|
|
|
|
<div class="boxed">
|
|
<h3>New user</h3>
|
|
<input v-model="new_user_name" placeholder="Username" />
|
|
<input v-model="new_user_passwd" type="password" placeholder="Password" />
|
|
<span class="flex flex-row">
|
|
<label for="new_admin">Admin:</label>
|
|
<input v-model="new_admin" id="new_admin" type="checkbox" class="!w-min ml-1" />
|
|
</span>
|
|
<button @click="() => onNewUserCreation()">Create User</button>
|
|
<UserInfo :type="userCreationMsg.type as any" v-if="userCreationMsg.message">
|
|
<template #default>
|
|
<p>{{ userCreationMsg.message }}</p>
|
|
</template>
|
|
</UserInfo>
|
|
</div>
|
|
</template>
|
|
<div v-else>
|
|
<p>You need Admin rights to see the rest...</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|