Make progress on SCIM

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgAuthTab.tsx

@@ -1,15 +1,17 @@
 import { OrgPermissionActions, OrgPermissionSubjects } from "@app/context";
 import { withPermission } from "@app/hoc";
 
-import { OrgSCIMSection } from "./OrgSCIMSection";
+import { OrgScimSection } from "./OrgScimSection";
+import { OrgGeneralAuthSection } from "./OrgGeneralAuthSection";
 import { OrgSSOSection } from "./OrgSSOSection";
 
 export const OrgAuthTab = withPermission(
   () => {
     return (
       <div>
+        <OrgGeneralAuthSection />
         <OrgSSOSection />
-        <OrgSCIMSection />
+        <OrgScimSection />
       </div>
     );
   },

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx

@@ -0,0 +1,65 @@
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Switch } from "@app/components/v2";
+import {
+    OrgPermissionActions,
+    OrgPermissionSubjects,
+    useOrganization 
+} from "@app/context";
+import { useLogoutUser,useUpdateOrg } from "@app/hooks/api";
+
+export const OrgGeneralAuthSection = () => {
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    
+    const { mutateAsync } = useUpdateOrg();
+    
+    const logout = useLogoutUser();
+    
+    const handleEnforceOrgAuthToggle = async (value: boolean) => {
+        try {
+            if (!currentOrg?.id) return;
+            
+            await mutateAsync({ 
+                orgId: currentOrg?.id, 
+                authEnforced: value 
+            });
+            
+            createNotification({
+                text: `Successfully ${value ? "enforced" : "un-enforced"} org-level auth`,
+                type: "success"
+            });
+            
+            if (value) {
+                await logout.mutateAsync();
+                window.open(`/api/v1/sso/redirect/saml2/organizations/${currentOrg.slug}`);
+                window.close();
+            }
+            
+        } catch (err) {
+            console.error(err);
+            createNotification({
+                text: `Failed to ${value ? "enforce" : "un-enforce"} org-level auth`,
+                type: "error"
+            });
+        }
+    }
+
+    return (
+        <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
+            <h2 className="flex-1 text-xl font-semibold text-white mb-8">Settings</h2>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
+                {(isAllowed) => (
+                    <Switch
+                        id="enforce-org-auth"
+                        onCheckedChange={(value) => handleEnforceOrgAuthToggle(value)}
+                        isChecked={currentOrg?.authEnforced ?? false}
+                        isDisabled={!isAllowed}
+                    >
+                        Enforce SAML SSO
+                    </Switch>
+                )}
+            </OrgPermissionCan>
+        </div>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSCIMSection.tsx

@@ -1,11 +1,11 @@
 import { useState } from "react";
-import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
+import { faPlus, faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 // import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 // import { OrgPermissionCan } from "@app/components/permissions";
 import { 
-    // Button,
+    Button,
     IconButton,
     Switch
 } from "@app/components/v2";
@@ -21,7 +21,7 @@ import { useGetScimToken } from "@app/hooks/api";
 
 // TODO: add permissioning for enteprise SCIM
 
-export const OrgSCIMSection = () => {
+export const OrgScimSection = () => {
     const { currentOrg } = useOrganization();
     // const { createNotification } = useNotificationContext();
     // const { subscription } = useSubscription();
@@ -36,6 +36,10 @@ export const OrgSCIMSection = () => {
     
     // TODO: get SCIM stuf
     
+    const addScimTokenBtnClick = () => {
+
+    }
+    
     const handleSCIMToggle = (value: boolean) => {
         // TODO
         try {
@@ -52,7 +56,17 @@ export const OrgSCIMSection = () => {
     
     return (
         <div className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
-            <h2 className="flex-1 text-xl font-semibold text-white mb-8">SCIM Configuration</h2>
+            <div className="mb-8 flex items-center">
+                <h2 className="flex-1 text-xl font-semibold text-white">SCIM Configuration</h2>
+                <Button
+                    onClick={addScimTokenBtnClick}
+                    colorSchema="secondary"
+                    // isDisabled={!isAllowed}
+                    leftIcon={<FontAwesomeIcon icon={faPlus} />}
+                >
+                    Add SCIM Token
+                </Button>
+            </div>
             <Switch
                 id="enable-scim"
                 onCheckedChange={(value) => handleSCIMToggle(value)}

frontend/src/views/Settings/OrgSettingsPage/components/OrgAuthTab/OrgSSOSection.tsx

@@ -1,5 +1,6 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { format } from "date-fns";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import { OrgPermissionCan } from "@app/components/permissions";
@@ -136,6 +137,10 @@ export const OrgSSOSection = (): JSX.Element => {
         <h3 className="text-sm text-mineshaft-400">Issuer</h3>
         <p className="text-md text-gray-400">{data && data.issuer !== "" ? data.issuer : "-"}</p>
       </div>
+      <div className="mb-4">
+        <h3 className="text-sm text-mineshaft-400">Last Logged In</h3>
+        <p className="text-md text-gray-400">{data?.lastUsed ? format(new Date(data?.lastUsed), "yyyy-MM-dd HH:mm:ss") : "-"}</p>
+      </div>
       <SSOModal
         popUp={popUp}
         handlePopUpClose={handlePopUpClose}