diff --git a/dashboard/src/App.tsx b/dashboard/src/App.tsx index 1c71c94..1f62166 100644 --- a/dashboard/src/App.tsx +++ b/dashboard/src/App.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { Fragment } from "react" +import { Fragment } from 'react'; import { ChakraProvider, extendTheme } from '@chakra-ui/react'; import { BrowserRouter } from 'react-router-dom'; import { createClient, Provider } from 'urql'; @@ -19,15 +19,13 @@ const queryClient = createClient({ requestPolicy: 'network-only', }); - - const theme = extendTheme({ styles: { global: { 'html, body, #root': { fontFamily: 'Avenir, Helvetica, Arial, sans-serif', height: '100%', - outline: "none" + outline: 'none', }, }, }, @@ -41,15 +39,15 @@ const theme = extendTheme({ export default function App() { return ( - - - - - - - - - + + + + + + + + + ); } diff --git a/dashboard/src/components/EnvComponents/OAuthConfig.tsx b/dashboard/src/components/EnvComponents/OAuthConfig.tsx index b06d595..a235e09 100644 --- a/dashboard/src/components/EnvComponents/OAuthConfig.tsx +++ b/dashboard/src/components/EnvComponents/OAuthConfig.tsx @@ -1,191 +1,191 @@ -import React from "react"; -import InputField from "../InputField"; +import React from 'react'; +import InputField from '../InputField'; import { - Flex, - Stack, - Center, - Text, - Box, - Divider, - useMediaQuery, -} from "@chakra-ui/react"; -import { FaGoogle, FaGithub, FaFacebookF } from "react-icons/fa"; -import { TextInputType, HiddenInputType } from "../../constants"; + Flex, + Stack, + Center, + Text, + Box, + Divider, + useMediaQuery, +} from '@chakra-ui/react'; +import { FaGoogle, FaGithub, FaFacebookF } from 'react-icons/fa'; +import { TextInputType, HiddenInputType } from '../../constants'; const OAuthConfig = ({ - envVariables, - setVariables, - fieldVisibility, - setFieldVisibility, + envVariables, + setVariables, + fieldVisibility, + setFieldVisibility, }: any) => { - const [isNotSmallerScreen] = useMediaQuery("(min-width:667px)"); - return ( -
- - - Your instance information - - - - - Client ID + const [isNotSmallerScreen] = useMediaQuery('(min-width:667px)'); + return ( +
+ + + Your instance information + + + + + Client ID + +
+ {}} + inputType={TextInputType.CLIENT_ID} + placeholder="Client ID" + readOnly={true} + /> +
-
- {}} - inputType={TextInputType.CLIENT_ID} - placeholder="Client ID" - readOnly={true} - /> -
- - - - Client Secret + + + Client Secret + +
+ +
-
- -
- - - - {/* ################ SOCIAL MEDIA LOGIN ################ */} - - Social Media Logins - - - -
- -
-
- -
-
- -
- - -
- -
-
- -
-
- -
- - -
- -
-
- -
-
- -
- - - -
- ); + + + + Social Media Logins + + + +
+ +
+
+ +
+
+ +
+ + +
+ +
+
+ +
+
+ +
+ + +
+ +
+
+ +
+
+ +
+ + + +
+ ); }; -export default OAuthConfig; \ No newline at end of file +export default OAuthConfig; diff --git a/dashboard/src/components/EnvComponents/SocialMediaLogin.tsx b/dashboard/src/components/EnvComponents/SocialMediaLogin.tsx deleted file mode 100644 index bfc0101..0000000 --- a/dashboard/src/components/EnvComponents/SocialMediaLogin.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import React from "react"; -import { Flex, Stack, Text } from "@chakra-ui/react"; -import InputField from "../InputField"; -import { SwitchInputType } from "../../constants"; - -const UICustomization = ({ variables, setVariables }: any) => { - return ( -
- {" "} - - Disable Features - - - - - Disable Login Page: - - - - - - - - Disable Email Verification: - - - - - - - - Disable Magic Login Link: - - - - - - - - Disable Basic Authentication: - - - - - - - - Disable Sign Up: - - - - - - -
- ); -}; - -export default UICustomization; \ No newline at end of file diff --git a/dashboard/src/components/EnvComponents/UICustomization.tsx b/dashboard/src/components/EnvComponents/UICustomization.tsx index 38df534..756c739 100644 --- a/dashboard/src/components/EnvComponents/UICustomization.tsx +++ b/dashboard/src/components/EnvComponents/UICustomization.tsx @@ -1,80 +1,79 @@ -import React from "react"; -import { Flex, Stack, Text, useMediaQuery } from "@chakra-ui/react"; -import InputField from "../InputField"; -import { SwitchInputType } from "../../constants"; +import React from 'react'; +import { Flex, Stack, Text } from '@chakra-ui/react'; +import InputField from '../InputField'; +import { SwitchInputType } from '../../constants'; const UICustomization = ({ variables, setVariables }: any) => { - const [isNotSmallerScreen] = useMediaQuery("(min-width:600px)"); - return ( -
- {" "} - - Disable Features - - - - - Disable Login Page: - - - - - - - - Disable Email Verification: - - - - - - - - Disable Magic Login Link: - - - - - - - - Disable Basic Authentication: - - - - - - - - Disable Sign Up: - - - - - - -
- ); + return ( +
+ {' '} + + Disable Features + + + + + Disable Login Page: + + + + + + + + Disable Email Verification: + + + + + + + + Disable Magic Login Link: + + + + + + + + Disable Basic Authentication: + + + + + + + + Disable Sign Up: + + + + + + +
+ ); }; -export default UICustomization; \ No newline at end of file +export default UICustomization; diff --git a/dashboard/src/components/Menu.tsx b/dashboard/src/components/Menu.tsx index c099b96..819c665 100644 --- a/dashboard/src/components/Menu.tsx +++ b/dashboard/src/components/Menu.tsx @@ -21,10 +21,16 @@ import { AccordionButton, AccordionPanel, AccordionItem, - AccordionIcon, useMediaQuery, } from '@chakra-ui/react'; -import { FiUser, FiCode, FiSettings, FiMenu, FiUsers, FiChevronDown } from 'react-icons/fi'; +import { + FiUser, + FiCode, + FiSettings, + FiMenu, + FiUsers, + FiChevronDown, +} from 'react-icons/fi'; import { BiCustomize } from 'react-icons/bi'; import { AiOutlineKey } from 'react-icons/ai'; import { SiOpenaccess, SiJsonwebtokens } from 'react-icons/si'; @@ -117,20 +123,30 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => { const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)'); return ( - - - - logo - + + + + logo + AUTHORIZER @@ -139,12 +155,12 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => { - + {LinkItems.map((link) => link?.subRoutes ? (
- - + + { {link.subRoutes?.map((sublink) => ( - + {' '} - - + + {sublink.name} {' '} @@ -179,7 +203,7 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => { ) : ( {' '} - + { ) )} { {data?.meta?.version && ( - + {' '} - + Current Version: {data.meta.version} @@ -224,12 +255,12 @@ interface NavItemProps extends FlexProps { export const NavItem = ({ icon, children, ...rest }: NavItemProps) => { return ( { > {icon && ( { { } /> logo - + - - Admin + + Admin diff --git a/dashboard/src/constants.ts b/dashboard/src/constants.ts index e4737e5..3b9986f 100644 --- a/dashboard/src/constants.ts +++ b/dashboard/src/constants.ts @@ -128,3 +128,17 @@ export interface envVarTypes { DATABASE_URL: string; ACCESS_TOKEN_EXPIRY_TIME: string; } + +export const envSubViews = { + INSTANCE_INFO: 'instance-info', + ROLES: 'roles', + JWT_CONFIG: 'jwt-config', + SESSION_STORAGE: 'session-storage', + EMAIL_CONFIG: 'email-config', + WHITELIST_VARIABLES: 'whitelist-variables', + ORGANIZATION_INFO: 'organization-info', + ACCESS_TOKEN: 'access-token', + UI_CUSTOMIZATION: 'ui-customization', + ADMIN_SECRET: 'admin-secret', + DB_CRED: 'db-cred', +}; diff --git a/dashboard/src/index.tsx b/dashboard/src/index.tsx index 301ec74..16111ab 100644 --- a/dashboard/src/index.tsx +++ b/dashboard/src/index.tsx @@ -1,6 +1,10 @@ import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; -import 'focus-visible/dist/focus-visible'; -ReactDOM.render(
, document.getElementById('root')); +ReactDOM.render( +
+ +
, + document.getElementById('root') +); diff --git a/dashboard/src/layouts/AuthLayout.tsx b/dashboard/src/layouts/AuthLayout.tsx index 636f0ee..4c1c01f 100644 --- a/dashboard/src/layouts/AuthLayout.tsx +++ b/dashboard/src/layouts/AuthLayout.tsx @@ -1,4 +1,11 @@ -import { Box, Flex, Image, Text, Spinner, useMediaQuery, Stack } from '@chakra-ui/react'; +import { + Box, + Flex, + Image, + Text, + Spinner, + useMediaQuery, +} from '@chakra-ui/react'; import React from 'react'; import { useQuery } from 'urql'; import { MetaQuery } from '../graphql/queries'; @@ -7,11 +14,20 @@ export function AuthLayout({ children }: { children: React.ReactNode }) { const [{ fetching, data }] = useQuery({ query: MetaQuery }); const [isNotSmallerScreen] = useMediaQuery('(min-width:600px)'); return ( - - {/* */} - - logo - + + + logo + AUTHORIZER @@ -20,15 +36,22 @@ export function AuthLayout({ children }: { children: React.ReactNode }) { ) : ( <> - + {children} - + Current Version: {data.meta.version} )} - {/* */} ); } diff --git a/dashboard/src/pages/Environment.tsx b/dashboard/src/pages/Environment.tsx index cf6d786..78f79c4 100644 --- a/dashboard/src/pages/Environment.tsx +++ b/dashboard/src/pages/Environment.tsx @@ -1,319 +1,318 @@ -import React, { useEffect } from "react"; -import { useParams } from "react-router-dom"; -import { Box, Flex, Stack, Button, useToast } from "@chakra-ui/react"; -import { useClient } from "urql"; -import { FaSave } from "react-icons/fa"; -import _ from "lodash"; -import { EnvVariablesQuery } from "../graphql/queries"; +import React, { useEffect } from 'react'; +import { useParams } from 'react-router-dom'; +import { Box, Flex, Stack, Button, useToast } from '@chakra-ui/react'; +import { useClient } from 'urql'; +import { FaSave } from 'react-icons/fa'; +import _ from 'lodash'; +import { EnvVariablesQuery } from '../graphql/queries'; import { - SelectInputType, - HiddenInputType, - TextInputType, - HMACEncryptionType, - RSAEncryptionType, - ECDSAEncryptionType, - envVarTypes, -} from "../constants"; -import { UpdateEnvVariables } from "../graphql/mutation"; -import { getObjectDiff, capitalizeFirstLetter } from "../utils"; -// Component inputs -import OAuthConfig from "../components/EnvComponents/OAuthConfig"; -import Roles from "../components/EnvComponents/Roles"; -import JWTConfigurations from "../components/EnvComponents/JWTConfiguration"; -import SessionStorage from "../components/EnvComponents/SessionStorage"; -import EmailConfigurations from "../components/EnvComponents/EmailConfiguration"; -import DomainWhiteListing from "../components/EnvComponents/DomainWhitelisting"; -import OrganizationInfo from "../components/EnvComponents/OrganizationInfo"; -import AccessToken from "../components/EnvComponents/AccessToken"; -import UICustomization from "../components/EnvComponents/UICustomization" -import SecurityAdminSecret from "../components/EnvComponents/SecurityAdminSecret"; -import DatabaseCredentials from "../components/EnvComponents/DatabaseCredentials"; + SelectInputType, + HiddenInputType, + TextInputType, + HMACEncryptionType, + RSAEncryptionType, + ECDSAEncryptionType, + envVarTypes, + envSubViews, +} from '../constants'; +import { UpdateEnvVariables } from '../graphql/mutation'; +import { getObjectDiff, capitalizeFirstLetter } from '../utils'; +import OAuthConfig from '../components/EnvComponents/OAuthConfig'; +import Roles from '../components/EnvComponents/Roles'; +import JWTConfigurations from '../components/EnvComponents/JWTConfiguration'; +import SessionStorage from '../components/EnvComponents/SessionStorage'; +import EmailConfigurations from '../components/EnvComponents/EmailConfiguration'; +import DomainWhiteListing from '../components/EnvComponents/DomainWhitelisting'; +import OrganizationInfo from '../components/EnvComponents/OrganizationInfo'; +import AccessToken from '../components/EnvComponents/AccessToken'; +import UICustomization from '../components/EnvComponents/UICustomization'; +import SecurityAdminSecret from '../components/EnvComponents/SecurityAdminSecret'; +import DatabaseCredentials from '../components/EnvComponents/DatabaseCredentials'; const Environment = () => { - const client = useClient(); - const toast = useToast(); - const [adminSecret, setAdminSecret] = React.useState< - Record - >({ - value: "", - disableInputField: true, - }); - const [loading, setLoading] = React.useState(true); - const [envVariables, setEnvVariables] = React.useState({ - GOOGLE_CLIENT_ID: "", - GOOGLE_CLIENT_SECRET: "", - GITHUB_CLIENT_ID: "", - GITHUB_CLIENT_SECRET: "", - FACEBOOK_CLIENT_ID: "", - FACEBOOK_CLIENT_SECRET: "", - ROLES: [], - DEFAULT_ROLES: [], - PROTECTED_ROLES: [], - JWT_TYPE: "", - JWT_SECRET: "", - JWT_ROLE_CLAIM: "", - JWT_PRIVATE_KEY: "", - JWT_PUBLIC_KEY: "", - REDIS_URL: "", - SMTP_HOST: "", - SMTP_PORT: "", - SMTP_USERNAME: "", - SMTP_PASSWORD: "", - SENDER_EMAIL: "", - ALLOWED_ORIGINS: [], - ORGANIZATION_NAME: "", - ORGANIZATION_LOGO: "", - CUSTOM_ACCESS_TOKEN_SCRIPT: "", - ADMIN_SECRET: "", - DISABLE_LOGIN_PAGE: false, - DISABLE_MAGIC_LINK_LOGIN: false, - DISABLE_EMAIL_VERIFICATION: false, - DISABLE_BASIC_AUTHENTICATION: false, - DISABLE_SIGN_UP: false, - OLD_ADMIN_SECRET: "", - DATABASE_NAME: "", - DATABASE_TYPE: "", - DATABASE_URL: "", - ACCESS_TOKEN_EXPIRY_TIME: "", - }); + const client = useClient(); + const toast = useToast(); + const [adminSecret, setAdminSecret] = React.useState< + Record + >({ + value: '', + disableInputField: true, + }); + const [loading, setLoading] = React.useState(true); + const [envVariables, setEnvVariables] = React.useState({ + GOOGLE_CLIENT_ID: '', + GOOGLE_CLIENT_SECRET: '', + GITHUB_CLIENT_ID: '', + GITHUB_CLIENT_SECRET: '', + FACEBOOK_CLIENT_ID: '', + FACEBOOK_CLIENT_SECRET: '', + ROLES: [], + DEFAULT_ROLES: [], + PROTECTED_ROLES: [], + JWT_TYPE: '', + JWT_SECRET: '', + JWT_ROLE_CLAIM: '', + JWT_PRIVATE_KEY: '', + JWT_PUBLIC_KEY: '', + REDIS_URL: '', + SMTP_HOST: '', + SMTP_PORT: '', + SMTP_USERNAME: '', + SMTP_PASSWORD: '', + SENDER_EMAIL: '', + ALLOWED_ORIGINS: [], + ORGANIZATION_NAME: '', + ORGANIZATION_LOGO: '', + CUSTOM_ACCESS_TOKEN_SCRIPT: '', + ADMIN_SECRET: '', + DISABLE_LOGIN_PAGE: false, + DISABLE_MAGIC_LINK_LOGIN: false, + DISABLE_EMAIL_VERIFICATION: false, + DISABLE_BASIC_AUTHENTICATION: false, + DISABLE_SIGN_UP: false, + OLD_ADMIN_SECRET: '', + DATABASE_NAME: '', + DATABASE_TYPE: '', + DATABASE_URL: '', + ACCESS_TOKEN_EXPIRY_TIME: '', + }); - const [fieldVisibility, setFieldVisibility] = React.useState< - Record - >({ - GOOGLE_CLIENT_SECRET: false, - GITHUB_CLIENT_SECRET: false, - FACEBOOK_CLIENT_SECRET: false, - JWT_SECRET: false, - SMTP_PASSWORD: false, - ADMIN_SECRET: false, - OLD_ADMIN_SECRET: false, - }); + const [fieldVisibility, setFieldVisibility] = React.useState< + Record + >({ + GOOGLE_CLIENT_SECRET: false, + GITHUB_CLIENT_SECRET: false, + FACEBOOK_CLIENT_SECRET: false, + JWT_SECRET: false, + SMTP_PASSWORD: false, + ADMIN_SECRET: false, + OLD_ADMIN_SECRET: false, + }); - const { sec } = useParams(); + const { sec } = useParams(); - async function getData() { - const { - data: { _env: envData }, - } = await client.query(EnvVariablesQuery).toPromise(); - setLoading(false); + async function getData() { + const { + data: { _env: envData }, + } = await client.query(EnvVariablesQuery).toPromise(); + setLoading(false); - setEnvVariables({ - ...envData, - OLD_ADMIN_SECRET: envData.ADMIN_SECRET, - ADMIN_SECRET: "", - }); - setAdminSecret({ - value: "", - disableInputField: true, - }); - } + setEnvVariables({ + ...envData, + OLD_ADMIN_SECRET: envData.ADMIN_SECRET, + ADMIN_SECRET: '', + }); + setAdminSecret({ + value: '', + disableInputField: true, + }); + } - useEffect(() => { - getData(); - }, [sec]); + useEffect(() => { + getData(); + }, [sec]); - const validateAdminSecretHandler = (event: any) => { - if (envVariables.OLD_ADMIN_SECRET === event.target.value) { - setAdminSecret({ - ...adminSecret, - value: event.target.value, - disableInputField: false, - }); - } else { - setAdminSecret({ - ...adminSecret, - value: event.target.value, - disableInputField: true, - }); - } - if (envVariables.ADMIN_SECRET !== "") { - setEnvVariables({ ...envVariables, ADMIN_SECRET: "" }); - } - }; + const validateAdminSecretHandler = (event: any) => { + if (envVariables.OLD_ADMIN_SECRET === event.target.value) { + setAdminSecret({ + ...adminSecret, + value: event.target.value, + disableInputField: false, + }); + } else { + setAdminSecret({ + ...adminSecret, + value: event.target.value, + disableInputField: true, + }); + } + if (envVariables.ADMIN_SECRET !== '') { + setEnvVariables({ ...envVariables, ADMIN_SECRET: '' }); + } + }; - const saveHandler = async () => { - setLoading(true); - const { - data: { _env: envData }, - } = await client.query(EnvVariablesQuery).toPromise(); - const diff = getObjectDiff(envVariables, envData); - const updatedEnvVariables = diff.reduce( - (acc: any, property: string) => ({ - ...acc, - // @ts-ignore - [property]: envVariables[property], - }), - {} - ); - if ( - updatedEnvVariables[HiddenInputType.ADMIN_SECRET] === "" || - updatedEnvVariables[HiddenInputType.OLD_ADMIN_SECRET] !== - envData.ADMIN_SECRET - ) { - delete updatedEnvVariables.OLD_ADMIN_SECRET; - delete updatedEnvVariables.ADMIN_SECRET; - } + const saveHandler = async () => { + setLoading(true); + const { + data: { _env: envData }, + } = await client.query(EnvVariablesQuery).toPromise(); + const diff = getObjectDiff(envVariables, envData); + const updatedEnvVariables = diff.reduce( + (acc: any, property: string) => ({ + ...acc, + // @ts-ignore + [property]: envVariables[property], + }), + {} + ); + if ( + updatedEnvVariables[HiddenInputType.ADMIN_SECRET] === '' || + updatedEnvVariables[HiddenInputType.OLD_ADMIN_SECRET] !== + envData.ADMIN_SECRET + ) { + delete updatedEnvVariables.OLD_ADMIN_SECRET; + delete updatedEnvVariables.ADMIN_SECRET; + } - delete updatedEnvVariables.DATABASE_URL; - delete updatedEnvVariables.DATABASE_TYPE; - delete updatedEnvVariables.DATABASE_NAME; + delete updatedEnvVariables.DATABASE_URL; + delete updatedEnvVariables.DATABASE_TYPE; + delete updatedEnvVariables.DATABASE_NAME; - const res = await client - .mutation(UpdateEnvVariables, { params: updatedEnvVariables }) - .toPromise(); + const res = await client + .mutation(UpdateEnvVariables, { params: updatedEnvVariables }) + .toPromise(); - setLoading(false); + setLoading(false); - if (res.error) { - toast({ - title: capitalizeFirstLetter(res.error.message), - isClosable: true, - status: "error", - position: "bottom-right", - }); + if (res.error) { + toast({ + title: capitalizeFirstLetter(res.error.message), + isClosable: true, + status: 'error', + position: 'bottom-right', + }); - return; - } + return; + } - setAdminSecret({ - value: "", - disableInputField: true, - }); + setAdminSecret({ + value: '', + disableInputField: true, + }); - getData(); + getData(); - toast({ - title: `Successfully updated ${ - Object.keys(updatedEnvVariables).length - } variables`, - isClosable: true, - status: "success", - position: "bottom-right", - }); - }; + toast({ + title: `Successfully updated ${ + Object.keys(updatedEnvVariables).length + } variables`, + isClosable: true, + status: 'success', + position: 'bottom-right', + }); + }; - const getCorrectScreen = (tab: any) => { - switch (tab) { - case "instance-info": - return ( - - ); - - case "roles": - return ( - - ); - case "jwt-config": - return ( - - ); - case "session-storage": - return ( - - ); - case "email-config": - return ( - - ); - case "whitelist-variables": - return ( - - ); - case "organization-info": - return ( - - ); - case "access-token": - return ( - - ); - case "ui-customization": - return ( - - ); - case "admin-secret": - return ( - - ); - case "db-cred": - return ( - - ); - default: - return ( - - ); - } - }; - return ( - - {getCorrectScreen(sec)} - - - - - - - ); + const renderComponent = (tab: any) => { + switch (tab) { + case envSubViews.INSTANCE_INFO: + return ( + + ); + case envSubViews.ROLES: + return ( + + ); + case envSubViews.JWT_CONFIG: + return ( + + ); + case envSubViews.SESSION_STORAGE: + return ( + + ); + case envSubViews.EMAIL_CONFIG: + return ( + + ); + case envSubViews.WHITELIST_VARIABLES: + return ( + + ); + case envSubViews.ORGANIZATION_INFO: + return ( + + ); + case envSubViews.ACCESS_TOKEN: + return ( + + ); + case envSubViews.UI_CUSTOMIZATION: + return ( + + ); + case envSubViews.ADMIN_SECRET: + return ( + + ); + case envSubViews.DB_CRED: + return ( + + ); + default: + return ( + + ); + } + }; + return ( + + {renderComponent(sec)} + + + + + + + ); }; -export default Environment; \ No newline at end of file +export default Environment;