Refactor Admin Panel with more features (#384)
Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Chirag Chhatrala
GitHub
@@ -1,108 +1,154 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3 class="font-semibold text-2xl text-gray-900">
|
||||
Admin settings
|
||||
</h3>
|
||||
<small class="text-gray-600">Manage settings.</small>
|
||||
|
||||
<h3 class="mt-3 text-lg font-semibold mb-4">
|
||||
Tools
|
||||
</h3>
|
||||
<div class="flex flex-wrap mb-5">
|
||||
<div
|
||||
v-if="userInfo"
|
||||
class="flex gap-2 items-center"
|
||||
>
|
||||
<h1 class="text-xl">
|
||||
{{ userInfo.name }}
|
||||
</h1>
|
||||
<div class="text-xs select-all bg-gray-50 rounded-md px-2 py-1 border">
|
||||
{{ userInfo.id }}
|
||||
</div>
|
||||
<div class="text-xs select-all bg-gray-50 rounded-md px-2 py-1 border">
|
||||
{{ userInfo.email }}
|
||||
</div>
|
||||
<a
|
||||
:href="statsUrl"
|
||||
v-if="userInfo.stripe_id"
|
||||
:href="'https://dashboard.stripe.com/customers/'+userInfo.stripe_id"
|
||||
target="_blank"
|
||||
class="text-xs select-all bg-purple-50 border-purple-200 text-purple-500 rounded-md px-2 py-1 border"
|
||||
>
|
||||
<v-button
|
||||
class="mx-1"
|
||||
color="gray"
|
||||
shade="lighter"
|
||||
> Stats </v-button>
|
||||
</a>
|
||||
<a
|
||||
:href="horizonUrl"
|
||||
target="_blank"
|
||||
>
|
||||
<v-button
|
||||
class="mx-1"
|
||||
color="gray"
|
||||
shade="lighter"
|
||||
> Horizon </v-button>
|
||||
<Icon
|
||||
name="bx:bxl-stripe"
|
||||
class="h-4 w-4 inline-block"
|
||||
/>
|
||||
{{ userInfo.stripe_id }}
|
||||
</a>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold mb-4">
|
||||
Impersonate User
|
||||
</h3>
|
||||
<form
|
||||
@submit.prevent="impersonate"
|
||||
@keydown="form.onKeydown($event)"
|
||||
<h3
|
||||
v-else
|
||||
class="font-semibold text-2xl text-gray-900 mb-4"
|
||||
>
|
||||
<!-- Password -->
|
||||
<text-input
|
||||
name="identifier"
|
||||
:form="form"
|
||||
label="Identifier"
|
||||
:required="true"
|
||||
help="User Id, User Email or Form Slug"
|
||||
/>
|
||||
Admin settings
|
||||
</h3>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<v-button
|
||||
:loading="loading"
|
||||
class="mt-4"
|
||||
|
||||
<template v-if="!userInfo">
|
||||
<form
|
||||
class="pb-8 max-w-lg"
|
||||
@submit.prevent="fetchUser"
|
||||
@keydown="fetchUserForm.onKeydown($event)"
|
||||
>
|
||||
Impersonate User
|
||||
</v-button>
|
||||
</form>
|
||||
<text-input
|
||||
name="identifier"
|
||||
:form="fetchUserForm"
|
||||
label="Identifier"
|
||||
:required="true"
|
||||
help="User Id, User Email, Form Slug or View Slug"
|
||||
/>
|
||||
<v-button
|
||||
:loading="loading"
|
||||
type="success"
|
||||
color="blue"
|
||||
class="mt-4 w-full"
|
||||
>
|
||||
Fetch User
|
||||
</v-button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="flex flex-col"
|
||||
>
|
||||
<div
|
||||
id="admin-buttons"
|
||||
class="flex gap-1 my-4"
|
||||
>
|
||||
<impersonate-user :user="userInfo" />
|
||||
</div>
|
||||
<div
|
||||
class="w-full grid gap-2 grid-cols-1 lg:grid-cols-2"
|
||||
>
|
||||
<discount-on-subscription
|
||||
:user="userInfo"
|
||||
/>
|
||||
<extend-trial
|
||||
:user="userInfo"
|
||||
/>
|
||||
<cancel-subscription
|
||||
:user="userInfo"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { useRouter } from "vue-router"
|
||||
import { opnFetch } from "~/composables/useOpnApi.js"
|
||||
import { fetchAllWorkspaces } from "~/stores/workspaces.js"
|
||||
<script>
|
||||
import { computed } from 'vue'
|
||||
|
||||
definePageMeta({
|
||||
middleware: "moderator",
|
||||
})
|
||||
|
||||
useOpnSeoMeta({
|
||||
title: "Admin",
|
||||
})
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const workspacesStore = useWorkspacesStore()
|
||||
const router = useRouter()
|
||||
const form = useForm({
|
||||
identifier: "",
|
||||
})
|
||||
const loading = ref(false)
|
||||
|
||||
const runtimeConfig = useRuntimeConfig()
|
||||
const statsUrl = runtimeConfig.public.apiBase + "/stats"
|
||||
const horizonUrl = runtimeConfig.public.apiBase + "/horizon"
|
||||
|
||||
const impersonate = () => {
|
||||
loading.value = true
|
||||
authStore.startImpersonating()
|
||||
opnFetch("/admin/impersonate/" + encodeURI(form.identifier))
|
||||
.then(async (data) => {
|
||||
// Save the token.
|
||||
authStore.setToken(data.token, false)
|
||||
|
||||
// Fetch the user.
|
||||
const userData = await opnFetch("user")
|
||||
authStore.setUser(userData)
|
||||
const workspaces = await fetchAllWorkspaces()
|
||||
workspacesStore.set(workspaces.data.value)
|
||||
loading.value = false
|
||||
|
||||
router.push({ name: "home" })
|
||||
export default {
|
||||
setup () {
|
||||
useOpnSeoMeta({
|
||||
title: 'Admin'
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error)
|
||||
useAlert().error(error.data.message)
|
||||
loading.value = false
|
||||
definePageMeta({
|
||||
middleware: 'moderator'
|
||||
})
|
||||
|
||||
const authStore = useAuthStore()
|
||||
return {
|
||||
authStore,
|
||||
user: computed(() => authStore.user),
|
||||
useAlert: useAlert()
|
||||
}
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
userInfo: null,
|
||||
fetchUserForm: useForm({
|
||||
identifier: ''
|
||||
}),
|
||||
loading: false
|
||||
}),
|
||||
|
||||
computed: {
|
||||
isAdmin () {
|
||||
return this.user.admin
|
||||
}
|
||||
},
|
||||
|
||||
mounted () {
|
||||
// Shortcut link to impersonate users
|
||||
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||
const params = Object.fromEntries(urlSearchParams.entries())
|
||||
if (params.impersonate) {
|
||||
this.fetchUserForm.identifier = params.impersonate
|
||||
}
|
||||
if (params.user_id) {
|
||||
this.fetchUserForm.identifier = params.user_id
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
async fetchUser () {
|
||||
if (!this.fetchUserForm.identifier) {
|
||||
this.useAlert.error('Identifier is required.')
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
opnFetch(`/moderator/fetch-user/${encodeURI(this.fetchUserForm.identifier)}`).then(async (data) => {
|
||||
this.loading = false
|
||||
this.userInfo = data.user
|
||||
this.useAlert.success(`User Fetched: ${this.userInfo.name}`)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.useAlert.error(error.data.message)
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
Reference in New Issue
Block a user