chore: bump app/authorizer-react 1.0.0

fix email template

app/package-lock.json

@@ -9,7 +9,7 @@
 			"version": "1.0.0",
 			"license": "ISC",
 			"dependencies": {
-				"@authorizerdev/authorizer-react": "^0.26.0-beta.0",
+				"@authorizerdev/authorizer-react": "^1.0.0",
 				"@types/react": "^17.0.15",
 				"@types/react-dom": "^17.0.9",
 				"esbuild": "^0.12.17",
@@ -26,22 +26,22 @@
 			}
 		},
 		"node_modules/@authorizerdev/authorizer-js": {
-			"version": "0.17.0-beta.1",
+			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-0.17.0-beta.1.tgz",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-1.0.0.tgz",
-			"integrity": "sha512-jUlFUrs4Ys6LZ5hclPeRt84teygi+bA57d/IpV9GAqOrfifv70jkFeDln4+Bs0mZk74el23Xn+DR9380mqE4Cg==",
+			"integrity": "sha512-TtXA8y06CIZ5f+nk1tgPiSpGR9neCkGHtmKLqGWjWPdObDfekRU5qMtpC2S2uEljAI53mnueLZKmbd9hrReTag==",
 			"dependencies": {
-				"node-fetch": "^2.6.1"
+				"cross-fetch": "^3.1.5"
 			},
 			"engines": {
 				"node": ">=10"
 			}
 		},
 		"node_modules/@authorizerdev/authorizer-react": {
-			"version": "0.26.0-beta.0",
+			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-0.26.0-beta.0.tgz",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-1.0.0.tgz",
-			"integrity": "sha512-YfyiGYBmbsp3tLWIxOrOZ/hUTCmdMXVE9SLE8m1xsFsxzJJlUhepp0AMahSbH5EyLj5bchOhOw/rzgpnDZDvMw==",
+			"integrity": "sha512-lXckUe46LTcH+hFxIxPEewQR1/ktd2awoqZsMZZaa0AjQJoekJaUcouBuX0F66VyQG0qezuyEQrye0Z93Ffgug==",
 			"dependencies": {
-				"@authorizerdev/authorizer-js": "^0.17.0-beta.1",
+				"@authorizerdev/authorizer-js": "^1.0.0",
 				"final-form": "^4.20.2",
 				"react-final-form": "^6.5.3",
 				"styled-components": "^5.3.0"
@@ -404,6 +404,14 @@
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
 			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
 		},
+		"node_modules/cross-fetch": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+			"integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+			"dependencies": {
+				"node-fetch": "2.6.7"
+			}
+		},
 		"node_modules/css-color-keywords": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
@@ -852,19 +860,19 @@
 	},
 	"dependencies": {
 		"@authorizerdev/authorizer-js": {
-			"version": "0.17.0-beta.1",
+			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-0.17.0-beta.1.tgz",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-1.0.0.tgz",
-			"integrity": "sha512-jUlFUrs4Ys6LZ5hclPeRt84teygi+bA57d/IpV9GAqOrfifv70jkFeDln4+Bs0mZk74el23Xn+DR9380mqE4Cg==",
+			"integrity": "sha512-TtXA8y06CIZ5f+nk1tgPiSpGR9neCkGHtmKLqGWjWPdObDfekRU5qMtpC2S2uEljAI53mnueLZKmbd9hrReTag==",
 			"requires": {
-				"node-fetch": "^2.6.1"
+				"cross-fetch": "^3.1.5"
 			}
 		},
 		"@authorizerdev/authorizer-react": {
-			"version": "0.26.0-beta.0",
+			"version": "1.0.0",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-0.26.0-beta.0.tgz",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-1.0.0.tgz",
-			"integrity": "sha512-YfyiGYBmbsp3tLWIxOrOZ/hUTCmdMXVE9SLE8m1xsFsxzJJlUhepp0AMahSbH5EyLj5bchOhOw/rzgpnDZDvMw==",
+			"integrity": "sha512-lXckUe46LTcH+hFxIxPEewQR1/ktd2awoqZsMZZaa0AjQJoekJaUcouBuX0F66VyQG0qezuyEQrye0Z93Ffgug==",
 			"requires": {
-				"@authorizerdev/authorizer-js": "^0.17.0-beta.1",
+				"@authorizerdev/authorizer-js": "^1.0.0",
 				"final-form": "^4.20.2",
 				"react-final-form": "^6.5.3",
 				"styled-components": "^5.3.0"
@@ -1161,6 +1169,14 @@
 			"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
 			"integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
 		},
+		"cross-fetch": {
+			"version": "3.1.5",
+			"resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.1.5.tgz",
+			"integrity": "sha512-lvb1SBsI0Z7GDwmuid+mU3kWVBwTVUbe7S0H52yaaAdQOXq2YktTCZdlAcNKFzE6QtRz0snpw9bNiPeOIkkQvw==",
+			"requires": {
+				"node-fetch": "2.6.7"
+			}
+		},
 		"css-color-keywords": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",

app/package.json

@@ -11,7 +11,7 @@
 	"author": "Lakhan Samani",
 	"license": "ISC",
 	"dependencies": {
-		"@authorizerdev/authorizer-react": "^0.26.0-beta.0",
+		"@authorizerdev/authorizer-react": "^1.0.0",
 		"@types/react": "^17.0.15",
 		"@types/react-dom": "^17.0.9",
 		"esbuild": "^0.12.17",

dashboard/package-lock.json

@@ -24,11 +24,16 @@
 				"lodash": "^4.17.21",
 				"react": "^17.0.2",
 				"react-dom": "^17.0.2",
+				"react-draft-wysiwyg": "^1.15.0",
 				"react-dropzone": "^12.0.4",
+				"react-email-editor": "^1.6.1",
 				"react-icons": "^4.3.1",
 				"react-router-dom": "^6.2.1",
 				"typescript": "^4.5.4",
 				"urql": "^2.0.6"
+			},
+			"devDependencies": {
+				"@types/react-email-editor": "^1.1.7"
 			}
 		},
 		"node_modules/@babel/code-frame": {
@@ -1191,6 +1196,15 @@
 				"@types/react": "*"
 			}
 		},
+		"node_modules/@types/react-email-editor": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@types/react-email-editor/-/react-email-editor-1.1.7.tgz",
+			"integrity": "sha512-OURTAgaE9pjA6KiU97k13fPdoglI1ZyowUuZ0nu5tTSyrw5PiZoYzYEf9y25YTjmw/ohxT5yqoP0tt+AjSh1qQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/react": "*"
+			}
+		},
 		"node_modules/@types/react-router": {
 			"version": "5.1.17",
 			"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.17.tgz",
@@ -1306,6 +1320,11 @@
 				"node": ">=0.8.0"
 			}
 		},
+		"node_modules/classnames": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+			"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+		},
 		"node_modules/color-convert": {
 			"version": "1.9.3",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -1383,6 +1402,15 @@
 			"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
 			"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
 		},
+		"node_modules/draftjs-utils": {
+			"version": "0.10.2",
+			"resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
+			"integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==",
+			"peerDependencies": {
+				"draft-js": "^0.11.x",
+				"immutable": "3.x.x || 4.x.x"
+			}
+		},
 		"node_modules/error-ex": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -1802,6 +1830,15 @@
 				"react-is": "^16.7.0"
 			}
 		},
+		"node_modules/html-to-draftjs": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz",
+			"integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==",
+			"peerDependencies": {
+				"draft-js": "^0.10.x || ^0.11.x",
+				"immutable": "3.x.x || 4.x.x"
+			}
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1856,6 +1893,14 @@
 			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
 			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
 		},
+		"node_modules/linkify-it": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+			"integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+			"dependencies": {
+				"uc.micro": "^1.0.1"
+			}
+		},
 		"node_modules/lodash": {
 			"version": "4.17.21",
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -1991,6 +2036,24 @@
 				"react": "17.0.2"
 			}
 		},
+		"node_modules/react-draft-wysiwyg": {
+			"version": "1.15.0",
+			"resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.15.0.tgz",
+			"integrity": "sha512-p1cYZcWc6/ALFBVksbFoCM3b29fGQDlZLIMrXng0TU/UElxIOF2/AWWo4L5auIYVhmqKTZ0NkNjnXOzGGuxyeA==",
+			"dependencies": {
+				"classnames": "^2.2.6",
+				"draftjs-utils": "^0.10.2",
+				"html-to-draftjs": "^1.5.0",
+				"linkify-it": "^2.2.0",
+				"prop-types": "^15.7.2"
+			},
+			"peerDependencies": {
+				"draft-js": "^0.10.x || ^0.11.x",
+				"immutable": "3.x.x || 4.x.x",
+				"react": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x",
+				"react-dom": "0.13.x || 0.14.x || ^15.0.0-0 || 15.x.x || ^16.0.0-0 || ^16.x.x || ^17.x.x || ^18.x.x"
+			}
+		},
 		"node_modules/react-dropzone": {
 			"version": "12.0.4",
 			"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-12.0.4.tgz",
@@ -2007,6 +2070,14 @@
 				"react": ">= 16.8"
 			}
 		},
+		"node_modules/react-email-editor": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/react-email-editor/-/react-email-editor-1.6.1.tgz",
+			"integrity": "sha512-pEWpRmTY0ok03cwTGqEOoEldnzThhuRGTrcMnv8W3/jc5MTfcr9USU/IQ9HrVvFStLKoxYBIQnSKY+iCYWOtSQ==",
+			"peerDependencies": {
+				"react": "15.x || 16.x || 17.x"
+			}
+		},
 		"node_modules/react-fast-compare": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
@@ -2275,6 +2346,11 @@
 				"node": ">=4.2.0"
 			}
 		},
+		"node_modules/uc.micro": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+			"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+		},
 		"node_modules/urql": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/urql/-/urql-2.0.6.tgz",
@@ -3218,6 +3294,15 @@
 				"@types/react": "*"
 			}
 		},
+		"@types/react-email-editor": {
+			"version": "1.1.7",
+			"resolved": "https://registry.npmjs.org/@types/react-email-editor/-/react-email-editor-1.1.7.tgz",
+			"integrity": "sha512-OURTAgaE9pjA6KiU97k13fPdoglI1ZyowUuZ0nu5tTSyrw5PiZoYzYEf9y25YTjmw/ohxT5yqoP0tt+AjSh1qQ==",
+			"dev": true,
+			"requires": {
+				"@types/react": "*"
+			}
+		},
 		"@types/react-router": {
 			"version": "5.1.17",
 			"resolved": "https://registry.npmjs.org/@types/react-router/-/react-router-5.1.17.tgz",
@@ -3316,6 +3401,11 @@
 				}
 			}
 		},
+		"classnames": {
+			"version": "2.3.1",
+			"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+			"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+		},
 		"color-convert": {
 			"version": "1.9.3",
 			"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
@@ -3390,6 +3480,12 @@
 			"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
 			"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
 		},
+		"draftjs-utils": {
+			"version": "0.10.2",
+			"resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
+			"integrity": "sha512-EstHqr3R3JVcilJrBaO/A+01GvwwKmC7e4TCjC7S94ZeMh4IVmf60OuQXtHHpwItK8C2JCi3iljgN5KHkJboUg==",
+			"requires": {}
+		},
 		"error-ex": {
 			"version": "1.3.2",
 			"resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
@@ -3659,6 +3755,12 @@
 				"react-is": "^16.7.0"
 			}
 		},
+		"html-to-draftjs": {
+			"version": "1.5.0",
+			"resolved": "https://registry.npmjs.org/html-to-draftjs/-/html-to-draftjs-1.5.0.tgz",
+			"integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==",
+			"requires": {}
+		},
 		"import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -3704,6 +3806,14 @@
 			"resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
 			"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
 		},
+		"linkify-it": {
+			"version": "2.2.0",
+			"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.2.0.tgz",
+			"integrity": "sha512-GnAl/knGn+i1U/wjBz3akz2stz+HrHLsxMwHQGofCDfPvlf+gDKN58UtfmUquTY4/MXeE2x7k19KQmeoZi94Iw==",
+			"requires": {
+				"uc.micro": "^1.0.1"
+			}
+		},
 		"lodash": {
 			"version": "4.17.21",
 			"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -3814,6 +3924,18 @@
 				"scheduler": "^0.20.2"
 			}
 		},
+		"react-draft-wysiwyg": {
+			"version": "1.15.0",
+			"resolved": "https://registry.npmjs.org/react-draft-wysiwyg/-/react-draft-wysiwyg-1.15.0.tgz",
+			"integrity": "sha512-p1cYZcWc6/ALFBVksbFoCM3b29fGQDlZLIMrXng0TU/UElxIOF2/AWWo4L5auIYVhmqKTZ0NkNjnXOzGGuxyeA==",
+			"requires": {
+				"classnames": "^2.2.6",
+				"draftjs-utils": "^0.10.2",
+				"html-to-draftjs": "^1.5.0",
+				"linkify-it": "^2.2.0",
+				"prop-types": "^15.7.2"
+			}
+		},
 		"react-dropzone": {
 			"version": "12.0.4",
 			"resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-12.0.4.tgz",
@@ -3824,6 +3946,12 @@
 				"prop-types": "^15.8.1"
 			}
 		},
+		"react-email-editor": {
+			"version": "1.6.1",
+			"resolved": "https://registry.npmjs.org/react-email-editor/-/react-email-editor-1.6.1.tgz",
+			"integrity": "sha512-pEWpRmTY0ok03cwTGqEOoEldnzThhuRGTrcMnv8W3/jc5MTfcr9USU/IQ9HrVvFStLKoxYBIQnSKY+iCYWOtSQ==",
+			"requires": {}
+		},
 		"react-fast-compare": {
 			"version": "3.2.0",
 			"resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
@@ -4020,6 +4148,11 @@
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
 			"integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg=="
 		},
+		"uc.micro": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
+			"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA=="
+		},
 		"urql": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/urql/-/urql-2.0.6.tgz",

dashboard/package.json

@@ -26,10 +26,15 @@
 		"lodash": "^4.17.21",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2",
+		"react-draft-wysiwyg": "^1.15.0",
 		"react-dropzone": "^12.0.4",
+		"react-email-editor": "^1.6.1",
 		"react-icons": "^4.3.1",
 		"react-router-dom": "^6.2.1",
 		"typescript": "^4.5.4",
 		"urql": "^2.0.6"
+	},
+	"devDependencies": {
+		"@types/react-email-editor": "^1.1.7"
 	}
 }

dashboard/src/components/DeleteEmailTemplateModal.tsx

@@ -0,0 +1,106 @@
+import React from 'react';
+import {
+	Button,
+	Center,
+	Flex,
+	MenuItem,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	useDisclosure,
+	Text,
+	useToast,
+} from '@chakra-ui/react';
+import { useClient } from 'urql';
+import { FaRegTrashAlt } from 'react-icons/fa';
+import { DeleteEmailTemplate } from '../graphql/mutation';
+import { capitalizeFirstLetter } from '../utils';
+
+interface deleteEmailTemplateModalInputPropTypes {
+	emailTemplateId: string;
+	eventName: string;
+	fetchEmailTemplatesData: Function;
+}
+
+const DeleteEmailTemplateModal = ({
+	emailTemplateId,
+	eventName,
+	fetchEmailTemplatesData,
+}: deleteEmailTemplateModalInputPropTypes) => {
+	const client = useClient();
+	const toast = useToast();
+	const { isOpen, onOpen, onClose } = useDisclosure();
+
+	const deleteHandler = async () => {
+		const res = await client
+			.mutation(DeleteEmailTemplate, { params: { id: emailTemplateId } })
+			.toPromise();
+		if (res.error) {
+			toast({
+				title: capitalizeFirstLetter(res.error.message),
+				isClosable: true,
+				status: 'error',
+				position: 'bottom-right',
+			});
+
+			return;
+		} else if (res.data?._delete_email_template) {
+			toast({
+				title: capitalizeFirstLetter(res.data?._delete_email_template.message),
+				isClosable: true,
+				status: 'success',
+				position: 'bottom-right',
+			});
+		}
+		onClose();
+		fetchEmailTemplatesData();
+	};
+	return (
+		<>
+			<MenuItem onClick={onOpen}>Delete</MenuItem>
+			<Modal isOpen={isOpen} onClose={onClose}>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>Delete Email Template</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<Text fontSize="md">Are you sure?</Text>
+						<Flex
+							padding="5%"
+							marginTop="5%"
+							marginBottom="2%"
+							border="1px solid #ff7875"
+							borderRadius="5px"
+							flexDirection="column"
+						>
+							<Text fontSize="sm">
+								Email template for event <b>{eventName}</b> will be deleted
+								permanently!
+							</Text>
+						</Flex>
+					</ModalBody>
+
+					<ModalFooter>
+						<Button
+							leftIcon={<FaRegTrashAlt />}
+							colorScheme="red"
+							variant="solid"
+							onClick={deleteHandler}
+							isDisabled={false}
+						>
+							<Center h="100%" pt="5%">
+								Delete
+							</Center>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
+};
+
+export default DeleteEmailTemplateModal;

dashboard/src/components/EnvComponents/Features.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, Stack, Text } from '@chakra-ui/react';
+import { Divider, Flex, Stack, Text } from '@chakra-ui/react';
 import InputField from '../InputField';
 import { SwitchInputType } from '../../constants';
 
@@ -10,7 +10,7 @@ const Features = ({ variables, setVariables }: any) => {
 			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
 				Disable Features
 			</Text>
-			<Stack spacing={6} padding="2% 0%">
+			<Stack spacing={6}>
 				<Flex>
 					<Flex w="100%" justifyContent="start" alignItems="center">
 						<Text fontSize="sm">Disable Login Page:</Text>
@@ -83,6 +83,48 @@ const Features = ({ variables, setVariables }: any) => {
 						/>
 					</Flex>
 				</Flex>
+				<Flex alignItems="center">
+					<Flex w="100%" alignItems="baseline" flexDir="column">
+						<Text fontSize="sm">
+							Disable Multi Factor Authentication (MFA):
+						</Text>
+						<Text fontSize="x-small">
+							Note: Enabling this will ignore Enforcing MFA shown below and will
+							also ignore the user MFA setting.
+						</Text>
+					</Flex>
+					<Flex justifyContent="start" mb={3}>
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.DISABLE_MULTI_FACTOR_AUTHENTICATION}
+						/>
+					</Flex>
+				</Flex>
+			</Stack>
+			<Divider paddingY={5} />
+			<Text fontSize="md" paddingTop={5} fontWeight="bold" mb={5}>
+				Enable Features
+			</Text>
+			<Stack spacing={6}>
+				<Flex alignItems="center">
+					<Flex w="100%" alignItems="baseline" flexDir="column">
+						<Text fontSize="sm">
+							Enforce Multi Factor Authentication (MFA):
+						</Text>
+						<Text fontSize="x-small">
+							Note: If you disable enforcing after it was enabled, it will still
+							keep MFA enabled for older users.
+						</Text>
+					</Flex>
+					<Flex justifyContent="start" mb={3}>
+						<InputField
+							variables={variables}
+							setVariables={setVariables}
+							inputType={SwitchInputType.ENFORCE_MULTI_FACTOR_AUTHENTICATION}
+						/>
+					</Flex>
+				</Flex>
 			</Stack>
 		</div>
 	);

dashboard/src/components/InputField.tsx

@@ -12,7 +12,6 @@ import {
 	Select,
 	Textarea,
 	Switch,
-	Code,
 	Text,
 } from '@chakra-ui/react';
 import {

dashboard/src/components/Menu.tsx

@@ -31,6 +31,7 @@ import {
 	FiUsers,
 	FiChevronDown,
 	FiLink,
+	FiFileText,
 } from 'react-icons/fi';
 import { BiCustomize } from 'react-icons/bi';
 import { AiOutlineKey } from 'react-icons/ai';
@@ -113,6 +114,7 @@ const LinkItems: Array<LinkItemProps> = [
 	},
 	{ name: 'Users', icon: FiUsers, route: '/users' },
 	{ name: 'Webhooks', icon: FiLink, route: '/webhooks' },
+	{ name: 'Email Templates', icon: FiFileText, route: '/email-templates' },
 ];
 
 interface SidebarProps extends BoxProps {

dashboard/src/components/UpdateEmailTemplateModal.tsx

@@ -0,0 +1,457 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+	Button,
+	Center,
+	Flex,
+	Input,
+	InputGroup,
+	MenuItem,
+	Modal,
+	ModalBody,
+	ModalCloseButton,
+	ModalContent,
+	ModalFooter,
+	ModalHeader,
+	ModalOverlay,
+	Select,
+	Text,
+	useDisclosure,
+	useToast,
+	Alert,
+	AlertIcon,
+	Collapse,
+	Box,
+	TableContainer,
+	Table,
+	Thead,
+	Tr,
+	Th,
+	Tbody,
+	Td,
+	Code,
+} from '@chakra-ui/react';
+import { FaPlus, FaAngleDown, FaAngleUp } from 'react-icons/fa';
+import { useClient } from 'urql';
+import EmailEditor from 'react-email-editor';
+import {
+	UpdateModalViews,
+	EmailTemplateInputDataFields,
+	emailTemplateEventNames,
+	emailTemplateVariables,
+} from '../constants';
+import { capitalizeFirstLetter } from '../utils';
+import { AddEmailTemplate, EditEmailTemplate } from '../graphql/mutation';
+
+interface selectedEmailTemplateDataTypes {
+	[EmailTemplateInputDataFields.ID]: string;
+	[EmailTemplateInputDataFields.EVENT_NAME]: string;
+	[EmailTemplateInputDataFields.SUBJECT]: string;
+	[EmailTemplateInputDataFields.CREATED_AT]: number;
+	[EmailTemplateInputDataFields.TEMPLATE]: string;
+	[EmailTemplateInputDataFields.DESIGN]: string;
+}
+
+interface UpdateEmailTemplateInputPropTypes {
+	view: UpdateModalViews;
+	selectedTemplate?: selectedEmailTemplateDataTypes;
+	fetchEmailTemplatesData: Function;
+}
+
+interface templateVariableDataTypes {
+	text: string;
+	value: string;
+	description: string;
+}
+
+interface emailTemplateDataType {
+	[EmailTemplateInputDataFields.EVENT_NAME]: string;
+	[EmailTemplateInputDataFields.SUBJECT]: string;
+}
+
+interface validatorDataType {
+	[EmailTemplateInputDataFields.SUBJECT]: boolean;
+}
+
+const initTemplateData: emailTemplateDataType = {
+	[EmailTemplateInputDataFields.EVENT_NAME]: emailTemplateEventNames.Signup,
+	[EmailTemplateInputDataFields.SUBJECT]: '',
+};
+
+const initTemplateValidatorData: validatorDataType = {
+	[EmailTemplateInputDataFields.SUBJECT]: true,
+};
+
+const UpdateEmailTemplate = ({
+	view,
+	selectedTemplate,
+	fetchEmailTemplatesData,
+}: UpdateEmailTemplateInputPropTypes) => {
+	const client = useClient();
+	const toast = useToast();
+	const emailEditorRef = useRef(null);
+	const { isOpen, onOpen, onClose } = useDisclosure();
+	const [loading, setLoading] = useState<boolean>(false);
+	const [templateVariables, setTemplateVariables] = useState<
+		templateVariableDataTypes[]
+	>([]);
+	const [templateData, setTemplateData] = useState<emailTemplateDataType>({
+		...initTemplateData,
+	});
+	const [validator, setValidator] = useState<validatorDataType>({
+		...initTemplateValidatorData,
+	});
+	const [isDynamicVariableInfoOpen, setIsDynamicVariableInfoOpen] =
+		useState<boolean>(false);
+
+	const onReady = () => {
+		if (selectedTemplate) {
+			const { design } = selectedTemplate;
+			try {
+				const designData = JSON.parse(design);
+				// @ts-ignore
+				emailEditorRef.current.editor.loadDesign(designData);
+			} catch (error) {
+				console.error(error);
+				onClose();
+			}
+		}
+	};
+
+	const inputChangehandler = (inputType: string, value: any) => {
+		if (inputType !== EmailTemplateInputDataFields.EVENT_NAME) {
+			setValidator({
+				...validator,
+				[inputType]: value?.trim().length,
+			});
+		}
+		setTemplateData({ ...templateData, [inputType]: value });
+	};
+
+	const validateData = () => {
+		return (
+			!loading &&
+			templateData[EmailTemplateInputDataFields.EVENT_NAME].length > 0 &&
+			templateData[EmailTemplateInputDataFields.SUBJECT].length > 0 &&
+			validator[EmailTemplateInputDataFields.SUBJECT]
+		);
+	};
+
+	const saveData = async () => {
+		if (!validateData()) return;
+		setLoading(true);
+		// @ts-ignore
+		return await emailEditorRef.current.editor.exportHtml(async (data) => {
+			const { design, html } = data;
+			if (!html || !design) {
+				setLoading(false);
+				return;
+			}
+			const params = {
+				[EmailTemplateInputDataFields.EVENT_NAME]:
+					templateData[EmailTemplateInputDataFields.EVENT_NAME],
+				[EmailTemplateInputDataFields.SUBJECT]:
+					templateData[EmailTemplateInputDataFields.SUBJECT],
+				[EmailTemplateInputDataFields.TEMPLATE]: html.trim(),
+				[EmailTemplateInputDataFields.DESIGN]: JSON.stringify(design),
+			};
+			let res: any = {};
+			if (
+				view === UpdateModalViews.Edit &&
+				selectedTemplate?.[EmailTemplateInputDataFields.ID]
+			) {
+				res = await client
+					.mutation(EditEmailTemplate, {
+						params: {
+							...params,
+							id: selectedTemplate[EmailTemplateInputDataFields.ID],
+						},
+					})
+					.toPromise();
+			} else {
+				res = await client.mutation(AddEmailTemplate, { params }).toPromise();
+			}
+			setLoading(false);
+			if (res.error) {
+				toast({
+					title: capitalizeFirstLetter(res.error.message),
+					isClosable: true,
+					status: 'error',
+					position: 'bottom-right',
+				});
+			} else if (
+				res.data?._add_email_template ||
+				res.data?._update_email_template
+			) {
+				toast({
+					title: capitalizeFirstLetter(
+						res.data?._add_email_template?.message ||
+							res.data?._update_email_template?.message
+					),
+					isClosable: true,
+					status: 'success',
+					position: 'bottom-right',
+				});
+				setTemplateData({
+					...initTemplateData,
+				});
+				setValidator({ ...initTemplateValidatorData });
+				fetchEmailTemplatesData();
+			}
+			view === UpdateModalViews.ADD && onClose();
+		});
+	};
+	const resetData = () => {
+		if (selectedTemplate) {
+			setTemplateData(selectedTemplate);
+		} else {
+			setTemplateData({ ...initTemplateData });
+		}
+	};
+	useEffect(() => {
+		if (
+			isOpen &&
+			view === UpdateModalViews.Edit &&
+			selectedTemplate &&
+			Object.keys(selectedTemplate || {}).length
+		) {
+			const { id, created_at, template, design, ...rest } = selectedTemplate;
+			setTemplateData(rest);
+		}
+	}, [isOpen]);
+	useEffect(() => {
+		const updatedTemplateVariables = Object.entries(
+			emailTemplateVariables
+		).reduce((acc, [key, val]): any => {
+			if (
+				(templateData[EmailTemplateInputDataFields.EVENT_NAME] !==
+					emailTemplateEventNames['Verify Otp'] &&
+					val === emailTemplateVariables.otp) ||
+				(templateData[EmailTemplateInputDataFields.EVENT_NAME] ===
+					emailTemplateEventNames['Verify Otp'] &&
+					val === emailTemplateVariables.verification_url)
+			) {
+				return acc;
+			}
+			return [
+				...acc,
+				{
+					text: key,
+					value: val.value,
+					description: val.description,
+				},
+			];
+		}, []);
+		setTemplateVariables(updatedTemplateVariables);
+	}, [templateData[EmailTemplateInputDataFields.EVENT_NAME]]);
+
+	return (
+		<>
+			{view === UpdateModalViews.ADD ? (
+				<Button
+					leftIcon={<FaPlus />}
+					colorScheme="blue"
+					variant="solid"
+					onClick={onOpen}
+					isDisabled={false}
+					size="sm"
+				>
+					<Center h="100%">Add Template</Center>{' '}
+				</Button>
+			) : (
+				<MenuItem onClick={onOpen}>Edit</MenuItem>
+			)}
+			<Modal
+				isOpen={isOpen}
+				onClose={() => {
+					resetData();
+					onClose();
+				}}
+				size="6xl"
+			>
+				<ModalOverlay />
+				<ModalContent>
+					<ModalHeader>
+						{view === UpdateModalViews.ADD
+							? 'Add New Email Template'
+							: 'Edit Email Template'}
+					</ModalHeader>
+					<ModalCloseButton />
+					<ModalBody>
+						<Flex
+							flexDirection="column"
+							border="1px"
+							borderRadius="md"
+							borderColor="gray.200"
+							p="5"
+						>
+							<Alert
+								status="info"
+								onClick={() =>
+									setIsDynamicVariableInfoOpen(!isDynamicVariableInfoOpen)
+								}
+								borderRadius="5"
+								marginBottom={5}
+								cursor="pointer"
+								fontSize="sm"
+							>
+								<AlertIcon />
+								<Flex
+									width="100%"
+									justifyContent="space-between"
+									alignItems="center"
+								>
+									<Box width="85%">
+										<b>Note:</b> You can add set of dynamic variables to subject
+										and email body. Click here to see the set of dynamic
+										variables.
+									</Box>
+									{isDynamicVariableInfoOpen ? <FaAngleUp /> : <FaAngleDown />}
+								</Flex>
+							</Alert>
+							<Collapse
+								style={{
+									width: '100%',
+								}}
+								in={isDynamicVariableInfoOpen}
+							>
+								<TableContainer
+									background="gray.100"
+									borderRadius={5}
+									height={200}
+									width="100%"
+									overflowY="auto"
+									overflowWrap="break-word"
+								>
+									<Table variant="simple">
+										<Thead>
+											<Tr>
+												<Th>Variable</Th>
+												<Th>Description</Th>
+											</Tr>
+										</Thead>
+										<Tbody>
+											{templateVariables.map((i) => (
+												<Tr key={i.text}>
+													<Td>
+														<Code fontSize="sm">{`{{.${i.text}}}`}</Code>
+													</Td>
+													<Td>
+														<Text
+															size="sm"
+															fontSize="sm"
+															overflowWrap="break-word"
+															width="100%"
+														>
+															{i.description}
+														</Text>
+													</Td>
+												</Tr>
+											))}
+										</Tbody>
+									</Table>
+								</TableContainer>
+							</Collapse>
+							<Flex
+								width="100%"
+								justifyContent="space-between"
+								alignItems="center"
+								marginBottom="2%"
+							>
+								<Flex flex="1">Event Name</Flex>
+								<Flex flex="3">
+									<Select
+										size="md"
+										value={
+											templateData[EmailTemplateInputDataFields.EVENT_NAME]
+										}
+										onChange={(e) =>
+											inputChangehandler(
+												EmailTemplateInputDataFields.EVENT_NAME,
+												e.currentTarget.value
+											)
+										}
+									>
+										{Object.entries(emailTemplateEventNames).map(
+											([key, value]: any) => (
+												<option value={value} key={key}>
+													{key}
+												</option>
+											)
+										)}
+									</Select>
+								</Flex>
+							</Flex>
+							<Flex
+								width="100%"
+								justifyContent="start"
+								alignItems="center"
+								marginBottom="2%"
+							>
+								<Flex flex="1">Subject</Flex>
+								<Flex flex="3">
+									<InputGroup size="md">
+										<Input
+											pr="4.5rem"
+											type="text"
+											placeholder="Subject Line"
+											value={templateData[EmailTemplateInputDataFields.SUBJECT]}
+											isInvalid={
+												!validator[EmailTemplateInputDataFields.SUBJECT]
+											}
+											onChange={(e) =>
+												inputChangehandler(
+													EmailTemplateInputDataFields.SUBJECT,
+													e.currentTarget.value
+												)
+											}
+										/>
+									</InputGroup>
+								</Flex>
+							</Flex>
+							<Flex
+								width="100%"
+								justifyContent="flex-start"
+								alignItems="center"
+								marginBottom="2%"
+							>
+								Template Body
+							</Flex>
+							<Flex
+								width="100%"
+								justifyContent="flex-start"
+								alignItems="center"
+								border="1px solid"
+								borderColor="gray.200"
+							>
+								<EmailEditor ref={emailEditorRef} onReady={onReady} />
+							</Flex>
+						</Flex>
+					</ModalBody>
+					<ModalFooter>
+						<Button
+							variant="outline"
+							onClick={resetData}
+							isDisabled={loading}
+							marginRight="5"
+						>
+							Reset
+						</Button>
+						<Button
+							colorScheme="blue"
+							variant="solid"
+							isLoading={loading}
+							onClick={saveData}
+							isDisabled={!validateData()}
+						>
+							<Center h="100%" pt="5%">
+								Save
+							</Center>
+						</Button>
+					</ModalFooter>
+				</ModalContent>
+			</Modal>
+		</>
+	);
+};
+
+export default UpdateEmailTemplate;

dashboard/src/components/UpdateWebhookModal.tsx

@@ -2,6 +2,8 @@ import React, { useEffect, useState } from 'react';
 import {
 	Button,
 	Center,
+	Code,
+	Collapse,
 	Flex,
 	Input,
 	InputGroup,
@@ -19,20 +21,33 @@ import {
 	Text,
 	useDisclosure,
 	useToast,
+	Alert,
+	AlertIcon,
+	Divider,
 } from '@chakra-ui/react';
-import { FaMinusCircle, FaPlus } from 'react-icons/fa';
+import {
+	FaAngleDown,
+	FaAngleUp,
+	FaMinusCircle,
+	FaPlus,
+	FaRegClone,
+} from 'react-icons/fa';
 import { useClient } from 'urql';
 import {
 	webhookEventNames,
 	ArrayInputOperations,
 	WebhookInputDataFields,
 	WebhookInputHeaderFields,
-	UpdateWebhookModalViews,
+	UpdateModalViews,
 	webhookVerifiedStatus,
+	webhookPayloadExample,
 } from '../constants';
-import { capitalizeFirstLetter, validateURI } from '../utils';
+import {
+	capitalizeFirstLetter,
+	copyTextToClipboard,
+	validateURI,
+} from '../utils';
 import { AddWebhook, EditWebhook, TestEndpoint } from '../graphql/mutation';
-import { rest } from 'lodash';
 import { BiCheckCircle, BiError, BiErrorCircle } from 'react-icons/bi';
 
 interface headersDataType {
@@ -54,7 +69,7 @@ interface selecetdWebhookDataTypes {
 }
 
 interface UpdateWebhookModalInputPropTypes {
-	view: UpdateWebhookModalViews;
+	view: UpdateModalViews;
 	selectedWebhook?: selecetdWebhookDataTypes;
 	fetchWebookData: Function;
 }
@@ -82,7 +97,7 @@ interface validatorDataType {
 }
 
 const initWebhookData: webhookDataType = {
-	[WebhookInputDataFields.EVENT_NAME]: webhookEventNames.USER_LOGIN,
+	[WebhookInputDataFields.EVENT_NAME]: webhookEventNames['User login'],
 	[WebhookInputDataFields.ENDPOINT]: '',
 	[WebhookInputDataFields.ENABLED]: true,
 	[WebhookInputDataFields.HEADERS]: [{ ...initHeadersData }],
@@ -103,6 +118,7 @@ const UpdateWebhookModal = ({
 	const { isOpen, onOpen, onClose } = useDisclosure();
 	const [loading, setLoading] = useState<boolean>(false);
 	const [verifyingEndpoint, setVerifyingEndpoint] = useState<boolean>(false);
+	const [isShowingPayload, setIsShowingPayload] = useState<boolean>(false);
 	const [webhook, setWebhook] = useState<webhookDataType>({
 		...initWebhookData,
 	});
@@ -254,7 +270,7 @@ const UpdateWebhookModal = ({
 		const params = getParams();
 		let res: any = {};
 		if (
-			view === UpdateWebhookModalViews.Edit &&
+			view === UpdateModalViews.Edit &&
 			selectedWebhook?.[WebhookInputDataFields.ID]
 		) {
 			res = await client
@@ -292,12 +308,12 @@ const UpdateWebhookModal = ({
 			setValidator({ ...initWebhookValidatorData });
 			fetchWebookData();
 		}
-		view === UpdateWebhookModalViews.ADD && onClose();
+		view === UpdateModalViews.ADD && onClose();
 	};
 	useEffect(() => {
 		if (
 			isOpen &&
-			view === UpdateWebhookModalViews.Edit &&
+			view === UpdateModalViews.Edit &&
 			selectedWebhook &&
 			Object.keys(selectedWebhook || {}).length
 		) {
@@ -347,7 +363,7 @@ const UpdateWebhookModal = ({
 	};
 	return (
 		<>
-			{view === UpdateWebhookModalViews.ADD ? (
+			{view === UpdateModalViews.ADD ? (
 				<Button
 					leftIcon={<FaPlus />}
 					colorScheme="blue"
@@ -365,9 +381,7 @@ const UpdateWebhookModal = ({
 				<ModalOverlay />
 				<ModalContent>
 					<ModalHeader>
-						{view === UpdateWebhookModalViews.ADD
+						{view === UpdateModalViews.ADD ? 'Add New Webhook' : 'Edit Webhook'}
-							? 'Add New Webhook'
-							: 'Edit Webhook'}
 					</ModalHeader>
 					<ModalCloseButton />
 					<ModalBody>
@@ -457,11 +471,12 @@ const UpdateWebhookModal = ({
 									</Text>
 								</Flex>
 							</Flex>
+
 							<Flex
 								width="100%"
 								justifyContent="space-between"
 								alignItems="center"
-								marginBottom="2%"
+								marginBottom="5%"
 							>
 								<Flex>Headers</Flex>
 								<Flex>
@@ -478,7 +493,8 @@ const UpdateWebhookModal = ({
 									</Button>
 								</Flex>
 							</Flex>
-							<Flex flexDirection="column" maxH={220} overflowY="scroll">
+
+							<Flex flexDirection="column" maxH={220} overflowY="auto">
 								{webhook[WebhookInputDataFields.HEADERS]?.map(
 									(headerData, index) => (
 										<Flex
@@ -547,6 +563,54 @@ const UpdateWebhookModal = ({
 									)
 								)}
 							</Flex>
+							<Divider marginY={5} />
+
+							<Alert
+								status="info"
+								onClick={() => setIsShowingPayload(!isShowingPayload)}
+								borderRadius="5"
+								cursor="pointer"
+								fontSize="sm"
+							>
+								<AlertIcon />
+								<Flex
+									width="100%"
+									justifyContent="space-between"
+									alignItems="center"
+								>
+									Checkout the example payload
+									{isShowingPayload ? <FaAngleUp /> : <FaAngleDown />}
+								</Flex>
+							</Alert>
+							<Collapse
+								style={{
+									marginTop: 10,
+									width: '100%',
+								}}
+								in={isShowingPayload}
+							>
+								<Code
+									width="inherit"
+									borderRadius={5}
+									padding={2}
+									position="relative"
+								>
+									<pre style={{ overflow: 'auto' }}>
+										{webhookPayloadExample}
+									</pre>
+									{isShowingPayload && (
+										<Flex
+											position="absolute"
+											top={4}
+											right={4}
+											cursor="pointer"
+											onClick={() => copyTextToClipboard(webhookPayloadExample)}
+										>
+											<FaRegClone color="#bfbfbf" />
+										</Flex>
+									)}
+								</Code>
+							</Collapse>
 						</Flex>
 					</ModalBody>
 					<ModalFooter>

dashboard/src/constants.ts

@@ -68,6 +68,8 @@ export const SwitchInputType = {
 	DISABLE_SIGN_UP: 'DISABLE_SIGN_UP',
 	DISABLE_REDIS_FOR_ENV: 'DISABLE_REDIS_FOR_ENV',
 	DISABLE_STRONG_PASSWORD: 'DISABLE_STRONG_PASSWORD',
+	DISABLE_MULTI_FACTOR_AUTHENTICATION: 'DISABLE_MULTI_FACTOR_AUTHENTICATION',
+	ENFORCE_MULTI_FACTOR_AUTHENTICATION: 'ENFORCE_MULTI_FACTOR_AUTHENTICATION',
 };
 
 export const DateInputType = {
@@ -138,6 +140,8 @@ export interface envVarTypes {
 	DATABASE_TYPE: string;
 	DATABASE_URL: string;
 	ACCESS_TOKEN_EXPIRY_TIME: string;
+	DISABLE_MULTI_FACTOR_AUTHENTICATION: boolean;
+	ENFORCE_MULTI_FACTOR_AUTHENTICATION: boolean;
 }
 
 export const envSubViews = {
@@ -162,12 +166,21 @@ export enum WebhookInputDataFields {
 	HEADERS = 'headers',
 }
 
+export enum EmailTemplateInputDataFields {
+	ID = 'id',
+	EVENT_NAME = 'event_name',
+	SUBJECT = 'subject',
+	CREATED_AT = 'created_at',
+	TEMPLATE = 'template',
+	DESIGN = 'design',
+}
+
 export enum WebhookInputHeaderFields {
 	KEY = 'key',
 	VALUE = 'value',
 }
 
-export enum UpdateWebhookModalViews {
+export enum UpdateModalViews {
 	ADD = 'add',
 	Edit = 'edit',
 }
@@ -175,12 +188,21 @@ export enum UpdateWebhookModalViews {
 export const pageLimits: number[] = [5, 10, 15];
 
 export const webhookEventNames = {
-	USER_SIGNUP: 'user.signup',
+	'User signup': 'user.signup',
-	USER_CREATED: 'user.created',
+	'User created': 'user.created',
-	USER_LOGIN: 'user.login',
+	'User login': 'user.login',
-	USER_DELETED: 'user.deleted',
+	'User deleted': 'user.deleted',
-	USER_ACCESS_ENABLED: 'user.access_enabled',
+	'User access enabled': 'user.access_enabled',
-	USER_ACCESS_REVOKED: 'user.access_revoked',
+	'User access revoked': 'user.access_revoked',
+};
+
+export const emailTemplateEventNames = {
+	Signup: 'basic_auth_signup',
+	'Magic Link Login': 'magic_link_login',
+	'Update Email': 'update_email',
+	'Forgot Password': 'forgot_password',
+	'Verify Otp': 'verify_otp',
+	'Invite member': 'invite_member',
 };
 
 export enum webhookVerifiedStatus {
@@ -188,3 +210,117 @@ export enum webhookVerifiedStatus {
 	NOT_VERIFIED = 'not_verified',
 	PENDING = 'verification_pending',
 }
+
+export const emailTemplateVariables = {
+	'user.id': {
+		description: `User identifier`,
+		value: '{.user.id}}',
+	},
+	'user.email': {
+		description: 'User email address',
+		value: '{.user.email}}',
+	},
+	'user.given_name': {
+		description: `User first name`,
+		value: '{.user.given_name}}',
+	},
+	'user.family_name': {
+		description: `User last name`,
+		value: '{.user.family_name}}',
+	},
+	'user.middle_name': {
+		description: `Middle name of user`,
+		value: '{.user.middle_name}}',
+	},
+	'user.nickname': {
+		description: `Nick name of user`,
+		value: '{.user.nickname}}',
+	},
+	'user.preferred_username': {
+		description: `Username, by default it is email`,
+		value: '{.user.preferred_username}}',
+	},
+	'user.signup_methods': {
+		description: `Comma separated list of methods using which user has signed up`,
+		value: '{.user.signup_methods}}',
+	},
+	'user.email_verified': {
+		description: `Whether email is verified or not`,
+		value: '{.user.email_verified}}',
+	},
+	'user.picture': {
+		description: `URL of the user profile picture`,
+		value: '{.user.picture}}',
+	},
+	'user.roles': {
+		description: `Comma separated list of roles assigned to user`,
+		value: '{.user.roles}}',
+	},
+	'user.gender': {
+		description: `Gender of user`,
+		value: '{.user.gender}}',
+	},
+	'user.birthdate': {
+		description: `BirthDate of user`,
+		value: '{.user.birthdate}}',
+	},
+	'user.phone_number': {
+		description: `Phone number of user`,
+		value: '{.user.phone_number}}',
+	},
+	'user.phone_number_verified': {
+		description: `Whether phone number is verified or not`,
+		value: '{.user.phone_number_verified}}',
+	},
+	'user.created_at': {
+		description: `User created at time`,
+		value: '{.user.created_at}}',
+	},
+	'user.updated_at': {
+		description: `Last updated time at user`,
+		value: '{.user.updated_at}}',
+	},
+	'organization.name': {
+		description: `Organization name`,
+		value: '{.organization.name}}',
+	},
+	'organization.logo': {
+		description: `Organization logo`,
+		value: '{.organization.logo}}',
+	},
+	verification_url: {
+		description: `Verification URL in case of events other than verify otp`,
+		value: '{.verification_url}}',
+	},
+	otp: {
+		description: `OTP sent during login with Multi factor authentication`,
+		value: '{.otp}}',
+	},
+};
+
+export const webhookPayloadExample: string = `{
+	"event_name":"user.login",
+	"user":{
+	   "birthdate":null,
+	   "created_at":1657524721,
+	   "email":"lakhan.m.samani@gmail.com",
+	   "email_verified":true,
+	   "family_name":"Samani",
+	   "gender":null,
+	   "given_name":"Lakhan",
+	   "id":"466d0b31-1b87-420e-bea5-09d05d79c586",
+	   "middle_name":null,
+	   "nickname":null,
+	   "phone_number":null,
+	   "phone_number_verified":false,
+	   "picture":"https://lh3.googleusercontent.com/a-/AFdZucppvU6a2zIDkX0wvhhapVjT0ZMKDlYCkQDi3NxcUg=s96-c",
+	   "preferred_username":"lakhan.m.samani@gmail.com",
+	   "revoked_timestamp":null,
+	   "roles":[
+		  "user"
+	   ],
+	   "signup_methods":"google",
+	   "updated_at":1657526492
+	},
+	"auth_recipe":"google"
+ }`;

dashboard/src/graphql/mutation/index.ts

@@ -112,3 +112,27 @@ export const TestEndpoint = `
     }
   }
 `;
+
+export const AddEmailTemplate = `
+  mutation addEmailTemplate($params: AddEmailTemplateRequest!) {
+    _add_email_template(params: $params) {
+      message
+    }
+  }
+`;
+
+export const EditEmailTemplate = `
+  mutation editEmailTemplate($params: UpdateEmailTemplateRequest!) {
+    _update_email_template(params: $params) {
+      message
+    }
+  }
+`;
+
+export const DeleteEmailTemplate = `
+  mutation deleteEmailTemplate($params: DeleteEmailTemplateRequest!) {
+    _delete_email_template(params: $params) {
+      message
+    }
+  }
+`;

dashboard/src/graphql/queries/index.ts

@@ -18,48 +18,50 @@ export const AdminSessionQuery = `
 export const EnvVariablesQuery = `
   query {
     _env{
-      CLIENT_ID,
+      CLIENT_ID
-      CLIENT_SECRET,
+      CLIENT_SECRET
-	    GOOGLE_CLIENT_ID,
+      GOOGLE_CLIENT_ID
-      GOOGLE_CLIENT_SECRET,
+      GOOGLE_CLIENT_SECRET
-      GITHUB_CLIENT_ID,
+      GITHUB_CLIENT_ID
-      GITHUB_CLIENT_SECRET,
+      GITHUB_CLIENT_SECRET
-      FACEBOOK_CLIENT_ID,
+      FACEBOOK_CLIENT_ID
-      FACEBOOK_CLIENT_SECRET,
+      FACEBOOK_CLIENT_SECRET
-      LINKEDIN_CLIENT_ID,
+      LINKEDIN_CLIENT_ID
-      LINKEDIN_CLIENT_SECRET,
+      LINKEDIN_CLIENT_SECRET
-      APPLE_CLIENT_ID,
+      APPLE_CLIENT_ID
-      APPLE_CLIENT_SECRET,
+      APPLE_CLIENT_SECRET
-      DEFAULT_ROLES,
+      DEFAULT_ROLES
-      PROTECTED_ROLES,
+      PROTECTED_ROLES
-      ROLES,
+      ROLES
-      JWT_TYPE,
+      JWT_TYPE
-      JWT_SECRET,
+      JWT_SECRET
-      JWT_ROLE_CLAIM,
+      JWT_ROLE_CLAIM
-      JWT_PRIVATE_KEY,
+      JWT_PRIVATE_KEY
-      JWT_PUBLIC_KEY,
+      JWT_PUBLIC_KEY
-      REDIS_URL,
+      REDIS_URL
-      SMTP_HOST,
+      SMTP_HOST
-      SMTP_PORT,
+      SMTP_PORT
-      SMTP_USERNAME,
+      SMTP_USERNAME
-      SMTP_PASSWORD,
+      SMTP_PASSWORD
-      SENDER_EMAIL,
+      SENDER_EMAIL
-      ALLOWED_ORIGINS,
+      ALLOWED_ORIGINS
-      ORGANIZATION_NAME,
+      ORGANIZATION_NAME
-      ORGANIZATION_LOGO,
+      ORGANIZATION_LOGO
-      ADMIN_SECRET,
+      ADMIN_SECRET
-      DISABLE_LOGIN_PAGE,
+      DISABLE_LOGIN_PAGE
-      DISABLE_MAGIC_LINK_LOGIN,
+      DISABLE_MAGIC_LINK_LOGIN
-      DISABLE_EMAIL_VERIFICATION,
+      DISABLE_EMAIL_VERIFICATION
-      DISABLE_BASIC_AUTHENTICATION,
+      DISABLE_BASIC_AUTHENTICATION
-      DISABLE_SIGN_UP,
+      DISABLE_SIGN_UP
-      DISABLE_STRONG_PASSWORD,
+      DISABLE_STRONG_PASSWORD
-      DISABLE_REDIS_FOR_ENV,
+      DISABLE_REDIS_FOR_ENV
-      CUSTOM_ACCESS_TOKEN_SCRIPT,
+      CUSTOM_ACCESS_TOKEN_SCRIPT
-      DATABASE_NAME,
+      DATABASE_NAME
-      DATABASE_TYPE,
+      DATABASE_TYPE
-      DATABASE_URL,
+      DATABASE_URL
-      ACCESS_TOKEN_EXPIRY_TIME,
+      ACCESS_TOKEN_EXPIRY_TIME
+      DISABLE_MULTI_FACTOR_AUTHENTICATION
+      ENFORCE_MULTI_FACTOR_AUTHENTICATION
     }
   }
 `;
@@ -123,6 +125,27 @@ export const WebhooksDataQuery = `
   }
 `;
 
+export const EmailTemplatesQuery = `
+  query getEmailTemplates($params: PaginatedInput!) {
+    _email_templates(params: $params) {
+      email_templates {
+        id
+        event_name
+        subject
+        created_at
+        template
+        design
+      }
+      pagination {
+        limit
+        page
+        offset
+        total
+      }
+    }
+  }
+`;
+
 export const WebhookLogsQuery = `
   query getWebhookLogs($params: ListWebhookLogRequest!) {
     _webhook_logs(params: $params) {

dashboard/src/pages/EmailTemplates.tsx

@@ -0,0 +1,348 @@
+import React, { useEffect, useState } from 'react';
+import { useClient } from 'urql';
+import {
+	Box,
+	Button,
+	Center,
+	Flex,
+	IconButton,
+	Menu,
+	MenuButton,
+	MenuList,
+	NumberDecrementStepper,
+	NumberIncrementStepper,
+	NumberInput,
+	NumberInputField,
+	NumberInputStepper,
+	Select,
+	Spinner,
+	Table,
+	TableCaption,
+	Tbody,
+	Td,
+	Text,
+	Th,
+	Thead,
+	Tooltip,
+	Tr,
+} from '@chakra-ui/react';
+import {
+	FaAngleDoubleLeft,
+	FaAngleDoubleRight,
+	FaAngleDown,
+	FaAngleLeft,
+	FaAngleRight,
+	FaExclamationCircle,
+} from 'react-icons/fa';
+import UpdateEmailTemplateModal from '../components/UpdateEmailTemplateModal';
+import {
+	pageLimits,
+	UpdateModalViews,
+	EmailTemplateInputDataFields,
+} from '../constants';
+import { EmailTemplatesQuery } from '../graphql/queries';
+import dayjs from 'dayjs';
+import DeleteEmailTemplateModal from '../components/DeleteEmailTemplateModal';
+
+interface paginationPropTypes {
+	limit: number;
+	page: number;
+	offset: number;
+	total: number;
+	maxPages: number;
+}
+
+interface EmailTemplateDataType {
+	[EmailTemplateInputDataFields.ID]: string;
+	[EmailTemplateInputDataFields.EVENT_NAME]: string;
+	[EmailTemplateInputDataFields.SUBJECT]: string;
+	[EmailTemplateInputDataFields.CREATED_AT]: number;
+	[EmailTemplateInputDataFields.TEMPLATE]: string;
+	[EmailTemplateInputDataFields.DESIGN]: string;
+}
+
+const EmailTemplates = () => {
+	const client = useClient();
+	const [loading, setLoading] = useState<boolean>(false);
+	const [emailTemplatesData, setEmailTemplatesData] = useState<
+		EmailTemplateDataType[]
+	>([]);
+	const [paginationProps, setPaginationProps] = useState<paginationPropTypes>({
+		limit: 5,
+		page: 1,
+		offset: 0,
+		total: 0,
+		maxPages: 1,
+	});
+	const getMaxPages = (pagination: paginationPropTypes) => {
+		const { limit, total } = pagination;
+		if (total > 1) {
+			return total % limit === 0
+				? total / limit
+				: parseInt(`${total / limit}`) + 1;
+		} else return 1;
+	};
+	const fetchEmailTemplatesData = async () => {
+		setLoading(true);
+		const res = await client
+			.query(EmailTemplatesQuery, {
+				params: {
+					pagination: {
+						limit: paginationProps.limit,
+						page: paginationProps.page,
+					},
+				},
+			})
+			.toPromise();
+		if (res.data?._email_templates) {
+			const { pagination, email_templates: emailTemplates } =
+				res.data?._email_templates;
+			const maxPages = getMaxPages(pagination);
+			if (emailTemplates?.length) {
+				setEmailTemplatesData(emailTemplates);
+				setPaginationProps({ ...paginationProps, ...pagination, maxPages });
+			} else {
+				if (paginationProps.page !== 1) {
+					setPaginationProps({
+						...paginationProps,
+						...pagination,
+						maxPages,
+						page: 1,
+					});
+				}
+			}
+		}
+		setLoading(false);
+	};
+	const paginationHandler = (value: Record<string, number>) => {
+		setPaginationProps({ ...paginationProps, ...value });
+	};
+	useEffect(() => {
+		fetchEmailTemplatesData();
+	}, [paginationProps.page, paginationProps.limit]);
+	return (
+		<Box m="5" py="5" px="10" bg="white" rounded="md">
+			<Flex margin="2% 0" justifyContent="space-between" alignItems="center">
+				<Text fontSize="md" fontWeight="bold">
+					Email Templates
+				</Text>
+				<UpdateEmailTemplateModal
+					view={UpdateModalViews.ADD}
+					fetchEmailTemplatesData={fetchEmailTemplatesData}
+				/>
+			</Flex>
+			{!loading ? (
+				emailTemplatesData.length ? (
+					<Table variant="simple">
+						<Thead>
+							<Tr>
+								<Th>Event Name</Th>
+								<Th>Subject</Th>
+								<Th>Created At</Th>
+								<Th>Actions</Th>
+							</Tr>
+						</Thead>
+						<Tbody>
+							{emailTemplatesData.map((templateData: EmailTemplateDataType) => (
+								<Tr
+									key={templateData[EmailTemplateInputDataFields.ID]}
+									style={{ fontSize: 14 }}
+								>
+									<Td maxW="300">
+										{templateData[EmailTemplateInputDataFields.EVENT_NAME]}
+									</Td>
+									<Td>{templateData[EmailTemplateInputDataFields.SUBJECT]}</Td>
+									<Td>
+										{dayjs(templateData.created_at * 1000).format(
+											'MMM DD, YYYY'
+										)}
+									</Td>
+									<Td>
+										<Menu>
+											<MenuButton as={Button} variant="unstyled" size="sm">
+												<Flex
+													justifyContent="space-between"
+													alignItems="center"
+												>
+													<Text fontSize="sm" fontWeight="light">
+														Menu
+													</Text>
+													<FaAngleDown style={{ marginLeft: 10 }} />
+												</Flex>
+											</MenuButton>
+											<MenuList>
+												<UpdateEmailTemplateModal
+													view={UpdateModalViews.Edit}
+													selectedTemplate={templateData}
+													fetchEmailTemplatesData={fetchEmailTemplatesData}
+												/>
+												<DeleteEmailTemplateModal
+													emailTemplateId={
+														templateData[EmailTemplateInputDataFields.ID]
+													}
+													eventName={
+														templateData[
+															EmailTemplateInputDataFields.EVENT_NAME
+														]
+													}
+													fetchEmailTemplatesData={fetchEmailTemplatesData}
+												/>
+											</MenuList>
+										</Menu>
+									</Td>
+								</Tr>
+							))}
+						</Tbody>
+						{(paginationProps.maxPages > 1 || paginationProps.total >= 5) && (
+							<TableCaption>
+								<Flex
+									justifyContent="space-between"
+									alignItems="center"
+									m="2% 0"
+								>
+									<Flex flex="1">
+										<Tooltip label="First Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: 1,
+													})
+												}
+												isDisabled={paginationProps.page <= 1}
+												mr={4}
+												icon={<FaAngleDoubleLeft />}
+											/>
+										</Tooltip>
+										<Tooltip label="Previous Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: paginationProps.page - 1,
+													})
+												}
+												isDisabled={paginationProps.page <= 1}
+												icon={<FaAngleLeft />}
+											/>
+										</Tooltip>
+									</Flex>
+									<Flex
+										flex="8"
+										justifyContent="space-evenly"
+										alignItems="center"
+									>
+										<Text mr={8}>
+											Page{' '}
+											<Text fontWeight="bold" as="span">
+												{paginationProps.page}
+											</Text>{' '}
+											of{' '}
+											<Text fontWeight="bold" as="span">
+												{paginationProps.maxPages}
+											</Text>
+										</Text>
+										<Flex alignItems="center">
+											<Text flexShrink="0">Go to page:</Text>{' '}
+											<NumberInput
+												ml={2}
+												mr={8}
+												w={28}
+												min={1}
+												max={paginationProps.maxPages}
+												onChange={(value) =>
+													paginationHandler({
+														page: parseInt(value),
+													})
+												}
+												value={paginationProps.page}
+											>
+												<NumberInputField />
+												<NumberInputStepper>
+													<NumberIncrementStepper />
+													<NumberDecrementStepper />
+												</NumberInputStepper>
+											</NumberInput>
+										</Flex>
+										<Select
+											w={32}
+											value={paginationProps.limit}
+											onChange={(e) =>
+												paginationHandler({
+													page: 1,
+													limit: parseInt(e.target.value),
+												})
+											}
+										>
+											{pageLimits.map((pageSize) => (
+												<option key={pageSize} value={pageSize}>
+													Show {pageSize}
+												</option>
+											))}
+										</Select>
+									</Flex>
+									<Flex flex="1">
+										<Tooltip label="Next Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: paginationProps.page + 1,
+													})
+												}
+												isDisabled={
+													paginationProps.page >= paginationProps.maxPages
+												}
+												icon={<FaAngleRight />}
+											/>
+										</Tooltip>
+										<Tooltip label="Last Page">
+											<IconButton
+												aria-label="icon button"
+												onClick={() =>
+													paginationHandler({
+														page: paginationProps.maxPages,
+													})
+												}
+												isDisabled={
+													paginationProps.page >= paginationProps.maxPages
+												}
+												ml={4}
+												icon={<FaAngleDoubleRight />}
+											/>
+										</Tooltip>
+									</Flex>
+								</Flex>
+							</TableCaption>
+						)}
+					</Table>
+				) : (
+					<Flex
+						flexDirection="column"
+						minH="25vh"
+						justifyContent="center"
+						alignItems="center"
+					>
+						<Center w="50px" marginRight="1.5%">
+							<FaExclamationCircle style={{ color: '#f0f0f0', fontSize: 70 }} />
+						</Center>
+						<Text
+							fontSize="2xl"
+							paddingRight="1%"
+							fontWeight="bold"
+							color="#d9d9d9"
+						>
+							No Data
+						</Text>
+					</Flex>
+				)
+			) : (
+				<Center minH="25vh">
+					<Spinner />
+				</Center>
+			)}
+		</Box>
+	);
+};
+
+export default EmailTemplates;

dashboard/src/pages/Environment.tsx

@@ -80,6 +80,8 @@ const Environment = () => {
 		DATABASE_TYPE: '',
 		DATABASE_URL: '',
 		ACCESS_TOKEN_EXPIRY_TIME: '',
+		DISABLE_MULTI_FACTOR_AUTHENTICATION: false,
+		ENFORCE_MULTI_FACTOR_AUTHENTICATION: false,
 	});
 
 	const [fieldVisibility, setFieldVisibility] = React.useState<

dashboard/src/pages/Users.tsx

@@ -302,7 +302,11 @@ export default function Users() {
 								<Th>Roles</Th>
 								<Th>Verified</Th>
 								<Th>Access</Th>
-								<Th>MFA</Th>
+								<Th>
+									<Tooltip label="MultiFactor Authentication Enabled / Disabled">
+										MFA
+									</Tooltip>
+								</Th>
 								<Th>Actions</Th>
 							</Tr>
 						</Thead>
@@ -404,13 +408,13 @@ export default function Users() {
 														<MenuItem
 															onClick={() => multiFactorAuthUpdateHandler(user)}
 														>
-															Disable MFA
+															Disable MultiFactor Authentication
 														</MenuItem>
 													) : (
 														<MenuItem
 															onClick={() => multiFactorAuthUpdateHandler(user)}
 														>
-															Enable MFA
+															Enable MultiFactor Authentication
 														</MenuItem>
 													)}
 												</MenuList>

dashboard/src/pages/Webhooks.tsx

@@ -8,7 +8,6 @@ import {
 	IconButton,
 	Menu,
 	MenuButton,
-	MenuItem,
 	MenuList,
 	NumberDecrementStepper,
 	NumberIncrementStepper,
@@ -40,7 +39,7 @@ import UpdateWebhookModal from '../components/UpdateWebhookModal';
 import {
 	pageLimits,
 	WebhookInputDataFields,
-	UpdateWebhookModalViews,
+	UpdateModalViews,
 } from '../constants';
 import { WebhooksDataQuery } from '../graphql/queries';
 import DeleteWebhookModal from '../components/DeleteWebhookModal';
@@ -125,7 +124,7 @@ const Webhooks = () => {
 					Webhooks
 				</Text>
 				<UpdateWebhookModal
-					view={UpdateWebhookModalViews.ADD}
+					view={UpdateModalViews.ADD}
 					fetchWebookData={fetchWebookData}
 				/>
 			</Flex>
@@ -196,7 +195,7 @@ const Webhooks = () => {
 											</MenuButton>
 											<MenuList>
 												<UpdateWebhookModal
-													view={UpdateWebhookModalViews.Edit}
+													view={UpdateModalViews.Edit}
 													selectedWebhook={webhook}
 													fetchWebookData={fetchWebookData}
 												/>

dashboard/src/routes/index.tsx

@@ -3,6 +3,7 @@ import { Outlet, Route, Routes } from 'react-router-dom';
 
 import { useAuthContext } from '../contexts/AuthContext';
 import { DashboardLayout } from '../layouts/DashboardLayout';
+import EmailTemplates from '../pages/EmailTemplates';
 
 const Auth = lazy(() => import('../pages/Auth'));
 const Environment = lazy(() => import('../pages/Environment'));
@@ -31,6 +32,7 @@ export const AppRoutes = () => {
 							</Route>
 							<Route path="users" element={<Users />} />
 							<Route path="webhooks" element={<Webhooks />} />
+							<Route path="email-templates" element={<EmailTemplates />} />
 							<Route path="*" element={<Home />} />
 						</Route>
 					</Routes>

server/constants/verification_types.go

@@ -9,4 +9,8 @@ const (
 	VerificationTypeUpdateEmail = "update_email"
 	// VerificationTypeForgotPassword is the forgot_password verification type
 	VerificationTypeForgotPassword = "forgot_password"
+	// VerificationTypeInviteMember is the invite_member verification type
+	VerificationTypeInviteMember = "invite_member"
+	// VerificationTypeOTP is the otp verification type
+	VerificationTypeOTP = "verify_otp"
 )

server/db/models/email_templates.go

@@ -12,7 +12,9 @@ type EmailTemplate struct {
 	Key       string `json:"_key,omitempty" bson:"_key,omitempty" cql:"_key,omitempty"` // for arangodb
 	ID        string `gorm:"primaryKey;type:char(36)" json:"_id" bson:"_id" cql:"id"`
 	EventName string `gorm:"unique" json:"event_name" bson:"event_name" cql:"event_name"`
+	Subject   string `gorm:"type:text" json:"subject" bson:"subject" cql:"subject"`
 	Template  string `gorm:"type:text" json:"template" bson:"template" cql:"template"`
+	Design    string `gorm:"type:text" json:"design" bson:"design" cql:"design"`
 	CreatedAt int64  `json:"created_at" bson:"created_at" cql:"created_at"`
 	UpdatedAt int64  `json:"updated_at" bson:"updated_at" cql:"updated_at"`
 }
@@ -26,7 +28,9 @@ func (e *EmailTemplate) AsAPIEmailTemplate() *model.EmailTemplate {
 	return &model.EmailTemplate{
 		ID:        id,
 		EventName: e.EventName,
+		Subject:   e.Subject,
 		Template:  e.Template,
+		Design:    e.Design,
 		CreatedAt: refs.NewInt64Ref(e.CreatedAt),
 		UpdatedAt: refs.NewInt64Ref(e.UpdatedAt),
 	}

server/db/models/user.go

@@ -1,6 +1,7 @@
 package models
 
 import (
+	"encoding/json"
 	"strings"
 
 	"github.com/authorizerdev/authorizer/server/graph/model"
@@ -64,3 +65,10 @@ func (user *User) AsAPIUser() *model.User {
 		UpdatedAt:                refs.NewInt64Ref(user.UpdatedAt),
 	}
 }
+
+func (user *User) ToMap() map[string]interface{} {
+	res := map[string]interface{}{}
+	data, _ := json.Marshal(user) // Convert to a json string
+	json.Unmarshal(data, &res)    // Convert to a map
+	return res
+}

server/db/providers/cassandradb/email_template.go

@@ -29,7 +29,7 @@ func (p *provider) AddEmailTemplate(ctx context.Context, emailTemplate models.Em
 		return nil, fmt.Errorf("Email template with %s event_name already exists", emailTemplate.EventName)
 	}
 
-	insertQuery := fmt.Sprintf("INSERT INTO %s (id, event_name, template,  created_at, updated_at) VALUES ('%s', '%s', '%s', %d, %d)", KeySpace+"."+models.Collections.EmailTemplate, emailTemplate.ID, emailTemplate.EventName, emailTemplate.Template, emailTemplate.CreatedAt, emailTemplate.UpdatedAt)
+	insertQuery := fmt.Sprintf("INSERT INTO %s (id, event_name, subject, design, template,  created_at, updated_at) VALUES ('%s', '%s', '%s','%s','%s', %d, %d)", KeySpace+"."+models.Collections.EmailTemplate, emailTemplate.ID, emailTemplate.EventName, emailTemplate.Subject, emailTemplate.Design, emailTemplate.Template, emailTemplate.CreatedAt, emailTemplate.UpdatedAt)
 	err := p.db.Query(insertQuery).Exec()
 	if err != nil {
 		return nil, err
@@ -103,14 +103,14 @@ func (p *provider) ListEmailTemplate(ctx context.Context, pagination model.Pagin
 	// there is no offset in cassandra
 	// so we fetch till limit + offset
 	// and return the results from offset to limit
-	query := fmt.Sprintf("SELECT id, event_name, template, created_at, updated_at FROM %s LIMIT %d", KeySpace+"."+models.Collections.EmailTemplate, pagination.Limit+pagination.Offset)
+	query := fmt.Sprintf("SELECT id, event_name, subject, design, template, created_at, updated_at FROM %s LIMIT %d", KeySpace+"."+models.Collections.EmailTemplate, pagination.Limit+pagination.Offset)
 
 	scanner := p.db.Query(query).Iter().Scanner()
 	counter := int64(0)
 	for scanner.Next() {
 		if counter >= pagination.Offset {
 			var emailTemplate models.EmailTemplate
-			err := scanner.Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
+			err := scanner.Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Subject, &emailTemplate.Design, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
 			if err != nil {
 				return nil, err
 			}
@@ -128,8 +128,8 @@ func (p *provider) ListEmailTemplate(ctx context.Context, pagination model.Pagin
 // GetEmailTemplateByID to get EmailTemplate by id
 func (p *provider) GetEmailTemplateByID(ctx context.Context, emailTemplateID string) (*model.EmailTemplate, error) {
 	var emailTemplate models.EmailTemplate
-	query := fmt.Sprintf(`SELECT id, event_name, template, created_at, updated_at FROM %s WHERE id = '%s' LIMIT 1`, KeySpace+"."+models.Collections.EmailTemplate, emailTemplateID)
+	query := fmt.Sprintf(`SELECT id, event_name, subject, design, template, created_at, updated_at FROM %s WHERE id = '%s' LIMIT 1`, KeySpace+"."+models.Collections.EmailTemplate, emailTemplateID)
-	err := p.db.Query(query).Consistency(gocql.One).Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
+	err := p.db.Query(query).Consistency(gocql.One).Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Subject, &emailTemplate.Design, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
 	if err != nil {
 		return nil, err
 	}
@@ -139,8 +139,8 @@ func (p *provider) GetEmailTemplateByID(ctx context.Context, emailTemplateID str
 // GetEmailTemplateByEventName to get EmailTemplate by event_name
 func (p *provider) GetEmailTemplateByEventName(ctx context.Context, eventName string) (*model.EmailTemplate, error) {
 	var emailTemplate models.EmailTemplate
-	query := fmt.Sprintf(`SELECT id, event_name, template, created_at, updated_at FROM %s WHERE event_name = '%s' LIMIT 1 ALLOW FILTERING`, KeySpace+"."+models.Collections.EmailTemplate, eventName)
+	query := fmt.Sprintf(`SELECT id, event_name, subject, design, template, created_at, updated_at FROM %s WHERE event_name = '%s' LIMIT 1 ALLOW FILTERING`, KeySpace+"."+models.Collections.EmailTemplate, eventName)
-	err := p.db.Query(query).Consistency(gocql.One).Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
+	err := p.db.Query(query).Consistency(gocql.One).Scan(&emailTemplate.ID, &emailTemplate.EventName, &emailTemplate.Subject, &emailTemplate.Design, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
 	if err != nil {
 		return nil, err
 	}

server/db/providers/cassandradb/provider.go

@@ -223,6 +223,13 @@ func NewProvider() (*provider, error) {
 	if err != nil {
 		return nil, err
 	}
+	// add subject on email_templates table
+	emailTemplateAlterQuery := fmt.Sprintf(`ALTER TABLE %s.%s ADD (subject text, design text);`, KeySpace, models.Collections.EmailTemplate)
+	err = session.Query(emailTemplateAlterQuery).Exec()
+	if err != nil {
+		log.Debug("Failed to alter table as column exists: ", err)
+		// continue
+	}
 
 	otpCollection := fmt.Sprintf("CREATE TABLE IF NOT EXISTS %s.%s (id text, email text, otp text, expires_at bigint, updated_at bigint, created_at bigint, PRIMARY KEY (id))", KeySpace, models.Collections.OTP)
 	err = session.Query(otpCollection).Exec()

server/email/email.go

@@ -2,8 +2,8 @@ package email
 
 import (
 	"bytes"
+	"context"
 	"crypto/tls"
-	"encoding/json"
 	"strconv"
 	"text/template"
 
@@ -11,27 +11,75 @@ import (
 	gomail "gopkg.in/mail.v2"
 
 	"github.com/authorizerdev/authorizer/server/constants"
+	"github.com/authorizerdev/authorizer/server/db"
+	"github.com/authorizerdev/authorizer/server/graph/model"
 	"github.com/authorizerdev/authorizer/server/memorystore"
 )
 
-// addEmailTemplate is used to add html template in email body
+func getDefaultTemplate(event string) *model.EmailTemplate {
-func addEmailTemplate(a string, b map[string]interface{}, templateName string) string {
+	switch event {
-	tmpl, err := template.New(templateName).Parse(a)
+	case constants.VerificationTypeBasicAuthSignup, constants.VerificationTypeMagicLinkLogin, constants.VerificationTypeUpdateEmail:
-	if err != nil {
+		return &model.EmailTemplate{
-		output, _ := json.Marshal(b)
+			Subject:  emailVerificationSubject,
-		return string(output)
+			Template: emailVerificationTemplate,
+		}
+	case constants.VerificationTypeForgotPassword:
+		return &model.EmailTemplate{
+			Subject:  forgotPasswordSubject,
+			Template: forgotPasswordTemplate,
+		}
+	case constants.VerificationTypeInviteMember:
+		return &model.EmailTemplate{
+			Subject:  inviteEmailSubject,
+			Template: inviteEmailTemplate,
+		}
+	case constants.VerificationTypeOTP:
+		return &model.EmailTemplate{
+			Subject:  otpEmailSubject,
+			Template: otpEmailTemplate,
+		}
+	default:
+		return nil
 	}
-	buf := &bytes.Buffer{}
-	err = tmpl.Execute(buf, b)
-	if err != nil {
-		panic(err)
-	}
-	s := buf.String()
-	return s
 }
 
-// SendMail function to send mail
+func getEmailTemplate(event string, data map[string]interface{}) (*model.EmailTemplate, error) {
-func SendMail(to []string, Subject, bodyMessage string) error {
+	ctx := context.Background()
+	tmp, err := db.Provider.GetEmailTemplateByEventName(ctx, event)
+	if err != nil || tmp == nil {
+		tmp = getDefaultTemplate(event)
+	}
+
+	templ, err := template.New(event + "_template.tmpl").Parse(tmp.Template)
+	if err != nil {
+		return nil, err
+	}
+	buf := &bytes.Buffer{}
+	err = templ.Execute(buf, data)
+	if err != nil {
+		return nil, err
+	}
+	templateString := buf.String()
+
+	subject, err := template.New(event + "_subject.tmpl").Parse(tmp.Subject)
+	if err != nil {
+		return nil, err
+	}
+	buf = &bytes.Buffer{}
+	err = subject.Execute(buf, data)
+	if err != nil {
+		return nil, err
+	}
+	subjectString := buf.String()
+
+	return &model.EmailTemplate{
+		Template: templateString,
+		Subject:  subjectString,
+	}, nil
+}
+
+// SendEmail function to send mail
+func SendEmail(to []string, event string, data map[string]interface{}) error {
 	// dont trigger email sending in case of test
 	envKey, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyEnv)
 	if err != nil {
@@ -40,6 +88,13 @@ func SendMail(to []string, Subject, bodyMessage string) error {
 	if envKey == constants.TestEnv {
 		return nil
 	}
+
+	tmp, err := getEmailTemplate(event, data)
+	if err != nil {
+		log.Errorf("Failed to get event template: ", err)
+		return err
+	}
+
 	m := gomail.NewMessage()
 	senderEmail, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeySenderEmail)
 	if err != nil {
@@ -79,8 +134,8 @@ func SendMail(to []string, Subject, bodyMessage string) error {
 
 	m.SetHeader("From", senderEmail)
 	m.SetHeader("To", to...)
-	m.SetHeader("Subject", Subject)
+	m.SetHeader("Subject", tmp.Subject)
-	m.SetBody("text/html", bodyMessage)
+	m.SetBody("text/html", tmp.Template)
 	port, _ := strconv.Atoi(smtpPort)
 	d := gomail.NewDialer(smtpHost, port, smtpUsername, smtpPassword)
 	if !isProd {

server/email/email_verification.go

@@ -1,19 +1,8 @@
 package email
 
-import (
+const (
-	log "github.com/sirupsen/logrus"
+	emailVerificationSubject  = "Please verify your email"
-
+	emailVerificationTemplate = `
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/memorystore"
-)
-
-// SendVerificationMail to send verification email
-func SendVerificationMail(toEmail, token, hostname string) error {
-	// The receiver needs to be in slice as the receive supports multiple receiver
-	Receiver := []string{toEmail}
-
-	Subject := "Please verify your email"
-	message := `
 	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
         <head>
@@ -98,23 +87,4 @@ func SendVerificationMail(toEmail, token, hostname string) error {
         </body>
     </html>
 	`
-	data := make(map[string]interface{}, 3)
+)
-	var err error
-	data["org_logo"], err = memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyOrganizationLogo)
-	if err != nil {
-		return err
-	}
-	data["org_name"], err = memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyOrganizationName)
-	if err != nil {
-		return err
-	}
-	data["verification_url"] = hostname + "/verify_email?token=" + token
-	message = addEmailTemplate(message, data, "verify_email.tmpl")
-	// bodyMessage := sender.WriteHTMLEmail(Receiver, Subject, message)
-
-	err = SendMail(Receiver, Subject, message)
-	if err != nil {
-		log.Warn("error sending email: ", err)
-	}
-	return err
-}

server/email/forgot_password_email.go

@@ -1,28 +1,8 @@
 package email
 
-import (
+const (
-	"github.com/authorizerdev/authorizer/server/constants"
+	forgotPasswordSubject  = "Reset Password"
-	"github.com/authorizerdev/authorizer/server/memorystore"
+	forgotPasswordTemplate = `
-)
-
-// SendForgotPasswordMail to send forgot password email
-func SendForgotPasswordMail(toEmail, token, hostname string) error {
-	resetPasswordUrl, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyResetPasswordURL)
-	if err != nil {
-		return err
-	}
-	if resetPasswordUrl == "" {
-		if err := memorystore.Provider.UpdateEnvVariable(constants.EnvKeyResetPasswordURL, hostname+"/app/reset-password"); err != nil {
-			return err
-		}
-	}
-
-	// The receiver needs to be in slice as the receive supports multiple receiver
-	Receiver := []string{toEmail}
-
-	Subject := "Reset Password"
-
-	message := `
 	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
         <head>
@@ -73,13 +53,13 @@ func SendForgotPasswordMail(toEmail, token, hostname string) error {
                                                                                 <table width="100%%" cellspacing="0" cellpadding="0">
                                                                                     <tbody>
                                                                                         <tr>
-                                                                                            <td class="esd-block-image es-m-txt-c es-p5b" style="font-size:0;padding:10px" align="center"><a target="_blank" clicktracking="off"><img src="{{.org_logo}}" alt="icon" style="display: block;" title="icon" width="30"></a></td>
+                                                                                            <td class="esd-block-image es-m-txt-c es-p5b" style="font-size:0;padding:10px" align="center"><a target="_blank" clicktracking="off"><img src="{{.organization.logo}}" alt="icon" style="display: block;" title="icon" width="30"></a></td>
                                                                                         </tr>
                                                                                         
                                                                                         <tr style="background: rgb(249,250,251);padding: 10px;margin-bottom:10px;border-radius:5px;">
                                                                                             <td class="esd-block-text es-m-txt-c es-p15t" align="center" style="padding:10px;padding-bottom:30px;">
                                                                                                 <p>Hey there 👋</p>
-                                                                                                <p>We have received a request to reset password for email: <b>{{.org_name}}</b>. If this is correct, please reset the password clicking the button below.</p> <br/>
+                                                                                                <p>We have received a request to reset password for email: <b>{{.organization.name}}</b>. If this is correct, please reset the password clicking the button below.</p> <br/>
                                                                                                 <a clicktracking="off" href="{{.verification_url}}" class="es-button" target="_blank" style="text-decoration: none;padding:10px 15px;background-color: rgba(59,130,246,1);color: #fff;font-size: 1em;border-radius:5px;">Reset Password</a>
                                                                                             </td>
                                                                                         </tr>
@@ -106,18 +86,4 @@ func SendForgotPasswordMail(toEmail, token, hostname string) error {
         </body>
     </html>
 	`
-
+)
-	data := make(map[string]interface{}, 3)
-	data["org_logo"], err = memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyOrganizationLogo)
-	if err != nil {
-		return err
-	}
-	data["org_name"], err = memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyOrganizationName)
-	if err != nil {
-		return err
-	}
-	data["verification_url"] = resetPasswordUrl + "?token=" + token
-	message = addEmailTemplate(message, data, "reset_password_email.tmpl")
-
-	return SendMail(Receiver, Subject, message)
-}

server/email/invite_email.go

@@ -1,19 +1,8 @@
 package email
 
-import (
+const (
-	log "github.com/sirupsen/logrus"
+	inviteEmailSubject  = "Please accept the invitation"
-
+	inviteEmailTemplate = `
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/memorystore"
-)
-
-// InviteEmail to send invite email
-func InviteEmail(toEmail, token, verificationURL, redirectURI string) error {
-	// The receiver needs to be in slice as the receive supports multiple receiver
-	Receiver := []string{toEmail}
-
-	Subject := "Please accept the invitation"
-	message := `
 	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
         <head>
@@ -64,13 +53,13 @@ func InviteEmail(toEmail, token, verificationURL, redirectURI string) error {
                                                                                 <table width="100%%" cellspacing="0" cellpadding="0">
                                                                                     <tbody>
                                                                                         <tr>
-                                                                                            <td class="esd-block-image es-m-txt-c es-p5b" style="font-size:0;padding:10px" align="center"><a target="_blank" clicktracking="off"><img src="{{.org_logo}}" alt="icon" style="display: block;" title="icon" width="30"></a></td>
+                                                                                            <td class="esd-block-image es-m-txt-c es-p5b" style="font-size:0;padding:10px" align="center"><a target="_blank" clicktracking="off"><img src="{{.organization.logo}}" alt="icon" style="display: block;" title="icon" width="30"></a></td>
                                                                                         </tr>
                                                                                         
                                                                                         <tr style="background: rgb(249,250,251);padding: 10px;margin-bottom:10px;border-radius:5px;">
                                                                                             <td class="esd-block-text es-m-txt-c es-p15t" align="center" style="padding:10px;padding-bottom:30px;">
                                                                                                 <p>Hi there 👋</p>
-                                                                                                <p>Join us! You are invited to sign-up for <b>{{.org_name}}</b>. Please accept the invitation by clicking the button below.</p> <br/>
+                                                                                                <p>Join us! You are invited to sign-up for <b>{{.organization.name}}</b>. Please accept the invitation by clicking the button below.</p> <br/>
                                                                                                 <a 
                                                                                                 clicktracking="off" href="{{.verification_url}}" class="es-button" target="_blank" style="text-decoration: none;padding:10px 15px;background-color: rgba(59,130,246,1);color: #fff;font-size: 1em;border-radius:5px;">Get Started</a>
                                                                                             </td>
@@ -98,23 +87,4 @@ func InviteEmail(toEmail, token, verificationURL, redirectURI string) error {
         </body>
     </html>
 	`
-	data := make(map[string]interface{}, 3)
+)
-	var err error
-	data["org_logo"], err = memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyOrganizationLogo)
-	if err != nil {
-		return err
-	}
-	data["org_name"], err = memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyOrganizationName)
-	if err != nil {
-		return err
-	}
-	data["verification_url"] = verificationURL + "?token=" + token + "&redirect_uri=" + redirectURI
-	message = addEmailTemplate(message, data, "invite_email.tmpl")
-	// bodyMessage := sender.WriteHTMLEmail(Receiver, Subject, message)
-
-	err = SendMail(Receiver, Subject, message)
-	if err != nil {
-		log.Warn("error sending email: ", err)
-	}
-	return err
-}

server/email/otp.go

@@ -1,19 +1,8 @@
 package email
 
-import (
+const (
-	log "github.com/sirupsen/logrus"
+	otpEmailSubject  = "OTP for your multi factor authentication"
-
+	otpEmailTemplate = `
-	"github.com/authorizerdev/authorizer/server/constants"
-	"github.com/authorizerdev/authorizer/server/memorystore"
-)
-
-// SendOtpMail to send otp email
-func SendOtpMail(toEmail, otp string) error {
-	// The receiver needs to be in slice as the receive supports multiple receiver
-	Receiver := []string{toEmail}
-
-	Subject := "OTP for your multi factor authentication"
-	message := `
 	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office">
         <head>
@@ -64,13 +53,13 @@ func SendOtpMail(toEmail, otp string) error {
                                                                                 <table width="100%%" cellspacing="0" cellpadding="0">
                                                                                     <tbody>
                                                                                         <tr>
-                                                                                            <td class="esd-block-image es-m-txt-c es-p5b" style="font-size:0;padding:10px" align="center"><a target="_blank" clicktracking="off"><img src="{{.org_logo}}" alt="icon" style="display: block;" title="icon" width="30"></a></td>
+                                                                                            <td class="esd-block-image es-m-txt-c es-p5b" style="font-size:0;padding:10px" align="center"><a target="_blank" clicktracking="off"><img src="{{.organization.logo}}" alt="icon" style="display: block;" title="icon" width="30"></a></td>
                                                                                         </tr>
                                                                                         
                                                                                         <tr style="background: rgb(249,250,251);padding: 10px;margin-bottom:10px;border-radius:5px;">
                                                                                             <td class="esd-block-text es-m-txt-c es-p15t" align="center" style="padding:10px;padding-bottom:30px;">
                                                                                                 <p>Hey there 👋</p>
-                                                                                                <b>{{.otp}}</b> is your one time password (OTP) for accessing {{.org_name}}. Please keep your OTP confidential and it will expire in 1 minute.
+                                                                                                <b>{{.otp}}</b> is your one time password (OTP) for accessing {{.organization.name}}. Please keep your OTP confidential and it will expire in 1 minute.
                                                                                             </td>
                                                                                         </tr>
                                                                                     </tbody>
@@ -96,23 +85,4 @@ func SendOtpMail(toEmail, otp string) error {
         </body>
     </html>
 	`
-	data := make(map[string]interface{}, 3)
+)
-	var err error
-	data["org_logo"], err = memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyOrganizationLogo)
-	if err != nil {
-		return err
-	}
-	data["org_name"], err = memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyOrganizationName)
-	if err != nil {
-		return err
-	}
-	data["otp"] = otp
-	message = addEmailTemplate(message, data, "otp.tmpl")
-	// bodyMessage := sender.WriteHTMLEmail(Receiver, Subject, message)
-
-	err = SendMail(Receiver, Subject, message)
-	if err != nil {
-		log.Warn("error sending email: ", err)
-	}
-	return err
-}

server/email/utils.go

@@ -0,0 +1 @@
+package email

server/env/env.go

@@ -355,28 +355,28 @@ func InitAllEnv() error {
 	if val, ok := envData[constants.EnvKeyLinkedInClientID]; !ok || val == "" {
 		envData[constants.EnvKeyLinkedInClientID] = osLinkedInClientID
 	}
-	if osFacebookClientID != "" && envData[constants.EnvKeyLinkedInClientID] != osFacebookClientID {
+	if osLinkedInClientID != "" && envData[constants.EnvKeyLinkedInClientID] != osLinkedInClientID {
 		envData[constants.EnvKeyLinkedInClientID] = osLinkedInClientID
 	}
 
 	if val, ok := envData[constants.EnvKeyLinkedInClientSecret]; !ok || val == "" {
 		envData[constants.EnvKeyLinkedInClientSecret] = osLinkedInClientSecret
 	}
-	if osFacebookClientSecret != "" && envData[constants.EnvKeyLinkedInClientSecret] != osFacebookClientSecret {
+	if osLinkedInClientSecret != "" && envData[constants.EnvKeyLinkedInClientSecret] != osLinkedInClientSecret {
 		envData[constants.EnvKeyLinkedInClientSecret] = osLinkedInClientSecret
 	}
 
 	if val, ok := envData[constants.EnvKeyAppleClientID]; !ok || val == "" {
 		envData[constants.EnvKeyAppleClientID] = osAppleClientID
 	}
-	if osFacebookClientID != "" && envData[constants.EnvKeyAppleClientID] != osFacebookClientID {
+	if osAppleClientID != "" && envData[constants.EnvKeyAppleClientID] != osAppleClientID {
 		envData[constants.EnvKeyAppleClientID] = osAppleClientID
 	}
 
 	if val, ok := envData[constants.EnvKeyAppleClientSecret]; !ok || val == "" {
 		envData[constants.EnvKeyAppleClientSecret] = osAppleClientSecret
 	}
-	if osFacebookClientSecret != "" && envData[constants.EnvKeyAppleClientSecret] != osFacebookClientSecret {
+	if osAppleClientSecret != "" && envData[constants.EnvKeyAppleClientSecret] != osAppleClientSecret {
 		envData[constants.EnvKeyAppleClientSecret] = osAppleClientSecret
 	}
 

server/graph/generated/generated.go

@@ -55,8 +55,10 @@ type ComplexityRoot struct {
 
 	EmailTemplate struct {
 		CreatedAt func(childComplexity int) int
+		Design    func(childComplexity int) int
 		EventName func(childComplexity int) int
 		ID        func(childComplexity int) int
+		Subject   func(childComplexity int) int
 		Template  func(childComplexity int) int
 		UpdatedAt func(childComplexity int) int
 	}
@@ -405,6 +407,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.EmailTemplate.CreatedAt(childComplexity), true
 
+	case "EmailTemplate.design":
+		if e.complexity.EmailTemplate.Design == nil {
+			break
+		}
+
+		return e.complexity.EmailTemplate.Design(childComplexity), true
+
 	case "EmailTemplate.event_name":
 		if e.complexity.EmailTemplate.EventName == nil {
 			break
@@ -419,6 +428,13 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.EmailTemplate.ID(childComplexity), true
 
+	case "EmailTemplate.subject":
+		if e.complexity.EmailTemplate.Subject == nil {
+			break
+		}
+
+		return e.complexity.EmailTemplate.Subject(childComplexity), true
+
 	case "EmailTemplate.template":
 		if e.complexity.EmailTemplate.Template == nil {
 			break
@@ -433,7 +449,7 @@ func (e *executableSchema) Complexity(typeName, field string, childComplexity in
 
 		return e.complexity.EmailTemplate.UpdatedAt(childComplexity), true
 
-	case "EmailTemplates.EmailTemplates":
+	case "EmailTemplates.email_templates":
 		if e.complexity.EmailTemplates.EmailTemplates == nil {
 			break
 		}
@@ -2051,13 +2067,15 @@ type EmailTemplate {
 	id: ID!
 	event_name: String!
 	template: String!
+	design: String!
+	subject: String!
 	created_at: Int64
 	updated_at: Int64
 }
 
 type EmailTemplates {
 	pagination: Pagination!
-	EmailTemplates: [EmailTemplate!]!
+	email_templates: [EmailTemplate!]!
 }
 
 input UpdateEnvInput {
@@ -2271,13 +2289,17 @@ input TestEndpointRequest {
 
 input AddEmailTemplateRequest {
 	event_name: String!
+	subject: String!
 	template: String!
+	design: String!
 }
 
 input UpdateEmailTemplateRequest {
 	id: ID!
 	event_name: String
 	template: String
+	subject: String
+	design: String
 }
 
 input DeleteEmailTemplateRequest {
@@ -3259,6 +3281,76 @@ func (ec *executionContext) _EmailTemplate_template(ctx context.Context, field g
 	return ec.marshalNString2string(ctx, field.Selections, res)
 }
 
+func (ec *executionContext) _EmailTemplate_design(ctx context.Context, field graphql.CollectedField, obj *model.EmailTemplate) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:     "EmailTemplate",
+		Field:      field,
+		Args:       nil,
+		IsMethod:   false,
+		IsResolver: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Design, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
+func (ec *executionContext) _EmailTemplate_subject(ctx context.Context, field graphql.CollectedField, obj *model.EmailTemplate) (ret graphql.Marshaler) {
+	defer func() {
+		if r := recover(); r != nil {
+			ec.Error(ctx, ec.Recover(ctx, r))
+			ret = graphql.Null
+		}
+	}()
+	fc := &graphql.FieldContext{
+		Object:     "EmailTemplate",
+		Field:      field,
+		Args:       nil,
+		IsMethod:   false,
+		IsResolver: false,
+	}
+
+	ctx = graphql.WithFieldContext(ctx, fc)
+	resTmp, err := ec.ResolverMiddleware(ctx, func(rctx context.Context) (interface{}, error) {
+		ctx = rctx // use context from middleware stack in children
+		return obj.Subject, nil
+	})
+	if err != nil {
+		ec.Error(ctx, err)
+		return graphql.Null
+	}
+	if resTmp == nil {
+		if !graphql.HasFieldError(ctx, fc) {
+			ec.Errorf(ctx, "must not be null")
+		}
+		return graphql.Null
+	}
+	res := resTmp.(string)
+	fc.Result = res
+	return ec.marshalNString2string(ctx, field.Selections, res)
+}
+
 func (ec *executionContext) _EmailTemplate_created_at(ctx context.Context, field graphql.CollectedField, obj *model.EmailTemplate) (ret graphql.Marshaler) {
 	defer func() {
 		if r := recover(); r != nil {
@@ -3358,7 +3450,7 @@ func (ec *executionContext) _EmailTemplates_pagination(ctx context.Context, fiel
 	return ec.marshalNPagination2ᚖgithubᚗcomᚋauthorizerdevᚋauthorizerᚋserverᚋgraphᚋmodelᚐPagination(ctx, field.Selections, res)
 }
 
-func (ec *executionContext) _EmailTemplates_EmailTemplates(ctx context.Context, field graphql.CollectedField, obj *model.EmailTemplates) (ret graphql.Marshaler) {
+func (ec *executionContext) _EmailTemplates_email_templates(ctx context.Context, field graphql.CollectedField, obj *model.EmailTemplates) (ret graphql.Marshaler) {
 	defer func() {
 		if r := recover(); r != nil {
 			ec.Error(ctx, ec.Recover(ctx, r))
@@ -10459,6 +10551,14 @@ func (ec *executionContext) unmarshalInputAddEmailTemplateRequest(ctx context.Co
 			if err != nil {
 				return it, err
 			}
+		case "subject":
+			var err error
+
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("subject"))
+			it.Subject, err = ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
 		case "template":
 			var err error
 
@@ -10467,6 +10567,14 @@ func (ec *executionContext) unmarshalInputAddEmailTemplateRequest(ctx context.Co
 			if err != nil {
 				return it, err
 			}
+		case "design":
+			var err error
+
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("design"))
+			it.Design, err = ec.unmarshalNString2string(ctx, v)
+			if err != nil {
+				return it, err
+			}
 		}
 	}
 
@@ -11269,6 +11377,22 @@ func (ec *executionContext) unmarshalInputUpdateEmailTemplateRequest(ctx context
 			if err != nil {
 				return it, err
 			}
+		case "subject":
+			var err error
+
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("subject"))
+			it.Subject, err = ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
+		case "design":
+			var err error
+
+			ctx := graphql.WithPathContext(ctx, graphql.NewPathWithField("design"))
+			it.Design, err = ec.unmarshalOString2ᚖstring(ctx, v)
+			if err != nil {
+				return it, err
+			}
 		}
 	}
 
@@ -12100,6 +12224,16 @@ func (ec *executionContext) _EmailTemplate(ctx context.Context, sel ast.Selectio
 			if out.Values[i] == graphql.Null {
 				invalids++
 			}
+		case "design":
+			out.Values[i] = ec._EmailTemplate_design(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				invalids++
+			}
+		case "subject":
+			out.Values[i] = ec._EmailTemplate_subject(ctx, field, obj)
+			if out.Values[i] == graphql.Null {
+				invalids++
+			}
 		case "created_at":
 			out.Values[i] = ec._EmailTemplate_created_at(ctx, field, obj)
 		case "updated_at":
@@ -12131,8 +12265,8 @@ func (ec *executionContext) _EmailTemplates(ctx context.Context, sel ast.Selecti
 			if out.Values[i] == graphql.Null {
 				invalids++
 			}
-		case "EmailTemplates":
+		case "email_templates":
-			out.Values[i] = ec._EmailTemplates_EmailTemplates(ctx, field, obj)
+			out.Values[i] = ec._EmailTemplates_email_templates(ctx, field, obj)
 			if out.Values[i] == graphql.Null {
 				invalids++
 			}

server/graph/model/models_gen.go

@@ -4,7 +4,9 @@ package model
 
 type AddEmailTemplateRequest struct {
 	EventName string `json:"event_name"`
+	Subject   string `json:"subject"`
 	Template  string `json:"template"`
+	Design    string `json:"design"`
 }
 
 type AddWebhookRequest struct {
@@ -44,13 +46,15 @@ type EmailTemplate struct {
 	ID        string `json:"id"`
 	EventName string `json:"event_name"`
 	Template  string `json:"template"`
+	Design    string `json:"design"`
+	Subject   string `json:"subject"`
 	CreatedAt *int64 `json:"created_at"`
 	UpdatedAt *int64 `json:"updated_at"`
 }
 
 type EmailTemplates struct {
 	Pagination     *Pagination      `json:"pagination"`
-	EmailTemplates []*EmailTemplate `json:"EmailTemplates"`
+	EmailTemplates []*EmailTemplate `json:"email_templates"`
 }
 
 type Env struct {
@@ -249,6 +253,8 @@ type UpdateEmailTemplateRequest struct {
 	ID        string  `json:"id"`
 	EventName *string `json:"event_name"`
 	Template  *string `json:"template"`
+	Subject   *string `json:"subject"`
+	Design    *string `json:"design"`
 }
 
 type UpdateEnvInput struct {

server/graph/schema.graphqls

@@ -194,13 +194,15 @@ type EmailTemplate {
 	id: ID!
 	event_name: String!
 	template: String!
+	design: String!
+	subject: String!
 	created_at: Int64
 	updated_at: Int64
 }
 
 type EmailTemplates {
 	pagination: Pagination!
-	EmailTemplates: [EmailTemplate!]!
+	email_templates: [EmailTemplate!]!
 }
 
 input UpdateEnvInput {
@@ -414,13 +416,17 @@ input TestEndpointRequest {
 
 input AddEmailTemplateRequest {
 	event_name: String!
+	subject: String!
 	template: String!
+	design: String!
 }
 
 input UpdateEmailTemplateRequest {
 	id: ID!
 	event_name: String
 	template: String
+	subject: String
+	design: String
 }
 
 input DeleteEmailTemplateRequest {

server/resolvers/add_email_template.go

@@ -14,8 +14,6 @@ import (
 	log "github.com/sirupsen/logrus"
 )
 
-// TODO add template validator
-
 // AddEmailTemplateResolver resolver for add email template mutation
 func AddEmailTemplateResolver(ctx context.Context, params model.AddEmailTemplateRequest) (*model.Response, error) {
 	gc, err := utils.GinContextFromContext(ctx)
@@ -34,13 +32,23 @@ func AddEmailTemplateResolver(ctx context.Context, params model.AddEmailTemplate
 		return nil, fmt.Errorf("invalid event name %s", params.EventName)
 	}
 
+	if strings.TrimSpace(params.Subject) == "" {
+		return nil, fmt.Errorf("empty subject not allowed")
+	}
+
 	if strings.TrimSpace(params.Template) == "" {
 		return nil, fmt.Errorf("empty template not allowed")
 	}
 
+	if strings.TrimSpace(params.Design) == "" {
+		return nil, fmt.Errorf("empty design not allowed")
+	}
+
 	_, err = db.Provider.AddEmailTemplate(ctx, models.EmailTemplate{
 		EventName: params.EventName,
 		Template:  params.Template,
+		Subject:   params.Subject,
+		Design:    params.Design,
 	})
 	if err != nil {
 		log.Debug("Failed to add email template: ", err)

server/resolvers/forgot_password.go

@@ -15,6 +15,7 @@ import (
 	"github.com/authorizerdev/authorizer/server/graph/model"
 	"github.com/authorizerdev/authorizer/server/memorystore"
 	"github.com/authorizerdev/authorizer/server/parsers"
+	"github.com/authorizerdev/authorizer/server/refs"
 	"github.com/authorizerdev/authorizer/server/token"
 	"github.com/authorizerdev/authorizer/server/utils"
 	"github.com/authorizerdev/authorizer/server/validators"
@@ -49,7 +50,7 @@ func ForgotPasswordResolver(ctx context.Context, params model.ForgotPasswordInpu
 	log := log.WithFields(log.Fields{
 		"email": params.Email,
 	})
-	_, err = db.Provider.GetUserByEmail(ctx, params.Email)
+	user, err := db.Provider.GetUserByEmail(ctx, params.Email)
 	if err != nil {
 		log.Debug("User not found: ", err)
 		return res, fmt.Errorf(`user with this email not found`)
@@ -61,9 +62,9 @@ func ForgotPasswordResolver(ctx context.Context, params model.ForgotPasswordInpu
 		log.Debug("Failed to generate nonce: ", err)
 		return res, err
 	}
-	redirectURL := parsers.GetAppURL(gc) + "/reset-password"
+	redirectURL := parsers.GetAppURL(gc)
-	if params.RedirectURI != nil {
+	if strings.TrimSpace(refs.StringValue(params.RedirectURI)) != "" {
-		redirectURL = *params.RedirectURI
+		redirectURL = refs.StringValue(params.RedirectURI)
 	}
 
 	verificationToken, err := token.CreateVerificationToken(params.Email, constants.VerificationTypeForgotPassword, hostname, nonceHash, redirectURL)
@@ -84,8 +85,12 @@ func ForgotPasswordResolver(ctx context.Context, params model.ForgotPasswordInpu
 		return res, err
 	}
 
-	// exec it as go routin so that we can reduce the api latency
+	// exec it as go routine so that we can reduce the api latency
-	go email.SendForgotPasswordMail(params.Email, verificationToken, hostname)
+	go email.SendEmail([]string{params.Email}, constants.VerificationTypeForgotPassword, map[string]interface{}{
+		"user":             user.ToMap(),
+		"organization":     utils.GetOrganization(),
+		"verification_url": utils.GetForgotPasswordURL(verificationToken, hostname),
+	})
 
 	res = &model.Response{
 		Message: `Please check your inbox! We have sent a password reset link.`,

server/resolvers/invite_members.go

@@ -115,7 +115,7 @@ func InviteMembersResolver(ctx context.Context, params model.InviteMemberInput)
 			return nil, err
 		}
 
-		verificationToken, err := token.CreateVerificationToken(email, constants.VerificationTypeForgotPassword, hostname, nonceHash, redirectURL)
+		verificationToken, err := token.CreateVerificationToken(email, constants.VerificationTypeInviteMember, hostname, nonceHash, redirectURL)
 		if err != nil {
 			log.Debug("Failed to create verification token: ", err)
 		}
@@ -135,7 +135,7 @@ func InviteMembersResolver(ctx context.Context, params model.InviteMemberInput)
 		} else {
 			// use basic authentication if that option is on
 			user.SignupMethods = constants.AuthRecipeMethodBasicAuth
-			verificationRequest.Identifier = constants.VerificationTypeForgotPassword
+			verificationRequest.Identifier = constants.VerificationTypeInviteMember
 
 			isMFAEnforced, err := memorystore.Provider.GetBoolStoreEnvVariable(constants.EnvKeyEnforceMultiFactorAuthentication)
 			if err != nil {
@@ -162,7 +162,12 @@ func InviteMembersResolver(ctx context.Context, params model.InviteMemberInput)
 			return nil, err
 		}
 
-		go emailservice.InviteEmail(email, verificationToken, verifyEmailURL, redirectURL)
+		// exec it as go routine so that we can reduce the api latency
+		go emailservice.SendEmail([]string{user.Email}, constants.VerificationTypeInviteMember, map[string]interface{}{
+			"user":             user.ToMap(),
+			"organization":     utils.GetOrganization(),
+			"verification_url": utils.GetInviteVerificationURL(verifyEmailURL, verificationToken, redirectURL),
+		})
 	}
 
 	return &model.Response{

server/resolvers/login.go

@@ -123,7 +123,12 @@ func LoginResolver(ctx context.Context, params model.LoginInput) (*model.AuthRes
 		}
 
 		go func() {
-			err := email.SendOtpMail(user.Email, otpData.Otp)
+			// exec it as go routine so that we can reduce the api latency
+			go email.SendEmail([]string{params.Email}, constants.VerificationTypeOTP, map[string]interface{}{
+				"user":         user.ToMap(),
+				"organization": utils.GetOrganization(),
+				"otp":          otpData.Otp,
+			})
 			if err != nil {
 				log.Debug("Failed to send otp email: ", err)
 			}

server/resolvers/magic_link_login.go

@@ -219,8 +219,12 @@ func MagicLinkLoginResolver(ctx context.Context, params model.MagicLinkLoginInpu
 			return res, err
 		}
 
-		// exec it as go routing so that we can reduce the api latency
+		// exec it as go routine so that we can reduce the api latency
-		go email.SendVerificationMail(params.Email, verificationToken, hostname)
+		go email.SendEmail([]string{params.Email}, constants.VerificationTypeMagicLinkLogin, map[string]interface{}{
+			"user":             user.ToMap(),
+			"organization":     utils.GetOrganization(),
+			"verification_url": utils.GetEmailVerificationURL(verificationToken, hostname),
+		})
 	}
 
 	res = &model.Response{

server/resolvers/resend_otp.go

@@ -84,7 +84,12 @@ func ResendOTPResolver(ctx context.Context, params model.ResendOTPRequest) (*mod
 	}
 
 	go func() {
-		err := email.SendOtpMail(params.Email, otp)
+		// exec it as go routine so that we can reduce the api latency
+		go email.SendEmail([]string{params.Email}, constants.VerificationTypeOTP, map[string]interface{}{
+			"user":         user.ToMap(),
+			"organization": utils.GetOrganization(),
+			"otp":          otp,
+		})
 		if err != nil {
 			log.Debug("Error sending otp email: ", otp)
 		}

server/resolvers/resend_verify_email.go

@@ -39,6 +39,11 @@ func ResendVerifyEmailResolver(ctx context.Context, params model.ResendVerifyEma
 		return res, fmt.Errorf("invalid identifier")
 	}
 
+	user, err := db.Provider.GetUserByEmail(ctx, params.Email)
+	if err != nil {
+		return res, fmt.Errorf("invalid user")
+	}
+
 	verificationRequest, err := db.Provider.GetVerificationRequestByEmail(ctx, params.Email, params.Identifier)
 	if err != nil {
 		log.Debug("Failed to get verification request: ", err)
@@ -74,8 +79,12 @@ func ResendVerifyEmailResolver(ctx context.Context, params model.ResendVerifyEma
 		log.Debug("Failed to add verification request: ", err)
 	}
 
-	// exec it as go routin so that we can reduce the api latency
+	// exec it as go routine so that we can reduce the api latency
-	go email.SendVerificationMail(params.Email, verificationToken, hostname)
+	go email.SendEmail([]string{params.Email}, params.Identifier, map[string]interface{}{
+		"user":             user.ToMap(),
+		"organization":     utils.GetOrganization(),
+		"verification_url": utils.GetEmailVerificationURL(verificationToken, hostname),
+	})
 
 	res = &model.Response{
 		Message: `Verification email has been sent. Please check your inbox`,

server/resolvers/signup.go

@@ -221,9 +221,14 @@ func SignupResolver(ctx context.Context, params model.SignUpInput) (*model.AuthR
 			return res, err
 		}
 
-		// exec it as go routin so that we can reduce the api latency
+		// exec it as go routine so that we can reduce the api latency
 		go func() {
-			email.SendVerificationMail(params.Email, verificationToken, hostname)
+			// exec it as go routine so that we can reduce the api latency
+			email.SendEmail([]string{params.Email}, constants.VerificationTypeBasicAuthSignup, map[string]interface{}{
+				"user":             user.ToMap(),
+				"organization":     utils.GetOrganization(),
+				"verification_url": utils.GetEmailVerificationURL(verificationToken, hostname),
+			})
 			utils.RegisterEvent(ctx, constants.UserCreatedWebhookEvent, constants.AuthRecipeMethodBasicAuth, user)
 		}()
 

server/resolvers/update_email_template.go

@@ -15,8 +15,6 @@ import (
 	log "github.com/sirupsen/logrus"
 )
 
-// TODO add template validator
-
 // UpdateEmailTemplateResolver resolver for update email template mutation
 func UpdateEmailTemplateResolver(ctx context.Context, params model.UpdateEmailTemplateRequest) (*model.Response, error) {
 	gc, err := utils.GinContextFromContext(ctx)
@@ -51,6 +49,14 @@ func UpdateEmailTemplateResolver(ctx context.Context, params model.UpdateEmailTe
 		emailTemplateDetails.EventName = refs.StringValue(params.EventName)
 	}
 
+	if params.Subject != nil && emailTemplateDetails.Subject != refs.StringValue(params.Subject) {
+		if strings.TrimSpace(refs.StringValue(params.Subject)) == "" {
+			log.Debug("empty subject not allowed")
+			return nil, fmt.Errorf("empty subject not allowed")
+		}
+		emailTemplateDetails.Subject = refs.StringValue(params.Subject)
+	}
+
 	if params.Template != nil && emailTemplateDetails.Template != refs.StringValue(params.Template) {
 		if strings.TrimSpace(refs.StringValue(params.Template)) == "" {
 			log.Debug("empty template not allowed")
@@ -59,6 +65,14 @@ func UpdateEmailTemplateResolver(ctx context.Context, params model.UpdateEmailTe
 		emailTemplateDetails.Template = refs.StringValue(params.Template)
 	}
 
+	if params.Design != nil && emailTemplateDetails.Design != refs.StringValue(params.Design) {
+		if strings.TrimSpace(refs.StringValue(params.Design)) == "" {
+			log.Debug("empty design not allowed")
+			return nil, fmt.Errorf("empty design not allowed")
+		}
+		emailTemplateDetails.Design = refs.StringValue(params.Design)
+	}
+
 	_, err = db.Provider.UpdateEmailTemplate(ctx, emailTemplateDetails)
 	if err != nil {
 		return nil, err

server/resolvers/update_profile.go

@@ -244,8 +244,12 @@ func UpdateProfileResolver(ctx context.Context, params model.UpdateProfileInput)
 				return res, err
 			}
 
-			// exec it as go routin so that we can reduce the api latency
+			// exec it as go routine so that we can reduce the api latency
-			go email.SendVerificationMail(newEmail, verificationToken, hostname)
+			go email.SendEmail([]string{user.Email}, verificationType, map[string]interface{}{
+				"user":             user.ToMap(),
+				"organization":     utils.GetOrganization(),
+				"verification_url": utils.GetEmailVerificationURL(verificationToken, hostname),
+			})
 
 		}
 	}

server/resolvers/update_user.go

@@ -156,8 +156,12 @@ func UpdateUserResolver(ctx context.Context, params model.UpdateUserInput) (*mod
 			return res, err
 		}
 
-		// exec it as go routin so that we can reduce the api latency
+		// exec it as go routine so that we can reduce the api latency
-		go email.SendVerificationMail(newEmail, verificationToken, hostname)
+		go email.SendEmail([]string{user.Email}, constants.VerificationTypeBasicAuthSignup, map[string]interface{}{
+			"user":             user.ToMap(),
+			"organization":     utils.GetOrganization(),
+			"verification_url": utils.GetEmailVerificationURL(verificationToken, hostname),
+		})
 
 	}
 

server/test/add_email_template_test.go

@@ -31,19 +31,44 @@ func addEmailTemplateTest(t *testing.T, s TestSetup) {
 			assert.Nil(t, emailTemplate)
 		})
 
-		t.Run("should not add email template for empty template", func(t *testing.T) {
+		t.Run("should not add email template for empty subject", func(t *testing.T) {
 			emailTemplate, err := resolvers.AddEmailTemplateResolver(ctx, model.AddEmailTemplateRequest{
 				EventName: s.TestInfo.TestEmailTemplateEventTypes[0],
-				Template:  "     ",
+				Template:  " test ",
+				Subject:   "    ",
 			})
 			assert.Error(t, err)
 			assert.Nil(t, emailTemplate)
 		})
+
+		t.Run("should not add email template for empty template", func(t *testing.T) {
+			emailTemplate, err := resolvers.AddEmailTemplateResolver(ctx, model.AddEmailTemplateRequest{
+				EventName: s.TestInfo.TestEmailTemplateEventTypes[0],
+				Template:  "     ",
+				Subject:   "test",
+			})
+			assert.Error(t, err)
+			assert.Nil(t, emailTemplate)
+		})
+
+		t.Run("should not add email template with empty design", func(t *testing.T) {
+			emailTemplate, err := resolvers.AddEmailTemplateResolver(ctx, model.AddEmailTemplateRequest{
+				EventName: s.TestInfo.TestEmailTemplateEventTypes[0],
+				Template:  "test",
+				Subject:   "test",
+				Design:    "   ",
+			})
+			assert.Error(t, err)
+			assert.Nil(t, emailTemplate)
+		})
+
 		for _, eventType := range s.TestInfo.TestEmailTemplateEventTypes {
 			t.Run("should add email template for "+eventType, func(t *testing.T) {
 				emailTemplate, err := resolvers.AddEmailTemplateResolver(ctx, model.AddEmailTemplateRequest{
 					EventName: eventType,
-					Template:  `Test email`,
+					Template:  "Test email",
+					Subject:   "Test email",
+					Design:    "Test design",
 				})
 				assert.NoError(t, err)
 				assert.NotNil(t, emailTemplate)
@@ -52,6 +77,8 @@ func addEmailTemplateTest(t *testing.T, s TestSetup) {
 				et, err := db.Provider.GetEmailTemplateByEventName(ctx, eventType)
 				assert.NoError(t, err)
 				assert.Equal(t, et.EventName, eventType)
+				assert.Equal(t, "Test email", et.Subject)
+				assert.Equal(t, "Test design", et.Design)
 			})
 		}
 	})

server/test/update_email_template_test.go

@@ -31,6 +31,8 @@ func updateEmailTemplateTest(t *testing.T, s TestSetup) {
 		res, err := resolvers.UpdateEmailTemplateResolver(ctx, model.UpdateEmailTemplateRequest{
 			ID:       emailTemplate.ID,
 			Template: refs.NewStringRef("Updated test template"),
+			Subject:  refs.NewStringRef("Updated subject"),
+			Design:   refs.NewStringRef("Updated design"),
 		})
 
 		assert.NoError(t, err)
@@ -42,5 +44,7 @@ func updateEmailTemplateTest(t *testing.T, s TestSetup) {
 		assert.NotNil(t, updatedEmailTemplate)
 		assert.Equal(t, emailTemplate.ID, updatedEmailTemplate.ID)
 		assert.Equal(t, updatedEmailTemplate.Template, "Updated test template")
+		assert.Equal(t, updatedEmailTemplate.Subject, "Updated subject")
+		assert.Equal(t, updatedEmailTemplate.Design, "Updated design")
 	})
 }

server/utils/common.go

@@ -2,6 +2,9 @@ package utils
 
 import (
 	"reflect"
+
+	"github.com/authorizerdev/authorizer/server/constants"
+	"github.com/authorizerdev/authorizer/server/memorystore"
 )
 
 // StringSliceContains checks if a string slice contains a particular string
@@ -58,3 +61,46 @@ func ConvertInterfaceToStringSlice(slice interface{}) []string {
 	}
 	return resSlice
 }
+
+// GetOrganization to get organization object
+func GetOrganization() map[string]interface{} {
+	orgLogo, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyOrganizationLogo)
+	if err != nil {
+		return nil
+	}
+	orgName, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyOrganizationName)
+	if err != nil {
+		return nil
+	}
+	organization := map[string]interface{}{
+		"name": orgName,
+		"logo": orgLogo,
+	}
+
+	return organization
+}
+
+// GetForgotPasswordURL to get url for given token and hostname
+func GetForgotPasswordURL(token, hostname string) string {
+	resetPasswordUrl, err := memorystore.Provider.GetStringStoreEnvVariable(constants.EnvKeyResetPasswordURL)
+	if err != nil {
+		return ""
+	}
+	if resetPasswordUrl == "" {
+		if err := memorystore.Provider.UpdateEnvVariable(constants.EnvKeyResetPasswordURL, hostname+"/app/reset-password"); err != nil {
+			return ""
+		}
+	}
+	verificationURL := resetPasswordUrl + "?token=" + token
+	return verificationURL
+}
+
+// GetInviteVerificationURL to get url for invite email verification
+func GetInviteVerificationURL(verificationURL, token, redirectURI string) string {
+	return verificationURL + "?token=" + token + "&redirect_uri=" + redirectURI
+}
+
+// GetEmailVerificationURL to get url for invite email verification
+func GetEmailVerificationURL(token, hostname string) string {
+	return hostname + "/verify_email?token=" + token
+}

server/validators/email_template.go

@@ -4,7 +4,7 @@ import "github.com/authorizerdev/authorizer/server/constants"
 
 // IsValidEmailTemplateEventName function to validate email template events
 func IsValidEmailTemplateEventName(eventName string) bool {
-	if eventName != constants.VerificationTypeBasicAuthSignup && eventName != constants.VerificationTypeForgotPassword && eventName != constants.VerificationTypeMagicLinkLogin && eventName != constants.VerificationTypeUpdateEmail {
+	if eventName != constants.VerificationTypeBasicAuthSignup && eventName != constants.VerificationTypeForgotPassword && eventName != constants.VerificationTypeMagicLinkLogin && eventName != constants.VerificationTypeUpdateEmail && eventName != constants.VerificationTypeOTP && eventName != constants.VerificationTypeInviteMember {
 		return false
 	}
 

templates/dashboard.tmpl

@@ -12,9 +12,901 @@
     <script>
      window.__authorizer__ = {{.data}}
     </script>
+    <style>
+      .rdw-option-wrapper {
+          border: 1px solid #F1F1F1;
+          padding: 5px;
+          min-width: 25px;
+          height: 20px;
+          border-radius: 2px;
+          margin: 0 4px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          cursor: pointer;
+          background: white;
+          text-transform: capitalize;
+        }
+        .rdw-option-wrapper:hover {
+          box-shadow: 1px 1px 0px #BFBDBD;
+        }
+        .rdw-option-wrapper:active {
+          box-shadow: 1px 1px 0px #BFBDBD inset;
+        }
+        .rdw-option-active {
+          box-shadow: 1px 1px 0px #BFBDBD inset;
+        }
+        .rdw-option-disabled {
+          opacity: 0.3;
+          cursor: default;
+        }
+
+        .rdw-dropdown-wrapper {
+          height: 30px;
+          background: white;
+          cursor: pointer;
+          border: 1px solid #F1F1F1;
+          border-radius: 2px;
+          margin: 0 3px;
+          text-transform: capitalize;
+          background: white;
+        }
+        .rdw-dropdown-wrapper:focus {
+          outline: none;
+        }
+        .rdw-dropdown-wrapper:hover {
+          box-shadow: 1px 1px 0px #BFBDBD;
+          background-color: #FFFFFF;
+        }
+        .rdw-dropdown-wrapper:active {
+          box-shadow: 1px 1px 0px #BFBDBD inset;
+        }
+        .rdw-dropdown-carettoopen {
+          height: 0px;
+          width: 0px;
+          position: absolute;
+          top: 35%;
+          right: 10%;
+          border-top: 6px solid black;
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+        }
+        .rdw-dropdown-carettoclose {
+          height: 0px;
+          width: 0px;
+          position: absolute;
+          top: 35%;
+          right: 10%;
+          border-bottom: 6px solid black;
+          border-left: 5px solid transparent;
+          border-right: 5px solid transparent;
+        }
+        .rdw-dropdown-selectedtext {
+          display: flex;
+          position: relative;
+          height: 100%;
+          align-items: center;
+          padding: 0 5px;
+        }
+        .rdw-dropdown-optionwrapper {
+          z-index: 100;
+          position: relative;
+          border: 1px solid #F1F1F1;
+          width: 98%;
+          background: white;
+          border-radius: 2px;
+          margin: 0;
+          padding: 0;
+          max-height: 250px;
+          overflow-y: scroll;
+        }
+        .rdw-dropdown-optionwrapper:hover {
+          box-shadow: 1px 1px 0px #BFBDBD;
+          background-color: #FFFFFF;
+        }
+
+        .rdw-dropdownoption-default {
+          min-height: 25px;
+          display: flex;
+          align-items: center;
+          padding: 0 5px;
+        }
+        .rdw-dropdownoption-highlighted {
+          background: #F1F1F1;
+        }
+        .rdw-dropdownoption-active {
+          background: #f5f5f5;
+        }
+        .rdw-dropdownoption-disabled {
+          opacity: 0.3;
+          cursor: default;
+        }
+
+        .rdw-inline-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          flex-wrap: wrap
+        }
+        .rdw-inline-dropdown {
+          width: 50px;
+        }
+        .rdw-inline-dropdownoption {
+          height: 40px;
+          display: flex;
+          justify-content: center;
+        }
+
+        .rdw-block-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          flex-wrap: wrap
+        }
+        .rdw-block-dropdown {
+          width: 110px;
+        }
+
+        .rdw-fontsize-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          flex-wrap: wrap
+        }
+        .rdw-fontsize-dropdown {
+          min-width: 40px;
+        }
+        .rdw-fontsize-option {
+          display: flex;
+          justify-content: center;
+        }
+
+        .rdw-fontfamily-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          flex-wrap: wrap
+        }
+        .rdw-fontfamily-dropdown {
+          width: 115px;
+        }
+        .rdw-fontfamily-placeholder {
+          white-space: nowrap;
+          max-width: 90px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+        .rdw-fontfamily-optionwrapper {
+          width: 140px;
+        }
+
+        .rdw-list-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          flex-wrap: wrap
+        }
+        .rdw-list-dropdown {
+          width: 50px;
+          z-index: 90;
+        }
+        .rdw-list-dropdownOption {
+          height: 40px;
+          display: flex;
+          justify-content: center;
+        }
+
+        .rdw-text-align-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          flex-wrap: wrap
+        }
+        .rdw-text-align-dropdown {
+          width: 50px;
+          z-index: 90;
+        }
+        .rdw-text-align-dropdownOption {
+          height: 40px;
+          display: flex;
+          justify-content: center;
+        }
+        .rdw-right-aligned-block {
+          text-align: right;
+        }
+        .rdw-left-aligned-block {
+          text-align: left !important;
+        }
+        .rdw-center-aligned-block {
+          text-align: center !important;
+        }
+        .rdw-justify-aligned-block {
+          text-align: justify !important;
+        }
+        .rdw-right-aligned-block > div {
+          display: inline-block;
+        }
+        .rdw-left-aligned-block > div {
+          display: inline-block;
+        }
+        .rdw-center-aligned-block > div {
+          display: inline-block;
+        }
+        .rdw-justify-aligned-block > div {
+          display: inline-block;
+        }
+
+        .rdw-colorpicker-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          position: relative;
+          flex-wrap: wrap
+        }
+        .rdw-colorpicker-modal {
+          position: absolute;
+          top: 35px;
+          left: 5px;
+          display: flex;
+          flex-direction: column;
+          width: 175px;
+          height: 175px;
+          border: 1px solid #F1F1F1;
+          padding: 15px;
+          border-radius: 2px;
+          z-index: 100;
+          background: white;
+          box-shadow: 3px 3px 5px #BFBDBD;
+        }
+        .rdw-colorpicker-modal-header {
+          display: flex;
+          padding-bottom: 5px;
+        }
+        .rdw-colorpicker-modal-style-label {
+          font-size: 15px;
+          width: 50%;
+          text-align: center;
+          cursor: pointer;
+          padding: 0 10px 5px;
+        }
+        .rdw-colorpicker-modal-style-label-active {
+          border-bottom: 2px solid #0a66b7;
+        }
+        .rdw-colorpicker-modal-options {
+          margin: 5px auto;
+          display: flex;
+          width: 100%;
+          height: 100%;
+          flex-wrap: wrap;
+          overflow: scroll;
+        }
+        .rdw-colorpicker-cube {
+          width: 22px;
+          height: 22px;
+          border: 1px solid #F1F1F1;
+        }
+        .rdw-colorpicker-option {
+          margin: 3px;
+          padding: 0;
+          min-height: 20px;
+          border: none;
+          width: 22px;
+          height: 22px;
+          min-width: 22px;
+          box-shadow: 1px 2px 1px #BFBDBD inset;
+        }
+        .rdw-colorpicker-option:hover {
+          box-shadow: 1px 2px 1px #BFBDBD;
+        }
+        .rdw-colorpicker-option:active {
+          box-shadow: -1px -2px 1px #BFBDBD;
+        }
+        .rdw-colorpicker-option-active {
+          box-shadow: 0px 0px 2px 2px #BFBDBD;
+        }
+
+        .rdw-link-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          position: relative;
+          flex-wrap: wrap
+        }
+        .rdw-link-dropdown {
+          width: 50px;
+        }
+        .rdw-link-dropdownOption {
+          height: 40px;
+          display: flex;
+          justify-content: center;
+        }
+        .rdw-link-dropdownPlaceholder {
+          margin-left: 8px;
+        }
+        .rdw-link-modal {
+          position: absolute;
+          top: 35px;
+          left: 5px;
+          display: flex;
+          flex-direction: column;
+          width: 235px;
+          height: 205px;
+          border: 1px solid #F1F1F1;
+          padding: 15px;
+          border-radius: 2px;
+          z-index: 100;
+          background: white;
+          box-shadow: 3px 3px 5px #BFBDBD;
+        }
+        .rdw-link-modal-label {
+          font-size: 15px;
+        }
+        .rdw-link-modal-input {
+          margin-top: 5px;
+          border-radius: 2px;
+          border: 1px solid #F1F1F1;
+          height: 25px;
+          margin-bottom: 15px;
+          padding: 0 5px;
+        }
+        .rdw-link-modal-input:focus {
+          outline: none;
+        }
+        .rdw-link-modal-buttonsection {
+          margin: 0 auto;
+        }
+        .rdw-link-modal-target-option {
+          margin-bottom: 20px;
+        }
+        .rdw-link-modal-target-option > span {
+          margin-left: 5px;
+        }
+        .rdw-link-modal-btn {
+          margin-left: 10px;
+          width: 75px;
+          height: 30px;
+          border: 1px solid #F1F1F1;
+          border-radius: 2px;
+          cursor: pointer;
+          background: white;
+          text-transform: capitalize;
+        }
+        .rdw-link-modal-btn:hover {
+          box-shadow: 1px 1px 0px #BFBDBD;
+        }
+        .rdw-link-modal-btn:active {
+          box-shadow: 1px 1px 0px #BFBDBD inset;
+        }
+        .rdw-link-modal-btn:focus {
+          outline: none !important;
+        }
+        .rdw-link-modal-btn:disabled {
+          background: #ece9e9;
+        }
+        .rdw-link-dropdownoption {
+          height: 40px;
+          display: flex;
+          justify-content: center;
+        }
+        .rdw-history-dropdown {
+          width: 50px;
+        }
+
+        .rdw-embedded-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          position: relative;
+          flex-wrap: wrap
+        }
+        .rdw-embedded-modal {
+          position: absolute;
+          top: 35px;
+          left: 5px;
+          display: flex;
+          flex-direction: column;
+          width: 235px;
+          height: 180px;
+          border: 1px solid #F1F1F1;
+          padding: 15px;
+          border-radius: 2px;
+          z-index: 100;
+          background: white;
+          justify-content: space-between;
+          box-shadow: 3px 3px 5px #BFBDBD;
+        }
+        .rdw-embedded-modal-header {
+          font-size: 15px;
+          display: flex;
+        }
+        .rdw-embedded-modal-header-option {
+          width: 50%;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+        .rdw-embedded-modal-header-label {
+          width: 95px;
+          border: 1px solid #f1f1f1;
+          margin-top: 5px;
+          background: #6EB8D4;
+          border-bottom: 2px solid #0a66b7;
+        }
+        .rdw-embedded-modal-link-section {
+          display: flex;
+          flex-direction: column;
+        }
+        .rdw-embedded-modal-link-input {
+          width: 88%;
+          height: 35px;
+          margin: 10px 0;
+          border: 1px solid #F1F1F1;
+          border-radius: 2px;
+          font-size: 15px;
+          padding: 0 5px;
+        }
+        .rdw-embedded-modal-link-input-wrapper {
+          display: flex;
+          align-items: center;
+        }
+        .rdw-embedded-modal-link-input:focus {
+          outline: none;
+        }
+        .rdw-embedded-modal-btn-section {
+          display: flex;
+          justify-content: center;
+        }
+        .rdw-embedded-modal-btn {
+          margin: 0 3px;
+          width: 75px;
+          height: 30px;
+          border: 1px solid #F1F1F1;
+          border-radius: 2px;
+          cursor: pointer;
+          background: white;
+          text-transform: capitalize;
+        }
+        .rdw-embedded-modal-btn:hover {
+          box-shadow: 1px 1px 0px #BFBDBD;
+        }
+        .rdw-embedded-modal-btn:active {
+          box-shadow: 1px 1px 0px #BFBDBD inset;
+        }
+        .rdw-embedded-modal-btn:focus {
+          outline: none !important;
+        }
+        .rdw-embedded-modal-btn:disabled {
+          background: #ece9e9;
+        }
+        .rdw-embedded-modal-size {
+          align-items: center;
+          display: flex;
+          margin: 8px 0;
+          justify-content: space-between;
+        }
+        .rdw-embedded-modal-size-input {
+          width: 80%;
+          height: 20px;
+          border: 1px solid #F1F1F1;
+          border-radius: 2px;
+          font-size: 12px;
+        }
+        .rdw-embedded-modal-size-input:focus {
+          outline: none;
+        }
+
+        .rdw-emoji-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          position: relative;
+          flex-wrap: wrap
+        }
+        .rdw-emoji-modal {
+          overflow: auto;
+          position: absolute;
+          top: 35px;
+          left: 5px;
+          display: flex;
+          flex-wrap: wrap;
+          width: 235px;
+          height: 180px;
+          border: 1px solid #F1F1F1;
+          padding: 15px;
+          border-radius: 2px;
+          z-index: 100;
+          background: white;
+          box-shadow: 3px 3px 5px #BFBDBD;
+        }
+        .rdw-emoji-icon {
+          margin: 2.5px;
+          height: 24px;
+          width: 24px;
+          cursor: pointer;
+          font-size: 22px;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+        }
+
+        .rdw-spinner {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          height: 100%;
+          width: 100%;
+        }
+        .rdw-spinner > div {
+          width: 12px;
+          height: 12px;
+          background-color: #333;
+
+          border-radius: 100%;
+          display: inline-block;
+          -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+          animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+        }
+        .rdw-spinner .rdw-bounce1 {
+          -webkit-animation-delay: -0.32s;
+          animation-delay: -0.32s;
+        }
+        .rdw-spinner .rdw-bounce2 {
+          -webkit-animation-delay: -0.16s;
+          animation-delay: -0.16s;
+        }
+        @-webkit-keyframes sk-bouncedelay {
+          0%, 80%, 100% { -webkit-transform: scale(0) }
+          40% { -webkit-transform: scale(1.0) }
+        }
+        @keyframes sk-bouncedelay {
+          0%, 80%, 100% {
+            -webkit-transform: scale(0);
+            transform: scale(0);
+          } 40% {
+            -webkit-transform: scale(1.0);
+            transform: scale(1.0);
+          }
+        }
+
+        .rdw-image-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          position: relative;
+          flex-wrap: wrap
+        }
+        .rdw-image-modal {
+          position: absolute;
+          top: 35px;
+          left: 5px;
+          display: flex;
+          flex-direction: column;
+          width: 235px;
+          border: 1px solid #F1F1F1;
+          padding: 15px;
+          border-radius: 2px;
+          z-index: 100;
+          background: white;
+          box-shadow: 3px 3px 5px #BFBDBD;
+        }
+        .rdw-image-modal-header {
+          font-size: 15px;
+          margin: 10px 0;
+          display: flex;
+        }
+        .rdw-image-modal-header-option {
+          width: 50%;
+          cursor: pointer;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+        .rdw-image-modal-header-label {
+          width: 80px;
+          background: #f1f1f1;
+          border: 1px solid #f1f1f1;
+          margin-top: 5px;
+        }
+        .rdw-image-modal-header-label-highlighted {
+          background: #6EB8D4;
+          border-bottom: 2px solid #0a66b7;
+        }
+        .rdw-image-modal-upload-option {
+          width: 100%;
+          color: gray;
+          cursor: pointer;
+          display: flex;
+          border: none;
+          font-size: 15px;
+          align-items: center;
+          justify-content: center;
+          background-color: #f1f1f1;
+          outline: 2px dashed gray;
+          outline-offset: -10px;
+          margin: 10px 0;
+          padding: 9px 0;
+        }
+        .rdw-image-modal-upload-option-highlighted {
+          outline: 2px dashed #0a66b7;
+        }
+        .rdw-image-modal-upload-option-label {
+          cursor: pointer;
+          height: 100%;
+          width: 100%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 15px;
+        }
+        .rdw-image-modal-upload-option-label span{
+          padding: 0 20px;
+        }
+        .rdw-image-modal-upload-option-image-preview {
+          max-width: 100%;
+          max-height: 200px;
+        }
+        .rdw-image-modal-upload-option-input {
+          width: 0.1px;
+          height: 0.1px;
+          opacity: 0;
+          overflow: hidden;
+          position: absolute;
+          z-index: -1;
+        }
+        .rdw-image-modal-url-section {
+          display: flex;
+          align-items: center;
+        }
+        .rdw-image-modal-url-input {
+          width: 90%;
+          height: 35px;
+          margin: 15px 0 12px;
+          border: 1px solid #F1F1F1;
+          border-radius: 2px;
+          font-size: 15px;
+          padding: 0 5px;
+        }
+        .rdw-image-modal-btn-section {
+          margin: 10px auto 0;
+        }
+        .rdw-image-modal-url-input:focus {
+          outline: none;
+        }
+        .rdw-image-modal-btn {
+          margin: 0 5px;
+          width: 75px;
+          height: 30px;
+          border: 1px solid #F1F1F1;
+          border-radius: 2px;
+          cursor: pointer;
+          background: white;
+          text-transform: capitalize;
+        }
+        .rdw-image-modal-btn:hover {
+          box-shadow: 1px 1px 0px #BFBDBD;
+        }
+        .rdw-image-modal-btn:active {
+          box-shadow: 1px 1px 0px #BFBDBD inset;
+        }
+        .rdw-image-modal-btn:focus {
+          outline: none !important;
+        }
+        .rdw-image-modal-btn:disabled {
+          background: #ece9e9;
+        }
+        .rdw-image-modal-spinner {
+          position: absolute;
+          top: -3px;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          opacity: 0.5;
+        }
+        .rdw-image-modal-alt-input {
+          width: 70%;
+          height: 20px;
+          border: 1px solid #F1F1F1;
+          border-radius: 2px;
+          font-size: 12px;
+          margin-left: 5px;
+        }
+        .rdw-image-modal-alt-input:focus {
+          outline: none;
+        }
+        .rdw-image-modal-alt-lbl {
+          font-size: 12px;
+        }
+        .rdw-image-modal-size {
+          align-items: center;
+          display: flex;
+          margin: 8px 0;
+          justify-content: space-between;
+        }
+        .rdw-image-modal-size-input {
+          width: 40%;
+          height: 20px;
+          border: 1px solid #F1F1F1;
+          border-radius: 2px;
+          font-size: 12px;
+        }
+        .rdw-image-modal-size-input:focus {
+          outline: none;
+        }
+        .rdw-image-mandatory-sign {
+          color: red;
+          margin-left: 3px;
+          margin-right: 3px;
+        }
+
+        .rdw-remove-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          position: relative;
+          flex-wrap: wrap
+        }
+
+        .rdw-history-wrapper {
+          display: flex;
+          align-items: center;
+          margin-bottom: 6px;
+          flex-wrap: wrap
+        }
+        .rdw-history-dropdownoption {
+          height: 40px;
+          display: flex;
+          justify-content: center;
+        }
+        .rdw-history-dropdown {
+          width: 50px;
+        }
+
+        .rdw-link-decorator-wrapper {
+          position: relative;
+        }
+        .rdw-link-decorator-icon {
+          position: absolute;
+          left: 40%;
+          top: 0;
+          cursor: pointer;
+          background-color: white;
+        }
+
+        .rdw-mention-link {
+          text-decoration: none;
+          color: #1236ff;
+          background-color: #f0fbff;
+          padding: 1px 2px;
+          border-radius: 2px;
+        }
+
+        .rdw-suggestion-wrapper {
+          position: relative;
+        }
+        .rdw-suggestion-dropdown {
+          position: absolute;
+          display: flex;
+          flex-direction: column;
+          border: 1px solid #F1F1F1;
+          min-width: 100px;
+          max-height: 150px;
+          overflow: auto;
+          background: white;
+          z-index: 100;
+        }
+        .rdw-suggestion-option {
+          padding: 7px 5px;
+          border-bottom: 1px solid #f1f1f1;
+        }
+        .rdw-suggestion-option-active {
+          background-color: #F1F1F1;
+        }
+
+        .rdw-hashtag-link {
+          text-decoration: none;
+          color: #1236ff;
+          background-color: #f0fbff;
+          padding: 1px 2px;
+          border-radius: 2px;
+        }
+
+        .rdw-image-alignment-options-popup {
+          position: absolute;
+          background: white;
+          display: flex;
+          padding: 5px 2px;
+          border-radius: 2px;
+          border: 1px solid #F1F1F1;
+          width: 105px;
+          cursor: pointer;
+          z-index: 100;
+        }
+        .rdw-alignment-option-left {
+          justify-content: flex-start;
+        }
+        .rdw-image-alignment-option {
+          height: 15px;
+          width: 15px;
+          min-width: 15px;
+        }
+        .rdw-image-alignment {
+          position: relative;
+        }
+        .rdw-image-imagewrapper {
+          position: relative;
+        }
+        .rdw-image-center {
+          display: flex;
+          justify-content: center;
+        }
+        .rdw-image-left {
+          display: flex;
+        }
+        .rdw-image-right {
+          display: flex;
+          justify-content: flex-end;
+        }
+        .rdw-image-alignment-options-popup-right {
+          right: 0;
+        }
+
+        .rdw-editor-main {
+          height: 100%;
+          overflow: auto;
+          box-sizing: border-box;
+        }
+        .rdw-editor-toolbar {
+          padding: 6px 5px 0;
+          border-radius: 2px;
+          border: 1px solid #F1F1F1;
+          display: flex;
+          justify-content: flex-start;
+          background: white;
+          flex-wrap: wrap;
+          font-size: 15px;
+          margin-bottom: 5px;
+          user-select: none;
+        }
+        .public-DraftStyleDefault-block {
+          margin: 1em 0;
+        }
+        .rdw-editor-wrapper:focus {
+          outline: none;
+        }
+        .rdw-editor-wrapper {
+          box-sizing: content-box;
+        }
+        .rdw-editor-main blockquote {
+          border-left: 5px solid #f1f1f1;
+          padding-left: 5px;
+        }
+        .rdw-editor-main pre {
+          background: #f1f1f1;
+          border-radius: 3px;
+          padding: 1px 10px;
+        }
+        /**
+        * Draft v0.9.1
+        *
+        * Copyright (c) 2013-present, Facebook, Inc.
+        * All rights reserved.
+        *
+        * This source code is licensed under the BSD-style license found in the
+        * LICENSE file in the root directory of this source tree. An additional grant
+        * of patent rights can be found in the PATENTS file in the same directory.
+        */
+        .DraftEditor-editorContainer,.DraftEditor-root,.public-DraftEditor-content{height:inherit;text-align:initial}.public-DraftEditor-content[contenteditable=true]{-webkit-user-modify:read-write-plaintext-only}.DraftEditor-root{position:relative}.DraftEditor-editorContainer{background-color:rgba(255,255,255,0);border-left:.1px solid transparent;position:relative;z-index:1}.public-DraftEditor-block{position:relative}.DraftEditor-alignLeft .public-DraftStyleDefault-block{text-align:left}.DraftEditor-alignLeft .public-DraftEditorPlaceholder-root{left:0;text-align:left}.DraftEditor-alignCenter .public-DraftStyleDefault-block{text-align:center}.DraftEditor-alignCenter .public-DraftEditorPlaceholder-root{margin:0 auto;text-align:center;width:100%}.DraftEditor-alignRight .public-DraftStyleDefault-block{text-align:right}.DraftEditor-alignRight .public-DraftEditorPlaceholder-root{right:0;text-align:right}.public-DraftEditorPlaceholder-root{color:#9197a3;position:absolute;z-index:0}.public-DraftEditorPlaceholder-hasFocus{color:#bdc1c9}.DraftEditorPlaceholder-hidden{display:none}.public-DraftStyleDefault-block{position:relative;white-space:pre-wrap}.public-DraftStyleDefault-ltr{direction:ltr;text-align:left}.public-DraftStyleDefault-rtl{direction:rtl;text-align:right}.public-DraftStyleDefault-listLTR{direction:ltr}.public-DraftStyleDefault-listRTL{direction:rtl}.public-DraftStyleDefault-ol,.public-DraftStyleDefault-ul{margin:16px 0;padding:0}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listLTR{margin-left:1.5em}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-listRTL{margin-right:1.5em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listLTR{margin-left:3em}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-listRTL{margin-right:3em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listLTR{margin-left:4.5em}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-listRTL{margin-right:4.5em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listLTR{margin-left:6em}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-listRTL{margin-right:6em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listLTR{margin-left:7.5em}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-listRTL{margin-right:7.5em}.public-DraftStyleDefault-unorderedListItem{list-style-type:square;position:relative}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth0{list-style-type:disc}.public-DraftStyleDefault-unorderedListItem.public-DraftStyleDefault-depth1{list-style-type:circle}.public-DraftStyleDefault-orderedListItem{list-style-type:none;position:relative}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listLTR:before{left:-36px;position:absolute;text-align:right;width:30px}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-listRTL:before{position:absolute;right:-36px;text-align:left;width:30px}.public-DraftStyleDefault-orderedListItem:before{content:counter(ol0) ". ";counter-increment:ol0}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth1:before{content:counter(ol1) ". ";counter-increment:ol1}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth2:before{content:counter(ol2) ". ";counter-increment:ol2}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth3:before{content:counter(ol3) ". ";counter-increment:ol3}.public-DraftStyleDefault-orderedListItem.public-DraftStyleDefault-depth4:before{content:counter(ol4) ". ";counter-increment:ol4}.public-DraftStyleDefault-depth0.public-DraftStyleDefault-reset{counter-reset:ol0}.public-DraftStyleDefault-depth1.public-DraftStyleDefault-reset{counter-reset:ol1}.public-DraftStyleDefault-depth2.public-DraftStyleDefault-reset{counter-reset:ol2}.public-DraftStyleDefault-depth3.public-DraftStyleDefault-reset{counter-reset:ol3}.public-DraftStyleDefault-depth4.public-DraftStyleDefault-reset{counter-reset:ol4}
+
+
+        /*# sourceMappingURL=react-draft-wysiwyg.css.map*/
+    </style>
   </head>
   <body>
     <div id="root"></div>
     <script type="module" src="/dashboard/build/index.js"></script>
+    <script>var global = global || window;</script>
   </body>
 </html>