Updating api auth and ms graph endpoint (#19)

* Updating api auth and ms graph endpoint

* updating feature flag value

* Updating get feature flags functions

* Updating get feature flags functions

.gitignore

@@ -1,3 +1,4 @@
 .vscode/*
 node_modules
 **/.env
+.DS_Store

api/.gitignore

@@ -55,4 +55,5 @@ pids
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 
+
 local.settings.json

api/package.json

@@ -24,9 +24,11 @@
     "@nestjs/azure-database": "^3.0.0",
     "@nestjs/azure-func-http": "^0.10.0",
     "@nestjs/common": "^10.0.0",
+    "@nestjs/config": "^3.2.2",
     "@nestjs/core": "^10.0.0",
+    "@nestjs/passport": "^10.0.3",
     "@nestjs/platform-express": "^10.0.0",
-    "@noahspan/noahspan-modules": "^0.1.2",
+    "@noahspan/noahspan-modules": "^0.2.7",
     "@schematics/angular": "^17.3.7",
     "dotenv": "^16.4.5",
     "reflect-metadata": "0.1.13",
@@ -39,6 +41,7 @@
     "@types/express": "^4.17.17",
     "@types/jest": "^29.5.2",
     "@types/node": "^20.3.1",
+    "@types/passport-azure-ad": "^4.3.6",
     "@types/supertest": "^6.0.0",
     "jest": "^29.5.0",
     "source-map-support": "^0.5.21",

api/src/app.controller.ts

@@ -1,34 +1,57 @@
 import { Controller, Get, Query } from '@nestjs/common';
-import { AppService } from './app.service';
-import { AppConfigService, AuthService } from '@noahspan/noahspan-modules';
+import {
+  AppConfigService,
+  MsGraphService,
+  MsGraphClient
+} from '@noahspan/noahspan-modules';
 import { FeatureFlagValue } from '@azure/app-configuration';
+import { Public } from '@noahspan/noahspan-modules';
 
 @Controller()
 export class AppController {
   constructor(
     private readonly appConfigService: AppConfigService,
-    private readonly authService: AuthService
+    private readonly msGraphService: MsGraphService
   ) {}
 
+  @Public()
   @Get('featureFlags')
-  async getFeatureFlags(@Query() query: any): Promise<FeatureFlagValue[]> {
+  async getFeatureFlags(
+    @Query() query: any
+  ): Promise<{ key: string; enabled: boolean }[]> {
     try {
-      const token: string = await this.authService.getToken(
-        'client_credentials',
-        process.env.CLIENT_ID,
-        process.env.CLIENT_SECRET,
-        'https://azconfig.io'
-      );
-      const featureFlags: FeatureFlagValue[] =
+      const featureFlagKeys: string[] =
+        query.keys && query.keys.toString().includes(';')
+          ? query.keys.split(';')
+          : [query.keys];
+      const featureFlagLabel: string = query.label;
+      const featureFlags: { key: string; enabled: boolean }[] =
         await this.appConfigService.getFeatureFlags(
-          token,
-          `${query.key}`,
-          query.label
+          featureFlagKeys,
+          featureFlagLabel
         );
 
       return featureFlags;
     } catch (error) {
-      console.log(error);
+      return error;
+    }
+  }
+
+  @Public()
+  @Get('profilePhoto')
+  async getProfilePhoto(@Query() query: any): Promise<any> {}
+
+  @Get('userProfile')
+  async getUserProfile(@Query() query: any) {
+    try {
+      const username: string = query.username;
+      const client: MsGraphClient =
+        await this.msGraphService.getMsGraphClient();
+      const userProfile = await client.api(`users/${username}`).get();
+
+      return userProfile;
+    } catch (error) {
+      return error;
     }
   }
 }

api/src/app.module.ts

@@ -1,18 +1,42 @@
 import { Module } from '@nestjs/common';
 import { AppController } from './app.controller';
 import { AppService } from './app.service';
-import { AppConfigModule, AuthModule } from '@noahspan/noahspan-modules';
+import {
+  AppConfigModule,
+  AuthModule,
+  AuthGuard,
+  MsGraphModule
+} from '@noahspan/noahspan-modules';
+import { ConfigModule } from '@nestjs/config';
+import { APP_GUARD } from '@nestjs/core';
 
 @Module({
   imports: [
+    ConfigModule.forRoot(),
     AppConfigModule.register({
-      url: process.env.APP_CONFIG_URL
+      url: process.env.APP_CONFIG_URL,
+      tenantId: process.env.TENANT_ID,
+      clientId: process.env.CLIENT_ID,
+      clientSecret: process.env.CLIENT_SECRET
     }),
     AuthModule.register({
-      tenantId: process.env.TENANT_ID
+      tenantId: process.env.TENANT_ID,
+      clientId: process.env.CLIENT_ID,
+      clientSecret: process.env.CLIENT_SECRET
+    }),
+    MsGraphModule.register({
+      tenantId: process.env.TENANT_ID,
+      clientId: process.env.CLIENT_ID,
+      clientSecret: process.env.CLIENT_SECRET
     })
   ],
   controllers: [AppController],
-  providers: [AppService]
+  providers: [
+    {
+      provide: APP_GUARD,
+      useClass: AuthGuard
+    },
+    AppService
+  ]
 })
 export class AppModule {}

app/package.json

@@ -16,7 +16,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
     "@fortawesome/react-fontawesome": "^0.2.2",
     "@nextui-org/react": "^2.3.6",
-    "@noahspan/noahspan-components": "^0.2.4",
+    "@noahspan/noahspan-components": "^0.2.5",
     "axios": "^1.7.2",
     "framer-motion": "^11.1.7",
     "react": "^18.2.0",

app/src/App.tsx

@@ -11,10 +11,12 @@ const App: React.FC<unknown> = () => {
   useEffect(() => {
     const getFeatureFlags = async () => {
       try {
+        const featureFlagKeys: string = 'flying-pilots';
         const response: AxiosResponse = await axios.get(
-          `http://localhost:7071/api/featureFlags?key=flying*&label=${process.env.NODE_ENV}`
+          `http://localhost:7071/api/featureFlags?keys=${featureFlagKeys}&label=${process.env.NODE_ENV}`
         );
-        const featureFlags: unknown[] = response.data;
+        const featureFlags: { key: string; enabled: boolean }[] = response.data;
+        console.log(featureFlags);
 
         if (featureFlags.length > 0) {
           appContext.dispatch({

app/src/components/logbookEntryForm/LogbookEntryForm.tsx

@@ -1,122 +1,122 @@
-import React from 'react';
-import {
-  Accordion,
-  AccordionItem,
-  Button,
-  DatePicker,
-  Input
-} from '@nextui-org/react';
-import { useForm, Controller, SubmitHandler } from 'react-hook-form';
+// import React from 'react';
+// import {
+//   Accordion,
+//   AccordionItem,
+//   Button,
+//   DatePicker,
+//   Input
+// } from '@nextui-org/react';
+// import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 
-const LogbookEntryForm: React.FC<unknown> = () => {
-  const { control, handleSubmit } = useForm();
+// const LogbookEntryForm: React.FC<unknown> = () => {
+//   const { control, handleSubmit } = useForm();
 
-  const onSubmit = (data: unknown) => {
-    console.log(data);
-  };
+//   const onSubmit = (data: unknown) => {
+//     console.log(data);
+//   };
 
-  return (
-    <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
-      <div className="grid grid-cols-2 gap-4">
-        <div className="self-center">
-          <label>Date</label>
-        </div>
-        <div>
-          <Controller
-            name="date"
-            control={control}
-            render={({ field }) => <DatePicker labelPlacement="outside-left" />}
-          />
-        </div>
-        <div className="self-center">
-          <label>Aircraft Type</label>
-        </div>
-        <div>
-          <Controller
-            name="aircraftType"
-            control={control}
-            render={({ field }) => (
-              <Input fullWidth={true} labelPlacement="outside-left" />
-            )}
-          />
-        </div>
-        <div className="self-center">
-          <label>Aircraft Identity</label>
-        </div>
-        <div>
-          <Controller
-            name="aircraftIdent"
-            control={control}
-            render={({ field }) => (
-              <Input fullWidth={true} labelPlacement="outside-left" />
-            )}
-          />
-        </div>
-        <div className="self-center">
-          <label>Route To</label>
-        </div>
-        <div>
-          <Controller
-            name="routeTo"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-        <div className="self-center">
-          <label>Route From</label>
-        </div>
-        <div>
-          <Controller
-            name="routeFrom"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-        <div className="self-center">
-          <label>Duration of Flight</label>
-        </div>
-        <div>
-          <Controller
-            name="flightDuration"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-        <div className="self-center">
-          <label>Single Engine Land</label>
-        </div>
-        <div>
-          <Controller
-            name="aircraftSEL"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-        <div className="col-span-2">
-          <Accordion>
-            <AccordionItem title="Aircraft Category and Class">
-              <div className="self-center">
-                <label>Single Engine Land</label>
-              </div>
-              <div>
-                <Controller
-                  name="aircraftSEL"
-                  control={control}
-                  render={({ field }) => <Input />}
-                />
-              </div>
-            </AccordionItem>
-          </Accordion>
-        </div>
-        <div className="col-span-2 justify-self-end">
-          <Button color="default">Cancel</Button>
-          <Button className="ml-10" color="primary">
-            Save
-          </Button>
-        </div>
-      </div>
-    </form>
-  );
-};
+//   return (
+//     <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
+//       <div className="grid grid-cols-2 gap-4">
+//         <div className="self-center">
+//           <label>Date</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="date"
+//             control={control}
+//             render={({ field }) => <DatePicker labelPlacement="outside-left" />}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Aircraft Type</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="aircraftType"
+//             control={control}
+//             render={({ field }) => (
+//               <Input fullWidth={true} labelPlacement="outside-left" />
+//             )}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Aircraft Identity</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="aircraftIdent"
+//             control={control}
+//             render={({ field }) => (
+//               <Input fullWidth={true} labelPlacement="outside-left" />
+//             )}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Route To</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="routeTo"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Route From</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="routeFrom"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Duration of Flight</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="flightDuration"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Single Engine Land</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="aircraftSEL"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//         <div className="col-span-2">
+//           <Accordion>
+//             <AccordionItem title="Aircraft Category and Class">
+//               <div className="self-center">
+//                 <label>Single Engine Land</label>
+//               </div>
+//               <div>
+//                 <Controller
+//                   name="aircraftSEL"
+//                   control={control}
+//                   render={({ field }) => <Input />}
+//                 />
+//               </div>
+//             </AccordionItem>
+//           </Accordion>
+//         </div>
+//         <div className="col-span-2 justify-self-end">
+//           <Button color="default">Cancel</Button>
+//           <Button className="ml-10" color="primary">
+//             Save
+//           </Button>
+//         </div>
+//       </div>
+//     </form>
+//   );
+// };
 
-export default LogbookEntryForm;
+// export default LogbookEntryForm;

app/src/components/pilotForm/PilotForm.tsx

@@ -1,85 +1,85 @@
-import {
-  Accordion,
-  AccordionItem,
-  Button,
-  DatePicker,
-  Input,
-  Select,
-  SelectItem
-} from '@nextui-org/react';
-import { useForm, Controller, SubmitHandler } from 'react-hook-form';
+// import {
+//   Accordion,
+//   AccordionItem,
+//   Button,
+//   DatePicker,
+//   Input,
+//   Select,
+//   SelectItem
+// } from '@nextui-org/react';
+// import { useForm, Controller, SubmitHandler } from 'react-hook-form';
 
-const PilotForm: React.FC<unknown> = () => {
-  const { control, handleSubmit } = useForm();
+// const PilotForm: React.FC<unknown> = () => {
+//   const { control, handleSubmit } = useForm();
 
-  const onSubmit = (data: unknown) => {
-    console.log(data);
-  };
+//   const onSubmit = (data: unknown) => {
+//     console.log(data);
+//   };
 
-  return (
-    <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
-      <div className="grid grid-cols-2 gap-4">
-        <div className="self-center">
-          <label>First Name</label>
-        </div>
-        <div>
-          <Controller
-            name="firstName"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-        <div className="self-center">
-          <label>Last Name</label>
-        </div>
-        <div>
-          <Controller
-            name="lastName"
-            control={control}
-            render={({ field }) => <Input />}
-          />
-        </div>
-      </div>
-      <Accordion>
-        <AccordionItem title="Medical Certificate">
-          <div className="grid grid-cols-2 gap-4">
-            <div className="self-center">
-              <label>Class</label>
-            </div>
-            <div>
-              <Controller
-                name="medicalClass"
-                control={control}
-                render={({ field }) => (
-                  <Select>
-                    <SelectItem key="first" value="First">
-                      First
-                    </SelectItem>
-                    <SelectItem key="second" value="Second">
-                      Second
-                    </SelectItem>
-                    <SelectItem key="Third" value="Third">
-                      Third
-                    </SelectItem>
-                  </Select>
-                )}
-              />
-            </div>
-            <div className="self-center">
-              <label>Expires</label>
-            </div>
-            <div>
-              <Controller
-                name="medicalExpiration"
-                control={control}
-                render={({ field }) => <DatePicker />}
-              />
-            </div>
-          </div>
-        </AccordionItem>
-      </Accordion>
-    </form>
-  );
-};
+//   return (
+//     <form className="m-10" onSubmit={handleSubmit(onSubmit)}>
+//       <div className="grid grid-cols-2 gap-4">
+//         <div className="self-center">
+//           <label>First Name</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="firstName"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//         <div className="self-center">
+//           <label>Last Name</label>
+//         </div>
+//         <div>
+//           <Controller
+//             name="lastName"
+//             control={control}
+//             render={({ field }) => <Input />}
+//           />
+//         </div>
+//       </div>
+//       <Accordion>
+//         <AccordionItem title="Medical Certificate">
+//           <div className="grid grid-cols-2 gap-4">
+//             <div className="self-center">
+//               <label>Class</label>
+//             </div>
+//             <div>
+//               <Controller
+//                 name="medicalClass"
+//                 control={control}
+//                 render={({ field }) => (
+//                   <Select>
+//                     <SelectItem key="first" value="First">
+//                       First
+//                     </SelectItem>
+//                     <SelectItem key="second" value="Second">
+//                       Second
+//                     </SelectItem>
+//                     <SelectItem key="Third" value="Third">
+//                       Third
+//                     </SelectItem>
+//                   </Select>
+//                 )}
+//               />
+//             </div>
+//             <div className="self-center">
+//               <label>Expires</label>
+//             </div>
+//             <div>
+//               <Controller
+//                 name="medicalExpiration"
+//                 control={control}
+//                 render={({ field }) => <DatePicker />}
+//               />
+//             </div>
+//           </div>
+//         </AccordionItem>
+//       </Accordion>
+//     </form>
+//   );
+// };
 
-export default PilotForm;
+// export default PilotForm;

app/src/components/pilots/Pilots.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import SiteNav from '../siteNav/SiteNav';
-import PilotForm from '../pilotForm/PilotForm';
+// import PilotForm from '../pilotForm/PilotForm';
 import { Button } from '@nextui-org/react';
 import {
   Drawer,
@@ -37,9 +37,7 @@ const Pilots: React.FC<unknown> = () => {
             <DrawerHeader>
               <h2>Add Pilot</h2>
             </DrawerHeader>
-            <DrawerBody>
-              <PilotForm />
-            </DrawerBody>
+            <DrawerBody>{/* <PilotForm /> */}</DrawerBody>
             <DrawerFooter>
               <div className="flex gap-4 justify-end justify-self-center">
                 <div>

app/src/components/siteNav/SiteNav.tsx

@@ -38,7 +38,7 @@ const SiteNav: React.FC<unknown> = () => {
       <NavbarContent justify="center">
         <NavbarItem>
           {appContext.state.featureFlags.find(
-            (featureFlag) => featureFlag.id === 'flying-pilots'
+            (featureFlag) => featureFlag.key === 'flying-pilots'
           )?.enabled && (
             <Link>
               <ReactRouterLink to="/">Pilots</ReactRouterLink>

app/src/context/appContext/IAppContextState.ts

@@ -1,3 +1,3 @@
 export interface IAppContextState {
-  featureFlags: unknown[];
+  featureFlags: { key: string; enabled: boolean }[];
 }

app/src/context/appContext/reducer.ts

@@ -1,6 +1,9 @@
 import { IAppContextState } from './IAppContextState';
 
-export type Action = { type: 'SET_FEATURE_FLAGS'; payload: unknown[] };
+export type Action = {
+  type: 'SET_FEATURE_FLAGS';
+  payload: { key: string; enabled: boolean }[];
+};
 
 export const reducer = (
   state: IAppContextState,

app/src/hooks/featureFlag/UseFeatureFlag.tsx

@@ -1,9 +1,9 @@
 import { useAppContext } from '../appContext/UseAppContext';
 
-export const useFeatureFlag = (featureFlagId: string) => {
+export const useFeatureFlag = (featureFlagKey: string) => {
   const appContext = useAppContext();
   const featureFlag = appContext.state.featureFlags.find(
-    (featureFlag) => featureFlag.id === featureFlagId
+    (featureFlag) => featureFlag.key === featureFlagKey
   );
 
   return featureFlag;