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

clarify necessity for app password when connecting apple calendar (#634)

Browse source 
support react element in dialog header props
This commit is contained in:
Femi Odugbesan 2021-09-14 08:21:18 -05:00 committed by GitHub
parent 16f15a2f16
commit 47b6e29333
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 36 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/Dialog.tsx
View file

@ -18,13 +18,19 @@ export const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps
<DialogPrimitive.Content
{...props}
className="min-w-[360px] fixed left-1/2 top-1/2 p-6 text-left bg-white rounded shadow-xl overflow-hidden -translate-x-1/2 -translate-y-1/2 sm:align-middle sm:w-full sm:max-w-lg"
ref={forwardedRef}>
ref={forwardedRef}
>
{children}
</DialogPrimitive.Content>
)
);
export function DialogHeader({ title, subtitle }: { title: string; subtitle: string }) {
type DialogHeaderProps = {
title: React.ReactElement | string;
subtitle: React.ReactElement | string;
};
export function DialogHeader({ title, subtitle }: DialogHeaderProps) {
return (
<div className="mb-8">
<h3 className="text-gray-900 text-lg font-bold leading-6" id="modal-title">

36
pages/integrations/index.tsx
View file

@ -170,7 +170,8 @@ export default function Home({ integrations }: Props) {
<div className="w-2/12 text-right pt-2">
<button
onClick={() => integrationHandler(integration.type)}
className="font-medium text-neutral-900 hover:text-neutral-500">
className="font-medium text-neutral-900 hover:text-neutral-500"
>
Add
</button>
</div>
@ -275,7 +276,8 @@ export default function Home({ integrations }: Props) {
return (
<Dialog
open={isAddCalDavIntegrationDialogOpen}
onOpenChange={(isOpen) => setIsAddCalDavIntegrationDialogOpen(isOpen)}>
onOpenChange={(isOpen) => setIsAddCalDavIntegrationDialogOpen(isOpen)}
>
<DialogContent>
<DialogHeader
title="Connect to CalDav Server"
@ -297,14 +299,16 @@ export default function Home({ integrations }: Props) {
<Button
type="submit"
form={ADD_CALDAV_INTEGRATION_FORM_TITLE}
className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900"
>
Save
</Button>
<DialogClose
onClick={() => {
setIsAddCalDavIntegrationDialogOpen(false);
}}
asChild>
asChild
>
<Button color="secondary">Cancel</Button>
</DialogClose>
</div>
@ -317,11 +321,25 @@ export default function Home({ integrations }: Props) {
return (
<Dialog
open={isAddAppleIntegrationDialogOpen}
onOpenChange={(isOpen) => setIsAddAppleIntegrationDialogOpen(isOpen)}>
onOpenChange={(isOpen) => setIsAddAppleIntegrationDialogOpen(isOpen)}
>
<DialogContent>
<DialogHeader
title="Connect to Apple Server"
subtitle="Your credentials will be stored and encrypted. Generate an app specific password."
subtitle={
<p>
Generate an app specific password to use with Calendso 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.
</p>
}
/>
<div className="my-4">
{addAppleError && (
@ -339,14 +357,16 @@ export default function Home({ integrations }: Props) {
<button
type="submit"
form={ADD_APPLE_INTEGRATION_FORM_TITLE}
className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900">
className="flex justify-center py-2 px-4 border border-transparent rounded-sm shadow-sm text-sm font-medium text-white bg-neutral-900 hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-neutral-900"
>
Save
</button>
<DialogClose
onClick={() => {
setIsAddAppleIntegrationDialogOpen(false);
}}
asChild>
asChild
>
<Button color="secondary">Cancel</Button>
</DialogClose>
</div>