merge dev branch into test

.github/workflows/deploy-dev.yaml

@@ -3,7 +3,7 @@ name: Deploy to cloud.gov dev space
 on:
   push:
     branches:
-      - main
+      - dev
     paths-ignore:
       - training-front-end/**
 

manifest-vars.dev.yml

@@ -2,5 +2,5 @@ env: dev
 memory: 256M
 instances: 1
 oauth_redirect_uri:
-  - https://federalist-2e11f2c8-970f-44f5-acc8-b47ef6c741ad.sites.pages.cloud.gov/site/gsa/smartpay-training/
-  - https://federalist-2e11f2c8-970f-44f5-acc8-b47ef6c741ad.sites.pages.cloud.gov/site/gsa/smartpay-training/auth_callback
+  - https://federalist-2e11f2c8-970f-44f5-acc8-b47ef6c741ad.sites.pages.cloud.gov/preview/gsa/smartpay-training/dev/
+  - https://federalist-2e11f2c8-970f-44f5-acc8-b47ef6c741ad.sites.pages.cloud.gov/preview/gsa/smartpay-training/dev/auth_callback

manifest-vars.staging.yml

@@ -2,5 +2,5 @@ env: staging
 memory: 256M
 instances: 2
 oauth_redirect_uri:
-  - https://training.smartpay.gsa.gov
-  - https://training.smartpay.gsa.gov/auth_callback
+  - https://federalist-2e11f2c8-970f-44f5-acc8-b47ef6c741ad.sites.pages.cloud.gov/preview/gsa/smartpay-training/staging/
+  - https://federalist-2e11f2c8-970f-44f5-acc8-b47ef6c741ad.sites.pages.cloud.gov/preview/gsa/smartpay-training/staging/auth_callback

requirements.dev.txt

@@ -2,4 +2,4 @@ flake8==6.0.0
 pytest==7.2.1
 httpx==0.23.3
 coverage==7.2.3
-polyfactory==2.0.0
+polyfactory==2.7.2

requirements.txt

@@ -1,11 +1,12 @@
 redis==4.4.4
-fastapi==0.97.0
-uvicorn[standard]==0.20.0
+fastapi==0.101.0
+uvicorn[standard]==0.23.2
 pyjwt[crypto]==2.6.0
-fastapi_mail==1.2.5
 cfenv==0.5.3
 SQLAlchemy==2.0.5.post1
 psycopg2==2.9.5
 alembic==1.10.2
 PyMuPDF==1.21.1
+pydantic-settings==2.0.2
+email-validator==2.0.0.post2
 python-multipart==0.0.6

training-front-end/.env.dev

@@ -0,0 +1,4 @@
+PUBLIC_API_BASE_URL=https://smartpay-training-dev.app.cloud.gov
+# in minutes
+PUBLIC_SESSION_TIME_OUT=60
+PUBLIC_SESSION_WARNING_TIME=5

training-front-end/.env.development

@@ -1,3 +1,5 @@
+# This is the env file for local dev, not the cloud.gov dev environment
+# it will be used when runing `npm run` dev (or `astro dev`)
 #PUBLIC_API_BASE_URL=https://smartpay-training-dev.app.cloud.gov
 PUBLIC_API_BASE_URL=http://localhost:8000
 # in minutes

training-front-end/.env.staging

@@ -0,0 +1,4 @@
+PUBLIC_API_BASE_URL=https://smartpay-training-staging.app.cloud.gov
+# in minutes
+PUBLIC_SESSION_TIME_OUT=60
+PUBLIC_SESSION_WARNING_TIME=5

training-front-end/bin/build.sh

@@ -0,0 +1,23 @@
+#/bin/bash
+
+set -e
+
+echo $BRANCH
+
+case "$BRANCH" in
+main)
+    MODE="production" ;;
+staging)
+    MODE="staging" ;;
+test)
+    MODE="user_test" ;;
+dev)
+    MODE="dev" ;;
+*)
+    MODE="dev" ;;
+esac
+
+echo "building for:"
+echo $MODE
+
+astro build  --mode $MODE

training-front-end/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro build --mode user_test",
+    "build": "./bin/build.sh", 
     "preview": "astro preview",
     "astro": "astro",
     "test:unit": "vitest --environment jsdom --root .",

training-front-end/sass/_components/banner.scss

@@ -1,3 +1,18 @@
 .bg_smartpay_cool_grey {
   background-color:#465166;
+}
+
+// purchase banner background color
+.color-sp-purchase-medium{
+  background-color: #900028;
+}
+
+// fleet banner backgroud color
+.color-sp-fleet-dark{
+  background-color: #005748;
+}
+
+// travel banner background color
+.color-sp-travel-medium{
+  background-color: #00467F;
 }

training-front-end/sass/_components/header.scss

@@ -1,7 +1,7 @@
 .usa-nav__primary button.exit {
-  color: color($theme-color-primary);
+  color: color('primary');
   &:hover {
-    color: color($theme-color-base-dark);
+    color: color('base-dark');
   }
 }
 

training-front-end/sass/_uswds-theme-custom-styles.scss

@@ -27,8 +27,15 @@ i.e.
 
 html, body {
     height: 100%;
+    line-height: line-height('body', 6);
+
+    // reset the process current step icon class's line height to avoid positioning towards bottom issue
+    .usa-step-indicator__current-step {
+        line-height: initial;
+    }
 }
 
+
 .flex-shrink-0 {
     flex-shrink: 0;
 }
@@ -40,4 +47,33 @@ html, body {
 }
 .flex-fill {
     flex: 1 0 auto;
-}
+}
+
+/* global h4 headings are sans */
+
+h4 {
+    @include u-font('sans', $theme-type-scale-sm)
+ }
+
+.usa-prose {
+    h4 {
+       @include u-font('sans', $theme-type-scale-sm)
+    }
+
+    hr {
+       border-color: color('base-lighter')
+    }
+ }
+
+ // based on new design, h1-h3 are using Merriweather and use base darkest color
+h1, h2, h3{
+    font-family: family('serif');
+    color: color('base-darkest');
+  }
+
+h2 {
+    font-size: 1.75em;
+  }
+
+
+

training-front-end/sass/_uswds-theme.scss

@@ -11,7 +11,37 @@ in the form $setting: value,
 @use "uswds-core" with (
     $theme-image-path: "../images",
     $theme-font-path: "../fonts",
+    // Primary colors
+    $theme-color-primary-light: #8DA9E0,
+    $theme-color-primary: #405E97,
+    $theme-color-primary-vivid: #2753A7,
+    $theme-color-primary-dark: #1B3973,
+
+    // Base Colors
+    $theme-color-base-lightest: 'blue-warm-5',
+    $theme-color-base-lighter: 'blue-warm-10',
+    $theme-color-base-light: 'blue-warm-20',
+    $theme-color-base: 'blue-warm-60',
+    //$theme-color-base-dark: 'blue-warm-70',
+    $theme-color-base-darker: 'blue-warm-70',
+    $theme-color-base-darkest: 'blue-warm-80',
+    $theme-color-base-ink: 'blue-warm-90',
+
     $theme-summary-box-background-color: "base-lightest",
-    $theme-summary-box-border-color: "base-light"
+    $theme-summary-box-border-color: "base-light",
+
+    $theme-sidenav-current-border-width: 0,
+    // font family
+    $theme-font-type-sans: "public-sans",
+    $theme-font-role-body: 'sans',
+    $theme-font-role-heading: 'serif',
+
+    $theme-process-list-heading-font-family: 'serif',
+    $theme-process-list-counter-font-family: 'serif',
+
+    // Type scale
+    $theme-type-scale-lg: 9,
+    $theme-type-scale-xl: 12
+
   );
 

training-front-end/src/components/GlobalMessage.vue

@@ -1,15 +1,26 @@
 <script setup>
+  /**
+   * This compoenent is responsible for displaying alert messages on the front page.
+   * Because this project is built around static pages built with Astro, there is
+   * no global state for the applications. This makes sending messages between pages
+   * challenging. This component depends on the message_manager and session_manager
+   * to set a message in session storage. When the component mounts it reads and 
+   * clears this messages and displays it in the USWDS alert.
+   * 
+   * See stores/message_manager for more details. 
+   */
   import { onMounted, ref } from 'vue'
   import { useStore } from '@nanostores/vue'
   import { message, clearMessage } from '../stores/message_manager.js'
   import USWDSAlert from './USWDSAlert.vue'
 
   const message_text = useStore(message)
   const display_text = ref()
+  const display_level = ref()
   
   function consumeMessage() {
     if (message_text.value) {
-      display_text.value = message_text.value
+      [display_text.value, display_level.value] = message_text.value
       clearMessage(message)
     }
   }
@@ -21,7 +32,7 @@
 <template>
   <USWDSAlert 
     v-if="display_text"
-    status="warning"
+    :status="display_level"
     class="usa-alert--slim margin-y-4"
     :has-heading="false"
   >

training-front-end/src/components/QuizResult.vue

@@ -28,7 +28,7 @@
 
   const isHighlighted = answer_index => {
     return props.result.correct_ids.includes(answer_index)
-    || (props.result.selected_ids.includes(answer_index) && props.result.correct)
+    || (props.result.selected_ids.includes(answer_index))
   }
 </script>
 

training-front-end/src/components/QuizResults.vue

@@ -55,21 +55,21 @@
         You got <b>{{ result_string }}</b> questions correct, for a total score of <b>{{ percentage }}%</b>, which meets the 75% or higher requirement to pass.
       </p>
       <form
-            :action=quiz_certificate_url 
-            method="post"
-          >
-            <input 
-              type="hidden"
-              name="jwtToken"
-              :value="user.jwt"
-            >
-            <button
-              class="usa-button usa-button--outline margin-bottom-3"
-              type="submit"
-            >
-              <FileDownLoad /> Download your certificate of completion
-            </button>
-          </form>
+        :action="quiz_certificate_url"
+        method="post"
+      >
+        <input 
+          type="hidden"
+          name="jwtToken"
+          :value="user.jwt"
+        >
+        <button
+          class="usa-button usa-button--outline margin-bottom-3"
+          type="submit"
+        >
+          <FileDownLoad /> Download your certificate of completion
+        </button>
+      </form>
     </div>
     <div v-else>
       <div class="usa-prose">

training-front-end/src/components/SessionManager.vue

@@ -2,13 +2,19 @@
   import { useStore } from '@nanostores/vue'
   import { hasActiveSession } from '../stores/user'
   import { willTimeOut, continueSession, exit } from '../stores/session_manager'
+  import { setMessage } from '../stores/message_manager'
+
   import ExitModal from './ExitModal.vue'
   import ExitMenu from './ExitMenu.vue'
 
   const isModalDisplayed = useStore(willTimeOut)
   const isActive = useStore(hasActiveSession)
 
   const exit_redirect = () => {
+    setMessage(
+      'You have successfully exited.',
+      'success'
+    )
     window.location.replace(`${import.meta.env.BASE_URL}exit`)
   }
 </script>

training-front-end/src/components/TrainingCard.astro

@@ -51,4 +51,7 @@ const { item } = Astro.props;
     margin-left:0px; 
     padding-left:0px;
   }
+  .usa-button{
+    width: max-content;
+  }
  </style>