misc: introduce admin login portal

frontend/src/pages/auth/AdminLoginPage/route.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from "@tanstack/react-router";
+
+import { LoginPage } from "../LoginPage/LoginPage";
+
+export const Route = createFileRoute("/_restrict-login-signup/login/admin")({
+  component: () => <LoginPage isAdmin />
+});

frontend/src/pages/auth/LoginPage/LoginPage.tsx

@@ -8,7 +8,7 @@ import { isLoggedIn } from "@app/hooks/api/reactQuery";
 import { InitialStep, SSOStep } from "./components";
 import { useNavigateToSelectOrganization } from "./Login.utils";
 
-export const LoginPage = () => {
+export const LoginPage = ({ isAdmin }: { isAdmin?: boolean }) => {
   const { t } = useTranslation();
   const [step, setStep] = useState(0);
   const [email, setEmail] = useState("");
@@ -44,6 +44,7 @@ export const LoginPage = () => {
       case 0:
         return (
           <InitialStep
+            isAdmin={isAdmin}
             setStep={setStep}
             email={email}
             setEmail={setEmail}

frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx

@@ -26,15 +26,22 @@ type Props = {
   setEmail: (email: string) => void;
   password: string;
   setPassword: (email: string) => void;
+  isAdmin?: boolean;
 };
 
-export const InitialStep = ({ setStep, email, setEmail, password, setPassword }: Props) => {
+export const InitialStep = ({
+  setStep,
+  email,
+  setEmail,
+  password,
+  setPassword,
+  isAdmin
+}: Props) => {
   const navigate = useNavigate();
 
   const { t } = useTranslation();
   const [isLoading, setIsLoading] = useState(false);
   const [loginError, setLoginError] = useState(false);
-  const [isOtherLoginMethodsSelected, setIsOtherLoginMethodsSelected] = useState(false);
   const { config } = useServerConfig();
   const queryParams = new URLSearchParams(window.location.search);
   const [captchaToken, setCaptchaToken] = useState("");
@@ -63,7 +70,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   };
 
   useEffect(() => {
-    if (serverDetails?.samlDefaultOrgSlug) redirectToSaml(serverDetails.samlDefaultOrgSlug);
+    if (serverDetails?.samlDefaultOrgSlug && !isAdmin) {
+      redirectToSaml(serverDetails.samlDefaultOrgSlug);
+    }
   }, [serverDetails?.samlDefaultOrgSlug]);
 
   const handleSaml = () => {
@@ -83,7 +92,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
   };
 
   const shouldDisplayLoginMethod = (method: LoginMethod) =>
-    !config.enabledLoginMethods || config.enabledLoginMethods.includes(method);
+    isAdmin || !config.enabledLoginMethods || config.enabledLoginMethods.includes(method);
 
   const handleLogin = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -161,11 +170,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
     setIsLoading(false);
   };
 
-  if (
-    config.defaultAuthOrgAuthEnforced &&
-    config.defaultAuthOrgAuthMethod &&
-    !isOtherLoginMethodsSelected
-  ) {
+  if (config.defaultAuthOrgAuthEnforced && config.defaultAuthOrgAuthMethod && !isAdmin) {
     return (
       <form
         onSubmit={handleLogin}
@@ -201,14 +206,6 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
             </Button>
           </div>
         )}
-        <Button
-          colorSchema="gray"
-          variant="link"
-          className="mt-6 font-normal text-mineshaft-400 transition-all duration-75 hover:text-mineshaft-300"
-          onClick={() => setIsOtherLoginMethodsSelected(true)}
-        >
-          Continue with other login methods
-        </Button>
       </form>
     );
   }

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx

@@ -1,7 +1,10 @@
+import { faInfoCircle } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
 import { UpgradePlanModal } from "@app/components/license/UpgradePlanModal";
 import { createNotification } from "@app/components/notifications";
 import { OrgPermissionCan } from "@app/components/permissions";
-import { Switch } from "@app/components/v2";
+import { Switch, Tooltip } from "@app/components/v2";
 import {
   OrgPermissionActions,
   OrgPermissionSubjects,
@@ -72,7 +75,38 @@ export const OrgGeneralAuthSection = () => {
             </div> */}
       <div className="py-4">
         <div className="mb-2 flex justify-between">
-          <h3 className="text-md text-mineshaft-100">Enforce SAML SSO</h3>
+          <div className="flex items-center gap-1">
+            <span className="text-md text-mineshaft-100">Enforce SAML SSO</span>
+            <Tooltip
+              className="max-w-lg"
+              content={
+                <div>
+                  <span>
+                    Login enforcement is only applied to non-admin users in order to prevent total
+                    lockout from the organization when the SAML provider is unavailable.
+                  </span>
+
+                  <p className="mt-4">
+                    In case of a lockout, use the admin login portal{" "}
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline underline-offset-2 hover:text-mineshaft-300"
+                      href={`${window.location.origin}/admin/login`}
+                    >
+                      here.
+                    </a>
+                  </p>
+                </div>
+              }
+            >
+              <FontAwesomeIcon
+                icon={faInfoCircle}
+                size="sm"
+                className="mt-0.5 inline-block text-mineshaft-400"
+              />
+            </Tooltip>
+          </div>
           <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
             {(isAllowed) => (
               <Switch

frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx

@@ -158,7 +158,38 @@ export const OrgOIDCSection = (): JSX.Element => {
       )}
       <div className="py-4">
         <div className="mb-2 flex justify-between">
-          <h3 className="text-md text-mineshaft-100">Enforce OIDC SSO</h3>
+          <div className="flex items-center gap-1">
+            <span className="text-md text-mineshaft-100">Enforce OIDC SSO</span>
+            <Tooltip
+              className="max-w-lg"
+              content={
+                <div>
+                  <span>
+                    Login enforcement is only applied to non-admin users in order to prevent total
+                    lockout from the organization when the OIDC provider is unavailable.
+                  </span>
+
+                  <p className="mt-4">
+                    In case of a lockout, use the admin login portal{" "}
+                    <a
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="underline underline-offset-2 hover:text-mineshaft-300"
+                      href={`${window.location.origin}/admin/login`}
+                    >
+                      here.
+                    </a>
+                  </p>
+                </div>
+              }
+            >
+              <FontAwesomeIcon
+                icon={faInfoCircle}
+                size="sm"
+                className="mt-0.5 inline-block text-mineshaft-400"
+              />
+            </Tooltip>
+          </div>
           <OrgPermissionCan I={OrgPermissionActions.Edit} a={OrgPermissionSubjects.Sso}>
             {(isAllowed) => (
               <Switch
@@ -171,7 +202,7 @@ export const OrgOIDCSection = (): JSX.Element => {
           </OrgPermissionCan>
         </div>
         <p className="text-sm text-mineshaft-300">
-          Enforce non-admin users to authenticate via OIDC to access this organization.
+          <span>Enforce non-admin users to authenticate via OIDC to access this organization.</span>
         </p>
       </div>
       <div className="py-4">