feat: add base for apple login

dashboard/src/components/EnvComponents/OAuthConfig.tsx

@@ -9,7 +9,13 @@ import {
 	Divider,
 	useMediaQuery,
 } from '@chakra-ui/react';
-import { FaGoogle, FaGithub, FaFacebookF, FaLinkedin } from 'react-icons/fa';
+import {
+	FaGoogle,
+	FaGithub,
+	FaFacebookF,
+	FaLinkedin,
+	FaApple,
+} from 'react-icons/fa';
 import { TextInputType, HiddenInputType } from '../../constants';
 
 const OAuthConfig = ({
@@ -216,7 +222,45 @@ const OAuthConfig = ({
 								fieldVisibility={fieldVisibility}
 								setFieldVisibility={setFieldVisibility}
 								inputType={HiddenInputType.LINKEDIN_CLIENT_SECRET}
-								placeholder="LinkedIn Secret"
+								placeholder="LinkedIn Client Secret"
+							/>
+						</Center>
+					</Flex>
+					<Flex direction={isNotSmallerScreen ? 'row' : 'column'}>
+						<Center
+							w={isNotSmallerScreen ? '55px' : '35px'}
+							h="35px"
+							marginRight="1.5%"
+							border="1px solid #3b5998"
+							borderRadius="5px"
+						>
+							<FaApple style={{ color: '#3b5998' }} />
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+							marginRight="1.5%"
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								inputType={TextInputType.APPLE_CLIENT_ID}
+								placeholder="Apple Client ID"
+							/>
+						</Center>
+						<Center
+							w={isNotSmallerScreen ? '70%' : '100%'}
+							mt={isNotSmallerScreen ? '0' : '3'}
+						>
+							<InputField
+								borderRadius={5}
+								variables={envVariables}
+								setVariables={setVariables}
+								fieldVisibility={fieldVisibility}
+								setFieldVisibility={setFieldVisibility}
+								inputType={HiddenInputType.APPLE_CLIENT_SECRET}
+								placeholder="Apple CLient Secret"
 							/>
 						</Center>
 					</Flex>

dashboard/src/constants.ts

@@ -8,6 +8,8 @@ export const TextInputType = {
 	GITHUB_CLIENT_ID: 'GITHUB_CLIENT_ID',
 	FACEBOOK_CLIENT_ID: 'FACEBOOK_CLIENT_ID',
 	LINKEDIN_CLIENT_ID: 'LINKEDIN_CLIENT_ID',
+	APPLE_CLIENT_ID: 'APPLE_CLIENT_ID',
+	APPLE_CLIENT_SECRET: 'APPLE_CLIENT_SECRET',
 	JWT_ROLE_CLAIM: 'JWT_ROLE_CLAIM',
 	REDIS_URL: 'REDIS_URL',
 	SMTP_HOST: 'SMTP_HOST',
@@ -33,6 +35,7 @@ export const HiddenInputType = {
 	GITHUB_CLIENT_SECRET: 'GITHUB_CLIENT_SECRET',
 	FACEBOOK_CLIENT_SECRET: 'FACEBOOK_CLIENT_SECRET',
 	LINKEDIN_CLIENT_SECRET: 'LINKEDIN_CLIENT_SECRET',
+	APPLE_CLIENT_SECRET: 'APPLE_CLIENT_SECRET',
 	JWT_SECRET: 'JWT_SECRET',
 	SMTP_PASSWORD: 'SMTP_PASSWORD',
 	ADMIN_SECRET: 'ADMIN_SECRET',
@@ -103,6 +106,8 @@ export interface envVarTypes {
 	FACEBOOK_CLIENT_SECRET: string;
 	LINKEDIN_CLIENT_ID: string;
 	LINKEDIN_CLIENT_SECRET: string;
+	APPLE_CLIENT_ID: string;
+	APPLE_CLIENT_SECRET: string;
 	ROLES: [string] | [];
 	DEFAULT_ROLES: [string] | [];
 	PROTECTED_ROLES: [string] | [];

dashboard/src/graphql/queries/index.ts

@@ -28,6 +28,8 @@ export const EnvVariablesQuery = `
       FACEBOOK_CLIENT_SECRET,
       LINKEDIN_CLIENT_ID,
       LINKEDIN_CLIENT_SECRET,
+      APPLE_CLIENT_ID,
+      APPLE_CLIENT_SECRET,
       DEFAULT_ROLES,
       PROTECTED_ROLES,
       ROLES,

dashboard/src/pages/Environment.tsx

@@ -48,6 +48,8 @@ const Environment = () => {
 		FACEBOOK_CLIENT_SECRET: '',
 		LINKEDIN_CLIENT_ID: '',
 		LINKEDIN_CLIENT_SECRET: '',
+		APPLE_CLIENT_ID: '',
+		APPLE_CLIENT_SECRET: '',
 		ROLES: [],
 		DEFAULT_ROLES: [],
 		PROTECTED_ROLES: [],
@@ -86,6 +88,7 @@ const Environment = () => {
 		GITHUB_CLIENT_SECRET: false,
 		FACEBOOK_CLIENT_SECRET: false,
 		LINKEDIN_CLIENT_SECRET: false,
+		APPLE_CLIENT_SECRET: false,
 		JWT_SECRET: false,
 		SMTP_PASSWORD: false,
 		ADMIN_SECRET: false,