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

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

@@ -1,77 +1,57 @@
<template>
<div class="sm:px-6 p-4">
<h3 class="text-3xl font-medium text-gray-800 dark:text-gray-200 mb-6">
Dashboard
</h3>
<h3 class="text-3xl font-medium text-gray-200 mb-6">Dashboard</h3>
<div class="mt-4">
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
<div class="w-full">
<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" />
<div class="mx-5">
<h4
class="text-2xl font-semibold text-gray-700 dark:text-gray-200"
>
1000
</h4>
<div class="text-gray-600 dark:text-gray-400">Total Users</div>
<h4 class="text-2xl font-semibold text-gray-200">1000</h4>
<div class="text-gray-400">Total Users</div>
</div>
</div>
</div>
<div class="w-full">
<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" />
<div class="mx-5">
<h4
class="text-2xl font-semibold text-gray-700 dark:text-gray-200"
>
200
</h4>
<div class="text-gray-600 dark:text-gray-400">Total Teams</div>
<h4 class="text-2xl font-semibold text-gray-200">200</h4>
<div class="text-gray-400">Total Teams</div>
</div>
</div>
</div>
<div class="w-full">
<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" />
<div class="mx-5">
<h4
class="text-2xl font-semibold text-gray-700 dark:text-gray-200"
>
20
</h4>
<div class="text-gray-600 dark:text-gray-400">Total Roles</div>
<h4 class="text-2xl font-semibold text-gray-200">20</h4>
<div class="text-gray-400">Total Roles</div>
</div>
</div>
</div>
<div class="w-full">
<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" />
<div class="mx-5">
<h4
class="text-2xl font-semibold text-gray-700 dark:text-gray-200"
>
215
</h4>
<div class="text-gray-600 dark:text-gray-400">
Total Collections
</div>
<h4 class="text-2xl font-semibold text-gray-200">215</h4>
<div class="text-gray-400">Total Collections</div>
</div>
</div>
</div>

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

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

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

@@ -1,7 +1,5 @@
<template>
<h3 class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200">
Create Team
</h3>
<h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Create Team</h3>
<div>
<div>
@@ -9,13 +7,11 @@
<form>
<div class="flex mt-4 ml-10">
<div>
<label
class="text-gray-800 dark:text-gray-200 mr-5 text-lg"
for="username"
<label class="text-gray-200 mr-5 text-lg" for="username"
>Name:
</label>
<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"
placeholder="Enter Name"
/>

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

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

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

@@ -1,10 +1,6 @@
<template>
<div>
<h3
class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
>
Teams
</h3>
<h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Teams</h3>
<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">
@@ -12,24 +8,20 @@
<div class="sm:px-7 p-4">
<div v-if="showOptions" class="flex w-full items-center mb-7">
<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
<icon-lucide-chevron-down
class="w-4 ml-1.5 text-gray-400 dark:text-gray-600"
/>
<icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
</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
<icon-lucide-chevron-down
class="w-4 ml-1.5 text-gray-400 dark:text-gray-600"
/>
<icon-lucide-chevron-down class="w-4 ml-1.5 text-gray-600" />
</button>
<router-link to="/teams/addteam">
<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
</button>
@@ -39,12 +31,12 @@
>
<span class="mr-3">Page 2 of 4</span>
<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" />
</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" />
</button>
@@ -53,9 +45,7 @@
<div>
<table class="w-full text-left">
<thead>
<tr
class="text-zinc-900 dark:text-gray-200 border-b border-gray-300 dark:border-gray-600 text-sm"
>
<tr class="text-gray-200 border-b 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">Team ID</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>
</tr>
</thead>
<tbody class="text-gray-600 dark:text-gray-300">
<tbody class="text-gray-300">
<!-- <router-link :custom="true" class="" :to="'/team/detail'"> -->
<tr
v-for="team in teams"
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"
>
<td>
@@ -92,7 +82,7 @@
</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 }}
</td>

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

@@ -1,11 +1,7 @@
<template>
<div v-if="fetching" class="flex justify-center"><HoppSmartSpinner /></div>
<div v-else>
<h3
class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
>
User Details
</h3>
<h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">User Details</h3>
<div>
<div>
@@ -21,41 +17,33 @@
<icon-lucide-user class="text-4xl" />
</div>
<div v-if="user.uid">
<label class="text-gray-800 dark:text-gray-200" for="username"
>UID</label
>
<label class="text-gray-200" for="username">UID</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"
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 }}
</div>
</div>
<div v-if="user.displayName">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Name</label
>
<label class="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"
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 }}
</div>
</div>
<div v-if="user.email">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Email</label
>
<label class="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"
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 }}
</div>
</div>
<div v-if="user.createdOn">
<label class="text-gray-800 dark:text-gray-200" for="username"
>Created On</label
>
<label class="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"
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) }}
</div>

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

@@ -1,10 +1,6 @@
<template>
<div>
<h3
class="sm:px-6 p-4 text-3xl font-medium text-zinc-800 dark:text-gray-200"
>
Users
</h3>
<h3 class="sm:px-6 p-4 text-3xl font-medium text-gray-200">Users</h3>
<!-- Table List View for All Users -->
<div class="flex flex-col">
@@ -40,7 +36,7 @@
>
<thead>
<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">Name</th>
@@ -50,11 +46,11 @@
</tr>
</thead>
<tbody class="text-gray-600 dark:text-gray-300">
<tbody class="text-gray-300">
<tr
v-for="user in usersList"
: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
@click="goToUserDetails(user)"
@@ -97,7 +93,7 @@
</td>
<td
@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 }}
</td>
@@ -131,17 +127,17 @@
>
<div
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
v-if="!user.isAdmin"
@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
</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)"
>
Delete
@@ -182,14 +178,11 @@
<div>
<div class="my-4">
<div>
<label
class="text-gray-800 dark:text-gray-200"
for="emailAddress"
>
<label class="text-gray-200" for="emailAddress">
Email Address
</label>
<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"
v-model="email"
placeholder="Enter Email Address"

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

@@ -1,8 +1,6 @@
<template>
<div>
<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">
Invited Users
</h3>
@@ -21,7 +19,7 @@
<table v-else class="w-full text-left">
<thead>
<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 Email</th>
@@ -32,10 +30,10 @@
<tbody
v-for="user in invitedUsers"
id="user.id"
class="text-gray-600 dark:text-gray-300"
class="text-gray-300"
>
<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">
<div class="flex justify-center">
@@ -44,14 +42,12 @@
</span>
</div>
</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">
{{ user?.adminEmail }}
</div>
</td>
<td
class="sm:p-3 py-2 px-1 text-sky-500 dark:text-sky-300 text-center"
>
<td class="sm:p-3 py-2 px-1 text-sky-300 text-center">
{{ user?.inviteeEmail }}
</td>