Step three component

src/features/debugger/components/codeblock/codeblock.component.tsx

@@ -1,4 +1,6 @@
+import { ComponentType } from "react";
 import styles from "./codeblock.module.scss";
+import clsx from "clsx";
 
 export type RequestData = {
   url: string;
@@ -15,21 +17,34 @@ interface CodeBlockProps {
   type: "request" | "json" | "token";
   requestData?: RequestData;
   token?: string;
+  HeaderRightComponent?: ComponentType;
 }
 
 export const Codeblock = (props: CodeBlockProps) => {
-  const { title, type, requestData, token } = props;
+  const { title, type, requestData, token, HeaderRightComponent } = props;
   return (
-    <div className={styles.scroll_container}>
-      <div className={styles.container}>
+    <div className={styles.container}>
+      <div className={styles.header_container}>
         <div className={styles.title_container}>{title}</div>
-        <div className={styles.code_block}>
+        {HeaderRightComponent && <HeaderRightComponent />}
+      </div>
+      <div className={styles.scroll_container}>
+        <div
+          className={clsx(
+            styles.code_block,
+            type === "token" && styles.vertical_scroll_container,
+            type === "request" && styles.horizontal_scroll_container
+          )}
+        >
           {type === "request" && requestData ? (
             <>
               <div className={styles.code_line}>
                 <p className={styles.code_line_number}>01</p>
-                <p className={styles.param_value} data-editable={requestData.isEditable}>
-                  <span>{`${requestData.method ? requestData.method: ""} ${requestData.url}?`}</span>
+                <p
+                  className={styles.param_value}
+                  data-editable={requestData.isEditable}
+                >
+                  <span>{`${requestData.method ? requestData.method : ""} ${requestData.url}?`}</span>
                 </p>
               </div>
               {requestData.params.map((data, idx) => (
@@ -46,7 +61,9 @@ export const Codeblock = (props: CodeBlockProps) => {
               ))}
             </>
           ) : null}
-          {type === "token" && token ? <p>{token}</p> : null}
+          {type === "token" && token ? (
+            <p className={styles.token}>{token}</p>
+          ) : null}
         </div>
       </div>
     </div>

src/features/debugger/components/codeblock/codeblock.module.scss

@@ -1,29 +1,46 @@
 @use "libs/theme/styles/variables" as *;
 @use "libs/theme/styles/mixins" as *;
 
-
-.scroll_container {
-  overflow-x: auto;
-  overflow-y: hidden;
-  max-width: 100%;
-}
 .container {
-  width: 544px;
+  max-width: 100%;
   border: 0.5px solid var(--color_border_light);
   background-color: var(--color_bg_light);
 }
 
+.horizontal_scroll_container {
+  min-width: 544px;
+}
+
+.vertical_scroll_container {
+  max-height: 248px;
+  @media #{$breakpoint-dimension-sm} {
+    max-height: fit-content;
+  }
+}
+
 .title_container {
-    padding: 24px;
-    color: var(--color_fg_bold);
-    text-transform: uppercase;
-    font-size: 14px;
-    font-weight: 500;
-    line-height: 20px;
-    border-bottom: 0.5px solid var(--color_border_light);
+  color: var(--color_fg_bold);
+  text-transform: uppercase;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;  
+}
+
+.header_container {
+  padding: 24px;
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 0.5px solid var(--color_border_light);
+}
+
+.scroll_container {
+  overflow-x: auto;
+  overflow-y: auto;
+  max-width: 100%;
 }
 
 .code_block {
+  max-width: 544px;
   color: var(--color_fg_link);
   font-feature-settings: 'liga' off, 'clig' off;
   font-family: "Roboto Mono";
@@ -32,7 +49,7 @@
   font-weight: 400;
   line-height: 32px;
   letter-spacing: 0.15px;
-  margin-left: 1.5rem;
+  margin: 0 1.5rem;
   padding: 1.5rem 0;
 }
 
@@ -56,4 +73,8 @@
     padding: 0 0.5rem;
     cursor: pointer;
   }
+}
+
+.token {
+  overflow-wrap: break-word;
 }

src/features/debugger/components/steps/debugger-steps.component.tsx

@@ -32,7 +32,7 @@ const stepsList: Steps[] = [
 ];
 
 export const DebuggerSteps = () => {
-  const [currentStepIndex, setCurrentStepIndex] = useState(1);
+  const [currentStepIndex, setCurrentStepIndex] = useState(2);
 
   return (
     <div className={styles.container}>

src/features/debugger/components/steps/debugger-steps.module.scss

@@ -80,4 +80,27 @@
     line-height: 24px; /* 150% */
     letter-spacing: -0.1px;
   }
+}
+
+.button_container {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
+  color: var(--color_fg_link);
+  p {
+    font-family: Aeonik;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 20px;
+    letter-spacing: 0.28px;
+  }
+
+  svg {
+    path {
+      stroke: var(--color_fg_link);
+    }
+  }
 }

src/features/debugger/components/steps/step-three/step-three.component.tsx

@@ -1,3 +1,40 @@
+import { Button } from "features/common/components/button/button.component";
+import { Codeblock } from "../../codeblock/codeblock.component";
+import styles from "../debugger-steps.module.scss";
+import ConfigurationIcon from "features/common/icons/configuration-icon";
+const REALLY_LONG_TOKEN =
+  "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6Imp1bGlhbi5sZWlzc0BhdXRoMC5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwibmFtZSI6Ikp1bGlhbiBMZWlzcyIsImdpdmVuX25hbWUiOiJKdWxpYW4iLCJmYW1pbHlfbmFtZSI6IkxlaXNzIiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hLS9BT2gxNEdoc0hkdnR3OU5aa3JOZXlyMGx5WV9zQWlxZU9hbWY5dFpwSmctUz1zOTYtYyIsImxvY2FsZSI6ImVuIiwiY2xpZW50SUQiOiJrYnl1RkRpZExMbTI4MExJd1ZGaWF6T3FqTzN0eThLSCIsInVwZGF0ZWRfYXQiOiIyMDIyLTAxLTIxVDE2OjQ5OjIxLjU5MVoiLCJ1c2VyX2lkIjoiZ29vZ2xlLW9hdXRoMnwxMTI1MjA5Mzg3NDU0NzAzNzEzMDYiLCJuaWNrbmFtZSI6Imp1bGlhbi5sZWlzcyIsImlkZW50aXRpZXMiOlt7InByb3ZpZGVyIjoiZ29vZ2xlLW9hdXRoMiIsInVzZXJfaWQiOiIxMTI1MjA5Mzg3NDU0NzAzNzEzMDYiLCJjb25uZWN0aW9uIjoiZ29vZ2xlLW9hdXRoMiIsImlzU29jaWFsIjp0cnVlfV0sImNyZWF0ZWRfYXQiOiIyMDE4LTA3LTE4VDIwOjI1OjA1LjMwNFoiLCJhcHBfbWV0YWRhdGEiOnsiYXV0aG9yaXphdGlvbiI6eyJncm91cHMiOltdfX0sImF1dGhvcml6YXRpb24iOnsiZ3JvdXBzIjpbXX0sInVzZXJfbWV0YWRhdGEiOnt9LCJpc3MiOiJodHRwczovL3NhbXBsZXMuYXV0aDAuY29tLyIsInN1YiI6Imdvb2dsZS1vYXV0aDJ8MTEyNTIwOTM4NzQ1NDcwMzcxMzA2IiwiYXVkIjoia2J5dUZEaWRMTG0yODBMSXdWRmlhek9xak8zdHk4S0giLCJpYXQiOjE2NDI3ODM5MzgsImV4cCI6MTY0MjgxOTkzOH0.h1RMacau6moieoJB1TG_Ecewk1acYxuPo3bsMYqC0r4";
+
 export const StepThree = () => {
-    return <p>Step Three</p>
-}
+  return (
+    <>
+      <p className={styles.description}>
+        Now, we need to verify that the ID Token sent was from the correct place
+        by validating the JWT&apos;s signature
+      </p>
+      <Codeblock
+        title="Request"
+        type="token"
+        token={REALLY_LONG_TOKEN}
+        HeaderRightComponent={() => <ViewJWTButton token={REALLY_LONG_TOKEN} />}
+      />
+
+      <p className={styles.description}>
+        This token is cryptographically signed with the HS256 algorithim.
+        We&apos;ll use the client secret to validate it.
+      </p>
+      <Button label="Verify" />
+    </>
+  );
+};
+
+const ViewJWTButton = ({ token }: { token: string }) => {
+  return (
+    <div className={styles.button_container}>
+      <ConfigurationIcon />
+      <a href={`https://jwt.io/#token=${token}`} target="_blank">
+        <p>View on JWT.IO</p>
+      </a>
+    </div>
+  );
+};