awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-04 11:26:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

added update-blog reference and fixed login

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-10-07 20:19:10 -07:00
parent 6df7590051
commit ca008c809a
4 changed files with 49 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/public/images/infisical-update-september-2023.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 286 KiB

frontend/src/layouts/AppLayout/AppLayout.tsx
+32 -25
View File
@@ -7,9 +7,10 @@
// @ts-nocheck // @ts-nocheck
import crypto from "crypto"; import crypto from "crypto";
import { useEffect } from "react"; import { useEffect, useState } from "react";
import { Controller, useForm } from "react-hook-form"; import { Controller, useForm } from "react-hook-form";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons"; import { faGithub, faSlack } from "@fortawesome/free-brands-svg-icons";
@@ -68,8 +69,10 @@ import {
useGetOrgTrialUrl, useGetOrgTrialUrl,
useGetSecretApprovalRequestCount, useGetSecretApprovalRequestCount,
useLogoutUser, useLogoutUser,
useRegisterUserAction,
useUploadWsKey useUploadWsKey
} from "@app/hooks/api"; } from "@app/hooks/api";
import { fetchUserAction } from "@app/hooks/api/users/queries";
interface LayoutProps { interface LayoutProps {
children: React.ReactNode; children: React.ReactNode;
@@ -116,7 +119,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
const { user } = useUser(); const { user } = useUser();
const { subscription } = useSubscription(); const { subscription } = useSubscription();
const workspaceId = currentWorkspace?._id || ""; const workspaceId = currentWorkspace?._id || "";
// const [ isLearningNoteOpen, setIsLearningNoteOpen ] = useState(true); const [ isLearningNoteOpen, setIsLearningNoteOpen ] = useState(false);
const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId }); const { data: secretApprovalReqCount } = useGetSecretApprovalRequestCount({ workspaceId });
const isAddingProjectsAllowed = subscription?.workspaceLimit const isAddingProjectsAllowed = subscription?.workspaceLimit
@@ -143,6 +146,23 @@ export const AppLayout = ({ children }: LayoutProps) => {
const { t } = useTranslation(); 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 logout = useLogoutUser();
const logOutUser = async () => { const logOutUser = async () => {
try { try {
@@ -546,19 +566,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
</MenuItem> </MenuItem>
</a> </a>
</Link> </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> <Link href={`/org/${currentOrg?._id}/members`} passHref>
<a> <a>
<MenuItem <MenuItem
@@ -610,26 +617,26 @@ export const AppLayout = ({ children }: LayoutProps) => {
: "mb-4" : "mb-4"
} flex w-full cursor-default flex-col items-center px-3 text-sm text-mineshaft-400`} } 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-[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-[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"} 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={`${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">Kubernetes Operator</div> <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">Integrate Infisical into your Kubernetes infrastructure</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.8rem] w-full bg-mineshaft-200 rounded-md mt-2 rounded-md border border-mineshaft-700"> <div className="h-[6.77rem] w-full rounded-md mt-2 border border-mineshaft-700">
<Image src="/images/kubernetes-asset.png" height={319} width={539} alt="kubernetes image" className="rounded-sm" /> <Image src="/images/infisical-update-september-2023.png" height={319} width={539} alt="kubernetes image" className="rounded-sm" />
</div> </div>
<div className="w-full flex justify-between items-center mt-3 px-0.5"> <div className="w-full flex justify-between items-center mt-3 px-0.5">
<button <button
type="button" type="button"
onClick={() => setIsLearningNoteOpen(false)} onClick={() => closeUpdate()}
className="text-mineshaft-400 hover:text-mineshaft-100 duration-200" className="text-mineshaft-400 hover:text-mineshaft-100 duration-200"
> >
Close Close
</button> </button>
<a <a
href="https://infisical.com/docs/documentation/getting-started/kubernetes" href="https://infisical.com/blog/infisical-update-september-2023"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="text-sm text-mineshaft-400 font-normal leading-[1.2rem] hover:text-mineshaft-100 duration-200" 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"/> Learn More <FontAwesomeIcon icon={faArrowUpRightFromSquare} className="text-xs pl-0.5"/>
</a> </a>
</div> </div>
</div> */} </div>
{router.asPath.includes("org") && ( {router.asPath.includes("org") && (
<div <div
onKeyDown={() => null} onKeyDown={() => null}
frontend/src/pages/login/index.tsx
+2 -1
View File
@@ -9,7 +9,7 @@ export default function LoginPage() {
const { t } = useTranslation(); const { t } = useTranslation();
return ( 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> <Head>
<title>{t("common.head-title", { title: t("login.title") })}</title> <title>{t("common.head-title", { title: t("login.title") })}</title>
<link rel="icon" href="/infisical.ico" /> <link rel="icon" href="/infisical.ico" />
@@ -23,6 +23,7 @@ export default function LoginPage() {
</div> </div>
</Link> </Link>
<Login /> <Login />
<div className="pb-28"/>
</div> </div>
); );
} }
frontend/src/views/Login/components/InitialStep/InitialStep.tsx
+15 -17
View File
@@ -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"> <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 Login to Infisical
</h1> </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 <Button
colorSchema="primary" colorSchema="primary"
variant="outline_bg" variant="outline_bg"
@@ -125,12 +125,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
window.close(); window.close();
}} }}
leftIcon={<FontAwesomeIcon icon={faGoogle} className="mr-2" />} 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")} {t("login.continue-with-google")}
</Button> </Button>
</div> </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 <Button
colorSchema="primary" colorSchema="primary"
variant="outline_bg" variant="outline_bg"
@@ -144,12 +144,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
window.close(); window.close();
}} }}
leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />} leftIcon={<FontAwesomeIcon icon={faGithub} className="mr-2" />}
className="mx-0 h-11 w-full" className="mx-0 h-10 w-full"
> >
Continue with GitHub Continue with GitHub
</Button> </Button>
</div> </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 <Button
colorSchema="primary" colorSchema="primary"
variant="outline_bg" variant="outline_bg"
@@ -163,12 +163,12 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
window.close(); window.close();
}} }}
leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />} leftIcon={<FontAwesomeIcon icon={faGitlab} className="mr-2" />}
className="mx-0 h-11 w-full" className="mx-0 h-10 w-full"
> >
Continue with GitLab Continue with GitLab
</Button> </Button>
</div> </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 <Button
colorSchema="primary" colorSchema="primary"
variant="outline_bg" variant="outline_bg"
@@ -176,7 +176,7 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
setStep(2); setStep(2);
}} }}
leftIcon={<FontAwesomeIcon icon={faLock} className="mr-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 Continue with SSO
</Button> </Button>
@@ -194,10 +194,10 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
placeholder="Enter your email..." placeholder="Enter your email..."
isRequired isRequired
autoComplete="username" autoComplete="username"
className="h-11" className="h-10"
/> />
</div> </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 <Input
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
@@ -206,15 +206,15 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
isRequired isRequired
autoComplete="current-password" autoComplete="current-password"
id="current-password" id="current-password"
className="select:-webkit-autofill:focus h-11" className="select:-webkit-autofill:focus h-10"
/> />
</div> </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 <Button
type="submit" type="submit"
size="sm" size="sm"
isFullWidth isFullWidth
className="h-11" className="h-10"
colorSchema="primary" colorSchema="primary"
variant="solid" variant="solid"
isLoading={isLoading} isLoading={isLoading}
@@ -226,10 +226,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
{!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />} {!isLoading && loginError && <Error text={t("login.error-login") ?? ""} />}
{!serverDetails?.inviteOnlySignup ? ( {!serverDetails?.inviteOnlySignup ? (
<div className="mt-6 flex flex-row text-sm text-bunker-400"> <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"> <Link href="/signup">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"> <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> </span>
</Link> </Link>
</div> </div>
@@ -237,10 +236,9 @@ export const InitialStep = ({ setStep, email, setEmail, password, setPassword }:
<div /> <div />
)} )}
<div className="flex flex-row text-sm text-bunker-400"> <div className="flex flex-row text-sm text-bunker-400">
<span className="mr-1">Forgot password?</span>
<Link href="/verify-email"> <Link href="/verify-email">
<span className="cursor-pointer duration-200 hover:text-bunker-200 hover:underline hover:decoration-primary-700 hover:underline-offset-4"> <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> </span>
</Link> </Link>
</div> </div>