commonscomputer/cal.diy
5
0 Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

/integrations facelift (#858)

Browse Source
This commit is contained in:
Alex Johansson authored and GitHub committed 2021-10-12 11:35:44 +02:00
1 parent 7dc4a55319
commit c3dc18643e
32 files changed
+1259 -716
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/calendarClient.ts
+34 -4
View File
@@ -517,8 +517,26 @@ const GoogleCalendar = (credential): CalendarApiAdapter => {
};
};
// factory
const calendars = (withCredentials): CalendarApiAdapter[] =>
function getCalendarAdapterOrNull(credential: Credential): CalendarApiAdapter | null {
switch (credential.type) {
case "google_calendar":
return GoogleCalendar(credential);
case "office365_calendar":
return MicrosoftOffice365Calendar(credential);
case "caldav_calendar":
// FIXME types wrong & type casting should not be needed
return new CalDavCalendar(credential) as never as CalendarApiAdapter;
case "apple_calendar":
// FIXME types wrong & type casting should not be needed
return new AppleCalendar(credential) as never as CalendarApiAdapter;
}
return null;
}
/**
* @deprecated
*/
const calendars = (withCredentials: Credential[]): CalendarApiAdapter[] =>
withCredentials
.map((cred) => {
switch (cred.type) {
@@ -534,7 +552,7 @@ const calendars = (withCredentials): CalendarApiAdapter[] =>
return; // unknown credential, could be legacy? In any case, ignore
}
})
.filter(Boolean);
.flatMap((item) => (item ? [item as CalendarApiAdapter] : []));
const getBusyCalendarTimes = (withCredentials, dateFrom, dateTo, selectedCalendars) =>
Promise.all(
@@ -543,6 +561,11 @@ const getBusyCalendarTimes = (withCredentials, dateFrom, dateTo, selectedCalenda
return results.reduce((acc, availability) => acc.concat(availability), []);
});
/**
*
* @param withCredentials
* @deprecated
*/
const listCalendars = (withCredentials) =>
Promise.all(calendars(withCredentials).map((c) => c.listCalendars())).then((results) =>
results.reduce((acc, calendars) => acc.concat(calendars), []).filter((c) => c != null)
@@ -650,4 +673,11 @@ const deleteEvent = (credential: Credential, uid: string): Promise<unknown> => {
return Promise.resolve({});
};
export { getBusyCalendarTimes, createEvent, updateEvent, deleteEvent, listCalendars };
export {
getBusyCalendarTimes,
createEvent,
updateEvent,
deleteEvent,
listCalendars,
getCalendarAdapterOrNull,
};
lib/integrations/Apple/AppleCalendarAdapter.ts
+3 -2
View File
@@ -255,10 +255,11 @@ export class AppleCalendar implements CalendarApiAdapter {
.filter((calendar) => {
return calendar.components?.includes("VEVENT");
})
.map((calendar) => ({
.map((calendar, index) => ({
externalId: calendar.url,
name: calendar.displayName ?? "",
primary: false,
// FIXME Find a better way to set the primary calendar
primary: index === 0,
integration: this.integrationName,
}));
} catch (reason) {
lib/integrations/Apple/components/AddAppleIntegration.tsx
+103 -1
View File
@@ -1,4 +1,17 @@
import React from "react";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import {
DialogHeader,
DialogProps,
Dialog,
DialogContent,
DialogClose,
DialogFooter,
} from "@components/Dialog";
import { Form, TextField } from "@components/form/fields";
import { Alert } from "@components/ui/Alert";
import Button from "@components/ui/Button";
type Props = {
onSubmit: () => void;
@@ -6,6 +19,95 @@ type Props = {
export const ADD_APPLE_INTEGRATION_FORM_TITLE = "addAppleIntegration";
export function AddAppleIntegrationModal(props: DialogProps) {
const form = useForm({
defaultValues: {
username: "",
password: "",
},
});
const [errorMessage, setErrorMessage] = useState("");
return (
<Dialog {...props}>
<DialogContent>
<DialogHeader
title="Connect to Apple Server"
subtitle={
<>
Generate an app specific password to use with Cal.com at{" "}
<a
className="text-indigo-400"
href="https://appleid.apple.com/account/manage"
target="_blank"
rel="noopener noreferrer">
https://appleid.apple.com/account/manage
</a>
. Your credentials will be stored and encrypted.
</>
}
/>
<Form
form={form}
onSubmit={form.handleSubmit(async (values) => {
setErrorMessage("");
const res = await fetch("/api/integrations/apple/add", {
method: "POST",
body: JSON.stringify(values),
headers: {
"Content-Type": "application/json",
},
});
const json = await res.json();
if (!res.ok) {
setErrorMessage(json?.message || "Something went wrong");
} else {
props.onOpenChange?.(false);
}
})}>
<fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
<TextField
required
type="text"
{...form.register("username")}
label="Username"
placeholder="rickroll"
/>
<TextField
required
type="password"
{...form.register("password")}
label="Password"
placeholder="•••••••••••••"
autoComplete="password"
/>
</fieldset>
{errorMessage && <Alert severity="error" title={errorMessage} className="my-4" />}
<DialogFooter>
<DialogClose
onClick={() => {
props.onOpenChange?.(false);
}}
asChild>
<Button type="button" color="secondary" tabIndex={-1}>
Cancel
</Button>
</DialogClose>
<Button type="submit" loading={form.formState.isSubmitting}>
Save
</Button>
</DialogFooter>
</Form>
</DialogContent>
</Dialog>
);
}
/**
* @deprecated
*/
const AddAppleIntegration = React.forwardRef<HTMLFormElement, Props>((props, ref) => {
const onSubmit = (event) => {
event.preventDefault();
lib/integrations/CalDav/CalDavCalendarAdapter.ts
+6 -2
View File
@@ -79,6 +79,7 @@ export class CalDavCalendar implements CalendarApiAdapter {
const { error, value: iCalString } = await createEvent({
uid,
startInputType: "utc",
// FIXME types
start: this.convertDate(event.startTime),
duration: this.getDuration(event.startTime, event.endTime),
title: event.title,
@@ -137,6 +138,7 @@ export class CalDavCalendar implements CalendarApiAdapter {
const { error, value: iCalString } = await createEvent({
uid,
startInputType: "utc",
// FIXME - types wrong
start: this.convertDate(event.startTime),
duration: this.getDuration(event.startTime, event.endTime),
title: event.title,
@@ -203,6 +205,7 @@ export class CalDavCalendar implements CalendarApiAdapter {
}
}
// FIXME - types wrong
async getAvailability(
dateFrom: string,
dateTo: string,
@@ -258,10 +261,11 @@ export class CalDavCalendar implements CalendarApiAdapter {
.filter((calendar) => {
return calendar.components?.includes("VEVENT");
})
.map((calendar) => ({
.map((calendar, index) => ({
externalId: calendar.url,
name: calendar.displayName ?? "",
primary: false,
// FIXME Find a better way to set the primary calendar
primary: index === 0,
integration: this.integrationName,
}));
} catch (reason) {
lib/integrations/CalDav/components/AddCalDavIntegration.tsx
+100 -2
View File
@@ -1,4 +1,17 @@
import React from "react";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import {
DialogHeader,
DialogProps,
Dialog,
DialogContent,
DialogClose,
DialogFooter,
} from "@components/Dialog";
import { Form, TextField } from "@components/form/fields";
import { Alert } from "@components/ui/Alert";
import Button from "@components/ui/Button";
type Props = {
onSubmit: () => void;
@@ -11,8 +24,93 @@ export type AddCalDavIntegrationRequest = {
password: string;
};
export function AddCalDavIntegrationModal(props: DialogProps) {
const form = useForm({
defaultValues: {
url: "",
username: "",
password: "",
},
});
const [errorMessage, setErrorMessage] = useState("");
return (
<Dialog {...props}>
<DialogContent>
<DialogHeader
title="Connect to CalDav Server"
subtitle="Your credentials will be stored and encrypted."
/>
<Form
form={form}
onSubmit={form.handleSubmit(async (values) => {
setErrorMessage("");
const res = await fetch("/api/integrations/caldav/add", {
method: "POST",
body: JSON.stringify(values),
headers: {
"Content-Type": "application/json",
},
});
const json = await res.json();
if (!res.ok) {
setErrorMessage(json?.message || "Something went wrong");
} else {
props.onOpenChange?.(false);
}
})}>
<fieldset className="space-y-2" disabled={form.formState.isSubmitting}>
<TextField
required
type="text"
{...form.register("url")}
label="Calendar URL"
placeholder="https://example.com/calendar"
/>
<TextField
required
type="text"
{...form.register("username")}
label="Username"
placeholder="rickroll"
/>
<TextField
required
type="password"
{...form.register("password")}
label="Password"
placeholder="•••••••••••••"
autoComplete="password"
/>
</fieldset>
{errorMessage && <Alert severity="error" title={errorMessage} className="my-4" />}
<DialogFooter>
<DialogClose
onClick={() => {
props.onOpenChange?.(false);
}}
asChild>
<Button type="button" color="secondary" tabIndex={-1}>
Cancel
</Button>
</DialogClose>
<Button type="submit" loading={form.formState.isSubmitting}>
Save
</Button>
</DialogFooter>
</Form>
</DialogContent>
</Dialog>
);
}
/**
* @deprecated
*/
const AddCalDavIntegration = React.forwardRef<HTMLFormElement, Props>((props, ref) => {
const onSubmit = (event) => {
const onSubmit = (event: any) => {
event.preventDefault();
event.stopPropagation();
lib/integrations/getIntegrations.ts
+64 -54
View File
@@ -8,65 +8,75 @@ const credentialData = Prisma.validator<Prisma.CredentialArgs>()({
type CredentialData = Prisma.CredentialGetPayload<typeof credentialData>;
export const ALL_INTEGRATIONS = [
{
installed: !!(process.env.GOOGLE_API_CREDENTIALS && validJson(process.env.GOOGLE_API_CREDENTIALS)),
type: "google_calendar",
title: "Google Calendar",
imageSrc: "integrations/google-calendar.svg",
description: "For personal and business calendars",
variant: "calendar",
},
{
installed: !!(process.env.MS_GRAPH_CLIENT_ID && process.env.MS_GRAPH_CLIENT_SECRET),
type: "office365_calendar",
title: "Office 365 / Outlook.com Calendar",
imageSrc: "integrations/outlook.svg",
description: "For personal and business calendars",
variant: "calendar",
},
{
installed: !!(process.env.ZOOM_CLIENT_ID && process.env.ZOOM_CLIENT_SECRET),
type: "zoom_video",
title: "Zoom",
imageSrc: "integrations/zoom.svg",
description: "Video Conferencing",
variant: "conferencing",
},
{
installed: true,
type: "caldav_calendar",
title: "CalDav Server",
imageSrc: "integrations/caldav.svg",
description: "For personal and business calendars",
variant: "calendar",
},
{
installed: true,
type: "apple_calendar",
title: "Apple Calendar",
imageSrc: "integrations/apple-calendar.svg",
description: "For personal and business calendars",
variant: "calendar",
},
{
installed: !!(
process.env.STRIPE_CLIENT_ID &&
process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY &&
process.env.STRIPE_PRIVATE_KEY
),
type: "stripe_payment",
title: "Stripe",
imageSrc: "integrations/stripe.svg",
description: "Receive payments",
variant: "payment",
},
] as const;
function getIntegrations(credentials: CredentialData[]) {
const integrations = [
{
installed: !!(process.env.GOOGLE_API_CREDENTIALS && validJson(process.env.GOOGLE_API_CREDENTIALS)),
credential: credentials.find((integration) => integration.type === "google_calendar") || null,
type: "google_calendar",
title: "Google Calendar",
imageSrc: "integrations/google-calendar.svg",
description: "For personal and business calendars",
},
{
installed: !!(process.env.MS_GRAPH_CLIENT_ID && process.env.MS_GRAPH_CLIENT_SECRET),
type: "office365_calendar",
credential: credentials.find((integration) => integration.type === "office365_calendar") || null,
title: "Office 365 / Outlook.com Calendar",
imageSrc: "integrations/outlook.svg",
description: "For personal and business calendars",
},
{
installed: !!(process.env.ZOOM_CLIENT_ID && process.env.ZOOM_CLIENT_SECRET),
type: "zoom_video",
credential: credentials.find((integration) => integration.type === "zoom_video") || null,
title: "Zoom",
imageSrc: "integrations/zoom.svg",
description: "Video Conferencing",
},
{
installed: true,
type: "caldav_calendar",
credential: credentials.find((integration) => integration.type === "caldav_calendar") || null,
title: "CalDav Server",
imageSrc: "integrations/caldav.svg",
description: "For personal and business calendars",
},
{
installed: true,
type: "apple_calendar",
credential: credentials.find((integration) => integration.type === "apple_calendar") || null,
title: "Apple Calendar",
imageSrc: "integrations/apple-calendar.svg",
description: "For personal and business calendars",
},
{
installed: !!(
process.env.STRIPE_CLIENT_ID &&
process.env.NEXT_PUBLIC_STRIPE_PUBLIC_KEY &&
process.env.STRIPE_PRIVATE_KEY
),
type: "stripe_payment",
credential: credentials.find((integration) => integration.type === "stripe_payment") || null,
title: "Stripe",
imageSrc: "integrations/stripe.svg",
description: "Receive payments",
},
];
const integrations = ALL_INTEGRATIONS.map((integration) => ({
...integration,
/**
* @deprecated use `credentials.
*/
credential: credentials.find((credential) => credential.type === integration.type) || null,
credentials: credentials.filter((credential) => credential.type === integration.type) || null,
}));
return integrations;
}
export type IntegraionMeta = ReturnType<typeof getIntegrations>;
export function hasIntegration(integrations: ReturnType<typeof getIntegrations>, type: string): boolean {
return !!integrations.find((i) => i.type === type && !!i.installed && !!i.credential);
}