2021-07-30 23:05:38 +00:00
|
|
|
import Head from "next/head";
|
|
|
|
|
import Link from "next/link";
|
|
|
|
|
import { useState } from "react";
|
|
|
|
|
import { useRouter } from "next/router";
|
|
|
|
|
import prisma from "../../lib/prisma";
|
|
|
|
|
import Shell from "../../components/Shell";
|
|
|
|
|
import SettingsShell from "../../components/Settings";
|
2021-08-02 14:10:24 +00:00
|
|
|
import { useSession, getSession } from "next-auth/client";
|
2021-05-26 16:24:10 +00:00
|
|
|
|
|
|
|
|
export default function Embed(props) {
|
2021-07-30 23:05:38 +00:00
|
|
|
const [session, loading] = useSession();
|
|
|
|
|
const router = useRouter();
|
2021-05-26 16:24:10 +00:00
|
|
|
|
2021-07-30 23:05:38 +00:00
|
|
|
if (loading) {
|
2021-08-02 14:10:24 +00:00
|
|
|
return <div className="loader"><span className="loader-inner"></span></div>;
|
2021-07-30 23:05:38 +00:00
|
|
|
}
|
2021-05-26 16:24:10 +00:00
|
|
|
|
2021-07-30 23:05:38 +00:00
|
|
|
return (
|
2021-08-02 14:10:24 +00:00
|
|
|
<Shell heading="Embed" subtitle="Integrate with your website using our embed options.">
|
2021-07-30 23:05:38 +00:00
|
|
|
<Head>
|
|
|
|
|
<title>Embed | Calendso</title>
|
|
|
|
|
<link rel="icon" href="/favicon.ico" />
|
|
|
|
|
</Head>
|
|
|
|
|
<SettingsShell>
|
|
|
|
|
<div className="py-6 lg:pb-8 lg:col-span-9">
|
|
|
|
|
<div className="mb-6">
|
2021-08-02 14:10:24 +00:00
|
|
|
<h2 className="text-lg leading-6 font-medium text-gray-900">iframe Embed</h2>
|
2021-07-30 23:05:38 +00:00
|
|
|
<p className="mt-1 text-sm text-gray-500">The easiest way to embed Calendso on your website.</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="grid grid-cols-2 space-x-4">
|
|
|
|
|
<div>
|
|
|
|
|
<label htmlFor="iframe" className="block text-sm font-medium text-gray-700">
|
|
|
|
|
Standard iframe
|
|
|
|
|
</label>
|
|
|
|
|
<div className="mt-1">
|
|
|
|
|
<textarea
|
|
|
|
|
id="iframe"
|
|
|
|
|
className="h-32 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
|
|
|
|
placeholder="Loading..."
|
|
|
|
|
defaultValue={
|
|
|
|
|
'<iframe src="' +
|
|
|
|
|
props.BASE_URL +
|
|
|
|
|
"/" +
|
|
|
|
|
session.user.username +
|
|
|
|
|
'" frameborder="0" allowfullscreen></iframe>'
|
|
|
|
|
}
|
|
|
|
|
readOnly
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label htmlFor="fullscreen" className="block text-sm font-medium text-gray-700">
|
|
|
|
|
Responsive full screen iframe
|
|
|
|
|
</label>
|
|
|
|
|
<div className="mt-1">
|
|
|
|
|
<textarea
|
|
|
|
|
id="fullscreen"
|
|
|
|
|
className="h-32 shadow-sm focus:ring-blue-500 focus:border-blue-500 block w-full sm:text-sm border-gray-300 rounded-sm"
|
|
|
|
|
placeholder="Loading..."
|
|
|
|
|
defaultValue={
|
|
|
|
|
'<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Schedule a meeting</title><style>body {margin: 0;}iframe {height: calc(100vh - 4px);width: calc(100vw - 4px);box-sizing: border-box;}</style></head><body><iframe src="' +
|
|
|
|
|
props.BASE_URL +
|
|
|
|
|
"/" +
|
|
|
|
|
session.user.username +
|
|
|
|
|
'" frameborder="0" allowfullscreen></iframe></body></html>'
|
|
|
|
|
}
|
|
|
|
|
readOnly
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="my-6">
|
|
|
|
|
<h2 className="text-lg leading-6 font-medium text-gray-900">Calendso API</h2>
|
|
|
|
|
<p className="mt-1 text-sm text-gray-500">
|
|
|
|
|
Leverage our API for full control and customizability.
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<a href="https://api.docs.calendso.com" className="btn btn-primary">
|
|
|
|
|
Browse our API documentation
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
</SettingsShell>
|
|
|
|
|
</Shell>
|
|
|
|
|
);
|
2021-05-26 16:24:10 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export async function getServerSideProps(context) {
|
2021-07-30 23:05:38 +00:00
|
|
|
const session = await getSession(context);
|
|
|
|
|
if (!session) {
|
|
|
|
|
return { redirect: { permanent: false, destination: "/auth/login" } };
|
|
|
|
|
}
|
2021-05-26 16:24:10 +00:00
|
|
|
|
2021-07-30 23:05:38 +00:00
|
|
|
const user = await prisma.user.findFirst({
|
|
|
|
|
where: {
|
|
|
|
|
email: session.user.email,
|
|
|
|
|
},
|
|
|
|
|
select: {
|
|
|
|
|
id: true,
|
|
|
|
|
username: true,
|
|
|
|
|
name: true,
|
|
|
|
|
email: true,
|
|
|
|
|
bio: true,
|
|
|
|
|
avatar: true,
|
|
|
|
|
timeZone: true,
|
|
|
|
|
weekStart: true,
|
|
|
|
|
},
|
|
|
|
|
});
|
2021-05-26 16:24:10 +00:00
|
|
|
|
2021-07-30 23:05:38 +00:00
|
|
|
const BASE_URL = process.env.BASE_URL;
|
2021-07-22 11:04:15 +00:00
|
|
|
|
2021-07-30 23:05:38 +00:00
|
|
|
return {
|
|
|
|
|
props: { user, BASE_URL }, // will be passed to the page component as props
|
|
|
|
|
};
|
2021-07-22 11:04:15 +00:00
|
|
|
}
|
