streaper2/maaw
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enable member deletion and reject pending + bugs

Browse Source
This commit is contained in:
Michael Dausmann
2023-04-24 10:52:35 +10:00
parent a1b8d758f9
commit 577e79478e
9 changed files with 188 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@@ -42,7 +42,7 @@ Please don't hitch your wagon to this star just yet... I'm coding this in the op
- [x] Gen/Regen an invite link to allow users to join a team
- [x] Team administrators and owners can accept pending invites
- [x] Team administrators and owners can administer the permissions (roles) of other team members on the Accounts page
- [ ] Team owners can remove users from team
- [x] Team owners can remove users from team
### Plans and Pricing
- [x] Manage multiple Plans each with specific Feature flags and Plan limits
@@ -63,7 +63,6 @@ Please don't hitch your wagon to this star just yet... I'm coding this in the op
### Look and Feel, Design System and Customisation
- [x] Default UI isn't too crap
- [x] Integrated Design system including theming (Tailwind + daisyUI)
- [ ] Branding options (logo, color scheme, etc.)
### Demo Software (Notes)
- [x] Simple Text based Notes functionality
@@ -73,10 +72,6 @@ Please don't hitch your wagon to this star just yet... I'm coding this in the op
- [x] Max Notes enforced
- [x] Add, Delete notes on Dashboard
### Mobile App
- [ ] Flutter App Demo integrating with API endpoints, Auth etc
- [ ] Mobile-friendly web interface.
### Testing
- [ ] Unit tests for server functions
- [ ] Integration tests around subscription scenarios

7
components/AppHeader.vue
View File

@@ -52,11 +52,12 @@
<ul tabindex="0" class="mt-3 p-2 shadow menu menu-compact dropdown-content bg-base-100 rounded-box w-52">
<li v-if="user">{{ user.email }}</li>
<li><NuxtLink to="/account">Account</NuxtLink></li>
<li><a href="#" @click.prevent="signout()">logout</a></li>
<li><a href="#" @click.prevent="signout()">Signout</a></li>
<template v-if="dbUser?.memberships && dbUser?.memberships.length > 1">
<li>Switch Account</li>
<li v-for="membership in dbUser?.memberships" :disabled="membership.pending">
<a v-if="membership.account_id !== activeAccountId" href="#" @click="accountStore.changeActiveAccount(membership.account_id)">{{ membership.account.name }}<span v-if="membership.pending">(pending)</span></a>
<li v-for="membership in dbUser?.memberships">
<a v-if="membership.account_id !== activeAccountId && !membership.pending" href="#" @click="accountStore.changeActiveAccount(membership.account_id)">{{ membership.account.name }}</a>
<span v-if="membership.pending">{{ membership.account.name }} (pending)</span>
</li>
</template>
</ul>

19
lib/services/account.service.ts
View File

@@ -92,6 +92,25 @@ export default class AccountService {
})
}
async deleteMembership(account_id: number, membership_id: number): Promise<MembershipWithAccount> {
const membership = prisma_client.membership.findFirstOrThrow({
where: {
id: membership_id
}
});
if((await membership).account_id != account_id){
throw new Error(`Membership does not belong to current account`);
}
return await prisma_client.membership.delete({
where: {
id: membership_id,
},
...membershipWithAccount
})
}
async joinUserToAccount(user_id: number, account_id: number, pending: boolean ): Promise<MembershipWithAccount> {
const account = await prisma_client.account.findUnique({
where: {

156
pages/account.vue
View File

@@ -13,79 +13,107 @@
await accountStore.getActiveAccountMembers();
});
function formatDate(date: Date | undefined){
if(!date){ return ""; }
return new Intl.DateTimeFormat('default', {dateStyle: 'long'}).format(date);
function formatDate(date: Date | undefined) {
if (!date) { return ""; }
return new Intl.DateTimeFormat('default', { dateStyle: 'long' }).format(date);
}
function joinURL(){
function joinURL() {
return `${config.public.siteRootUrl}/join/${activeMembership.value?.account.join_password}`;
}
</script>
<template>
<div class="container mx-auto p-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl mb-4">Account Information</h2>
</div>
<div class="flex flex-col gap-4">
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Account Name:</span>
<span>{{ activeMembership?.account.name }}</span>
<template v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access === ACCOUNT_ACCESS.ADMIN)">
<input v-model="newAccountName" type="text" class="p-2 border border-gray-400 rounded w-1/3" placeholder="Enter new name">
<button @click.prevent="accountStore.changeAccountName(newAccountName)" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">Change Name</button>
</template>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Current Period Ends:</span>
<span>{{ formatDate(activeMembership?.account.current_period_ends) }}</span>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Permitted Features:</span>
<div class="flex flex-wrap gap-2">
<span v-for="feature in activeMembership?.account.features" class="bg-gray-200 text-gray-700 font-semibold py-1 px-2 rounded-full">{{ feature }}</span>
</div>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Maximum Notes:</span>
<span>{{ activeMembership?.account.max_notes }}</span>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Access Level:</span>
<span class="bg-green-500 text-white font-semibold py-1 px-2 rounded-full">{{ activeMembership?.access }}</span>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Plan:</span>
<span>{{ activeMembership?.account.plan_name }}</span>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Join Link:</span>
<div class="flex gap-2 items-center">
<input disabled type="text" class="p-2 border border-gray-400 rounded w-full" :value="joinURL()">
<button @click.prevent="accountStore.rotateJoinPassword()" v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access === ACCOUNT_ACCESS.ADMIN)" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">ReGen</button>
</div>
<div class="container mx-auto p-6">
<div class="text-center mb-12">
<h2 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl mb-4">Account Information
</h2>
</div>
<div class="flex flex-col gap-4">
<h2 class="text-lg font-bold">Members</h2>
<div class="flex flex-col gap-2">
<div v-for="accountMember in activeAccountMembers" class="flex gap-4 items-center">
<span>{{ accountMember.user.display_name }}</span>
<span class="bg-green-500 text-white font-semibold py-1 px-2 rounded-full">{{ accountMember.access }}</span>
<span class="text-gray-500">({{ accountMember.user.email }})</span>
<button @click.prevent="" v-if="activeMembership && activeMembership.access === ACCOUNT_ACCESS.OWNER && accountMember.access !== ACCOUNT_ACCESS.OWNER" class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">Remove</button>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Account Name:</span>
<span>{{ activeMembership?.account.name }}</span>
<template
v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access === ACCOUNT_ACCESS.ADMIN)">
<input v-model="newAccountName" type="text" class="p-2 border border-gray-400 rounded w-1/3"
placeholder="Enter new name">
<button @click.prevent="accountStore.changeAccountName(newAccountName)"
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded">Change Name</button>
</template>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Current Period Ends:</span>
<span>{{ formatDate(activeMembership?.account.current_period_ends) }}</span>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Permitted Features:</span>
<div class="flex flex-wrap gap-2">
<span v-for="feature in activeMembership?.account.features"
class="bg-gray-200 text-gray-700 font-semibold py-1 px-2 rounded-full">{{ feature }}</span>
</div>
</div>
</div>
</div>
</div>
</template>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Maximum Notes:</span>
<span>{{ activeMembership?.account.max_notes }}</span>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Access Level:</span>
<span class="bg-green-500 text-white font-semibold py-1 px-2 rounded-full">{{ activeMembership?.access }}</span>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Plan:</span>
<span>{{ activeMembership?.account.plan_name }}</span>
</div>
<div class="flex gap-4 items-center">
<span class="font-bold w-32">Join Link:</span>
<div class="flex gap-2 items-center">
<input disabled type="text" class="p-2 border border-gray-400 rounded w-full" :value="joinURL()">
<button @click.prevent="accountStore.rotateJoinPassword()"
v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access === ACCOUNT_ACCESS.ADMIN)"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">ReGen</button>
</div>
</div>
<div class="flex flex-col gap-4">
<h2 class="text-lg font-bold">Members</h2>
<div class="flex flex-col gap-2">
<div v-for="accountMember in activeAccountMembers" class="flex gap-4 items-center">
<span>{{ accountMember.user.display_name }}</span>
<span class="bg-green-500 text-white font-semibold py-1 px-2 rounded-full">{{ accountMember.access }}</span>
<span class="text-gray-500">({{ accountMember.user.email }})</span>
<button @click.prevent="accountStore.acceptPendingMembership(accountMember.id)"
v-if="accountMember.pending && activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access === ACCOUNT_ACCESS.ADMIN)"
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Accept Pending Membership
</button>
<button @click.prevent="accountStore.rejectPendingMembership(accountMember.id)"
v-if="accountMember.pending && activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access === ACCOUNT_ACCESS.ADMIN)"
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Reject Pending Membership
</button>
<button @click.prevent="accountStore.changeUserAccessWithinAccount(accountMember.user.id, ACCOUNT_ACCESS.READ_WRITE)"
v-if="activeMembership && (activeMembership.access === ACCOUNT_ACCESS.OWNER || activeMembership.access === ACCOUNT_ACCESS.ADMIN) && accountMember.access === ACCOUNT_ACCESS.READ_ONLY && !accountMember.pending"
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Promote to Read/Write
</button>
<button @click.prevent="accountStore.changeUserAccessWithinAccount(accountMember.user.id, ACCOUNT_ACCESS.ADMIN)"
v-if="activeMembership && activeMembership.access === ACCOUNT_ACCESS.OWNER && accountMember.access === ACCOUNT_ACCESS.READ_WRITE && !accountMember.pending"
class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Promote to Admin
</button>
<button @click.prevent="accountStore.deleteMembership(accountMember.id)"
v-if="activeMembership && activeMembership.access === ACCOUNT_ACCESS.OWNER && accountMember.access !== ACCOUNT_ACCESS.OWNER && !accountMember.pending"
class="bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline-blue">
Remove
</button>
</div>
</div>
</div>
</div>
</div></template>

3
pages/join/[join_password].vue
View File

@@ -19,6 +19,7 @@
async function doJoin() {
if (account) {
await accountStore.joinUserToAccountPending(account.id);
navigateTo('/dashboard', {replace: true})
} else {
console.log(`Unable to Join`)
}
@@ -27,7 +28,7 @@
<template>
<div class="py-10 px-4 sm:px-6 lg:px-8">
<div class="max-w-md mx-auto">
<h2 class="text-3xl font-extrabold text-gray-900">Request to Join Bob's Team</h2>
<h2 class="text-3xl font-extrabold text-gray-900">Request to Join {{ account?.name }}</h2>
<template v-if="dbUser?.dbUser">
<p class="mt-2 text-sm text-gray-500">
Click below to request to Join the team.

25
server/trpc/routers/account.router.ts
View File

@@ -1,4 +1,5 @@
import { router, adminProcedure, publicProcedure, protectedProcedure } from '../trpc'
import { TRPCError } from '@trpc/server';
import { router, adminProcedure, publicProcedure, protectedProcedure, ownerProcedure } from '../trpc'
import { ACCOUNT_ACCESS } from '@prisma/client';
import { z } from 'zod';
import AccountService from '~~/lib/services/account.service';
@@ -23,6 +24,10 @@ export const accountRouter = router({
changeActiveAccount: protectedProcedure
.input(z.object({ account_id: z.number() }))
.mutation(async ({ ctx, input }) => {
const activeMembership = ctx.dbUser?.memberships.find(membership => membership.account_id == input.account_id);
if(activeMembership?.pending){
throw new TRPCError({ code: 'BAD_REQUEST', message:`membership ${activeMembership?.id} is not active so cannot be switched to` });
}
ctx.activeAccountId = input.account_id;
setCookie(ctx.event, 'preferred-active-account-id', input.account_id.toString(), {expires: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 10)});
}),
@@ -70,6 +75,24 @@ export const accountRouter = router({
membership,
}
}),
rejectPendingMembership: adminProcedure
.input(z.object({ membership_id: z.number() }))
.query(async ({ ctx, input }) => {
const accountService = new AccountService();
const membership: MembershipWithAccount = await accountService.deleteMembership(ctx.activeAccountId!, input.membership_id);
return {
membership,
}
}),
deleteMembership: ownerProcedure
.input(z.object({ membership_id: z.number() }))
.query(async ({ ctx, input }) => {
const accountService = new AccountService();
const membership: MembershipWithAccount = await accountService.deleteMembership(ctx.activeAccountId!, input.membership_id);
return {
membership,
}
}),
changeUserAccessWithinAccount: adminProcedure
.input(z.object({ user_id: z.number(), access: z.enum([ACCOUNT_ACCESS.ADMIN, ACCOUNT_ACCESS.OWNER, ACCOUNT_ACCESS.READ_ONLY, ACCOUNT_ACCESS.READ_WRITE]) }))
.mutation(async ({ ctx, input }) => {

8
server/trpc/routers/notes.router.ts
View File

@@ -1,9 +1,9 @@
import NotesService from '~~/lib/services/notes.service';
import { protectedProcedure, publicProcedure, router } from '../trpc';
import { memberProcedure, protectedProcedure, publicProcedure, router } from '../trpc';
import { z } from 'zod';
export const notesRouter = router({
getForCurrentUser: protectedProcedure
getForCurrentUser: memberProcedure
.query(async ({ ctx, input }) => {
const notesService = new NotesService();
const notes = (ctx.activeAccountId)?await notesService.getNotesForAccountId(ctx.activeAccountId):[];
@@ -20,7 +20,7 @@ export const notesRouter = router({
note,
}
}),
createNote: protectedProcedure
createNote: memberProcedure
.input(z.object({ note_text: z.string() }))
.mutation(async ({ ctx, input }) => {
const notesService = new NotesService();
@@ -29,7 +29,7 @@ export const notesRouter = router({
note,
}
}),
deleteNote: protectedProcedure
deleteNote: memberProcedure
.input(z.object({ note_id: z.number() }))
.mutation(async ({ ctx, input }) => {
const notesService = new NotesService();

26
server/trpc/trpc.ts
View File

@@ -30,6 +30,18 @@ const isAuthed = t.middleware(({ next, ctx }) => {
});
});
const isMemberForInputAccountId = t.middleware(({ next, rawInput, ctx }) => {
if (!ctx.dbUser || !ctx.activeAccountId) {
throw new TRPCError({ code: 'UNAUTHORIZED' });
}
const activeMembership = ctx.dbUser.memberships.find(membership => membership.account_id == ctx.activeAccountId);
if(!activeMembership || activeMembership.pending) {
throw new TRPCError({ code: 'UNAUTHORIZED', message:`membership ${activeMembership?.id} is not active` });
}
return next({ ctx });
});
const isAdminForInputAccountId = t.middleware(({ next, rawInput, ctx }) => {
if (!ctx.dbUser || !ctx.activeAccountId) {
throw new TRPCError({ code: 'UNAUTHORIZED' });
@@ -42,11 +54,25 @@ const isAdminForInputAccountId = t.middleware(({ next, rawInput, ctx }) => {
return next({ ctx });
});
const isOwnerForInputAccountId = t.middleware(({ next, rawInput, ctx }) => {
if (!ctx.dbUser || !ctx.activeAccountId) {
throw new TRPCError({ code: 'UNAUTHORIZED' });
}
const activeMembership = ctx.dbUser.memberships.find(membership => membership.account_id == ctx.activeAccountId);
if(!activeMembership || activeMembership?.access !== ACCOUNT_ACCESS.OWNER) {
throw new TRPCError({ code: 'UNAUTHORIZED', message:`activeMembership ${activeMembership?.id} is only ${activeMembership?.access}` });
}
return next({ ctx });
});
/**
* Procedures
**/
export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(isAuthed);
export const memberProcedure = protectedProcedure.use(isMemberForInputAccountId);
export const adminProcedure = protectedProcedure.use(isAdminForInputAccountId);
export const ownerProcedure = protectedProcedure.use(isOwnerForInputAccountId);
export const router = t.router;
export const middleware = t.middleware;

16
stores/account.store.ts
View File

@@ -96,6 +96,22 @@ export const useAccountStore = defineStore('account', {
}
}
},
async rejectPendingMembership(membership_id: number){
const { $client } = useNuxtApp();
const { data: membership } = await $client.account.rejectPendingMembership.useQuery({ membership_id });
if(membership.value){
this.activeAccountMembers = this.activeAccountMembers.filter(m => m.id !== membership_id);
}
},
async deleteMembership(membership_id: number){
const { $client } = useNuxtApp();
const { data: membership } = await $client.account.deleteMembership.useQuery({ membership_id });
if(membership.value){
this.activeAccountMembers = this.activeAccountMembers.filter(m => m.id !== membership_id);
}
},
async rotateJoinPassword(){
const { $client } = useNuxtApp();
const { account } = await $client.account.rotateJoinPassword.mutate();