Merge pull request #719 from freeCodeCamp/main

Create a new pull request by comparing changes across two branches

Author: GulajavaMinistudio

.gitpod.yml

@@ -30,7 +30,7 @@ ports:
 tasks:
   - before: |
       echo '
-      export COOKIE_DOMAIN=gitpod.io
+      export COOKIE_DOMAIN=.gitpod.io
       export HOME_LOCATION=$(gp url 8000)
       export API_LOCATION=$(gp url 3000)
       export CHALLENGE_EDITOR_API_LOCATION=$(gp url 3200)
@@ -45,7 +45,7 @@ tasks:
       docker compose up -d
 
   - name: server
-    before: export COOKIE_DOMAIN=gitpod.io && export HOME_LOCATION=$(gp url 8000) && export API_LOCATION=$(gp url 3000)
+    before: export COOKIE_DOMAIN=.gitpod.io && export HOME_LOCATION=$(gp url 8000) && export API_LOCATION=$(gp url 3000)
     # init is not executed for prebuilt workspaces and restarts,
     # so we should put all the heavy initialization here
     init: >

api-server/src/server/boot/randomAPIs.js

@@ -78,7 +78,7 @@ module.exports = function (app) {
     if (!unsubscribeId) {
       req.flash(
         'info',
-        'We we unable to process this request, please check and try again'
+        'We were unable to process this request, please check and try again'
       );
       res.redirect(origin);
     }

api/src/exam-environment/routes/exam-environment.test.ts

@@ -24,12 +24,14 @@ describe('/exam-environment/', () => {
   setupServer();
   describe('Authenticated user with exam environment authorization token', () => {
     let superPost: ReturnType<typeof createSuperRequest>;
+    let superGet: ReturnType<typeof createSuperRequest>;
     let examEnvironmentAuthorizationToken: string;
 
     // Authenticate user
     beforeAll(async () => {
       const setCookies = await devLogin();
       superPost = createSuperRequest({ method: 'POST', setCookies });
+      superGet = createSuperRequest({ method: 'GET', setCookies });
       await mock.seedEnvExam();
       // Add exam environment authorization token
       const res = await superPost('/user/exam-environment/token');
@@ -532,15 +534,43 @@ describe('/exam-environment/', () => {
     });
 
     xdescribe('POST /exam-environment/screenshot', () => {});
+
+    describe('GET /exam-environment/exams', () => {
+      it('should return 200', async () => {
+        const res = await superGet('/exam-environment/exams').set(
+          'exam-environment-authorization-token',
+          examEnvironmentAuthorizationToken
+        );
+        expect(res.status).toBe(200);
+
+        expect(res.body).toStrictEqual({
+          data: {
+            exams: [
+              {
+                canTake: true,
+                config: {
+                  name: mock.exam.config.name,
+                  note: mock.exam.config.note,
+                  totalTimeInMS: mock.exam.config.totalTimeInMS
+                },
+                id: mock.examId
+              }
+            ]
+          }
+        });
+      });
+    });
   });
 
   describe('Authenticated user without exam environment authorization token', () => {
     let superPost: ReturnType<typeof createSuperRequest>;
+    let superGet: ReturnType<typeof createSuperRequest>;
 
     // Authenticate user
     beforeAll(async () => {
       const setCookies = await devLogin();
       superPost = createSuperRequest({ method: 'POST', setCookies });
+      superGet = createSuperRequest({ method: 'GET', setCookies });
       await mock.seedEnvExam();
     });
     describe('POST /exam-environment/exam/attempt', () => {
@@ -598,5 +628,16 @@ describe('/exam-environment/', () => {
         });
       });
     });
+
+    describe('GET /exam-environment/exams', () => {
+      it('should return 403', async () => {
+        const res = await superGet('/exam-environment/exams').set(
+          'exam-environment-authorization-token',
+          'invalid-token'
+        );
+
+        expect(res.status).toBe(403);
+      });
+    });
   });
 });

api/src/exam-environment/routes/exam-environment.ts

@@ -23,6 +23,13 @@ import { ERRORS } from '../utils/errors';
  */
 export const examEnvironmentValidatedTokenRoutes: FastifyPluginCallbackTypebox =
   (fastify, _options, done) => {
+    fastify.get(
+      '/exam-environment/exams',
+      {
+        schema: schemas.examEnvironmentExams
+      },
+      getExams
+    );
     fastify.post(
       '/exam-environment/exam/generated-exam',
       {
@@ -565,3 +572,37 @@ async function postScreenshotHandler(
 ) {
   return reply.code(418);
 }
+
+async function getExams(
+  this: FastifyInstance,
+  req: UpdateReqType<typeof schemas.examEnvironmentExams>,
+  reply: FastifyReply
+) {
+  const user = req.user!;
+  const exams = await this.prisma.envExam.findMany({
+    select: {
+      id: true,
+      config: true
+    }
+  });
+
+  const availableExams = exams.map(exam => {
+    const isExamPrerequisitesMet = checkPrerequisites(user, true);
+
+    return {
+      id: exam.id,
+      config: {
+        name: exam.config.name,
+        note: exam.config.note,
+        totalTimeInMS: exam.config.totalTimeInMS
+      },
+      canTake: isExamPrerequisitesMet
+    };
+  });
+
+  return reply.send({
+    data: {
+      exams: availableExams
+    }
+  });
+}

api/src/exam-environment/schemas/exams.ts

@@ -0,0 +1,27 @@
+import { Type } from '@fastify/type-provider-typebox';
+import { STANDARD_ERROR } from '../utils/errors';
+export const examEnvironmentExams = {
+  headers: Type.Object({
+    'exam-environment-authorization-token': Type.String()
+  }),
+  response: {
+    200: Type.Union([
+      Type.Object({
+        data: Type.Object({
+          exams: Type.Array(
+            Type.Object({
+              id: Type.String(),
+              config: Type.Object({
+                name: Type.String(),
+                note: Type.String(),
+                totalTimeInMS: Type.Number()
+              }),
+              canTake: Type.Boolean()
+            })
+          )
+        })
+      }),
+      STANDARD_ERROR
+    ])
+  }
+};

api/src/exam-environment/schemas/index.ts

@@ -2,3 +2,4 @@ export { examEnvironmentPostExamAttempt } from './exam-attempt';
 export { examEnvironmentPostExamGeneratedExam } from './exam-generated-exam';
 export { examEnvironmentPostScreenshot } from './screenshot';
 export { examEnvironmentTokenVerify } from './token-verify';
+export { examEnvironmentExams } from './exams';

client/i18n/locales/english/intro.json

@@ -1714,7 +1714,10 @@
           "For this lab, you will create a web page of your favorite recipe."
         ]
       },
-      "gwyd": { "title": "4", "intro": [] },
+      "lecture-html-fundamentals": {
+        "title": "HTML Fundamentals",
+        "intro": ["Learn about HTML fundamentals in these lecture videos."]
+      },
       "lab-travel-agency-page": {
         "title": "Build a Travel Agency Page",
         "intro": [
@@ -1727,7 +1730,10 @@
         "intro": ["For this lab, you will create a video compilation web page."]
       },
       "bzfv": { "title": "8", "intro": [] },
-      "snuv": { "title": "9", "intro": [] },
+      "review-basic-html": {
+        "title": "Basic HTML Review",
+        "intro": ["Review the basic HTML topics."]
+      },
       "quiz-basic-html": {
         "title": "Basic HTML Quiz",
         "intro": [
@@ -1914,7 +1920,13 @@
           "Test what you've learned in this quiz of how to style forms using CSS."
         ]
       },
-      "qzcx": { "title": "73", "intro": [] },
+      "workshop-rothko-painting": {
+        "title": "Design a Rothko Painting",
+        "intro": [
+          "Every HTML element is its own box – with its own spacing and a border. This is called the Box Model.",
+          "In this workshop, you'll use CSS and the Box Model to create your own Rothko-style rectangular art pieces."
+        ]
+      },
       "wozq": { "title": "74", "intro": [] },
       "lab-confidential-email-page": {
         "title": "Build a Confidential Email Page",
@@ -1944,7 +1956,13 @@
           "Test what you've learned in this quiz of using flexbox in CSS."
         ]
       },
-      "vqut": { "title": "83", "intro": [] },
+      "workshop-nutritional-label": {
+        "title": "Build a Nutritional Label",
+        "intro": [
+          "Typography is the art of styling your text to be easily readable and suit its purpose.",
+          "In this workshop, you'll use typography to build a nutrition label webpage. You'll practice how to style text, adjust line height, and position your text using CSS."
+        ]
+      },
       "ujcf": { "title": "84", "intro": [] },
       "lab-newspaper-article": {
         "title": "Build a Newspaper Article",
@@ -1998,7 +2016,13 @@
           "Test what you've learned in this quiz of how positioning works in CSS."
         ]
       },
-      "xebj": { "title": "103", "intro": [] },
+      "workshop-piano": {
+        "title": "Design a Piano",
+        "intro": [
+          "Responsive Design tells your webpage how it should look on different-sized screens.",
+          "In this workshop, you'll use CSS and Responsive Design to code a piano. You'll also practice media queries and pseudo selectors."
+        ]
+      },
       "jkdt": { "title": "104", "intro": [] },
       "lab-technical-documentation-page": {
         "title": "Build a Technical Documentation Page",
@@ -2013,7 +2037,13 @@
           "Test what you've learned in this quiz of making your webpage responsive."
         ]
       },
-      "mtbl": { "title": "108", "intro": [] },
+      "workshop-city-skyline": {
+        "title": "Build a City Skyline",
+        "intro": [
+          "CSS variables help you organize your styles and reuse them.",
+          "In this workshop, you'll build a city skyline. You'll practice how to configure CSS variables so you can reuse them whenever you want."
+        ]
+      },
       "vlov": { "title": "109", "intro": [] },
       "lab-availability-table": {
         "title": "Build an Availability Table",
@@ -2192,7 +2222,12 @@
         "intro": ["Test what you've learned in this quiz on JavaScript Arrays."]
       },
       "dvnt": { "title": "164", "intro": [] },
-      "ekdb": { "title": "165", "intro": [] },
+      "workshop-recipe-tracker": {
+        "title": "Build a Recipe Tracker",
+        "intro": [
+          "In this workshop, you will review working with JavaScript objects by building a recipe tracker."
+        ]
+      },
       "lab-quiz-game": {
         "title": "Build a Quiz Game",
         "intro": ["For this lab, you will build a quiz game."]

client/i18n/locales/english/translations.json

@@ -7,6 +7,7 @@
     "first-lesson": "Go to the first lesson",
     "close": "Close",
     "edit": "Edit",
+    "copy": "Copy",
     "view": "View",
     "view-code": "View Code",
     "view-project": "View Project",
@@ -1111,6 +1112,16 @@
     "no-thanks": "No thanks, I would like to keep my token",
     "yes-please": "Yes please, I would like to delete my token"
   },
+  "exam-token": {
+    "exam-token": "Exam Token",
+    "note": "Your exam token is a secret key that allows you to access exams. Do not share this token with anyone.",
+    "invalidation": "If you generate a new token, your old token will be invalidated.",
+    "generate-exam-token": "Generate Exam Token",
+    "error": "There was an error generating your token, please try again in a moment.",
+    "your-exam-token": "Your Exam Token is: {{token}}",
+    "copied": "Token copied to clipboard",
+    "copy-error": "Error copying token to clipboard"
+  },
   "shortcuts": {
     "title": "Keyboard shortcuts",
     "table-header-action": "Action",

client/src/client-only-routes/show-settings.tsx

@@ -5,6 +5,7 @@ import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 
 import { Callout, Container } from '@freecodecamp/ui';
+import { useFeatureIsOn } from '@growthbook/growthbook-react';
 
 import store from 'store';
 import envData from '../../config/env.json';
@@ -18,6 +19,7 @@ import Honesty from '../components/settings/honesty';
 import Privacy from '../components/settings/privacy';
 import { type ThemeProps, Themes } from '../components/settings/theme';
 import UserToken from '../components/settings/user-token';
+import ExamToken from '../components/settings/exam-token';
 import { hardGoTo as navigate } from '../redux/actions';
 import {
   signInLoadingSelector,
@@ -35,6 +37,7 @@ import {
   updateMyKeyboardShortcuts,
   verifyCert
 } from '../redux/settings/actions';
+
 const { apiLocation } = envData;
 
 // TODO: update types for actions
@@ -126,6 +129,8 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
   } = props;
   const isSignedInRef = useRef(isSignedIn);
 
+  const examTokenFlag = useFeatureIsOn('exam-token-widget');
+
   if (showLoading) {
     return <Loader fullScreen={true} />;
   }
@@ -172,6 +177,7 @@ export function ShowSettings(props: ShowSettingsProps): JSX.Element {
           <Spacer size='medium' />
           <Honesty isHonest={isHonest} updateIsHonest={updateIsHonest} />
           <Spacer size='medium' />
+          {examTokenFlag && <ExamToken />}
           <Certification
             completedChallenges={completedChallenges}
             createFlashMessage={createFlashMessage}