diff --git a/components/Settings.tsx b/components/Settings.tsx index 382141d8..ff23e35b 100644 --- a/components/Settings.tsx +++ b/components/Settings.tsx @@ -1,9 +1,7 @@ import ActiveLink from '../components/ActiveLink'; -import { useRouter } from "next/router"; import { UserCircleIcon, KeyIcon, CodeIcon, UserGroupIcon } from '@heroicons/react/outline'; export default function SettingsShell(props) { - const router = useRouter(); return (
@@ -35,9 +33,9 @@ export default function SettingsShell(props) { Embed - {/* + Teams - */} + {/* diff --git a/components/team/EditTeamModal.tsx b/components/team/EditTeamModal.tsx new file mode 100644 index 00000000..347a7ba6 --- /dev/null +++ b/components/team/EditTeamModal.tsx @@ -0,0 +1,100 @@ +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..36e0d564 --- /dev/null +++ b/components/team/MemberInvitationModal.tsx @@ -0,0 +1,92 @@ +import { UsersIcon } from "@heroicons/react/outline"; +import { useState } from "react"; + +export default function MemberInvitationModal(props) { + + const [ errorMessage, setErrorMessage ] = useState(''); + + const handleError = async (res) => { + + const responseData = await res.json(); + + if (res.ok === false) { + setErrorMessage(responseData.message); + throw new Error(responseData.message); + } + + return responseData; + }; + + 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(handleError).then(props.onExit).catch( (e) => { + // do nothing. + }); + }; + + return (
+
+ + + + +
+
+
+ +
+
+ +
+
+
+
+
+ + +
+
+ + +
+
+ +
+
+ {errorMessage &&

Error: {errorMessage}

} +
+ + +
+
+
+
+
); +} \ No newline at end of file diff --git a/components/team/TeamList.tsx b/components/team/TeamList.tsx new file mode 100644 index 00000000..7f04d322 --- /dev/null +++ b/components/team/TeamList.tsx @@ -0,0 +1,42 @@ +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 (
+
    + {props.teams.map( + (team: any) => selectAction(action, team) + }> + )} +
+ {showEditTeamModal && { + props.onChange(); + 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..221f4ff1 --- /dev/null +++ b/components/team/TeamListItem.tsx @@ -0,0 +1,77 @@ +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); + props.onChange(); + }); + + 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..2ee584b4 --- /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/next.config.js b/next.config.js index e8b36e89..b0ef7d5c 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,11 @@ const withTM = require('next-transpile-modules')(['react-timezone-select']); +// TODO: Revisit this later with getStaticProps in App +if (process.env.NEXTAUTH_URL) { + process.env.BASE_URL = process.env.NEXTAUTH_URL.replace('/api/auth', ''); +} + if ( ! process.env.EMAIL_FROM ) { console.warn('\x1b[33mwarn', '\x1b[0m', 'EMAIL_FROM environment variable is not set, this may indicate mailing is currently disabled. Please refer to the .env.example file.'); } diff --git a/pages/api/teams.ts b/pages/api/teams.ts new file mode 100644 index 00000000..1ab69adb --- /dev/null +++ b/pages/api/teams.ts @@ -0,0 +1,37 @@ +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) { + res.status(401).json({message: "Not authenticated"}); + return; + } + + if (req.method === "POST") { + + // TODO: Prevent creating a team with identical names? + + 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', process.env.BASE_URL + '/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..1a8f2415 --- /dev/null +++ b/pages/api/teams/[team]/invite.ts @@ -0,0 +1,71 @@ +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: "Invalid team"}); + } + + const invitee = await prisma.user.findFirst({ + where: { + OR: [ + { username: req.body.usernameOrEmail }, + { email: req.body.usernameOrEmail } + ] + } + }); + + if (!invitee) { + return res.status(400).json({ + message: `Invite failed because there is no corresponding user for ${req.body.usernameOrEmail}`}); + } + + // create provisional membership + try { + const createMembership = await prisma.membership.create({ + data: { + teamId: parseInt(req.query.team), + userId: invitee.id, + role: req.body.role, + }, + }); + } + catch (err) { + if (err.code === "P2002") { // unique constraint violation + return res.status(409).json({ + message: 'This user is a member of this team / has a pending invitation.', + }); + } else { + throw err; // rethrow + } + }; + + // 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 new file mode 100644 index 00000000..e5b1e5d3 --- /dev/null +++ b/pages/settings/teams.tsx @@ -0,0 +1,137 @@ +import Head from 'next/head'; +import prisma from '../../lib/prisma'; +import Modal from '../../components/Modal'; +import Shell from '../../components/Shell'; +import SettingsShell from '../../components/Settings'; +import {useEffect, useState} from 'react'; +import { useSession, getSession } from 'next-auth/client'; +import { + UsersIcon, +} from "@heroicons/react/outline"; +import TeamList from "../../components/team/TeamList"; +import TeamListItem from "../../components/team/TeamListItem"; + +export default function Teams(props) { + + const [ session, loading ] = useSession(); + 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 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( + + + Teams | Calendso + + + +
    +
    +
    +
    +

    Your teams

    +

    + View, edit and create teams to organise relationships between users +

    + {!(invites.length || teams.length) &&
    +

    Team up with other users
    by adding a new team

    + + +
    } +
    + {!!(invites.length || teams.length) &&
    + +
    } +
    +
    + {!!teams.length && + + + } + + {!!invites.length &&
    +

    Open Invitations

    +
      + {invites.map( (team) => )} +
    +
    } +
    + {/*{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 ...."} +

    +
    +
    + +
    +
    }*/} +
    +
    + {showCreateTeamModal && +
    +
    + + + + +
    +
    +
    + +
    +
    + +
    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    +
    + } +     +     + ); +} \ 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 diff --git a/styles/components/table.css b/styles/components/table.css new file mode 100644 index 00000000..a2d88616 --- /dev/null +++ b/styles/components/table.css @@ -0,0 +1,4 @@ + +table tbody tr:nth-child(odd) { + @apply bg-gray-50; +} \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index 89a86dfb..926cc766 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -5,6 +5,7 @@ @import './components/buttons.css'; @import './components/spinner.css'; @import './components/activelink.css'; +@import './components/table.css'; body { background-color: #f3f4f6;