btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

refactor: remove of light mode from admin dashboard + added README, .env.example (#33)

Browse Source
This commit is contained in:
Joel Jacob Stephen
2023-03-13 18:57:29 +05:30
committed by GitHub
parent 65719b560b
commit 753db25e4c
17 changed files with 157 additions and 313 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/hoppscotch-sh-admin/.env.example Normal file
View File

@@ -0,0 +1,4 @@
# Backend URLs
VITE_BACKEND_GQL_URL='*****************************'
VITE_BACKEND_WS_URL='******************************'
VITE_BACKEND_API_URL='*****************************'

45
packages/hoppscotch-sh-admin/README.md Normal file
View File

@@ -0,0 +1,45 @@
<div align="center">
<a href="https://hoppscotch.io">
<img
src="https://avatars.githubusercontent.com/u/56705483"
alt="Hoppscotch Logo"
height="64"
/>
</a>
<br />
<p>
<h3>
<b>
Hoppscotch Self Hosted Admin Dashboard
</b>
</h3>
</p>
#### **Support**
[![Chat on Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://hoppscotch.io/discord) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-2CA5E0?logo=telegram)](https://hoppscotch.io/telegram) [![Discuss on GitHub](https://img.shields.io/badge/discussions-GitHub-333333?logo=github)](https://github.com/hoppscotch/hoppscotch/discussions)
</div>
## **Built with**
- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SCSS](https://sass-lang.com), [Windi CSS](https://windicss.org)
- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
- [TypeScript](https://www.typescriptlang.org)
- [Vue](https://vuejs.org)
- [Vite](https://vitejs.dev)
## **Developing**
0. Update [`.env.example`](https://github.com/hoppscotch/hoppscotch/blob/main/.env.example) file found in the root of repository with your own keys and rename it to `.env`.
### Local development environment
1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git.
2. Update `.env.example` file found in the root of `hoppscotch-sh-admin` directory with your own keys and rename it to `.env`.
3. Install pnpm using npm by running `npm install -g pnpm`.
4. Install dependencies by running `pnpm install` within the `hoppscotch-sh-admin` directory
5. It is assumed that the backend is running. Refer the Hoppscotch Backend [`README`](https://github.com/hoppscotch/self-hosted/blob/main/packages/hoppscotch-backend/README.md) to get the backend setup and running.
6. Start the development server with `pnpm run dev`.
7. Open the development site by going to [`http://localhost:3000`](http://localhost:3000) in your browser.

10
packages/hoppscotch-sh-admin/src/App.vue
View File

@@ -5,7 +5,6 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useDark, useToggle } from '@vueuse/core';
import { computed } from 'vue'; import { computed } from 'vue';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { HOPP_MODULES } from './modules'; import { HOPP_MODULES } from './modules';
@@ -18,15 +17,6 @@ const layout = computed(
() => `${currentRoute.value.meta.layout || defaultLayout}-layout` () => `${currentRoute.value.meta.layout || defaultLayout}-layout`
); );
const isDark = useDark();
useToggle(isDark);
// Run module root component setup code // Run module root component setup code
HOPP_MODULES.forEach((mod) => mod.onRootSetup?.()); HOPP_MODULES.forEach((mod) => mod.onRootSetup?.());
</script> </script>
<style lang="scss">
html.dark {
color-scheme: dark;
}
</style>

60
packages/hoppscotch-sh-admin/src/components.d.ts vendored
View File

@@ -1,40 +1,38 @@
// generated by unplugin-vue-components // generated by unplugin-vue-components
// We suggest you to commit this file into source control // We suggest you to commit this file into source control
// Read more: https://github.com/vuejs/core/pull/3399 // Read more: https://github.com/vuejs/core/pull/3399
import '@vue/runtime-core' import '@vue/runtime-core';
export {} export {};
declare module '@vue/runtime-core' { declare module '@vue/runtime-core' {
export interface GlobalComponents { export interface GlobalComponents {
AppHeader: typeof import('./components/app/Header.vue')['default'] AppHeader: typeof import('./components/app/Header.vue')['default'];
AppLogin: typeof import('./components/app/Login.vue')['default'] AppLogin: typeof import('./components/app/Login.vue')['default'];
AppLogout: typeof import('./components/app/Logout.vue')['default'] AppLogout: typeof import('./components/app/Logout.vue')['default'];
AppModal: typeof import('./components/app/Modal.vue')['default'] AppModal: typeof import('./components/app/Modal.vue')['default'];
AppSidebar: typeof import('./components/app/Sidebar.vue')['default'] AppSidebar: typeof import('./components/app/Sidebar.vue')['default'];
AppToast: typeof import('./components/app/Toast.vue')['default'] AppToast: typeof import('./components/app/Toast.vue')['default'];
HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'] HoppButtonPrimary: typeof import('@hoppscotch/ui')['HoppButtonPrimary'];
HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'] HoppButtonSecondary: typeof import('@hoppscotch/ui')['HoppButtonSecondary'];
HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'] HoppSmartAnchor: typeof import('@hoppscotch/ui')['HoppSmartAnchor'];
HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'] HoppSmartConfirmModal: typeof import('@hoppscotch/ui')['HoppSmartConfirmModal'];
HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'] HoppSmartItem: typeof import('@hoppscotch/ui')['HoppSmartItem'];
IconLucideBell: typeof import('~icons/lucide/bell')['default'] IconLucideBell: typeof import('~icons/lucide/bell')['default'];
IconLucideInbox: typeof import('~icons/lucide/inbox')['default'] IconLucideInbox: typeof import('~icons/lucide/inbox')['default'];
IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default'] IconLucideLayoutDashboard: typeof import('~icons/lucide/layout-dashboard')['default'];
IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default'] IconLucideLineChart: typeof import('~icons/lucide/line-chart')['default'];
IconLucideLock: typeof import('~icons/lucide/lock')['default'] IconLucideLock: typeof import('~icons/lucide/lock')['default'];
IconLucideMenu: typeof import('~icons/lucide/menu')['default'] IconLucideMenu: typeof import('~icons/lucide/menu')['default'];
IconLucideSettings: typeof import('~icons/lucide/settings')['default'] IconLucideSettings: typeof import('~icons/lucide/settings')['default'];
IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default'] IconLucideSidebarClose: typeof import('~icons/lucide/sidebar-close')['default'];
IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default'] IconLucideSidebarOpen: typeof import('~icons/lucide/sidebar-open')['default'];
IconLucideUser: typeof import('~icons/lucide/user')['default'] IconLucideUser: typeof import('~icons/lucide/user')['default'];
IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default'] IconLucideUserCog: typeof import('~icons/lucide/user-cog')['default'];
IconLucideUsers: typeof import('~icons/lucide/users')['default'] IconLucideUsers: typeof import('~icons/lucide/users')['default'];
ProfilePicture: typeof import('./components/profile/Picture.vue')['default'] ProfilePicture: typeof import('./components/profile/Picture.vue')['default'];
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink'];
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView'];
TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default'] TeamsAddMembers: typeof import('./components/teams/AddMembers.vue')['default'];
UsersDetails: typeof import('./components/users/Details.vue')['default']
} }
} }

4
packages/hoppscotch-sh-admin/src/components/app/Header.vue
View File

@@ -1,6 +1,6 @@
<template> <template>
<header <header
class="flex items-center justify-between border-b border-gray-400 dark:border-gray-600 px-6 py-4 bg-neutral-50 dark:bg-neutral-900 shadow-lg" class="flex items-center justify-between border-b border-gray-600 px-6 py-4 bg-neutral-900 shadow-lg"
> >
<div class="flex items-center"> <div class="flex items-center">
<button <button
@@ -64,7 +64,7 @@
> >
<div <div
v-show="dropdownOpen" v-show="dropdownOpen"
class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-xl" class="absolute right-0 z-20 w-48 py-2 mt-2 bg-zinc-800 rounded-md shadow-xl"
> >
<HoppSmartItem to="/profile" :icon="IconUser" :label="'Profile'" /> <HoppSmartItem to="/profile" :icon="IconUser" :label="'Profile'" />
<HoppSmartItem <HoppSmartItem

2
packages/hoppscotch-sh-admin/src/components/app/Modal.vue
View File

@@ -2,7 +2,7 @@
<div> <div>
<button <button
@click="open = true" @click="open = true"
class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow text-gray-200 dark:border-gray-800 border border-gray-200 leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800" class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow border-gray-800 border border-gray-200 leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
> >
Invite User Invite User
</button> </button>

4
packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue
View File

@@ -20,7 +20,7 @@
<span <span
v-if="isExpanded" v-if="isExpanded"
class="mx-2 text-xl font-semibold text-gray-600 dark:text-gray-200" class="mx-2 text-xl font-semibold text-gray-200"
>Hoppscotch</span >Hoppscotch</span
> >
</router-link> </router-link>
@@ -104,6 +104,6 @@ const inactiveClass =
@apply fixed md:static md:translate-x-0 md:inset-0 inset-y-0 left-0 z-30; @apply fixed md:static md:translate-x-0 md:inset-0 inset-y-0 left-0 z-30;
@apply transition duration-300; @apply transition duration-300;
@apply flex overflow-y-auto bg-neutral-200 dark:bg-neutral-900 border-r border-gray-300 dark:border-gray-600; @apply flex overflow-y-auto bg-neutral-900 border-r border-gray-600;
} }
</style> </style>

4
packages/hoppscotch-sh-admin/src/components/teams/AddMembers.vue
View File

@@ -1,8 +1,6 @@
<template> <template>
<div class="flex justify-between"> <div class="flex justify-between">
<h3 <h3 class="mt-10 text-2xl justify-start font-medium text-gray-200">
class="mt-10 text-2xl justify-start font-medium text-zinc-800 dark:text-gray-200"
>
Members Members
</h3> </h3>
<div class="mt-8 ml-2"> <div class="mt-8 ml-2">

108
packages/hoppscotch-sh-admin/src/components/users/Details.vue
View File

@@ -1,108 +0,0 @@
<template>
<div>
<div>
<div class="px-6 rounded-md">
<div class="grid gap-6 mt-4">
<div v-if="user.photoURL" class="h-10">
<img :src="user?.photoURL" alt="" />
</div>
<div>
<label class="text-gray-800 dark:text-gray-200" for="username"
>UID</label
>
<div
v-if="user.uid"
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ user?.uid }}
</div>
</div>
<div v-if="user.displayName">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Name</label
>
<div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ user?.displayName }}
</div>
</div>
<div v-if="user.email">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Email</label
>
<div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ user?.email }}
</div>
</div>
<div v-if="user.createdOn">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Created On</label
>
<div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
>
{{ getCreatedDateAndTime(user?.createdOn) }}
</div>
</div>
</div>
<div class="flex justify-center sm:justify-start mt-8">
<button
class="mr-3 px-4 py-2 text-gray-200 bg-emerald-900 rounded-md hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
>
Go Back
</button>
<button
@click="deleteUser"
class="px-4 py-2 text-gray-200 bg-red-800 rounded-md hover:bg-red-600 focus:outline-none focus:bg-red-800"
>
Delete User
</button>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { defineProps, onMounted, ref } from 'vue';
import { format } from 'date-fns';
import { useQuery } from '@urql/vue';
import { UserInfoDocument } from '../../helpers/backend/graphql';
import { routeLocationKey, useRoute } from 'vue-router';
const route = useRoute();
const { fetching, error, data } = useQuery({ query: UserInfoDocument });
// Get Proper Date Formats
const getCreatedDateAndTime = (date: string) =>
format(new Date(date), 'd-MM-yyyy hh:mm a');
const props = defineProps({
user: {
type: Object,
required: true,
},
});
onMounted(() => {
console.log('mounted');
console.log(props.user.uid);
});
const deleteUser = () => {
console.log('delete user');
};
</script>
<style>
.modal {
transition: opacity 0.25s ease;
}
</style>

46
packages/hoppscotch-sh-admin/src/pages/dashboard.vue
View File

@@ -1,77 +1,57 @@
<template> <template>
<div class="sm:px-6 p-4"> <div class="sm:px-6 p-4">
<h3 class="text-3xl font-medium text-gray-800 dark:text-gray-200 mb-6"> <h3 class="text-3xl font-medium text-gray-200 mb-6">Dashboard</h3>
Dashboard
</h3>
<div class="mt-4"> <div class="mt-4">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="w-full"> <div class="w-full">
<div <div
class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm" class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
> >
<icon-lucide-user-cog class="text-2xl text-emerald-500" /> <icon-lucide-user-cog class="text-2xl text-emerald-500" />
<div class="mx-5"> <div class="mx-5">
<h4 <h4 class="text-2xl font-semibold text-gray-200">1000</h4>
class="text-2xl font-semibold text-gray-700 dark:text-gray-200" <div class="text-gray-400">Total Users</div>
>
1000
</h4>
<div class="text-gray-600 dark:text-gray-400">Total Users</div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full"> <div class="w-full">
<div <div
class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm" class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
> >
<icon-lucide-users class="text-2xl text-pink-400" /> <icon-lucide-users class="text-2xl text-pink-400" />
<div class="mx-5"> <div class="mx-5">
<h4 <h4 class="text-2xl font-semibold text-gray-200">200</h4>
class="text-2xl font-semibold text-gray-700 dark:text-gray-200" <div class="text-gray-400">Total Teams</div>
>
200
</h4>
<div class="text-gray-600 dark:text-gray-400">Total Teams</div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full"> <div class="w-full">
<div <div
class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm" class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
> >
<icon-lucide-lock class="text-2xl text-cyan-400" /> <icon-lucide-lock class="text-2xl text-cyan-400" />
<div class="mx-5"> <div class="mx-5">
<h4 <h4 class="text-2xl font-semibold text-gray-200">20</h4>
class="text-2xl font-semibold text-gray-700 dark:text-gray-200" <div class="text-gray-400">Total Roles</div>
>
20
</h4>
<div class="text-gray-600 dark:text-gray-400">Total Roles</div>
</div> </div>
</div> </div>
</div> </div>
<div class="w-full"> <div class="w-full">
<div <div
class="flex items-center px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm" class="flex items-center px-5 py-6 bg-zinc-800 rounded-md shadow-sm"
> >
<icon-lucide-line-chart class="text-2xl text-orange-400" /> <icon-lucide-line-chart class="text-2xl text-orange-400" />
<div class="mx-5"> <div class="mx-5">
<h4 <h4 class="text-2xl font-semibold text-gray-200">215</h4>
class="text-2xl font-semibold text-gray-700 dark:text-gray-200" <div class="text-gray-400">Total Collections</div>
>
215
</h4>
<div class="text-gray-600 dark:text-gray-400">
Total Collections
</div>
</div> </div>
</div> </div>
</div> </div>

4
packages/hoppscotch-sh-admin/src/pages/settings.vue
View File

@@ -1,5 +1,3 @@
<template> <template>
<h3 class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"> <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Settings</h3>
Settings
</h3>
</template> </template>

10
packages/hoppscotch-sh-admin/src/pages/teams/AddTeam.vue
View File

@@ -1,7 +1,5 @@
<template> <template>
<h3 class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"> <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Create Team</h3>
Create Team
</h3>
<div> <div>
<div> <div>
@@ -9,13 +7,11 @@
<form> <form>
<div class="flex mt-4 ml-10"> <div class="flex mt-4 ml-10">
<div> <div>
<label <label class="text-gray-200 mr-5 text-lg" for="username"
class="text-gray-800 dark:text-gray-200 mr-5 text-lg"
for="username"
>Name: >Name:
</label> </label>
<input <input
class="w-96 p-2 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500" class="w-96 p-2 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
type="text" type="text"
placeholder="Enter Name" placeholder="Enter Name"
/> />

62
packages/hoppscotch-sh-admin/src/pages/teams/details.vue
View File

@@ -1,57 +1,41 @@
<template> <template>
<div class="sm:px-6 p-4"> <div class="sm:px-6 p-4">
<h3 <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Team Details</h3>
class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
>
Team Details
</h3>
<div class="mt-5"> <div class="mt-5">
<div class="flex flex-wrap justify-center mx-6"> <div class="flex flex-wrap justify-center mx-6">
<div class="w-full px-4 sm:w-1/2 xl:w-1/3"> <div class="w-full px-4 sm:w-1/2 xl:w-1/3">
<div <div class="h-80 px-6 py-6 bg-zinc-800 rounded-md shadow-sm">
class="h-80 px-6 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
>
<div class="flex ml-3 mt-2"> <div class="flex ml-3 mt-2">
<icon-lucide-user class="text-emerald-400 text-3xl" /> <icon-lucide-user class="text-emerald-400 text-3xl" />
<h4 <h4 class="text-3xl ml-2 font-semibold text-gray-200">
class="text-3xl ml-2 font-semibold text-gray-700 dark:text-gray-200"
>
Team Info Team Info
</h4> </h4>
</div> </div>
<div class="flex mt-5 ml-5 text-xl"> <div class="flex mt-5 ml-5 text-xl">
<h4 class="font-semibold text-gray-700 dark:text-gray-400"> <h4 class="font-semibold text-gray-400">Team ID:</h4>
Team ID: <div class="text-gray-200 ml-2">
</h4>
<div class="text-gray-600 dark:text-gray-200 ml-2">
{{ team.id }} {{ team.id }}
</div> </div>
</div> </div>
<div class="flex mt-2 ml-5 text-xl"> <div class="flex mt-2 ml-5 text-xl">
<h4 class="font-semibold text-gray-700 dark:text-gray-400"> <h4 class="font-semibold text-gray-400">Team Name:</h4>
Team Name: <div class="text-gray-200 ml-2">
</h4>
<div class="text-gray-600 dark:text-gray-200 ml-2">
{{ team.name }} {{ team.name }}
</div> </div>
</div> </div>
<div class="flex mt-2 ml-5 text-xl"> <div class="flex mt-2 ml-5 text-xl">
<h4 class="font-semibold text-gray-700 dark:text-gray-400"> <h4 class="font-semibold text-gray-400">Creation Date:</h4>
Creation Date: <div class="text-gray-200 ml-2">
</h4>
<div class="text-gray-600 dark:text-gray-200 ml-2">
{{ team.date }} {{ team.date }}
</div> </div>
</div> </div>
<div class="flex mt-2 ml-5 text-xl"> <div class="flex mt-2 ml-5 text-xl">
<h4 class="font-semibold text-gray-700 dark:text-gray-400"> <h4 class="font-semibold text-gray-400">Number of members:</h4>
Number of members: <div class="text-gray-200 ml-2">
</h4>
<div class="text-gray-600 dark:text-gray-200 ml-2">
{{ team.members }} {{ team.members }}
</div> </div>
</div> </div>
@@ -59,42 +43,34 @@
</div> </div>
<div class="w-full px-4 sm:w-1/2 xl:w-1/3"> <div class="w-full px-4 sm:w-1/2 xl:w-1/3">
<div <div class="h-80 px-5 py-6 bg-zinc-800 rounded-md shadow-sm">
class="h-80 px-5 py-6 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-sm"
>
<div class="flex ml-3 mt-2"> <div class="flex ml-3 mt-2">
<icon-lucide-line-chart class="text-yellow-300 text-3xl" /> <icon-lucide-line-chart class="text-yellow-300 text-3xl" />
<h4 <h4 class="text-3xl ml-2 font-semibold text-gray-200">Stats</h4>
class="text-3xl ml-2 font-semibold text-gray-700 dark:text-gray-200"
>
Stats
</h4>
</div> </div>
<div class="flex mt-5 ml-5 text-xl"> <div class="flex mt-5 ml-5 text-xl">
<h4 class="font-semibold text-gray-700 dark:text-gray-400"> <h4 class="font-semibold text-gray-400">
Number of Collections: Number of Collections:
</h4> </h4>
<div class="text-gray-600 dark:text-gray-200 ml-2"> <div class="text-gray-200 ml-2">
{{ stats.collections }} {{ stats.collections }}
</div> </div>
</div> </div>
<div class="flex mt-2 ml-5 text-xl"> <div class="flex mt-2 ml-5 text-xl">
<h4 class="font-semibold text-gray-700 dark:text-gray-400"> <h4 class="font-semibold text-gray-400">Number of Requests:</h4>
Number of Requests: <div class="text-gray-200 ml-2">
</h4>
<div class="text-gray-600 dark:text-gray-200 ml-2">
{{ stats.requests }} {{ stats.requests }}
</div> </div>
</div> </div>
<div class="flex mt-2 ml-5 text-xl"> <div class="flex mt-2 ml-5 text-xl">
<h4 class="font-semibold text-gray-700 dark:text-gray-400"> <h4 class="font-semibold text-gray-400">
Number of Environments: Number of Environments:
</h4> </h4>
<div class="text-gray-600 dark:text-gray-200 ml-2"> <div class="text-gray-200 ml-2">
{{ stats.environments }} {{ stats.environments }}
</div> </div>
</div> </div>

34
packages/hoppscotch-sh-admin/src/pages/teams/index.vue
View File

@@ -1,10 +1,6 @@
<template> <template>
<div> <div>
<h3 <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Teams</h3>
class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
>
Teams
</h3>
<div class="flex flex-col"> <div class="flex flex-col">
<div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8"> <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-4 lg:-mx-8 lg:px-8">
@@ -12,24 +8,20 @@
<div class="sm:px-7 p-4"> <div class="sm:px-7 p-4">
<div v-if="showOptions" class="flex w-full items-center mb-7"> <div v-if="showOptions" class="flex w-full items-center mb-7">
<button <button
class="inline-flex mr-3 items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-700 dark:text-gray-400 dark:border-gray-800 border-2 border-gray-200 leading-none py-0" class="inline-flex mr-3 items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-400 border-gray-800 border-2 leading-none py-0"
> >
Last 30 days Last 30 days
<icon-lucide-chevron-down <icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
class="w-4 ml-1.5 text-gray-400 dark:text-gray-600"
/>
</button> </button>
<button <button
class="inline-flex items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-700 dark:text-gray-400 dark:border-gray-800 border-2 border-gray-200 leading-none py-0" class="inline-flex items-center h-8 pl-2.5 pr-2 rounded-md shadow text-gray-400 border-gray-800 border-2 leading-none py-0"
> >
Filter by Filter by
<icon-lucide-chevron-down <icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
class="w-4 ml-1.5 text-gray-400 dark:text-gray-600"
/>
</button> </button>
<router-link to="/teams/addteam"> <router-link to="/teams/addteam">
<button <button
class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow text-gray-200 dark:border-gray-800 border border-gray-200 leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800" class="inline-flex items-center bg-emerald-700 h-8 ml-3 pl-2.5 pr-2 rounded-md shadow border-gray-800 border leading-none py-0 hover:bg-emerald-700 focus:outline-none focus:bg-emerald-800"
> >
Create Team Create Team
</button> </button>
@@ -39,12 +31,12 @@
> >
<span class="mr-3">Page 2 of 4</span> <span class="mr-3">Page 2 of 4</span>
<button <button
class="inline-flex mr-2 items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-200 dark:border-gray-800 leading-none py-0" class="inline-flex mr-2 items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-800 leading-none py-0"
> >
<icon-lucide-chevron-left class="text-xl" /> <icon-lucide-chevron-left class="text-xl" />
</button> </button>
<button <button
class="inline-flex items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-200 dark:border-gray-800 leading-none py-0" class="inline-flex items-center h-8 w-8 justify-center text-gray-400 rounded-md shadow border border-gray-800 leading-none py-0"
> >
<icon-lucide-chevron-right class="text-xl" /> <icon-lucide-chevron-right class="text-xl" />
</button> </button>
@@ -53,9 +45,7 @@
<div> <div>
<table class="w-full text-left"> <table class="w-full text-left">
<thead> <thead>
<tr <tr class="text-gray-200 border-b border-gray-600 text-sm">
class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm"
>
<th class="font-normal px-3 pt-0 pb-3"></th> <th class="font-normal px-3 pt-0 pb-3"></th>
<th class="font-normal px-3 pt-0 pb-3">Team ID</th> <th class="font-normal px-3 pt-0 pb-3">Team ID</th>
<th class="font-normal px-3 pt-0 pb-3">Team Name</th> <th class="font-normal px-3 pt-0 pb-3">Team Name</th>
@@ -66,12 +56,12 @@
<th class="font-normal px-3 pt-0 pb-3">Date</th> <th class="font-normal px-3 pt-0 pb-3">Date</th>
</tr> </tr>
</thead> </thead>
<tbody class="text-gray-600 dark:text-gray-300"> <tbody class="text-gray-300">
<!-- <router-link :custom="true" class="" :to="'/team/detail'"> --> <!-- <router-link :custom="true" class="" :to="'/team/detail'"> -->
<tr <tr
v-for="team in teams" v-for="team in teams"
id="team.id" id="team.id"
class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl" class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
@click="goToTeam" @click="goToTeam"
> >
<td> <td>
@@ -92,7 +82,7 @@
</td> </td>
<td <td
class="sm:p-3 py-2 px-1 md:table-cell hidden text-sky-500 dark:text-sky-300" class="sm:p-3 py-2 px-1 md:table-cell hidden text-sky-300"
> >
{{ team.name }} {{ team.name }}
</td> </td>

30
packages/hoppscotch-sh-admin/src/pages/users/_id.vue
View File

@@ -1,11 +1,7 @@
<template> <template>
<div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div> <div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
<div v-else> <div v-else>
<h3 <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">User Details</h3>
class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
>
User Details
</h3>
<div> <div>
<div> <div>
@@ -21,41 +17,33 @@
<icon-lucide-user class="text-4xl" /> <icon-lucide-user class="text-4xl" />
</div> </div>
<div v-if="user.uid"> <div v-if="user.uid">
<label class="text-gray-800 dark:text-gray-200" for="username" <label class="text-gray-200" for="username">UID</label>
>UID</label
>
<div <div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500" class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
> >
{{ user.uid }} {{ user.uid }}
</div> </div>
</div> </div>
<div v-if="user.displayName"> <div v-if="user.displayName">
<label class="text-gray-800 dark:text-gray-200" for="username" <label class="text-gray-200" for="username">Name</label>
>Name</label
>
<div <div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500" class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
> >
{{ user.displayName }} {{ user.displayName }}
</div> </div>
</div> </div>
<div v-if="user.email"> <div v-if="user.email">
<label class="text-gray-800 dark:text-gray-200" for="username" <label class="text-gray-200" for="username">Email</label>
>Email</label
>
<div <div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500" class="w-full p-3 mt-2 bg-zinc-800 border-gray-200 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
> >
{{ user.email }} {{ user.email }}
</div> </div>
</div> </div>
<div v-if="user.createdOn"> <div v-if="user.createdOn">
<label class="text-gray-800 dark:text-gray-200" for="username" <label class="text-gray-200" for="username">Created On</label>
>Created On</label
>
<div <div
class="w-full p-3 mt-2 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500" class="w-full p-3 mt-2 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
> >
{{ getCreatedDateAndTime(user.createdOn) }} {{ getCreatedDateAndTime(user.createdOn) }}
</div> </div>

27
packages/hoppscotch-sh-admin/src/pages/users/index.vue
View File

@@ -1,10 +1,6 @@
<template> <template>
<div> <div>
<h3 <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Users</h3>
class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
>
Users
</h3>
<!-- Table List View for All Users --> <!-- Table List View for All Users -->
<div class="flex flex-col"> <div class="flex flex-col">
@@ -40,7 +36,7 @@
> >
<thead> <thead>
<tr <tr
class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm text-center" class="text-gray-200 border-b border-gray-600 text-sm text-center"
> >
<th class="font-normal px-3 pt-0 pb-3">User ID</th> <th class="font-normal px-3 pt-0 pb-3">User ID</th>
<th class="font-normal px-3 pt-0 pb-3">Name</th> <th class="font-normal px-3 pt-0 pb-3">Name</th>
@@ -50,11 +46,11 @@
</tr> </tr>
</thead> </thead>
<tbody class="text-gray-600 dark:text-gray-300"> <tbody class="text-gray-300">
<tr <tr
v-for="user in usersList" v-for="user in usersList"
:key="user.uid" :key="user.uid"
class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl" class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
> >
<td <td
@click="goToUserDetails(user)" @click="goToUserDetails(user)"
@@ -97,7 +93,7 @@
</td> </td>
<td <td
@click="goToUserDetails(user)" @click="goToUserDetails(user)"
class="sm:p-3 py-2 px-1 text-sky-500 dark:text-sky-300 text-center" class="sm:p-3 py-2 px-1 text-sky-300 text-center"
> >
{{ user.email }} {{ user.email }}
</td> </td>
@@ -131,17 +127,17 @@
> >
<div <div
v-show="activeUserId && activeUserId == user.uid" v-show="activeUserId && activeUserId == user.uid"
class="absolute right-0 z-20 w-28 mt-5 bg-zinc-200 dark:bg-zinc-800 rounded-md shadow-xl" class="absolute right-0 z-20 w-28 mt-5 bg-zinc-800 rounded-md shadow-xl"
> >
<button <button
v-if="!user.isAdmin" v-if="!user.isAdmin"
@click="makeUserAdmin(user.uid)" @click="makeUserAdmin(user.uid)"
class="block w-full h-10 px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-emerald-700 hover:text-white rounded-md" class="block w-full h-10 px-4 py-2 text-sm text-gray-200 hover:bg-emerald-700 hover:text-white rounded-md"
> >
Make admin Make admin
</button> </button>
<button <button
class="block w-full h-10 px-4 py-2 text-sm text-gray-800 dark:text-gray-200 hover:bg-red-700 hover:text-white rounded-md" class="block w-full h-10 px-4 py-2 text-sm text-gray-200 hover:bg-red-700 hover:text-white rounded-md"
@click="deleteUser(user.uid)" @click="deleteUser(user.uid)"
> >
Delete Delete
@@ -182,14 +178,11 @@
<div> <div>
<div class="my-4"> <div class="my-4">
<div> <div>
<label <label class="text-gray-200" for="emailAddress">
class="text-gray-800 dark:text-gray-200"
for="emailAddress"
>
Email Address Email Address
</label> </label>
<input <input
class="w-full p-3 mt-3 dark:bg-zinc-800 border-gray-200 dark:border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500" class="w-full p-3 mt-3 bg-zinc-800 border-gray-600 rounded-md focus:border-emerald-600 focus:ring focus:ring-opacity-40 focus:ring-emerald-500"
type="email" type="email"
v-model="email" v-model="email"
placeholder="Enter Email Address" placeholder="Enter Email Address"

16
packages/hoppscotch-sh-admin/src/pages/users/invited.vue
View File

@@ -1,8 +1,6 @@
<template> <template>
<div> <div>
<h3 <h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">
class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
>
Invited Users Invited Users
</h3> </h3>
@@ -21,7 +19,7 @@
<table v-else class="w-full text-left"> <table v-else class="w-full text-left">
<thead> <thead>
<tr <tr
class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm text-center" class="text-gray-200 border-b border-gray-600 text-sm text-center"
> >
<th class="font-normal px-3 pt-0 pb-3">Admin ID</th> <th class="font-normal px-3 pt-0 pb-3">Admin ID</th>
<th class="font-normal px-3 pt-0 pb-3">Admin Email</th> <th class="font-normal px-3 pt-0 pb-3">Admin Email</th>
@@ -32,10 +30,10 @@
<tbody <tbody
v-for="user in invitedUsers" v-for="user in invitedUsers"
id="user.id" id="user.id"
class="text-gray-600 dark:text-gray-300" class="text-gray-300"
> >
<tr <tr
class="border-b border-gray-300 dark:border-gray-600 hover:bg-zinc-800 rounded-xl" class="border-b border-gray-600 hover:bg-zinc-800 rounded-xl"
> >
<td class="sm:p-3 py-2 px-3 max-w-30"> <td class="sm:p-3 py-2 px-3 max-w-30">
<div class="flex justify-center"> <div class="flex justify-center">
@@ -44,14 +42,12 @@
</span> </span>
</div> </div>
</td> </td>
<td class="sm:p-3 py-2 px-1 text-sky-500 dark:text-sky-300"> <td class="sm:p-3 py-2 px-1 text-sky-300">
<div class="flex items-center justify-center"> <div class="flex items-center justify-center">
{{ user?.adminEmail }} {{ user?.adminEmail }}
</div> </div>
</td> </td>
<td <td class="sm:p-3 py-2 px-1 text-sky-300 text-center">
class="sm:p-3 py-2 px-1 text-sky-500 dark:text-sky-300 text-center"
>
{{ user?.inviteeEmail }} {{ user?.inviteeEmail }}
</td> </td>