devstack/authorizer
4
0
Fork 0
Code Pull Requests Actions Activity

fix(dashboard): mutation

Browse Source
This commit is contained in:
Lakhan Samani 2022-01-25 13:06:52 +05:30
parent 0049e1380b
commit ac416bfc7b
12 changed files with 198 additions and 2478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/src/pages/dashboard.tsx
View File

@ -15,7 +15,7 @@ export default function Dashboard() {
return (
<div>
<h1>Hey 👋,</h1>
<p>Thank you for joining authorizer demo app.</p>
<p>Thank you for using authorizer.</p>
<p>
Your email address is{' '}
<a href={`mailto:${user?.email}`} style={{ color: '#3B82F6' }}>

2304
dashboard/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
dashboard/src/App.tsx
View File

@ -12,6 +12,7 @@ const queryClient = createClient({
credentials: 'include',
};
},
requestPolicy: 'network-only',
});
const theme = extendTheme({

0
dashboard/src/Router.tsx
View File

2
dashboard/src/components/InputField.tsx
View File

@ -282,7 +282,7 @@ const InputField = ({
<Code h="75%">Off</Code>
<Switch
size="md"
isChecked={!envVariables[inputType]}
isChecked={envVariables[inputType]}
onChange={() => {
setEnvVariables({
...envVariables,

70
dashboard/src/components/Menu.tsx
View File

@ -1,7 +1,6 @@
import React, { ReactNode } from 'react';
import {
IconButton,
Avatar,
Box,
CloseButton,
Flex,
@ -21,9 +20,7 @@ import {
} from '@chakra-ui/react';
import {
FiHome,
FiTrendingUp,
FiCompass,
FiStar,
FiCode,
FiSettings,
FiMenu,
FiUser,
@ -90,6 +87,17 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
</NavItem>
</NavLink>
))}
<Link
href="/playground"
target="_blank"
style={{
textDecoration: 'none',
}}
_focus={{ _boxShadow: 'none' }}
>
<NavItem icon={FiCode}>API Playground</NavItem>
</Link>
</Box>
);
};
@ -100,37 +108,31 @@ interface NavItemProps extends FlexProps {
}
export const NavItem = ({ icon, children, ...rest }: NavItemProps) => {
return (
<Link
href="#"
style={{ textDecoration: 'none' }}
_focus={{ boxShadow: 'none' }}
<Flex
align="center"
p="3"
mx="3"
borderRadius="md"
role="group"
cursor="pointer"
_hover={{
bg: 'blue.500',
color: 'white',
}}
{...rest}
>
<Flex
align="center"
p="3"
mx="3"
borderRadius="md"
role="group"
cursor="pointer"
_hover={{
bg: 'blue.500',
color: 'white',
}}
{...rest}
>
{icon && (
<Icon
mr="4"
fontSize="16"
_groupHover={{
color: 'white',
}}
as={icon}
/>
)}
{children}
</Flex>
</Link>
{icon && (
<Icon
mr="4"
fontSize="16"
_groupHover={{
color: 'white',
}}
as={icon}
/>
)}
{children}
</Flex>
);
};

224
dashboard/src/pages/Environment.tsx
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import {
Box,
Divider,
@ -10,13 +10,13 @@ import {
Input,
InputGroup,
InputRightElement,
useToast,
} from '@chakra-ui/react';
import { useClient } from 'urql';
import {
FaGoogle,
FaGithub,
FaFacebookF,
FaUndo,
FaSave,
FaRegEyeSlash,
FaRegEye,
@ -33,7 +33,7 @@ import {
SwitchInputType,
} from '../constants';
import { UpdateEnvVariables } from '../graphql/mutation';
import { getObjectDiff } from '../utils';
import { getObjectDiff, capitalizeFirstLetter } from '../utils';
interface envVarTypes {
GOOGLE_CLIENT_ID: string;
@ -71,13 +71,14 @@ interface envVarTypes {
export default function Environment() {
const client = useClient();
const toast = useToast();
const [adminSecret, setAdminSecret] = React.useState<
Record<string, string | boolean>
>({
value: '',
disableInputField: true,
});
const [loading, setLoading] = React.useState<boolean>(false);
const [loading, setLoading] = React.useState<boolean>(true);
const [envVariables, setEnvVariables] = React.useState<envVarTypes>({
GOOGLE_CLIENT_ID: '',
GOOGLE_CLIENT_SECRET: '',
@ -111,39 +112,7 @@ export default function Environment() {
DATABASE_TYPE: '',
DATABASE_URL: '',
});
const [oldEnvVariables, setOldEnvVariables] = React.useState<envVarTypes>({
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: '',
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,
OLD_ADMIN_SECRET: '',
DATABASE_NAME: '',
DATABASE_TYPE: '',
DATABASE_URL: '',
});
const [fieldVisibility, setFieldVisibility] = React.useState<
Record<string, boolean>
>({
@ -156,34 +125,32 @@ export default function Environment() {
OLD_ADMIN_SECRET: false,
});
const updateHandler = async () => {
setLoading(true);
const {
data: { _env: envData },
} = await client.query(EnvVariablesQuery).toPromise();
if (envData) {
setEnvVariables({
...envVariables,
...envData,
ADMIN_SECRET: '',
OLD_ADMIN_SECRET: envData.ADMIN_SECRET,
});
setOldEnvVariables({
...envVariables,
...envData,
ADMIN_SECRET: '',
OLD_ADMIN_SECRET: envData.ADMIN_SECRET,
});
}
setAdminSecret({
value: '',
disableInputField: true,
});
setLoading(false);
};
useEffect(() => {
let isMounted = true;
async function getData() {
const {
data: { _env: envData },
} = await client.query(EnvVariablesQuery).toPromise();
React.useEffect(() => {
updateHandler();
if (isMounted) {
setLoading(false);
setEnvVariables({
...envData,
OLD_ADMIN_SECRET: envData.ADMIN_SECRET,
ADMIN_SECRET: '',
});
setAdminSecret({
value: '',
disableInputField: true,
});
}
}
getData();
return () => {
isMounted = false;
};
}, []);
const validateAdminSecretHandler = (event: any) => {
@ -207,7 +174,11 @@ export default function Environment() {
const saveHandler = async () => {
setLoading(true);
const diff = getObjectDiff(envVariables, oldEnvVariables);
const {
data: { _env: envData },
} = await client.query(EnvVariablesQuery).toPromise();
const diff = getObjectDiff(envVariables, envData);
const updatedEnvVariables = diff.reduce(
(acc: any, property: string) => ({
...acc,
@ -216,24 +187,57 @@ export default function Environment() {
}),
{}
);
if (diff.includes(HiddenInputType.ADMIN_SECRET)) {
updatedEnvVariables[HiddenInputType.OLD_ADMIN_SECRET] =
// @ts-ignore
envVariables[HiddenInputType.OLD_ADMIN_SECRET];
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;
const res = await client
.mutation(UpdateEnvVariables, { params: envVariables })
.mutation(UpdateEnvVariables, { params: updatedEnvVariables })
.toPromise();
console.log('res ==>> ', res);
updateHandler();
setLoading(false);
if (res.error) {
toast({
title: capitalizeFirstLetter(res.error.message),
isClosable: true,
status: 'error',
position: 'bottom-right',
});
return;
}
setAdminSecret({
value: '',
disableInputField: true,
});
toast({
title: `Successfully updated ${
Object.keys(updatedEnvVariables).length
} variables`,
isClosable: true,
status: 'success',
position: 'bottom-right',
});
};
return (
<Box m="5" p="5" bg="white" rounded="md">
<Text fontSize="md" paddingTop="2%">
<Box m="5" py="5" px="10" bg="white" rounded="md">
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
Social Media Logins
</Text>
<Stack spacing={6} padding="3%">
<Stack spacing={6} padding="2% 0%">
<Flex>
<Center
w="50px"
@ -320,10 +324,10 @@ export default function Environment() {
</Flex>
</Stack>
<Divider marginTop="2%" marginBottom="2%" />
<Text fontSize="md" paddingTop="2%">
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
Roles
</Text>
<Stack spacing={6} padding="3% 5%">
<Stack spacing={6} padding="2% 0%">
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Roles:</Text>
@ -362,10 +366,10 @@ export default function Environment() {
</Flex>
</Stack>
<Divider marginTop="2%" marginBottom="2%" />
<Text fontSize="md" paddingTop="2%">
JWT Configurations
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
JWT (JSON Web Tokens) Configurations
</Text>
<Stack spacing={6} padding="3% 5%">
<Stack spacing={6} padding="2% 0%">
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">JWT Type:</Text>
@ -417,10 +421,10 @@ export default function Environment() {
</Flex>
</Stack>
<Divider marginTop="2%" marginBottom="2%" />
<Text fontSize="md" paddingTop="2%">
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
Session Storage
</Text>
<Stack spacing={6} padding="3% 5%">
<Stack spacing={6} padding="2% 0%">
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Redis URL:</Text>
@ -435,10 +439,10 @@ export default function Environment() {
</Flex>
</Stack>
<Divider marginTop="2%" marginBottom="2%" />
<Text fontSize="md" paddingTop="2%">
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
Email Configurations
</Text>
<Stack spacing={6} padding="3% 5%">
<Stack spacing={6} padding="2% 0%">
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">SMTP Host:</Text>
@ -503,10 +507,10 @@ export default function Environment() {
</Flex>
</Stack>
<Divider marginTop="2%" marginBottom="2%" />
<Text fontSize="md" paddingTop="2%">
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
White Listing
</Text>
<Stack spacing={6} padding="3% 5%">
<Stack spacing={6} padding="2% 0%">
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Allowed Origins:</Text>
@ -521,10 +525,10 @@ export default function Environment() {
</Flex>
</Stack>
<Divider marginTop="2%" marginBottom="2%" />
<Text fontSize="md" paddingTop="2%">
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
Organization Information
</Text>
<Stack spacing={6} padding="3% 5%">
<Stack spacing={6} padding="2% 0%">
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Organization Name:</Text>
@ -551,10 +555,10 @@ export default function Environment() {
</Flex>
</Stack>
<Divider marginTop="2%" marginBottom="2%" />
<Text fontSize="md" paddingTop="2%">
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
Custom Scripts
</Text>
<Stack spacing={6} padding="3% 5%">
<Stack spacing={6} padding="2% 0%">
<Flex>
<Center w="100%">
<InputField
@ -568,13 +572,13 @@ export default function Environment() {
</Flex>
</Stack>
<Divider marginTop="2%" marginBottom="2%" />
<Text fontSize="md" paddingTop="2%">
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
Disable Features
</Text>
<Stack spacing={6} padding="3% 5%">
<Stack spacing={6} padding="2% 0%">
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Login Page:</Text>
<Text fontSize="sm">Disable Login Page:</Text>
</Flex>
<Flex justifyContent="start" w="70%">
<InputField
@ -586,19 +590,7 @@ export default function Environment() {
</Flex>
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Magic Login Link:</Text>
</Flex>
<Flex justifyContent="start" w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
inputType={SwitchInputType.DISABLE_MAGIC_LINK_LOGIN}
/>
</Flex>
</Flex>
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Email Verification:</Text>
<Text fontSize="sm">Disable Email Verification:</Text>
</Flex>
<Flex justifyContent="start" w="70%">
<InputField
@ -610,7 +602,19 @@ export default function Environment() {
</Flex>
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Basic Authentication:</Text>
<Text fontSize="sm">Disable Magic Login Link:</Text>
</Flex>
<Flex justifyContent="start" w="70%">
<InputField
envVariables={envVariables}
setEnvVariables={setEnvVariables}
inputType={SwitchInputType.DISABLE_MAGIC_LINK_LOGIN}
/>
</Flex>
</Flex>
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">Disable Basic Authentication:</Text>
</Flex>
<Flex justifyContent="start" w="70%">
<InputField
@ -622,7 +626,7 @@ export default function Environment() {
</Flex>
</Stack>
<Divider marginTop="2%" marginBottom="2%" />
<Text fontSize="md" paddingTop="2%">
<Text fontSize="md" paddingTop="2%" fontWeight="bold">
Danger
</Text>
<Stack
@ -633,6 +637,10 @@ export default function Environment() {
borderRadius="5px"
>
<Stack spacing={6} padding="3% 0">
<Text fontStyle="italic" fontSize="sm" color="gray.600">
Note: Database related environment variables cannot be updated from
dashboard :(
</Text>
<Flex>
<Flex w="30%" justifyContent="start" alignItems="center">
<Text fontSize="sm">DataBase Name:</Text>

2
dashboard/src/routes/index.tsx
View File

@ -26,6 +26,7 @@ export const AppRoutes = () => {
<Route path="/" element={<Home />} />
<Route path="users" element={<Users />} />
<Route path="environment" element={<Environment />} />
<Route path="*" element={<Home />} />
</Route>
</Routes>
</Suspense>
@ -35,6 +36,7 @@ export const AppRoutes = () => {
<Suspense fallback={<></>}>
<Routes>
<Route path="/" element={<Auth />} />
<Route path="*" element={<Auth />} />
</Routes>
</Suspense>
);

6
dashboard/src/utils/index.ts
View File

@ -1,9 +1,3 @@
import {
Alert,
AlertIcon,
AlertTitle,
AlertDescription,
} from '@chakra-ui/react';
import _ from 'lodash';
export const hasAdminSecret = () => {

5
server/handlers/app.go
View File

@ -22,6 +22,11 @@ type State struct {
// AppHandler is the handler for the /app route
func AppHandler() gin.HandlerFunc {
return func(c *gin.Context) {
if envstore.EnvInMemoryStoreObj.GetBoolStoreEnvVariable(constants.EnvKeyDisableLoginPage) {
c.JSON(400, gin.H{"error": "login page is not enabled"})
return
}
state := c.Query("state")
var stateObj State

38
server/resolvers/update_env.go
View File

@ -15,7 +15,6 @@ import (
"github.com/authorizerdev/authorizer/server/graph/model"
"github.com/authorizerdev/authorizer/server/token"
"github.com/authorizerdev/authorizer/server/utils"
"golang.org/x/crypto/bcrypt"
)
// UpdateEnvResolver is a resolver for update config mutation
@ -43,6 +42,23 @@ func UpdateEnvResolver(ctx context.Context, params model.UpdateEnvInput) (*model
return res, fmt.Errorf("error un-marshalling params: %t", err)
}
// in case of admin secret change update the cookie with new hash
if params.AdminSecret != nil {
if params.OldAdminSecret == nil {
return res, errors.New("admin secret and old admin secret are required for secret change")
}
if *params.OldAdminSecret != envstore.EnvInMemoryStoreObj.GetStringStoreEnvVariable(constants.EnvKeyAdminSecret) {
return res, errors.New("old admin secret is not correct")
}
if len(*params.AdminSecret) < 6 {
err = fmt.Errorf("admin secret must be at least 6 characters")
return res, err
}
}
updatedData := envstore.EnvInMemoryStoreObj.GetEnvStoreClone()
for key, value := range data {
if value != nil {
@ -106,22 +122,7 @@ func UpdateEnvResolver(ctx context.Context, params model.UpdateEnvInput) (*model
return res, err
}
encryptedConfig, err := utils.EncryptEnvData(updatedData)
if err != nil {
return res, err
}
// in case of admin secret change update the cookie with new hash
if params.AdminSecret != nil {
if params.OldAdminSecret == nil {
return res, errors.New("admin secret and old admin secret are required for secret change")
}
err := bcrypt.CompareHashAndPassword([]byte(*params.OldAdminSecret), []byte(envstore.EnvInMemoryStoreObj.GetStringStoreEnvVariable(constants.EnvKeyAdminSecret)))
if err != nil {
return res, errors.New("old admin secret is not correct")
}
hashedKey, err := utils.EncryptPassword(envstore.EnvInMemoryStoreObj.GetStringStoreEnvVariable(constants.EnvKeyAdminSecret))
if err != nil {
return res, err
@ -129,6 +130,11 @@ func UpdateEnvResolver(ctx context.Context, params model.UpdateEnvInput) (*model
cookie.SetAdminCookie(gc, hashedKey)
}
encryptedConfig, err := utils.EncryptEnvData(updatedData)
if err != nil {
return res, err
}
env.EnvData = encryptedConfig
_, err = db.Provider.UpdateEnv(env)
if err != nil {

22
server/routes/routes.go
View File

@ -1,8 +1,6 @@
package routes
import (
"github.com/authorizerdev/authorizer/server/constants"
"github.com/authorizerdev/authorizer/server/envstore"
"github.com/authorizerdev/authorizer/server/handlers"
"github.com/authorizerdev/authorizer/server/middlewares"
"github.com/gin-contrib/location"
@ -25,21 +23,19 @@ func InitRouter() *gin.Engine {
router.LoadHTMLGlob("templates/*")
// login page app related routes.
if !envstore.EnvInMemoryStoreObj.GetBoolStoreEnvVariable(constants.EnvKeyDisableLoginPage) {
app := router.Group("/app")
{
app.Static("/build", "app/build")
app.GET("/", handlers.AppHandler())
app.GET("/reset-password", handlers.AppHandler())
}
app := router.Group("/app")
{
app.Static("/build", "app/build")
app.GET("/", handlers.AppHandler())
app.GET("/reset-password", handlers.AppHandler())
}
// dashboard related routes
app := router.Group("/dashboard")
dashboard := router.Group("/dashboard")
{
app.Static("/build", "dashboard/build")
app.GET("/", handlers.DashboardHandler())
app.GET("/:page", handlers.DashboardHandler())
dashboard.Static("/build", "dashboard/build")
dashboard.GET("/", handlers.DashboardHandler())
dashboard.GET("/:page", handlers.DashboardHandler())
}
return router
}