feat: renamed old frontend and fixed some minor bugs

2026-10-17 10:45:58 +00:00 · 2025-01-06 14:56:49 +05:30
parent 8c902d7699
commit 54377a44d3
2577 changed files with 35240 additions and 35116 deletions
@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { faWarning, faXmark } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { IconButton } from "@app/components/v2";
+
+export const InsecureConnectionBanner = () => {
+  const [isAcknowledged, setIsAcknowledged] = useState(
+    localStorage.getItem("insecureConnectionAcknowledged") ?? false
+  );
+
+  const handleDismiss = () => {
+    setIsAcknowledged(true);
+    localStorage.setItem("insecureConnectionAcknowledged", "true");
+  };
+
+  if (isAcknowledged) return null;
+
+  return (
+    <div className="flex w-screen items-start border-b border-red-900 bg-red-700 px-2 py-1 font-inter text-sm text-mineshaft-200">
+      <FontAwesomeIcon className="ml-3.5 mt-1" icon={faWarning} />
+      <span className="mx-1 ml-2 mt-[0.04rem]">
+        Your connection to this Infisical instance is not secured via HTTPS. Some features may not
+        behave as expected.
+      </span>
+      <IconButton
+        size="xs"
+        className="ml-auto"
+        colorSchema="danger"
+        onClick={handleDismiss}
+        ariaLabel="Dismiss banner"
+      >
+        <FontAwesomeIcon icon={faXmark} />
+      </IconButton>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from "./InsecureConnectionBanner";
@@ -0,0 +1,131 @@
+import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
+import {
+  faBook,
+  faEnvelope,
+  faInfinity,
+  faInfo,
+  faPlus,
+  faQuestion
+} from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "@tanstack/react-router";
+
+import { WishForm } from "@app/components/features/WishForm";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@app/components/v2";
+import { useOrganization, useSubscription } from "@app/context";
+import { useGetOrgTrialUrl } from "@app/hooks/api";
+
+export const INFISICAL_SUPPORT_OPTIONS = [
+  [
+    <FontAwesomeIcon key={1} className="pr-4 text-sm" icon={faSlack} />,
+    "Support Forum",
+    "https://infisical.com/slack"
+  ],
+  [
+    <FontAwesomeIcon key={2} className="pr-4 text-sm" icon={faBook} />,
+    "Read Docs",
+    "https://infisical.com/docs/documentation/getting-started/introduction"
+  ],
+  [
+    <FontAwesomeIcon key={3} className="pr-4 text-sm" icon={faGithub} />,
+    "GitHub Issues",
+    "https://github.com/Infisical/infisical/issues"
+  ],
+  [
+    <FontAwesomeIcon key={4} className="pr-4 text-sm" icon={faEnvelope} />,
+    "Email Support",
+    "mailto:[email protected]"
+  ]
+];
+
+export const SidebarFooter = () => {
+  const { subscription } = useSubscription();
+  const { currentOrg } = useOrganization();
+
+  const { mutateAsync } = useGetOrgTrialUrl();
+
+  const infisicalPlatformVersion = import.meta.env.VITE_INFISICAL_PLATFORM_VERSION;
+
+  return (
+    <div
+      className={`relative mt-10 ${
+        subscription && subscription.slug === "starter" && !subscription.has_used_trial
+          ? "mb-2"
+          : "mb-4"
+      } flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400`}
+    >
+      {(window.location.origin.includes("https://app.infisical.com") ||
+        window.location.origin.includes("https://gamma.infisical.com")) && <WishForm />}
+      <Link
+        to="/organization/access-management"
+        search={{
+          action: "invite"
+        }}
+        className="w-full"
+      >
+        <div className="mb-3 w-full pl-5 duration-200 hover:text-mineshaft-200">
+          <FontAwesomeIcon icon={faPlus} className="mr-3" />
+          Invite people
+        </div>
+      </Link>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <div className="mb-2 w-full pl-5 duration-200 hover:text-mineshaft-200">
+            <FontAwesomeIcon icon={faQuestion} className="mr-3 px-[0.1rem]" />
+            Help & Support
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="p-1">
+          {INFISICAL_SUPPORT_OPTIONS.map(([icon, text, url]) => (
+            <DropdownMenuItem key={url as string}>
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href={String(url)}
+                className="flex w-full items-center rounded-md font-normal text-mineshaft-300 duration-200"
+              >
+                <div className="relative flex w-full cursor-pointer select-none items-center justify-start rounded-md">
+                  {icon}
+                  <div className="text-sm">{text}</div>
+                </div>
+              </a>
+            </DropdownMenuItem>
+          ))}
+          {infisicalPlatformVersion && (
+            <div className="mb-2 mt-2 w-full cursor-default pl-5 text-sm duration-200 hover:text-mineshaft-200">
+              <FontAwesomeIcon icon={faInfo} className="mr-4 px-[0.1rem]" />
+              Version: {infisicalPlatformVersion}
+            </div>
+          )}
+        </DropdownMenuContent>
+      </DropdownMenu>
+      {subscription && subscription.slug === "starter" && !subscription.has_used_trial && (
+        <button
+          type="button"
+          onClick={async () => {
+            if (!subscription || !currentOrg) return;
+
+            // direct user to start pro trial
+            const url = await mutateAsync({
+              orgId: currentOrg.id,
+              success_url: window.location.href
+            });
+
+            window.location.href = url;
+          }}
+          className="mt-1.5 w-full"
+        >
+          <div className="justify-left mb-1.5 mt-1.5 flex w-full items-center rounded-md bg-mineshaft-600 py-1 pl-4 text-mineshaft-300 duration-200 hover:bg-mineshaft-500 hover:text-primary-400">
+            <FontAwesomeIcon icon={faInfinity} className="ml-0.5 mr-3 py-2 text-primary" />
+            Start Free Pro Trial
+          </div>
+        </button>
+      )}
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { SidebarFooter } from "./SidebarFooter";
@@ -0,0 +1,169 @@
+import { faAngleDown, faArrowUpRightFromSquare, faCheck } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link, useNavigate } from "@tanstack/react-router";
+
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "@app/components/v2";
+import { useOrganization, useUser } from "@app/context";
+import { useGetOrganizations, useLogoutUser } from "@app/hooks/api";
+import { AuthMethod } from "@app/hooks/api/users/types";
+
+type Prop = {
+  onChangeOrg: (orgId: string) => void;
+};
+
+export const SidebarHeader = ({ onChangeOrg }: Prop) => {
+  const { currentOrg } = useOrganization();
+  const { user } = useUser();
+  const navigate = useNavigate();
+  const { data: orgs } = useGetOrganizations();
+
+  const logout = useLogoutUser();
+  const logOutUser = async () => {
+    try {
+      console.log("Logging out...");
+      await logout.mutateAsync();
+      navigate({ to: "/login" });
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <div className="flex h-12 cursor-default items-center px-3 pt-6">
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild className="max-w-[160px] data-[state=open]:bg-mineshaft-600">
+          <div className="mr-auto flex items-center rounded-md py-1.5 pl-1.5 pr-2 hover:bg-mineshaft-600">
+            <div className="flex h-5 w-5 min-w-[20px] items-center justify-center rounded-md bg-primary text-sm">
+              {currentOrg?.name.charAt(0)}
+            </div>
+            <div
+              className="overflow-hidden truncate text-ellipsis pl-2 text-sm text-mineshaft-100"
+              style={{ maxWidth: "140px" }}
+            >
+              {currentOrg?.name}
+            </div>
+            <FontAwesomeIcon icon={faAngleDown} className="pl-1 pt-1 text-xs text-mineshaft-300" />
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="p-1">
+          <div className="px-2 py-1 text-xs text-mineshaft-400">{user?.username}</div>
+          {orgs?.map((org) => {
+            return (
+              <DropdownMenuItem key={org.id}>
+                <Button
+                  onClick={async () => {
+                    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
+
+                      await logout.mutateAsync();
+                      if (org.orgAuthMethod === AuthMethod.OIDC) {
+                        window.open(`/api/v1/sso/oidc/login?orgSlug=${org.slug}`);
+                      } else {
+                        window.open(`/api/v1/sso/redirect/saml2/organizations/${org.slug}`);
+                      }
+                      window.close();
+                      return;
+                    }
+
+                    onChangeOrg(org?.id);
+                  }}
+                  variant="plain"
+                  colorSchema="secondary"
+                  size="xs"
+                  className="flex w-full items-center justify-start p-0 font-normal"
+                  leftIcon={
+                    currentOrg?.id === org.id && (
+                      <FontAwesomeIcon icon={faCheck} className="mr-3 text-primary" />
+                    )
+                  }
+                >
+                  <div className="flex w-full max-w-[150px] items-center justify-between truncate">
+                    {org.name}
+                  </div>
+                </Button>
+              </DropdownMenuItem>
+            );
+          })}
+
+          <div className="mt-1 h-1 border-t border-mineshaft-600" />
+          <button type="button" onClick={logOutUser} className="w-full">
+            <DropdownMenuItem>Log Out</DropdownMenuItem>
+          </button>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          asChild
+          className="p-1 hover:bg-primary-400 hover:text-black data-[state=open]:bg-primary-400 data-[state=open]:text-black"
+        >
+          <div
+            className="child flex items-center justify-center rounded-full bg-mineshaft pr-1 text-mineshaft-300 hover:bg-mineshaft-500"
+            style={{ fontSize: "11px", width: "26px", height: "26px" }}
+          >
+            {user?.firstName?.charAt(0)}
+            {user?.lastName && user?.lastName?.charAt(0)}
+          </div>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="start" className="p-1">
+          <div className="px-2 py-1 text-xs text-mineshaft-400">{user?.username}</div>
+          <Link to="/personal-settings">
+            <DropdownMenuItem>Personal Settings</DropdownMenuItem>
+          </Link>
+          <a
+            href="https://infisical.com/docs/documentation/getting-started/introduction"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
+          >
+            <DropdownMenuItem>
+              Documentation
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="mb-[0.06rem] pl-1.5 text-xxs"
+              />
+            </DropdownMenuItem>
+          </a>
+          <a
+            href="https://infisical.com/slack"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="mt-3 w-full text-sm font-normal leading-[1.2rem] text-mineshaft-300 hover:text-mineshaft-100"
+          >
+            <DropdownMenuItem>
+              Join Slack Community
+              <FontAwesomeIcon
+                icon={faArrowUpRightFromSquare}
+                className="mb-[0.06rem] pl-1.5 text-xxs"
+              />
+            </DropdownMenuItem>
+          </a>
+          {user?.superAdmin && (
+            <Link to="/admin">
+              <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
+                Server Admin Console
+              </DropdownMenuItem>
+            </Link>
+          )}
+          <Link to="/organization/admin">
+            <DropdownMenuItem className="mt-1 border-t border-mineshaft-600">
+              Organization Admin Console
+            </DropdownMenuItem>
+          </Link>
+          <div className="mt-1 h-1 border-t border-mineshaft-600" />
+          <button type="button" onClick={logOutUser} className="w-full">
+            <DropdownMenuItem>Log Out</DropdownMenuItem>
+          </button>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export { SidebarHeader } from "./SidebarHeader";
				`@@ -0,0 +1 @@`
				`export * from "./InsecureConnectionBanner";`
				`@@ -0,0 +1 @@`
				`export { SidebarFooter } from "./SidebarFooter";`
				`@@ -0,0 +1 @@`
				`export { SidebarHeader } from "./SidebarHeader";`