Add mail generation form for non aaf members apply for vho account

Author: aswinnarayanan

content/en/docs/user-guides/getting-started/non-aaf-members.md

@@ -23,17 +23,9 @@ XNAT uses AAF for login. QCIF/QRIScloud can provide AAF Virtual Home (VHO) accou
 #### Step 1
 Open a ticket with RCC support to request an AAF account
 
-_Example below (replace __________ with your details)_
+Fill in your details below and click to send a pre-filled email to RCC support
 
-{{< card header="**To:** rcc-support@uq.edu.au" subtitle="**Subject:** XNAT AAF account for project __________" >}}
-Hello RCC support
-
-I require an AAF account to access the UQ AIS XNAT service<br>
-
-My details are below<br>
-Organisation: __________<br>
-Data Acquisition Site: __________<br>
-{{< /card >}}
+{{< email-aaf-request-form >}}
 
 #### Step 2
 AAF's VHO account will return an email regarding the VHO account registration process
@@ -52,7 +44,7 @@ This is the link to the UQ AIS XNAT. If you have been provided with a project sp
 
 
 #### Step 2
-Login in with the AAF Single sign-on button (_See below_).
+Log in with the AAF Single sign-on button (_See below_).
 
 <img src="/docs/user-guides/logging-into-xnat/xnat-aaf-login-page.png" width="100%" style="border: 1px solid #ddd"></img>
 

content/en/docs/user-guides/getting-started/other-aaf-members.md

@@ -29,7 +29,7 @@ This is the link to the UQ AIS XNAT. If you have been provided with a project sp
 {{% /alert %}}
 
 #### Step 2
-Login in with the AAF Single sign-on button (_See below_).
+Log in with the AAF Single sign-on button (_See below_).
 
 Follow the AAF login process for your organisation
 

layouts/shortcodes/email-aaf-request-form.html

@@ -0,0 +1,93 @@
+<div class="card mb-4">
+  <div class="card-body">
+    <div class="form-group mb-3">
+      <label for="aaf-project-{{ .Ordinal }}"><strong>XNAT Project Name</strong></label>
+      <input type="text" class="form-control mt-1" id="aaf-project-{{ .Ordinal }}" placeholder="e.g. MyProject">
+    </div>
+    <div class="form-group mb-3">
+      <label for="aaf-org-{{ .Ordinal }}"><strong>Organisation</strong></label>
+      <input type="text" class="form-control mt-1" id="aaf-org-{{ .Ordinal }}" placeholder="e.g. QLD Health">
+    </div>
+    <div class="form-group mb-3">
+      <label for="aaf-site-{{ .Ordinal }}"><strong>Data Acquisition Site</strong></label>
+      <input type="text" class="form-control mt-1" id="aaf-site-{{ .Ordinal }}" placeholder="e.g. HIRF, CAI, TRI">
+    </div>
+
+    <div id="aaf-output-{{ .Ordinal }}" style="display:none;">
+      <table class="table table-bordered mb-3">
+        <tr>
+          <th style="width:80px;">To</th>
+          <td>rcc-support@uq.edu.au</td>
+          <td style="width:70px; text-align:center; vertical-align:middle;">
+            <button class="btn btn-sm btn-outline-secondary" id="aaf-copy-to-{{ .Ordinal }}">Copy</button>
+          </td>
+        </tr>
+        <tr>
+          <th>Subject</th>
+          <td><span id="aaf-subject-{{ .Ordinal }}"></span></td>
+          <td style="width:70px; text-align:center; vertical-align:middle;">
+            <button class="btn btn-sm btn-outline-secondary" id="aaf-copy-subject-{{ .Ordinal }}">Copy</button>
+          </td>
+        </tr>
+        <tr>
+          <th>Body</th>
+          <td><span id="aaf-body-{{ .Ordinal }}" style="white-space:pre-line;"></span></td>
+          <td style="width:70px; text-align:center; vertical-align:middle;">
+            <button class="btn btn-sm btn-outline-secondary" id="aaf-copy-body-{{ .Ordinal }}">Copy</button>
+          </td>
+        </tr>
+      </table>
+      <a id="aaf-mailto-{{ .Ordinal }}" class="btn btn-primary" href="#" role="button">
+        Open in Email Client
+      </a>
+    </div>
+  </div>
+</div>
+
+<script>
+(function() {
+  var ord = '{{ .Ordinal }}';
+  var projectInput = document.getElementById('aaf-project-' + ord);
+  var orgInput = document.getElementById('aaf-org-' + ord);
+  var siteInput = document.getElementById('aaf-site-' + ord);
+  var output = document.getElementById('aaf-output-' + ord);
+  var subjectEl = document.getElementById('aaf-subject-' + ord);
+  var bodyEl = document.getElementById('aaf-body-' + ord);
+  var mailto = document.getElementById('aaf-mailto-' + ord);
+
+  function getSubject() {
+    return 'XNAT AAF account for project ' + projectInput.value.trim();
+  }
+  function getBody() {
+    return 'Hello RCC support,\n\nI require an AAF account to access the UQ AIS XNAT service.\n\nMy details are below:\nOrganisation: ' + orgInput.value.trim() + '\nData Acquisition Site: ' + siteInput.value.trim() + '\n\nThank you';
+  }
+
+  function update() {
+    var project = projectInput.value.trim();
+    var org = orgInput.value.trim();
+    var site = siteInput.value.trim();
+    if (project && org && site) {
+      subjectEl.textContent = getSubject();
+      bodyEl.textContent = getBody();
+      mailto.href = 'mailto:rcc-support@uq.edu.au?subject=' + encodeURIComponent(getSubject()) + '&body=' + encodeURIComponent(getBody() + '\n');
+      output.style.display = 'block';
+    } else {
+      output.style.display = 'none';
+    }
+  }
+
+  projectInput.addEventListener('input', update);
+  orgInput.addEventListener('input', update);
+  siteInput.addEventListener('input', update);
+
+  document.getElementById('aaf-copy-to-' + ord).addEventListener('click', function() {
+    navigator.clipboard.writeText('rcc-support@uq.edu.au');
+  });
+  document.getElementById('aaf-copy-subject-' + ord).addEventListener('click', function() {
+    navigator.clipboard.writeText(getSubject());
+  });
+  document.getElementById('aaf-copy-body-' + ord).addEventListener('click', function() {
+    navigator.clipboard.writeText(getBody());
+  });
+})();
+</script>