From a3c082510f9b310babb5dca5574755c1f21487aa Mon Sep 17 00:00:00 2001
From: ayobi <obrien.aaron.g@gmail.com>
Date: Wed, 18 Sep 2024 23:08:26 -0300
Subject: [PATCH 01/10] init commit

---
 microsetta_interface/implementation.py         | 17 ++++++++++++++++-
 microsetta_interface/tests/test_integration.py |  6 ++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/microsetta_interface/implementation.py b/microsetta_interface/implementation.py
index 283b6755..5adbdddf 100644
--- a/microsetta_interface/implementation.py
+++ b/microsetta_interface/implementation.py
@@ -124,6 +124,7 @@ class Source:
 VIOSCREEN_ID = 10001
 MYFOODREPO_ID = 10002
 POLYPHENOL_FFQ_ID = 10003
+SKIN_SCORING_APP_FFQ_ID = 10005
 SPAIN_FFQ_ID = 10004
 
 SYSTEM_MSG_DICTIONARY = {
@@ -398,6 +399,11 @@ class Source:
         'est_minutes': '30',
         'icon': 'survey_external.svg'
     },
+    SKIN_SCORING_APP_FFQ_ID: {
+        'description': 'TBD',
+        'est_minutes': 'TBD',
+        'icon': 'survey_external.svg'
+    },
 }
 LOCAL_SURVEY_SEQUENCE = [
     BASIC_INFO_ID,
@@ -466,7 +472,8 @@ def _get_req_survey_templates_by_source_type(source_type):
 
 def _get_opt_survey_templates_by_source_type(source_type):
     if source_type == Source.SOURCE_TYPE_HUMAN:
-        return [3, 4, 5, 7, MYFOODREPO_ID, POLYPHENOL_FFQ_ID, SPAIN_FFQ_ID]
+        return [3, 4, 5, 7, MYFOODREPO_ID, POLYPHENOL_FFQ_ID,
+                SPAIN_FFQ_ID, SKIN_SCORING_APP_FFQ_ID]
     elif source_type == Source.SOURCE_TYPE_ANIMAL:
         return []
     elif source_type == Source.SOURCE_TYPE_ENVIRONMENT:
@@ -1366,6 +1373,14 @@ def get_fill_source_survey(*,
                 account_id, source_id, "data", reconsent=True
             )
 
+        # this is remote, so go to an external url, not our jinja2 template
+        return redirect(survey_output['survey_template_text']['url'])
+    elif survey_template_id == SKIN_SCORING_APP_FFQ_ID:
+        if need_reconsent:
+            return render_consent_page(
+                account_id, source_id, "data", reconsent=True
+            )
+
         # this is remote, so go to an external url, not our jinja2 template
         return redirect(survey_output['survey_template_text']['url'])
     else:
diff --git a/microsetta_interface/tests/test_integration.py b/microsetta_interface/tests/test_integration.py
index ddc4a4e2..f4e8ac90 100644
--- a/microsetta_interface/tests/test_integration.py
+++ b/microsetta_interface/tests/test_integration.py
@@ -106,6 +106,7 @@ def _fake_jwt(email, verified, uniqify=False):
 MYFOODREPO_ID = 10002
 POLYPHENOL_FFQ_ID = 10003
 SPAIN_FFQ_ID = 10004
+SKIN_SCORING_FFQ_ID = 10005
 
 BASIC_INFO_SIMPLE = {"112": "1970"}
 BASIC_INFO_SIMPLE_ALT = {"112": "1983"}
@@ -573,6 +574,11 @@ def _complete_spain_ffq_survey(self, account_id, source_id):
                f'take_survey?survey_template_id=10004')
         return self.app.get(url), url
 
+    def _complete_skin_scoring_app_ffq_survey(self, account_id, source_id):
+        url = (f'/accounts/{account_id}/sources/{source_id}/'
+               f'take_survey?survey_template_id=10005')
+        return self.app.get(url), url
+
     def test_new_user_to_source_listing(self):
         resp, url, user_jwt = self._new_to_create()
         account_id, _, _ = self._ids_from_url(url)

From a7d3420f9b63f12a38a5053ed4532753d549f2ca Mon Sep 17 00:00:00 2001
From: ayobi <obrien.aaron.g@gmail.com>
Date: Thu, 19 Sep 2024 23:00:44 -0300
Subject: [PATCH 02/10] removing ffq, adding unique id for ssa card

---
 microsetta_interface/implementation.py         | 13 ++++++++-----
 microsetta_interface/templates/source.jinja2   |  4 +++-
 microsetta_interface/tests/test_integration.py |  4 ++--
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/microsetta_interface/implementation.py b/microsetta_interface/implementation.py
index 2f31ee95..0b92a40c 100644
--- a/microsetta_interface/implementation.py
+++ b/microsetta_interface/implementation.py
@@ -124,7 +124,7 @@ class Source:
 VIOSCREEN_ID = 10001
 MYFOODREPO_ID = 10002
 POLYPHENOL_FFQ_ID = 10003
-SKIN_SCORING_APP_FFQ_ID = 10005
+SKIN_SCORING_APP_ID = 10005
 SPAIN_FFQ_ID = 10004
 
 SYSTEM_MSG_DICTIONARY = {
@@ -399,7 +399,7 @@ class Source:
         'est_minutes': '30',
         'icon': 'survey_external.svg'
     },
-    SKIN_SCORING_APP_FFQ_ID: {
+    SKIN_SCORING_APP_ID: {
         'description': 'TBD',
         'est_minutes': 'TBD',
         'icon': 'survey_external.svg'
@@ -473,7 +473,7 @@ def _get_req_survey_templates_by_source_type(source_type):
 def _get_opt_survey_templates_by_source_type(source_type):
     if source_type == Source.SOURCE_TYPE_HUMAN:
         return [3, 4, 5, 7, MYFOODREPO_ID, POLYPHENOL_FFQ_ID,
-                SPAIN_FFQ_ID, SKIN_SCORING_APP_FFQ_ID]
+                SPAIN_FFQ_ID, SKIN_SCORING_APP_ID]
     elif source_type == Source.SOURCE_TYPE_ANIMAL:
         return []
     elif source_type == Source.SOURCE_TYPE_ENVIRONMENT:
@@ -1406,7 +1406,7 @@ def get_fill_source_survey(*,
 
         # this is remote, so go to an external url, not our jinja2 template
         return redirect(survey_output['survey_template_text']['url'])
-    elif survey_template_id == SKIN_SCORING_APP_FFQ_ID:
+    elif survey_template_id == SKIN_SCORING_APP_ID:
         if need_reconsent:
             return render_consent_page(
                 account_id, source_id, "data", reconsent=True
@@ -1864,7 +1864,10 @@ def get_source(*, account_id=None, source_id=None):
     for answer in survey_answers:
         template_id = answer['survey_template_id']
         for template in local_surveys + remote_surveys:
-            if template['survey_template_id'] == template_id:
+            if template['survey_template_id'] == 10005:
+                template['survey_id'] = answer['survey_id']
+                template['answered'] = True
+            else:
                 template['answered'] = True
 
     for template in local_surveys:
diff --git a/microsetta_interface/templates/source.jinja2 b/microsetta_interface/templates/source.jinja2
index eafd0f76..7e5bdf8b 100644
--- a/microsetta_interface/templates/source.jinja2
+++ b/microsetta_interface/templates/source.jinja2
@@ -128,7 +128,9 @@
             {% endif %}
                 <div class="card card-survey-external">
                     <div class="row m-2 survey-info-row">
-                        {% if detail.answered %}
+                        {% if detail.survey_template_id == 10005 %}
+                            <div class="col-8 card-survey-completed">{{ _('COMPLETED') }} <br> {{ _('Unique ID') }}: {{ detail.survey_id }}</div>
+                        {% elif detail.answered %}
                             <div class="col-8 card-survey-completed">{{ _('COMPLETED') }}</div>
                         {% else %}
                             <div class="col-8 card-survey-new">{{ _('NEW') }}</div>
diff --git a/microsetta_interface/tests/test_integration.py b/microsetta_interface/tests/test_integration.py
index c9c93388..9b63197c 100644
--- a/microsetta_interface/tests/test_integration.py
+++ b/microsetta_interface/tests/test_integration.py
@@ -106,7 +106,7 @@ def _fake_jwt(email, verified, uniqify=False):
 MYFOODREPO_ID = 10002
 POLYPHENOL_FFQ_ID = 10003
 SPAIN_FFQ_ID = 10004
-SKIN_SCORING_FFQ_ID = 10005
+SKIN_SCORING_ID = 10005
 
 BASIC_INFO_SIMPLE = {"112": "1970"}
 BASIC_INFO_SIMPLE_ALT = {"112": "1983"}
@@ -574,7 +574,7 @@ def _complete_spain_ffq_survey(self, account_id, source_id):
                f'take_survey?survey_template_id=10004')
         return self.app.get(url), url
 
-    def _complete_skin_scoring_app_ffq_survey(self, account_id, source_id):
+    def _complete_skin_scoring_app_survey(self, account_id, source_id):
         url = (f'/accounts/{account_id}/sources/{source_id}/'
                f'take_survey?survey_template_id=10005')
         return self.app.get(url), url

From ed1a35c611795fa22f9af9a9dbe9ac678ef3374c Mon Sep 17 00:00:00 2001
From: ayobi <obrien.aaron.g@gmail.com>
Date: Fri, 20 Sep 2024 21:12:02 -0300
Subject: [PATCH 03/10] show unique id/clickable after completed for project
 10005

---
 microsetta_interface/templates/source.jinja2 | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/microsetta_interface/templates/source.jinja2 b/microsetta_interface/templates/source.jinja2
index 7e5bdf8b..e31b086a 100644
--- a/microsetta_interface/templates/source.jinja2
+++ b/microsetta_interface/templates/source.jinja2
@@ -123,13 +123,13 @@
         <div class="row mt-4">
         {% for detail in remote_surveys %}
             <div class="col-12 col-sm-6 col-md-4 p-2">
-            {% if not detail.answered %}
+            {% if detail.survey_template_id == 10005 or not detail.answered %}
                 <a style="text-decoration: none" onClick="return takeExternalSurvey('/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}', '{{ detail.survey_template_title }}', '{{ detail.description }}');" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
             {% endif %}
                 <div class="card card-survey-external">
                     <div class="row m-2 survey-info-row">
-                        {% if detail.survey_template_id == 10005 %}
-                            <div class="col-8 card-survey-completed">{{ _('COMPLETED') }} <br> {{ _('Unique ID') }}: {{ detail.survey_id }}</div>
+                        {% if detail.survey_template_id == 10005 and detail.answered %}
+                            <div class="col-8 card-survey-new">{{ _('COMPLETED') }} <br> {{ _('Unique ID') }}: {{ detail.survey_id }}</div>
                         {% elif detail.answered %}
                             <div class="col-8 card-survey-completed">{{ _('COMPLETED') }}</div>
                         {% else %}
@@ -138,7 +138,7 @@
                         <div class="col-4 small-text survey-info text-end">{{ detail.est_minutes }} {{ _('min') }}</div>
                     </div>
                     <div class="row m-3 text-center survey-title">
-                        {% if not detail.answered %}
+                        {% if not detail.answered or detail.survey_template_id == 10005 %}
                             <img src="/static/img/survey_external.svg" class="card-survey-icon-external">
                         {% else %}
                             <img src="/static/img/survey_external_taken.svg" class="card-survey-icon-external">
@@ -152,7 +152,7 @@
                     {% endif %}
                     </div>
                 </div>
-            {% if not detail.answered %}
+                {% if not detail.answered or detail.survey_template_id == 10005 %}
                 </a>
             {% endif %}
             </div>

From 331e45c83bacb679f1cd4b622259c82aa78d871b Mon Sep 17 00:00:00 2001
From: ayobi <obrien.aaron.g@gmail.com>
Date: Tue, 24 Sep 2024 14:53:01 -0300
Subject: [PATCH 04/10] change for constants

---
 microsetta_interface/implementation.py         | 5 +++--
 microsetta_interface/templates/source.jinja2   | 8 ++++----
 microsetta_interface/tests/test_integration.py | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/microsetta_interface/implementation.py b/microsetta_interface/implementation.py
index 0b92a40c..c2a1bbea 100644
--- a/microsetta_interface/implementation.py
+++ b/microsetta_interface/implementation.py
@@ -1864,7 +1864,7 @@ def get_source(*, account_id=None, source_id=None):
     for answer in survey_answers:
         template_id = answer['survey_template_id']
         for template in local_surveys + remote_surveys:
-            if template['survey_template_id'] == 10005:
+            if template['survey_template_id'] == SKIN_SCORING_APP_ID:
                 template['survey_id'] = answer['survey_id']
                 template['answered'] = True
             else:
@@ -1928,7 +1928,8 @@ def get_source(*, account_id=None, source_id=None):
                                  source_name=source_output['source_name'],
                                  profile_has_samples=profile_has_samples,
                                  need_reconsent=need_reconsent,
-                                 show_update_age=show_update_age
+                                 show_update_age=show_update_age,
+                                 SKIN_SCORING_APP_ID=SKIN_SCORING_APP_ID
                                  )
 
 
diff --git a/microsetta_interface/templates/source.jinja2 b/microsetta_interface/templates/source.jinja2
index e31b086a..691dad86 100644
--- a/microsetta_interface/templates/source.jinja2
+++ b/microsetta_interface/templates/source.jinja2
@@ -123,12 +123,12 @@
         <div class="row mt-4">
         {% for detail in remote_surveys %}
             <div class="col-12 col-sm-6 col-md-4 p-2">
-            {% if detail.survey_template_id == 10005 or not detail.answered %}
+            {% if detail.survey_template_id == SKIN_SCORING_APP_ID or not detail.answered %}
                 <a style="text-decoration: none" onClick="return takeExternalSurvey('/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}', '{{ detail.survey_template_title }}', '{{ detail.description }}');" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
             {% endif %}
                 <div class="card card-survey-external">
                     <div class="row m-2 survey-info-row">
-                        {% if detail.survey_template_id == 10005 and detail.answered %}
+                        {% if detail.survey_template_id == SKIN_SCORING_APP_ID and detail.answered %}
                             <div class="col-8 card-survey-new">{{ _('COMPLETED') }} <br> {{ _('Unique ID') }}: {{ detail.survey_id }}</div>
                         {% elif detail.answered %}
                             <div class="col-8 card-survey-completed">{{ _('COMPLETED') }}</div>
@@ -138,7 +138,7 @@
                         <div class="col-4 small-text survey-info text-end">{{ detail.est_minutes }} {{ _('min') }}</div>
                     </div>
                     <div class="row m-3 text-center survey-title">
-                        {% if not detail.answered or detail.survey_template_id == 10005 %}
+                        {% if not detail.answered or detail.survey_template_id == SKIN_SCORING_APP_ID %}
                             <img src="/static/img/survey_external.svg" class="card-survey-icon-external">
                         {% else %}
                             <img src="/static/img/survey_external_taken.svg" class="card-survey-icon-external">
@@ -152,7 +152,7 @@
                     {% endif %}
                     </div>
                 </div>
-                {% if not detail.answered or detail.survey_template_id == 10005 %}
+                {% if not detail.answered or detail.survey_template_id == SKIN_SCORING_APP_ID %}
                 </a>
             {% endif %}
             </div>
diff --git a/microsetta_interface/tests/test_integration.py b/microsetta_interface/tests/test_integration.py
index 9b63197c..942b96aa 100644
--- a/microsetta_interface/tests/test_integration.py
+++ b/microsetta_interface/tests/test_integration.py
@@ -106,7 +106,7 @@ def _fake_jwt(email, verified, uniqify=False):
 MYFOODREPO_ID = 10002
 POLYPHENOL_FFQ_ID = 10003
 SPAIN_FFQ_ID = 10004
-SKIN_SCORING_ID = 10005
+SKIN_SCORING_APP_ID = 10005
 
 BASIC_INFO_SIMPLE = {"112": "1970"}
 BASIC_INFO_SIMPLE_ALT = {"112": "1983"}
@@ -576,7 +576,7 @@ def _complete_spain_ffq_survey(self, account_id, source_id):
 
     def _complete_skin_scoring_app_survey(self, account_id, source_id):
         url = (f'/accounts/{account_id}/sources/{source_id}/'
-               f'take_survey?survey_template_id=10005')
+               f'take_survey?survey_template_id={SKIN_SCORING_APP_ID}')
         return self.app.get(url), url
 
     def test_new_user_to_source_listing(self):

From 923ab59c5152b93b329e75c1ef21a337a1540de9 Mon Sep 17 00:00:00 2001
From: lmerchant <lmerchant@ucsd.edu>
Date: Fri, 10 Jan 2025 17:17:12 -0800
Subject: [PATCH 05/10] style: add flex grid CSS to outer div of barcode
 buttons to enable wrapping

Make the div surrounding all the barcode buttons on the "My Kits" web page a
flex grid. Now all the buttons wrap and are responsive.

Fixes Issue #323
---
 microsetta_interface/templates/kits.jinja2 | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/microsetta_interface/templates/kits.jinja2 b/microsetta_interface/templates/kits.jinja2
index 1f776999..e60e4835 100644
--- a/microsetta_interface/templates/kits.jinja2
+++ b/microsetta_interface/templates/kits.jinja2
@@ -23,6 +23,11 @@
         .tooltip.bs-tooltip-top .tooltip-arrow::before {
             border-top-color: #0000ff !important;
         }
+        .new_kit_sample_container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+        }
     </style>
     <script src="/static/vendor/js/jquery.form-4.2.2/jquery.form.min.js"></script>
     <script>

From 1e935aea69a15de654b16b697e9937b28c2274c4 Mon Sep 17 00:00:00 2001
From: Lynne Merchant <merchant.lynne@gmail.com>
Date: Mon, 27 Jan 2025 14:11:49 -0800
Subject: [PATCH 06/10] Move CSS out of kits.jinja2 template into
 minimal_interface.css

---
 microsetta_interface/static/css/minimal_interface.css | 5 ++++-
 microsetta_interface/templates/kits.jinja2            | 5 -----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/microsetta_interface/static/css/minimal_interface.css b/microsetta_interface/static/css/minimal_interface.css
index f365bf4a..39c6afcd 100644
--- a/microsetta_interface/static/css/minimal_interface.css
+++ b/microsetta_interface/static/css/minimal_interface.css
@@ -1210,6 +1210,7 @@ input.barcode-checkbox[type=checkbox]:checked+label {
 .new_kit_sample_container {
     display: flex;
     flex-direction: row;
+    flex-wrap: wrap;
     align-items: center;
     padding: 0px;
     gap: 16px;
@@ -1219,6 +1220,7 @@ input.barcode-checkbox[type=checkbox]:checked+label {
     .new_kit_sample_container {
         display: flex;
         flex-direction: column;
+        flex-wrap: wrap;
         align-items: center;
         padding: 0px;
         gap: 16px;
@@ -1581,6 +1583,7 @@ input.barcode-checkbox[type=checkbox]:checked+label {
     border-radius: 4px 4px 4px 4px;
     width: 240px;
 }
+
 @media (min-width: 1280px){
     .navbar-expand-custom {
         flex-direction: row;
@@ -1607,4 +1610,4 @@ input.barcode-checkbox[type=checkbox]:checked+label {
     .navbar-expand-custom .navbar-toggler {
         display: none;
     }
-}
\ No newline at end of file
+}
diff --git a/microsetta_interface/templates/kits.jinja2 b/microsetta_interface/templates/kits.jinja2
index e60e4835..1f776999 100644
--- a/microsetta_interface/templates/kits.jinja2
+++ b/microsetta_interface/templates/kits.jinja2
@@ -23,11 +23,6 @@
         .tooltip.bs-tooltip-top .tooltip-arrow::before {
             border-top-color: #0000ff !important;
         }
-        .new_kit_sample_container {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-        }
     </style>
     <script src="/static/vendor/js/jquery.form-4.2.2/jquery.form.min.js"></script>
     <script>

From 07c57c305093c4b215487ddeb390106e82095712 Mon Sep 17 00:00:00 2001
From: Cassidy Symons <csymons@ucsd.edu>
Date: Fri, 31 Jan 2025 11:16:21 -0800
Subject: [PATCH 07/10] Partial refactor

---
 microsetta_interface/implementation.py       | 55 ++++++++++++++--
 microsetta_interface/routes.yaml             | 16 +++++
 microsetta_interface/templates/source.jinja2 | 68 ++++++++++++++++++--
 3 files changed, 128 insertions(+), 11 deletions(-)

diff --git a/microsetta_interface/implementation.py b/microsetta_interface/implementation.py
index 3f4fe073..cabd4be7 100644
--- a/microsetta_interface/implementation.py
+++ b/microsetta_interface/implementation.py
@@ -400,8 +400,18 @@ class Source:
         'icon': 'survey_external.svg'
     },
     SKIN_SCORING_APP_ID: {
-        'description': 'TBD',
-        'est_minutes': 'TBD',
+        'description': 'This will direct you to the ModiFace skin-scoring web '
+                       'app. This app allows you to upload a selfie photo, '
+                       'which will be used to generate anonymized data about '
+                       'your skin for researchers and provide you with what '
+                       'the algorithm assesses to be your top two skin '
+                       'concerns. You will be provided a username and password'
+                       ' on the next screen to access the app, which will link'
+                       ' your ModiFace results to your skin sample. This app '
+                       'is hosted by a third-party provider; we are '
+                       'unable to provide any assistance if you encounter '
+                       'errors or issues while using the app.',
+        'est_minutes': '5',
         'icon': 'survey_external.svg'
     },
 }
@@ -1557,6 +1567,26 @@ def get_myfoodrepo_no_slots(*, account_id=None, source_id=None):
                                  source_id=source_id)
 
 
+@prerequisite([SOURCE_PREREQS_MET, BIOSPECIMEN_PREREQS_MET])
+def post_ajax_skin_scoring_app_credentials(*, account_id, source_id):
+    need_reconsent = check_current_consent(account_id, source_id, "data")
+
+    if need_reconsent:
+        return render_consent_page(
+            account_id, source_id, "data", reconsent=True
+        )
+
+    has_error, credentials, _ = ApiRequest.post(
+        "/accounts/%s/sources/%s/surveys/skin_scoring_app_credentials"\
+            % (account_id, source_id)
+    )
+    if has_error == 404:
+        # No available slots, handle this gracefully
+        return flask.jsonify({"app_username": None, "app_password": None})
+    else:
+        return flask.jsonify(credentials)
+
+
 @prerequisite([SOURCE_PREREQS_MET, BIOSPECIMEN_PREREQS_MET])
 def get_fill_vioscreen_remote_sample_survey(*,
                                             account_id=None,
@@ -1897,11 +1927,24 @@ def get_source(*, account_id=None, source_id=None):
         template['est_minutes'] = SURVEY_INFO[template_id]['est_minutes']
         template['icon'] = SURVEY_INFO[template_id]['icon']
 
-    # TODO: MyFoodRepo logic needs to be refactored when we reactivate it
-    """
     # any survey specific stuff like opening a tab
     # or slot checking
-    for idx, template in enumerate(remote_surveys[:]):
+    # NB: change "_" back to "idx" when MyFoodRepo is reactivated or if
+    # another external survey requires similar functionality
+    for _, template in enumerate(remote_surveys[:]):
+        if template['survey_template_id'] == SKIN_SCORING_APP_ID:
+            has_error, credentials, _ = ApiRequest.get(
+                '/accounts/%s/sources/%s/surveys/skin_scoring_app_credentials'
+                 % (account_id, source_id)
+            )
+
+            if has_error:
+                return has_error
+
+            template['credentials'] = credentials
+
+        # TODO: MyFoodRepo logic needs to be refactored when we reactivate it
+        """
         if template['survey_template_id'] == MYFOODREPO_ID:
             has_error, slots, _ = ApiRequest.get('/slots/myfoodrepo')
             if has_error:
@@ -1914,7 +1957,7 @@ def get_source(*, account_id=None, source_id=None):
                 per_source_not_taken.pop(idx)
         else:
             template['new_tab'] = False
-    """
+        """
 
     local_surveys = [translate_survey_template(s) for s in local_surveys]
     remote_surveys = [translate_survey_template(s) for s in remote_surveys]
diff --git a/microsetta_interface/routes.yaml b/microsetta_interface/routes.yaml
index 75fd7842..8cad9bf9 100644
--- a/microsetta_interface/routes.yaml
+++ b/microsetta_interface/routes.yaml
@@ -835,6 +835,22 @@ paths:
         '302':
           description: Redirecting to necessary action
   
+  '/accounts/{account_id}/sources/{source_id}/create_skin_scoring_app_credentials':
+    post:
+      operationId: microsetta_interface.implementation.post_ajax_skin_scoring_app_credentials
+      tags:
+        - Survey
+      parameters:
+        - $ref: '#/components/parameters/account_id'
+        - $ref: '#/components/parameters/source_id'
+      responses:
+        '200':
+          description: Credentials for skin scoring app
+          content:
+            application/json:
+              schema:
+                type: object
+
   '/accounts/{account_id}/sources/{source_id}/vioscreen_ffq':
     get:
       operationId: microsetta_interface.implementation.get_fill_vioscreen_remote_sample_survey
diff --git a/microsetta_interface/templates/source.jinja2 b/microsetta_interface/templates/source.jinja2
index 691dad86..fbb69687 100644
--- a/microsetta_interface/templates/source.jinja2
+++ b/microsetta_interface/templates/source.jinja2
@@ -45,6 +45,40 @@
         }
         {% endif %}
 
+        let ssa_username = '';
+        let ssa_password = ''
+
+        function handleSkinAppModal(survey_link, survey_title, survey_description, app_username, app_password) {
+            $("#skin-app-modal-title").empty();
+            $("#skin-app-modal-title").text(survey_title);
+            $("#skin-app-survey-description").empty();
+            $("#skin-app-survey-description").text(survey_description);
+
+            if(app_username != '' && app_username != 'None') {
+                console.log(app_username);
+                ssa_username = app_username;
+                ssa_password = app_password;
+                document.getElementById("app-credentials-div").style.display = '';
+
+                // Once we display the credentials, the button action is to open the actual survey
+                $("#skin-app-take-survey").click(async function(e) {
+                    window.open(survey_link, '_blank').focus();
+                    $("#skin_app_modal").modal('hide');
+
+                    // We need to wait a couple of seconds for the external survey to register in the database, then reload the page. This is not ideal.
+                    await new Promise(r => setTimeout(r, 5000));
+                    window.location.reload();
+                });
+            } else {
+                document.getElementById("app-credentials-div").style.display = 'none';
+                $("#skin-app-take-survey").click(async function(e) {
+                    alert("Get credentials here!");
+                });
+            }
+            $("#skin_app_modal").modal('show');
+            return false;
+        }
+
         function hideModal() {
             $("#source_modal").modal('hide');
             return false;
@@ -123,14 +157,16 @@
         <div class="row mt-4">
         {% for detail in remote_surveys %}
             <div class="col-12 col-sm-6 col-md-4 p-2">
-            {% if detail.survey_template_id == SKIN_SCORING_APP_ID or not detail.answered %}
-                <a style="text-decoration: none" onClick="return takeExternalSurvey('/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}', '{{ detail.survey_template_title }}', '{{ detail.description }}');" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
+            {% if detail.survey_template_id == SKIN_SCORING_APP_ID %}
+                <a style="text-decoration: none" onClick="return handleSkinAppModal('/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}', '{{ detail.survey_template_title }}', '{{ detail.description }}', '{{ detail.credentials['app_username'] }}', '{{ detail.credentials['app_password'] }}');" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
+            {% else %}
+                {% if not detail.answered %}
+                    <a style="text-decoration: none" onClick="return takeExternalSurvey('/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}', '{{ detail.survey_template_title }}', '{{ detail.description }}');" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
+                {% endif %}
             {% endif %}
                 <div class="card card-survey-external">
                     <div class="row m-2 survey-info-row">
-                        {% if detail.survey_template_id == SKIN_SCORING_APP_ID and detail.answered %}
-                            <div class="col-8 card-survey-new">{{ _('COMPLETED') }} <br> {{ _('Unique ID') }}: {{ detail.survey_id }}</div>
-                        {% elif detail.answered %}
+                        {% if detail.answered %}
                             <div class="col-8 card-survey-completed">{{ _('COMPLETED') }}</div>
                         {% else %}
                             <div class="col-8 card-survey-new">{{ _('NEW') }}</div>
@@ -181,4 +217,26 @@
     </div>
 </div>
 
+<div class="modal fade" id="skin_app_modal" tabindex="-1" role="dialog" aria-labelledby="skinAppModal" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <img src="/static/img/survey_external.svg">
+                <span class="survey-title" id="skin-app-modal-title"></span>
+            </div>
+            <div class="modal-body">
+                <p class="survey-description" id="skin-app-survey-description"></p>
+            </div>
+            <div class="modal-body" id="app-credentials-div">
+                <strong>Username: </strong><span id="app-credentials-username"></span><br />
+                <strong>Password: </strong><span id="app-credentials-password"></span>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-white-blue-border" id="skin_app_cancel" onClick="hideModal();">{{ _('Maybe Later') }}</button>
+                <button type="button" class="btn btn-blue-gradient" id="skin-app-take-survey">{{ _('Take This Survey Now') }}</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 {% endblock %}

From 7ea99249349f40275990977b6234bce71547d1f5 Mon Sep 17 00:00:00 2001
From: Cassidy Symons <csymons@ucsd.edu>
Date: Tue, 4 Feb 2025 14:39:23 -0800
Subject: [PATCH 08/10] Finish refactor

---
 microsetta_interface/implementation.py       |  3 +-
 microsetta_interface/templates/source.jinja2 | 68 +++++++++++++++-----
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/microsetta_interface/implementation.py b/microsetta_interface/implementation.py
index cabd4be7..4f39505f 100644
--- a/microsetta_interface/implementation.py
+++ b/microsetta_interface/implementation.py
@@ -1581,8 +1581,7 @@ def post_ajax_skin_scoring_app_credentials(*, account_id, source_id):
             % (account_id, source_id)
     )
     if has_error == 404:
-        # No available slots, handle this gracefully
-        return flask.jsonify({"app_username": None, "app_password": None})
+        return flask.jsonify({"app_username": "", "app_password": ""})
     else:
         return flask.jsonify(credentials)
 
diff --git a/microsetta_interface/templates/source.jinja2 b/microsetta_interface/templates/source.jinja2
index fbb69687..b5c0e4df 100644
--- a/microsetta_interface/templates/source.jinja2
+++ b/microsetta_interface/templates/source.jinja2
@@ -45,8 +45,8 @@
         }
         {% endif %}
 
-        let ssa_username = '';
-        let ssa_password = ''
+        let skin_app_username = '';
+        let skin_app_password = '';
 
         function handleSkinAppModal(survey_link, survey_title, survey_description, app_username, app_password) {
             $("#skin-app-modal-title").empty();
@@ -54,25 +54,50 @@
             $("#skin-app-survey-description").empty();
             $("#skin-app-survey-description").text(survey_description);
 
+            // We allow the function to update the global variables, which will happen when the user receives credentials and re-renders the modal.
+            // However, there's no situation where we'd retract the credentials, so we don't need to do anything with blank values.
             if(app_username != '' && app_username != 'None') {
-                console.log(app_username);
-                ssa_username = app_username;
-                ssa_password = app_password;
+                skin_app_username = app_username
+                skin_app_password = app_password
+            }
+
+            if(skin_app_username != '') {
+                $("#skin-app-take-survey").html('{{ _('Take This Survey Now') }}');
+
                 document.getElementById("app-credentials-div").style.display = '';
+                document.getElementById("app-credentials-username").innerHTML = skin_app_username;
+                document.getElementById("app-credentials-password").innerHTML = skin_app_password;
 
                 // Once we display the credentials, the button action is to open the actual survey
-                $("#skin-app-take-survey").click(async function(e) {
+                $("#skin-app-take-survey").click(function(e) {
                     window.open(survey_link, '_blank').focus();
-                    $("#skin_app_modal").modal('hide');
-
-                    // We need to wait a couple of seconds for the external survey to register in the database, then reload the page. This is not ideal.
-                    await new Promise(r => setTimeout(r, 5000));
-                    window.location.reload();
                 });
             } else {
+                $("#skin-app-take-survey").html('{{ _('Get Username and Password') }}');
+
                 document.getElementById("app-credentials-div").style.display = 'none';
                 $("#skin-app-take-survey").click(async function(e) {
-                    alert("Get credentials here!");
+                    let url = '/accounts/{{ account_id }}/sources/{{ source_id }}/create_skin_scoring_app_credentials';
+                    $.ajax({
+                        url: url,
+                        type: "POST",
+                        success: function(data) {
+                            if(!Object.hasOwn(data, 'app_username')) {
+                                // The response doesn't have credentials, something went very wrong. Handle it gracefully.
+                                document.getElementById("app-error").style.display = '';
+                            } else {
+                                let s_user = data['app_username'];
+                                let s_pass = data['app_password'];
+                                if (s_user.length < 1) {
+                                    // We weren't able to allocate them credentials.
+                                    document.getElementById("app-error").style.display = '';
+                                } else {
+                                    // We got credentials, refresh this modal
+                                    handleSkinAppModal(survey_link, survey_title, survey_description, s_user, s_pass);
+                                }
+                            }
+                        }
+                    });
                 });
             }
             $("#skin_app_modal").modal('show');
@@ -83,6 +108,11 @@
             $("#source_modal").modal('hide');
             return false;
         }
+
+        function hideSkinModal() {
+            $("#skin_app_modal").modal('hide');
+            return false;
+        }
     </script>
     <script src="/static/vendor/js/jquery.form-4.2.2/jquery.form.min.js"></script>
 {% endblock %}
@@ -217,6 +247,7 @@
     </div>
 </div>
 
+<! -- Modal for skin-scoring app -->
 <div class="modal fade" id="skin_app_modal" tabindex="-1" role="dialog" aria-labelledby="skinAppModal" aria-hidden="true">
     <div class="modal-dialog" role="document">
         <div class="modal-content">
@@ -228,11 +259,18 @@
                 <p class="survey-description" id="skin-app-survey-description"></p>
             </div>
             <div class="modal-body" id="app-credentials-div">
-                <strong>Username: </strong><span id="app-credentials-username"></span><br />
-                <strong>Password: </strong><span id="app-credentials-password"></span>
+                <p class="survey-description">
+                    <strong>Username: </strong><span id="app-credentials-username"></span><br />
+                    <strong>Password: </strong><span id="app-credentials-password"></span>
+                </p>
+            </div>
+            <div class="modal-body" id="app-error" style="display: none">
+                <p class="survey-description">
+                    {{ _('Sorry, there was a problem generating a username and password. Please try again later.') }}
+                </p>
             </div>
             <div class="modal-footer">
-                <button type="button" class="btn btn-white-blue-border" id="skin_app_cancel" onClick="hideModal();">{{ _('Maybe Later') }}</button>
+                <button type="button" class="btn btn-white-blue-border" id="skin_app_cancel" onClick="hideSkinModal();">{{ _('Maybe Later') }}</button>
                 <button type="button" class="btn btn-blue-gradient" id="skin-app-take-survey">{{ _('Take This Survey Now') }}</button>
             </div>
         </div>

From 77e1aab66f9f85dd8ef2a284547054c12cd91b65 Mon Sep 17 00:00:00 2001
From: Cassidy Symons <csymons@ucsd.edu>
Date: Tue, 4 Feb 2025 15:21:34 -0800
Subject: [PATCH 09/10] Lint

---
 microsetta_interface/implementation.py | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/microsetta_interface/implementation.py b/microsetta_interface/implementation.py
index 4f39505f..6ee040ee 100644
--- a/microsetta_interface/implementation.py
+++ b/microsetta_interface/implementation.py
@@ -1577,8 +1577,8 @@ def post_ajax_skin_scoring_app_credentials(*, account_id, source_id):
         )
 
     has_error, credentials, _ = ApiRequest.post(
-        "/accounts/%s/sources/%s/surveys/skin_scoring_app_credentials"\
-            % (account_id, source_id)
+        "/accounts/%s/sources/%s/surveys/skin_scoring_app_credentials"
+        % (account_id, source_id)
     )
     if has_error == 404:
         return flask.jsonify({"app_username": "", "app_password": ""})
@@ -1934,7 +1934,7 @@ def get_source(*, account_id=None, source_id=None):
         if template['survey_template_id'] == SKIN_SCORING_APP_ID:
             has_error, credentials, _ = ApiRequest.get(
                 '/accounts/%s/sources/%s/surveys/skin_scoring_app_credentials'
-                 % (account_id, source_id)
+                % (account_id, source_id)
             )
 
             if has_error:

From e30262058be568bd564f9b54f52ff41ac6d46639 Mon Sep 17 00:00:00 2001
From: Cassidy Symons <csymons@ucsd.edu>
Date: Sun, 9 Feb 2025 17:50:39 -0800
Subject: [PATCH 10/10] Feedback from code review

---
 microsetta_interface/implementation.py       | 14 +++++++-------
 microsetta_interface/templates/source.jinja2 | 20 ++++++++++----------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/microsetta_interface/implementation.py b/microsetta_interface/implementation.py
index 6ee040ee..78efbfb3 100644
--- a/microsetta_interface/implementation.py
+++ b/microsetta_interface/implementation.py
@@ -400,15 +400,15 @@ class Source:
         'icon': 'survey_external.svg'
     },
     SKIN_SCORING_APP_ID: {
-        'description': 'This will direct you to the ModiFace skin-scoring web '
-                       'app. This app allows you to upload a selfie photo, '
+        'description': 'This will direct you to the ModiFace skin-scoring web'
+                       ' app. This app allows you to upload a selfie photo, '
                        'which will be used to generate anonymized data about '
                        'your skin for researchers and provide you with what '
                        'the algorithm assesses to be your top two skin '
-                       'concerns. You will be provided a username and password'
-                       ' on the next screen to access the app, which will link'
-                       ' your ModiFace results to your skin sample. This app '
-                       'is hosted by a third-party provider; we are '
+                       'concerns. You will be provided a username and study'
+                       ' code on the next screen to access the app, which '
+                       'will link your ModiFace results to your skin sample. '
+                       'This app is hosted by a third-party provider; we are '
                        'unable to provide any assistance if you encounter '
                        'errors or issues while using the app.',
         'est_minutes': '5',
@@ -1581,7 +1581,7 @@ def post_ajax_skin_scoring_app_credentials(*, account_id, source_id):
         % (account_id, source_id)
     )
     if has_error == 404:
-        return flask.jsonify({"app_username": "", "app_password": ""})
+        return flask.jsonify({"app_username": "", "app_studycode": ""})
     else:
         return flask.jsonify(credentials)
 
diff --git a/microsetta_interface/templates/source.jinja2 b/microsetta_interface/templates/source.jinja2
index b5c0e4df..bd36cdf3 100644
--- a/microsetta_interface/templates/source.jinja2
+++ b/microsetta_interface/templates/source.jinja2
@@ -46,9 +46,9 @@
         {% endif %}
 
         let skin_app_username = '';
-        let skin_app_password = '';
+        let skin_app_studycode = '';
 
-        function handleSkinAppModal(survey_link, survey_title, survey_description, app_username, app_password) {
+        function handleSkinAppModal(survey_link, survey_title, survey_description, app_username, app_studycode) {
             $("#skin-app-modal-title").empty();
             $("#skin-app-modal-title").text(survey_title);
             $("#skin-app-survey-description").empty();
@@ -58,7 +58,7 @@
             // However, there's no situation where we'd retract the credentials, so we don't need to do anything with blank values.
             if(app_username != '' && app_username != 'None') {
                 skin_app_username = app_username
-                skin_app_password = app_password
+                skin_app_studycode = app_studycode
             }
 
             if(skin_app_username != '') {
@@ -66,14 +66,14 @@
 
                 document.getElementById("app-credentials-div").style.display = '';
                 document.getElementById("app-credentials-username").innerHTML = skin_app_username;
-                document.getElementById("app-credentials-password").innerHTML = skin_app_password;
+                document.getElementById("app-credentials-studycode").innerHTML = skin_app_studycode;
 
                 // Once we display the credentials, the button action is to open the actual survey
                 $("#skin-app-take-survey").click(function(e) {
                     window.open(survey_link, '_blank').focus();
                 });
             } else {
-                $("#skin-app-take-survey").html('{{ _('Get Username and Password') }}');
+                $("#skin-app-take-survey").html('{{ _('Get Username and Study Code') }}');
 
                 document.getElementById("app-credentials-div").style.display = 'none';
                 $("#skin-app-take-survey").click(async function(e) {
@@ -87,13 +87,13 @@
                                 document.getElementById("app-error").style.display = '';
                             } else {
                                 let s_user = data['app_username'];
-                                let s_pass = data['app_password'];
+                                let s_sc = data['app_studycode'];
                                 if (s_user.length < 1) {
                                     // We weren't able to allocate them credentials.
                                     document.getElementById("app-error").style.display = '';
                                 } else {
                                     // We got credentials, refresh this modal
-                                    handleSkinAppModal(survey_link, survey_title, survey_description, s_user, s_pass);
+                                    handleSkinAppModal(survey_link, survey_title, survey_description, s_user, s_sc);
                                 }
                             }
                         }
@@ -188,7 +188,7 @@
         {% for detail in remote_surveys %}
             <div class="col-12 col-sm-6 col-md-4 p-2">
             {% if detail.survey_template_id == SKIN_SCORING_APP_ID %}
-                <a style="text-decoration: none" onClick="return handleSkinAppModal('/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}', '{{ detail.survey_template_title }}', '{{ detail.description }}', '{{ detail.credentials['app_username'] }}', '{{ detail.credentials['app_password'] }}');" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
+                <a style="text-decoration: none" onClick="return handleSkinAppModal('/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}', '{{ detail.survey_template_title }}', '{{ detail.description }}', '{{ detail.credentials['app_username'] }}', '{{ detail.credentials['app_studycode'] }}');" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
             {% else %}
                 {% if not detail.answered %}
                     <a style="text-decoration: none" onClick="return takeExternalSurvey('/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}', '{{ detail.survey_template_title }}', '{{ detail.description }}');" href="/accounts/{{ account_id }}/sources/{{ source_id }}/take_survey?survey_template_id={{ detail.survey_template_id }}" target="_blank">
@@ -261,12 +261,12 @@
             <div class="modal-body" id="app-credentials-div">
                 <p class="survey-description">
                     <strong>Username: </strong><span id="app-credentials-username"></span><br />
-                    <strong>Password: </strong><span id="app-credentials-password"></span>
+                    <strong>Study Code: </strong><span id="app-credentials-studycode"></span>
                 </p>
             </div>
             <div class="modal-body" id="app-error" style="display: none">
                 <p class="survey-description">
-                    {{ _('Sorry, there was a problem generating a username and password. Please try again later.') }}
+                    {{ _('Sorry, there was a problem generating a username and study code. Please try again later.') }}
                 </p>
             </div>
             <div class="modal-footer">