feat: Azure flow

.vscode/launch.json

@@ -0,0 +1,29 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "msedge",
+      "request": "launch",
+      "name": "client: msedge",
+      "url": "http://localhost:3000",
+      "webRoot": "${workspaceFolder}"
+    },
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "server: nuxt",
+      "outputCapture": "std",
+      "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs",
+      "args": ["dev"]
+    }
+  ],
+  "compounds": [
+    {
+      "name": "fullstack: nuxt",
+      "configurations": ["server: nuxt", "client: msedge"]
+    }
+  ]
+}

components/download/AttestationForm.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { Attestation } from "~/types/download";
+
 const props = defineProps<{
   attestations: string[];
 }>();

components/download/StepNav.vue

@@ -9,14 +9,15 @@ const steps = [
   "Research Purpose",
   "License",
   "Select Data",
+  "Storage",
   "Submitted",
 ];
 
 const props = defineProps({
   currentStep: {
     default: 1,
     type: Number as PropType<number>,
-    validator: (step: number) => step >= 1 && step <= 7,
+    validator: (step: number) => step >= 1 && step <= 8,
   },
 });
 

package.json

@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "@azure/msal-node": "^2.6.6",
+    "@azure/storage-blob": "^12.27.0",
     "@citation-js/core": "^0.7.6",
     "@citation-js/plugin-csl": "^0.7.6",
     "@css-render/vue3-ssr": "^0.15.12",

pages/datasets/[datasetid]/access/index.vue

@@ -27,6 +27,56 @@ const generateCombinedFullName = (name: string) => {
 };
 
 const currentStep = ref<number>(1);
+const checklist = ref<string[]>([]);
+
+// ordered checklist keys to enforce sequential enabling
+const steps = [
+  "azure_container",
+  "cilogon",
+  "diabetes_research",
+  "training",
+  "describe_purpose",
+  "agree_license",
+  "select_data",
+  "storage_details",
+  "access_data",
+];
+
+// return true when a checkbox for `value` should be disabled
+const isDisabledByValue = (value: string) => {
+  const idx = steps.indexOf(value);
+  if (idx <= 0) return false;
+  return !checklist.value.includes(steps[idx - 1]);
+};
+
+// ensure that if a prior checkbox is unchecked we remove any subsequent
+// checked items (keeps checklist contiguous and ordered)
+watch(
+  checklist,
+  (newVal) => {
+    const set = new Set(newVal);
+    // remove any step that is set but previous is not set
+    for (let i = 1; i < steps.length; i++) {
+      if (set.has(steps[i]) && !set.has(steps[i - 1])) {
+        set.delete(steps[i]);
+      }
+    }
+    const ordered = steps.filter((s) => set.has(s));
+    // update only if different to avoid infinite loops
+    if (
+      ordered.length !== newVal.length ||
+      ordered.some((v, i) => v !== newVal[i])
+    ) {
+      checklist.value = ordered;
+    }
+  },
+  { deep: true },
+);
+
+// allChecked: true when every step is present in the checklist
+const allChecked = computed(() =>
+  steps.every((s) => checklist.value.includes(s)),
+);
 </script>
 
 <template>
@@ -88,54 +138,136 @@ const currentStep = ref<number>(1);
           <div>
             <p>To obtain access to this dataset, you must:</p>
 
-            <ol>
-              <li>
-                Authenticate using CILogon. If you are at an academic
-                institution or research organization, you can log on using your
-                institutional credentials. If you are unsure, please search for
-                the name of your institution in the CILogon dropdown menu.
-                <ul>
-                  <li>
-                    If you not able to access the data through CILogon (e.g. you
-                    do not see your organization or institution) then please
-                    contact the
-                    <a href="mailto:[email protected]"
-                      >AI-READI Data Access Committee</a
-                    >.
-                  </li>
-                </ul>
-              </li>
-
-              <li>
-                Indicate whether your research is related to Type 2 Diabetes
-              </li>
-
-              <li>
-                Answer some questions about your training in research methods
-                and ethics
-              </li>
-
-              <li>
-                Describe the purpose of your research <br />
-                This information, along with your name, will be publicly shared
-                on the AI-READI website
-              </li>
-
-              <li>Agree to the terms of the dataset license</li>
-
-              <li>Select data types to download</li>
-
-              <li>
-                Return to download your data after your request has been
-                processed
-              </li>
-            </ol>
-
-            <NuxtLink :to="`/datasets/${dataset?.id}/access/login`">
-              <n-button size="large" type="info" secondary class="my-3">
+            <n-checkbox-group v-model:value="checklist">
+              <n-space vertical>
+                <n-checkbox
+                  value="azure_container"
+                  class="text-sm"
+                  :disabled="isDisabledByValue('azure_container')"
+                >
+                  <span>
+                    Provide an
+                    <NuxtLink
+                      to="https://learn.microsoft.com/en-us/azure/storage/container-storage/container-storage-introduction"
+                      target="_blank"
+                    >
+                      Azure Storage Container
+                    </NuxtLink>
+                    in order to receive the dataset due to the size of the
+                    AI-READI dataset. Please
+                    <NuxtLink
+                      to="https://docs.aireadi.org/docs/2/preliminary/azure_storage/azure"
+                      >review our documentation</NuxtLink
+                    >
+                    to set this up.
+                  </span>
+                </n-checkbox>
+
+                <n-checkbox
+                  value="cilogon"
+                  class="text-sm"
+                  :disabled="isDisabledByValue('cilogon')"
+                >
+                  <span>
+                    Authenticate using CILogon. If you are at an academic
+                    institution or research organization, you can log on using
+                    your institutional credentials. If you are unsure, please
+                    search for the name of your institution in the CILogon
+                    dropdown menu.
+                    <ul class="ml-4 list-disc">
+                      <li>
+                        If you are not able to access the data through CILogon
+                        (e.g. you do not see your organization or institution)
+                        then please contact the
+                        <a href="mailto:[email protected]"
+                          >AI-READI Data Access Committee</a
+                        >.
+                      </li>
+                    </ul>
+                  </span>
+                </n-checkbox>
+
+                <n-checkbox
+                  value="diabetes_research"
+                  class="text-sm"
+                  :disabled="isDisabledByValue('diabetes_research')"
+                >
+                  Indicate whether your research is related to Type 2 Diabetes
+                </n-checkbox>
+
+                <n-checkbox
+                  value="training"
+                  class="text-sm"
+                  :disabled="isDisabledByValue('training')"
+                >
+                  Answer questions about your training in research methods and
+                  ethics
+                </n-checkbox>
+
+                <n-checkbox
+                  value="describe_purpose"
+                  class="text-sm"
+                  :disabled="isDisabledByValue('describe_purpose')"
+                >
+                  Describe the purpose of your research. This information, along
+                  with your name, will be publicly shared on the AI-READI
+                  website
+                </n-checkbox>
+
+                <n-checkbox
+                  value="agree_license"
+                  class="text-sm"
+                  :disabled="isDisabledByValue('agree_license')"
+                >
+                  Agree to the terms of the dataset license
+                </n-checkbox>
+
+                <n-checkbox
+                  value="select_data"
+                  class="text-sm"
+                  :disabled="isDisabledByValue('select_data')"
+                >
+                  Select data types to download
+                </n-checkbox>
+
+                <n-checkbox
+                  value="storage_details"
+                  class="text-sm"
+                  :disabled="isDisabledByValue('storage_details')"
+                >
+                  Provide details about your storage container
+                </n-checkbox>
+
+                <n-checkbox
+                  value="access_data"
+                  class="text-sm"
+                  :disabled="isDisabledByValue('access_data')"
+                >
+                  Return to download your data after your request has been
+                  processed
+                </n-checkbox>
+              </n-space>
+            </n-checkbox-group>
+
+            <div class="my-3">
+              <NuxtLink
+                v-if="allChecked"
+                :to="`/datasets/${dataset?.id}/access/login`"
+              >
+                <n-button size="large" type="info" secondary> Begin </n-button>
+              </NuxtLink>
+
+              <n-button
+                v-else
+                size="large"
+                type="info"
+                secondary
+                disabled
+                class="cursor-not-allowed opacity-60"
+              >
                 Begin
               </n-button>
-            </NuxtLink>
+            </div>
           </div>
         </TransitionFade>
       </div>

pages/datasets/[datasetid]/access/request/[requestid].vue

@@ -94,19 +94,9 @@ if (error.value) {
 
           <div v-else-if="dataReady">
             <p>
-              Access to your dataset will expire on:
-              <strong class="text-lg font-black">{{ expiresAt }} UTC</strong>.
-            </p>
-
-            <p>
-              Please make sure to complete downloading your dataset before this
-              time. You will need to request a new dataset if you do not
-              complete the download before then.
-            </p>
-
-            <p>
-              Due to the number and size of of the files included in typical
-              datasets, we recommend using one of the following clients:
+              Your dataset has been copied to your Azure Blob Storage container.
+              Due to the number and size of of the files included, we recommend
+              using one of the following clients:
             </p>
 
             <n-tabs type="line" animated>
@@ -128,6 +118,7 @@ if (error.value) {
                 <p>
                   This is your SAS URI; please record this for download, click
                   to copy to your clipboard
+                  <!-- TODO: santize URL for new structure -->
                   <n-code
                     :code="requestSasUri"
                     @click="copyToClipboard(requestSasUri)"
@@ -170,7 +161,7 @@ if (error.value) {
                     please see documentation for your specific distro for
                     instructions on decompressing the provided tarball -
                     Possible locations for this are: in your home directory; in
-                    your machine's C:/ or Root directory - For ease of use,
+                    your machine's C:/ or binary directory - For ease of use,
                     consider adding the fully-qualified path to the AzCopy
                     directory to your system PATH. If you choose not to do this
                     you will need to execute any AzCopy commands from the