From 47b6e293332cdaf83e5d5ec2203597ae4ceb410c Mon Sep 17 00:00:00 2001
From: Femi Odugbesan <baba@hey.com>
Date: Tue, 14 Sep 2021 08:21:18 -0500
Subject: [PATCH] clarify necessity for app password when connecting apple
 calendar (#634)

support react element in dialog header props
---
 components/Dialog.tsx        | 10 ++++++++--
 pages/integrations/index.tsx | 36 ++++++++++++++++++++++++++++--------
 2 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/components/Dialog.tsx b/components/Dialog.tsx
index f4ed6a19..37987331 100644
--- a/components/Dialog.tsx
+++ b/components/Dialog.tsx
@@ -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">
diff --git a/pages/integrations/index.tsx b/pages/integrations/index.tsx
index 572a2bf8..75657eed 100644
--- a/pages/integrations/index.tsx
+++ b/pages/integrations/index.tsx
@@ -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>