awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Bug/typo/style fixes and some minor improvements

Browse Source
This commit is contained in:
Vladyslav Matsiiako
2023-02-10 22:17:39 -08:00
parent b5bcd0a308
commit 66659c8fc8
17 changed files with 58 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
backend/src/templates/organizationInvitation.handlebars
View File

@@ -8,7 +8,7 @@
</head>
<body>
<h2>Join your organization on Infisical</h2>
<p>{{inviterFirstName}}({{inviterEmail}}) has invited you to their Infisical organization — {{organizationName}}</p>
<p>{{inviterFirstName}} ({{inviterEmail}}) has invited you to their Infisical organization — {{organizationName}}</p>
<a href="{{callback_url}}?token={{token}}&to={{email}}">Join now</a>
<h3>What is Infisical?</h3>
<p>Infisical is an easy-to-use end-to-end encrypted tool that enables developers to sync and manage their secrets and configs.</p>

2
backend/src/templates/workspaceInvitation.handlebars
View File

@@ -7,7 +7,7 @@
</head>
<body>
<h2>Join your team on Infisical</h2>
<p>{{inviterFirstName}}({{inviterEmail}}) has invited you to their Infisical project — {{workspaceName}}</p>
<p>{{inviterFirstName}} ({{inviterEmail}}) has invited you to their Infisical project — {{workspaceName}}</p>
<a href="{{callback_url}}">Join now</a>
<h3>What is Infisical?</h3>
<p>Infisical is an easy-to-use end-to-end encrypted tool that enables developers to sync and manage their secrets and configs.</p>

2
frontend/public/locales/en/nav.json
View File

@@ -1,6 +1,6 @@
{
"support": {
"slack": "[NEW] Join Slack Forum",
"slack": "Join Slack Forum",
"docs": "Read Docs",
"issue": "Open a Github Issue",
"email": "Send us an Email"

4
frontend/src/components/navigation/NavHeader.tsx
View File

@@ -1,7 +1,7 @@
import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { useOrgnization, useWorkspace } from '@app/context';
import { useOrganization, useWorkspace } from '@app/context';
/**
* This is the component at the top of almost every page.
@@ -20,7 +20,7 @@ export default function NavHeader({
isProjectRelated?: boolean;
}): JSX.Element {
const { currentWorkspace } = useWorkspace();
const { currentOrg } = useOrgnization();
const { currentOrg } = useOrganization();
return (
<div className="ml-6 flex flex-row items-center pt-8">

2
frontend/src/components/v2/Button/Button.tsx
View File

@@ -24,7 +24,7 @@ const buttonVariants = cva(
{
variants: {
colorSchema: {
primary: ['bg-primary', 'text-black', 'border-primary hover:bg-opacity-80'],
primary: ['bg-primary', 'text-black', 'border-primary bg-opacity-80 hover:bg-opacity-100'],
secondary: ['bg-mineshaft', 'text-gray-300', 'border-mineshaft hover:bg-opacity-80'],
danger: ['bg-red', 'text-white', 'border-red hover:bg-opacity-90']
},

4
frontend/src/components/v2/Card/Card.tsx
View File

@@ -8,9 +8,9 @@ export type CardTitleProps = {
};
export const CardTitle = ({ children, className, subTitle }: CardTitleProps) => (
<div className={twMerge('px-6 py-4 font-sans text-xl font-medium', className)}>
<div className={twMerge('px-6 py-4 mb-5 font-sans text-lg font-normal border-b border-mineshaft-600', className)}>
{children}
{subTitle && <p className="py-1 text-sm font-normal text-gray-400">{subTitle}</p>}
{subTitle && <p className="pt-0.5 text-sm font-normal text-gray-400">{subTitle}</p>}
</div>
);

3
frontend/src/components/v2/Checkbox/Checkbox.tsx
View File

@@ -28,8 +28,9 @@ export const Checkbox = ({
<div className="flex items-center font-inter text-bunker-300">
<CheckboxPrimitive.Root
className={twMerge(
'flex items-center justify-center w-5 h-5 mr-3 transition-all rounded shadow hover:bg-bunker-200 bg-bunker-300',
'flex items-center justify-center w-4 h-4 mr-3 transition-all rounded shadow border border-mineshaft-400 hover:bg-mineshaft-500 bg-mineshaft-600',
isDisabled && 'bg-bunker-400 hover:bg-bunker-400',
isChecked && 'bg-primary hover:bg-primary',
className
)}
required={isRequired}

2
frontend/src/components/v2/HoverCard/HoverCard.tsx
View File

@@ -24,7 +24,7 @@ export const HoverObject = ({
</a>
</HoverCard.Trigger>
<HoverCard.Portal>
<HoverCard.Content className="HoverCardContent z-[50]" sideOffset={5}>
<HoverCard.Content className="HoverCardContent z-[300]" sideOffset={5}>
<div className='bg-bunker-700 border border-mineshaft-600 p-2 rounded-md drop-shadow-xl text-bunker-300'>
<div style={{ display: 'flex', flexDirection: 'column', gap: 15 }}>
<div>

11
frontend/src/components/v2/Menu/Menu.tsx
View File

@@ -36,14 +36,15 @@ export const MenuItem = <T extends ElementType = 'button'>({
}: MenuItemProps<T> & ComponentPropsWithRef<T>): JSX.Element => (
<li
className={twMerge(
'px-3 py-3 font-inter flex flex-col text-sm text-white transition-all rounded cursor-pointer hover:bg-gray-700',
isSelected && 'text-primary bg-gray-700',
isDisabled && 'text-gray-500 hover:bg-transparent cursor-not-allowed',
'px-1 py-2.5 mt-0.5 font-inter flex flex-col text-sm text-bunker-100 transition-all rounded cursor-pointer hover:bg-mineshaft-600 duration-50',
isSelected && 'bg-mineshaft-500',
isDisabled && 'hover:bg-transparent cursor-not-allowed',
className
)}
>
<Item type="button" role="menuitem" className="flex items-center" ref={inputRef} {...props}>
{icon && <span className="mr-3">{icon}</span>}
<Item type="button" role="menuitem" className="flex items-center relative" ref={inputRef} {...props}>
<div className={`${isSelected ? "visisble" : "invisible"} absolute w-[0.25rem] rounded-md h-8 bg-primary`}/>
{icon && <span className="mr-3 ml-4 w-5">{icon}</span>}
<span className="flex-grow text-left">{children}</span>
</Item>
{description && <span className="mt-2 text-xs">{description}</span>}

4
frontend/src/components/v2/Modal/Modal.tsx
View File

@@ -25,7 +25,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
<Card
isRounded
className={twMerge(
'fixed top-1/2 left-1/2 max-w-lg -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-[90]',
'fixed top-1/2 left-1/2 max-w-lg border border-mineshaft-600 -translate-y-2/4 -translate-x-2/4 animate-popIn drop-shadow-2xl z-[90]',
className
)}
>
@@ -36,7 +36,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
<IconButton
variant="plain"
ariaLabel="close"
className="absolute top-3 right-3 rounded text-white hover:bg-gray-600"
className="absolute top-4 right-6 rounded text-bunker-400 hover:text-bunker-50"
>
<FontAwesomeIcon icon={faTimes} size="lg" className="cursor-pointer" />
</IconButton>

8
frontend/src/components/v2/Select/Select.tsx
View File

@@ -51,7 +51,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
<SelectPrimitive.ScrollUpButton>
<FontAwesomeIcon icon={faChevronUp} size="sm" />
</SelectPrimitive.ScrollUpButton>
<SelectPrimitive.Viewport className="p-1.5">
<SelectPrimitive.Viewport className="p-1">
{isLoading ? (
<div className="flex items-center justify-center">
<Spinner size="xs" />
@@ -85,7 +85,7 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
{...props}
className={twMerge(
`relative flex cursor-pointer
select-none items-center rounded-md py-2 pl-10 pr-4 text-sm
select-none items-center rounded-md py-2 pl-10 pr-4 mb-0.5 text-sm
outline-none transition-all hover:bg-mineshaft-500`,
isSelected && 'bg-primary',
isDisabled && 'cursor-not-allowed text-gray-600 hover:bg-transparent hover:text-gray-600',
@@ -93,8 +93,8 @@ export const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(
)}
ref={forwardedRef}
>
<SelectPrimitive.ItemIndicator className="absolute left-3.5">
<FontAwesomeIcon icon={faCheck} size="sm" />
<SelectPrimitive.ItemIndicator className="absolute left-3.5 text-primary">
<FontAwesomeIcon icon={faCheck} />
</SelectPrimitive.ItemIndicator>
<SelectPrimitive.ItemText className="">{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>

6
frontend/src/context/OrganizationContext/OrganizationContext.tsx
View File

@@ -26,7 +26,7 @@ export const OrgProvider = ({ children }: Props): JSX.Element => {
// memorize the workspace details for the context
const value = useMemo<TOrgContext>(
() => ({
org: userOrgs,
orgs: userOrgs,
currentOrg: (userOrgs || []).find(({ _id }) => _id === currentWsOrgID),
isLoading
}),
@@ -36,10 +36,10 @@ export const OrgProvider = ({ children }: Props): JSX.Element => {
return <OrgContext.Provider value={value}>{children}</OrgContext.Provider>;
};
export const useOrgnization = () => {
export const useOrganization = () => {
const ctx = useContext(OrgContext);
if (!ctx) {
throw new Error('useOrgnization to be used within <OrgContext.Provider>');
throw new Error('useOrganization to be used within <OrgContext.Provider>');
}
return ctx;

2
frontend/src/context/OrganizationContext/index.tsx
View File

@@ -1 +1 @@
export { OrgProvider, useOrgnization } from './OrganizationContext';
export { OrgProvider, useOrganization } from './OrganizationContext';

2
frontend/src/context/index.tsx
View File

@@ -1,5 +1,5 @@
export { AuthProvider } from './AuthContext';
export { OrgProvider, useOrgnization } from './OrganizationContext';
export { OrgProvider, useOrganization } from './OrganizationContext';
export { SubscriptionProvider, useSubscription } from './SubscriptionContext';
export { UserProvider, useUser } from './UserContext';
export { useWorkspace, WorkspaceProvider } from './WorkspaceContext';

44
frontend/src/layouts/AppLayout/AppLayout.tsx
View File

@@ -38,7 +38,7 @@ import {
Select,
SelectItem
} from '@app/components/v2';
import { useOrgnization, useUser, useWorkspace } from '@app/context';
import { useOrganization, useUser, useWorkspace } from '@app/context';
import { usePopUp } from '@app/hooks';
import { fetchOrgUsers, useAddUserToWs, useCreateWorkspace, useUploadWsKey } from '@app/hooks/api';
import getOrganizations from '@app/pages/api/organization/getOrgs';
@@ -61,8 +61,10 @@ export const AppLayout = ({ children }: LayoutProps) => {
const router = useRouter();
const { createNotification } = useNotificationContext();
const { workspaces, currentWorkspace } = useWorkspace();
const { currentOrg } = useOrgnization();
// eslint-disable-next-line prefer-const
let { workspaces, currentWorkspace } = useWorkspace();
const { currentOrg } = useOrganization();
workspaces = workspaces.filter(ws => ws.organization === currentOrg?._id)
const { user } = useUser();
const createWs = useCreateWorkspace();
@@ -210,35 +212,35 @@ export const AppLayout = ({ children }: LayoutProps) => {
return (
<>
<div className="hidden h-screen w-full flex-col overflow-x-hidden md:flex">
<div className="hidden h-screen w-full flex-col overflow-x-hidden md:flex dark">
<Navbar />
<div className="flex flex-grow flex-col overflow-y-hidden md:flex-row">
<aside className="w-full border-r border-mineshaft-500 bg-mineshaft-800 md:w-60">
<aside className="w-full border-r border-mineshaft-500 bg-mineshaft-900 md:w-60">
<nav className="items-between flex h-full flex-col justify-between">
<div>
<div className="w-full p-4">
<p className="mb-2 text-sm font-medium uppercase text-gray-400">Projects</p>
<div className="w-full p-4 mt-3 mb-4">
<p className="text-xs font-semibold ml-1.5 mb-1 uppercase text-gray-400">Project</p>
<Select
defaultValue={currentWorkspace?._id}
value={currentWorkspace?._id}
className="w-full"
className="w-full py-2.5 bg-mineshaft-600 font-medium"
onValueChange={(value) => {
router.push(`/dashboard/${value}`);
}}
position="popper"
dropdownContainerClassName="left-0"
dropdownContainerClassName="left-0 text-bunker-200 bg-mineshaft-800 border border-mineshaft-600 z-50"
>
{workspaces.map(({ _id, name }) => (
<SelectItem key={`ws-layout-list-${_id}`} value={_id}>
<SelectItem key={`ws-layout-list-${_id}`} value={_id} className={`${currentWorkspace?._id === _id && "bg-mineshaft-600"}`}>
{name}
</SelectItem>
))}
<hr className="my-4 h-px border-0 bg-gray-700" />
<div className="w-full px-2 pb-2">
<hr className="mt-1 mb-1 h-px border-0 bg-gray-700" />
<div className="w-full">
<Button
className="w-full py-2"
className="w-full py-2 text-bunker-200 bg-mineshaft-500 hover:bg-primary/90 hover:text-black"
color="mineshaft"
size="xs"
size="sm"
onClick={() => handlePopUpOpen('addNewWs')}
leftIcon={<FontAwesomeIcon icon={faPlus} />}
>
@@ -361,7 +363,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
>
<ModalContent
title="Create a new project"
subTitle="This project will contain your environment variables"
subTitle="This project will contain your secrets and configurations."
>
<form onSubmit={handleSubmit(onCreateProject)}>
<Controller
@@ -378,7 +380,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
</FormControl>
)}
/>
<div>
<div className='pl-1 mt-4'>
<Controller
control={control}
name="addMembers"
@@ -395,7 +397,7 @@ export const AppLayout = ({ children }: LayoutProps) => {
)}
/>
</div>
<div className="mt-8 flex items-center">
<div className="mt-7 flex items-center">
<Button
isDisabled={isSubmitting}
isLoading={isSubmitting}
@@ -405,14 +407,6 @@ export const AppLayout = ({ children }: LayoutProps) => {
>
Create Project
</Button>
<Button
key="layout-cancel-create-project"
onClick={() => handlePopUpClose('addNewWs')}
variant="plain"
colorSchema="secondary"
>
Cancel
</Button>
</div>
</form>
</ModalContent>

12
frontend/src/layouts/AppLayout/components/NavBar/NavBar.tsx
View File

@@ -19,7 +19,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { Menu, Transition } from '@headlessui/react';
import guidGenerator from '@app/components/utilities/randomId';
import { useOrgnization, useUser } from '@app/context';
import { useOrganization, useUser } from '@app/context';
import { useLogoutUser } from '@app/hooks/api';
const supportOptions = (t: TFunction) => [
@@ -63,7 +63,7 @@ export interface IUser {
export const Navbar = () => {
const router = useRouter();
const { currentOrg, orgs } = useOrgnization();
const { currentOrg, orgs } = useOrganization();
const { user } = useUser();
const logout = useLogoutUser();
@@ -84,7 +84,7 @@ export const Navbar = () => {
};
return (
<div className="z-50 flex w-full flex-row justify-between border-b border-mineshaft-500 bg-mineshaft-900 text-white">
<div className="z-[70] flex w-full flex-row justify-between border-b border-mineshaft-500 bg-mineshaft-900 text-white">
<div className="m-auto mx-4 flex items-center justify-start">
<div className="flex flex-row items-center">
<div className="flex justify-center py-4">
@@ -157,8 +157,8 @@ export const Navbar = () => {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute right-0 z-20 mt-0.5 w-64 origin-top-right divide-y divide-gray-700 rounded-md border border-mineshaft-700 bg-bunker shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="px-1 py-1 ">
<Menu.Items className="absolute right-0 z-[125] mt-0.5 w-68 origin-top-right divide-y divide-mineshaft-700 drop-shadow-2xl rounded-md border border-mineshaft-700 bg-mineshaft-900 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
<div className="px-1 py-1">
<div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
{t('nav:user.signed-in-as')}
</div>
@@ -244,7 +244,7 @@ export const Navbar = () => {
</div>
</button>
</div>
{Boolean(orgs) && (
{orgs && orgs?.length > 1 && (
<div className="px-1 pt-1">
<div className="ml-2 mt-2 self-start text-xs font-semibold tracking-wide text-gray-400">
{t('nav:user.other-organizations')}

5
frontend/src/pages/home/[id].tsx
View File

@@ -1,4 +1,5 @@
import { useEffect, useState } from 'react';
import Head from 'next/head';
import { useRouter } from 'next/router';
import { IconProp } from '@fortawesome/fontawesome-svg-core';
import { faSlack } from '@fortawesome/free-brands-svg-icons';
@@ -142,6 +143,10 @@ export default function Home() {
return (
<div className="mx-6 lg:mx-0 w-full overflow-y-scroll pt-4">
<Head>
<title>Infisical Guide</title>
<link rel="icon" href="/infisical.ico" />
</Head>
<div className="flex flex-col items-center text-gray-300 text-lg mx-auto max-w-2xl lg:max-w-3xl xl:max-w-4xl py-6">
<div className="text-3xl font-bold text-left w-full">Your quick start guide</div>
<div className="text-md text-left w-full pt-2 pb-4 text-bunker-300">