forked from calcom/cal.com
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
d82dc10
commit 38cbb42
Showing
1 changed file
with
93 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,65 +1,104 @@ | ||
import Head from 'next/head' | ||
import Shell from '../components/Shell' | ||
import { signIn, useSession } from 'next-auth/client' | ||
import Head from 'next/head'; | ||
import Link from 'next/link'; | ||
import prisma from '../lib/prisma'; | ||
import Shell from '../components/Shell'; | ||
import { signIn, useSession, getSession } from 'next-auth/client'; | ||
|
||
export default function Home() { | ||
export default function Home(props) { | ||
const [ session, loading ] = useSession(); | ||
|
||
if (session) { | ||
return ( | ||
<div> | ||
<Head> | ||
<title>Calendso</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
|
||
<Shell heading="Dashboard"> | ||
<div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6"> | ||
<div className="border-4 border-dashed border-gray-200 rounded-lg h-96"></div> | ||
</div> | ||
</Shell> | ||
</div> | ||
); | ||
if (loading) { | ||
return <p className="text-gray-400">Loading...</p>; | ||
} else { | ||
return ( | ||
<div> | ||
<Head> | ||
<title>Calendso</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
if (!session) { | ||
window.location.href = "/auth/login"; | ||
} | ||
} | ||
|
||
<main className="text-center"> | ||
<div className="fixed z-10 inset-0 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true"> | ||
<div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> | ||
<span className="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span> | ||
<div className="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-sm sm:w-full sm:p-6"> | ||
<div> | ||
<div className="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-blue-100"> | ||
<svg className="h-6 w-6 text-blue-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | ||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" /> | ||
</svg> | ||
</div> | ||
<div className="mt-3 text-center sm:mt-5"> | ||
<h3 className="text-lg leading-6 font-medium text-gray-900" id="modal-title"> | ||
Sign into your account | ||
</h3> | ||
<div className="mt-2"> | ||
<p className="text-sm text-gray-500"> | ||
Sign into your account to manage your bookings and other settings. | ||
</p> | ||
</div> | ||
</div> | ||
return( | ||
<div> | ||
<Head> | ||
<title>Calendso</title> | ||
<link rel="icon" href="/favicon.ico" /> | ||
</Head> | ||
|
||
<Shell heading="Dashboard"> | ||
<div className="grid grid-cols-3 gap-4"> | ||
<div className="col-span-2"> | ||
<div className="bg-white shadow sm:rounded-lg"> | ||
<div className="px-4 py-5 sm:p-6"> | ||
<h3 className="text-lg leading-6 font-medium text-gray-900"> | ||
Welcome to Calendso! | ||
</h3> | ||
<div className="mt-2 max-w-xl text-sm text-gray-500"> | ||
<p> | ||
Get started by connecting your first calendar integration, enabling us to fetch your availability. Head over to the integrations page, and click the add link. | ||
</p> | ||
</div> | ||
<div className="mt-5 sm:mt-6"> | ||
<button onClick={() => signIn()} type="button" className="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:text-sm"> | ||
Login to your account | ||
</button> | ||
<div className="mt-3 text-sm"> | ||
<Link href="/integrations"> | ||
<a className="font-medium text-blue-600 hover:text-blue-500"> Set up your first integration <span aria-hidden="true">→</span></a> | ||
</Link> | ||
</div> | ||
</div> | ||
</div> | ||
</div> | ||
</main> | ||
</div> | ||
) | ||
} | ||
<div> | ||
<div className="bg-white rounded-lg shadow px-5 py-6 sm:px-6"> | ||
<div className="mb-8 sm:flex sm:items-center sm:justify-between"> | ||
<h3 className="text-lg leading-6 font-medium text-gray-900"> | ||
Your integrations | ||
</h3> | ||
<div className="mt-3 sm:mt-0 sm:ml-4"> | ||
<Link href="/integrations"> | ||
<a className="text-sm text-gray-400">View more</a> | ||
</Link> | ||
</div> | ||
</div> | ||
<ul className="divide-y divide-gray-200"> | ||
{props.credentials.map((integration) => | ||
<li className="pb-4 flex"> | ||
{integration.type == 'google_calendar' && <img className="h-10 w-10 mr-2" src="integrations/google-calendar.png" alt="Google Calendar" />} | ||
<div className="ml-3"> | ||
{integration.type == 'google_calendar' && <p className="text-sm font-medium text-gray-900">Google Calendar</p>} | ||
{integration.type == 'google_calendar' && <p className="text-sm text-gray-500">Calendar Integration</p>} | ||
</div> | ||
</li> | ||
)} | ||
</ul> | ||
</div> | ||
</div> | ||
</div> | ||
</Shell> | ||
</div> | ||
); | ||
} | ||
|
||
export async function getServerSideProps(context) { | ||
const session = await getSession(context); | ||
|
||
let credentials = []; | ||
|
||
if (session) { | ||
const user = await prisma.user.findFirst({ | ||
where: { | ||
email: session.user.email, | ||
}, | ||
select: { | ||
id: true | ||
} | ||
}); | ||
|
||
credentials = await prisma.credential.findMany({ | ||
where: { | ||
userId: user.id, | ||
}, | ||
select: { | ||
type: true | ||
} | ||
}); | ||
} | ||
return { | ||
props: {credentials}, // will be passed to the page component as props | ||
} | ||
} |