Add lockout-preventative step in saml config setup, add update org slug section in org settings, revise navigate to org flow to account for org-level auth enforced orgs

frontend/src/context/OrganizationContext/OrganizationContext.tsx

@@ -25,7 +25,7 @@ export const OrgProvider = ({ children }: Props): JSX.Element => {
   const value = useMemo<TOrgContext>(
     () => ({
       orgs: userOrgs,
-      currentOrg: (userOrgs || []).find(({ id }) => id === currentWsOrgID) || (userOrgs || [])[0],
+      currentOrg: (userOrgs || []).find(({ id }) => id === currentWsOrgID),
       isLoading
     }),
     [currentWsOrgID, userOrgs, isLoading]

frontend/src/hooks/api/organization/index.ts

@@ -17,6 +17,6 @@ export {
     useGetOrgPmtMethods,
     useGetOrgTaxIds,
     useGetOrgTrialUrl,
-    useRenameOrg, 
+    useUpdateOrg, 
     useUpdateOrgBillingDetails
 } from "./queries";

frontend/src/hooks/api/organization/queries.tsx

@@ -12,8 +12,8 @@ import {
   PlanBillingInfo,
   PmtMethod,
   ProductsTable,
-  RenameOrgDTO,
-  TaxID
+  TaxID,
+  UpdateOrgDTO
 } from "./types";
 
 export const organizationKeys = {
@@ -65,12 +65,20 @@ export const useCreateOrg = () => {
   });
 };
 
-export const useRenameOrg = () => {
+export const useUpdateOrg = () => {
   const queryClient = useQueryClient();
-
-  return useMutation<{}, {}, RenameOrgDTO>({
-    mutationFn: ({ newOrgName, orgId }) => {
-      return apiRequest.patch(`/api/v1/organization/${orgId}/name`, { name: newOrgName });
+  return useMutation<{}, {}, UpdateOrgDTO>({
+    mutationFn: ({ 
+      name, 
+      authEnforced,
+      slug,
+      orgId 
+    }) => {
+      return apiRequest.patch(`/api/v1/organization/${orgId}`, { 
+        name, 
+        authEnforced,
+        slug
+      });
     },
     onSuccess: () => {
       queryClient.invalidateQueries(organizationKeys.getUserOrganizations);

frontend/src/hooks/api/organization/types.ts

@@ -3,11 +3,15 @@ export type Organization = {
   name: string;
   createAt: string;
   updatedAt: string;
+  authEnforced: boolean;
+  slug: string;
 };
 
-export type RenameOrgDTO = {
+export type UpdateOrgDTO = {
   orgId: string;
-  newOrgName: string;
+  name?: string;
+  authEnforced?: boolean;
+  slug?: string;
 };
 
 export type BillingDetails = {

frontend/src/layouts/AppLayout/AppLayout.tsx

@@ -310,10 +310,22 @@ export const AppLayout = ({ children }: LayoutProps) => {
                       </DropdownMenuTrigger>
                       <DropdownMenuContent align="start" className="p-1">
                         <div className="px-2 py-1 text-xs text-mineshaft-400">{user?.email}</div>
-                        {orgs?.map((org) => (
+                        {orgs?.map((org) => { 
+                          return (
                           <DropdownMenuItem key={org.id}>
                             <Button
-                              onClick={() => changeOrg(org?.id)}
+                              onClick={() => {
+                                if (currentOrg?.id === org.id) return;
+                                
+                                if (org.authEnforced) {
+                                  // org has an org-level auth method enabled (e.g. SAML)
+                                  // -> logout + redirect to SAML SSO
+                                  logOutUser();
+                                  return;
+                                }
+                                
+                                changeOrg(org?.id)
+                              }}
                               variant="plain"
                               colorSchema="secondary"
                               size="xs"
@@ -329,7 +341,8 @@ export const AppLayout = ({ children }: LayoutProps) => {
                               </div>
                             </Button>
                           </DropdownMenuItem>
-                        ))}
+                         )
+                        })}
                         {/* <DropdownMenuItem key="add-org">
                           <Button
                             onClick={() => handlePopUpOpen("createOrg")}

frontend/src/views/Login/Login.tsx

@@ -10,7 +10,6 @@ import {
     MFAStep,
     SAMLSSOStep
 } from "./components";
-// import { navigateUserToOrg } from "../../Login.utils";
 import { navigateUserToOrg } from "./Login.utils";
 
 export const Login = () => {

frontend/src/views/Login/Login.utils.tsx

@@ -4,6 +4,8 @@ import { fetchOrganizations } from "@app/hooks/api/organization/queries";
 
 export const navigateUserToOrg = async (router: NextRouter, organizationId?: string) => {
   const userOrgs = await fetchOrganizations();
+  
+  const nonAuthEnforcedOrgs = userOrgs.filter((org) => !org.authEnforced);
 
   if (organizationId) {
     localStorage.setItem("orgData.id", organizationId);
@@ -11,13 +13,13 @@ export const navigateUserToOrg = async (router: NextRouter, organizationId?: str
     return;
   }
 
-  if (userOrgs.length > 0) {
-    // user is part of at least 1 org
-    const userOrg = userOrgs[0] && userOrgs[0].id;
+  if (nonAuthEnforcedOrgs.length > 0) {
+    // user is part of at least 1 non-auth enforced org
+    const userOrg = nonAuthEnforcedOrgs[0] && nonAuthEnforcedOrgs[0].id;
     localStorage.setItem("orgData.id", userOrg);
     router.push(`/org/${userOrg}/overview`);
   } else {
-    // user is not part of any org
+    // user is not part of any non-auth enforced orgs
     localStorage.removeItem("orgData.id");
     router.push("/org/none");
   }

frontend/src/views/Org/NonePage/NonePage.tsx

@@ -1,9 +1,15 @@
+import { useEffect } from "react";
+
 import { usePopUp } from "@app/hooks/usePopUp";
 
 import { CreateOrgModal } from "../components";
 
 export const NonePage = () => {
   const { popUp, handlePopUpToggle } = usePopUp(["createOrg"] as const);
+  
+  useEffect(() => {
+    handlePopUpToggle("createOrg", true);
+  }, []);
 
   return (
     <div className="flex h-full w-full justify-center bg-bunker-800 text-white">
@@ -13,4 +19,4 @@ export const NonePage = () => {
       />
     </div>
   );
-};
+};

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

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

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

@@ -0,0 +1,74 @@
+import { useRouter } from "next/router";
+
+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 router = useRouter();
+    const { createNotification } = useNotificationContext();
+    const { currentOrg } = useOrganization();
+    
+    const { mutateAsync } = useUpdateOrg();
+    
+    const logout = useLogoutUser();
+    
+    const logOutUser = async () => {
+        try {
+        console.log("Logging out...");
+        await logout.mutateAsync();
+        router.push("/login");
+        } catch (error) {
+        console.error(error);
+        }
+    };
+    
+    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) {
+                logOutUser();
+            }
+            
+        } 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/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}

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

@@ -3,6 +3,7 @@ import { useOrgPermission } from "@app/context";
 import { OrgDeleteSection } from "../OrgDeleteSection";
 import { OrgIncidentContactsSection } from "../OrgIncidentContactsSection";
 import { OrgNameChangeSection } from "../OrgNameChangeSection";
+import { OrgSlugChangeSection } from "../OrgSlugChangeSection";
 
 export const OrgGeneralTab = () => {
   const { membership } = useOrgPermission();
@@ -10,8 +11,9 @@ export const OrgGeneralTab = () => {
   return (
     <div>
       <OrgNameChangeSection />
+      <OrgSlugChangeSection />
       <OrgIncidentContactsSection />
       {membership && membership.role === "admin" && <OrgDeleteSection />}
     </div>
   );
-};
+};

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

@@ -7,7 +7,7 @@ import { useNotificationContext } from "@app/components/context/Notifications/No
 import { OrgPermissionCan } from "@app/components/permissions";
 import { Button, FormControl, Input } from "@app/components/v2";
 import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
-import { useRenameOrg } from "@app/hooks/api";
+import { useUpdateOrg } from "@app/hooks/api";
 
 const formSchema = yup.object({
   name: yup.string().required().label("Project Name")
@@ -21,7 +21,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
   const { handleSubmit, control, reset } = useForm<FormData>({
     resolver: yupResolver(formSchema)
   });
-  const { mutateAsync, isLoading } = useRenameOrg();
+  const { mutateAsync, isLoading } = useUpdateOrg();
 
   useEffect(() => {
     if (currentOrg) {
@@ -34,7 +34,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
       if (!currentOrg?.id) return;
       if (name === "") return;
 
-      await mutateAsync({ orgId: currentOrg?.id, newOrgName: name });
+      await mutateAsync({ orgId: currentOrg?.id, name });
       createNotification({
         text: "Successfully renamed organization",
         type: "success"
@@ -53,7 +53,7 @@ export const OrgNameChangeSection = (): JSX.Element => {
       onSubmit={handleSubmit(onFormSubmit)}
       className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
     >
-      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Name</p>
+      <p className="mb-4 text-xl font-semibold text-mineshaft-100">Organization Name</p>
       <div className="mb-2 max-w-md">
         <Controller
           defaultValue=""

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

@@ -0,0 +1,84 @@
+import { useEffect } from "react";
+import { Controller, useForm } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
+import * as yup from "yup";
+
+import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
+import { OrgPermissionCan } from "@app/components/permissions";
+import { Button, FormControl, Input } from "@app/components/v2";
+import { OrgPermissionActions, OrgPermissionSubjects, useOrganization } from "@app/context";
+import { useUpdateOrg } from "@app/hooks/api";
+
+const formSchema = yup.object({
+    slug: yup.string().required().label("Project Slug")
+});
+
+type FormData = yup.InferType<typeof formSchema>;
+
+export const OrgSlugChangeSection = (): JSX.Element => {
+    const { currentOrg } = useOrganization();
+    const { createNotification } = useNotificationContext();
+    const { handleSubmit, control, reset } = useForm<FormData>({
+        resolver: yupResolver(formSchema)
+    });
+    const { mutateAsync, isLoading } = useUpdateOrg();
+
+    useEffect(() => {
+        if (currentOrg) {
+            reset({ slug: currentOrg.slug });
+        }
+    }, [currentOrg]);
+
+    const onFormSubmit = async ({ slug }: FormData) => {
+        try {
+            if (!currentOrg?.id) return;
+            if (slug === "") return;
+
+            await mutateAsync({ orgId: currentOrg?.id, slug });
+            createNotification({
+                text: "Successfully updated organization slug",
+                type: "success"
+            });
+        } catch (error) {
+            console.error(error);
+            createNotification({
+                text: "Failed to update organization slug",
+                type: "error"
+            });
+        }
+    };
+    
+    return (
+        <form
+            onSubmit={handleSubmit(onFormSubmit)}
+            className="mb-6 rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4"
+        >
+            <p className="mb-4 text-xl font-semibold text-mineshaft-100">Organization Slug</p>
+            <div className="mb-2 max-w-md">
+                <Controller
+                    defaultValue=""
+                    render={({ field, fieldState: { error } }) => (
+                        <FormControl isError={Boolean(error)} errorText={error?.message}>
+                            <Input placeholder="acme" {...field} />
+                        </FormControl>
+                    )}
+                    control={control}
+                    name="slug"
+                />
+            </div>
+            <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Settings}>
+                {(isAllowed) => (
+                    <Button
+                        isLoading={isLoading}
+                        isDisabled={!isAllowed}
+                        colorSchema="primary"
+                        variant="outline_bg"
+                        type="submit"
+                    >
+                        Save
+                    </Button>
+                )}
+            </OrgPermissionCan>
+        </form>
+    );
+}

frontend/src/views/Settings/OrgSettingsPage/components/OrgSlugChangeSection/index.tsx

@@ -0,0 +1 @@
+export { OrgSlugChangeSection } from "./OrgSlugChangeSection";