push to staging

birui · Sep 6, 2023 · 35dd026 · 35dd026
1 parent ea285e2
commit 35dd026
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 31 deletions.
diff --git a/components/app/modals/saml-modal.tsx b/components/app/modals/saml-modal.tsx
@@ -8,7 +8,7 @@ import {
 import Modal from "#/ui/modal";
 import Button from "#/ui/button";
 import { toast } from "sonner";
-import { Lock } from "lucide-react";
+import { Check, Lock, UploadCloud } from "lucide-react";
 import useProject from "#/lib/swr/use-project";
 import { InfoTooltip, SimpleTooltipContent } from "#/ui/tooltip";
 import { HOME_DOMAIN, SAML_PROVIDERS } from "#/lib/constants";
@@ -34,6 +34,9 @@ function SAMLModal({
     [selectedProvider],
   );
 
+  const [file, setFile] = useState<File | null>(null);
+  const [fileContent, setFileContent] = useState("");
+
   return (
     <Modal showModal={showSAMLModal} setShowModal={setShowSAMLModal}>
       <div className="flex flex-col items-center justify-center space-y-3 border-b border-gray-200 px-4 py-8 sm:px-16">
@@ -57,10 +60,10 @@ function SAMLModal({
                 "Content-Type": "application/json",
               },
               body: JSON.stringify({
-                metadataUrl: e.currentTarget.metadataUrl.value,
-                encodedRawMetadata: Buffer.from(
-                  e.currentTarget.metadataRaw.value,
-                ).toString("base64"),
+                metadataUrl: e.currentTarget.metadataUrl?.value,
+                encodedRawMetadata: fileContent
+                  ? Buffer.from(fileContent).toString("base64")
+                  : undefined,
               }),
             }).then(async (res) => {
               if (res.ok) {
@@ -138,20 +141,48 @@ function SAMLModal({
                       <SimpleTooltipContent
                         title={`Your ${currentProvider.samlModalCopy} is the URL to your SAML provider's metadata.`}
                         cta="Learn more."
-                        href={`${HOME_DOMAIN}/help/article/${selectedProvider}-saml#step-4-copy-the-metadata-url`}
+                        href={`${HOME_DOMAIN}/help/article/${selectedProvider}-saml`}
                       />
                     }
                   />
                 </div>
+                <label
+                  htmlFor="metadataRaw"
+                  className="group relative mt-1 flex h-24 w-full cursor-pointer flex-col items-center justify-center rounded-md border border-gray-300 bg-white shadow-sm transition-all hover:bg-gray-50"
+                >
+                  {file ? (
+                    <>
+                      <Check className="h-5 w-5 text-green-600 transition-all duration-75 group-hover:scale-110 group-active:scale-95" />
+                      <p className="mt-2 text-sm text-gray-500">{file.name}</p>
+                    </>
+                  ) : (
+                    <>
+                      <UploadCloud className="h-5 w-5 text-gray-500 transition-all duration-75 group-hover:scale-110 group-active:scale-95" />
+                      <p className="mt-2 text-sm text-gray-500">
+                        Choose an .xml file to upload
+                      </p>
+                    </>
+                  )}
+                </label>
                 <input
                   id="metadataRaw"
                   name="metadataRaw"
-                  autoFocus
-                  type="url"
-                  placeholder="https://"
-                  autoComplete="off"
+                  type="file"
+                  accept="text/xml"
+                  className="sr-only"
                   required
-                  className="mt-1 block w-full appearance-none rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-black focus:outline-none focus:ring-black sm:text-sm"
+                  onChange={(e) => {
+                    const f = e.target?.files && e.target?.files[0];
+                    setFile(f);
+                    if (f) {
+                      const reader = new FileReader();
+                      reader.onload = (e) => {
+                        const content = e.target?.result;
+                        setFileContent(content as string);
+                      };
+                      reader.readAsText(f);
+                    }
+                  }}
                 />
               </div>
             ) : (

diff --git a/content/help/google-saml.mdx b/content/help/google-saml.mdx
@@ -50,7 +50,7 @@ Enter the \*App name** for your application, and click **Continue\*\*.
   hideCaption={true}
 />
 
-In the next screen, click **Download Metadata** to download the metadata XML file and click **Continue**.
+In the next screen, click **Download Metadata** to download the metadata XML file and click **Continue**. You'll need this file in Step 3.
 
 <Image
   alt="Downloading SAML metadata on the Google Admin Dashboard"
@@ -96,33 +96,29 @@ On the next screen, under the **Attributes** section, click **Add Mapping** and
 
 Once that's done, click **Finish**.
 
-## Step 3: Submit Feedback
-
-Under the **Feedback** section, select **I'm an Okta customer adding an internal app** and click **Finish**.
+On the next screen, click **User access** to configure the application to allow users to log in.
 
 <Image
-  alt="Feedback section on the Okta Dashboard"
-  src="https://d2vwwcvoksz7ty.cloudfront.net/help/okta-saml-feedback.png"
-  width={2244}
-  height={1430}
+  alt="User access on the Google Admin Dashboard"
+  src="https://d2vwwcvoksz7ty.cloudfront.net/help/google-saml-users.png"
+  width={1611}
+  height={741}
   hideCaption={true}
 />
 
-## Step 4: Copy the Metadata URL
-
-After you've submitted the feedback, you'll be redirected to the **Sign On** tab, which contains the metadata URL.
+Check the **ON for everyone** checkbox and click **Save**.
 
 <Image
-  alt="Sign On tab on the Okta Dashboard"
-  src="https://d2vwwcvoksz7ty.cloudfront.net/help/okta-saml-metadata-url.png"
-  width={3024}
-  height={1720}
+  alt="Turn on access for everyone on the Google Admin Dashboard"
+  src="https://d2vwwcvoksz7ty.cloudfront.net/help/google-saml-save.png"
+  width={1607}
+  height={692}
   hideCaption={true}
 />
 
-Copy the metadata URL and return to the Dub dashboard.
+You can now return to the Dub dashboard to complete the SAML SSO configuration.
 
-## Step 5: Configure SAML SSO on Dub
+## Step 3: Configure SAML SSO on Dub
 
 In your project dashboard on Dub, click on the **Settings** tab in the menu bar at the top. Then, click on the **Security** tab in the sidebar.
 
@@ -136,8 +132,8 @@ In your project dashboard on Dub, click on the **Settings** tab in the menu bar
 
 Under the **SAML Single Sign-On** section, click on **Configure**. This will open up the SAML SSO modal:
 
-1. Select **Okta** as the SAML provider.
-2. Enter the Metadata URL value that you copied from Step 4.
+1. Select **Google** as the SAML provider.
+2. Upload the metadata XML file you downloaded in Step 1.
 3. Click **Save changes**.
 
 <Image

diff --git a/lib/constants/index.ts b/lib/constants/index.ts
@@ -204,7 +204,7 @@ export const SAML_PROVIDERS = [
     },
   },
   {
-    name: "Google Workspace",
+    name: "Google",
     logo: "/_static/icons/google.svg",
     saml: "google",
     samlModalCopy: "XML Metadata File",

diff --git a/pages/api/auth/[...nextauth].tsx b/pages/api/auth/[...nextauth].tsx
@@ -173,6 +173,7 @@ export const authOptions: NextAuthOptions = {
   },
   callbacks: {
     signIn: async ({ user, account, profile }) => {
+      console.log({ user, account, profile });
       if (!user.email || (await isBlacklistedEmail(user.email))) {
         return false;
       }