mythic-insight/calcom
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 5

Merged with main, fixed issue that caused multiple AvailableTimes refreshes.

Browse source
This commit is contained in:
Alex van Andel 2021-06-27 21:28:35 +00:00
commit 7030851efb
27 changed files with 2483 additions and 1151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

237
components/Shell.tsx
View file

@ -1,40 +1,40 @@
import Link from 'next/link'; import Link from "next/link";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import {useRouter} from "next/router"; import { useRouter } from "next/router";
import {signOut, useSession} from 'next-auth/client'; import { signOut, useSession } from "next-auth/client";
import {MenuIcon, XIcon} from '@heroicons/react/outline'; import { MenuIcon, XIcon } from "@heroicons/react/outline";
import {collectPageParameters, telemetryEventTypes, useTelemetry} from "../lib/telemetry"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../lib/telemetry";
export default function Shell(props) { export default function Shell(props) {
const router = useRouter(); const router = useRouter();
const [ session, loading ] = useSession(); const [session, loading] = useSession();
const [ profileDropdownExpanded, setProfileDropdownExpanded ] = useState(false); const [profileDropdownExpanded, setProfileDropdownExpanded] = useState(false);
const [ mobileMenuExpanded, setMobileMenuExpanded ] = useState(false); const [mobileMenuExpanded, setMobileMenuExpanded] = useState(false);
let telemetry = useTelemetry(); const telemetry = useTelemetry();
useEffect(() => { useEffect(() => {
telemetry.withJitsu((jitsu) => { telemetry.withJitsu((jitsu) => {
return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.pathname)) return jitsu.track(telemetryEventTypes.pageView, collectPageParameters(router.pathname));
}); });
}, [telemetry]) }, [telemetry]);
const toggleProfileDropdown = () => { const toggleProfileDropdown = () => {
setProfileDropdownExpanded(!profileDropdownExpanded); setProfileDropdownExpanded(!profileDropdownExpanded);
} };
const toggleMobileMenu = () => { const toggleMobileMenu = () => {
setMobileMenuExpanded(!mobileMenuExpanded); setMobileMenuExpanded(!mobileMenuExpanded);
} };
const logoutHandler = () => { const logoutHandler = () => {
signOut({ redirect: false }).then( () => router.push('/auth/logout') ); signOut({ redirect: false }).then(() => router.push("/auth/logout"));
};
if (!loading && !session) {
router.replace("/auth/login");
} }
if ( ! loading && ! session ) { return session ? (
router.replace('/auth/login');
}
return session && (
<div> <div>
<div className="bg-gradient-to-b from-blue-600 via-blue-600 to-blue-300 pb-32"> <div className="bg-gradient-to-b from-blue-600 via-blue-600 to-blue-300 pb-32">
<nav className="bg-blue-600"> <nav className="bg-blue-600">
@ -48,19 +48,54 @@ export default function Shell(props) {
<div className="hidden md:block"> <div className="hidden md:block">
<div className="ml-10 flex items-baseline space-x-4"> <div className="ml-10 flex items-baseline space-x-4">
<Link href="/"> <Link href="/">
<a className={router.pathname == "/" ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium" : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Dashboard</a> <a
className={
router.pathname == "/"
? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium"
: "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"
}>
Dashboard
</a>
</Link>
<Link href="/bookings">
<a
className={
router.pathname.startsWith("/bookings")
? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium"
: "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"
}>
Bookings
</a>
</Link> </Link>
{/* <Link href="/">
<a className={router.pathname.startsWith("/bookings") ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium" : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Bookings</a>
</Link> */}
<Link href="/availability"> <Link href="/availability">
<a className={router.pathname.startsWith("/availability") ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium" : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Availability</a> <a
className={
router.pathname.startsWith("/availability")
? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium"
: "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"
}>
Availability
</a>
</Link> </Link>
<Link href="/integrations"> <Link href="/integrations">
<a className={router.pathname.startsWith("/integrations") ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium" : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Integrations</a> <a
className={
router.pathname.startsWith("/integrations")
? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium"
: "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"
}>
Integrations
</a>
</Link> </Link>
<Link href="/settings/profile"> <Link href="/settings/profile">
<a className={router.pathname.startsWith("/settings") ? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium" : "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"}>Settings</a> <a
className={
router.pathname.startsWith("/settings")
? "bg-blue-500 transition-colors duration-300 ease-in-out text-white px-3 py-2 rounded-md text-sm font-medium"
: "text-white hover:bg-blue-500 transition-colors duration-300 ease-in-out hover:text-white px-3 py-2 rounded-md text-sm font-medium"
}>
Settings
</a>
</Link> </Link>
</div> </div>
</div> </div>
@ -69,84 +104,170 @@ export default function Shell(props) {
<div className="ml-4 flex items-center md:ml-6"> <div className="ml-4 flex items-center md:ml-6">
<div className="ml-3 relative"> <div className="ml-3 relative">
<div> <div>
<button onClick={toggleProfileDropdown} type="button" className="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu" aria-expanded="false" aria-haspopup="true"> <button
onClick={toggleProfileDropdown}
type="button"
className="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white"
id="user-menu"
aria-expanded="false"
aria-haspopup="true">
<span className="sr-only">Open user menu</span> <span className="sr-only">Open user menu</span>
<img className="h-8 w-8 rounded-full" src={session.user.image ? session.user.image : "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" + encodeURIComponent(session.user.name || "")} alt="" /> <img
className="h-8 w-8 rounded-full"
src={
session.user.image
? session.user.image
: "https://eu.ui-avatars.com/api/?background=fff&color=039be5&name=" +
encodeURIComponent(session.user.name || "")
}
alt=""
/>
</button> </button>
</div> </div>
{ {profileDropdownExpanded && (
profileDropdownExpanded && ( <div
<div className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50" role="menu" aria-orientation="vertical" aria-labelledby="user-menu"> className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-50"
<Link href={"/" + session.user.username}><a target="_blank" className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Public Page</a></Link> role="menu"
<Link href="/settings/profile"><a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Profile</a></Link> aria-orientation="vertical"
<Link href="/settings/password"><a className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Login &amp; Security</a></Link> aria-labelledby="user-menu">
<button onClick={logoutHandler} className="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</button> <Link href={"/" + session.user.username}>
<a
target="_blank"
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">
Your Public Page
</a>
</Link>
<Link href="/settings/profile">
<a
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">
Your Profile
</a>
</Link>
<Link href="/settings/password">
<a
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">
Login &amp; Security
</a>
</Link>
<button
onClick={logoutHandler}
className="w-full text-left block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
role="menuitem">
Sign out
</button>
</div> </div>
) )}
}
</div> </div>
</div> </div>
</div> </div>
<div className="-mr-2 flex md:hidden"> <div className="-mr-2 flex md:hidden">
<button onClick={toggleMobileMenu} type="button" className=" inline-flex items-center justify-center p-2 rounded-md text-white focus:outline-none" aria-controls="mobile-menu" aria-expanded="false"> <button
onClick={toggleMobileMenu}
type="button"
className=" inline-flex items-center justify-center p-2 rounded-md text-white focus:outline-none"
aria-controls="mobile-menu"
aria-expanded="false">
<span className="sr-only">Open main menu</span> <span className="sr-only">Open main menu</span>
{ !mobileMenuExpanded && <MenuIcon className="block h-6 w-6" /> } {!mobileMenuExpanded && <MenuIcon className="block h-6 w-6" />}
{ mobileMenuExpanded && <XIcon className="block h-6 w-6" /> } {mobileMenuExpanded && <XIcon className="block h-6 w-6" />}
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
{ mobileMenuExpanded && <div className="border-b border-blue-500 md:hidden bg-blue-600" id="mobile-menu"> {mobileMenuExpanded && (
<div className="border-b border-blue-500 md:hidden bg-blue-600" id="mobile-menu">
<div className="px-2 py-3 space-y-1 sm:px-3"> <div className="px-2 py-3 space-y-1 sm:px-3">
<Link href="/"> <Link href="/">
<a className={router.pathname == "/" ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Dashboard</a> <a
className={
router.pathname == "/"
? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium"
: "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
}>
Dashboard
</a>
</Link> </Link>
<Link href="/availability"> <Link href="/availability">
<a className={router.pathname.startsWith("/availability") ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Availability</a> <a
className={
router.pathname.startsWith("/availability")
? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium"
: "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
}>
Availability
</a>
</Link> </Link>
<Link href="/integrations"> <Link href="/integrations">
<a className={router.pathname.startsWith("/integrations") ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Integrations</a> <a
className={
router.pathname.startsWith("/integrations")
? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium"
: "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
}>
Integrations
</a>
</Link> </Link>
</div> </div>
<div className="pt-4 pb-3 border-t border-blue-500"> <div className="pt-4 pb-3 border-t border-blue-500">
<div className="flex items-center px-5"> <div className="flex items-center px-5">
<div className="flex-shrink-0"> <div className="flex-shrink-0">
<img className="h-10 w-10 rounded-full" src={"https://eu.ui-avatars.com/api/?background=039be5&color=fff&name=" + encodeURIComponent(session.user.name || session.user.username)} alt="" /> <img
className="h-10 w-10 rounded-full"
src={
"https://eu.ui-avatars.com/api/?background=039be5&color=fff&name=" +
encodeURIComponent(session.user.name || session.user.username)
}
alt=""
/>
</div> </div>
<div className="ml-3"> <div className="ml-3">
<div className="text-base font-medium leading-none text-white">{session.user.name || session.user.username}</div> <div className="text-base font-medium leading-none text-white">
{session.user.name || session.user.username}
</div>
<div className="text-sm font-medium leading-none text-gray-200">{session.user.email}</div> <div className="text-sm font-medium leading-none text-gray-200">{session.user.email}</div>
</div> </div>
</div> </div>
<div className="mt-3 px-2 space-y-1"> <div className="mt-3 px-2 space-y-1">
<Link href="/settings/profile"> <Link href="/settings/profile">
<a className="block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-white hover:bg-gray-700">Your Profile</a> <a className="block px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-white hover:bg-gray-700">
Your Profile
</a>
</Link> </Link>
<Link href="/settings"> <Link href="/settings">
<a className={router.pathname.startsWith("/settings") ? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium" : "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"}>Settings</a> <a
className={
router.pathname.startsWith("/settings")
? "bg-blue-500 text-white block px-3 py-2 rounded-md text-base font-medium"
: "text-gray-100 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
}>
Settings
</a>
</Link> </Link>
<button onClick={logoutHandler} className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-white hover:bg-gray-700">Sign out</button> <button
onClick={logoutHandler}
className="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-100 hover:text-white hover:bg-gray-700">
Sign out
</button>
</div> </div>
</div> </div>
</div> </div>
} )}
</nav> </nav>
<header className={props.noPaddingBottom ? "pt-10" : "py-10"}> <header className={props.noPaddingBottom ? "pt-10" : "py-10"}>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<h1 className="text-3xl font-bold text-white"> <h1 className="text-3xl font-bold text-white">{props.heading}</h1>
{props.heading}
</h1>
</div> </div>
</header> </header>
</div> </div>
<main className="-mt-32"> <main className="-mt-32">
<div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8"> <div className="max-w-7xl mx-auto pb-12 px-4 sm:px-6 lg:px-8">{props.children}</div>
{props.children}
</div>
</main> </main>
</div> </div>
); ) : null;
} }

2
components/booking/DatePicker.tsx
View file

@ -11,7 +11,7 @@ const DatePicker = ({ weekStart, onDatePicked, workingHours, disableToday }) =>
useEffect(() => { useEffect(() => {
if (selectedDate) onDatePicked(selectedDate); if (selectedDate) onDatePicked(selectedDate);
}, [selectedDate, onDatePicked]); }, [selectedDate]);
// Handle month changes // Handle month changes
const incrementMonth = () => { const incrementMonth = () => {

7
components/ui/Button.tsx
View file

@ -1,11 +1,10 @@
import { useState } from 'react'; import { useState } from 'react';
export default function Button(props) { export default function Button(props) {
const [loading, setLoading] = useState(false);
return( return(
<button type="submit" className="btn btn-primary" onClick={setLoading}> <button type="submit" className="btn btn-primary">
{!loading && props.children} {!props.loading && props.children}
{loading && {props.loading &&
<svg className="animate-spin mx-4 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg className="animate-spin mx-4 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle> <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>

18
components/ui/UsernameInput.tsx
View file

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
export const UsernameInput = React.forwardRef( (props, ref) => ( const UsernameInput = React.forwardRef((props, ref) => (
// todo, check if username is already taken here? // todo, check if username is already taken here?
<div> <div>
<label htmlFor="username" className="block text-sm font-medium text-gray-700"> <label htmlFor="username" className="block text-sm font-medium text-gray-700">
@ -10,8 +10,20 @@ export const UsernameInput = React.forwardRef( (props, ref) => (
<span className="bg-gray-50 border border-r-0 border-gray-300 rounded-l-md px-3 inline-flex items-center text-gray-500 sm:text-sm"> <span className="bg-gray-50 border border-r-0 border-gray-300 rounded-l-md px-3 inline-flex items-center text-gray-500 sm:text-sm">
{typeof window !== "undefined" && window.location.hostname}/ {typeof window !== "undefined" && window.location.hostname}/
</span> </span>
<input ref={ref} type="text" name="username" id="username" autoComplete="username" required {...props} <input
className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300"/> ref={ref}
type="text"
name="username"
id="username"
autoComplete="username"
required
{...props}
className="focus:ring-blue-500 focus:border-blue-500 flex-grow block w-full min-w-0 rounded-none rounded-r-md sm:text-sm border-gray-300 lowercase"
/>
</div> </div>
</div> </div>
)); ));
UsernameInput.displayName = "UsernameInput";
export { UsernameInput };

238
lib/calendarClient.ts
View file

@ -7,18 +7,51 @@ import EventAttendeeRescheduledMail from "./emails/EventAttendeeRescheduledMail"
const translator = short(); const translator = short();
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { google } = require("googleapis"); const { google } = require("googleapis");
import prisma from "./prisma";
const googleAuth = () => { const googleAuth = (credential) => {
const { client_secret, client_id, redirect_uris } = JSON.parse( const { client_secret, client_id, redirect_uris } = JSON.parse(process.env.GOOGLE_API_CREDENTIALS).web;
process.env.GOOGLE_API_CREDENTIALS const myGoogleAuth = new google.auth.OAuth2(client_id, client_secret, redirect_uris[0]);
).web; myGoogleAuth.setCredentials(credential.key);
return new google.auth.OAuth2(client_id, client_secret, redirect_uris[0]);
const isExpired = () => myGoogleAuth.isTokenExpiring();
const refreshAccessToken = () =>
myGoogleAuth
.refreshToken(credential.key.refresh_token)
.then((res) => {
const token = res.res.data;
credential.key.access_token = token.access_token;
credential.key.expiry_date = token.expiry_date;
return prisma.credential
.update({
where: {
id: credential.id,
},
data: {
key: credential.key,
},
})
.then(() => {
myGoogleAuth.setCredentials(credential.key);
return myGoogleAuth;
});
})
.catch((err) => {
console.error("Error refreshing google token", err);
return myGoogleAuth;
});
return {
getToken: () => (!isExpired() ? Promise.resolve(myGoogleAuth) : refreshAccessToken()),
};
}; };
function handleErrorsJson(response) { function handleErrorsJson(response) {
if (!response.ok) { if (!response.ok) {
response.json().then(console.log); response.json().then((e) => console.error("O365 Error", e));
throw Error(response.statusText); throw Error(response.statusText);
} }
return response.json(); return response.json();
@ -26,17 +59,17 @@ function handleErrorsJson(response) {
function handleErrorsRaw(response) { function handleErrorsRaw(response) {
if (!response.ok) { if (!response.ok) {
response.text().then(console.log); response.text().then((e) => console.error("O365 Error", e));
throw Error(response.statusText); throw Error(response.statusText);
} }
return response.text(); return response.text();
} }
const o365Auth = (credential) => { const o365Auth = (credential) => {
const isExpired = (expiryDate) => expiryDate < +new Date(); const isExpired = (expiryDate) => expiryDate < Math.round(+new Date() / 1000);
const refreshAccessToken = (refreshToken) => const refreshAccessToken = (refreshToken) => {
fetch("https://login.microsoftonline.com/common/oauth2/v2.0/token", { return fetch("https://login.microsoftonline.com/common/oauth2/v2.0/token", {
method: "POST", method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" }, headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({ body: new URLSearchParams({
@ -50,11 +83,19 @@ const o365Auth = (credential) => {
.then(handleErrorsJson) .then(handleErrorsJson)
.then((responseBody) => { .then((responseBody) => {
credential.key.access_token = responseBody.access_token; credential.key.access_token = responseBody.access_token;
credential.key.expiry_date = Math.round( credential.key.expiry_date = Math.round(+new Date() / 1000 + responseBody.expires_in);
+new Date() / 1000 + responseBody.expires_in return prisma.credential
); .update({
return credential.key.access_token; where: {
id: credential.id,
},
data: {
key: credential.key,
},
})
.then(() => credential.key.access_token);
}); });
};
return { return {
getToken: () => getToken: () =>
@ -96,15 +137,11 @@ interface IntegrationCalendar {
interface CalendarApiAdapter { interface CalendarApiAdapter {
createEvent(event: CalendarEvent): Promise<any>; createEvent(event: CalendarEvent): Promise<any>;
updateEvent(uid: String, event: CalendarEvent); updateEvent(uid: string, event: CalendarEvent);
deleteEvent(uid: String); deleteEvent(uid: string);
getAvailability( getAvailability(dateFrom, dateTo, selectedCalendars: IntegrationCalendar[]): Promise<any>;
dateFrom,
dateTo,
selectedCalendars: IntegrationCalendar[]
): Promise<any>;
listCalendars(): Promise<IntegrationCalendar[]>; listCalendars(): Promise<IntegrationCalendar[]>;
} }
@ -113,7 +150,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
const auth = o365Auth(credential); const auth = o365Auth(credential);
const translateEvent = (event: CalendarEvent) => { const translateEvent = (event: CalendarEvent) => {
let optional = {}; const optional = {};
if (event.location) { if (event.location) {
optional.location = { displayName: event.location }; optional.location = { displayName: event.location };
} }
@ -171,12 +208,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
return { return {
getAvailability: (dateFrom, dateTo, selectedCalendars) => { getAvailability: (dateFrom, dateTo, selectedCalendars) => {
const filter = const filter = "?$filter=start/dateTime ge '" + dateFrom + "' and end/dateTime le '" + dateTo + "'";
"?$filter=start/dateTime ge '" +
dateFrom +
"' and end/dateTime le '" +
dateTo +
"'";
return auth return auth
.getToken() .getToken()
.then((accessToken) => { .then((accessToken) => {
@ -195,10 +227,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
).then((ids: string[]) => { ).then((ids: string[]) => {
const urls = ids.map( const urls = ids.map(
(calendarId) => (calendarId) =>
"https://graph.microsoft.com/v1.0/me/calendars/" + "https://graph.microsoft.com/v1.0/me/calendars/" + calendarId + "/events" + filter
calendarId +
"/events" +
filter
); );
return Promise.all( return Promise.all(
urls.map((url) => urls.map((url) =>
@ -217,9 +246,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
})) }))
) )
) )
).then((results) => ).then((results) => results.reduce((acc, events) => acc.concat(events), []));
results.reduce((acc, events) => acc.concat(events), [])
);
}); });
}) })
.catch((err) => { .catch((err) => {
@ -242,7 +269,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
disableConfirmationEmail: true, disableConfirmationEmail: true,
})) }))
), ),
deleteEvent: (uid: String) => deleteEvent: (uid: string) =>
auth.getToken().then((accessToken) => auth.getToken().then((accessToken) =>
fetch("https://graph.microsoft.com/v1.0/me/calendar/events/" + uid, { fetch("https://graph.microsoft.com/v1.0/me/calendar/events/" + uid, {
method: "DELETE", method: "DELETE",
@ -251,7 +278,7 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
}, },
}).then(handleErrorsRaw) }).then(handleErrorsRaw)
), ),
updateEvent: (uid: String, event: CalendarEvent) => updateEvent: (uid: string, event: CalendarEvent) =>
auth.getToken().then((accessToken) => auth.getToken().then((accessToken) =>
fetch("https://graph.microsoft.com/v1.0/me/calendar/events/" + uid, { fetch("https://graph.microsoft.com/v1.0/me/calendar/events/" + uid, {
method: "PATCH", method: "PATCH",
@ -267,53 +294,53 @@ const MicrosoftOffice365Calendar = (credential): CalendarApiAdapter => {
}; };
const GoogleCalendar = (credential): CalendarApiAdapter => { const GoogleCalendar = (credential): CalendarApiAdapter => {
const myGoogleAuth = googleAuth(); const auth = googleAuth(credential);
myGoogleAuth.setCredentials(credential.key);
const integrationType = "google_calendar"; const integrationType = "google_calendar";
return { return {
getAvailability: (dateFrom, dateTo, selectedCalendars) => getAvailability: (dateFrom, dateTo, selectedCalendars) =>
new Promise((resolve, reject) => { new Promise((resolve, reject) =>
auth.getToken().then((myGoogleAuth) => {
const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); const calendar = google.calendar({ version: "v3", auth: myGoogleAuth });
calendar.calendarList const selectedCalendarIds = selectedCalendars
.list() .filter((e) => e.integration === integrationType)
.then((cals) => { .map((e) => e.externalId);
const filteredItems = cals.data.items.filter( if (selectedCalendarIds.length == 0 && selectedCalendars.length > 0) {
(i) =>
selectedCalendars.findIndex((e) => e.externalId === i.id) > -1
);
if (filteredItems.length == 0 && selectedCalendars.length > 0) {
// Only calendars of other integrations selected // Only calendars of other integrations selected
resolve([]); resolve([]);
return;
} }
(selectedCalendarIds.length == 0
? calendar.calendarList.list().then((cals) => cals.data.items.map((cal) => cal.id))
: Promise.resolve(selectedCalendarIds)
)
.then((calsIds) => {
calendar.freebusy.query( calendar.freebusy.query(
{ {
requestBody: { requestBody: {
timeMin: dateFrom, timeMin: dateFrom,
timeMax: dateTo, timeMax: dateTo,
items: items: calsIds.map((id) => ({ id: id })),
filteredItems.length > 0 ? filteredItems : cals.data.items,
}, },
}, },
(err, apires) => { (err, apires) => {
if (err) { if (err) {
reject(err); reject(err);
} }
resolve(Object.values(apires.data.calendars).flatMap((item) => item["busy"]));
resolve(
Object.values(apires.data.calendars).flatMap(
(item) => item["busy"]
)
);
} }
); );
}) })
.catch((err) => { .catch((err) => {
console.error("There was an error contacting google calendar service: ", err);
reject(err); reject(err);
}); });
}), })
),
createEvent: (event: CalendarEvent) => createEvent: (event: CalendarEvent) =>
new Promise((resolve, reject) => { new Promise((resolve, reject) =>
auth.getToken().then((myGoogleAuth) => {
const payload = { const payload = {
summary: event.title, summary: event.title,
description: event.description, description: event.description,
@ -346,21 +373,20 @@ const GoogleCalendar = (credential): CalendarApiAdapter => {
auth: myGoogleAuth, auth: myGoogleAuth,
calendarId: "primary", calendarId: "primary",
resource: payload, resource: payload,
conferenceDataVersion: 1,
}, },
function (err, event) { function (err, event) {
if (err) { if (err) {
console.log( console.error("There was an error contacting google calendar service: ", err);
"There was an error contacting the Calendar service: " + err
);
return reject(err); return reject(err);
} }
return resolve(event.data); return resolve(event.data);
} }
); );
}), })
updateEvent: (uid: String, event: CalendarEvent) => ),
new Promise((resolve, reject) => { updateEvent: (uid: string, event: CalendarEvent) =>
new Promise((resolve, reject) =>
auth.getToken().then((myGoogleAuth) => {
const payload = { const payload = {
summary: event.title, summary: event.title,
description: event.description, description: event.description,
@ -395,17 +421,17 @@ const GoogleCalendar = (credential): CalendarApiAdapter => {
}, },
function (err, event) { function (err, event) {
if (err) { if (err) {
console.log( console.error("There was an error contacting google calendar service: ", err);
"There was an error contacting the Calendar service: " + err
);
return reject(err); return reject(err);
} }
return resolve(event.data); return resolve(event.data);
} }
); );
}), })
deleteEvent: (uid: String) => ),
new Promise((resolve, reject) => { deleteEvent: (uid: string) =>
new Promise((resolve, reject) =>
auth.getToken().then((myGoogleAuth) => {
const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); const calendar = google.calendar({ version: "v3", auth: myGoogleAuth });
calendar.events.delete( calendar.events.delete(
{ {
@ -417,17 +443,17 @@ const GoogleCalendar = (credential): CalendarApiAdapter => {
}, },
function (err, event) { function (err, event) {
if (err) { if (err) {
console.log( console.error("There was an error contacting google calendar service: ", err);
"There was an error contacting the Calendar service: " + err
);
return reject(err); return reject(err);
} }
return resolve(event.data); return resolve(event.data);
} }
); );
}), })
),
listCalendars: () => listCalendars: () =>
new Promise((resolve, reject) => { new Promise((resolve, reject) =>
auth.getToken().then((myGoogleAuth) => {
const calendar = google.calendar({ version: "v3", auth: myGoogleAuth }); const calendar = google.calendar({ version: "v3", auth: myGoogleAuth });
calendar.calendarList calendar.calendarList
.list() .list()
@ -445,9 +471,11 @@ const GoogleCalendar = (credential): CalendarApiAdapter => {
); );
}) })
.catch((err) => { .catch((err) => {
console.error("There was an error contacting google calendar service: ", err);
reject(err); reject(err);
}); });
}), })
),
}; };
}; };
@ -466,43 +494,37 @@ const calendars = (withCredentials): CalendarApiAdapter[] =>
}) })
.filter(Boolean); .filter(Boolean);
const getBusyCalendarTimes = ( const getBusyCalendarTimes = (withCredentials, dateFrom, dateTo, selectedCalendars) =>
withCredentials,
dateFrom,
dateTo,
selectedCalendars
) =>
Promise.all( Promise.all(
calendars(withCredentials).map((c) => calendars(withCredentials).map((c) => c.getAvailability(dateFrom, dateTo, selectedCalendars))
c.getAvailability(dateFrom, dateTo, selectedCalendars)
)
).then((results) => { ).then((results) => {
return results.reduce((acc, availability) => acc.concat(availability), []); return results.reduce((acc, availability) => acc.concat(availability), []);
}); });
const listCalendars = (withCredentials) => const listCalendars = (withCredentials) =>
Promise.all(calendars(withCredentials).map((c) => c.listCalendars())).then( Promise.all(calendars(withCredentials).map((c) => c.listCalendars())).then((results) =>
(results) => results.reduce((acc, calendars) => acc.concat(calendars), []) results.reduce((acc, calendars) => acc.concat(calendars), [])
); );
const createEvent = async ( const createEvent = async (credential, calEvent: CalendarEvent): Promise<any> => {
credential, const uid: string = translator.fromUUID(uuidv5(JSON.stringify(calEvent), uuidv5.URL));
calEvent: CalendarEvent
): Promise<any> => {
const uid: string = translator.fromUUID(
uuidv5(JSON.stringify(calEvent), uuidv5.URL)
);
const creationResult = credential const creationResult = credential ? await calendars([credential])[0].createEvent(calEvent) : null;
? await calendars([credential])[0].createEvent(calEvent)
: null;
const organizerMail = new EventOrganizerMail(calEvent, uid); const organizerMail = new EventOrganizerMail(calEvent, uid);
const attendeeMail = new EventAttendeeMail(calEvent, uid); const attendeeMail = new EventAttendeeMail(calEvent, uid);
try {
await organizerMail.sendEmail(); await organizerMail.sendEmail();
} catch (e) {
console.error("organizerMail.sendEmail failed", e);
}
if (!creationResult || !creationResult.disableConfirmationEmail) { if (!creationResult || !creationResult.disableConfirmationEmail) {
try {
await attendeeMail.sendEmail(); await attendeeMail.sendEmail();
} catch (e) {
console.error("attendeeMail.sendEmail failed", e);
}
} }
return { return {
@ -511,14 +533,8 @@ const createEvent = async (
}; };
}; };
const updateEvent = async ( const updateEvent = async (credential, uidToUpdate: string, calEvent: CalendarEvent): Promise<any> => {
credential, const newUid: string = translator.fromUUID(uuidv5(JSON.stringify(calEvent), uuidv5.URL));
uidToUpdate: String,
calEvent: CalendarEvent
): Promise<any> => {
const newUid: string = translator.fromUUID(
uuidv5(JSON.stringify(calEvent), uuidv5.URL)
);
const updateResult = credential const updateResult = credential
? await calendars([credential])[0].updateEvent(uidToUpdate, calEvent) ? await calendars([credential])[0].updateEvent(uidToUpdate, calEvent)
@ -526,10 +542,18 @@ const updateEvent = async (
const organizerMail = new EventOrganizerRescheduledMail(calEvent, newUid); const organizerMail = new EventOrganizerRescheduledMail(calEvent, newUid);
const attendeeMail = new EventAttendeeRescheduledMail(calEvent, newUid); const attendeeMail = new EventAttendeeRescheduledMail(calEvent, newUid);
try {
await organizerMail.sendEmail(); await organizerMail.sendEmail();
} catch (e) {
console.error("organizerMail.sendEmail failed", e);
}
if (!updateResult || !updateResult.disableConfirmationEmail) { if (!updateResult || !updateResult.disableConfirmationEmail) {
try {
await attendeeMail.sendEmail(); await attendeeMail.sendEmail();
} catch (e) {
console.error("attendeeMail.sendEmail failed", e);
}
} }
return { return {
@ -538,7 +562,7 @@ const updateEvent = async (
}; };
}; };
const deleteEvent = (credential, uid: String): Promise<any> => { const deleteEvent = (credential, uid: string): Promise<any> => {
if (credential) { if (credential) {
return calendars([credential])[0].deleteEvent(uid); return calendars([credential])[0].deleteEvent(uid);
} }

9
lib/emails/EventMail.ts
View file

@ -58,7 +58,7 @@ export default abstract class EventMail {
* Sends the email to the event attendant and returns a Promise. * Sends the email to the event attendant and returns a Promise.
*/ */
public sendEmail(): Promise<any> { public sendEmail(): Promise<any> {
return new Promise((resolve, reject) => nodemailer.createTransport(this.getMailerOptions().transport).sendMail( new Promise((resolve, reject) => nodemailer.createTransport(this.getMailerOptions().transport).sendMail(
this.getNodeMailerPayload(), this.getNodeMailerPayload(),
(error, info) => { (error, info) => {
if (error) { if (error) {
@ -67,7 +67,9 @@ export default abstract class EventMail {
} else { } else {
resolve(info); resolve(info);
} }
})); })
).catch((e) => console.error("sendEmail", e));
return new Promise((resolve) => resolve("send mail async"));
} }
/** /**
@ -127,7 +129,8 @@ export default abstract class EventMail {
protected getAdditionalFooter(): string { protected getAdditionalFooter(): string {
return ` return `
<br/> <br/>
Need to change this event?<br /> <br/>
<strong>Need to change this event?</strong><br />
Cancel: <a href="${this.getCancelLink()}">${this.getCancelLink()}</a><br /> Cancel: <a href="${this.getCancelLink()}">${this.getCancelLink()}</a><br />
Reschedule: <a href="${this.getRescheduleLink()}">${this.getRescheduleLink()}</a> Reschedule: <a href="${this.getRescheduleLink()}">${this.getRescheduleLink()}</a>
`; `;

19
lib/emails/buildMessageTemplate.ts Normal file
View file

@ -0,0 +1,19 @@
import Handlebars from "handlebars";
export const buildMessageTemplate = ({
messageTemplate,
subjectTemplate,
vars,
}): { subject: string; message: string } => {
const buildMessage = Handlebars.compile(messageTemplate);
const message = buildMessage(vars);
const buildSubject = Handlebars.compile(subjectTemplate);
const subject = buildSubject(vars);
return {
subject,
message,
};
};
export default buildMessageTemplate;

30
lib/emails/sendMail.ts Normal file
View file

@ -0,0 +1,30 @@
import { serverConfig } from "../serverConfig";
import nodemailer, { SentMessageInfo } from "nodemailer";
const sendEmail = ({ to, subject, text, html = null }): Promise<string | SentMessageInfo> =>
new Promise((resolve, reject) => {
const { transport, from } = serverConfig;
if (!to || !subject || (!text && !html)) {
return reject("Missing required elements to send email.");
}
nodemailer.createTransport(transport).sendMail(
{
from: `Calendso ${from}`,
to,
subject,
text,
html,
},
(error, info) => {
if (error) {
console.error("SEND_INVITATION_NOTIFICATION_ERROR", to, error);
return reject(error.message);
}
return resolve(info);
}
);
});
export default sendEmail;

20
lib/forgot-password/messaging/forgot-password.ts Normal file
View file

@ -0,0 +1,20 @@
import buildMessageTemplate from "../../emails/buildMessageTemplate";
export const forgotPasswordSubjectTemplate = "Forgot your password? - Calendso";
export const forgotPasswordMessageTemplate = `Hey there,
Use the link below to reset your password.
{{link}}
p.s. It expires in 6 hours.
- Calendso`;
export const buildForgotPasswordMessage = (vars) => {
return buildMessageTemplate({
subjectTemplate: forgotPasswordSubjectTemplate,
messageTemplate: forgotPasswordMessageTemplate,
vars,
});
};

9
lib/location.ts
View file

@ -1,7 +1,6 @@
export enum LocationType { export enum LocationType {
InPerson = 'inPerson', InPerson = "inPerson",
Phone = 'phone', Phone = "phone",
GoogleMeet = 'integrations:google:meet' GoogleMeet = "integrations:google:meet",
Zoom = "integrations:zoom",
} }

16
lib/videoClient.ts
View file

@ -193,10 +193,18 @@ const createMeeting = async (credential, calEvent: CalendarEvent): Promise<any>
const organizerMail = new VideoEventOrganizerMail(calEvent, uid, videoCallData); const organizerMail = new VideoEventOrganizerMail(calEvent, uid, videoCallData);
const attendeeMail = new VideoEventAttendeeMail(calEvent, uid, videoCallData); const attendeeMail = new VideoEventAttendeeMail(calEvent, uid, videoCallData);
try {
await organizerMail.sendEmail(); await organizerMail.sendEmail();
} catch (e) {
console.error("organizerMail.sendEmail failed", e)
}
if (!creationResult || !creationResult.disableConfirmationEmail) { if (!creationResult || !creationResult.disableConfirmationEmail) {
try {
await attendeeMail.sendEmail(); await attendeeMail.sendEmail();
} catch (e) {
console.error("attendeeMail.sendEmail failed", e)
}
} }
return { return {
@ -216,10 +224,18 @@ const updateMeeting = async (credential, uidToUpdate: String, calEvent: Calendar
const organizerMail = new EventOrganizerRescheduledMail(calEvent, newUid); const organizerMail = new EventOrganizerRescheduledMail(calEvent, newUid);
const attendeeMail = new EventAttendeeRescheduledMail(calEvent, newUid); const attendeeMail = new EventAttendeeRescheduledMail(calEvent, newUid);
try {
await organizerMail.sendEmail(); await organizerMail.sendEmail();
} catch (e) {
console.error("organizerMail.sendEmail failed", e)
}
if (!updateResult || !updateResult.disableConfirmationEmail) { if (!updateResult || !updateResult.disableConfirmationEmail) {
try {
await attendeeMail.sendEmail(); await attendeeMail.sendEmail();
} catch (e) {
console.error("attendeeMail.sendEmail failed", e)
}
} }
return { return {

3
package.json
View file

@ -22,7 +22,9 @@
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"dayjs": "^1.10.4", "dayjs": "^1.10.4",
"googleapis": "^67.1.1", "googleapis": "^67.1.1",
"handlebars": "^4.7.7",
"ics": "^2.27.0", "ics": "^2.27.0",
"lodash.debounce": "^4.0.8",
"lodash.merge": "^4.6.2", "lodash.merge": "^4.6.2",
"next": "^10.2.0", "next": "^10.2.0",
"next-auth": "^3.13.2", "next-auth": "^3.13.2",
@ -39,6 +41,7 @@
"devDependencies": { "devDependencies": {
"@types/jest": "^26.0.23", "@types/jest": "^26.0.23",
"@types/node": "^14.14.33", "@types/node": "^14.14.33",
"@types/nodemailer": "^6.4.2",
"@types/react": "^17.0.3", "@types/react": "^17.0.3",
"@typescript-eslint/eslint-plugin": "^4.27.0", "@typescript-eslint/eslint-plugin": "^4.27.0",
"@typescript-eslint/parser": "^4.27.0", "@typescript-eslint/parser": "^4.27.0",

64
pages/[user].tsx
View file

@ -1,20 +1,23 @@
import Head from 'next/head'; import { GetServerSideProps } from "next";
import Link from 'next/link'; import Head from "next/head";
import prisma from '../lib/prisma'; import Link from "next/link";
import Avatar from '../components/Avatar'; import prisma from "../lib/prisma";
import Avatar from "../components/Avatar";
export default function User(props) { export default function User(props): User {
const eventTypes = props.eventTypes.map(type => const eventTypes = props.eventTypes.map((type) => (
<li key={type.id}> <li key={type.id}>
<Link href={'/' + props.user.username + '/' + type.slug}> <Link href={`/${props.user.username}/${type.slug}`}>
<a className="block px-6 py-4"> <a className="block px-6 py-4">
<div className="inline-block w-3 h-3 rounded-full mr-2" style={{backgroundColor:getRandomColorCode()}}></div> <div
className="inline-block w-3 h-3 rounded-full mr-2"
style={{ backgroundColor: getRandomColorCode() }}></div>
<h2 className="inline-block font-medium">{type.title}</h2> <h2 className="inline-block font-medium">{type.title}</h2>
<p className="inline-block text-gray-400 ml-2">{type.description}</p> <p className="inline-block text-gray-400 ml-2">{type.description}</p>
</a> </a>
</Link> </Link>
</li> </li>
); ));
return ( return (
<div> <div>
<Head> <Head>
@ -25,66 +28,65 @@ export default function User(props) {
<main className="max-w-2xl mx-auto my-24"> <main className="max-w-2xl mx-auto my-24">
<div className="mb-8 text-center"> <div className="mb-8 text-center">
<Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" /> <Avatar user={props.user} className="mx-auto w-24 h-24 rounded-full mb-4" />
<h1 className="text-3xl font-semibold text-gray-800 mb-1">{props.user.name || props.user.username}</h1> <h1 className="text-3xl font-semibold text-gray-800 mb-1">
{props.user.name || props.user.username}
</h1>
<p className="text-gray-600">{props.user.bio}</p> <p className="text-gray-600">{props.user.bio}</p>
</div> </div>
<div className="bg-white shadow overflow-hidden rounded-md"> <div className="bg-white shadow overflow-hidden rounded-md">
<ul className="divide-y divide-gray-200"> <ul className="divide-y divide-gray-200">{eventTypes}</ul>
{eventTypes} {eventTypes.length == 0 && (
</ul>
{eventTypes.length == 0 &&
<div className="p-8 text-center text-gray-400"> <div className="p-8 text-center text-gray-400">
<h2 className="font-semibold text-3xl text-gray-600">Uh oh!</h2> <h2 className="font-semibold text-3xl text-gray-600">Uh oh!</h2>
<p className="max-w-md mx-auto">This user hasn't set up any event types yet.</p> <p className="max-w-md mx-auto">This user hasn&apos;t set up any event types yet.</p>
</div> </div>
} )}
</div> </div>
</main> </main>
</div> </div>
) );
} }
export async function getServerSideProps(context) { export const getServerSideProps: GetServerSideProps = async (context) => {
const user = await prisma.user.findFirst({ const user = await prisma.user.findFirst({
where: { where: {
username: context.query.user, username: context.query.user.toLowerCase(),
}, },
select: { select: {
id: true, id: true,
username: true, username: true,
email:true, email: true,
name: true, name: true,
bio: true, bio: true,
avatar: true, avatar: true,
eventTypes: true eventTypes: true,
} },
}); });
if (!user) { if (!user) {
return { return {
notFound: true, notFound: true,
} };
} }
const eventTypes = await prisma.eventType.findMany({ const eventTypes = await prisma.eventType.findMany({
where: { where: {
userId: user.id, userId: user.id,
hidden: false hidden: false,
} },
}); });
return { return {
props: { props: {
user, user,
eventTypes eventTypes,
}, },
} };
} };
// Auxiliary methods // Auxiliary methods
export function getRandomColorCode(): string {
export function getRandomColorCode() { let color = "#";
let color = '#';
for (let idx = 0; idx < 6; idx++) { for (let idx = 0; idx < 6; idx++) {
color += Math.floor(Math.random() * 10); color += Math.floor(Math.random() * 10);
} }

46
pages/[user]/[type].tsx
View file

@ -1,14 +1,10 @@
import { useEffect, useState, useMemo } from "react"; import { useEffect, useState, useMemo } from "react";
import { GetServerSideProps } from "next";
import Head from "next/head"; import Head from "next/head";
import prisma from "../../lib/prisma";
import dayjs, { Dayjs } from "dayjs";
import { ClockIcon, GlobeIcon, ChevronDownIcon } from "@heroicons/react/solid"; import { ClockIcon, GlobeIcon, ChevronDownIcon } from "@heroicons/react/solid";
import isSameOrBefore from "dayjs/plugin/isSameOrBefore"; import prisma from "../../lib/prisma";
import utc from "dayjs/plugin/utc"; import { useRouter } from "next/router";
import timezone from "dayjs/plugin/timezone"; import dayjs, { Dayjs } from "dayjs";
dayjs.extend(isSameOrBefore);
dayjs.extend(utc);
dayjs.extend(timezone);
import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry";
import AvailableTimes from "../../components/booking/AvailableTimes"; import AvailableTimes from "../../components/booking/AvailableTimes";
@ -17,10 +13,10 @@ import Avatar from "../../components/Avatar";
import { timeZone } from "../../lib/clock"; import { timeZone } from "../../lib/clock";
import DatePicker from "../../components/booking/DatePicker"; import DatePicker from "../../components/booking/DatePicker";
import PoweredByCalendso from "../../components/ui/PoweredByCalendso"; import PoweredByCalendso from "../../components/ui/PoweredByCalendso";
import { useRouter } from "next/router";
import getSlots from "@lib/slots"; import getSlots from "@lib/slots";
export default function Type(props) { export default function Type(props): Type {
// Get router variables
const router = useRouter(); const router = useRouter();
const { rescheduleUid } = router.query; const { rescheduleUid } = router.query;
@ -47,10 +43,10 @@ export default function Type(props) {
const changeDate = (date: Dayjs) => { const changeDate = (date: Dayjs) => {
telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters())); telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.dateSelected, collectPageParameters()));
setSelectedDate(date); setSelectedDate(date.tz(timeZone()));
}; };
const handleSelectTimeZone = (selectedTimeZone: string) => { const handleSelectTimeZone = (selectedTimeZone: string): void => {
if (selectedDate) { if (selectedDate) {
setSelectedDate(selectedDate.tz(selectedTimeZone)); setSelectedDate(selectedDate.tz(selectedTimeZone));
} }
@ -67,7 +63,21 @@ export default function Type(props) {
{rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username} | {rescheduleUid && "Reschedule"} {props.eventType.title} | {props.user.name || props.user.username} |
Calendso Calendso
</title> </title>
<link rel="icon" href="/favicon.ico" /> <meta name="title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"} />
<meta name="description" content={props.eventType.description} />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://calendso/" />
<meta property="og:title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"}/>
<meta property="og:description" content={props.eventType.description}/>
<meta property="og:image" content={"https://og-image-one-pi.vercel.app/" + encodeURIComponent("Meet **" + (props.user.name || props.user.username) + "** <br>" + props.eventType.description).replace(/'/g, "%27") + ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" + encodeURIComponent(props.user.avatar)} />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://calendso/" />
<meta property="twitter:title" content={"Meet " + (props.user.name || props.user.username) + " via Calendso"} />
<meta property="twitter:description" content={props.eventType.description} />
<meta property="twitter:image" content={"https://og-image-one-pi.vercel.app/" + encodeURIComponent("Meet **" + (props.user.name || props.user.username) + "** <br>" + props.eventType.description).replace(/'/g, "%27") + ".png?md=1&images=https%3A%2F%2Fcalendso.com%2Fcalendso-logo-white.svg&images=" + encodeURIComponent(props.user.avatar)} />
</Head> </Head>
<main <main
className={ className={
@ -85,7 +95,7 @@ export default function Type(props) {
{props.eventType.length} minutes {props.eventType.length} minutes
</p> </p>
<button <button
onClick={() => setIsTimeOptionsOpen(true)} onClick={() => setIsTimeOptionsOpen(!isTimeOptionsOpen)}
className="text-gray-500 mb-1 px-2 py-1 -ml-2"> className="text-gray-500 mb-1 px-2 py-1 -ml-2">
<GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <GlobeIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{timeZone()} {timeZone()}
@ -133,10 +143,10 @@ interface WorkingHours {
type Availability = WorkingHours; type Availability = WorkingHours;
export async function getServerSideProps(context) { export const getServerSideProps: GetServerSideProps = async (context) => {
const user = await prisma.user.findFirst({ const user = await prisma.user.findFirst({
where: { where: {
username: context.query.user, username: context.query.user.toLowerCase(),
}, },
select: { select: {
id: true, id: true,
@ -192,7 +202,7 @@ export async function getServerSideProps(context) {
getWorkingHours(user) || getWorkingHours(user) ||
[ [
{ {
days: [1, 2, 3, 4, 5, 6, 7], days: [0, 1, 2, 3, 4, 5, 6],
startTime: user.startTime, startTime: user.startTime,
length: user.endTime, length: user.endTime,
}, },
@ -205,4 +215,4 @@ export async function getServerSideProps(context) {
workingHours, workingHours,
}, },
}; };
} };

357
pages/[user]/book.tsx
View file

@ -1,68 +1,73 @@
import Head from 'next/head'; import Head from "next/head";
import Link from 'next/link'; import Link from "next/link";
import {useRouter} from 'next/router'; import { useRouter } from "next/router";
import {CalendarIcon, ClockIcon, LocationMarkerIcon} from '@heroicons/react/solid'; import { CalendarIcon, ClockIcon, ExclamationIcon, LocationMarkerIcon } from "@heroicons/react/solid";
import prisma from '../../lib/prisma'; import prisma from "../../lib/prisma";
import {collectPageParameters, telemetryEventTypes, useTelemetry} from "../../lib/telemetry"; import { collectPageParameters, telemetryEventTypes, useTelemetry } from "../../lib/telemetry";
import {useEffect, useState} from "react"; import { useEffect, useState } from "react";
import dayjs from 'dayjs'; import dayjs from "dayjs";
import utc from 'dayjs/plugin/utc'; import utc from "dayjs/plugin/utc";
import timezone from 'dayjs/plugin/timezone'; import timezone from "dayjs/plugin/timezone";
import 'react-phone-number-input/style.css'; import "react-phone-number-input/style.css";
import PhoneInput from 'react-phone-number-input'; import PhoneInput from "react-phone-number-input";
import {LocationType} from '../../lib/location'; import { LocationType } from "../../lib/location";
import Avatar from '../../components/Avatar'; import Avatar from "../../components/Avatar";
import Button from '../../components/ui/Button'; import Button from "../../components/ui/Button";
import {EventTypeCustomInputType} from "../../lib/eventTypeInput"; import { EventTypeCustomInputType } from "../../lib/eventTypeInput";
dayjs.extend(utc); dayjs.extend(utc);
dayjs.extend(timezone); dayjs.extend(timezone);
export default function Book(props) { export default function Book(props: any): JSX.Element {
const router = useRouter(); const router = useRouter();
const { date, user, rescheduleUid } = router.query; const { date, user, rescheduleUid } = router.query;
const [ is24h, setIs24h ] = useState(false); const [is24h, setIs24h] = useState(false);
const [ preferredTimeZone, setPreferredTimeZone ] = useState(''); const [preferredTimeZone, setPreferredTimeZone] = useState("");
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const locations = props.eventType.locations || []; const locations = props.eventType.locations || [];
const [ selectedLocation, setSelectedLocation ] = useState<LocationType>(locations.length === 1 ? locations[0].type : ''); const [selectedLocation, setSelectedLocation] = useState<LocationType>(
locations.length === 1 ? locations[0].type : ""
);
const telemetry = useTelemetry(); const telemetry = useTelemetry();
useEffect(() => { useEffect(() => {
setPreferredTimeZone(localStorage.getItem("timeOption.preferredTimeZone") || dayjs.tz.guess());
setIs24h(!!localStorage.getItem("timeOption.is24hClock"));
setPreferredTimeZone(localStorage.getItem('timeOption.preferredTimeZone') || dayjs.tz.guess()); telemetry.withJitsu((jitsu) => jitsu.track(telemetryEventTypes.timeSelected, collectPageParameters()));
setIs24h(!!localStorage.getItem('timeOption.is24hClock'));
telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.timeSelected, collectPageParameters()));
}); });
const locationInfo = (type: LocationType) => locations.find( const locationInfo = (type: LocationType) => locations.find((location) => location.type === type);
(location) => location.type === type
);
// TODO: Move to translations // TODO: Move to translations
const locationLabels = { const locationLabels = {
[LocationType.InPerson]: 'In-person meeting', [LocationType.InPerson]: "In-person meeting",
[LocationType.Phone]: 'Phone call', [LocationType.Phone]: "Phone call",
[LocationType.GoogleMeet]: 'Google Meet', [LocationType.GoogleMeet]: "Google Meet",
[LocationType.Zoom]: "Zoom Video",
}; };
const bookingHandler = (event) => { const bookingHandler = (event) => {
event.preventDefault(); const book = async () => {
setLoading(true);
setError(false);
let notes = ""; let notes = "";
if (props.eventType.customInputs) { if (props.eventType.customInputs) {
notes = props.eventType.customInputs.map(input => { notes = props.eventType.customInputs
.map((input) => {
const data = event.target["custom_" + input.id]; const data = event.target["custom_" + input.id];
if (!!data) { if (data) {
if (input.type === EventTypeCustomInputType.Bool) { if (input.type === EventTypeCustomInputType.Bool) {
return input.label + "\n" + (data.value ? "Yes" : "No") return input.label + "\n" + (data.value ? "Yes" : "No");
} else { } else {
return input.label + "\n" + data.value return input.label + "\n" + data.value;
} }
} }
}).join("\n\n") })
.join("\n\n");
} }
if (!!notes && !!event.target.notes.value) { if (!!notes && !!event.target.notes.value) {
notes += "\n\nAdditional notes:\n" + event.target.notes.value; notes += "\n\nAdditional notes:\n" + event.target.notes.value;
@ -70,62 +75,75 @@ export default function Book(props) {
notes += event.target.notes.value; notes += event.target.notes.value;
} }
let payload = { const payload = {
start: dayjs(date).format(), start: dayjs(date).format(),
end: dayjs(date).add(props.eventType.length, 'minute').format(), end: dayjs(date).add(props.eventType.length, "minute").format(),
name: event.target.name.value, name: event.target.name.value,
email: event.target.email.value, email: event.target.email.value,
notes: notes, notes: notes,
timeZone: preferredTimeZone, timeZone: preferredTimeZone,
eventTypeId: props.eventType.id, eventTypeId: props.eventType.id,
rescheduleUid: rescheduleUid rescheduleUid: rescheduleUid,
}; };
if (selectedLocation) { if (selectedLocation) {
switch (selectedLocation) { switch (selectedLocation) {
case LocationType.Phone: case LocationType.Phone:
payload['location'] = event.target.phone.value payload["location"] = event.target.phone.value;
break break;
case LocationType.InPerson: case LocationType.InPerson:
payload['location'] = locationInfo(selectedLocation).address payload["location"] = locationInfo(selectedLocation).address;
break break;
case LocationType.GoogleMeet: // Catches all other location types, such as Google Meet, Zoom etc.
payload['location'] = LocationType.GoogleMeet default:
break payload["location"] = selectedLocation;
} }
} }
telemetry.withJitsu(jitsu => jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters())); telemetry.withJitsu((jitsu) =>
const res = fetch( jitsu.track(telemetryEventTypes.bookingConfirmed, collectPageParameters())
'/api/book/' + user,
{
body: JSON.stringify(payload),
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
}
); );
let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${props.user.username}&reschedule=${!!rescheduleUid}&name=${payload.name}`; /*const res = await */ fetch("/api/book/" + user, {
if (payload['location']) { body: JSON.stringify(payload),
if (payload['location'].includes('integration')) { headers: {
"Content-Type": "application/json",
},
method: "POST",
});
// TODO When the endpoint is fixed, change this to await the result again
//if (res.ok) {
let successUrl = `/success?date=${date}&type=${props.eventType.id}&user=${
props.user.username
}&reschedule=${!!rescheduleUid}&name=${payload.name}`;
if (payload["location"]) {
if (payload["location"].includes("integration")) {
successUrl += "&location=" + encodeURIComponent("Web conferencing details to follow."); successUrl += "&location=" + encodeURIComponent("Web conferencing details to follow.");
} } else {
else { successUrl += "&location=" + encodeURIComponent(payload["location"]);
successUrl += "&location=" + encodeURIComponent(payload['location']);
} }
} }
router.push(successUrl); await router.push(successUrl);
} /*} else {
setLoading(false);
setError(true);
}*/
};
event.preventDefault();
book();
};
return ( return (
<div> <div>
<Head> <Head>
<title>{rescheduleUid ? 'Reschedule' : 'Confirm'} your {props.eventType.title} with {props.user.name || props.user.username} | Calendso</title> <title>
{rescheduleUid ? "Reschedule" : "Confirm"} your {props.eventType.title} with{" "}
{props.user.name || props.user.username} | Calendso
</title>
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
@ -140,93 +158,202 @@ export default function Book(props) {
<ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <ClockIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{props.eventType.length} minutes {props.eventType.length} minutes
</p> </p>
{selectedLocation === LocationType.InPerson && <p className="text-gray-500 mb-2"> {selectedLocation === LocationType.InPerson && (
<p className="text-gray-500 mb-2">
<LocationMarkerIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <LocationMarkerIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{locationInfo(selectedLocation).address} {locationInfo(selectedLocation).address}
</p>} </p>
)}
<p className="text-blue-600 mb-4"> <p className="text-blue-600 mb-4">
<CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" /> <CalendarIcon className="inline-block w-4 h-4 mr-1 -mt-1" />
{preferredTimeZone && dayjs(date).tz(preferredTimeZone).format( (is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")} {preferredTimeZone &&
dayjs(date)
.tz(preferredTimeZone)
.format((is24h ? "H:mm" : "h:mma") + ", dddd DD MMMM YYYY")}
</p> </p>
<p className="text-gray-600">{props.eventType.description}</p> <p className="text-gray-600">{props.eventType.description}</p>
</div> </div>
<div className="sm:w-1/2 pl-8 pr-4"> <div className="sm:w-1/2 pl-8 pr-4">
<form onSubmit={bookingHandler}> <form onSubmit={bookingHandler}>
<div className="mb-4"> <div className="mb-4">
<label htmlFor="name" className="block text-sm font-medium text-gray-700">Your name</label> <label htmlFor="name" className="block text-sm font-medium text-gray-700">
Your name
</label>
<div className="mt-1"> <div className="mt-1">
<input type="text" name="name" id="name" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="John Doe" defaultValue={props.booking ? props.booking.attendees[0].name : ''} /> <input
type="text"
name="name"
id="name"
required
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="John Doe"
defaultValue={props.booking ? props.booking.attendees[0].name : ""}
/>
</div> </div>
</div> </div>
<div className="mb-4"> <div className="mb-4">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">Email address</label> <label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email address
</label>
<div className="mt-1"> <div className="mt-1">
<input type="email" name="email" id="email" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="you@example.com" defaultValue={props.booking ? props.booking.attendees[0].email : ''} /> <input
type="email"
name="email"
id="email"
required
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="you@example.com"
defaultValue={props.booking ? props.booking.attendees[0].email : ""}
/>
</div> </div>
</div> </div>
{locations.length > 1 && ( {locations.length > 1 && (
<div className="mb-4"> <div className="mb-4">
<span className="block text-sm font-medium text-gray-700">Location</span> <span className="block text-sm font-medium text-gray-700">Location</span>
{locations.map( (location) => ( {locations.map((location) => (
<label key={location.type} className="block"> <label key={location.type} className="block">
<input type="radio" required onChange={(e) => setSelectedLocation(e.target.value)} className="location" name="location" value={location.type} checked={selectedLocation === location.type} /> <input
type="radio"
required
onChange={(e) => setSelectedLocation(e.target.value)}
className="location"
name="location"
value={location.type}
checked={selectedLocation === location.type}
/>
<span className="text-sm ml-2">{locationLabels[location.type]}</span> <span className="text-sm ml-2">{locationLabels[location.type]}</span>
</label> </label>
))} ))}
</div> </div>
)} )}
{selectedLocation === LocationType.Phone && (<div className="mb-4"> {selectedLocation === LocationType.Phone && (
<label htmlFor="phone" className="block text-sm font-medium text-gray-700">Phone Number</label>
<div className="mt-1">
<PhoneInput name="phone" placeholder="Enter phone number" id="phone" required className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" onChange={() => {}} />
</div>
</div>)}
{props.eventType.customInputs && props.eventType.customInputs.sort((a,b) => a.id - b.id).map(input => (
<div className="mb-4"> <div className="mb-4">
{input.type !== EventTypeCustomInputType.Bool && <label htmlFor="phone" className="block text-sm font-medium text-gray-700">
<label htmlFor={input.label} className="block text-sm font-medium text-gray-700 mb-1">{input.label}</label>} Phone Number
{input.type === EventTypeCustomInputType.TextLong && </label>
<textarea name={"custom_" + input.id} id={"custom_" + input.id} <div className="mt-1">
<PhoneInput
name="phone"
placeholder="Enter phone number"
id="phone"
required
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div>
</div>
)}
{props.eventType.customInputs &&
props.eventType.customInputs
.sort((a, b) => a.id - b.id)
.map((input) => (
<div className="mb-4" key={"input-" + input.label.toLowerCase}>
{input.type !== EventTypeCustomInputType.Bool && (
<label
htmlFor={input.label}
className="block text-sm font-medium text-gray-700 mb-1">
{input.label}
</label>
)}
{input.type === EventTypeCustomInputType.TextLong && (
<textarea
name={"custom_" + input.id}
id={"custom_" + input.id}
required={input.required} required={input.required}
rows={3} rows={3}
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder=""/>} placeholder=""
{input.type === EventTypeCustomInputType.Text && />
<input type="text" name={"custom_" + input.id} id={"custom_" + input.id} )}
{input.type === EventTypeCustomInputType.Text && (
<input
type="text"
name={"custom_" + input.id}
id={"custom_" + input.id}
required={input.required} required={input.required}
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder=""/>} placeholder=""
{input.type === EventTypeCustomInputType.Number && />
<input type="number" name={"custom_" + input.id} id={"custom_" + input.id} )}
{input.type === EventTypeCustomInputType.Number && (
<input
type="number"
name={"custom_" + input.id}
id={"custom_" + input.id}
required={input.required} required={input.required}
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder=""/>} placeholder=""
{input.type === EventTypeCustomInputType.Bool && />
)}
{input.type === EventTypeCustomInputType.Bool && (
<div className="flex items-center h-5"> <div className="flex items-center h-5">
<input type="checkbox" name={"custom_" + input.id} id={"custom_" + input.id} <input
type="checkbox"
name={"custom_" + input.id}
id={"custom_" + input.id}
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2" className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
placeholder=""/> placeholder=""
<label htmlFor={input.label} className="block text-sm font-medium text-gray-700">{input.label}</label> />
</div>} <label htmlFor={input.label} className="block text-sm font-medium text-gray-700">
{input.label}
</label>
</div>
)}
</div> </div>
))} ))}
<div className="mb-4"> <div className="mb-4">
<label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">Additional notes</label> <label htmlFor="notes" className="block text-sm font-medium text-gray-700 mb-1">
<textarea name="notes" id="notes" rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" placeholder="Please share anything that will help prepare for our meeting." defaultValue={props.booking ? props.booking.description : ''}/> Additional notes
</label>
<textarea
name="notes"
id="notes"
rows={3}
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
placeholder="Please share anything that will help prepare for our meeting."
defaultValue={props.booking ? props.booking.description : ""}
/>
</div> </div>
<div className="flex items-start"> <div className="flex items-start">
<Button type="submit" className="btn btn-primary">{rescheduleUid ? 'Reschedule' : 'Confirm'}</Button> <Button type="submit" loading={loading} className="btn btn-primary">
<Link href={"/" + props.user.username + "/" + props.eventType.slug + (rescheduleUid ? "?rescheduleUid=" + rescheduleUid : "")}> {rescheduleUid ? "Reschedule" : "Confirm"}
</Button>
<Link
href={
"/" +
props.user.username +
"/" +
props.eventType.slug +
(rescheduleUid ? "?rescheduleUid=" + rescheduleUid : "")
}>
<a className="ml-2 btn btn-white">Cancel</a> <a className="ml-2 btn btn-white">Cancel</a>
</Link> </Link>
</div> </div>
</form> </form>
{error && (
<div className="bg-yellow-50 border-l-4 border-yellow-400 p-4 mt-2">
<div className="flex">
<div className="flex-shrink-0">
<ExclamationIcon className="h-5 w-5 text-yellow-400" aria-hidden="true" />
</div>
<div className="ml-3">
<p className="text-sm text-yellow-700">
Could not {rescheduleUid ? "reschedule" : "book"} the meeting. Please try again or{" "}
<a
href={"mailto:" + props.user.email}
className="font-medium underline text-yellow-700 hover:text-yellow-600">
Contact {props.user.name} via e-mail
</a>
</p>
</div>
</div>
</div>
)}
</div> </div>
</div> </div>
</div> </div>
</main> </main>
</div> </div>
) );
} }
export async function getServerSideProps(context) { export async function getServerSideProps(context) {
@ -237,11 +364,11 @@ export async function getServerSideProps(context) {
select: { select: {
username: true, username: true,
name: true, name: true,
email:true, email: true,
bio: true, bio: true,
avatar: true, avatar: true,
eventTypes: true eventTypes: true,
} },
}); });
const eventType = await prisma.eventType.findUnique({ const eventType = await prisma.eventType.findUnique({
@ -256,25 +383,25 @@ export async function getServerSideProps(context) {
length: true, length: true,
locations: true, locations: true,
customInputs: true, customInputs: true,
} },
}); });
let booking = null; let booking = null;
if(context.query.rescheduleUid) { if (context.query.rescheduleUid) {
booking = await prisma.booking.findFirst({ booking = await prisma.booking.findFirst({
where: { where: {
uid: context.query.rescheduleUid uid: context.query.rescheduleUid,
}, },
select: { select: {
description: true, description: true,
attendees: { attendees: {
select: { select: {
email: true, email: true,
name: true name: true,
} },
} },
} },
}); });
} }
@ -282,7 +409,7 @@ export async function getServerSideProps(context) {
props: { props: {
user, user,
eventType, eventType,
booking booking,
}, },
} };
} }

77
pages/api/auth/forgot-password.ts Normal file
View file

@ -0,0 +1,77 @@
import { NextApiRequest, NextApiResponse } from "next";
import prisma from "../../../lib/prisma";
import dayjs from "dayjs";
import { User, ResetPasswordRequest } from "@prisma/client";
import sendEmail from "../../../lib/emails/sendMail";
import { buildForgotPasswordMessage } from "../../../lib/forgot-password/messaging/forgot-password";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
dayjs.extend(utc);
dayjs.extend(timezone);
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method !== "POST") {
return res.status(405).json({ message: "" });
}
try {
const rawEmail = req.body?.email;
const maybeUser: User = await prisma.user.findUnique({
where: {
email: rawEmail,
},
select: {
name: true,
},
});
if (!maybeUser) {
return res.status(400).json({ message: "Couldn't find an account for this email" });
}
const now = dayjs().toDate();
const maybePreviousRequest = await prisma.resetPasswordRequest.findMany({
where: {
email: rawEmail,
expires: {
gt: now,
},
},
});
let passwordRequest: ResetPasswordRequest;
if (maybePreviousRequest && maybePreviousRequest?.length >= 1) {
passwordRequest = maybePreviousRequest[0];
} else {
const expiry = dayjs().add(6, "hours").toDate();
const createdResetPasswordRequest = await prisma.resetPasswordRequest.create({
data: {
email: rawEmail,
expires: expiry,
},
});
passwordRequest = createdResetPasswordRequest;
}
const passwordResetLink = `${process.env.BASE_URL}/auth/forgot-password/${passwordRequest.id}`;
const { subject, message } = buildForgotPasswordMessage({
user: {
name: maybeUser.name,
},
link: passwordResetLink,
});
await sendEmail({
to: rawEmail,
subject: subject,
text: message,
});
return res.status(201).json({ message: "Reset Requested", data: passwordRequest });
} catch (reason) {
console.error(reason);
return res.status(500).json({ message: "Unable to create password reset request" });
}
}

60
pages/api/auth/reset-password.ts Normal file
View file

@ -0,0 +1,60 @@
import { NextApiRequest, NextApiResponse } from "next";
import prisma from "../../../lib/prisma";
import dayjs from "dayjs";
import { User, ResetPasswordRequest } from "@prisma/client";
import timezone from "dayjs/plugin/timezone";
import utc from "dayjs/plugin/utc";
dayjs.extend(utc);
dayjs.extend(timezone);
import { hashPassword } from "../../../lib/auth";
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
if (req.method !== "POST") {
return res.status(400).json({ message: "" });
}
try {
const rawPassword = req.body?.password;
const rawRequestId = req.body?.requestId;
if (!rawPassword || !rawRequestId) {
return res.status(400).json({ message: "Couldn't find an account for this email" });
}
const maybeRequest: ResetPasswordRequest = await prisma.resetPasswordRequest.findUnique({
where: {
id: rawRequestId,
},
});
if (!maybeRequest) {
return res.status(400).json({ message: "Couldn't find an account for this email" });
}
const maybeUser: User = await prisma.user.findUnique({
where: {
email: maybeRequest.email,
},
});
if (!maybeUser) {
return res.status(400).json({ message: "Couldn't find an account for this email" });
}
const hashedPassword = await hashPassword(rawPassword);
await prisma.user.update({
where: {
id: maybeUser.id,
},
data: {
password: hashedPassword,
},
});
return res.status(201).json({ message: "Password reset." });
} catch (reason) {
console.error(reason);
return res.status(500).json({ message: "Unable to create password reset request" });
}
}

6
pages/api/availability/eventtype.ts
View file

@ -22,6 +22,12 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
customInputs: !req.body.customInputs customInputs: !req.body.customInputs
? undefined ? undefined
: { : {
deleteMany: {
eventTypeId: req.body.id,
NOT: {
id: {in: req.body.customInputs.filter(input => !!input.id).map(e => e.id)}
}
},
createMany: { createMany: {
data: req.body.customInputs.filter(input => !input.id).map(input => ({ data: req.body.customInputs.filter(input => !input.id).map(input => ({
type: input.type, type: input.type,

304
pages/api/book/[user].ts
View file

@ -1,38 +1,70 @@
import type {NextApiRequest, NextApiResponse} from 'next'; import type { NextApiRequest, NextApiResponse } from "next";
import prisma from '../../../lib/prisma'; import prisma from "../../../lib/prisma";
import {CalendarEvent, createEvent, updateEvent} from '../../../lib/calendarClient'; import { CalendarEvent, createEvent, updateEvent, getBusyCalendarTimes } from "../../../lib/calendarClient";
import async from 'async'; import async from "async";
import {v5 as uuidv5} from 'uuid'; import { v5 as uuidv5 } from "uuid";
import short from 'short-uuid'; import short from "short-uuid";
import {createMeeting, updateMeeting} from "../../../lib/videoClient"; import { createMeeting, updateMeeting, getBusyVideoTimes } from "../../../lib/videoClient";
import EventAttendeeMail from "../../../lib/emails/EventAttendeeMail"; import EventAttendeeMail from "../../../lib/emails/EventAttendeeMail";
import {getEventName} from "../../../lib/event"; import { getEventName } from "../../../lib/event";
import { LocationType } from '../../../lib/location'; import { LocationType } from "../../../lib/location";
import merge from "lodash.merge" import merge from "lodash.merge";
const translator = short(); const translator = short();
import dayjs from "dayjs";
interface p { const isAvailable = (busyTimes, time, length) => {
location: string // Check for conflicts
let t = true;
busyTimes.forEach((busyTime) => {
const startTime = dayjs(busyTime.start);
const endTime = dayjs(busyTime.end);
// Check if start times are the same
if (dayjs(time).format("HH:mm") == startTime.format("HH:mm")) {
t = false;
}
// Check if time is between start and end times
if (dayjs(time).isBetween(startTime, endTime)) {
t = false;
}
// Check if slot end time is between start and end time
if (dayjs(time).add(length, "minutes").isBetween(startTime, endTime)) {
t = false;
}
// Check if startTime is between slot
if (startTime.isBetween(dayjs(time), dayjs(time).add(length, "minutes"))) {
t = false;
}
});
return t;
};
interface GetLocationRequestFromIntegrationRequest {
location: string;
} }
const getLocationRequestFromIntegration = ({location}: p) => { const getLocationRequestFromIntegration = ({ location }: GetLocationRequestFromIntegrationRequest) => {
if (location === LocationType.GoogleMeet.valueOf()) { if (location === LocationType.GoogleMeet.valueOf()) {
const requestId = uuidv5(location, uuidv5.URL) const requestId = uuidv5(location, uuidv5.URL);
return { return {
conferenceData: { conferenceData: {
createRequest: { createRequest: {
requestId: requestId requestId: requestId,
} },
} },
} };
} }
return null return null;
} };
export default async function handler(req: NextApiRequest, res: NextApiResponse) { export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const {user} = req.query; const { user } = req.query;
const currentUser = await prisma.user.findFirst({ const currentUser = await prisma.user.findFirst({
where: { where: {
@ -44,27 +76,61 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
timeZone: true, timeZone: true,
email: true, email: true,
name: true, name: true,
} },
}); });
const selectedCalendars = await prisma.selectedCalendar.findMany({
where: {
userId: currentUser.id,
},
});
// Split credentials up into calendar credentials and video credentials // Split credentials up into calendar credentials and video credentials
const calendarCredentials = currentUser.credentials.filter(cred => cred.type.endsWith('_calendar')); const calendarCredentials = currentUser.credentials.filter((cred) => cred.type.endsWith("_calendar"));
const videoCredentials = currentUser.credentials.filter(cred => cred.type.endsWith('_video')); const videoCredentials = currentUser.credentials.filter((cred) => cred.type.endsWith("_video"));
const hasCalendarIntegrations =
currentUser.credentials.filter((cred) => cred.type.endsWith("_calendar")).length > 0;
const hasVideoIntegrations =
currentUser.credentials.filter((cred) => cred.type.endsWith("_video")).length > 0;
const calendarAvailability = await getBusyCalendarTimes(
currentUser.credentials,
dayjs(req.body.start).startOf("day").utc().format(),
dayjs(req.body.end).endOf("day").utc().format(),
selectedCalendars
);
const videoAvailability = await getBusyVideoTimes(
currentUser.credentials,
dayjs(req.body.start).startOf("day").utc().format(),
dayjs(req.body.end).endOf("day").utc().format()
);
let commonAvailability = [];
if (hasCalendarIntegrations && hasVideoIntegrations) {
commonAvailability = calendarAvailability.filter((availability) =>
videoAvailability.includes(availability)
);
} else if (hasVideoIntegrations) {
commonAvailability = videoAvailability;
} else if (hasCalendarIntegrations) {
commonAvailability = calendarAvailability;
}
const rescheduleUid = req.body.rescheduleUid; const rescheduleUid = req.body.rescheduleUid;
const selectedEventType = await prisma.eventType.findFirst({ const selectedEventType = await prisma.eventType.findFirst({
where: { where: {
userId: currentUser.id, userId: currentUser.id,
id: req.body.eventTypeId id: req.body.eventTypeId,
}, },
select: { select: {
eventName: true, eventName: true,
title: true title: true,
} length: true,
},
}); });
let rawLocation = req.body.location const rawLocation = req.body.location;
let evt: CalendarEvent = { let evt: CalendarEvent = {
type: selectedEventType.title, type: selectedEventType.title,
@ -72,40 +138,44 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
description: req.body.notes, description: req.body.notes,
startTime: req.body.start, startTime: req.body.start,
endTime: req.body.end, endTime: req.body.end,
organizer: {email: currentUser.email, name: currentUser.name, timeZone: currentUser.timeZone}, organizer: { email: currentUser.email, name: currentUser.name, timeZone: currentUser.timeZone },
attendees: [ attendees: [{ email: req.body.email, name: req.body.name, timeZone: req.body.timeZone }],
{email: req.body.email, name: req.body.name, timeZone: req.body.timeZone}
]
}; };
// If phone or inPerson use raw location // If phone or inPerson use raw location
// set evt.location to req.body.location // set evt.location to req.body.location
if (!rawLocation.includes('integration')) { if (!rawLocation?.includes("integration")) {
evt.location = rawLocation evt.location = rawLocation;
} }
// If location is set to an integration location // If location is set to an integration location
// Build proper transforms for evt object // Build proper transforms for evt object
// Extend evt object with those transformations // Extend evt object with those transformations
if (rawLocation.includes('integration')) { if (rawLocation?.includes("integration")) {
let maybeLocationRequestObject = getLocationRequestFromIntegration({ const maybeLocationRequestObject = getLocationRequestFromIntegration({
location: rawLocation location: rawLocation,
}) });
evt = merge(evt, maybeLocationRequestObject) evt = merge(evt, maybeLocationRequestObject);
} }
const eventType = await prisma.eventType.findFirst({ const eventType = await prisma.eventType.findFirst({
where: { where: {
userId: currentUser.id, userId: currentUser.id,
title: evt.type title: evt.type,
}, },
select: { select: {
id: true id: true,
} },
}); });
// TODO isAvailable was throwing an error
const isAvailableToBeBooked = true;//isAvailable(commonAvailability, req.body.start, selectedEventType.length);
if (!isAvailableToBeBooked) {
return res.status(400).json({ message: `${currentUser.name} is unavailable at this time.` });
}
let results = []; let results = [];
let referencesToCreate = []; let referencesToCreate = [];
@ -113,7 +183,7 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
// Reschedule event // Reschedule event
const booking = await prisma.booking.findFirst({ const booking = await prisma.booking.findFirst({
where: { where: {
uid: rescheduleUid uid: rescheduleUid,
}, },
select: { select: {
id: true, id: true,
@ -121,99 +191,126 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
select: { select: {
id: true, id: true,
type: true, type: true,
uid: true uid: true,
} },
} },
} },
}); });
// Use all integrations // Use all integrations
results = results.concat(await async.mapLimit(calendarCredentials, 5, async (credential) => { results = results.concat(
await async.mapLimit(calendarCredentials, 5, async (credential) => {
const bookingRefUid = booking.references.filter((ref) => ref.type === credential.type)[0].uid; const bookingRefUid = booking.references.filter((ref) => ref.type === credential.type)[0].uid;
const response = await updateEvent(credential, bookingRefUid, evt); return updateEvent(credential, bookingRefUid, evt)
.then((response) => ({ type: credential.type, success: true, response }))
.catch((e) => {
console.error("updateEvent failed", e);
return { type: credential.type, success: false };
});
})
);
return { results = results.concat(
type: credential.type, await async.mapLimit(videoCredentials, 5, async (credential) => {
response
};
}));
results = results.concat(await async.mapLimit(videoCredentials, 5, async (credential) => {
const bookingRefUid = booking.references.filter((ref) => ref.type === credential.type)[0].uid; const bookingRefUid = booking.references.filter((ref) => ref.type === credential.type)[0].uid;
const response = await updateMeeting(credential, bookingRefUid, evt); return updateMeeting(credential, bookingRefUid, evt)
return { .then((response) => ({ type: credential.type, success: true, response }))
type: credential.type, .catch((e) => {
response console.error("updateMeeting failed", e);
}; return { type: credential.type, success: false };
})); });
})
);
if (results.length > 0 && results.every((res) => !res.success)) {
res.status(500).json({ message: "Rescheduling failed" });
return;
}
// Clone elements // Clone elements
referencesToCreate = [...booking.references]; referencesToCreate = [...booking.references];
// Now we can delete the old booking and its references. // Now we can delete the old booking and its references.
let bookingReferenceDeletes = prisma.bookingReference.deleteMany({ const bookingReferenceDeletes = prisma.bookingReference.deleteMany({
where: { where: {
bookingId: booking.id bookingId: booking.id,
} },
}); });
let attendeeDeletes = prisma.attendee.deleteMany({ const attendeeDeletes = prisma.attendee.deleteMany({
where: { where: {
bookingId: booking.id bookingId: booking.id,
} },
}); });
let bookingDeletes = prisma.booking.delete({ const bookingDeletes = prisma.booking.delete({
where: { where: {
uid: rescheduleUid uid: rescheduleUid,
} },
}); });
await Promise.all([ await Promise.all([bookingReferenceDeletes, attendeeDeletes, bookingDeletes]);
bookingReferenceDeletes,
attendeeDeletes,
bookingDeletes
]);
} else { } else {
// Schedule event // Schedule event
results = results.concat(await async.mapLimit(calendarCredentials, 5, async (credential) => { results = results.concat(
const response = await createEvent(credential, evt); await async.mapLimit(calendarCredentials, 5, async (credential) => {
return { return createEvent(credential, evt)
type: credential.type, .then((response) => ({ type: credential.type, success: true, response }))
response .catch((e) => {
}; console.error("createEvent failed", e);
})); return { type: credential.type, success: false };
});
})
);
results = results.concat(await async.mapLimit(videoCredentials, 5, async (credential) => { results = results.concat(
const response = await createMeeting(credential, evt); await async.mapLimit(videoCredentials, 5, async (credential) => {
return { return createMeeting(credential, evt)
type: credential.type, .then((response) => ({ type: credential.type, success: true, response }))
response .catch((e) => {
}; console.error("createMeeting failed", e);
})); return { type: credential.type, success: false };
});
})
);
referencesToCreate = results.map((result => { if (results.length > 0 && results.every((res) => !res.success)) {
res.status(500).json({ message: "Booking failed" });
return;
}
referencesToCreate = results.map((result) => {
return { return {
type: result.type, type: result.type,
uid: result.response.createdEvent.id.toString() uid: result.response.createdEvent.id.toString(),
}; };
})); });
} }
const hashUID =
results.length > 0
? results[0].response.uid
: translator.fromUUID(uuidv5(JSON.stringify(evt), uuidv5.URL));
// TODO Should just be set to the true case as soon as we have a "bare email" integration class. // TODO Should just be set to the true case as soon as we have a "bare email" integration class.
// UID generation should happen in the integration itself, not here. // UID generation should happen in the integration itself, not here.
const hashUID = results.length > 0 ? results[0].response.uid : translator.fromUUID(uuidv5(JSON.stringify(evt), uuidv5.URL)); if (results.length === 0) {
if(results.length === 0) {
// Legacy as well, as soon as we have a separate email integration class. Just used // Legacy as well, as soon as we have a separate email integration class. Just used
// to send an email even if there is no integration at all. // to send an email even if there is no integration at all.
try {
const mail = new EventAttendeeMail(evt, hashUID); const mail = new EventAttendeeMail(evt, hashUID);
await mail.sendEmail(); await mail.sendEmail();
} catch (e) {
console.error("Sending legacy event mail failed", e);
res.status(500).json({ message: "Booking failed" });
return;
}
} }
try {
await prisma.booking.create({ await prisma.booking.create({
data: { data: {
uid: hashUID, uid: hashUID,
userId: currentUser.id, userId: currentUser.id,
references: { references: {
create: referencesToCreate create: referencesToCreate,
}, },
eventTypeId: eventType.id, eventTypeId: eventType.id,
@ -223,10 +320,15 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
endTime: evt.endTime, endTime: evt.endTime,
attendees: { attendees: {
create: evt.attendees create: evt.attendees,
} },
} },
}); });
} catch (e) {
console.error("Error when saving booking to db", e);
res.status(500).json({ message: "Booking already exists" });
return;
}
res.status(200).json(results); res.status(204).json({});
} }

231
pages/auth/forgot-password/[id].tsx Normal file
View file

@ -0,0 +1,231 @@
import { getCsrfToken } from "next-auth/client";
import prisma from "../../../lib/prisma";
import Head from "next/head";
import React from "react";
import debounce from "lodash.debounce";
import dayjs from "dayjs";
import { ResetPasswordRequest } from "@prisma/client";
import { useMemo } from "react";
import Link from "next/link";
import { GetServerSidePropsContext } from "next";
type Props = {
id: string;
resetPasswordRequest: ResetPasswordRequest;
csrfToken: string;
};
export default function Page({ resetPasswordRequest, csrfToken }: Props) {
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);
const [success, setSuccess] = React.useState(false);
const [password, setPassword] = React.useState("");
const handleChange = (e) => {
setPassword(e.target.value);
};
const submitChangePassword = async ({ password, requestId }) => {
try {
const res = await fetch("/api/auth/reset-password", {
method: "POST",
body: JSON.stringify({ requestId: requestId, password: password }),
headers: {
"Content-Type": "application/json",
},
});
const json = await res.json();
if (!res.ok) {
setError(json);
} else {
setSuccess(true);
}
return json;
} catch (reason) {
setError({ message: "An unexpected error occurred. Try again." });
} finally {
setLoading(false);
}
};
const debouncedChangePassword = debounce(submitChangePassword, 250);
const handleSubmit = async (e) => {
e.preventDefault();
if (!password) {
return;
}
if (loading) {
return;
}
setLoading(true);
setError(null);
setSuccess(false);
await debouncedChangePassword({ password, requestId: resetPasswordRequest.id });
};
const Success = () => {
return (
<>
<div className="space-y-6">
<div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Success</h2>
</div>
<p>Your password has been reset. You can now login with your newly created password.</p>
<Link href="/auth/login">
<button
type="button"
className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Login
</button>
</Link>
</div>
</>
);
};
const Expired = () => {
return (
<>
<div className="space-y-6">
<div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Whoops</h2>
<h2 className="text-center text-3xl font-extrabold text-gray-900">That Request is Expired.</h2>
</div>
<p>
That request is expired. You can back and enter the email associated with your account and we will
you another link to reset your password.
</p>
<Link href="/auth/forgot-password">
<button
type="button"
className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Try Again
</button>
</Link>
</div>
</>
);
};
const isRequestExpired = useMemo(() => {
const now = dayjs();
return dayjs(resetPasswordRequest.expires).isBefore(now);
}, [resetPasswordRequest]);
return (
<div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<Head>
<title>Reset Password</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white py-8 px-4 mx-2 shadow rounded-lg sm:px-10 space-y-6">
{isRequestExpired && <Expired />}
{!isRequestExpired && !success && (
<>
<div className="space-y-6">
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Reset Password</h2>
<p>Enter the new password you&apos;d like for your account.</p>
{error && <p className="text-red-600">{error.message}</p>}
</div>
<form className="space-y-6" onSubmit={handleSubmit} action="#">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
New Password
</label>
<div className="mt-1">
<input
onChange={handleChange}
id="password"
name="password"
type="password"
autoComplete="password"
required
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
</div>
<div>
<button
type="submit"
disabled={loading}
className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
loading ? "cursor-not-allowed" : ""
}`}>
{loading && (
<svg
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
)}
Submit
</button>
</div>
</form>
</>
)}
{!isRequestExpired && success && (
<>
<Success />
</>
)}
</div>
</div>
</div>
);
}
export async function getServerSideProps(context: GetServerSidePropsContext) {
const id = context.params.id;
try {
const resetPasswordRequest = await prisma.resetPasswordRequest.findUnique({
where: {
id: id,
},
select: {
id: true,
expires: true,
},
});
return {
props: {
resetPasswordRequest: {
...resetPasswordRequest,
expires: resetPasswordRequest.expires.toString(),
},
id,
csrfToken: await getCsrfToken({ req: context.req }),
},
};
} catch (reason) {
return {
notFound: true,
};
}
}

153
pages/auth/forgot-password/index.tsx Normal file
View file

@ -0,0 +1,153 @@
import Head from "next/head";
import React from "react";
import { getCsrfToken } from "next-auth/client";
import debounce from "lodash.debounce";
export default function Page({ csrfToken }) {
const [loading, setLoading] = React.useState(false);
const [error, setError] = React.useState(null);
const [success, setSuccess] = React.useState(false);
const [email, setEmail] = React.useState("");
const handleChange = (e) => {
setEmail(e.target.value);
};
const submitForgotPasswordRequest = async ({ email }) => {
try {
const res = await fetch("/api/auth/forgot-password", {
method: "POST",
body: JSON.stringify({ email: email }),
headers: {
"Content-Type": "application/json",
},
});
const json = await res.json();
if (!res.ok) {
setError(json);
} else {
setSuccess(true);
}
return json;
} catch (reason) {
setError({ message: "An unexpected error occurred. Try again." });
} finally {
setLoading(false);
}
};
const debouncedHandleSubmitPasswordRequest = debounce(submitForgotPasswordRequest, 250);
const handleSubmit = async (e) => {
e.preventDefault();
if (!email) {
return;
}
if (loading) {
return;
}
setLoading(true);
setError(null);
setSuccess(false);
await debouncedHandleSubmitPasswordRequest({ email });
};
const Success = () => {
return (
<div className="space-y-6">
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Done</h2>
<p>Check your email. We sent you a link to reset your password.</p>
{error && <p className="text-red-600">{error.message}</p>}
</div>
);
};
return (
<div className="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<Head>
<title>Forgot Password</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white py-8 px-4 mx-2 shadow rounded-lg sm:px-10 space-y-6">
{success && <Success />}
{!success && (
<>
<div className="space-y-6">
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Forgot Password</h2>
<p>
Enter the email address associated with your account and we will send you a link to reset
your password.
</p>
{error && <p className="text-red-600">{error.message}</p>}
</div>
<form className="space-y-6" onSubmit={handleSubmit} action="#">
<input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email address
</label>
<div className="mt-1">
<input
onChange={handleChange}
id="email"
name="email"
type="email"
autoComplete="email"
placeholder="john.doe@example.com"
required
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div>
</div>
<div>
<button
type="submit"
disabled={loading}
className={`w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 ${
loading ? "cursor-not-allowed" : ""
}`}>
{loading && (
<svg
className="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24">
<circle
className="opacity-25"
cx="12"
cy="12"
r="10"
stroke="currentColor"
strokeWidth="4"></circle>
<path
className="opacity-75"
fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
)}
Request Password Reset
</button>
</div>
</form>
</>
)}
</div>
</div>
</div>
);
}
Page.getInitialProps = async ({ req }) => {
return {
csrfToken: await getCsrfToken({ req }),
};
};

54
pages/auth/login.tsx
View file

@ -1,5 +1,6 @@
import Head from 'next/head'; import Head from "next/head";
import { getCsrfToken } from 'next-auth/client'; import Link from "next/link";
import { getCsrfToken } from "next-auth/client";
export default function Login({ csrfToken }) { export default function Login({ csrfToken }) {
return ( return (
@ -9,21 +10,27 @@ export default function Login({ csrfToken }) {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<div className="sm:mx-auto sm:w-full sm:max-w-md"> <div className="sm:mx-auto sm:w-full sm:max-w-md">
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900"> <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
Sign in to your account
</h2>
</div> </div>
<div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md"> <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div className="bg-white py-8 px-4 mx-2 shadow rounded-lg sm:px-10"> <div className="bg-white py-8 px-4 mx-2 shadow rounded-lg sm:px-10">
<form className="space-y-6" method="post" action="/api/auth/callback/credentials"> <form className="space-y-6" method="post" action="/api/auth/callback/credentials">
<input name='csrfToken' type='hidden' defaultValue={csrfToken} hidden/> <input name="csrfToken" type="hidden" defaultValue={csrfToken} hidden />
<div> <div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700"> <label htmlFor="email" className="block text-sm font-medium text-gray-700">
Email address Email address
</label> </label>
<div className="mt-1"> <div className="mt-1">
<input id="email" name="email" type="email" autoComplete="email" placeholder="john.doe@example.com" required className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" /> <input
id="email"
name="email"
type="email"
autoComplete="email"
placeholder="john.doe@example.com"
required
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div> </div>
</div> </div>
@ -32,24 +39,41 @@ export default function Login({ csrfToken }) {
Password Password
</label> </label>
<div className="mt-1"> <div className="mt-1">
<input id="password" name="password" type="password" autoComplete="current-password" placeholder="•••••••••••••" required className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" /> <input
id="password"
name="password"
type="password"
autoComplete="current-password"
placeholder="•••••••••••••"
required
className="appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
/>
</div> </div>
</div> </div>
<div> <div className="space-y-2">
<button type="submit" className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> <button
type="submit"
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Sign in Sign in
</button> </button>
<Link href="/auth/forgot-password">
<button
type="button"
className="w-full flex justify-center py-2 px-4 text-sm font-medium text-blue-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Forgot Password?
</button>
</Link>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div> </div>
) );
} }
Login.getInitialProps = async ({ req, res }) => { Login.getInitialProps = async ({ req }) => {
return { return {
csrfToken: await getCsrfToken({ req }) csrfToken: await getCsrfToken({ req }),
} };
} };

168
pages/availability/event/[type].tsx
View file

@ -19,7 +19,8 @@ dayjs.extend(utc);
import timezone from "dayjs/plugin/timezone"; import timezone from "dayjs/plugin/timezone";
dayjs.extend(timezone); dayjs.extend(timezone);
export default function EventType(props) { export default function EventType(props: any): JSX.Element {
const router = useRouter(); const router = useRouter();
const inputOptions: OptionBase[] = [ const inputOptions: OptionBase[] = [
@ -35,6 +36,7 @@ export default function EventType(props) {
const [selectedInputOption, setSelectedInputOption] = useState<OptionBase>(inputOptions[0]); const [selectedInputOption, setSelectedInputOption] = useState<OptionBase>(inputOptions[0]);
const [locations, setLocations] = useState(props.eventType.locations || []); const [locations, setLocations] = useState(props.eventType.locations || []);
const [schedule, setSchedule] = useState(undefined); const [schedule, setSchedule] = useState(undefined);
const [selectedCustomInput, setSelectedCustomInput] = useState<EventTypeCustomInput | undefined>(undefined);
const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>( const [customInputs, setCustomInputs] = useState<EventTypeCustomInput[]>(
props.eventType.customInputs.sort((a, b) => a.id - b.id) || [] props.eventType.customInputs.sort((a, b) => a.id - b.id) || []
); );
@ -131,41 +133,7 @@ export default function EventType(props) {
const closeAddCustomModal = () => { const closeAddCustomModal = () => {
setSelectedInputOption(inputOptions[0]); setSelectedInputOption(inputOptions[0]);
setShowAddCustomModal(false); setShowAddCustomModal(false);
}; setSelectedCustomInput(undefined);
const LocationOptions = () => {
if (!selectedLocation) {
return null;
}
switch (selectedLocation.value) {
case LocationType.InPerson: {
const address = locations.find((location) => location.type === LocationType.InPerson)?.address;
return (
<div>
<label htmlFor="address" className="block text-sm font-medium text-gray-700">
Set an address or place
</label>
<div className="mt-1">
<input
type="text"
name="address"
id="address"
required
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
defaultValue={address}
/>
</div>
</div>
);
}
case LocationType.Phone:
return (
<p className="text-sm">Calendso will ask your invitee to enter a phone number before scheduling.</p>
);
case LocationType.GoogleMeet:
return <p className="text-sm">Calendso will provide a Google Meet location.</p>;
}
return null;
}; };
const updateLocations = (e) => { const updateLocations = (e) => {
@ -192,6 +160,47 @@ export default function EventType(props) {
setLocations(locations.filter((location) => location.type !== selectedLocation.type)); setLocations(locations.filter((location) => location.type !== selectedLocation.type));
}; };
const openEditCustomModel = (customInput: EventTypeCustomInput) => {
setSelectedCustomInput(customInput);
setSelectedInputOption(inputOptions.find((e) => e.value === customInput.type));
setShowAddCustomModal(true);
};
const LocationOptions = () => {
if (!selectedLocation) {
return null;
}
switch (selectedLocation.value) {
case LocationType.InPerson:
return (
<div>
<label htmlFor="address" className="block text-sm font-medium text-gray-700">
Set an address or place
</label>
<div className="mt-1">
<input
type="text"
name="address"
id="address"
required
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
defaultValue={locations.find((location) => location.type === LocationType.InPerson)?.address}
/>
</div>
</div>
);
case LocationType.Phone:
return (
<p className="text-sm">Calendso will ask your invitee to enter a phone number before scheduling.</p>
);
case LocationType.GoogleMeet:
return <p className="text-sm">Calendso will provide a Google Meet location.</p>;
case LocationType.Zoom:
return <p className="text-sm">Calendso will provide a Zoom meeting URL.</p>;
}
return null;
};
const updateCustom = (e) => { const updateCustom = (e) => {
e.preventDefault(); e.preventDefault();
@ -201,9 +210,28 @@ export default function EventType(props) {
type: e.target.type.value, type: e.target.type.value,
}; };
if (e.target.id?.value) {
const index = customInputs.findIndex((inp) => inp.id === +e.target.id?.value);
if (index >= 0) {
const input = customInputs[index];
input.label = customInput.label;
input.required = customInput.required;
input.type = customInput.type;
setCustomInputs(customInputs);
}
} else {
setCustomInputs(customInputs.concat(customInput)); setCustomInputs(customInputs.concat(customInput));
}
closeAddCustomModal();
};
setShowAddCustomModal(false); const removeCustom = (customInput, e) => {
e.preventDefault();
const index = customInputs.findIndex((inp) => inp.id === customInput.id);
if (index >= 0) {
customInputs.splice(index, 1);
setCustomInputs([...customInputs]);
}
}; };
return ( return (
@ -309,6 +337,50 @@ export default function EventType(props) {
<span className="ml-2 text-sm">Google Meet</span> <span className="ml-2 text-sm">Google Meet</span>
</div> </div>
)} )}
{location.type === LocationType.Zoom && (
<div className="flex-grow flex">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1329.08 1329.08"
height="1.25em"
width="1.25em"
shapeRendering="geometricPrecision"
textRendering="geometricPrecision"
imageRendering="optimizeQuality"
fillRule="evenodd"
clipRule="evenodd">
<g id="Layer_x0020_1">
<g id="_2116467169744">
<path
d="M664.54 0c367.02 0 664.54 297.52 664.54 664.54s-297.52 664.54-664.54 664.54S0 1031.56 0 664.54 297.52 0 664.54 0z"
fill="#e5e5e4"
fillRule="nonzero"
/>
<path
style={{
fill: "#fff",
fillRule: "nonzero",
}}
d="M664.54 12.94c359.87 0 651.6 291.73 651.6 651.6s-291.73 651.6-651.6 651.6-651.6-291.73-651.6-651.6 291.74-651.6 651.6-651.6z"
/>
<path
d="M664.54 65.21c331 0 599.33 268.33 599.33 599.33 0 331-268.33 599.33-599.33 599.33-331 0-599.33-268.33-599.33-599.33 0-331 268.33-599.33 599.33-599.33z"
fill="#4a8cff"
fillRule="nonzero"
/>
<path
style={{
fill: "#fff",
fillRule: "nonzero",
}}
d="M273.53 476.77v281.65c.25 63.69 52.27 114.95 115.71 114.69h410.55c11.67 0 21.06-9.39 21.06-20.81V570.65c-.25-63.69-52.27-114.95-115.7-114.69H294.6c-11.67 0-21.06 9.39-21.06 20.81zm573.45 109.87l169.5-123.82c14.72-12.18 26.13-9.14 26.13 12.94v377.56c0 25.12-13.96 22.08-26.13 12.94l-169.5-123.57V586.64z"
/>
</g>
</g>
</svg>
<span className="ml-2 text-sm">Zoom Video</span>
</div>
)}
<div className="flex"> <div className="flex">
<button <button
type="button" type="button"
@ -393,7 +465,7 @@ export default function EventType(props) {
</label> </label>
<ul className="w-96 mt-1"> <ul className="w-96 mt-1">
{customInputs.map((customInput) => ( {customInputs.map((customInput) => (
<li key={customInput.type} className="bg-blue-50 mb-2 p-2 border"> <li key={customInput.label} className="bg-blue-50 mb-2 p-2 border">
<div className="flex justify-between"> <div className="flex justify-between">
<div> <div>
<div> <div>
@ -409,10 +481,13 @@ export default function EventType(props) {
</div> </div>
</div> </div>
<div className="flex"> <div className="flex">
<button type="button" className="mr-2 text-sm text-blue-600"> <button
type="button"
onClick={() => openEditCustomModel(customInput)}
className="mr-2 text-sm text-blue-600">
Edit Edit
</button> </button>
<button> <button onClick={(e) => removeCustom(customInput, e)}>
<XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " /> <XIcon className="h-6 w-6 border-l-2 pl-1 hover:text-red-500 " />
</button> </button>
</div> </div>
@ -447,7 +522,7 @@ export default function EventType(props) {
Hide this event type Hide this event type
</label> </label>
<p className="text-gray-500"> <p className="text-gray-500">
Hide the event type from your page, so it can only be booked through it&apos;s URL. Hide the event type from your page, so it can only be booked through its URL.
</p> </p>
</div> </div>
</div> </div>
@ -599,6 +674,7 @@ export default function EventType(props) {
id="label" id="label"
required required
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md" className="shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-md"
defaultValue={selectedCustomInput?.label}
/> />
</div> </div>
</div> </div>
@ -608,13 +684,13 @@ export default function EventType(props) {
name="required" name="required"
type="checkbox" type="checkbox"
className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2" className="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded mr-2"
defaultChecked={true} defaultChecked={selectedCustomInput?.required ?? true}
/> />
<label htmlFor="required" className="block text-sm font-medium text-gray-700"> <label htmlFor="required" className="block text-sm font-medium text-gray-700">
Is required Is required
</label> </label>
</div> </div>
<input type="hidden" name="id" id="id" value={selectedCustomInput?.id} />
<div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse"> <div className="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
<button type="submit" className="btn btn-primary"> <button type="submit" className="btn btn-primary">
Save Save
@ -640,7 +716,7 @@ const validJson = (jsonString: string) => {
return o; return o;
} }
} catch (e) { } catch (e) {
// no longer empty console.log("Invalid JSON:", e);
} }
return false; return false;
}; };
@ -650,7 +726,6 @@ export async function getServerSideProps(context) {
if (!session) { if (!session) {
return { redirect: { permanent: false, destination: "/auth/login" } }; return { redirect: { permanent: false, destination: "/auth/login" } };
} }
const user = await prisma.user.findFirst({ const user = await prisma.user.findFirst({
where: { where: {
email: session.user.email, email: session.user.email,
@ -715,6 +790,7 @@ export async function getServerSideProps(context) {
const locationOptions: OptionBase[] = [ const locationOptions: OptionBase[] = [
{ value: LocationType.InPerson, label: "In-person meeting" }, { value: LocationType.InPerson, label: "In-person meeting" },
{ value: LocationType.Phone, label: "Phone call" }, { value: LocationType.Phone, label: "Phone call" },
{ value: LocationType.Zoom, label: "Zoom Video" },
]; ];
const hasGoogleCalendarIntegration = integrations.find( const hasGoogleCalendarIntegration = integrations.find(
@ -746,7 +822,7 @@ export async function getServerSideProps(context) {
const schedules = getAvailability(eventType) || const schedules = getAvailability(eventType) ||
getAvailability(user) || [ getAvailability(user) || [
{ {
days: [1, 2, 3, 4, 5, 6, 7], days: [0, 1, 2, 3, 4, 5, 6],
startTime: user.startTime, startTime: user.startTime,
length: user.endTime >= 1440 ? 1439 : user.endTime, length: user.endTime >= 1440 ? 1439 : user.endTime,
}, },

121
pages/bookings/index.tsx Normal file
View file

@ -0,0 +1,121 @@
import Head from "next/head";
import prisma from "../../lib/prisma";
import { getSession, useSession } from "next-auth/client";
import Shell from "../../components/Shell";
export default function Bookings({ bookings }) {
const [session, loading] = useSession();
if (loading) {
return <p className="text-gray-400">Loading...</p>;
}
return (
<div>
<Head>
<title>Bookings | Calendso</title>
<link rel="icon" href="/favicon.ico" />
</Head>
<Shell heading="Bookings">
<div className="flex flex-col">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div className="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
<table className="min-w-full divide-y divide-gray-200">
<thead className="bg-gray-50">
<tr>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Title
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Description
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Name
</th>
<th
scope="col"
className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
Email
</th>
<th scope="col" className="relative px-6 py-3">
<span className="sr-only">Edit</span>
</th>
</tr>
</thead>
<tbody className="bg-white divide-y divide-gray-200">
{bookings.map((booking) => (
<tr key={booking.uid}>
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
{booking.title}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{booking.description}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{booking.attendees[0].name}
</td>
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
{booking.attendees[0].email}
</td>
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
<a
href={window.location.href + "/../reschedule/" + booking.uid}
className="text-blue-600 hover:text-blue-900">
Reschedule
</a>
<a
href={window.location.href + "/../cancel/" + booking.uid}
className="ml-4 text-blue-600 hover:text-blue-900">
Cancel
</a>
</td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</div>
</div>
</Shell>
</div>
);
}
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,
},
});
const bookings = await prisma.booking.findMany({
where: {
userId: user.id,
},
select: {
uid: true,
title: true,
description: true,
attendees: true,
},
});
return { props: { bookings } };
}

156
pages/settings/profile.tsx
View file

@ -1,49 +1,43 @@
import Head from 'next/head'; import { GetServerSideProps } from "next";
import Link from 'next/link'; import Head from "next/head";
import { useRef, useState } from 'react'; import { useRef, useState } from "react";
import { useRouter } from 'next/router'; import prisma from "../../lib/prisma";
import prisma from '../../lib/prisma'; import Modal from "../../components/Modal";
import Modal from '../../components/Modal'; import Shell from "../../components/Shell";
import Shell from '../../components/Shell'; import SettingsShell from "../../components/Settings";
import SettingsShell from '../../components/Settings'; import Avatar from "../../components/Avatar";
import Avatar from '../../components/Avatar'; import { getSession } from "next-auth/client";
import { signIn, useSession, getSession } from 'next-auth/client'; import TimezoneSelect from "react-timezone-select";
import TimezoneSelect from 'react-timezone-select'; import { UsernameInput } from "../../components/ui/UsernameInput";
import {UsernameInput} from "../../components/ui/UsernameInput";
import ErrorAlert from "../../components/ui/alerts/Error"; import ErrorAlert from "../../components/ui/alerts/Error";
export default function Settings(props) { export default function Settings(props) {
const [ session, loading ] = useSession();
const router = useRouter();
const [successModalOpen, setSuccessModalOpen] = useState(false); const [successModalOpen, setSuccessModalOpen] = useState(false);
const usernameRef = useRef<HTMLInputElement>(); const usernameRef = useRef<HTMLInputElement>();
const nameRef = useRef<HTMLInputElement>(); const nameRef = useRef<HTMLInputElement>();
const descriptionRef = useRef<HTMLTextAreaElement>(); const descriptionRef = useRef<HTMLTextAreaElement>();
const avatarRef = useRef<HTMLInputElement>(); const avatarRef = useRef<HTMLInputElement>();
const [selectedTimeZone, setSelectedTimeZone] = useState({ value: props.user.timeZone });
const [selectedWeekStartDay, setSelectedWeekStartDay] = useState(props.user.weekStart || "Sunday");
const [ selectedTimeZone, setSelectedTimeZone ] = useState({ value: props.user.timeZone }); const [hasErrors, setHasErrors] = useState(false);
const [ selectedWeekStartDay, setSelectedWeekStartDay ] = useState(props.user.weekStart || 'Sunday'); const [errorMessage, setErrorMessage] = useState("");
const [ hasErrors, setHasErrors ] = useState(false); const closeSuccessModal = () => {
const [ errorMessage, setErrorMessage ] = useState(''); setSuccessModalOpen(false);
};
if (loading) {
return <p className="text-gray-400">Loading...</p>;
}
const closeSuccessModal = () => { setSuccessModalOpen(false); }
const handleError = async (resp) => { const handleError = async (resp) => {
if (!resp.ok) { if (!resp.ok) {
const error = await resp.json(); const error = await resp.json();
throw new Error(error.message); throw new Error(error.message);
} }
} };
async function updateProfileHandler(event) { async function updateProfileHandler(event) {
event.preventDefault(); event.preventDefault();
const enteredUsername = usernameRef.current.value; const enteredUsername = usernameRef.current.value.toLowerCase();
const enteredName = nameRef.current.value; const enteredName = nameRef.current.value;
const enteredDescription = descriptionRef.current.value; const enteredDescription = descriptionRef.current.value;
const enteredAvatar = avatarRef.current.value; const enteredAvatar = avatarRef.current.value;
@ -52,22 +46,32 @@ export default function Settings(props) {
// TODO: Add validation // TODO: Add validation
const response = await fetch('/api/user/profile', { await fetch("/api/user/profile", {
method: 'PATCH', method: "PATCH",
body: JSON.stringify({username: enteredUsername, name: enteredName, description: enteredDescription, avatar: enteredAvatar, timeZone: enteredTimeZone, weekStart: enteredWeekStartDay}), body: JSON.stringify({
username: enteredUsername,
name: enteredName,
description: enteredDescription,
avatar: enteredAvatar,
timeZone: enteredTimeZone,
weekStart: enteredWeekStartDay,
}),
headers: { headers: {
'Content-Type': 'application/json' "Content-Type": "application/json",
} },
}).then(handleError).then( () => { })
.then(handleError)
.then(() => {
setSuccessModalOpen(true); setSuccessModalOpen(true);
setHasErrors(false); // dismiss any open errors setHasErrors(false); // dismiss any open errors
}).catch( (err) => { })
.catch((err) => {
setHasErrors(true); setHasErrors(true);
setErrorMessage(err.message); setErrorMessage(err.message);
}); });
} }
return( return (
<Shell heading="Profile"> <Shell heading="Profile">
<Head> <Head>
<title>Profile | Calendso</title> <title>Profile | Calendso</title>
@ -79,9 +83,7 @@ export default function Settings(props) {
<div className="py-6 px-4 sm:p-6 lg:pb-8"> <div className="py-6 px-4 sm:p-6 lg:pb-8">
<div> <div>
<h2 className="text-lg leading-6 font-medium text-gray-900">Profile</h2> <h2 className="text-lg leading-6 font-medium text-gray-900">Profile</h2>
<p className="mt-1 text-sm text-gray-500"> <p className="mt-1 text-sm text-gray-500">Review and change your public page details.</p>
Review and change your public page details.
</p>
</div> </div>
<div className="mt-6 flex flex-col lg:flex-row"> <div className="mt-6 flex flex-col lg:flex-row">
@ -91,8 +93,20 @@ export default function Settings(props) {
<UsernameInput ref={usernameRef} defaultValue={props.user.username} /> <UsernameInput ref={usernameRef} defaultValue={props.user.username} />
</div> </div>
<div className="w-1/2 ml-2"> <div className="w-1/2 ml-2">
<label htmlFor="name" className="block text-sm font-medium text-gray-700">Full name</label> <label htmlFor="name" className="block text-sm font-medium text-gray-700">
<input ref={nameRef} type="text" name="name" id="name" autoComplete="given-name" placeholder="Your name" required className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" defaultValue={props.user.name} /> Full name
</label>
<input
ref={nameRef}
type="text"
name="name"
id="name"
autoComplete="given-name"
placeholder="Your name"
required
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
defaultValue={props.user.name}
/>
</div> </div>
</div> </div>
@ -101,7 +115,15 @@ export default function Settings(props) {
About About
</label> </label>
<div className="mt-1"> <div className="mt-1">
<textarea ref={descriptionRef} id="about" name="about" placeholder="A little something about yourself." rows={3} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">{props.user.bio}</textarea> <textarea
ref={descriptionRef}
id="about"
name="about"
placeholder="A little something about yourself."
rows={3}
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
{props.user.bio}
</textarea>
</div> </div>
</div> </div>
<div> <div>
@ -109,7 +131,12 @@ export default function Settings(props) {
Timezone Timezone
</label> </label>
<div className="mt-1"> <div className="mt-1">
<TimezoneSelect id="timeZone" value={selectedTimeZone} onChange={setSelectedTimeZone} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md" /> <TimezoneSelect
id="timeZone"
value={selectedTimeZone}
onChange={setSelectedTimeZone}
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"
/>
</div> </div>
</div> </div>
<div> <div>
@ -117,7 +144,11 @@ export default function Settings(props) {
First Day of Week First Day of Week
</label> </label>
<div className="mt-1"> <div className="mt-1">
<select id="weekStart" value={selectedWeekStartDay} onChange={e => setSelectedWeekStartDay(e.target.value)} className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md"> <select
id="weekStart"
value={selectedWeekStartDay}
onChange={(e) => setSelectedWeekStartDay(e.target.value)}
className="shadow-sm focus:ring-blue-500 focus:border-blue-500 mt-1 block w-full sm:text-sm border-gray-300 rounded-md">
<option value="Sunday">Sunday</option> <option value="Sunday">Sunday</option>
<option value="Monday">Monday</option> <option value="Monday">Monday</option>
</select> </select>
@ -131,7 +162,9 @@ export default function Settings(props) {
</p> </p>
<div className="mt-1 lg:hidden"> <div className="mt-1 lg:hidden">
<div className="flex items-center"> <div className="flex items-center">
<div className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12" aria-hidden="true"> <div
className="flex-shrink-0 inline-block rounded-full overflow-hidden h-12 w-12"
aria-hidden="true">
<Avatar user={props.user} className="rounded-full h-full w-full" /> <Avatar user={props.user} className="rounded-full h-full w-full" />
</div> </div>
{/* <div className="ml-5 rounded-md shadow-sm"> {/* <div className="ml-5 rounded-md shadow-sm">
@ -159,29 +192,46 @@ export default function Settings(props) {
</label> */} </label> */}
</div> </div>
<div className="mt-4"> <div className="mt-4">
<label htmlFor="avatar" className="block text-sm font-medium text-gray-700">Avatar URL</label> <label htmlFor="avatar" className="block text-sm font-medium text-gray-700">
<input ref={avatarRef} type="text" name="avatar" id="avatar" placeholder="URL" className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm" defaultValue={props.user.avatar} /> Avatar URL
</label>
<input
ref={avatarRef}
type="text"
name="avatar"
id="avatar"
placeholder="URL"
className="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm"
defaultValue={props.user.avatar}
/>
</div> </div>
</div> </div>
</div> </div>
<hr className="mt-8" /> <hr className="mt-8" />
<div className="py-4 flex justify-end"> <div className="py-4 flex justify-end">
<button type="submit" className="ml-2 bg-blue-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> <button
type="submit"
className="ml-2 bg-blue-600 border border-transparent rounded-md shadow-sm py-2 px-4 inline-flex justify-center text-sm font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
Save Save
</button> </button>
</div> </div>
</div> </div>
</form> </form>
<Modal heading="Profile updated successfully" description="Your user profile has been updated successfully." open={successModalOpen} handleClose={closeSuccessModal} /> <Modal
heading="Profile updated successfully"
description="Your user profile has been updated successfully."
open={successModalOpen}
handleClose={closeSuccessModal}
/>
</SettingsShell> </SettingsShell>
</Shell> </Shell>
); );
} }
export async function getServerSideProps(context) { export const getServerSideProps: GetServerSideProps = async (context) => {
const session = await getSession(context); const session = await getSession(context);
if (!session) { if (!session) {
return { redirect: { permanent: false, destination: '/auth/login' } }; return { redirect: { permanent: false, destination: "/auth/login" } };
} }
const user = await prisma.user.findFirst({ const user = await prisma.user.findFirst({
@ -197,10 +247,10 @@ export async function getServerSideProps(context) {
avatar: true, avatar: true,
timeZone: true, timeZone: true,
weekStart: true, weekStart: true,
} },
}); });
return { return {
props: {user}, // will be passed to the page component as props props: { user }, // will be passed to the page component as props
} };
} };

8
prisma/schema.prisma
View file

@ -159,3 +159,11 @@ model EventTypeCustomInput {
required Boolean required Boolean
} }
model ResetPasswordRequest {
id String @id @default(cuid())
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
email String
expires DateTime
}

39
yarn.lock
View file

@ -902,6 +902,13 @@
resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.44.tgz#df7503e6002847b834371c004b372529f3f85215" resolved "https://registry.yarnpkg.com/@types/node/-/node-14.14.44.tgz#df7503e6002847b834371c004b372529f3f85215"
integrity sha512-+gaugz6Oce6ZInfI/tK4Pq5wIIkJMEJUu92RB3Eu93mtj4wjjjz9EB5mLp5s1pSsLXdC/CPut/xF20ZzAQJbTA== integrity sha512-+gaugz6Oce6ZInfI/tK4Pq5wIIkJMEJUu92RB3Eu93mtj4wjjjz9EB5mLp5s1pSsLXdC/CPut/xF20ZzAQJbTA==
"@types/nodemailer@^6.4.2":
version "6.4.2"
resolved "https://registry.yarnpkg.com/@types/nodemailer/-/nodemailer-6.4.2.tgz#d8ee254c969e6ad83fb9a0a0df3a817406a3fa3b"
integrity sha512-yhsqg5Xbr8aWdwjFS3QjkniW5/tLpWXtOYQcJdo9qE3DolBxsKzgRCQrteaMY0hos8MklJNSEsMqDpZynGzMNg==
dependencies:
"@types/node" "*"
"@types/parse-json@^4.0.0": "@types/parse-json@^4.0.0":
version "4.0.0" version "4.0.0"
resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
@ -2874,6 +2881,18 @@ gtoken@^5.0.4:
google-p12-pem "^3.0.3" google-p12-pem "^3.0.3"
jws "^4.0.0" jws "^4.0.0"
handlebars@^4.7.7:
version "4.7.7"
resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.7.tgz#9ce33416aad02dbd6c8fafa8240d5d98004945a1"
integrity sha512-aAcXm5OAfE/8IXkcZvCepKU3VzW1/39Fb5ZuqMtgI/hT8X2YgoMvBY5dLhq/cpOvw7Lk1nK/UF71aLG/ZnVYRA==
dependencies:
minimist "^1.2.5"
neo-async "^2.6.0"
source-map "^0.6.1"
wordwrap "^1.0.0"
optionalDependencies:
uglify-js "^3.1.4"
has-ansi@^2.0.0: has-ansi@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91" resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@ -4075,6 +4094,11 @@ lodash.clonedeep@^4.5.0:
resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef" resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8= integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
lodash.debounce@^4.0.8:
version "4.0.8"
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
lodash.includes@^4.3.0: lodash.includes@^4.3.0:
version "4.3.0" version "4.3.0"
resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f" resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
@ -4331,6 +4355,11 @@ natural-compare@^1.4.0:
resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc= integrity sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=
neo-async@^2.6.0:
version "2.6.2"
resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
next-auth@^3.13.2: next-auth@^3.13.2:
version "3.19.8" version "3.19.8"
resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-3.19.8.tgz#32331f33dd73b46ec5c774735a9db78f9dbba3c7" resolved "https://registry.yarnpkg.com/next-auth/-/next-auth-3.19.8.tgz#32331f33dd73b46ec5c774735a9db78f9dbba3c7"
@ -6032,6 +6061,11 @@ typescript@^4.2.3:
resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg== integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
uglify-js@^3.1.4:
version "3.13.9"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.13.9.tgz#4d8d21dcd497f29cfd8e9378b9df123ad025999b"
integrity sha512-wZbyTQ1w6Y7fHdt8sJnHfSIuWeDgk6B5rCb4E/AM6QNNPbOMIZph21PW5dRB3h7Df0GszN+t7RuUH6sWK5bF0g==
unbox-primitive@^1.0.0, unbox-primitive@^1.0.1: unbox-primitive@^1.0.0, unbox-primitive@^1.0.1:
version "1.0.1" version "1.0.1"
resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471" resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
@ -6254,6 +6288,11 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c" resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ== integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
wordwrap@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
integrity sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=
wrap-ansi@^6.2.0: wrap-ansi@^6.2.0:
version "6.2.0" version "6.2.0"
resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53" resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-6.2.0.tgz#e9393ba07102e6c91a3b221478f0257cd2856e53"