From 4f1597e5d267279b7827ef8bdf8ea0bd81b34be9 Mon Sep 17 00:00:00 2001
From: Lakhan Samani <lakhan.m.samani@gmail.com>
Date: Sat, 13 Aug 2022 11:57:03 +0530
Subject: [PATCH] fix: update note on features

---
 .../src/components/EnvComponents/Features.tsx | 33 +++++++++++++------
 dashboard/src/graphql/queries/index.ts        |  2 +-
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/dashboard/src/components/EnvComponents/Features.tsx b/dashboard/src/components/EnvComponents/Features.tsx
index 095146d..6da3028 100644
--- 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,9 +83,15 @@ const Features = ({ variables, setVariables }: any) => {
 						/>
 					</Flex>
 				</Flex>
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Disable Multi Factor Authentication:</Text>
+				<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
@@ -96,13 +102,20 @@ const Features = ({ variables, setVariables }: any) => {
 					</Flex>
 				</Flex>
 			</Stack>
-			<Text fontSize="md" paddingTop="2%" fontWeight="bold" mb={5}>
+			<Divider paddingY={5} />
+			<Text fontSize="md" paddingTop={5} fontWeight="bold" mb={5}>
 				Enable Features
 			</Text>
-			<Stack spacing={6} padding="2% 0%">
-				<Flex>
-					<Flex w="100%" justifyContent="start" alignItems="center">
-						<Text fontSize="sm">Enforce Multi Factor Authentication:</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
diff --git a/dashboard/src/graphql/queries/index.ts b/dashboard/src/graphql/queries/index.ts
index 3bdaee8..4823682 100644
--- a/dashboard/src/graphql/queries/index.ts
+++ b/dashboard/src/graphql/queries/index.ts
@@ -20,7 +20,7 @@ export const EnvVariablesQuery = `
     _env{
       CLIENT_ID
       CLIENT_SECRET
-	    GOOGLE_CLIENT_ID
+      GOOGLE_CLIENT_ID
       GOOGLE_CLIENT_SECRET
       GITHUB_CLIENT_ID
       GITHUB_CLIENT_SECRET