migrate user, reorder menu
This commit is contained in:
jb-alvarado
parent
23f46be962
commit
a9a47b6701
@ -1,124 +1,137 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="max-w-[1200px] pe-8">
|
<div class="w-full max-w-[800px] pe-8">
|
||||||
<h2 class="pt-3 text-3xl">User Configuration</h2>
|
<h2 class="pt-3 text-3xl">User Configuration</h2>
|
||||||
<div class="flex w-full mt-5">
|
<div class="flex w-full mb-5 mt-10">
|
||||||
<div class="col-sm-2"></div>
|
<div class="grow">
|
||||||
<div class="col-sm-4 ms-1">
|
<select class="select select-bordered w-full max-w-xs" v-model="selected" @change="onChange($event)">
|
||||||
<select class="form-select" v-model="selected" @change="onChange($event)">
|
|
||||||
<option v-for="item in users">{{ item.username }}</option>
|
<option v-for="item in users">{{ item.username }}</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="col px-0">
|
<div class="flex-none join">
|
||||||
<div class="float-end">
|
<button class="join-item btn btn-primary" title="Add new User" @click="showUserModal = true">
|
||||||
<button
|
Add User
|
||||||
class="btn btn-primary me-2"
|
</button>
|
||||||
title="Add new User"
|
<button class="join-item btn btn-primary" title="Delete selected user" @click="deleteUser()">
|
||||||
data-bs-toggle="modal"
|
Delete
|
||||||
data-bs-target="#userModal"
|
</button>
|
||||||
>
|
|
||||||
Add User
|
|
||||||
</button>
|
|
||||||
<button class="btn btn-primary" @click="deleteUser()">Delete</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<form v-if="configStore.configUser" @submit.prevent="onSubmitUser">
|
<form v-if="configStore.configUser" @submit.prevent="onSubmitUser">
|
||||||
<div class="mb-3 row">
|
<label class="form-control w-full max-w-md">
|
||||||
<label for="userName" class="col-sm-2 col-form-label">Username</label>
|
<div class="label">
|
||||||
<div class="col-sm-10">
|
<span class="label-text">Username</span>
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
class="form-control"
|
|
||||||
id="userName"
|
|
||||||
v-model="configStore.configUser.username"
|
|
||||||
disabled
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<input
|
||||||
<div class="mb-3 row">
|
type="text"
|
||||||
<label for="userMail" class="col-sm-2 col-form-label">mail</label>
|
placeholder="Name"
|
||||||
<div class="col-sm-10">
|
class="input input-bordered w-full !bg-base-100"
|
||||||
<input type="email" class="form-control" id="userMail" v-model="configStore.configUser.mail" />
|
v-model="configStore.configUser.username"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="form-control w-full max-w-md mt-3">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Mail</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<input
|
||||||
<div class="mb-3 row">
|
type="email"
|
||||||
<label for="userPass1" class="col-sm-2 col-form-label">New Password</label>
|
placeholder="mail"
|
||||||
<div class="col-sm-10">
|
class="input input-bordered w-full"
|
||||||
<input type="password" class="form-control" id="userPass1" v-model="newPass" />
|
v-model="configStore.configUser.mail"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="form-control w-full max-w-md mt-3">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">New Password</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<input
|
||||||
<div class="mb-3 row">
|
type="password"
|
||||||
<label for="userPass2" class="col-sm-2 col-form-label">Confirm Password</label>
|
placeholder="New password"
|
||||||
<div class="col-sm-10">
|
class="input input-bordered w-full"
|
||||||
<input type="password" class="form-control" id="userPass2" v-model="confirmPass" />
|
v-model="newPass"
|
||||||
</div>
|
/>
|
||||||
</div>
|
</label>
|
||||||
<div class="row">
|
|
||||||
<div class="col-1" style="min-width: 85px">
|
<label class="form-control w-full max-w-md mt-3">
|
||||||
<button class="btn btn-primary" type="submit">Save</button>
|
<div class="label">
|
||||||
|
<span class="label-text">Confirm Password</span>
|
||||||
</div>
|
</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="Confirm password"
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
v-model="confirmPass"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button class="btn btn-primary mt-5" type="submit">Save</button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="userModal" ref="userModal" class="modal" tabindex="-1" aria-labelledby="userModalLabel" aria-hidden="true">
|
<div
|
||||||
<div class="modal-dialog modal-dialog-centered">
|
v-if="showUserModal"
|
||||||
<div class="modal-content">
|
class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30"
|
||||||
<div class="modal-header">
|
>
|
||||||
<h1 class="modal-title fs-5" id="userModalLabel">Add User</h1>
|
<div class="flex flex-col bg-base-100 w-full max-w-[500px] h-[576px] rounded-md p-5 shadow-xl">
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Cancel"></button>
|
<div class="font-bold text-lg">Add user</div>
|
||||||
|
|
||||||
|
<form @reset="clearUser" @submit.prevent="addUser">
|
||||||
|
<label class="form-control w-full mt-7">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Username</span>
|
||||||
|
</div>
|
||||||
|
<input type="text" placeholder="Name" class="input input-bordered w-full" v-model="user.username" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="form-control w-full mt-3">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Mail</span>
|
||||||
|
</div>
|
||||||
|
<input type="email" placeholder="Mail" class="input input-bordered w-full" v-model="user.mail" />
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="form-control w-full mt-3">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Password</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="Password"
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
v-model="user.password"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<label class="form-control w-full mt-3">
|
||||||
|
<div class="label">
|
||||||
|
<span class="label-text">Confirm Password</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
placeholder="Password"
|
||||||
|
class="input input-bordered w-full"
|
||||||
|
v-model="user.confirm"
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<div class="form-control mt-3">
|
||||||
|
<label class="label cursor-pointer w-20">
|
||||||
|
<span class="label-text">Admin</span>
|
||||||
|
<input type="checkbox" class="checkbox" v-model.number="user.admin" />
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<form @reset="clearUser" @submit.prevent="addUser">
|
|
||||||
<div class="modal-body">
|
<div class="flex justify-end mt-2">
|
||||||
<label for="name-input" class="form-label">Username</label>
|
<div class="join">
|
||||||
<input
|
<button class="btn join-item" type="reset">Cancel</button>
|
||||||
type="text"
|
<button class="btn join-item" type="submit">Ok</button>
|
||||||
class="form-control"
|
|
||||||
id="name-input"
|
|
||||||
aria-describedby="Username"
|
|
||||||
v-model.number="user.username"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<label for="mail-input" class="form-label mt-2">Mail</label>
|
|
||||||
<input
|
|
||||||
type="email"
|
|
||||||
class="form-control"
|
|
||||||
id="mail-input"
|
|
||||||
aria-describedby="Mail Address"
|
|
||||||
v-model.number="user.mail"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<label for="pass-input" class="form-label mt-2">Password</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
class="form-control"
|
|
||||||
id="pass-input"
|
|
||||||
aria-describedby="Password"
|
|
||||||
v-model.string="user.password"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<label for="confirm-input" class="form-label mt-2">Confirm Password</label>
|
|
||||||
<input
|
|
||||||
type="password"
|
|
||||||
class="form-control"
|
|
||||||
id="confirm-input"
|
|
||||||
aria-describedby="Confirm Password"
|
|
||||||
v-model.string="user.confirm"
|
|
||||||
required
|
|
||||||
/>
|
|
||||||
<div class="form-check mt-3">
|
|
||||||
<input class="form-check-input" type="checkbox" id="isAdmin" v-model.number="user.admin" />
|
|
||||||
<label class="form-check-label" for="isAdmin">Admin</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
</div>
|
||||||
<button type="reset" class="btn btn-primary" data-bs-dismiss="modal" aria-label="Cancel">
|
</form>
|
||||||
Cancel
|
|
||||||
</button>
|
|
||||||
<button type="submit" class="btn btn-primary">Ok</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -128,11 +141,9 @@ const authStore = useAuth()
|
|||||||
const configStore = useConfig()
|
const configStore = useConfig()
|
||||||
const indexStore = useIndex()
|
const indexStore = useIndex()
|
||||||
|
|
||||||
const { $bootstrap } = useNuxtApp()
|
|
||||||
|
|
||||||
const selected = ref(null)
|
const selected = ref(null)
|
||||||
const users = ref([] as User[])
|
const users = ref([] as User[])
|
||||||
const userModal = ref()
|
const showUserModal = ref(false)
|
||||||
const newPass = ref('')
|
const newPass = ref('')
|
||||||
const confirmPass = ref('')
|
const confirmPass = ref('')
|
||||||
|
|
||||||
@ -211,6 +222,8 @@ async function clearUser() {
|
|||||||
user.value.confirm = ''
|
user.value.confirm = ''
|
||||||
user.value.admin = false
|
user.value.admin = false
|
||||||
user.value.role_id = 2
|
user.value.role_id = 2
|
||||||
|
|
||||||
|
showUserModal.value = false
|
||||||
}
|
}
|
||||||
|
|
||||||
async function addUser() {
|
async function addUser() {
|
||||||
@ -223,9 +236,7 @@ async function addUser() {
|
|||||||
delete user.value.admin
|
delete user.value.admin
|
||||||
|
|
||||||
if (user.value.password === user.value.confirm) {
|
if (user.value.password === user.value.confirm) {
|
||||||
// @ts-ignore
|
showUserModal.value = false
|
||||||
const modal = $bootstrap.Modal.getOrCreateInstance(userModal.value)
|
|
||||||
modal.hide()
|
|
||||||
|
|
||||||
authStore.inspectToken()
|
authStore.inspectToken()
|
||||||
const update = await configStore.addNewUser(user.value)
|
const update = await configStore.addNewUser(user.value)
|
||||||
|
|||||||
@ -23,13 +23,20 @@
|
|||||||
</div>
|
</div>
|
||||||
<ul class="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
|
<ul class="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
|
||||||
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md">
|
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md">
|
||||||
<details v-if="item.name === 'channel' && configStore.configGui.length > 1">
|
<NuxtLink :to="item.link" class="h-[27px] text-base" exactActiveClass="is-active">
|
||||||
|
<span>
|
||||||
|
{{ item.name }}
|
||||||
|
</span>
|
||||||
|
</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li v-if="configStore.configGui.length > 1">
|
||||||
|
<details>
|
||||||
<summary>
|
<summary>
|
||||||
<NuxtLink :to="item.link" class="h-[19px] text-base">
|
<div class="h-[19px] text-base">
|
||||||
<span>
|
<span>
|
||||||
{{ item.name }}
|
Channels
|
||||||
</span>
|
</span>
|
||||||
</NuxtLink>
|
</div>
|
||||||
</summary>
|
</summary>
|
||||||
<ul class="p-2">
|
<ul class="p-2">
|
||||||
<li v-for="(channel, index) in configStore.configGui" :key="index">
|
<li v-for="(channel, index) in configStore.configGui" :key="index">
|
||||||
@ -39,11 +46,6 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</details>
|
</details>
|
||||||
<NuxtLink v-else :to="item.link" class="h-[27px] text-base" exactActiveClass="is-active">
|
|
||||||
<span>
|
|
||||||
{{ item.name }}
|
|
||||||
</span>
|
|
||||||
</NuxtLink>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="bg-base-100 rounded-md">
|
<li class="bg-base-100 rounded-md">
|
||||||
<button class="h-[27px]" exactActiveClass="is-active" @click="logout()">Logout</button>
|
<button class="h-[27px]" exactActiveClass="is-active" @click="logout()">Logout</button>
|
||||||
@ -54,15 +56,21 @@
|
|||||||
<div class="navbar-end hidden md:flex w-4/5 min-w-[600px]">
|
<div class="navbar-end hidden md:flex w-4/5 min-w-[600px]">
|
||||||
<ul class="menu menu-sm menu-horizontal px-1">
|
<ul class="menu menu-sm menu-horizontal px-1">
|
||||||
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md p-0">
|
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md p-0">
|
||||||
|
<NuxtLink :to="item.link" class="px-2 h-[27px] relative text-base" activeClass="is-active">
|
||||||
|
<span>
|
||||||
|
{{ item.name }}
|
||||||
|
</span>
|
||||||
|
</NuxtLink>
|
||||||
|
</li>
|
||||||
|
<li v-if="configStore.configGui.length > 1">
|
||||||
<details
|
<details
|
||||||
v-if="item.name === 'channel' && configStore.configGui.length > 1"
|
|
||||||
tabindex="0"
|
tabindex="0"
|
||||||
@focusout="closeDropdown"
|
@focusout="closeDropdown"
|
||||||
>
|
>
|
||||||
<summary>
|
<summary>
|
||||||
<div class="h-[19px] text-base" activeClass="is-active">
|
<div class="h-[19px] text-base">
|
||||||
<span>
|
<span>
|
||||||
{{ item.name }}
|
Channels
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</summary>
|
</summary>
|
||||||
@ -72,11 +80,6 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</details>
|
</details>
|
||||||
<NuxtLink v-else :to="item.link" class="px-2 h-[27px] relative text-base" activeClass="is-active">
|
|
||||||
<span>
|
|
||||||
{{ item.name }}
|
|
||||||
</span>
|
|
||||||
</NuxtLink>
|
|
||||||
</li>
|
</li>
|
||||||
<li class="bg-base-100 rounded-md p-0">
|
<li class="bg-base-100 rounded-md p-0">
|
||||||
<button class="h-[27px] pt-[6px]" @click="logout()">Logout</button>
|
<button class="h-[27px] pt-[6px]" @click="logout()">Logout</button>
|
||||||
@ -97,7 +100,6 @@ const menuItems = ref([
|
|||||||
{ name: 'Media', link: '/media' },
|
{ name: 'Media', link: '/media' },
|
||||||
{ name: 'Message', link: '/message' },
|
{ name: 'Message', link: '/message' },
|
||||||
{ name: 'Logging', link: '/logging' },
|
{ name: 'Logging', link: '/logging' },
|
||||||
{ name: 'channel', link: '#' },
|
|
||||||
{ name: 'Configure', link: '/configure' },
|
{ name: 'Configure', link: '/configure' },
|
||||||
])
|
])
|
||||||
|
|
||||||
|
|||||||
@ -1,22 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex w-full h-full">
|
<div class="flex w-full h-full">
|
||||||
<div class="flex-none w-[70px] me-3 px-1 pt-7">
|
<div class="flex-none w-[70px] join join-vertical me-3 px-1 pt-7">
|
||||||
<button
|
<button
|
||||||
class="w-full btn btn-sm btn-primary duration-500"
|
class="join-item w-full btn btn-sm btn-primary duration-500"
|
||||||
:class="activeConf === 1 && 'btn-secondary'"
|
:class="activeConf === 1 && 'btn-secondary'"
|
||||||
@click="activeConf = 1"
|
@click="activeConf = 1"
|
||||||
>
|
>
|
||||||
GUI
|
GUI
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="w-full btn btn-sm btn-primary mt-1 duration-500"
|
class="join-item w-full btn btn-sm btn-primary mt-1 duration-500"
|
||||||
:class="activeConf === 2 && 'btn-secondary'"
|
:class="activeConf === 2 && 'btn-secondary'"
|
||||||
@click="activeConf = 2"
|
@click="activeConf = 2"
|
||||||
>
|
>
|
||||||
Playout
|
Playout
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
class="w-full btn btn-sm btn-primary mt-1 duration-500"
|
class="join-item w-full btn btn-sm btn-primary mt-1 duration-500"
|
||||||
:class="activeConf === 3 && 'btn-secondary'"
|
:class="activeConf === 3 && 'btn-secondary'"
|
||||||
@click="activeConf = 3"
|
@click="activeConf = 3"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -1,15 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="date-container">
|
||||||
<Menu />
|
<div class="date-div">
|
||||||
<div class="date-container">
|
<input type="date" class="form-control" v-model="listDate" />
|
||||||
<div class="date-div">
|
|
||||||
<input type="date" class="form-control" v-model="listDate" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="log-container mt-2">
|
|
||||||
<div class="log-content" v-html="formatLog(currentLog)" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="log-container mt-2">
|
||||||
|
<div class="log-content" v-html="formatLog(currentLog)" />
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user