Merge pull request #215 from wabscale/main

fix: rootless container
2022-08-18 06:11:32 +05:30 · 2022-08-17 20:33:05 -04:00 · 2022-08-15 22:28:43 +05:30 · 2022-08-15 22:28:13 +05:30 · 2022-08-15 21:06:57 +05:30 · 2022-08-13 12:37:04 +05:30
29 changed files with 630 additions and 646 deletions
--- a/14
+++ b/14
@@ -21,13 +21,15 @@ RUN apk add build-base &&\
    make build-dashboard

 FROM alpine:latest
-WORKDIR /root/
+RUN adduser -D -h /authorizer -u 1000 -k /dev/null authorizer
+WORKDIR /authorizer
 RUN mkdir app dashboard
-COPY --from=node-builder /authorizer/app/build app/build
-COPY --from=node-builder /authorizer/app/favicon_io app/favicon_io
-COPY --from=node-builder /authorizer/dashboard/build dashboard/build
-COPY --from=node-builder /authorizer/dashboard/favicon_io dashboard/favicon_io
-COPY --from=go-builder /authorizer/build build
+COPY --from=node-builder --chown=nobody:nobody /authorizer/app/build app/build
+COPY --from=node-builder --chown=nobody:nobody /authorizer/app/favicon_io app/favicon_io
+COPY --from=node-builder --chown=nobody:nobody /authorizer/dashboard/build dashboard/build
+COPY --from=node-builder --chown=nobody:nobody /authorizer/dashboard/favicon_io dashboard/favicon_io
+COPY --from=go-builder --chown=nobody:nobody /authorizer/build build
 COPY templates templates
 EXPOSE 8080
+USER authorizer
 CMD [ "./build/server" ]
--- a/README.md
+++ b/README.md
@@ -29,13 +29,15 @@
 - ✅ OAuth2 and OpenID compatible APIs
 - ✅ APIs to update profile securely
 - ✅ Forgot password flow using email
- ✅ Social logins (Google, Github, Facebook, more coming soon)
+- ✅ Social logins (Google, Github, Facebook, LinkedIn, Apple more coming soon)
 - ✅ Role-based access management
 - ✅ Password-less login with magic link login
+- ✅ Multi factor authentication
+- ✅ Email templating
+- ✅ Webhooks

 ## Roadmap

- 2 Factor authentication
 - VueJS SDK
 - Svelte SDK
 - React Native SDK
--- a/app/package-lock.json
+++ b/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",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-0.17.0-beta.1.tgz",
-			"integrity": "sha512-jUlFUrs4Ys6LZ5hclPeRt84teygi+bA57d/IpV9GAqOrfifv70jkFeDln4+Bs0mZk74el23Xn+DR9380mqE4Cg==",
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-1.0.0.tgz",
+			"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",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-0.26.0-beta.0.tgz",
-			"integrity": "sha512-YfyiGYBmbsp3tLWIxOrOZ/hUTCmdMXVE9SLE8m1xsFsxzJJlUhepp0AMahSbH5EyLj5bchOhOw/rzgpnDZDvMw==",
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-1.0.0.tgz",
+			"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",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-0.17.0-beta.1.tgz",
-			"integrity": "sha512-jUlFUrs4Ys6LZ5hclPeRt84teygi+bA57d/IpV9GAqOrfifv70jkFeDln4+Bs0mZk74el23Xn+DR9380mqE4Cg==",
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-js/-/authorizer-js-1.0.0.tgz",
+			"integrity": "sha512-TtXA8y06CIZ5f+nk1tgPiSpGR9neCkGHtmKLqGWjWPdObDfekRU5qMtpC2S2uEljAI53mnueLZKmbd9hrReTag==",
 			"requires": {
-				"node-fetch": "^2.6.1"
+				"cross-fetch": "^3.1.5"
 			}
 		},
 		"@authorizerdev/authorizer-react": {
-			"version": "0.26.0-beta.0",
-			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-0.26.0-beta.0.tgz",
-			"integrity": "sha512-YfyiGYBmbsp3tLWIxOrOZ/hUTCmdMXVE9SLE8m1xsFsxzJJlUhepp0AMahSbH5EyLj5bchOhOw/rzgpnDZDvMw==",
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@authorizerdev/authorizer-react/-/authorizer-react-1.0.0.tgz",
+			"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",
--- a/app/package.json
+++ b/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",
--- a/dashboard/package-lock.json
+++ b/dashboard/package-lock.json
@@ -17,9 +17,6 @@
 				"@types/react-dom": "^17.0.11",
 				"@types/react-router-dom": "^5.3.2",
 				"dayjs": "^1.10.7",
-				"draft-js": "^0.11.7",
-				"draft-js-import-html": "^1.4.1",
-				"draftjs-to-html": "^0.9.1",
 				"esbuild": "^0.14.9",
 				"focus-visible": "^5.2.0",
 				"framer-motion": "^5.5.5",
@@ -29,14 +26,14 @@
 				"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/draftjs-to-html": "^0.8.1",
-				"@types/react-draft-wysiwyg": "^1.13.4"
+				"@types/react-email-editor": "^1.1.7"
 			}
 		},
 		"node_modules/@babel/code-frame": {
@@ -1153,25 +1150,6 @@
 				"react-dom": "^16.8.0 || 17.x"
 			}
 		},
-		"node_modules/@types/draft-js": {
-			"version": "0.11.9",
-			"resolved": "https://registry.npmjs.org/@types/draft-js/-/draft-js-0.11.9.tgz",
-			"integrity": "sha512-cQJBZjjIlGaPA1tOY+wGz2KhlPtAAZOIXpUvGPxPRw5uzZ2tcj8m6Yu1QDV9YgP36+cqE3cUvgkARBzgUiuI/Q==",
-			"dev": true,
-			"dependencies": {
-				"@types/react": "*",
-				"immutable": "~3.7.4"
-			}
-		},
-		"node_modules/@types/draftjs-to-html": {
-			"version": "0.8.1",
-			"resolved": "https://registry.npmjs.org/@types/draftjs-to-html/-/draftjs-to-html-0.8.1.tgz",
-			"integrity": "sha512-NBkphQs+qZ/sAz/j1pCUaxkPAOx00LTsE88aMSSfcvK+UfCpjHJDqIMCkm6wKotuJvY5w0BtdRazQ0sAaXzPdg==",
-			"dev": true,
-			"dependencies": {
-				"@types/draft-js": "*"
-			}
-		},
 		"node_modules/@types/history": {
 			"version": "4.7.9",
 			"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
@@ -1218,13 +1196,12 @@
 				"@types/react": "*"
 			}
 		},
-		"node_modules/@types/react-draft-wysiwyg": {
-			"version": "1.13.4",
-			"resolved": "https://registry.npmjs.org/@types/react-draft-wysiwyg/-/react-draft-wysiwyg-1.13.4.tgz",
-			"integrity": "sha512-wasD1t78JDmQvdPDRPf/mf5FSHMlncunW0F6KMOKB3awzi3Wi21yHMGsRAUOkfTr3R8F+yceG8fSLz0kYWu/QA==",
+		"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/draft-js": "*",
 				"@types/react": "*"
 			}
 		},
@@ -1296,11 +1273,6 @@
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
 			"integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
 		},
-		"node_modules/asap": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-			"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-		},
 		"node_modules/attr-accept": {
 			"version": "2.2.2",
 			"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
@@ -1387,16 +1359,6 @@
 				"toggle-selection": "^1.0.6"
 			}
 		},
-		"node_modules/core-js": {
-			"version": "3.24.1",
-			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.1.tgz",
-			"integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg==",
-			"hasInstallScript": true,
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/core-js"
-			}
-		},
 		"node_modules/cosmiconfig": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
@@ -1412,14 +1374,6 @@
 				"node": ">=8"
 			}
 		},
-		"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-box-model": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
@@ -1448,59 +1402,6 @@
 			"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
 			"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
 		},
-		"node_modules/draft-js": {
-			"version": "0.11.7",
-			"resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
-			"integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==",
-			"dependencies": {
-				"fbjs": "^2.0.0",
-				"immutable": "~3.7.4",
-				"object-assign": "^4.1.1"
-			},
-			"peerDependencies": {
-				"react": ">=0.14.0",
-				"react-dom": ">=0.14.0"
-			}
-		},
-		"node_modules/draft-js-import-element": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/draft-js-import-element/-/draft-js-import-element-1.4.0.tgz",
-			"integrity": "sha512-WmYT5PrCm47lGL5FkH6sRO3TTAcn7qNHsD3igiPqLG/RXrqyKrqN4+wBgbcT2lhna/yfWTRtgzAbQsSJoS1Meg==",
-			"dependencies": {
-				"draft-js-utils": "^1.4.0",
-				"synthetic-dom": "^1.4.0"
-			},
-			"peerDependencies": {
-				"draft-js": ">=0.10.0",
-				"immutable": "3.x.x"
-			}
-		},
-		"node_modules/draft-js-import-html": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/draft-js-import-html/-/draft-js-import-html-1.4.1.tgz",
-			"integrity": "sha512-KOZmtgxZriCDgg5Smr3Y09TjubvXe7rHPy/2fuLSsL+aSzwUDwH/aHDA/k47U+WfpmL4qgyg4oZhqx9TYJV0tg==",
-			"dependencies": {
-				"draft-js-import-element": "^1.4.0"
-			},
-			"peerDependencies": {
-				"draft-js": ">=0.10.0",
-				"immutable": "3.x.x"
-			}
-		},
-		"node_modules/draft-js-utils": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/draft-js-utils/-/draft-js-utils-1.4.1.tgz",
-			"integrity": "sha512-xE81Y+z/muC5D5z9qWmKfxEW1XyXfsBzSbSBk2JRsoD0yzMGGHQm/0MtuqHl/EUDkaBJJLjJ2EACycoDMY/OOg==",
-			"peerDependencies": {
-				"draft-js": ">=0.10.0",
-				"immutable": "3.x.x"
-			}
-		},
-		"node_modules/draftjs-to-html": {
-			"version": "0.9.1",
-			"resolved": "https://registry.npmjs.org/draftjs-to-html/-/draftjs-to-html-0.9.1.tgz",
-			"integrity": "sha512-fFstE6+IayaVFBEvaFt/wN8vdj8FsTRzij7dy7LI9QIwf5LgfHFi9zSpvCg+feJ2tbYVqHxUkjcibwpsTpgFVQ=="
-		},
 		"node_modules/draftjs-utils": {
 			"version": "0.10.2",
 			"resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
@@ -1774,26 +1675,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/fbjs": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz",
-			"integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==",
-			"dependencies": {
-				"core-js": "^3.6.4",
-				"cross-fetch": "^3.0.4",
-				"fbjs-css-vars": "^1.0.0",
-				"loose-envify": "^1.0.0",
-				"object-assign": "^4.1.0",
-				"promise": "^7.1.1",
-				"setimmediate": "^1.0.5",
-				"ua-parser-js": "^0.7.18"
-			}
-		},
-		"node_modules/fbjs-css-vars": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
-			"integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
-		},
 		"node_modules/file-selector": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.4.0.tgz",
@@ -1958,14 +1839,6 @@
 				"immutable": "3.x.x || 4.x.x"
 			}
 		},
-		"node_modules/immutable": {
-			"version": "3.7.6",
-			"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
-			"integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw==",
-			"engines": {
-				"node": ">=0.8.0"
-			}
-		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2049,25 +1922,6 @@
 				"loose-envify": "cli.js"
 			}
 		},
-		"node_modules/node-fetch": {
-			"version": "2.6.7",
-			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-			"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-			"dependencies": {
-				"whatwg-url": "^5.0.0"
-			},
-			"engines": {
-				"node": "4.x || >=6.0.0"
-			},
-			"peerDependencies": {
-				"encoding": "^0.1.0"
-			},
-			"peerDependenciesMeta": {
-				"encoding": {
-					"optional": true
-				}
-			}
-		},
 		"node_modules/object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -2136,14 +1990,6 @@
 				"tslib": "^2.1.0"
 			}
 		},
-		"node_modules/promise": {
-			"version": "7.3.1",
-			"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-			"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-			"dependencies": {
-				"asap": "~2.0.3"
-			}
-		},
 		"node_modules/prop-types": {
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -2224,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",
@@ -2424,11 +2278,6 @@
 				"object-assign": "^4.1.1"
 			}
 		},
-		"node_modules/setimmediate": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-			"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
-		},
 		"node_modules/source-map": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -2462,11 +2311,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/synthetic-dom": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/synthetic-dom/-/synthetic-dom-1.4.0.tgz",
-			"integrity": "sha512-mHv51ZsmZ+ShT/4s5kg+MGUIhY7Ltq4v03xpN1c8T1Krb5pScsh/lzEjyhrVD0soVDbThbd2e+4dD9vnDG4rhg=="
-		},
 		"node_modules/tiny-invariant": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
@@ -2485,11 +2329,6 @@
 			"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
 			"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
 		},
-		"node_modules/tr46": {
-			"version": "0.0.3",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
-		},
 		"node_modules/tslib": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
@@ -2507,24 +2346,6 @@
 				"node": ">=4.2.0"
 			}
 		},
-		"node_modules/ua-parser-js": {
-			"version": "0.7.31",
-			"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
-			"integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ==",
-			"funding": [
-				{
-					"type": "opencollective",
-					"url": "https://opencollective.com/ua-parser-js"
-				},
-				{
-					"type": "paypal",
-					"url": "https://paypal.me/faisalman"
-				}
-			],
-			"engines": {
-				"node": "*"
-			}
-		},
 		"node_modules/uc.micro": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
@@ -2588,20 +2409,6 @@
 				"loose-envify": "^1.0.0"
 			}
 		},
-		"node_modules/webidl-conversions": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
-		},
-		"node_modules/whatwg-url": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-			"dependencies": {
-				"tr46": "~0.0.3",
-				"webidl-conversions": "^3.0.0"
-			}
-		},
 		"node_modules/wonka": {
 			"version": "4.0.15",
 			"resolved": "https://registry.npmjs.org/wonka/-/wonka-4.0.15.tgz",
@@ -3441,25 +3248,6 @@
 				"tslib": "^2.1.0"
 			}
 		},
-		"@types/draft-js": {
-			"version": "0.11.9",
-			"resolved": "https://registry.npmjs.org/@types/draft-js/-/draft-js-0.11.9.tgz",
-			"integrity": "sha512-cQJBZjjIlGaPA1tOY+wGz2KhlPtAAZOIXpUvGPxPRw5uzZ2tcj8m6Yu1QDV9YgP36+cqE3cUvgkARBzgUiuI/Q==",
-			"dev": true,
-			"requires": {
-				"@types/react": "*",
-				"immutable": "~3.7.4"
-			}
-		},
-		"@types/draftjs-to-html": {
-			"version": "0.8.1",
-			"resolved": "https://registry.npmjs.org/@types/draftjs-to-html/-/draftjs-to-html-0.8.1.tgz",
-			"integrity": "sha512-NBkphQs+qZ/sAz/j1pCUaxkPAOx00LTsE88aMSSfcvK+UfCpjHJDqIMCkm6wKotuJvY5w0BtdRazQ0sAaXzPdg==",
-			"dev": true,
-			"requires": {
-				"@types/draft-js": "*"
-			}
-		},
 		"@types/history": {
 			"version": "4.7.9",
 			"resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz",
@@ -3506,13 +3294,12 @@
 				"@types/react": "*"
 			}
 		},
-		"@types/react-draft-wysiwyg": {
-			"version": "1.13.4",
-			"resolved": "https://registry.npmjs.org/@types/react-draft-wysiwyg/-/react-draft-wysiwyg-1.13.4.tgz",
-			"integrity": "sha512-wasD1t78JDmQvdPDRPf/mf5FSHMlncunW0F6KMOKB3awzi3Wi21yHMGsRAUOkfTr3R8F+yceG8fSLz0kYWu/QA==",
+		"@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/draft-js": "*",
 				"@types/react": "*"
 			}
 		},
@@ -3577,11 +3364,6 @@
 				}
 			}
 		},
-		"asap": {
-			"version": "2.0.6",
-			"resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-			"integrity": "sha512-BSHWgDSAiKs50o2Re8ppvp3seVHXSRM44cdSsT9FfNEUUZLOGWVCsiWaRPWM1Znn+mqZ1OfVZ3z3DWEzSp7hRA=="
-		},
 		"attr-accept": {
 			"version": "2.2.2",
 			"resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
@@ -3658,11 +3440,6 @@
 				"toggle-selection": "^1.0.6"
 			}
 		},
-		"core-js": {
-			"version": "3.24.1",
-			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.24.1.tgz",
-			"integrity": "sha512-0QTBSYSUZ6Gq21utGzkfITDylE8jWC9Ne1D2MrhvlsZBI1x39OdDIVbzSqtgMndIy6BlHxBXpMGqzZmnztg2rg=="
-		},
 		"cosmiconfig": {
 			"version": "6.0.0",
 			"resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
@@ -3675,14 +3452,6 @@
 				"yaml": "^1.7.2"
 			}
 		},
-		"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-box-model": {
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
@@ -3711,44 +3480,6 @@
 			"resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz",
 			"integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="
 		},
-		"draft-js": {
-			"version": "0.11.7",
-			"resolved": "https://registry.npmjs.org/draft-js/-/draft-js-0.11.7.tgz",
-			"integrity": "sha512-ne7yFfN4sEL82QPQEn80xnADR8/Q6ALVworbC5UOSzOvjffmYfFsr3xSZtxbIirti14R7Y33EZC5rivpLgIbsg==",
-			"requires": {
-				"fbjs": "^2.0.0",
-				"immutable": "~3.7.4",
-				"object-assign": "^4.1.1"
-			}
-		},
-		"draft-js-import-element": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/draft-js-import-element/-/draft-js-import-element-1.4.0.tgz",
-			"integrity": "sha512-WmYT5PrCm47lGL5FkH6sRO3TTAcn7qNHsD3igiPqLG/RXrqyKrqN4+wBgbcT2lhna/yfWTRtgzAbQsSJoS1Meg==",
-			"requires": {
-				"draft-js-utils": "^1.4.0",
-				"synthetic-dom": "^1.4.0"
-			}
-		},
-		"draft-js-import-html": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/draft-js-import-html/-/draft-js-import-html-1.4.1.tgz",
-			"integrity": "sha512-KOZmtgxZriCDgg5Smr3Y09TjubvXe7rHPy/2fuLSsL+aSzwUDwH/aHDA/k47U+WfpmL4qgyg4oZhqx9TYJV0tg==",
-			"requires": {
-				"draft-js-import-element": "^1.4.0"
-			}
-		},
-		"draft-js-utils": {
-			"version": "1.4.1",
-			"resolved": "https://registry.npmjs.org/draft-js-utils/-/draft-js-utils-1.4.1.tgz",
-			"integrity": "sha512-xE81Y+z/muC5D5z9qWmKfxEW1XyXfsBzSbSBk2JRsoD0yzMGGHQm/0MtuqHl/EUDkaBJJLjJ2EACycoDMY/OOg==",
-			"requires": {}
-		},
-		"draftjs-to-html": {
-			"version": "0.9.1",
-			"resolved": "https://registry.npmjs.org/draftjs-to-html/-/draftjs-to-html-0.9.1.tgz",
-			"integrity": "sha512-fFstE6+IayaVFBEvaFt/wN8vdj8FsTRzij7dy7LI9QIwf5LgfHFi9zSpvCg+feJ2tbYVqHxUkjcibwpsTpgFVQ=="
-		},
 		"draftjs-utils": {
 			"version": "0.10.2",
 			"resolved": "https://registry.npmjs.org/draftjs-utils/-/draftjs-utils-0.10.2.tgz",
@@ -3901,26 +3632,6 @@
 			"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
 			"integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
 		},
-		"fbjs": {
-			"version": "2.0.0",
-			"resolved": "https://registry.npmjs.org/fbjs/-/fbjs-2.0.0.tgz",
-			"integrity": "sha512-8XA8ny9ifxrAWlyhAbexXcs3rRMtxWcs3M0lctLfB49jRDHiaxj+Mo0XxbwE7nKZYzgCFoq64FS+WFd4IycPPQ==",
-			"requires": {
-				"core-js": "^3.6.4",
-				"cross-fetch": "^3.0.4",
-				"fbjs-css-vars": "^1.0.0",
-				"loose-envify": "^1.0.0",
-				"object-assign": "^4.1.0",
-				"promise": "^7.1.1",
-				"setimmediate": "^1.0.5",
-				"ua-parser-js": "^0.7.18"
-			}
-		},
-		"fbjs-css-vars": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/fbjs-css-vars/-/fbjs-css-vars-1.0.2.tgz",
-			"integrity": "sha512-b2XGFAFdWZWg0phtAWLHCk836A1Xann+I+Dgd3Gk64MHKZO44FfoD1KxyvbSh0qZsIoXQGGlVztIY+oitJPpRQ=="
-		},
 		"file-selector": {
 			"version": "0.4.0",
 			"resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.4.0.tgz",
@@ -4050,11 +3761,6 @@
 			"integrity": "sha512-kggLXBNciKDwKf+KYsuE+V5gw4dZ7nHyGMX9m0wy7urzWjKGWyNFetmArRLvRV0VrxKN70WylFsJvMTJx02OBQ==",
 			"requires": {}
 		},
-		"immutable": {
-			"version": "3.7.6",
-			"resolved": "https://registry.npmjs.org/immutable/-/immutable-3.7.6.tgz",
-			"integrity": "sha512-AizQPcaofEtO11RZhPPHBOJRdo/20MKQF9mBLnVkBoyHi1/zXK8fzVdnEpSV9gxqtnh6Qomfp3F0xT5qP/vThw=="
-		},
 		"import-fresh": {
 			"version": "3.3.0",
 			"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -4126,14 +3832,6 @@
 				"js-tokens": "^3.0.0 || ^4.0.0"
 			}
 		},
-		"node-fetch": {
-			"version": "2.6.7",
-			"resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
-			"integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
-			"requires": {
-				"whatwg-url": "^5.0.0"
-			}
-		},
 		"object-assign": {
 			"version": "4.1.1",
 			"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -4189,14 +3887,6 @@
 				}
 			}
 		},
-		"promise": {
-			"version": "7.3.1",
-			"resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
-			"integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
-			"requires": {
-				"asap": "~2.0.3"
-			}
-		},
 		"prop-types": {
 			"version": "15.8.1",
 			"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -4256,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",
@@ -4400,11 +4096,6 @@
 				"object-assign": "^4.1.1"
 			}
 		},
-		"setimmediate": {
-			"version": "1.0.5",
-			"resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
-			"integrity": "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="
-		},
 		"source-map": {
 			"version": "0.5.7",
 			"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -4432,11 +4123,6 @@
 				"has-flag": "^3.0.0"
 			}
 		},
-		"synthetic-dom": {
-			"version": "1.4.0",
-			"resolved": "https://registry.npmjs.org/synthetic-dom/-/synthetic-dom-1.4.0.tgz",
-			"integrity": "sha512-mHv51ZsmZ+ShT/4s5kg+MGUIhY7Ltq4v03xpN1c8T1Krb5pScsh/lzEjyhrVD0soVDbThbd2e+4dD9vnDG4rhg=="
-		},
 		"tiny-invariant": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz",
@@ -4452,11 +4138,6 @@
 			"resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
 			"integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
 		},
-		"tr46": {
-			"version": "0.0.3",
-			"resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-			"integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw=="
-		},
 		"tslib": {
 			"version": "2.3.1",
 			"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
@@ -4467,11 +4148,6 @@
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.4.tgz",
 			"integrity": "sha512-VgYs2A2QIRuGphtzFV7aQJduJ2gyfTljngLzjpfW9FoYZF6xuw1W0vW9ghCKLfcWrCFxK81CSGRAvS1pn4fIUg=="
 		},
-		"ua-parser-js": {
-			"version": "0.7.31",
-			"resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.31.tgz",
-			"integrity": "sha512-qLK/Xe9E2uzmYI3qLeOmI0tEOt+TBBQyUIAh4aAgU05FVYzeZrKUdkAZfBNVGRaHVgV0TDkdEngJSw/SyQchkQ=="
-		},
 		"uc.micro": {
 			"version": "1.0.6",
 			"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
@@ -4516,20 +4192,6 @@
 				"loose-envify": "^1.0.0"
 			}
 		},
-		"webidl-conversions": {
-			"version": "3.0.1",
-			"resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-			"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
-		},
-		"whatwg-url": {
-			"version": "5.0.0",
-			"resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
-			"integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
-			"requires": {
-				"tr46": "~0.0.3",
-				"webidl-conversions": "^3.0.0"
-			}
-		},
 		"wonka": {
 			"version": "4.0.15",
 			"resolved": "https://registry.npmjs.org/wonka/-/wonka-4.0.15.tgz",
--- a/dashboard/package.json
+++ b/dashboard/package.json
@@ -19,9 +19,6 @@
 		"@types/react-dom": "^17.0.11",
 		"@types/react-router-dom": "^5.3.2",
 		"dayjs": "^1.10.7",
-		"draft-js": "^0.11.7",
-		"draft-js-import-html": "^1.4.1",
-		"draftjs-to-html": "^0.9.1",
 		"esbuild": "^0.14.9",
 		"focus-visible": "^5.2.0",
 		"framer-motion": "^5.5.5",
@@ -31,13 +28,13 @@
 		"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/draftjs-to-html": "^0.8.1",
-		"@types/react-draft-wysiwyg": "^1.13.4"
+		"@types/react-email-editor": "^1.1.7"
 	}
 }
--- a/dashboard/src/components/EnvComponents/Features.tsx
+++ b/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>
 	);
--- a/dashboard/src/components/UpdateEmailTemplateModal.tsx
+++ b/dashboard/src/components/UpdateEmailTemplateModal.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import {
 	Button,
 	Center,
@@ -17,13 +17,22 @@ import {
 	Text,
 	useDisclosure,
 	useToast,
+	Alert,
+	AlertIcon,
+	Collapse,
+	Box,
+	TableContainer,
+	Table,
+	Thead,
+	Tr,
+	Th,
+	Tbody,
+	Td,
+	Code,
 } from '@chakra-ui/react';
-import { FaPlus } from 'react-icons/fa';
+import { FaPlus, FaAngleDown, FaAngleUp } from 'react-icons/fa';
 import { useClient } from 'urql';
-import { Editor } from 'react-draft-wysiwyg';
-import { EditorState, convertToRaw, Modifier } from 'draft-js';
-import draftToHtml from 'draftjs-to-html';
-import { stateFromHTML } from 'draft-js-import-html';
+import EmailEditor from 'react-email-editor';
 import {
 	UpdateModalViews,
 	EmailTemplateInputDataFields,
@@ -39,6 +48,7 @@ interface selectedEmailTemplateDataTypes {
 	[EmailTemplateInputDataFields.SUBJECT]: string;
 	[EmailTemplateInputDataFields.CREATED_AT]: number;
 	[EmailTemplateInputDataFields.TEMPLATE]: string;
+	[EmailTemplateInputDataFields.DESIGN]: string;
 }

 interface UpdateEmailTemplateInputPropTypes {
@@ -50,6 +60,7 @@ interface UpdateEmailTemplateInputPropTypes {
 interface templateVariableDataTypes {
 	text: string;
 	value: string;
+	description: string;
 }

 interface emailTemplateDataType {
@@ -77,11 +88,9 @@ const UpdateEmailTemplate = ({
 }: UpdateEmailTemplateInputPropTypes) => {
 	const client = useClient();
 	const toast = useToast();
+	const emailEditorRef = useRef(null);
 	const { isOpen, onOpen, onClose } = useDisclosure();
 	const [loading, setLoading] = useState<boolean>(false);
-	const [editorState, setEditorState] = React.useState<EditorState>(
-		EditorState.createEmpty()
-	);
 	const [templateVariables, setTemplateVariables] = useState<
 		templateVariableDataTypes[]
 	>([]);
@@ -91,9 +100,23 @@ const UpdateEmailTemplate = ({
 	const [validator, setValidator] = useState<validatorDataType>({
 		...initTemplateValidatorData,
 	});
-	const onEditorStateChange = (editorState: EditorState) => {
-		setEditorState(editorState);
+	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({
@@ -105,14 +128,8 @@ const UpdateEmailTemplate = ({
 	};

 	const validateData = () => {
-		const rawData: string = draftToHtml(
-			convertToRaw(editorState.getCurrentContent())
-		).trim();
 		return (
 			!loading &&
-			rawData &&
-			rawData !== '<p></p>' &&
-			rawData !== '<h1></h1>' &&
 			templateData[EmailTemplateInputDataFields.EVENT_NAME].length > 0 &&
 			templateData[EmailTemplateInputDataFields.SUBJECT].length > 0 &&
 			validator[EmailTemplateInputDataFields.SUBJECT]
@@ -122,69 +139,72 @@ const UpdateEmailTemplate = ({
 	const saveData = async () => {
 		if (!validateData()) return;
 		setLoading(true);
-		const params = {
-			[EmailTemplateInputDataFields.EVENT_NAME]:
-				templateData[EmailTemplateInputDataFields.EVENT_NAME],
-			[EmailTemplateInputDataFields.SUBJECT]:
-				templateData[EmailTemplateInputDataFields.SUBJECT],
-			[EmailTemplateInputDataFields.TEMPLATE]: draftToHtml(
-				convertToRaw(editorState.getCurrentContent())
-			).trim(),
-		};
-		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();
+		// @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);
-			setEditorState(
-				EditorState.createWithContent(stateFromHTML(selectedTemplate.template))
-			);
 		} else {
 			setTemplateData({ ...initTemplateData });
-			setEditorState(EditorState.createEmpty());
 		}
 	};
 	useEffect(() => {
@@ -194,35 +214,36 @@ const UpdateEmailTemplate = ({
 			selectedTemplate &&
 			Object.keys(selectedTemplate || {}).length
 		) {
-			const { id, created_at, template, ...rest } = selectedTemplate;
+			const { id, created_at, template, design, ...rest } = selectedTemplate;
 			setTemplateData(rest);
-			setEditorState(EditorState.createWithContent(stateFromHTML(template)));
 		}
 	}, [isOpen]);
 	useEffect(() => {
 		const updatedTemplateVariables = Object.entries(
 			emailTemplateVariables
-		).reduce((acc, varData): any => {
+		).reduce((acc, [key, val]): any => {
 			if (
 				(templateData[EmailTemplateInputDataFields.EVENT_NAME] !==
 					emailTemplateEventNames['Verify Otp'] &&
-					varData[1] === emailTemplateVariables.otp) ||
+					val === emailTemplateVariables.otp) ||
 				(templateData[EmailTemplateInputDataFields.EVENT_NAME] ===
 					emailTemplateEventNames['Verify Otp'] &&
-					varData[1] === emailTemplateVariables.verification_url)
+					val === emailTemplateVariables.verification_url)
 			) {
 				return acc;
 			}
 			return [
 				...acc,
 				{
-					text: varData[0],
-					value: varData[1],
+					text: key,
+					value: val.value,
+					description: val.description,
 				},
 			];
 		}, []);
 		setTemplateVariables(updatedTemplateVariables);
 	}, [templateData[EmailTemplateInputDataFields.EVENT_NAME]]);
+
 	return (
 		<>
 			{view === UpdateModalViews.ADD ? (
@@ -239,7 +260,14 @@ const UpdateEmailTemplate = ({
 			) : (
 				<MenuItem onClick={onOpen}>Edit</MenuItem>
 			)}
-			<Modal isOpen={isOpen} onClose={onClose} size="3xl">
+			<Modal
+				isOpen={isOpen}
+				onClose={() => {
+					resetData();
+					onClose();
+				}}
+				size="6xl"
+			>
 				<ModalOverlay />
 				<ModalContent>
 					<ModalHeader>
@@ -256,6 +284,73 @@ const UpdateEmailTemplate = ({
 							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"
@@ -290,7 +385,7 @@ const UpdateEmailTemplate = ({
 								width="100%"
 								justifyContent="start"
 								alignItems="center"
-								marginBottom="5%"
+								marginBottom="2%"
 							>
 								<Flex flex="1">Subject</Flex>
 								<Flex flex="3">
@@ -315,33 +410,21 @@ const UpdateEmailTemplate = ({
 							</Flex>
 							<Flex
 								width="100%"
-								justifyContent="space-between"
+								justifyContent="flex-start"
 								alignItems="center"
 								marginBottom="2%"
 							>
-								<Flex>Template Body</Flex>
-								<Text
-									style={{
-										fontSize: 14,
-									}}
-									color="gray.400"
-								>{`To select dynamic variables open curly braces "{"`}</Text>
+								Template Body
+							</Flex>
+							<Flex
+								width="100%"
+								justifyContent="flex-start"
+								alignItems="center"
+								border="1px solid"
+								borderColor="gray.200"
+							>
+								<EmailEditor ref={emailEditorRef} onReady={onReady} />
 							</Flex>
-							<Editor
-								editorState={editorState}
-								onEditorStateChange={onEditorStateChange}
-								editorStyle={{
-									border: '1px solid #d9d9d9',
-									borderRadius: '5px',
-									marginTop: '2%',
-									height: '35vh',
-								}}
-								mention={{
-									separator: ' ',
-									trigger: '{',
-									suggestions: templateVariables,
-								}}
-							/>
 						</Flex>
 					</ModalBody>
 					<ModalFooter>
--- a/dashboard/src/components/UpdateWebhookModal.tsx
+++ b/dashboard/src/components/UpdateWebhookModal.tsx
@@ -21,6 +21,9 @@ import {
 	Text,
 	useDisclosure,
 	useToast,
+	Alert,
+	AlertIcon,
+	Divider,
 } from '@chakra-ui/react';
 import {
 	FaAngleDown,
@@ -468,68 +471,12 @@ const UpdateWebhookModal = ({
 									</Text>
 								</Flex>
 							</Flex>
-							<Flex
-								width="100%"
-								justifyContent="center"
-								alignItems="center"
-								marginBottom="5%"
-								flexDirection="column"
-							>
-								<Flex
-									width="100%"
-									justifyContent="space-between"
-									alignItems="center"
-								>
-									<Flex>
-										Payload
-										<Text color="gray.500" ml={1}>
-											(example)
-										</Text>
-									</Flex>
-									<Button
-										onClick={() => setIsShowingPayload(!isShowingPayload)}
-										variant="ghost"
-									>
-										{isShowingPayload ? <FaAngleUp /> : <FaAngleDown />}
-									</Button>
-								</Flex>
-								<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>
+
 							<Flex
 								width="100%"
 								justifyContent="space-between"
 								alignItems="center"
-								marginBottom="2%"
+								marginBottom="5%"
 							>
 								<Flex>Headers</Flex>
 								<Flex>
@@ -546,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
@@ -615,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>
--- a/dashboard/src/constants.ts
+++ b/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 = {
@@ -168,6 +172,7 @@ export enum EmailTemplateInputDataFields {
 	SUBJECT = 'subject',
 	CREATED_AT = 'created_at',
 	TEMPLATE = 'template',
+	DESIGN = 'design',
 }

 export enum WebhookInputHeaderFields {
@@ -207,27 +212,90 @@ export enum webhookVerifiedStatus {
 }

 export const emailTemplateVariables = {
-	'user.id': '{.user.id}}',
-	'user.email': '{.user.email}}',
-	'user.given_name': '{.user.given_name}}',
-	'user.family_name': '{.user.family_name}}',
-	'user.signup_methods': '{.user.signup_methods}}',
-	'user.email_verified': '{.user.email_verified}}',
-	'user.picture': '{.user.picture}}',
-	'user.roles': '{.user.roles}}',
-	'user.middle_name': '{.user.middle_name}}',
-	'user.nickname': '{.user.nickname}}',
-	'user.preferred_username': '{.user.preferred_username}}',
-	'user.gender': '{.user.gender}}',
-	'user.birthdate': '{.user.birthdate}}',
-	'user.phone_number': '{.user.phone_number}}',
-	'user.phone_number_verified': '{.user.phone_number_verified}}',
-	'user.created_at': '{.user.created_at}}',
-	'user.updated_at': '{.user.updated_at}}',
-	'organization.name': '{.organization.name}}',
-	'organization.logo': '{.organization.logo}}',
-	verification_url: '{.verification_url}}',
-	otp: '{.otp}}',
+	'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 = `{
--- a/dashboard/src/graphql/queries/index.ts
+++ b/dashboard/src/graphql/queries/index.ts
@@ -18,48 +18,50 @@ export const AdminSessionQuery = `
 export const EnvVariablesQuery = `
  query {
    _env{
-      CLIENT_ID,
-      CLIENT_SECRET,
-	    GOOGLE_CLIENT_ID,
-      GOOGLE_CLIENT_SECRET,
-      GITHUB_CLIENT_ID,
-      GITHUB_CLIENT_SECRET,
-      FACEBOOK_CLIENT_ID,
-      FACEBOOK_CLIENT_SECRET,
-      LINKEDIN_CLIENT_ID,
-      LINKEDIN_CLIENT_SECRET,
-      APPLE_CLIENT_ID,
-      APPLE_CLIENT_SECRET,
-      DEFAULT_ROLES,
-      PROTECTED_ROLES,
-      ROLES,
-      JWT_TYPE,
-      JWT_SECRET,
-      JWT_ROLE_CLAIM,
-      JWT_PRIVATE_KEY,
-      JWT_PUBLIC_KEY,
-      REDIS_URL,
-      SMTP_HOST,
-      SMTP_PORT,
-      SMTP_USERNAME,
-      SMTP_PASSWORD,
-      SENDER_EMAIL,
-      ALLOWED_ORIGINS,
-      ORGANIZATION_NAME,
-      ORGANIZATION_LOGO,
-      ADMIN_SECRET,
-      DISABLE_LOGIN_PAGE,
-      DISABLE_MAGIC_LINK_LOGIN,
-      DISABLE_EMAIL_VERIFICATION,
-      DISABLE_BASIC_AUTHENTICATION,
-      DISABLE_SIGN_UP,
-      DISABLE_STRONG_PASSWORD,
-      DISABLE_REDIS_FOR_ENV,
-      CUSTOM_ACCESS_TOKEN_SCRIPT,
-      DATABASE_NAME,
-      DATABASE_TYPE,
-      DATABASE_URL,
-      ACCESS_TOKEN_EXPIRY_TIME,
+      CLIENT_ID
+      CLIENT_SECRET
+      GOOGLE_CLIENT_ID
+      GOOGLE_CLIENT_SECRET
+      GITHUB_CLIENT_ID
+      GITHUB_CLIENT_SECRET
+      FACEBOOK_CLIENT_ID
+      FACEBOOK_CLIENT_SECRET
+      LINKEDIN_CLIENT_ID
+      LINKEDIN_CLIENT_SECRET
+      APPLE_CLIENT_ID
+      APPLE_CLIENT_SECRET
+      DEFAULT_ROLES
+      PROTECTED_ROLES
+      ROLES
+      JWT_TYPE
+      JWT_SECRET
+      JWT_ROLE_CLAIM
+      JWT_PRIVATE_KEY
+      JWT_PUBLIC_KEY
+      REDIS_URL
+      SMTP_HOST
+      SMTP_PORT
+      SMTP_USERNAME
+      SMTP_PASSWORD
+      SENDER_EMAIL
+      ALLOWED_ORIGINS
+      ORGANIZATION_NAME
+      ORGANIZATION_LOGO
+      ADMIN_SECRET
+      DISABLE_LOGIN_PAGE
+      DISABLE_MAGIC_LINK_LOGIN
+      DISABLE_EMAIL_VERIFICATION
+      DISABLE_BASIC_AUTHENTICATION
+      DISABLE_SIGN_UP
+      DISABLE_STRONG_PASSWORD
+      DISABLE_REDIS_FOR_ENV
+      CUSTOM_ACCESS_TOKEN_SCRIPT
+      DATABASE_NAME
+      DATABASE_TYPE
+      DATABASE_URL
+      ACCESS_TOKEN_EXPIRY_TIME
+      DISABLE_MULTI_FACTOR_AUTHENTICATION
+      ENFORCE_MULTI_FACTOR_AUTHENTICATION
    }
  }
 `;
@@ -132,6 +134,7 @@ export const EmailTemplatesQuery = `
        subject
        created_at
        template
+        design
      }
      pagination {
        limit
--- a/dashboard/src/pages/EmailTemplates.tsx
+++ b/dashboard/src/pages/EmailTemplates.tsx
@@ -58,6 +58,7 @@ interface EmailTemplateDataType {
 	[EmailTemplateInputDataFields.SUBJECT]: string;
 	[EmailTemplateInputDataFields.CREATED_AT]: number;
 	[EmailTemplateInputDataFields.TEMPLATE]: string;
+	[EmailTemplateInputDataFields.DESIGN]: string;
 }

 const EmailTemplates = () => {
--- a/dashboard/src/pages/Environment.tsx
+++ b/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<
--- a/dashboard/src/pages/Users.tsx
+++ b/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>
--- a/server/constants/verification_types.go
+++ b/server/constants/verification_types.go
@@ -12,5 +12,5 @@ const (
 	// VerificationTypeInviteMember is the invite_member verification type
 	VerificationTypeInviteMember = "invite_member"
 	// VerificationTypeOTP is the otp verification type
-	VerificationTypeOTP = "otp"
+	VerificationTypeOTP = "verify_otp"
 )
--- a/server/db/models/email_templates.go
+++ b/server/db/models/email_templates.go
@@ -14,6 +14,7 @@ type EmailTemplate struct {
 	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"`
 }
@@ -29,6 +30,7 @@ func (e *EmailTemplate) AsAPIEmailTemplate() *model.EmailTemplate {
 		EventName: e.EventName,
 		Subject:   e.Subject,
 		Template:  e.Template,
+		Design:    e.Design,
 		CreatedAt: refs.NewInt64Ref(e.CreatedAt),
 		UpdatedAt: refs.NewInt64Ref(e.UpdatedAt),
 	}
--- a/server/db/providers/cassandradb/email_template.go
+++ b/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, subject, template,  created_at, updated_at) VALUES ('%s', '%s', '%s','%s', %d, %d)", KeySpace+"."+models.Collections.EmailTemplate, emailTemplate.ID, emailTemplate.EventName, emailTemplate.Subject, 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, subject, 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.Subject, &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, subject, 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.Subject, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
+	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.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, subject, 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.Subject, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
+	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.Subject, &emailTemplate.Design, &emailTemplate.Template, &emailTemplate.CreatedAt, &emailTemplate.UpdatedAt)
 	if err != nil {
 		return nil, err
 	}
--- a/server/db/providers/cassandradb/provider.go
+++ b/server/db/providers/cassandradb/provider.go
@@ -224,10 +224,11 @@ func NewProvider() (*provider, error) {
 		return nil, err
 	}
 	// add subject on email_templates table
-	emailTemplateAlterQuery := fmt.Sprintf(`ALTER TABLE %s.%s ADD subject text;`, KeySpace, models.Collections.EmailTemplate)
+	emailTemplateAlterQuery := fmt.Sprintf(`ALTER TABLE %s.%s ADD (subject text, design text);`, KeySpace, models.Collections.EmailTemplate)
 	err = session.Query(emailTemplateAlterQuery).Exec()
 	if err != nil {
-		return nil, err
+		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)
--- a/server/email/email.go
+++ b/server/email/email.go
@@ -18,7 +18,7 @@ import (

 func getDefaultTemplate(event string) *model.EmailTemplate {
 	switch event {
-	case constants.VerificationTypeBasicAuthSignup, constants.VerificationTypeMagicLinkLogin:
+	case constants.VerificationTypeBasicAuthSignup, constants.VerificationTypeMagicLinkLogin, constants.VerificationTypeUpdateEmail:
 		return &model.EmailTemplate{
 			Subject:  emailVerificationSubject,
 			Template: emailVerificationTemplate,
--- a/server/env/env.go
+++ b/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
 	}

--- a/server/graph/generated/generated.go
+++ b/server/graph/generated/generated.go
@@ -55,6 +55,7 @@ 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
@@ -406,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
@@ -2059,6 +2067,7 @@ type EmailTemplate {
 	id: ID!
 	event_name: String!
 	template: String!
+	design: String!
 	subject: String!
 	created_at: Int64
 	updated_at: Int64
@@ -2282,6 +2291,7 @@ input AddEmailTemplateRequest {
 	event_name: String!
 	subject: String!
 	template: String!
+	design: String!
 }

 input UpdateEmailTemplateRequest {
@@ -2289,6 +2299,7 @@ input UpdateEmailTemplateRequest {
 	event_name: String
 	template: String
 	subject: String
+	design: String
 }

 input DeleteEmailTemplateRequest {
@@ -3270,6 +3281,41 @@ 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 {
@@ -10521,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
+			}
 		}
 	}

@@ -11331,6 +11385,14 @@ func (ec *executionContext) unmarshalInputUpdateEmailTemplateRequest(ctx context
 			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
+			}
 		}
 	}

@@ -12162,6 +12224,11 @@ 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 {
--- a/server/graph/model/models_gen.go
+++ b/server/graph/model/models_gen.go
@@ -6,6 +6,7 @@ type AddEmailTemplateRequest struct {
 	EventName string `json:"event_name"`
 	Subject   string `json:"subject"`
 	Template  string `json:"template"`
+	Design    string `json:"design"`
 }

 type AddWebhookRequest struct {
@@ -45,6 +46,7 @@ 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"`
@@ -252,6 +254,7 @@ type UpdateEmailTemplateRequest struct {
 	EventName *string `json:"event_name"`
 	Template  *string `json:"template"`
 	Subject   *string `json:"subject"`
+	Design    *string `json:"design"`
 }

 type UpdateEnvInput struct {
--- a/server/graph/schema.graphqls
+++ b/server/graph/schema.graphqls
@@ -194,6 +194,7 @@ type EmailTemplate {
 	id: ID!
 	event_name: String!
 	template: String!
+	design: String!
 	subject: String!
 	created_at: Int64
 	updated_at: Int64
@@ -417,6 +418,7 @@ input AddEmailTemplateRequest {
 	event_name: String!
 	subject: String!
 	template: String!
+	design: String!
 }

 input UpdateEmailTemplateRequest {
@@ -424,6 +426,7 @@ input UpdateEmailTemplateRequest {
 	event_name: String
 	template: String
 	subject: String
+	design: String
 }

 input DeleteEmailTemplateRequest {
--- a/server/resolvers/add_email_template.go
+++ b/server/resolvers/add_email_template.go
@@ -40,10 +40,15 @@ func AddEmailTemplateResolver(ctx context.Context, params model.AddEmailTemplate
 		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)
--- a/server/resolvers/forgot_password.go
+++ b/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"
@@ -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"
-	if params.RedirectURI != nil {
-		redirectURL = *params.RedirectURI
+	redirectURL := parsers.GetAppURL(gc)
+	if strings.TrimSpace(refs.StringValue(params.RedirectURI)) != "" {
+		redirectURL = refs.StringValue(params.RedirectURI)
 	}

 	verificationToken, err := token.CreateVerificationToken(params.Email, constants.VerificationTypeForgotPassword, hostname, nonceHash, redirectURL)
--- a/server/resolvers/update_email_template.go
+++ b/server/resolvers/update_email_template.go
@@ -65,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
--- a/server/resolvers/update_profile.go
+++ b/server/resolvers/update_profile.go
@@ -245,7 +245,7 @@ func UpdateProfileResolver(ctx context.Context, params model.UpdateProfileInput)
 			}

 			// exec it as go routine so that we can reduce the api latency
-			go email.SendEmail([]string{user.Email}, constants.VerificationTypeBasicAuthSignup, map[string]interface{}{
+			go email.SendEmail([]string{user.Email}, verificationType, map[string]interface{}{
 				"user":             user.ToMap(),
 				"organization":     utils.GetOrganization(),
 				"verification_url": utils.GetEmailVerificationURL(verificationToken, hostname),
--- a/server/test/add_email_template_test.go
+++ b/server/test/add_email_template_test.go
@@ -31,7 +31,7 @@ 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:  " test ",
@@ -50,12 +50,25 @@ func addEmailTemplateTest(t *testing.T, s TestSetup) {
 			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",
 					Subject:   "Test email",
+					Design:    "Test design",
 				})
 				assert.NoError(t, err)
 				assert.NotNil(t, emailTemplate)
@@ -65,6 +78,7 @@ func addEmailTemplateTest(t *testing.T, s TestSetup) {
 				assert.NoError(t, err)
 				assert.Equal(t, et.EventName, eventType)
 				assert.Equal(t, "Test email", et.Subject)
+				assert.Equal(t, "Test design", et.Design)
 			})
 		}
 	})
--- a/server/test/update_email_template_test.go
+++ b/server/test/update_email_template_test.go
@@ -32,6 +32,7 @@ func updateEmailTemplateTest(t *testing.T, s TestSetup) {
 			ID:       emailTemplate.ID,
 			Template: refs.NewStringRef("Updated test template"),
 			Subject:  refs.NewStringRef("Updated subject"),
+			Design:   refs.NewStringRef("Updated design"),
 		})

 		assert.NoError(t, err)
@@ -44,5 +45,6 @@ func updateEmailTemplateTest(t *testing.T, s TestSetup) {
 		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")
 	})
 }
Author	SHA1	Message	Date
Lakhan Samani	da7c17271e	Merge pull request #215 from wabscale/main fix: rootless container	2022-08-18 06:11:32 +05:30
John McCann Cunniff Jr	69fbd631ff	fix: rootless container	2022-08-17 20:33:05 -04:00
Lakhan Samani	deb209e358	Update README.md	2022-08-15 22:28:43 +05:30
Lakhan Samani	ea6b4cbc8d	Update README.md	2022-08-15 22:28:13 +05:30
Lakhan Samani	2f21a09b2e	chore: bump app/authorizer-react 1.0.0	2022-08-15 21:06:57 +05:30
Lakhan Samani	4ab775f2c1	fix: apple & linkedin env config	2022-08-13 12:37:04 +05:30
Lakhan Samani	b6e8023104	Merge pull request #211 from authorizerdev/fix/email-template fix email template	2022-08-13 11:58:07 +05:30
Lakhan Samani	4f1597e5d2	fix: update note on features	2022-08-13 11:57:03 +05:30
Lakhan Samani	4f81d1969e	fix email template - fix verification types - add design to cassandra db provider for email_template - fix default email verification types to include update_email	2022-08-13 11:34:24 +05:30
Lakhan Samani	ad3e615ac7	Merge pull request #210 from authorizerdev/fix/dashboard-ui Fix/dashboard UI	2022-08-13 03:57:19 +05:30
anik-ghosh-au7	e9a2301d2b	feat: [dashboard] add env options for multi factor auth	2022-08-11 17:50:45 +05:30
anik-ghosh-au7	48bbfa31af	fix: template editor design	2022-08-11 17:08:23 +05:30
anik-ghosh-au7	d7f5f563cc	fix: add design to email template	2022-08-11 16:45:59 +05:30
anik-ghosh-au7	6c29149fbe	fix: email template editor	2022-08-11 15:08:50 +05:30
Lakhan Samani	bbd4d43317	fix: add padding to editor	2022-08-09 12:10:50 +05:30
Lakhan Samani	c4d2f62657	fix: clear form on close	2022-08-09 11:55:55 +05:30
Lakhan Samani	5d78bf178f	fix: email template info	2022-08-09 11:41:51 +05:30
Lakhan Samani	58749497bd	fix: payload example for webhook	2022-08-09 10:04:06 +05:30
Lakhan Samani	5c6e643efb	Merge pull request #209 from authorizerdev/feat/send-email-based-on-template feat: send email based on template	2022-08-09 09:17:29 +05:30