Merge pull request #281 from authorizerdev/development

chore: 1.1.22-rc.0

Author: lakhansamani

app/src/pages/login.tsx

@@ -60,7 +60,12 @@ export default function Login({ urlProps }: { urlProps: Record<string, any> }) {
 			{view === VIEW_TYPES.FORGOT_PASSWORD && (
 				<Fragment>
 					<h1 style={{ textAlign: 'center' }}>Forgot Password</h1>
-					<AuthorizerForgotPassword urlProps={urlProps} />
+					<AuthorizerForgotPassword
+						urlProps={{
+							...urlProps,
+							redirect_uri: `${window.location.origin}/app/reset-password`,
+						}}
+					/>
 					<Footer>
 						<Link
 							to="#"

dashboard/src/components/EditUserModal.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	Button,
 	Center,
@@ -20,13 +20,14 @@ import { useClient } from 'urql';
 import { FaSave } from 'react-icons/fa';
 import InputField from './InputField';
 import {
-	ArrayInputType,
 	DateInputType,
+	MultiSelectInputType,
 	SelectInputType,
 	TextInputType,
 } from '../constants';
 import { getObjectDiff } from '../utils';
 import { UpdateUser } from '../graphql/mutation';
+import { GetAvailableRolesQuery } from '../graphql/queries';
 
 const GenderTypes = {
 	Undisclosed: null,
@@ -57,8 +58,9 @@ const EditUserModal = ({
 }) => {
 	const client = useClient();
 	const toast = useToast();
+	const [availableRoles, setAvailableRoles] = useState<string[]>([]);
 	const { isOpen, onOpen, onClose } = useDisclosure();
-	const [userData, setUserData] = React.useState<userDataTypes>({
+	const [userData, setUserData] = useState<userDataTypes>({
 		id: '',
 		email: '',
 		given_name: '',
@@ -73,7 +75,17 @@ const EditUserModal = ({
 	});
 	React.useEffect(() => {
 		setUserData(user);
+		fetchAvailableRoles();
 	}, []);
+	const fetchAvailableRoles = async () => {
+		const res = await client.query(GetAvailableRolesQuery).toPromise();
+		if (res.data?._env?.ROLES && res.data?._env?.PROTECTED_ROLES) {
+			setAvailableRoles([
+				...res.data._env.ROLES,
+				...res.data._env.PROTECTED_ROLES,
+			]);
+		}
+	};
 	const saveHandler = async () => {
 		const diff = getObjectDiff(user, userData);
 		const updatedUserData = diff.reduce(
@@ -221,7 +233,8 @@ const EditUserModal = ({
 									<InputField
 										variables={userData}
 										setVariables={setUserData}
-										inputType={ArrayInputType.USER_ROLES}
+										availableRoles={availableRoles}
+										inputType={MultiSelectInputType.USER_ROLES}
 									/>
 								</Center>
 							</Flex>

dashboard/src/components/EnvComponents/EmailConfiguration.tsx

@@ -48,6 +48,26 @@ const EmailConfigurations = ({
 						/>
 					</Center>
 				</Flex>
+				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+					<Flex
+						w={isNotSmallerScreen ? '30%' : '40%'}
+						justifyContent="start"
+						alignItems="center"
+					>
+						<Text fontSize="sm">SMTP Local Name:</Text>
+					</Flex>
+					<Center
+						w={isNotSmallerScreen ? '70%' : '100%'}
+						mt={isNotSmallerScreen ? '0' : '3'}
+					>
+						<InputField
+							borderRadius={5}
+							variables={variables}
+							setVariables={setVariables}
+							inputType={TextInputType.SMTP_LOCAL_NAME}
+						/>
+					</Center>
+				</Flex>
 				<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
 					<Flex
 						w={isNotSmallerScreen ? '30%' : '40%'}

dashboard/src/components/InputField.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
 	Box,
 	Flex,
@@ -13,13 +13,20 @@ import {
 	Textarea,
 	Switch,
 	Text,
+	MenuButton,
+	MenuList,
+	MenuItemOption,
+	MenuOptionGroup,
+	Button,
+	Menu,
 } from '@chakra-ui/react';
 import {
 	FaRegClone,
 	FaRegEye,
 	FaRegEyeSlash,
 	FaPlus,
 	FaTimes,
+	FaAngleDown,
 } from 'react-icons/fa';
 import {
 	ArrayInputOperations,
@@ -30,6 +37,7 @@ import {
 	TextAreaInputType,
 	SwitchInputType,
 	DateInputType,
+	MultiSelectInputType,
 } from '../constants';
 import { copyTextToClipboard } from '../utils';
 
@@ -39,13 +47,16 @@ const InputField = ({
 	setVariables,
 	fieldVisibility,
 	setFieldVisibility,
+	availableRoles,
 	...downshiftProps
 }: any) => {
 	const props = {
 		size: 'sm',
 		...downshiftProps,
 	};
-	const [inputFieldVisibility, setInputFieldVisibility] = React.useState<
+	const [availableUserRoles, setAvailableUserRoles] =
+		useState<string[]>(availableRoles);
+	const [inputFieldVisibility, setInputFieldVisibility] = useState<
 		Record<string, boolean>
 	>({
 		ROLES: false,
@@ -54,7 +65,7 @@ const InputField = ({
 		ALLOWED_ORIGINS: false,
 		roles: false,
 	});
-	const [inputData, setInputData] = React.useState<Record<string, string>>({
+	const [inputData, setInputData] = useState<Record<string, string>>({
 		ROLES: '',
 		DEFAULT_ROLES: '',
 		PROTECTED_ROLES: '',
@@ -116,7 +127,7 @@ const InputField = ({
 			<InputGroup size="sm">
 				<Input
 					{...props}
-					value={variables[inputType] ?? ''}
+					value={variables[inputType] || ''}
 					onChange={(
 						event: Event & {
 							target: HTMLInputElement;
@@ -221,7 +232,7 @@ const InputField = ({
 							size="xs"
 							minW="150px"
 							placeholder="add a new value"
-							value={inputData[inputType] ?? ''}
+							value={inputData[inputType] || ''}
 							onChange={(e: any) => {
 								setInputData({ ...inputData, [inputType]: e.target.value });
 							}}
@@ -278,6 +289,87 @@ const InputField = ({
 			</Select>
 		);
 	}
+	if (Object.values(MultiSelectInputType).includes(inputType)) {
+		return (
+			<Flex w="100%" style={{ position: 'relative' }}>
+				<Flex
+					border="1px solid #e2e8f0"
+					w="100%"
+					borderRadius="var(--chakra-radii-sm)"
+					p="1% 0 0 2.5%"
+					overflowX={variables[inputType].length > 3 ? 'scroll' : 'hidden'}
+					overflowY="hidden"
+					justifyContent="space-between"
+					alignItems="center"
+				>
+					<Flex justifyContent="start" alignItems="center" w="100%" wrap="wrap">
+						{variables[inputType].map((role: string, index: number) => (
+							<Box key={index} margin="0.5%" role="group">
+								<Tag
+									size="sm"
+									variant="outline"
+									colorScheme="gray"
+									minW="fit-content"
+								>
+									<TagLabel cursor="default">{role}</TagLabel>
+									<TagRightIcon
+										boxSize="12px"
+										as={FaTimes}
+										display="none"
+										cursor="pointer"
+										_groupHover={{ display: 'block' }}
+										onClick={() =>
+											updateInputHandler(
+												inputType,
+												ArrayInputOperations.REMOVE,
+												role,
+											)
+										}
+									/>
+								</Tag>
+							</Box>
+						))}
+					</Flex>
+					<Menu matchWidth={true}>
+						<MenuButton px="10px" py="7.5px">
+							<FaAngleDown />
+						</MenuButton>
+						<MenuList
+							position="absolute"
+							top="0"
+							right="0"
+							zIndex="10"
+							maxH="150"
+							overflowX="scroll"
+						>
+							<MenuOptionGroup
+								title={undefined}
+								value={variables[inputType]}
+								type="checkbox"
+								onChange={(values: string[] | string) => {
+									setVariables({
+										...variables,
+										[inputType]: values,
+									});
+								}}
+							>
+								{availableUserRoles.map((role) => {
+									return (
+										<MenuItemOption
+											key={`multiselect-menu-${role}`}
+											value={role}
+										>
+											{role}
+										</MenuItemOption>
+									);
+								})}
+							</MenuOptionGroup>
+						</MenuList>
+					</Menu>
+				</Flex>
+			</Flex>
+		);
+	}
 	if (Object.values(TextAreaInputType).includes(inputType)) {
 		return (
 			<Textarea

dashboard/src/constants.ts

@@ -15,6 +15,7 @@ export const TextInputType = {
 	SMTP_HOST: 'SMTP_HOST',
 	SMTP_PORT: 'SMTP_PORT',
 	SMTP_USERNAME: 'SMTP_USERNAME',
+	SMTP_LOCAL_NAME: 'SMTP_LOCAL_NAME',
 	SENDER_EMAIL: 'SENDER_EMAIL',
 	ORGANIZATION_NAME: 'ORGANIZATION_NAME',
 	ORGANIZATION_LOGO: 'ORGANIZATION_LOGO',
@@ -48,14 +49,17 @@ export const ArrayInputType = {
 	DEFAULT_ROLES: 'DEFAULT_ROLES',
 	PROTECTED_ROLES: 'PROTECTED_ROLES',
 	ALLOWED_ORIGINS: 'ALLOWED_ORIGINS',
-	USER_ROLES: 'roles',
 };
 
 export const SelectInputType = {
 	JWT_TYPE: 'JWT_TYPE',
 	GENDER: 'gender',
 };
 
+export const MultiSelectInputType = {
+	USER_ROLES: 'roles',
+};
+
 export const TextAreaInputType = {
 	CUSTOM_ACCESS_TOKEN_SCRIPT: 'CUSTOM_ACCESS_TOKEN_SCRIPT',
 	JWT_PRIVATE_KEY: 'JWT_PRIVATE_KEY',
@@ -129,6 +133,7 @@ export interface envVarTypes {
 	SMTP_PORT: string;
 	SMTP_USERNAME: string;
 	SMTP_PASSWORD: string;
+	SMTP_LOCAL_NAME: string;
 	SENDER_EMAIL: string;
 	ALLOWED_ORIGINS: [string] | [];
 	ORGANIZATION_NAME: string;

dashboard/src/graphql/queries/index.ts

@@ -45,6 +45,7 @@ export const EnvVariablesQuery = `
       SMTP_PORT
       SMTP_USERNAME
       SMTP_PASSWORD
+      SMTP_LOCAL_NAME
       SENDER_EMAIL
       ALLOWED_ORIGINS
       ORGANIZATION_NAME
@@ -169,3 +170,12 @@ export const WebhookLogsQuery = `
     }
   }
 `;
+
+export const GetAvailableRolesQuery = `
+  query {
+    _env {
+      ROLES
+      PROTECTED_ROLES
+    }
+  }
+`;

dashboard/src/pages/Environment.tsx

@@ -65,6 +65,7 @@ const Environment = () => {
 		SMTP_PORT: '',
 		SMTP_USERNAME: '',
 		SMTP_PASSWORD: '',
+		SMTP_LOCAL_NAME: '',
 		SENDER_EMAIL: '',
 		ALLOWED_ORIGINS: [],
 		ORGANIZATION_NAME: '',

server/constants/env.go

@@ -51,6 +51,8 @@ const (
 	EnvKeySmtpUsername = "SMTP_USERNAME"
 	// EnvKeySmtpPassword key for env variable SMTP_PASSWORD
 	EnvKeySmtpPassword = "SMTP_PASSWORD"
+	// EnvKeySmtpLocalName key for env variable SMTP_LOCAL_NAME
+	EnvKeySmtpLocalName = "SMTP_LOCAL_NAME"
 	// EnvKeySenderEmail key for env variable SENDER_EMAIL
 	EnvKeySenderEmail = "SENDER_EMAIL"
 	// EnvKeyIsEmailServiceEnabled key for env variable IS_EMAIL_SERVICE_ENABLED

server/email/email.go

@@ -5,6 +5,7 @@ import (
 	"context"
 	"crypto/tls"
 	"strconv"
+	"strings"
 	"text/template"
 
 	log "github.com/sirupsen/logrus"
@@ -126,6 +127,12 @@ func SendEmail(to []string, event string, data map[string]interface{}) error {
 		return err
 	}
 
+	smtpLocalName, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeySmtpLocalName)
+	if err != nil {
+		log.Debugf("Error while getting smtp localname from env variable: %v", err)
+		smtpLocalName = ""
+	}
+
 	isProd, err := memorystore.Provider.GetBoolStoreEnvVariable(constants.EnvKeyIsProd)
 	if err != nil {
 		log.Errorf("Error while getting env variable: %v", err)
@@ -141,6 +148,11 @@ func SendEmail(to []string, event string, data map[string]interface{}) error {
 	if !isProd {
 		d.TLSConfig = &tls.Config{InsecureSkipVerify: true}
 	}
+
+	if strings.TrimSpace(smtpLocalName) != "" {
+		d.LocalName = smtpLocalName
+	}
+
 	if err := d.DialAndSend(m); err != nil {
 		log.Debug("SMTP Failed: ", err)
 		return err

server/env/env.go

@@ -55,6 +55,7 @@ func InitAllEnv() error {
 	osSmtpPort := os.Getenv(constants.EnvKeySmtpPort)
 	osSmtpUsername := os.Getenv(constants.EnvKeySmtpUsername)
 	osSmtpPassword := os.Getenv(constants.EnvKeySmtpPassword)
+	osSmtpLocalName := os.Getenv(constants.EnvKeySmtpLocalName)
 	osSenderEmail := os.Getenv(constants.EnvKeySenderEmail)
 	osJwtType := os.Getenv(constants.EnvKeyJwtType)
 	osJwtSecret := os.Getenv(constants.EnvKeyJwtSecret)
@@ -205,6 +206,13 @@ func InitAllEnv() error {
 		envData[constants.EnvKeySmtpUsername] = osSmtpUsername
 	}
 
+	if val, ok := envData[constants.EnvKeySmtpLocalName]; !ok || val == "" {
+		envData[constants.EnvKeySmtpLocalName] = osSmtpLocalName
+	}
+	if osSmtpLocalName != "" && envData[constants.EnvKeySmtpLocalName] != osSmtpLocalName {
+		envData[constants.EnvKeySmtpLocalName] = osSmtpLocalName
+	}
+
 	if val, ok := envData[constants.EnvKeySmtpPassword]; !ok || val == "" {
 		envData[constants.EnvKeySmtpPassword] = osSmtpPassword
 	}