misc: introduce admin login portal

2026-09-22 13:39:35 +00:00 · 2025-04-16 03:28:04 +08:00
parent d0db5c00e8
commit 785173747f
8 changed files with 157 additions and 42 deletions
--- a/backend/src/services/auth/auth-login-service.ts
+++ b/backend/src/services/auth/auth-login-service.ts
@@ -2,7 +2,7 @@ import bcrypt from "bcrypt";
 import jwt from "jsonwebtoken";
 import { Knex } from "knex";

-import { TUsers, UserDeviceSchema } from "@app/db/schemas";
+import { OrgMembershipRole, TUsers, UserDeviceSchema } from "@app/db/schemas";
 import { isAuthMethodSaml } from "@app/ee/services/permission/permission-fns";
 import { getConfig } from "@app/lib/config/env";
 import { request } from "@app/lib/config/request";
@@ -174,20 +174,25 @@ export const authLoginServiceFactory = ({
    const userEnc = await userDAL.findUserEncKeyByUsername({
      username: email
    });
+
    const serverCfg = await getServerCfg();

+    if (!userEnc || (userEnc && !userEnc.isAccepted)) {
+      throw new Error("Failed to find user");
+    }
+
    if (
      serverCfg.enabledLoginMethods &&
      !serverCfg.enabledLoginMethods.includes(LoginMethod.EMAIL) &&
      !providerAuthToken
    ) {
-      throw new BadRequestError({
-        message: "Login with email is disabled by administrator."
-      });
-    }
-
-    if (!userEnc || (userEnc && !userEnc.isAccepted)) {
-      throw new Error("Failed to find user");
+      // bypass server configuration when user is an organization admin - this is to prevent lockout
+      const userOrgs = await orgDAL.findAllOrgsByUserId(userEnc.userId);
+      if (!userOrgs.some((org) => org.userRole === OrgMembershipRole.Admin)) {
+        throw new BadRequestError({
+          message: "Login with email is disabled by administrator."
+        });
+      }
    }

    if (!userEnc.authMethods?.includes(AuthMethod.EMAIL)) {
@@ -573,28 +578,40 @@ export const authLoginServiceFactory = ({
      switch (authMethod) {
        case AuthMethod.GITHUB: {
          if (!serverCfg.enabledLoginMethods.includes(LoginMethod.GITHUB)) {
-            throw new BadRequestError({
-              message: "Login with Github is disabled by administrator.",
-              name: "Oauth 2 login"
-            });
+            // bypass server configuration when user is an organization admin - this is to prevent lockout
+            const userOrgs = await orgDAL.findAllOrgsByUserId(user.id);
+            if (!userOrgs.some((org) => org.userRole === OrgMembershipRole.Admin)) {
+              throw new BadRequestError({
+                message: "Login with Github is disabled by administrator.",
+                name: "Oauth 2 login"
+              });
+            }
          }
          break;
        }
        case AuthMethod.GOOGLE: {
          if (!serverCfg.enabledLoginMethods.includes(LoginMethod.GOOGLE)) {
-            throw new BadRequestError({
-              message: "Login with Google is disabled by administrator.",
-              name: "Oauth 2 login"
-            });
+            // bypass server configuration when user is an organization admin - this is to prevent lockout
+            const userOrgs = await orgDAL.findAllOrgsByUserId(user.id);
+            if (!userOrgs.some((org) => org.userRole === OrgMembershipRole.Admin)) {
+              throw new BadRequestError({
+                message: "Login with Google is disabled by administrator.",
+                name: "Oauth 2 login"
+              });
+            }
          }
          break;
        }
        case AuthMethod.GITLAB: {
          if (!serverCfg.enabledLoginMethods.includes(LoginMethod.GITLAB)) {
-            throw new BadRequestError({
-              message: "Login with Gitlab is disabled by administrator.",
-              name: "Oauth 2 login"
-            });
+            // bypass server configuration when user is an organization admin - this is to prevent lockout
+            const userOrgs = await orgDAL.findAllOrgsByUserId(user.id);
+            if (!userOrgs.some((org) => org.userRole === OrgMembershipRole.Admin)) {
+              throw new BadRequestError({
+                message: "Login with Gitlab is disabled by administrator.",
+                name: "Oauth 2 login"
+              });
+            }
          }
          break;
        }
--- a/frontend/src/pages/auth/AdminLoginPage/route.tsx
+++ b/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 />
+});
--- a/frontend/src/pages/auth/LoginPage/LoginPage.tsx
+++ b/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}
--- a/frontend/src/pages/auth/LoginPage/components/InitialStep/InitialStep.tsx
+++ b/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>
    );
  }
--- a/frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgGeneralAuthSection.tsx
+++ b/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
--- a/frontend/src/pages/organization/SettingsPage/components/OrgAuthTab/OrgOIDCSection.tsx
+++ b/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">
--- a/frontend/src/routeTree.gen.ts
+++ b/frontend/src/routeTree.gen.ts
@@ -33,6 +33,7 @@ import { Route as authSignUpSsoPageRouteImport } from './pages/auth/SignUpSsoPag
 import { Route as authLoginSsoPageRouteImport } from './pages/auth/LoginSsoPage/route'
 import { Route as authSelectOrgPageRouteImport } from './pages/auth/SelectOrgPage/route'
 import { Route as authLoginLdapPageRouteImport } from './pages/auth/LoginLdapPage/route'
+import { Route as authAdminLoginPageRouteImport } from './pages/auth/AdminLoginPage/route'
 import { Route as adminSignUpPageRouteImport } from './pages/admin/SignUpPage/route'
 import { Route as organizationNoOrgPageRouteImport } from './pages/organization/NoOrgPage/route'
 import { Route as authSignUpPageRouteImport } from './pages/auth/SignUpPage/route'
@@ -393,6 +394,12 @@ const authLoginLdapPageRouteRoute = authLoginLdapPageRouteImport.update({
  getParentRoute: () => RestrictLoginSignupLoginRoute,
 } as any)

+const authAdminLoginPageRouteRoute = authAdminLoginPageRouteImport.update({
+  id: '/admin',
+  path: '/admin',
+  getParentRoute: () => RestrictLoginSignupLoginRoute,
+} as any)
+
 const adminSignUpPageRouteRoute = adminSignUpPageRouteImport.update({
  id: '/admin/signup',
  path: '/admin/signup',
@@ -1775,6 +1782,13 @@ declare module '@tanstack/react-router' {
      preLoaderRoute: typeof adminSignUpPageRouteImport
      parentRoute: typeof middlewaresRestrictLoginSignupImport
    }
+    '/_restrict-login-signup/login/admin': {
+      id: '/_restrict-login-signup/login/admin'
+      path: '/admin'
+      fullPath: '/login/admin'
+      preLoaderRoute: typeof authAdminLoginPageRouteImport
+      parentRoute: typeof RestrictLoginSignupLoginImport
+    }
    '/_restrict-login-signup/login/ldap': {
      id: '/_restrict-login-signup/login/ldap'
      path: '/ldap'
@@ -3655,6 +3669,7 @@ const middlewaresAuthenticateRouteWithChildren =

 interface RestrictLoginSignupLoginRouteChildren {
  authLoginPageRouteRoute: typeof authLoginPageRouteRoute
+  authAdminLoginPageRouteRoute: typeof authAdminLoginPageRouteRoute
  authLoginLdapPageRouteRoute: typeof authLoginLdapPageRouteRoute
  authSelectOrgPageRouteRoute: typeof authSelectOrgPageRouteRoute
  authLoginSsoPageRouteRoute: typeof authLoginSsoPageRouteRoute
@@ -3665,6 +3680,7 @@ interface RestrictLoginSignupLoginRouteChildren {
 const RestrictLoginSignupLoginRouteChildren: RestrictLoginSignupLoginRouteChildren =
  {
    authLoginPageRouteRoute: authLoginPageRouteRoute,
+    authAdminLoginPageRouteRoute: authAdminLoginPageRouteRoute,
    authLoginLdapPageRouteRoute: authLoginLdapPageRouteRoute,
    authSelectOrgPageRouteRoute: authSelectOrgPageRouteRoute,
    authLoginSsoPageRouteRoute: authLoginSsoPageRouteRoute,
@@ -3739,6 +3755,7 @@ export interface FileRoutesByFullPath {
  '/signup/': typeof authSignUpPageRouteRoute
  '/organization/none': typeof organizationNoOrgPageRouteRoute
  '/admin/signup': typeof adminSignUpPageRouteRoute
+  '/login/admin': typeof authAdminLoginPageRouteRoute
  '/login/ldap': typeof authLoginLdapPageRouteRoute
  '/login/select-organization': typeof authSelectOrgPageRouteRoute
  '/login/sso': typeof authLoginSsoPageRouteRoute
@@ -3918,6 +3935,7 @@ export interface FileRoutesByTo {
  '/signup': typeof authSignUpPageRouteRoute
  '/organization/none': typeof organizationNoOrgPageRouteRoute
  '/admin/signup': typeof adminSignUpPageRouteRoute
+  '/login/admin': typeof authAdminLoginPageRouteRoute
  '/login/ldap': typeof authLoginLdapPageRouteRoute
  '/login/select-organization': typeof authSelectOrgPageRouteRoute
  '/login/sso': typeof authLoginSsoPageRouteRoute
@@ -4096,6 +4114,7 @@ export interface FileRoutesById {
  '/_restrict-login-signup/signup/': typeof authSignUpPageRouteRoute
  '/_authenticate/organization/none': typeof organizationNoOrgPageRouteRoute
  '/_restrict-login-signup/admin/signup': typeof adminSignUpPageRouteRoute
+  '/_restrict-login-signup/login/admin': typeof authAdminLoginPageRouteRoute
  '/_restrict-login-signup/login/ldap': typeof authLoginLdapPageRouteRoute
  '/_restrict-login-signup/login/select-organization': typeof authSelectOrgPageRouteRoute
  '/_restrict-login-signup/login/sso': typeof authLoginSsoPageRouteRoute
@@ -4286,6 +4305,7 @@ export interface FileRouteTypes {
    | '/signup/'
    | '/organization/none'
    | '/admin/signup'
+    | '/login/admin'
    | '/login/ldap'
    | '/login/select-organization'
    | '/login/sso'
@@ -4464,6 +4484,7 @@ export interface FileRouteTypes {
    | '/signup'
    | '/organization/none'
    | '/admin/signup'
+    | '/login/admin'
    | '/login/ldap'
    | '/login/select-organization'
    | '/login/sso'
@@ -4640,6 +4661,7 @@ export interface FileRouteTypes {
    | '/_restrict-login-signup/signup/'
    | '/_authenticate/organization/none'
    | '/_restrict-login-signup/admin/signup'
+    | '/_restrict-login-signup/login/admin'
    | '/_restrict-login-signup/login/ldap'
    | '/_restrict-login-signup/login/select-organization'
    | '/_restrict-login-signup/login/sso'
@@ -4928,6 +4950,7 @@ export const routeTree = rootRoute
      "parent": "/_restrict-login-signup",
      "children": [
        "/_restrict-login-signup/login/",
+        "/_restrict-login-signup/login/admin",
        "/_restrict-login-signup/login/ldap",
        "/_restrict-login-signup/login/select-organization",
        "/_restrict-login-signup/login/sso",
@@ -4959,6 +4982,10 @@ export const routeTree = rootRoute
      "filePath": "admin/SignUpPage/route.tsx",
      "parent": "/_restrict-login-signup"
    },
+    "/_restrict-login-signup/login/admin": {
+      "filePath": "auth/AdminLoginPage/route.tsx",
+      "parent": "/_restrict-login-signup/login"
+    },
    "/_restrict-login-signup/login/ldap": {
      "filePath": "auth/LoginLdapPage/route.tsx",
      "parent": "/_restrict-login-signup/login"
--- a/frontend/src/routes.ts
+++ b/frontend/src/routes.ts
@@ -328,6 +328,7 @@ export const routes = rootRoute("root.tsx", [
    route("/admin/signup", "admin/SignUpPage/route.tsx"),
    route("/login", [
      index("auth/LoginPage/route.tsx"),
+      route("/admin", "auth/AdminLoginPage/route.tsx"),
      route("/select-organization", "auth/SelectOrgPage/route.tsx"),
      route("/sso", "auth/LoginSsoPage/route.tsx"),
      route("/ldap", "auth/LoginLdapPage/route.tsx"),