added update-blog reference and fixed login

2026-01-08 23:18:05 -05:00 · 2023-10-07 20:19:10 -07:00
parent 6df7590051
commit ca008c809a
4 changed files with 49 additions and 43 deletions
--- a/frontend/public/images/infisical-update-september-2023.png
+++ b/frontend/public/images/infisical-update-september-2023.png
--- a/frontend/src/layouts/AppLayout/AppLayout.tsx
+++ b/frontend/src/layouts/AppLayout/AppLayout.tsx
@@ -7,9 +7,10 @@
 // @ts-nocheck
 import crypto from "crypto";

-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { Controller, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
@@ -68,8 +69,10 @@ import {
  useGetOrgTrialUrl,
  useGetSecretApprovalRequestCount,
  useLogoutUser,
+  useRegisterUserAction,
  useUploadWsKey
 } from "@app/hooks/api";
+import { fetchUserAction  } from "@app/hooks/api/users/queries";

 interface LayoutProps {
  children: React.ReactNode;
@@ -116,7 +119,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
  const { user } = useUser();
  const { subscription } = useSubscription();
  const workspaceId = currentWorkspace?._id || "";
-  // const [ isLearningNoteOpen, setIsLearningNoteOpen ] = useState(true);
+  const [ isLearningNoteOpen, setIsLearningNoteOpen ] = useState(false);
  const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId });

  const isAddingProjectsAllowed = subscription?.workspaceLimit
@@ -143,6 +146,23 @@ export const AppLayout = ({ children }: LayoutProps) => {

  const { t } = useTranslation();

+  const registerUserAction = useRegisterUserAction();
+
+  useEffect(async () => {
+    const checkLearningNote = async () => {
+      const userUpdateClosedCheck = await fetchUserAction(
+        "september_update_closed"
+      );
+      setIsLearningNoteOpen(!userUpdateClosedCheck);
+    }
+    checkLearningNote();
+  })
+
+  const closeUpdate = async () => {
+    await registerUserAction.mutateAsync("september_update_closed");
+    setIsLearningNoteOpen(false);
+  }
+
  const logout = useLogoutUser();
  const logOutUser = async () => {
    try {
@@ -546,19 +566,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
                          </MenuItem>
                        </a>
                      </Link>
-                      {/* {workspaces.map(project => <Link key={project._id} href={`/project/${project?._id}/secrets/overview`} passHref>
-                        <a>
-                          <SubMenuItem
-                            isSelected={false}
-                            icon="system-outline-44-folder"
-                          >
-                            {project.name}
-                          </SubMenuItem>
-                        </a>
-                        <div className="pl-8 text-mineshaft-300 text-sm py-1 cursor-default hover:text-mineshaft-100">
-                          <FontAwesomeIcon icon={faFolder} className="text-xxs pr-0.5"/> {project.name} <FontAwesomeIcon icon={faArrowRight} className="text-xs pl-0.5"/>
-                        </div>
-                      </Link>)} */}
                      <Link href={`/org/${currentOrg?._id}/members`} passHref>
                        <a>
                          <MenuItem
@@ -610,26 +617,26 @@ export const AppLayout = ({ children }: LayoutProps) => {
                    : "mb-4"
                } flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400`}
              >
-                {/*   <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[9.9rem] ${router.asPath.includes("org") ? "bottom-[8.4rem]" : "bottom-[5.4rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-30`}/>
+                {/* <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[9.9rem] ${router.asPath.includes("org") ? "bottom-[8.4rem]" : "bottom-[5.4rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-30`}/>
                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[10.7rem] ${router.asPath.includes("org") ? "bottom-[8.15rem]" : "bottom-[5.15rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-50`}/>
                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[11.5rem] ${router.asPath.includes("org") ? "bottom-[7.9rem]" : "bottom-[4.9rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-70`}/>
-                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[12.3rem] ${router.asPath.includes("org") ? "bottom-[7.65rem]" : "bottom-[4.65rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-90`}/>
-                <div className={`${isLearningNoteOpen ? "block" : "hidden"} relative z-10 h-60 w-52 bg-mineshaft-900 border border-mineshaft-600 mb-6 rounded-md flex flex-col items-center justify-start px-3`}>
-                  <div className="w-full mt-2 text-md text-mineshaft-100 font-semibold">Kubernetes Operator</div>
-                  <div className="w-full mt-1 text-sm text-mineshaft-300 font-normal leading-[1.2rem] mb-1">Integrate Infisical into your Kubernetes infrastructure</div>
-                  <div className="h-[6.8rem] w-full bg-mineshaft-200 rounded-md mt-2 rounded-md border border-mineshaft-700"> 
-                    <Image src="/images/kubernetes-asset.png" height={319} width={539} alt="kubernetes image" className="rounded-sm" />
+                <div className={`${isLearningNoteOpen ? "block" : "hidden"} z-0 absolute h-60 w-[12.3rem] ${router.asPath.includes("org") ? "bottom-[7.65rem]" : "bottom-[4.65rem]"} bg-mineshaft-900 border border-mineshaft-600 mb-4 rounded-md opacity-90`}/> */}
+                <div className={`${isLearningNoteOpen ? "block" : "hidden"} relative z-10 h-64 w-52 bg-mineshaft-900 border border-mineshaft-600 mb-6 rounded-md flex flex-col items-center justify-start px-3`}>
+                  <div className="w-full mt-2 text-md text-mineshaft-100 font-semibold">Infisical September update</div>
+                  <div className="w-full mt-1 text-sm text-mineshaft-300 font-normal leading-[1.2rem] mb-1">Improved RBAC, new integrations, dashboard remake, and more!</div>
+                  <div className="h-[6.77rem] w-full rounded-md mt-2 border border-mineshaft-700"> 
+                    <Image src="/images/infisical-update-september-2023.png" height={319} width={539} alt="kubernetes image" className="rounded-sm" />
                  </div>
                  <div className="w-full flex justify-between items-center mt-3 px-0.5">
                    <button
                      type="button"
-                      onClick={() => setIsLearningNoteOpen(false)}
+                      onClick={() => closeUpdate()}
                      className="text-mineshaft-400 hover:text-mineshaft-100 duration-200"
                    >
                      Close
                    </button>
                    <a
-                      href="https://infisical.com/docs/documentation/getting-started/kubernetes"
+                      href="https://infisical.com/blog/infisical-update-september-2023"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="text-sm text-mineshaft-400 font-normal leading-[1.2rem] hover:text-mineshaft-100 duration-200"
@@ -637,7 +644,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
                      Learn More <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="text-xs pl-0.5"/>
                    </a>
                  </div>
-                </div> */}
+                </div>
                {router.asPath.includes("org") && (
                  <div
                    onKeyDown={() => null}
--- a/frontend/src/pages/login/index.tsx
+++ b/frontend/src/pages/login/index.tsx
@@ -9,7 +9,7 @@ export default function LoginPage() {
  const { t } = useTranslation();

  return (
-    <div className="flex min-h-screen flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6 pb-28 ">
+    <div className="flex min-h-screen max-h-screen overflow-y-scroll flex-col justify-center bg-gradient-to-tr from-mineshaft-600 via-mineshaft-800 to-bunker-700 px-6">
      <Head>
        <title>{t("common.head-title", { title: t("login.title") })}</title>
        <link rel="icon" href="/infisical.ico" />
@@ -23,6 +23,7 @@ export default function LoginPage() {
        </div>
      </Link>
      <Login />
+      <div className="pb-28"/>
    </div>
  );
 }
--- a/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
+++ b/frontend/src/views/Login/components/InitialStep/InitialStep.tsx
@@ -112,7 +112,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
      <h1 className="mb-8 bg-gradient-to-b from-white to-bunker-200 bg-clip-text text-center text-xl font-medium text-transparent">
        Login to Infisical
      </h1>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Button
          colorSchema="primary"
          variant="outline_bg"
@@ -125,12 +125,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
            window.close();
          }}
          leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
        >
          {t("login.continue-with-google")}
        </Button>
      </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Button
          colorSchema="primary"
          variant="outline_bg"
@@ -144,12 +144,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
            window.close();
          }}
          leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
        >
          Continue with GitHub
        </Button>
      </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Button
          colorSchema="primary"
          variant="outline_bg"
@@ -163,12 +163,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
            window.close();
          }}
          leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
        >
          Continue with GitLab
        </Button>
      </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Button
          colorSchema="primary"
          variant="outline_bg"
@@ -176,7 +176,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
            setStep(2);
          }}
          leftIcon={<FontAwesomeIcon icon={faLock} className="mr-2" />}
-          className="mx-0 h-11 w-full"
+          className="mx-0 h-10 w-full"
        >
          Continue with SSO
        </Button>
@@ -194,10 +194,10 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
          placeholder="Enter your email..."
          isRequired
          autoComplete="username"
-          className="h-11"
+          className="h-10"
        />
      </div>
-      <div className="mt-4 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-2 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Input
          value={password}
          onChange={(e) => setPassword(e.target.value)}
@@ -206,15 +206,15 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
          isRequired
          autoComplete="current-password"
          id="current-password"
-          className="select:-webkit-autofill:focus h-11"
+          className="select:-webkit-autofill:focus h-10"
        />
      </div>
-      <div className="mt-5 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
+      <div className="mt-3 w-1/4 min-w-[21.2rem] rounded-md text-center md:min-w-[20.1rem] lg:w-1/6">
        <Button
          type="submit"
          size="sm"
          isFullWidth
-          className="h-11"
+          className="h-10"
          colorSchema="primary"
          variant="solid"
          isLoading={isLoading}
@@ -226,10 +226,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
      {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
      {!serverDetails?.inviteOnlySignup ? (
        <div className="mt-6 flex flex-row text-sm text-bunker-400">
-          <span className="mr-1">Don&apos;t have an acount yet?</span>
          <Link href="/signup">
            <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
-              {t("login.create-account")}
+              Don&apos;t have an acount yet? {t("login.create-account")}
            </span>
          </Link>
        </div>
@@ -237,10 +236,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
        <div />
      )}
      <div className="flex flex-row text-sm text-bunker-400">
-        <span className="mr-1">Forgot password?</span>
        <Link href="/verify-email">
          <span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4">
-            Recover your account
+            Forgot password? Recover your account
          </span>
        </Link>
      </div>