mythic-insight/calcom
1
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 <DialogPrimitive.Content
{...props} {...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" 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} {children}
</DialogPrimitive.Content> </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 ( return (
<div className="mb-8"> <div className="mb-8">
<h3 className="text-gray-900 text-lg font-bold leading-6" id="modal-title"> <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"> <div className="w-2/12 text-right pt-2">
<button <button
onClick={() => integrationHandler(integration.type)} 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 Add
</button> </button>
</div> </div>
@ -275,7 +276,8 @@ export default function Home({ integrations }: Props) {
return ( return (
<Dialog <Dialog
open={isAddCalDavIntegrationDialogOpen} open={isAddCalDavIntegrationDialogOpen}
onOpenChange={(isOpen) => setIsAddCalDavIntegrationDialogOpen(isOpen)}> onOpenChange={(isOpen) => setIsAddCalDavIntegrationDialogOpen(isOpen)}
>
<DialogContent> <DialogContent>
<DialogHeader <DialogHeader
title="Connect to CalDav Server" title="Connect to CalDav Server"
@ -297,14 +299,16 @@ export default function Home({ integrations }: Props) {
<Button <Button
type="submit" type="submit"
form={ADD_CALDAV_INTEGRATION_FORM_TITLE} 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 Save
</Button> </Button>
<DialogClose <DialogClose
onClick={() => { onClick={() => {
setIsAddCalDavIntegrationDialogOpen(false); setIsAddCalDavIntegrationDialogOpen(false);
}} }}
asChild> asChild
>
<Button color="secondary">Cancel</Button> <Button color="secondary">Cancel</Button>
</DialogClose> </DialogClose>
</div> </div>
@ -317,11 +321,25 @@ export default function Home({ integrations }: Props) {
return ( return (
<Dialog <Dialog
open={isAddAppleIntegrationDialogOpen} open={isAddAppleIntegrationDialogOpen}
onOpenChange={(isOpen) => setIsAddAppleIntegrationDialogOpen(isOpen)}> onOpenChange={(isOpen) => setIsAddAppleIntegrationDialogOpen(isOpen)}
>
<DialogContent> <DialogContent>
<DialogHeader <DialogHeader
title="Connect to Apple Server" 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"> <div className="my-4">
{addAppleError && ( {addAppleError && (
@ -339,14 +357,16 @@ export default function Home({ integrations }: Props) {
<button <button
type="submit" type="submit"
form={ADD_APPLE_INTEGRATION_FORM_TITLE} 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 Save
</button> </button>
<DialogClose <DialogClose
onClick={() => { onClick={() => {
setIsAddAppleIntegrationDialogOpen(false); setIsAddAppleIntegrationDialogOpen(false);
}} }}
asChild> asChild
>
<Button color="secondary">Cancel</Button> <Button color="secondary">Cancel</Button>
</DialogClose> </DialogClose>
</div> </div>