diff --git a/components/TeamListItem.tsx b/components/TeamListItem.tsx deleted file mode 100644 index c5cb1814..00000000 --- a/components/TeamListItem.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { ChevronDownIcon, ChevronUpIcon, UserAddIcon, TrashIcon, UsersIcon } from "@heroicons/react/outline"; - -export default function TeamListItem(props) { - return (
  • -
    -
    - -
    - {props.team.userRole === "Owner" && } - {props.team.userRole !== "Owner" && {props.team.name}} - {props.team.userRole} -
    -
    - {props.team.userRole === 'Invitee' &&
    - - -
    } - {props.team.userRole === 'Member' &&
    - -
    } -
    - {/*{props.team.userRole === 'Owner' && expanded &&
    - {props.team.members.length > 0 &&
    -

    Members

    - - - {props.team.members.map( (member) => - - - - )} - -
    Alex van Andel ({ member.email })Owner - -
    -
    } - - -
    }*/} -
    • ); -} \ No newline at end of file diff --git a/components/team/EditTeamModal.tsx b/components/team/EditTeamModal.tsx new file mode 100644 index 00000000..b03fdb99 --- /dev/null +++ b/components/team/EditTeamModal.tsx @@ -0,0 +1,99 @@ +import {useEffect, useState} from "react"; +import {UsersIcon,UserRemoveIcon} from "@heroicons/react/outline"; +import {useSession} from "next-auth/client"; + +export default function EditTeamModal(props) { + + const [ session, loading ] = useSession(); + const [ members, setMembers ] = useState([]); + const [ checkedDisbandTeam, setCheckedDisbandTeam ] = useState(false); + + const loadMembers = () => fetch('/api/teams/' + props.team.id + '/membership') + .then( (res: any) => res.json() ).then( (data) => setMembers(data.members) ); + + useEffect( () => { + loadMembers(); + }, []); + + const deleteTeam = (e) => { + e.preventDefault(); + return fetch('/api/teams/' + props.team.id, { + method: 'DELETE', + }).then(props.onExit); + } + + const removeMember = (member) => { + return fetch('/api/teams/' + props.team.id + '/membership', { + method: 'DELETE', + body: JSON.stringify({ userId: member.id }), + headers: { + 'Content-Type': 'application/json' + } + }).then(loadMembers); + } + + return (
    +
    + + + + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + {members.length > 0 &&
    +
    +

    Members

    +
    + + + {members.map( (member) => + + + + )} + +
    {member.name} {member.name && '(' + member.email + ')' }{!member.name && member.email}{member.role.toLowerCase()} + {member.email !== session.user.email && + + } +
    +
    } +
    +
    +

    Tick the box to disband this team.

    + +
    +
    +
    + {!checkedDisbandTeam && } + {checkedDisbandTeam && } + +
    +
    +
    +
    +
    ); +} \ No newline at end of file diff --git a/components/team/MemberInvitationModal.tsx b/components/team/MemberInvitationModal.tsx new file mode 100644 index 00000000..e4472b09 --- /dev/null +++ b/components/team/MemberInvitationModal.tsx @@ -0,0 +1,75 @@ +import {useEffect, useState} from "react"; +import {UsersIcon} from "@heroicons/react/outline"; + +export default function MemberInvitationModal(props) { + + const inviteMember = (e) => { + + e.preventDefault(); + + const payload = { + role: e.target.elements['role'].value, + usernameOrEmail: e.target.elements['inviteUser'].value, + sendEmailInvitation: e.target.elements['sendInviteEmail'].checked, + } + + return fetch('/api/teams/' + props.team.id + '/invite', { + method: 'POST', + body: JSON.stringify(payload), + headers: { + 'Content-Type': 'application/json' + } + }).then(props.onExit); + }; + + return (
    +
    + + + + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    +
    + + +
    +
    + + +
    +
    + +
    +
    +
    + + +
    +
    +
    +
    +
    ); +} \ No newline at end of file diff --git a/components/team/TeamList.tsx b/components/team/TeamList.tsx new file mode 100644 index 00000000..b0dc52ba --- /dev/null +++ b/components/team/TeamList.tsx @@ -0,0 +1,39 @@ +import {useEffect, useState} from "react"; +import TeamListItem from "./TeamListItem"; +import EditTeamModal from "./EditTeamModal"; +import MemberInvitationModal from "./MemberInvitationModal"; + +export default function TeamList(props) { + + const [ showMemberInvitationModal, setShowMemberInvitationModal ] = useState(false); + const [ showEditTeamModal, setShowEditTeamModal ] = useState(false); + const [ team, setTeam ] = useState(null); + + const selectAction = (action: string, team: any) => { + setTeam(team); + switch (action) { + case 'edit': + setShowEditTeamModal(true); + break; + case 'invite': + setShowMemberInvitationModal(true); + break; + } + }; + + return (
    + + {showEditTeamModal && setShowEditTeamModal(false)}>} + {showMemberInvitationModal && + setShowMemberInvitationModal(false)}> + } +
    ); +} \ No newline at end of file diff --git a/components/team/TeamListItem.tsx b/components/team/TeamListItem.tsx new file mode 100644 index 00000000..c2308ea3 --- /dev/null +++ b/components/team/TeamListItem.tsx @@ -0,0 +1,76 @@ +import {CogIcon, TrashIcon, UserAddIcon, UsersIcon} from "@heroicons/react/outline"; +import Dropdown from "../ui/Dropdown"; +import {useState} from "react"; + +export default function TeamListItem(props) { + + const [ team, setTeam ] = useState(props.team); + + const acceptInvite = () => invitationResponse(true); + const declineInvite = () => invitationResponse(false); + + const invitationResponse = (accept: boolean) => fetch('/api/user/membership', { + method: accept ? 'PATCH' : 'DELETE', + body: JSON.stringify({ teamId: props.team.id }), + headers: { + 'Content-Type': 'application/json' + } + }).then( () => { + // success + setTeam(null); + }); + + return (team &&
  • +
    +
    + +
    + {props.team.name} + {props.team.role.toLowerCase()} +
    +
    + {props.team.role === 'INVITEE' &&
    + + +
    } + {props.team.role === 'MEMBER' &&
    + +
    } + {props.team.role === 'OWNER' &&
    + + + + +
    } +
    + {/*{props.team.userRole === 'Owner' && expanded &&
    + {props.team.members.length > 0 &&
    +

    Members

    + + + {props.team.members.map( (member) => + + + + )} + +
    Alex van Andel ({ member.email })Owner + +
    +
    } + + +
    }*/} +
    • ); +} \ No newline at end of file diff --git a/components/ui/Dropdown.tsx b/components/ui/Dropdown.tsx new file mode 100644 index 00000000..7cf8c97e --- /dev/null +++ b/components/ui/Dropdown.tsx @@ -0,0 +1,19 @@ +import {useEffect, useState} from "react"; + +export default function Dropdown(props) { + + const [ open, setOpen ] = useState(false); + + useEffect( () => { + document.addEventListener('keyup', (e) => { + if (e.key === "Escape") { + setOpen(false); + } + }); + }, [open]); + + return (
    setOpen(!open)} {...props}> + {props.children[0]} + {open && props.children[1]} +
    ); +} \ No newline at end of file diff --git a/lib/emails/invitation.ts b/lib/emails/invitation.ts new file mode 100644 index 00000000..bd4ed79d --- /dev/null +++ b/lib/emails/invitation.ts @@ -0,0 +1,77 @@ + +import {serverConfig} from "../serverConfig"; +import nodemailer from 'nodemailer'; + +export default function createInvitationEmail(data: any, options: any = {}) { + return sendEmail(data, { + provider: { + transport: serverConfig.transport, + from: serverConfig.from, + }, + ...options + }); +} + +const sendEmail = (invitation: any, { + provider, +}) => new Promise( (resolve, reject) => { + const { transport, from } = provider; + + nodemailer.createTransport(transport).sendMail( + { + from: `Calendso <${from}>`, + to: invitation.toEmail, + subject: `${invitation.from} invited you to join ${invitation.teamName}`, + html: html(invitation), + text: text(invitation), + }, + (error) => { + if (error) { + console.error("SEND_INVITATION_NOTIFICATION_ERROR", invitation.toEmail, error); + return reject(new Error(error)); + } + return resolve(); + }); +}); + +const html = (invitation: any) => ` + + + + +
    +
    + + + + +
    + Hi,
    +
    + ${invitation.from} invited you to join the team "${invitation.teamName}" in Calendso.
    +
    + + + + +
    +
    + + Join team + +
    +

    + If you prefer not to use "${invitation.toEmail}" as your Calendso email or already have a Calendso account, please request another invitation to that email. +
    +
    +
    +`; + +// just strip all HTML and convert
    to \n +const text = (evt: any) => html(evt).replace('
    ', "\n").replace(/<[^>]+>/g, ''); \ No newline at end of file diff --git a/pages/api/teams.ts b/pages/api/teams.ts new file mode 100644 index 00000000..abd96c3d --- /dev/null +++ b/pages/api/teams.ts @@ -0,0 +1,35 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import prisma from '../../lib/prisma'; +import {getSession} from "next-auth/client"; +import {create} from "domain"; + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + + const session = await getSession({req: req}); + + if (!session) { + res.status(401).json({message: "Not authenticated"}); + return; + } + + if (req.method === "POST") { + const createTeam = await prisma.team.create({ + data: { + name: req.body.name, + }, + }); + + const createMembership = await prisma.membership.create({ + data: { + teamId: createTeam.id, + userId: session.user.id, + role: 'OWNER', + accepted: true, + } + }); + + return res.status(201).setHeader('Location', 'https://calendso.alexvanandel.com/api/teams/1').send(null); + } + + res.status(404).send(null); +} diff --git a/pages/api/teams/[team]/index.ts b/pages/api/teams/[team]/index.ts new file mode 100644 index 00000000..3fde85bc --- /dev/null +++ b/pages/api/teams/[team]/index.ts @@ -0,0 +1,26 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import prisma from '../../../../lib/prisma'; +import {getSession} from "next-auth/client"; + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + + const session = await getSession({req: req}); + if (!session) { + return res.status(401).json({message: "Not authenticated"}); + } + + // DELETE /api/teams/{team} + if (req.method === "DELETE") { + const deleteMembership = await prisma.membership.delete({ + where: { + userId_teamId: { userId: session.user.id, teamId: parseInt(req.query.team) } + } + }); + const deleteTeam = await prisma.team.delete({ + where: { + id: parseInt(req.query.team), + }, + }); + return res.status(204).send(null); + } +} \ No newline at end of file diff --git a/pages/api/teams/[team]/invite.ts b/pages/api/teams/[team]/invite.ts new file mode 100644 index 00000000..d8170401 --- /dev/null +++ b/pages/api/teams/[team]/invite.ts @@ -0,0 +1,59 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import prisma from '../../../../lib/prisma'; +import createInvitationEmail from "../../../../lib/emails/invitation"; +import {getSession} from "next-auth/client"; + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + + if (req.method !== "POST") { + return res.status(400).json({ message: "Bad request" }); + } + + const session = await getSession({req: req}); + if (!session) { + return res.status(401).json({message: "Not authenticated"}); + } + + const team = await prisma.team.findFirst({ + where: { + id: parseInt(req.query.team) + } + }); + + if (!team) { + return res.status(404).json({message: "Unable to find team to invite user to."}); + } + + const invitee = await prisma.user.findFirst({ + where: { + OR: [ + { username: req.body.usernameOrEmail }, + { email: req.body.usernameOrEmail } + ] + } + }); + + if (!invitee) { + return res.status(404).json({message: "Missing user, currently unsupported."}); + } + + // create provisional membership + const createMembership = await prisma.membership.create({ + data: { + teamId: parseInt(req.query.team), + userId: invitee.id, + role: req.body.role, + }, + }); + + // inform user of membership by email + if (req.body.sendEmailInvitation) { + createInvitationEmail({ + toEmail: invitee.email, + from: session.user.name, + teamName: team.name + }); + } + + res.status(201).json({}); +} diff --git a/pages/api/teams/[team]/membership.ts b/pages/api/teams/[team]/membership.ts new file mode 100644 index 00000000..19d93abe --- /dev/null +++ b/pages/api/teams/[team]/membership.ts @@ -0,0 +1,67 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import prisma from '../../../../lib/prisma'; +import {getSession} from "next-auth/client"; + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + + const session = await getSession({req}); + + if (!session) { + res.status(401).json({message: "Not authenticated"}); + return; + } + + const isTeamOwner = !!await prisma.membership.findFirst({ + where: { + userId: session.user.id, + teamId: parseInt(req.query.team), + role: 'OWNER' + } + }); + + if ( ! isTeamOwner) { + res.status(403).json({message: "You are not authorized to manage this team"}); + return; + } + + // List members + if (req.method === "GET") { + const memberships = await prisma.membership.findMany({ + where: { + teamId: parseInt(req.query.team), + } + }); + + let members = await prisma.user.findMany({ + where: { + id: { + in: memberships.map( (membership) => membership.userId ), + } + } + }); + + members = members.map( (member) => { + const membership = memberships.find( (membership) => member.id === membership.userId ); + return { + ...member, + role: membership.accepted ? membership.role : 'INVITEE', + } + }); + + return res.status(200).json({ members: members }); + } + + // Cancel a membership (invite) + if (req.method === "DELETE") { + const memberships = await prisma.membership.delete({ + where: { + userId_teamId: { userId: req.body.userId, teamId: parseInt(req.query.team) }, + } + }); + return res.status(204).send(null); + } + + // Promote or demote a member of the team + + res.status(200).json({}); +} diff --git a/pages/api/user/membership.ts b/pages/api/user/membership.ts new file mode 100644 index 00000000..d05ae5b3 --- /dev/null +++ b/pages/api/user/membership.ts @@ -0,0 +1,62 @@ +import type { NextApiRequest, NextApiResponse } from 'next'; +import prisma from '../../../lib/prisma'; +import { getSession } from "next-auth/client"; + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + + const session = await getSession({req: req}); + if (!session) { + return res.status(401).json({message: "Not authenticated"}); + } + + if (req.method === "GET") { + const memberships = await prisma.membership.findMany({ + where: { + userId: session.user.id, + } + }); + + const teams = await prisma.team.findMany({ + where: { + id: { + in: memberships.map(membership => membership.teamId), + } + } + }); + + return res.status(200).json({ + membership: memberships.map((membership) => ({ + role: membership.accepted ? membership.role : 'INVITEE', + ...teams.find(team => team.id === membership.teamId) + })) + }); + } + + if (!req.body.teamId) { + return res.status(400).json({ message: "Bad request" }); + } + + // Leave team or decline membership invite of current user + if (req.method === "DELETE") { + const memberships = await prisma.membership.delete({ + where: { + userId_teamId: { userId: session.user.id, teamId: req.body.teamId } + } + }); + return res.status(204).send(null); + } + + // Accept team invitation + if (req.method === "PATCH") { + const memberships = await prisma.membership.update({ + where: { + userId_teamId: { userId: session.user.id, teamId: req.body.teamId } + }, + data: { + accepted: true + } + }); + + return res.status(204).send(null); + } +} \ No newline at end of file diff --git a/pages/settings/teams.tsx b/pages/settings/teams.tsx index 2ae8954c..840c1bec 100644 --- a/pages/settings/teams.tsx +++ b/pages/settings/teams.tsx @@ -3,41 +3,47 @@ import prisma from '../../lib/prisma'; import Modal from '../../components/Modal'; import Shell from '../../components/Shell'; import SettingsShell from '../../components/Settings'; -import { useState } from 'react'; +import {useEffect, useState} from 'react'; import { useSession, getSession } from 'next-auth/client'; -import Button from "../../components/ui/Button"; import { UsersIcon, - UserAddIcon, - UserRemoveIcon, - ChevronDownIcon, - ChevronUpIcon, - LocationMarkerIcon } from "@heroicons/react/outline"; -import { ShieldCheckIcon } from "@heroicons/react/solid"; -import TeamListItem from "../../components/TeamListItem"; +import TeamList from "../../components/team/TeamList"; +import TeamListItem from "../../components/team/TeamListItem"; export default function Teams(props) { const [ session, loading ] = useSession(); - const [ selectedTeam, setSelectedTeam ] = useState({}); + const [ teams, setTeams ] = useState([]); + const [ invites, setInvites ] = useState([]); + const [ showCreateTeamModal, setShowCreateTeamModal ] = useState(false); + + const loadTeams = () => fetch('/api/user/membership').then( (res: any) => res.json() ).then( + (data) => { + setTeams(data.membership.filter( (m) => m.role !== "INVITEE" )); + setInvites(data.membership.filter( (m) => m.role === "INVITEE" )); + } + ); + + useEffect( () => { loadTeams(); }, []); if (loading) { return

    Loading...

    ; } - const teams = [ - { name: "Flying Colours Life", userRole: "Owner", members: [ - { "name": "Alex van Andel", "email": "bartfalij@gmail.com", "role": "Owner" }, - { "email": "me@alexvanandel.com", "role": "Member" }, - { "email": "avanandel@flyingcolourslife.com", "role": "Member" }, - ] }, - { name: "Partner Wealth", userRole: "Member" } - ]; - - const invitations = [ - { name: "Asset Management", userRole: "Invitee" } - ]; + const createTeam = (e) => { + e.preventDefault(); + return fetch('/api/teams', { + method: 'POST', + body: JSON.stringify({ name: e.target.elements['name'].value }), + headers: { + 'Content-Type': 'application/json' + } + }).then( () => { + loadTeams(); + setShowCreateTeamModal(false); + }); + } return( @@ -51,120 +57,81 @@ export default function Teams(props) {

    Your teams

    -

    +

    View, edit and create teams to organise relationships between users

    - {teams.length === 0 &&
    + {!(invites.length || teams.length) &&

    Team up with other users
    by adding a new team

    - +
    }
    - {teams.length > 0 &&
    - + {!!(invites.length || teams.length) &&
    +
    }
    -
      - {teams.map( - (team: any) => setSelectedTeam(team) }> - )} -
    -

    Open Invitations

    -
      - {invitations.map( (team) => )} -
    + {!!teams.length && + + + } + + {!!invites.length &&
    +

    Open Invitations

    +
      + {invites.map( (team) => )} +
    +
    }
    - {/*
    -

    Transform account

    -

    - You cannot convert this account into a team until you leave all teams that you’re a member of. -

    - -
    */} + {/*{teamsLoaded &&
    +
    +

    Transform account

    +

    + {membership.length !== 0 && "You cannot convert this account into a team until you leave all teams that you’re a member of."} + {membership.length === 0 && "A user account can be turned into a team, as a team ...."} +

    +
    +
    + +
    +
    }*/}
    - {Object.keys(selectedTeam).length > 0 && + {showCreateTeamModal &&
    -
    - +
    + - + -
    -
    -
    - -
    -
    - -
    -
    -
    -
    -
    - {selectedTeam.members.length > 0 &&
    -
    -

    Members

    - -
    - - - {selectedTeam.members.map( (member) => - - - - )} - -
    {member.name} {member.name && '(' + member.email + ')' }{!member.name && member.email}{member.role} - {/**/} -
    -
    } -
    -
    - - -
    -
    -
    - - -
    -
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    } ); -} - -export async function getServerSideProps(context) { - const session = await getSession(context); - if (!session) { - return { redirect: { permanent: false, destination: '/auth/login' } }; - } - - const user = await prisma.user.findFirst({ - where: { - email: session.user.email, - }, - select: { - id: true, - username: true, - name: true - } - }); - - return { - props: {user}, // will be passed to the page component as props - } } \ No newline at end of file diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 69b586d2..b1319781 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -45,5 +45,29 @@ model User { createdDate DateTime @default(now()) @map(name: "created") eventTypes EventType[] credentials Credential[] + teams Membership[] + @@map(name: "users") +} + +model Team { + id Int @default(autoincrement()) @id + name String? + members Membership[] +} + +enum MembershipRole { + MEMBER + OWNER +} + +model Membership { + teamId Int + userId Int + accepted Boolean @default(false) + role MembershipRole + team Team @relation(fields: [teamId], references: [id]) + user User @relation(fields: [userId], references: [id]) + + @@id([userId,teamId]) } \ No newline at end of file