From b71e162de1004562b2781010901dff7f43541bb7 Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Fri, 11 Oct 2024 13:11:45 -0400
Subject: [PATCH 1/6] use "join" codes instead of generating opcodes on join
 page

https://github.com/e-mission/e-mission-docs/issues/1076

OPcodes are meant to be used by only one person. For autogen studies, generating them on the join page introduces the possibility that users will misinterpret the instructions and share OPcodes with others.

Instead, we can provide a "join" link which takes users to the app and generates an OPcode there. The "join" link includes the same parameters that the join page can have: study_config, sub_group, and tester.

If viewing the join page on a mobile device, we provide the join link as a button which directly links to the app (assuming it has been installed per instructions).
Otherwise, we provide the link as a QR code.
We also provide the link as text to easily copy and paste.

Several of the functions related to token generation are no longer needed here and are being moved to e-mission-phone. a derivative of _getStudyName is still kept, called getStudyNameFromUrl, consistent with what e-mission-phone will have.
---
 frontend/index.html | 185 ++++++++++++++++++++------------------------
 1 file changed, 86 insertions(+), 99 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 4eb9bda..299236e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -300,21 +300,37 @@ <h2 data-i18n="installNREL">Install the NREL OpenPATH App on Your Phone</h2>
                   
                   <h2 data-i18n="joinStudy">Join the Study</h2>
 
-                  <p data-i18n="jS1">After you have installed the NREL OpenPATH app on your phone, join the study by scanning
-                     the QR code or visiting the link below using your phone.
-                  </p>
+                  <div class="d-flex flex-column justify-content-center py-2">
+                    <div id="joinQrRow" class="justify-content-center">
+                      <p data-i18n="joinAutogenQrDesc">
+                        After you have installed the NREL OpenPATH app on your phone, join the study by
+                        scanning the QR code or copying the link and pasting it into the app.
+                      </p>
+                      <div id="joinQrCode" class="m-auto" style="width:150px; height:150px"></div>
+                    </div>
+                    <div id="joinButtonRow" class="justify-content-center">
+                      <p data-i18n="joinAutogenButtonDesc">
+                        After you have installed the NREL OpenPATH app on your phone, join the study
+                        by clicking the button below or copying the link and pasting it into the app.
+                      </p>
+                      <button id="joinButton" class="btn btn-primary">
+                        <b data-i18n="join">Join</b>
+                      </button>
+                    </div>
 
-                  <div class="row justify-content-center">
-                     
-                    <div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
+                    <div class="alert alert-secondary d-flex align-items-center py-1 my-2 mx-auto">
+                      <span id="joinCodeText" class="small text-monospace text-break"></span>
+                      <span class="pl-2 fa fa-copy" id="joinCodeCopy"></span>
+                    </div>
                   </div>
 
-                  <p><span id="opCodeText"></span><span>&nbsp;&nbsp;&nbsp;</span><span class="fa fa-copy" id="opCodeCopy"></span></p>
-
-
-                    <span data-i18n="[html]jS2">You will log in using a randomly token. Save your token in case you lose or
-                      change phones. If you lose your token, NREL cannot retrieve it for you since we do
-                      not have the ability to match a token to an individual user.</span>
+                  <p data-i18n="[html]joinAutogenOpcodeDesc" class="m-0">
+                    When you join the study, you will be randomly assigned an OPcode, which is a
+                    long string beginning with <code>nrelop_</code>. You will be asked to save your
+                    OPcode in case you lose or change phones. If you lose your token, NREL cannot
+                    retrieve it for you since we do not have the ability to match a token to an
+                    individual user.
+                  </p>
 
                </div>
                <div id="validProgram" class="well text-center">
@@ -507,64 +523,27 @@ <h2 data-i18n="contact">Contact</h2>
 
 		<!-- Custom scripts -->
 		<script type="text/javascript">
-      /*
-      * Copied and adapted from the phone `dynamic_config.js`
-      * Adapted by supporting program name via parameter to make it
-      * easier to test against localhost
-      */
-      const _getStudyName = function(connectUrl) {
-        const _getFromParamOrDefault = function() {
-          const param_study_name = new URL(connectUrl).searchParams.get("study_config");
-          return param_study_name == null? "stage-program" : param_study_name;
-        }
-        const orig_host = new URL(connectUrl).hostname;
-        // If we are running this on dev, use a param instead to enable testing
-        if (orig_host == "localhost") { return _getFromParamOrDefault(); }
-        const first_domain = orig_host.split(".")[0];
-        if (first_domain == "openpath-stage") { return _getFromParamOrDefault(); }
-        const openpath_index = first_domain.search("-openpath");
-        if (openpath_index == -1) { return undefined; }
-        const study_name = first_domain.substr(0,openpath_index);
-        return study_name;
-      }
-
-
-      const _getSubGroup = function(connectUrl) {
-        const param_subgroup_name = new URL(connectUrl).searchParams.get("sub_group");
-        if (data.opcode?.subgroups?.length > 0) {
-            if (data.opcode.subgroups.includes(param_subgroup_name)) {
-                return param_subgroup_name;
-            } else {
-                throw new Error($.i18n("invalidSubgroupError", param_subgroup_name,
-                    data.opcode.subgroups),
-                    {"cause": {"found": param_subgroup_name,
-                    "expected": data.opcode.subgroups}})
-            }
-        } else {
-            return "default";
-        }
+      /**
+       * @returns The study name for a URL, which is:
+       *           - the value of the 'study_config' query parameter if present,
+       *           - the first part of the hostname before '-openpath' if present,
+       *           - 'stage' if the first part of the hostname is 'openpath-stage',
+       *           - undefined if it can't be determined
+       * @example getStudyNameFromUrl(new URL('https://openpath-stage.nrel.gov/join/')) => 'stage'
+       * @example getStudyNameFromUrl(new URL('https://open-access-openpath.nrel.gov/join/')) => 'open-access'
+       * @example getStudyNameFromUrl(new URL('https://nrel-commute-openpath.nrel.gov/api/')) => 'nrel-commute'
+       * @example getStudyNameFromUrl(new URL('http://localhost:3274/?study_config=foo')) => 'foo'
+       */
+      function getStudyNameFromUrl(url) {
+        const studyConfigParam = url.searchParams.get('study_config');
+        if (studyConfigParam) return studyConfigParam;
+        const firstDomain = url.hostname.split('.')[0];
+        if (firstDomain == 'openpath-stage') return 'stage';
+        const openpathSuffixIndex = firstDomain.indexOf('-openpath');
+        if (openpathSuffixIndex == -1) return undefined;
+        return firstDomain.substring(0, openpathSuffixIndex);
       }
 
-      // Adapted from https://stackoverflow.com/a/63363662/4040267
-      // made available under a CC BY-SA 4.0 license
-
-      const _getRandomString = function(length) {
-        const randomInts = window.crypto.getRandomValues(new Uint8Array(length * 2));
-        const randomChars = Array.from(randomInts).map((b) => String.fromCharCode(b));
-        const randomString = randomChars.join("");
-        const validRandomString = window.btoa(randomString).replace(/[+/]/g, "");
-        const truncatedRandomString = validRandomString.substring(0, length);
-        return truncatedRandomString;
-     }
-
-     const _isTester = function(connectUrl) {
-        const param_tester = new URL(connectUrl).searchParams.get("tester");
-        if (param_tester && param_tester == "true") {
-            return true;
-        }
-        return false;
-     }
-
      /*
      function to populate the language menu
      takes list of supported languages (from config) 
@@ -595,8 +574,10 @@ <h2 data-i18n="contact">Contact</h2>
         }
      }
 
+      var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
       var curr_lang; //language not set until dynamic config is loaded! (dynamic default)
       var data;
+      var PAGE_URL;
       var STUDY_NAME;
       var OPCODE_AUTOGEN;
       var SUPPORTED_LANGUAGES;
@@ -669,43 +650,48 @@ <h2 data-i18n="contact">Contact</h2>
         $('#invalidStudy').show();
       }
 
-      const validateAndGenerateToken = function() {
+      const generateJoinCode = function() {
         try {
-            const SUB_GROUP = _getSubGroup(window.location);
-            const RANDOM_STRING = _getRandomString(32);
-            const IS_TESTER = _isTester(window.location);
-            const GEN_TOKEN = IS_TESTER? `nrelop_${STUDY_NAME}_${SUB_GROUP}_test_${RANDOM_STRING}` : `nrelop_${STUDY_NAME}_${SUB_GROUP}_${RANDOM_STRING}`
-            const JOIN_CODE = `nrelopenpath://login_token?token=${GEN_TOKEN}`
-            // Generate study-join QR code
-            var qrcode = new QRCode(document.getElementById("qrcode"), {
-              text: JOIN_CODE,
-              width: 100,
-              height: 100,
-              colorDark : "#000000",
-              colorLight : "#ffffff",
-              correctLevel : QRCode.CorrectLevel.H
-            });
-
-            // Join study text
-            // JOIN_CODE was already defined above
-            $('#opCodeText').text(GEN_TOKEN)
-            $( '#opCodeCopy').on( "click", function() {
-                navigator.clipboard.writeText(GEN_TOKEN).then(
+            const joinUri = new URL(`emission://join?study_config=${STUDY_NAME}`);
+            for (let param of PAGE_URL.searchParams) {
+              joinUri.searchParams.set(...param);
+            }
+
+            if(isMobile) {
+              $('#joinButton').on("click", () => {
+                  window.location.href = joinUri.href;
+              });
+              $('#joinQrRow').hide();
+            } else {
+              // Generate study-join QR code
+              var qrcode = new QRCode(document.getElementById("joinQrCode"), {
+                text: joinUri.href,
+                width: 150,
+                height: 150,
+                colorDark : "#000000",
+                colorLight : "#ffffff",
+                correctLevel : QRCode.CorrectLevel.H
+              });
+              $('#joinButtonRow').hide();
+            }
+
+            $('#joinCodeText').text(joinUri.href);
+            $('#joinCodeCopy, #joinCodeText').on("click", () => {
+                navigator.clipboard.writeText(joinUri.href).then(
                   () => {
                     // github-style conversion to green check mark and back
                     // after 5 seconds
-                    $( '#opCodeCopy').removeClass("fa-copy");
-                    $( '#opCodeCopy').addClass("fa-check");
-                    $( '#opCodeCopy').css("color", "green");
+                    $( '#joinCodeCopy').removeClass("fa-copy");
+                    $( '#joinCodeCopy').addClass("fa-check");
+                    $( '#joinCodeCopy').css("color", "green");
                     setTimeout(() => {
-                        $( '#opCodeCopy').removeClass("fa-check");
-                        $( '#opCodeCopy').addClass("fa-copy");
-                        $( '#opCodeCopy').css("color", "black");
+                        $( '#joinCodeCopy').removeClass("fa-check");
+                        $( '#joinCodeCopy').addClass("fa-copy");
+                        $( '#joinCodeCopy').css("color", "black");
                     }, 5000);
-                    // alert("Copied opcode "+GEN_TOKEN+" to clipboard");
                   },
                   () => {
-                    alert($.i18n("errorCopyingToClipboard")+": '"+GEN_TOKEN+"'");
+                    alert($.i18n("errorCopyingToClipboard")+": '"+joinUri.href+"'");
                   }
                 );
             } );
@@ -789,7 +775,8 @@ <h2 data-i18n="contact">Contact</h2>
       $.i18n.debug = true;
 
       $(document).ready(async function() {
-        STUDY_NAME = _getStudyName(window.location);
+        PAGE_URL = new URL(window.location);
+        STUDY_NAME = getStudyNameFromUrl(PAGE_URL) || 'stage-program';
         const CONFIG_URL = `https://raw.githubusercontent.com/e-mission/nrel-openpath-deploy-configs/main/configs/${STUDY_NAME}.nrel-op.json`;
         // set the initial value to the current language
         // otherwise, if the dropdown is set to es and we reload the page, the
@@ -821,7 +808,7 @@ <h2 data-i18n="contact">Contact</h2>
         }
 
         if (OPCODE_AUTOGEN) {
-          validateAndGenerateToken();
+          generateJoinCode();
         } else {
           hideTokenAndURL();
         }

From a9a6f2b8d27b7f9d2d42ab12dad7377a06ba997b Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Fri, 11 Oct 2024 13:16:43 -0400
Subject: [PATCH 2/6] update text/instructions for new "join" pattern

-to reflect changes of OPcode generation now happening on the phone; make instructions clearer
-to fix gaps between inline elements, like unintended spaces before period in "participant guidelines ."
---
 frontend/index.html | 32 +++++++++++++++++++-------------
 1 file changed, 19 insertions(+), 13 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 299236e..b692474 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -235,9 +235,8 @@ <h1 id="studyTitleOne"></h1>
                <p class="greeting"></p>
 
               <p style="display:inline;">
-                <span data-i18n="thankYouMessage" class="lead">Thank you for participating in the </span>
-                <span id="studyTitleTwo" class="lead"></span>
-                <span>.</span>
+                <span data-i18n="thankYouMessage" class="lead">Thank you for participating in </span>
+                <span id="studyTitleTwo" class="lead"></span><span>.</span>
               </p>
 
               <p></p> <!-- Adds a precise space-->
@@ -281,7 +280,9 @@ <h2 data-i18n="installNREL">Install the NREL OpenPATH App on Your Phone</h2>
                     </p>
                   </li>
                   
-                  <li data-i18n="iN3">Scan the QR code or visit the link below to join this program.</li>
+                  <li data-i18n="iN3">
+                    Join the study using a QR code or access link (described below).
+                  </li>
                   
                   <li data-i18n="iN4">Remember to give all the requested permissions, including ("always") background location
                      access. If you have a Samsung or Huawei phone, turn off background restrictions.
@@ -290,10 +291,11 @@ <h2 data-i18n="installNREL">Install the NREL OpenPATH App on Your Phone</h2>
                   <li data-i18n="iN5">Track your trips, label them when prompted, and check out your carbon footprint.</li>
                   
                </ol>
-               <p style="display:inline;">
+               <p>
                 <span data-i18n="iN6">For additional information, see the </span>
-                <a data-i18n="iN7" href="https://www.nrel.gov/transportation/openpath-participant-guidelines.html">participant guidelines</a>
-                <span>.</span>
+                <a data-i18n="iN7" href="https://www.nrel.gov/transportation/openpath-participant-guidelines.html">
+                  participant guidelines
+                </a><span>.</span>
               </p>
                
                <div id="validStudy" class="well text-center">
@@ -337,8 +339,10 @@ <h2 data-i18n="joinStudy">Join the Study</h2>
 
                   <h2 data-i18n="joinStudy">Join the Study</h2>
 
-                  <p data-i18n="[html]jP1">After you have installed the NREL OpenPATH app on your phone, join the program by scanning
-                     the QR code or copy-pasting the opcode token provided by your program admin. The OPcode is a long string beginning with 'nrelop'
+                  <p data-i18n="[html]joinAssignedQrDesc">
+                    After you have installed the NREL OpenPATH app on your phone, join the program
+                    by scanning the QR code or copy-pasting the OPcode provided by your program admin.
+                    The OPcode is a long string beginning with <code>nrelop_</code>
                   </p>
 
                   <div class="row justify-content-center">
@@ -349,10 +353,12 @@ <h2 data-i18n="joinStudy">Join the Study</h2>
                     </div>
                   </div>
                   
-                    <span data-i18n="jP2">The OPcode is a randomly generated token. Save your token in case you lose or
-                      change phones. If you lose your token, please contact your program admin for assistance. NREL cannot retrieve it for you since we do
-                      not have the ability to match a token to an individual user.</span>
-                  
+                  <p data-i18n="joinAssignedOpcodeDesc">
+                    The OPcode is a randomly generated token. Keep your OPcode in a safe place in
+                    case you lose or change phones. If you lose your OPcode, please contact your
+                    program admin for assistance. NREL cannot retrieve it for you since we do not
+                    have the ability to match a token to an individual user.
+                  </p>
                </div>
                 <div id="invalidStudy" class="well text-center">
                   <h2 data-i18n="invalidStudyTitle" style="color:red;">Invalid Study</h2>

From edf6ecb4a2ab589018cf4a408c78392ebe1d9955 Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Fri, 11 Oct 2024 13:40:09 -0400
Subject: [PATCH 3/6] update translations for recent text changes

English matches the strings in index.html.
Used Google translate for Spanish and Lao; sanity-checked to the best of my ability but cannot guarantee the accuracy of the translations
---
 frontend/i18n/en.json | 18 ++++++++++--------
 frontend/i18n/es.json | 18 ++++++++++--------
 frontend/i18n/lo.json | 12 +++++++-----
 3 files changed, 27 insertions(+), 21 deletions(-)

diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 8b71299..7f3cbf9 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -15,7 +15,7 @@
 	"publicDashboard":"Public Dashboard",
 	"participantGuidelines":"Participant Guidelines",
 	"tsdc":"TSDC",
-	"thankYouMessage":"Thank you for participating in the ",
+	"thankYouMessage":"Thank you for participating in ",
 	"studyPurpose":"Purpose of Study",
 	"dataCollection":"Data Collection",
 	"dC1":"We use the ",
@@ -23,17 +23,19 @@
 	"installNREL":"Install the NREL OpenPATH App on Your Phone",
 	"iN1":"Download the NREL OpenPATH app from the ",
 	"iN2":" or ",
-	"iN3":"Scan the QR code or copy the OPcode (OpenPATH token) below to join.",
-	"iN4":"Remember to give all the requested permissions, including ('always') background location access. If you have a Samsung or Huawei phone, turn off background restrictions.",
+	"iN3":"Join the study using a QR code or access link (described below).",
+	"iN4":"Remember to give all the requested permissions, including (\"always\") background location access. If you have a Samsung or Huawei phone, turn off background restrictions.",
 	"iN5":"Track your trips, label them when prompted, and check out your carbon footprint.",
 	"iN6":"For additional information, see the ",
 	"iN7":"participant guidelines",
 	"addInfo":"For additional information, see the ",
-	"joinStudy":"Join the Study",
-	"jS1":"After you have installed the NREL OpenPATH app on your phone, join the study by scanning the QR code or copying the OPcode (OpenPATH token) using your phone.",
-	"jS2":"The randomly generated token above, starting with <code>nrelop_</code>, is used to login. Save your token in case you lose or change phones. If you lose your token, NREL cannot retrieve it for you since we do not have the ability to match a token to an individual user.",
-	"jP1":"After you have installed the NREL OpenPATH app on your phone, join the program by scanning the QR code or copy-pasting the opcode token provided by your program admin. The OPcode is a long string beginning with <code>nrelop_</code>",
-	"jP2":"The OPcode is a randomly generated token. Save your token in case you lose or change phones. If you lose your token, please contact your program admin for assistance. NREL cannot retrieve it for you since we do not have the ability to match a token to an individual user.",
+	"joinStudy": "Join the Study",
+  "join": "Join",
+	"joinAutogenQrDesc": "After you have installed the NREL OpenPATH app on your phone, join the study by scanning the QR code or copying the link and pasting it into the app.",
+  "joinAutogenButtonDesc": "After you have installed the NREL OpenPATH app on your phone, join the study by clicking the button below or copying the link and pasting it into the app.",
+	"joinAutogenOpcodeDesc": "When you join the study, you will be randomly assigned an OPcode, which is a long string beginning with <code>nrelop_</code>. You will be asked to save your OPcode in case you lose or change phones. If you lose your token, NREL cannot retrieve it for you since we do not have the ability to match a token to an individual user.",
+	"joinAssignedQrDesc": "After you have installed the NREL OpenPATH app on your phone, join the program by scanning the QR code or copy-pasting the OPcode provided by your program admin. The OPcode is a long string beginning with <code>nrelop_</code>.",
+	"joinAssignedOpcodeDesc": "The OPcode is a randomly generated token. Keep your OPcode in a safe place in case you lose or change phones. If you lose your OPcode, please contact your program admin for assistance. NREL cannot retrieve it for you since we do not have the ability to match a token to an individual user.",
 	"dataPrivacy":"Data Privacy and Security",
 	"dP1":"The system",
 	"dP2":" will not ",
diff --git a/frontend/i18n/es.json b/frontend/i18n/es.json
index a32a9e6..afd00a6 100644
--- a/frontend/i18n/es.json
+++ b/frontend/i18n/es.json
@@ -15,7 +15,7 @@
 	"publicDashboard":"Tablero Público",
 	"participantGuidelines":"Instrucciones Para Los Participantes",
 	"tsdc":"TSDC",
-	"thankYouMessage":"Gracias por participar en la ",
+	"thankYouMessage":"Gracias por participar en ",
 	"studyPurpose":"Propósito del estudio",
 	"dataCollection":"Recolección de datos",
 	"dC1":"Utilizaremos la plataforma de ",
@@ -23,17 +23,19 @@
 	"installNREL":"Instalar la aplicación NREL OpenPATH en su teléfono",
 	"iN1":"Descargue la aplicación NREL OpenPATH desde el sitio web de NREL, ",
 	"iN2":" o ",
-	"iN3":"Escanee el código QR o copie el OPcode (token OpenPATH) a continuación para unirse.",
-	"iN4":"Recuerde otorgar todos los permisos solicitados, incluido ('siempre') el acceso a la localización en segundo plano. Si tiene un teléfono Samsung o Huawei, desactive las restricciones de fondo.",
+	"iN3":"Únase al estudio utilizando un código QR o un enlace de acceso (descrito a continuación).",
+	"iN4":"Recuerde otorgar todos los permisos solicitados, incluido (\"siempre\") el acceso a la localización en segundo plano. Si tiene un teléfono Samsung o Huawei, desactive las restricciones de fondo.",
 	"iN5":"Realiza un seguimiento de tus viajes, etiquétalos cuando se te solicite y comprueba tu huella de carbono.",
 	"iN6":"Para obtener información adicional, consulte las ",
 	"iN7":"instrucciones para los participantes",
 	"addInfo":"Para más información, consulta las ",
-	"joinStudy":"Únete al Estudio",
-	"jS1":"Una vez que haya instalado la aplicación OpenPATH del NREL en su teléfono, únase al estudio escaneando código QR o copiando el OPcode (token OpenPATH) usando su teléfono.",
-	"jS2":"El token generado aleatoriamente arriba, que comienza con <code>nrelop_</code>, se usa para iniciar sesión. Guarda tu token en caso de que pierdas o cambies de teléfono. Si pierde su token, NREL no puede recuperarlo porque no tenemos la capacidad de hacer coincidir un token para un usuario individual.",
-	"jP1":"Después de haber instalado la aplicación NREL OpenPATH en su teléfono, únase al programa escaneando el código QR o copiar y pegar el token de código de operación proporcionado por el administrador de su programa. El código OP es una cadena larga que comienza con <code>nrelop_</code>.",
-	"jP2":"El OPcode es un token generado aleatoriamente. Guarda tu token en caso de que pierdas o cambies de teléfono. Si pierde su token, comuníquese con el administrador de su programa para obtener ayuda. NREL no puede recuperarlo porque no tenemos la capacidad de hacer coincidir un token para un usuario individual.",
+	"joinStudy": "Únete al Estudio",
+  "join": "Unirse",
+  "joinAutogenQrDesc": "Después de haber instalado la aplicación NREL OpenPATH en su teléfono, únase al estudio escaneando el código QR o copiando el enlace y pegándolo en la aplicación.",
+  "joinAutogenButtonDesc": "Después de haber instalado la aplicación NREL OpenPATH en su teléfono, únase al estudio haciendo clic en el botón de abajo o copiando el enlace y pegándolo en la aplicación.",
+  "joinAutogenOpcodeDesc": "Cuando se una al estudio, se le asignará aleatoriamente un OPcode, que es una cadena larga que comienza con <code>nrelop_</code>. Se le pedirá que guarde su OPcode en caso de que pierda o cambie de teléfono. Si pierde su token, NREL no puede recuperarlo para usted ya que no tenemos la capacidad de hacer coincidir un token con un usuario individual.",
+  "joinAssignedQrDesc": "Después de haber instalado la aplicación NREL OpenPATH en su teléfono, únase al programa escaneando el código QR o copiando y pegando el OPcode proporcionado por el administrador de su programa. El OPcode es una cadena larga que comienza con <code>nrelop_</code>.",
+  "joinAssignedOpcodeDesc": "El OPcode es un token generado aleatoriamente. Guarde su OPcode en un lugar seguro en caso de que pierda o cambie de teléfono. Si pierde su OPcode, comuníquese con el administrador de su programa para obtener ayuda. NREL no puede recuperarlo porque no tenemos la capacidad de hacer coincidir un token para un usuario individual.",
 	"dataPrivacy":"Privacidad y seguridad de los datos",
 	"dP1":"El sistema",
 	"dP2":" no ",
diff --git a/frontend/i18n/lo.json b/frontend/i18n/lo.json
index b36721c..5cc0e5a 100644
--- a/frontend/i18n/lo.json
+++ b/frontend/i18n/lo.json
@@ -30,11 +30,13 @@
 	"iN6":"ສຳລັບຂໍ້ມູນເພີ່ມເຕີມ, ເບິ່ງທີ່ ",
 	"iN7":"ຂໍ້ແນະນຳຜູ້ເຂົ້າຮ່ວມ",
 	"addInfo":"ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມ, ເບິ່ງທີ່ ",
-	"joinStudy":"ເຂົ້າຮ່ວມການສຶກສາ",
-	"jS1":"ຫຼັງຈາກທ່ານຕິດຕັ້ງແອັບ NREL OpenPATH ໃນໂທລະສັບຂອງທ່ານແລ້ວ, ເຂົ້າຮ່ວມການສຶກສາໂດຍການສະແກນລະຫັດ QR ຫຼືສຳເນົາ OPcode (OpenPATH token) ໂດຍໃຊ້ໂທລະສັບຂອງທ່ານ.",
-	"jS2":"ໂທເຄັນທີ່ສ້າງຂຶ້ນແບບສຸ່ມຂ້າງເທິງ, ເລີ່ມຕົ້ນດ້ວຍ <code>nrelop_</code>, ຖືກນໍາໃຊ້ເພື່ອເຂົ້າສູ່ລະບົບ. ບັນທຶກ token ຂອງທ່ານໃນກໍລະນີທີ່ທ່ານເສຍ ຫຼືປ່ຽນໂທລະສັບ. ຖ້າທ່ານສູນເສຍ token ຂອງທ່ານ, NREL ບໍ່ສາມາດດຶງມັນມາໃຫ້ທ່ານໄດ້. ເນື່ອງຈາກພວກເຮົາບໍ່ມີຄວາມສາມາດໃນການຈັບຄູ່ token ກັບຜູ້ໃຊ້ແຕ່ລະຄົນ.",
-    "jP1":"ຫຼັງຈາກທ່ານຕິດຕັ້ງແອັບ NREL OpenPATH ໃນໂທລະສັບຂອງທ່ານແລ້ວ, ເຂົ້າຮ່ວມໂຄງການໂດຍການສະແກນລະຫັດ QR ຫຼືຄັດລອກ token ຂອງ opcode ທີ່ໃຫ້ໂດຍຜູ້ເບິ່ງແຍງໂຄງການຂອງທ່ານ. OPcode ແມ່ນສາຍຍາວເລີ່ມຕົ້ນດ້ວຍ <code>nrelop_. </code>",
-	"jP2":"OPcode ແມ່ນໂທເຄັນທີ່ສ້າງຂຶ້ນແບບສຸ່ມ. ບັນທຶກລະຫັດ (token) ຂອງທ່ານໃນກໍລະນີທີ່ທ່ານເຮັດເສຍ ຫຼື ປ່ຽນໂທລະສັບ. ຖ້າທ່ານເຮັດໂທເຄັນຂອງທ່ານເສຍ, ກະລຸນາຕິດຕໍ່ຜູ້ຮັບຜິດຊອບໂຄງການຂອງທ່ານເພື່ອຂໍຄວາມຊ່ວຍເຫຼືອ. NREL ບໍ່ສາມາດດຶງມັນມາໃຫ້ທ່ານໄດ້ ເນື່ອງຈາກພວກເຮົາບໍ່ມີ. ຄວາມສາມາດໃນການຈັບຄູ່ token ກັບຜູ້ໃຊ້ສ່ວນບຸກຄົນ.",
+  "joinStudy": "ເຂົ້າຮ່ວມການສຶກສາ",
+  "join": "ເຂົ້າຮ່ວມ",
+  "joinAutogenQrDesc": "ຫຼັງຈາກທ່ານໄດ້ຕິດຕັ້ງແອັບ NREL OpenPATH ໃນໂທລະສັບຂອງທ່ານ, ເຂົ້າຮ່ວມການສຶກສາໂດຍການການສຳເນົາລະຫັດ QR ຫຼືການຄັດລອກລຸ່ມເພື່ອປ່ຽນໃນໂທລະສັບ.",
+  "joinAutogenButtonDesc": "ຫຼັງຈາກທ່ານໄດ້ຕິດຕັ້ງແອັບ NREL OpenPATH ໃນໂທລະສັບຂອງທ່ານ, ເຂົ້າຮ່ວມການສຶກສາໂດຍການການຄລອດປຸ່ນ ຫຼືການຄັດລອກລຸ່ມເພື່ອປ່ຽນໃນໂທລະສັບ.",
+  "joinAutogenOpcodeDesc": "ເມື່ອທ່ານເຂົ້າຮ່ວມການສຶກສາ, ທ່ານຈະຖືກສຸ່ມໃສ່ລະຫັດ OPcode, ເຊິ່ງເປັນສາຍຍາວທີ່ເລີ່ມຕົ້ນດ້ວຍ <code>nrelop_</code>. ທ່ານຈະຖືກຖາມໃຫ້ບັນທຶກ OPcode ຂອງທ່ານໃນກໍລະນີທີ່ທ່ານເສຍ ຫຼືປ່ຽນໂທລະສັບ. ຖ້າທ່ານເສຍ token ຂອງເຈົ້າ, NREL ບໍ່ສາມາດດຶງມັນມາໃຫ້ທ່ານໄດ້ເນື່ອງຈາກພວກເຮົາບໍ່ມີຄວາມສາມາດໃນການຈັບຄູ່ token ກັບຜູ້ໃຊ້ແຕ່ລະຄົນ.",
+  "joinAssignedQrDesc": "ຫຼັງຈາກທ່ານໄດ້ຕິດຕັ້ງແອັບ NREL OpenPATH ໃນໂທລະສັບຂອງທ່ານ, ເຂົ້າຮ່ວມການສຶກສາໂດຍການການສຳເນົາລະຫັດ QR ຫຼືການຄລອດລຸ່ມເພື່ອປ່ຽນໃນໂທລະສັບ. ລະຫັດນີ້ເລີ່ມຕົ້ນດ້ວຍ <code>nrelop_</code>",
+  "joinAssignedOpcodeDesc": "OPcode ແມ່ນໂທເຄັນທີ່ສ້າງຂຶ້ນແບບສຸ່ມ. ເກັບຮັກສາ OPcode ຂອງທ່ານໄວ້ໃນບ່ອນທີ່ປອດໄພໃນກໍລະນີທີ່ທ່ານສູນເສຍຫຼືປ່ຽນໂທລະສັບ. ຖ້າທ່ານເຮັດ OPcode ຂອງທ່ານເສຍ, ກະລຸນາຕິດຕໍ່ຜູ້ເບິ່ງແຍງໂຄງການຂອງທ່ານເພື່ອຂໍຄວາມຊ່ວຍເຫຼືອ. NREL ບໍ່ສາມາດເອົາມັນມາໃຫ້ທ່ານໄດ້ເພາະວ່າພວກເຮົາບໍ່ມີ. ຄວາມສາມາດໃນການຈັບຄູ່ token ກັບຜູ້ໃຊ້ສ່ວນບຸກຄົນ.",
 	"dataPrivacy":"ຄວາມເປັນສ່ວນຕົວຂອງຂໍ້ມູນ ແລະຄວາມປອດໄພ",
 	"dP1":"ລະບົບ",
 	"dP2":"ຈະບໍ່",

From 31a14a933334c77f53a9ac94526c099ef3f96290 Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Fri, 11 Oct 2024 13:41:50 -0400
Subject: [PATCH 4/6] fix text spacing in header; center title

---
 frontend/index.html | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index b692474..f8d4cd4 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -99,7 +99,7 @@
           <div class="site-search-bar">
             <div class="container">
               <div class="row">
-                <div class="col d-flex justify-content-center mb-1">
+                <div class="col d-flex justify-content-center">
                   <nav class="navbar navbar-light">
                     <div class="navbar-collapse collapse" id="searchbar-collapse-mobile">
                       <form
@@ -130,11 +130,12 @@
           <!-- End MOBILE collapsible site search bar -->
         </div>
 
-        <div class="col-md-6 col-xl-8 order-md-1">
-            <p></p>
-            <a style="display:inline;" id="pageTitle" class="app-name">NREL OpenPATH</a>
-            <a style="display:inline;" class="app-name">: </a>
-            <a style="display:inline;" data-i18n="joinPage" class="app-name">Join Page</a>
+        <div class="d-flex align-items-center col-md-6 col-xl-8 order-md-1">
+          <a class="app-name d-flex flex-wrap my-2">
+            <span id="pageTitle" class="app-name">NREL OpenPATH</span>
+            <span class="app-name">:&nbsp;</span>
+            <span data-i18n="joinPage" class="app-name">Join Page</span>
+          </a>
         </div>
 
       </div>

From bcb1bf9b19428686c08253b555c144987d7b50e7 Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Thu, 17 Oct 2024 16:01:36 -0400
Subject: [PATCH 5/6] change emission:// to nrelopenpath://

"emission://" was used for the purpose of testing, but on production we want this to use nrelopenpath://
---
 frontend/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index f8d4cd4..e230cab 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -659,7 +659,7 @@ <h2 data-i18n="contact">Contact</h2>
 
       const generateJoinCode = function() {
         try {
-            const joinUri = new URL(`emission://join?study_config=${STUDY_NAME}`);
+            const joinUri = new URL(`nrelopenpath://join?study_config=${STUDY_NAME}`);
             for (let param of PAGE_URL.searchParams) {
               joinUri.searchParams.set(...param);
             }

From 16b0263dd280fcbc68f5ecc9be36a9a7cf4898ed Mon Sep 17 00:00:00 2001
From: Jack Greenlee <greenljk@mail.uc.edu>
Date: Thu, 17 Oct 2024 16:04:32 -0400
Subject: [PATCH 6/6] add popup for if app not installed and "join" button does
 not work

If the app is installed and the join button is clicked, the user will be taken directly to the app before they see this alert. If they do not have the app installed, they will see this alert prompting them to follow the instructions above

tested on Android and iOS with app installed and not installed
---
 frontend/i18n/en.json | 1 +
 frontend/i18n/es.json | 1 +
 frontend/i18n/lo.json | 1 +
 frontend/index.html   | 1 +
 4 files changed, 4 insertions(+)

diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index 7f3cbf9..e545597 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -36,6 +36,7 @@
 	"joinAutogenOpcodeDesc": "When you join the study, you will be randomly assigned an OPcode, which is a long string beginning with <code>nrelop_</code>. You will be asked to save your OPcode in case you lose or change phones. If you lose your token, NREL cannot retrieve it for you since we do not have the ability to match a token to an individual user.",
 	"joinAssignedQrDesc": "After you have installed the NREL OpenPATH app on your phone, join the program by scanning the QR code or copy-pasting the OPcode provided by your program admin. The OPcode is a long string beginning with <code>nrelop_</code>.",
 	"joinAssignedOpcodeDesc": "The OPcode is a randomly generated token. Keep your OPcode in a safe place in case you lose or change phones. If you lose your OPcode, please contact your program admin for assistance. NREL cannot retrieve it for you since we do not have the ability to match a token to an individual user.",
+  "joinEnsureAppInstalled": "If the app does not automatically launch, please ensure it is installed (instructions above) and try again.",
 	"dataPrivacy":"Data Privacy and Security",
 	"dP1":"The system",
 	"dP2":" will not ",
diff --git a/frontend/i18n/es.json b/frontend/i18n/es.json
index afd00a6..cc528ec 100644
--- a/frontend/i18n/es.json
+++ b/frontend/i18n/es.json
@@ -36,6 +36,7 @@
   "joinAutogenOpcodeDesc": "Cuando se una al estudio, se le asignará aleatoriamente un OPcode, que es una cadena larga que comienza con <code>nrelop_</code>. Se le pedirá que guarde su OPcode en caso de que pierda o cambie de teléfono. Si pierde su token, NREL no puede recuperarlo para usted ya que no tenemos la capacidad de hacer coincidir un token con un usuario individual.",
   "joinAssignedQrDesc": "Después de haber instalado la aplicación NREL OpenPATH en su teléfono, únase al programa escaneando el código QR o copiando y pegando el OPcode proporcionado por el administrador de su programa. El OPcode es una cadena larga que comienza con <code>nrelop_</code>.",
   "joinAssignedOpcodeDesc": "El OPcode es un token generado aleatoriamente. Guarde su OPcode en un lugar seguro en caso de que pierda o cambie de teléfono. Si pierde su OPcode, comuníquese con el administrador de su programa para obtener ayuda. NREL no puede recuperarlo porque no tenemos la capacidad de hacer coincidir un token para un usuario individual.",
+  "joinEnsureAppInstalled": "Si la aplicación no se inicia automáticamente, asegúrese de que esté instalada (instrucciones arriba) e inténtelo de nuevo.",
 	"dataPrivacy":"Privacidad y seguridad de los datos",
 	"dP1":"El sistema",
 	"dP2":" no ",
diff --git a/frontend/i18n/lo.json b/frontend/i18n/lo.json
index 5cc0e5a..4bb7a0d 100644
--- a/frontend/i18n/lo.json
+++ b/frontend/i18n/lo.json
@@ -37,6 +37,7 @@
   "joinAutogenOpcodeDesc": "ເມື່ອທ່ານເຂົ້າຮ່ວມການສຶກສາ, ທ່ານຈະຖືກສຸ່ມໃສ່ລະຫັດ OPcode, ເຊິ່ງເປັນສາຍຍາວທີ່ເລີ່ມຕົ້ນດ້ວຍ <code>nrelop_</code>. ທ່ານຈະຖືກຖາມໃຫ້ບັນທຶກ OPcode ຂອງທ່ານໃນກໍລະນີທີ່ທ່ານເສຍ ຫຼືປ່ຽນໂທລະສັບ. ຖ້າທ່ານເສຍ token ຂອງເຈົ້າ, NREL ບໍ່ສາມາດດຶງມັນມາໃຫ້ທ່ານໄດ້ເນື່ອງຈາກພວກເຮົາບໍ່ມີຄວາມສາມາດໃນການຈັບຄູ່ token ກັບຜູ້ໃຊ້ແຕ່ລະຄົນ.",
   "joinAssignedQrDesc": "ຫຼັງຈາກທ່ານໄດ້ຕິດຕັ້ງແອັບ NREL OpenPATH ໃນໂທລະສັບຂອງທ່ານ, ເຂົ້າຮ່ວມການສຶກສາໂດຍການການສຳເນົາລະຫັດ QR ຫຼືການຄລອດລຸ່ມເພື່ອປ່ຽນໃນໂທລະສັບ. ລະຫັດນີ້ເລີ່ມຕົ້ນດ້ວຍ <code>nrelop_</code>",
   "joinAssignedOpcodeDesc": "OPcode ແມ່ນໂທເຄັນທີ່ສ້າງຂຶ້ນແບບສຸ່ມ. ເກັບຮັກສາ OPcode ຂອງທ່ານໄວ້ໃນບ່ອນທີ່ປອດໄພໃນກໍລະນີທີ່ທ່ານສູນເສຍຫຼືປ່ຽນໂທລະສັບ. ຖ້າທ່ານເຮັດ OPcode ຂອງທ່ານເສຍ, ກະລຸນາຕິດຕໍ່ຜູ້ເບິ່ງແຍງໂຄງການຂອງທ່ານເພື່ອຂໍຄວາມຊ່ວຍເຫຼືອ. NREL ບໍ່ສາມາດເອົາມັນມາໃຫ້ທ່ານໄດ້ເພາະວ່າພວກເຮົາບໍ່ມີ. ຄວາມສາມາດໃນການຈັບຄູ່ token ກັບຜູ້ໃຊ້ສ່ວນບຸກຄົນ.",
+  "joinEnsureAppInstalled": "ຖ້າແອັບບໍ່ເປີດໂດຍອັດຕະໂນມັດ, ກະລຸນາກວດສອບວ່າມັນຖືກຕິດຕັ້ງແລ້ວ (ຄໍາແນະນໍາຂ້າງເທິງ) ແລະລອງໃໝ່ອີກ.",
 	"dataPrivacy":"ຄວາມເປັນສ່ວນຕົວຂອງຂໍ້ມູນ ແລະຄວາມປອດໄພ",
 	"dP1":"ລະບົບ",
 	"dP2":"ຈະບໍ່",
diff --git a/frontend/index.html b/frontend/index.html
index e230cab..cfd5f63 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -667,6 +667,7 @@ <h2 data-i18n="contact">Contact</h2>
             if(isMobile) {
               $('#joinButton').on("click", () => {
                   window.location.href = joinUri.href;
+                  setTimeout(() => window.alert($.i18n('joinEnsureAppInstalled')), 100);
               });
               $('#joinQrRow').hide();
             } else {