refresh token and instrospect flow chart added

Author: MKSinghDev

components/image-switcher.tsx

@@ -9,8 +9,16 @@ const ImageSwitcher = ({
 }) => {
   return (
     <div className="relative flex flex-1 h-full w-full aspect-auto">
-      <img src={darkSrc} alt={alt} className="hidden dark:block" />
-      <img src={lightSrc} alt={alt} className="block dark:hidden" />
+      <img
+        src={darkSrc}
+        alt={alt}
+        className="hidden dark:block object-contain"
+      />
+      <img
+        src={lightSrc}
+        alt={alt}
+        className="block dark:hidden object-contain"
+      />
     </div>
   );
 };

content/architectural-resource/admin-login.mdx

@@ -1,12 +1,10 @@
 ---
 title: Admin Login
-description: Admin Login
+description: This is the admin login flow chart
 ---
 
 import ImageSwitcher from "@/components/image-switcher";
 
-This is the diagram for the admin login process:
-
 <ImageSwitcher
   lightSrc="/img/flow-charts/2-admin-login-transparent-light.png"
   darkSrc="/img/flow-charts/2-admin-login-transparent.png"

content/architectural-resource/create-api-user.mdx

@@ -1,12 +1,10 @@
 ---
 title: Create API User
-description: Create API User
+description: This is the create API user flow chart
 ---
 
 import ImageSwitcher from "@/components/image-switcher";
 
-This is the diagram for the API user creation process:
-
 <ImageSwitcher
   lightSrc="/img/flow-charts/3-create-admin-user-transparent-light.png"
   darkSrc="/img/flow-charts/3-create-admin-user-transparent.png"

content/architectural-resource/index.mdx

@@ -10,21 +10,21 @@ import { Step, Steps } from "fumadocs-ui/components/steps";
 <Steps>
 <Step>
 
-### Resource Initialization
+### [Resource Initialization](/architectural-resource/resource-initialization)
 
 On startup of the Shield server, the resource initialization process is triggered.
 
 </Step>
 <Step>
 
-### Admin Login
+### [Admin Login](/architectural-resource/admin-login)
 
 Once the will reach healthy state then Admin Login api can be used for creation of the API Key.
 
 </Step>
 <Step>
 
-### Create API User
+### [Create API User](/architectural-resource/create-api-user)
 
 For any client related operations Like login, logout, password reset, etc. the
 API user is required. There can be more than one API user for a client and each
@@ -33,16 +33,32 @@ API user can have different role.
 </Step>
 <Step>
 
-### Signup user
+### [Signup user](/architectural-resource/signup-user)
 
 An API user can create or register a new user to its own client.
 
 </Step>
 <Step>
 
-### Non Admin Login
+### [Non Admin Login](/architectural-resource/non-admin-login)
 
 Regular (Non Admin) user can login to the client at this API endpoint.
 
+</Step>
+<Step>
+
+### [Refresh Token](/architectural-resource/refresh-token)
+
+Refresh token is used to refresh the session and generate a new set of token
+so that the user can continue to use the client without having to login again.
+
+</Step>
+<Step>
+
+### [Introspection](/architectural-resource/introspection)
+
+Introspection is used to get the current state of the token. Currently, we
+support only the access_token introspection.
+
 </Step>
 </Steps>

content/architectural-resource/introspection.mdx

@@ -0,0 +1,12 @@
+---
+title: Introspection
+description: This is the introspection flow chart
+---
+
+import ImageSwitcher from "@/components/image-switcher";
+
+<ImageSwitcher
+  lightSrc="/img/flow-charts/7-introspection-transparent-light.png"
+  darkSrc="/img/flow-charts/7-introspection-transparent.png"
+  alt="Introspection Flow Chart"
+/>

content/architectural-resource/meta.json

@@ -7,6 +7,8 @@
     "admin-login",
     "create-api-user",
     "signup-user",
-    "non-admin-login"
+    "non-admin-login",
+    "refresh-token",
+    "introspection"
   ]
 }

content/architectural-resource/non-admin-login.mdx

@@ -1,12 +1,10 @@
 ---
 title: Non-Admin Login
-description: Non-Admin Login
+description: This is the non-admin login flow chart
 ---
 
 import ImageSwitcher from "@/components/image-switcher";
 
-Here is the diagram for the non-admin login process:
-
 <ImageSwitcher
   lightSrc="/img/flow-charts/5-non-admin-login-transparent-light.png"
   darkSrc="/img/flow-charts/5-non-admin-login-transparent.png"

content/architectural-resource/refresh-token.mdx

@@ -0,0 +1,12 @@
+---
+title: Refresh Token
+description: This is the refresh token flow chart
+---
+
+import ImageSwitcher from "@/components/image-switcher";
+
+<ImageSwitcher
+  lightSrc="/img/flow-charts/6-refresh-token-transparent-light.png"
+  darkSrc="/img/flow-charts/6-refresh-token-transparent.png"
+  alt="Refresh Token Flow Chart"
+/>

content/architectural-resource/resource-initialization.mdx

@@ -1,12 +1,10 @@
 ---
 title: Resource Initialization
-description: Resource Initialization
+description: This is the resource initialization flow chart
 ---
 
 import ImageSwitcher from "@/components/image-switcher";
 
-This is the diagram for the resource initialization process:
-
 <ImageSwitcher
   lightSrc="/img/flow-charts/1-shield-start-transparent-light.png"
   darkSrc="/img/flow-charts/1-shield-start-transparent.png"

content/architectural-resource/signup-user.mdx

@@ -1,12 +1,10 @@
 ---
 title: Signup User
-description: Signup User
+description: This is the signup user flow chart
 ---
 
 import ImageSwitcher from "@/components/image-switcher";
 
-This is the diagram for the user signup process:
-
 <ImageSwitcher
   lightSrc="/img/flow-charts/4-signup-user-transparent-light.png"
   darkSrc="/img/flow-charts/4-signup-user-transparent.png"