Release/v3.32.0

CHANGELOG.md

@@ -1,5 +1,65 @@
 # What's new
 
+## v3.32.0
+
+Tangerine v3.32.0 contains a major update to the deployment and fuctionality of Online Surveys including the introduction of authentication and case association. 
+
+__Online Survey Authentication__
+
+Online Surveys can now be released for public access or require authentication. When authentication is required, data collectors will be required to provide a device user Access Code to access the survey. The survey will be associated with the device user who provided the short code. 
+
+To deploy an Online Survey and require authentication:
+1. Create the form
+2. Add the `"requireAccessCode": true` property to the `app-config.json` file
+3. Navigate to Deploy > Release Online Survey for the group
+4. In the Unpublished Surveys list, click the <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="rgb(255, 149, 34)"><path d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z"/></svg> icon to deploy a survey and require an access code.
+
+__Custom Markdown for Online Survey Login Page__
+
+Custom styling (text, logos, formatting etc.) can be added to the login page for Online Surveys. In the content set repository, create a file called `client/custom-login-markup.html`. The file can contain any valid html. Any images can be added to the `media` folder and used in the html. Example [Custom Login Markup](content-sets/case-module/client/custom-login-markup.html).
+
+__Online Survey Case Form Authentication__
+
+Online Surveys with authentication can also be configured when using the Case Module. This is useful for studies who want to deploy secure forms without needing to install a full PWA or APK for one form associated with the case. For example, a mother-child cohort study deploys Tangerine to track the health of the mother and child after birth. Labs are collected in the field and sent for analysis. Instead of requiring the lab to install a tablet or PWA with the Tangerine app, the lab forms can be deployed online to simplify the completion process.
+
+To configure forms for secure deployment online in Case, add the `"allowOnline": true` property to the `eventFormDefinitions` section in the case definition file. See the form definition for `form-allowed-online-survey` in [case-type-1](./content-sets/case-module/client/case-type-1.json).
+
+__Online Survey Help Link__
+
+A help link can be added to the web pages for Online Surveys and will appear with the <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368"><path d="M478-240q21 0 35.5-14.5T528-290q0-21-14.5-35.5T478-340q-21 0-35.5 14.5T428-290q0 21 14.5 35.5T478-240Zm-36-154h74q0-33 7.5-52t42.5-52q26-26 41-49.5t15-56.5q0-56-41-86t-97-30q-57 0-92.5 30T342-618l66 26q5-18 22.5-39t53.5-21q32 0 48 17.5t16 38.5q0 20-12 37.5T506-526q-44 39-54 59t-10 73Zm38 314q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg> icon in the header. Define the link url by adding the `"helpLink": "https://www.tangerinecentral.org"` property to the `app-config.json` file. When clicked, the link will open in a new browser window.
+
+__Tangerine Case APIs__
+
+- `/userProfile/createUserProfile/:groupId`
+    - Creates a user-profile document in the group
+    - Additional body data in json format will add properties to the user-profile: `{ "age": "7", "dob": "1/1/2018"}`
+- `/case/createCase/:groupId/:caseDefinitionId`
+    - Creates a case in the group with the case type defined by the case definition id
+    - Additional body data in json format will add properties to the case: `{ "age": "7", "dob": "1/1/2018"}`
+- `/case/readCase/:groupId/:caseId`
+    - Read a case from the group with the case id
+- `/case/createCaseEvent/:groupId/:caseId/:caseDefinitionId/:caseEventDefinitionId`
+    - Creates an event with the event type as defined in the case definition
+- `/case/createParticipant/:groupId/:caseId/:caseDefinitionId/:caseRoleId`
+    - Creates a participant with the case role as defined in the case definition
+- `/case/getCaseEventFormSurveyLinks/:groupId/:caseId/`
+    Returns a JSON document with the urls for all case forms with active online surveys in the format:
+    ```json
+    {
+      "eventDefinitionId": event.caseEventDefinitionId,
+      "eventFormDefinitionId": eventForm.eventFormDefinitionId,
+      "formId": formId,
+      "url": url
+    }
+    ```
+
+__Server upgrade instructions__
+
+See the [Server Upgrade Insturctions](https://docs.tangerinecentral.org/system-administrator/upgrade-instructions).
+
+*Special Instructions for this release:* N/A
+
+
 ## v3.31.2
 
 __General Updates__

client/src/app/core/sync-records/_services/syncing.service.ts

@@ -61,7 +61,7 @@ export class SyncingService {
           doc['items'][0]['inputs'].push({ name: 'tabletUserName', value: username });
           // Redact any fields marked as private.
           doc['items'].forEach(item => {
-            item['inputs'].forEach(input => {
+          item['inputs'].forEach(input => {
               if (input.private) {
                 input.value = '';
               }

content-sets/case-module/client/case-type-1.json

@@ -137,6 +137,18 @@
           "allowDeleteIfFormNotStarted": true,
           "required": false,
           "repeatable": true 
+        },
+        {
+          "id": "event-form-definition-h9d3hd9",
+          "formId": "form-allowed-online-survey",
+          "forCaseRole": "role-2",
+          "name": "A form allowed to be filled online",
+          "autoPopulate": true,
+          "allowDeleteIfFormNotCompleted": true,
+          "allowDeleteIfFormNotStarted": true,
+          "required": false,
+          "repeatable": true,
+          "allowOnline": true
         }
       ]
     },

content-sets/case-module/client/custom-login-markup.html

@@ -0,0 +1,10 @@
+<div>
+  <img id="logo" src="./assets/media/logo.png" width="100%">
+</div>
+<div>
+  <center><strong>Online Survey for Tangerine Study</strong></center>
+  <br>
+  <p>
+    <small>Enter the provided Access Code below.</small>
+  </p>
+</div>

develop.sh

@@ -75,13 +75,13 @@ fi
 
 if echo "$T_MODULES" | grep mysql; then
   ./mysql-create-dirs.sh
-fi
 
-if echo "$T_USE_MYSQL_CONTAINER" | grep "true"; then
+  if echo "$T_USE_MYSQL_CONTAINER" | grep "true"; then
     ./mysql-start-container.sh
     echo "Waiting 20 seconds for mysql container to start..."
-        sleep 20
-        ./mysql-setup.sh
+    sleep 20
+    ./mysql-setup.sh
+  fi
 fi
 
 if echo "$T_MYSQL_PHPMYADMIN" | grep "TRUE"; then
@@ -231,6 +231,7 @@ OPTIONS="--link $T_COUCHDB_CONTAINER_NAME:couchdb \
   --volume $(pwd)/editor/src:/tangerine/editor/src:delegated \
   --volume $(pwd)/translations:/tangerine/translations:delegated \
   --volume $(pwd)/online-survey-app/src:/tangerine/online-survey-app/src:delegated \
+  --volume $(pwd)/online-survey-app/dist:/tangerine/online-survey-app/dist:delegated \
   --volume $(pwd)/tangy-form-editor:/tangerine/tangy-form-editor:delegated \
   --volume $(pwd)/tangy-form:/tangerine/tangy-form:delegated \
   tangerine/tangerine:local

docs/editor/content-sets.md

@@ -28,7 +28,7 @@ Be sure to update any cron jobs to include the new build commands if they are us
 
 ``
 git pull
-npm rn install-server
+npm run install-server
 npm build
 ``
 

editor/src/app/app.component.ts

@@ -171,7 +171,10 @@ export class AppComponent implements OnInit, OnDestroy {
         this.isConfirmDialogActive = false;
       } else {
         await this.logout();
-      }
+      } 
+    } else if (Date.now() > expiryTimeInMs && this.isConfirmDialogActive) {
+      // the token expired, and we warned them. Time to log out.
+      await this.logout();
     }
   }
 

editor/src/app/case/classes/event-form-definition.class.ts

@@ -15,6 +15,7 @@ export class EventFormDefinition {
   allowDeleteIfFormNotStarted:string
   onEventFormOpen?:string
   onEventFormClose?:string
+  allowOnline?:boolean
 
   constructor() {
   }

editor/src/app/case/components/event-form-list-item/event-form-list-item.component.html

@@ -5,6 +5,22 @@
 		<div [innerHTML]="renderedTemplateListItemPrimary|unsanitizeHtml"></div>
 		<div [innerHTML]="renderedTemplateListItemSecondary|unsanitizeHtml" secondary></div>
 	</div>
+	<span *ngIf="!eventFormArchived && canLinkToOnlineSurvey">
+		<button class="tangy-small-list-icon" [matMenuTriggerFor]="linkMenu" (click)="showLinkMenu(); $event.stopPropagation()">
+			<mwc-icon>share</mwc-icon>
+		</button>
+		<mat-menu #linkMenu="matMenu">
+			<button mat-menu-item tangy-small-list-icon (click)="onCopyLinkClick()">
+				<mwc-icon>link</mwc-icon>
+			</button>
+			<button mat-menu-item tangy-small-list-icon (click)="onQRCodeLinkClick()">
+				<mwc-icon>qr_code</mwc-icon>
+			</button>
+			<button mat-menu-item tangy-small-list-icon (click)="$event.stopPropagation()">
+				<a href="{{surveyLinkUrl}}" target="_new"><mwc-icon>open_in_new</mwc-icon></a>
+			</button>
+		</mat-menu>
+	</span>
 	<span *ngIf="canUserDeleteForms">
 		<button (click)="onDeleteFormClick(); $event.stopPropagation()" class="tangy-small-list-icon">
 			<mwc-icon>delete</mwc-icon>

editor/src/app/case/components/event-form-list-item/event-form-list-item.component.ts

@@ -13,8 +13,9 @@ import { TangyFormService } from 'src/app/tangy-forms/tangy-form.service';
 import { CaseService } from '../../services/case.service';
 import { AppConfigService } from 'src/app/shared/_services/app-config.service';
 import { t } from 'tangy-form/util/t.js'
-
-
+import { GroupsService } from 'src/app/groups/services/groups.service';
+import { TangyErrorHandler } from 'src/app/shared/_services/tangy-error-handler.service';
+import * as qrcode from 'qrcode-generator-es6';
 
 @Component({
   selector: 'app-event-form-list-item',
@@ -47,20 +48,37 @@ export class EventFormListItemComponent implements OnInit {
   canUserDeleteForms: boolean;
   groupId:string;
   eventFormArchived: boolean = false;
+  canLinkToOnlineSurvey: boolean = false;
   response:any
+  surveyLinkUrl:string;
 
   constructor(
     private formService: TangyFormService,
     private ref: ChangeDetectorRef,
     private router:Router,
-    private caseService: CaseService
+    private caseService: CaseService,
+    private groupsService: GroupsService,
+    private tangyErrorHandler: TangyErrorHandler
   ) {
     ref.detach();
   }
 
   async ngOnInit() {
     this.groupId = window.location.pathname.split('/')[2]
 
+    const group = await this.groupsService.getGroupInfo(this.groupId);
+    const groupOnlineSurveys = group?.onlineSurveys ?? [];
+
+    this.canLinkToOnlineSurvey = groupOnlineSurveys.some(survey => 
+      survey.published && 
+      survey.formId === this.eventFormDefinition.formId && 
+      this.eventFormDefinition.allowOnline
+    );
+
+    if (this.canLinkToOnlineSurvey) {
+      this.surveyLinkUrl = `/releases/prod/online-survey-apps/${this.groupId}/${this.eventFormDefinition.formId}/#/case/event/form/${this.case._id}/${this.caseEvent.id}/${this.eventForm.id}`;
+    }
+
     this.canUserDeleteForms = ((this.eventFormDefinition.allowDeleteIfFormNotCompleted && !this.eventForm.complete)
     || (this.eventFormDefinition.allowDeleteIfFormNotStarted && !this.eventForm.formResponseId));
     const response = await this.formService.getResponse(this.eventForm.formResponseId);
@@ -131,4 +149,35 @@ export class EventFormListItemComponent implements OnInit {
   onUnarchiveFormClick() {
     this.formUnarchivedEvent.emit(this.eventForm.id);
   }
+
+  showLinkMenu() {
+    this.ref.detectChanges()
+  }
+
+  onCopyLinkClick() {
+    const url = `${window.location.origin}${this.surveyLinkUrl}`;
+    try {
+      navigator.clipboard.writeText(url);
+
+      this.tangyErrorHandler.handleError('Online Survey link copied to clipboard');
+    } catch (err) {
+      let errMsg = 'Failed to copy link to clipboard';
+      if (window.location.origin.startsWith('http://')) {
+        errMsg = 'Copy to clipboard is not supported with http://.';
+      }
+      this.tangyErrorHandler.handleError(errMsg);
+    }
+  }
+
+  onQRCodeLinkClick() {
+    const url = `${window.location.origin}${this.surveyLinkUrl}`;
+
+    const qr = new qrcode.default(0, 'H')
+    qr.addData(`${url}`)
+    qr.make()
+    window['dialog'].innerHTML = `<div style="width:${Math.round((window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth) *.6)}px" id="qr"></div>`
+    window['dialog'].open()
+    window['dialog'].querySelector('#qr').innerHTML = qr.createSvgTag({cellSize:500, margin:0,cellColor:(c, r) =>''})
+  }
+
 }

editor/src/app/core/auth/_components/login/login.component.ts

@@ -41,10 +41,10 @@ export class LoginComponent implements OnInit {
       if (await this.authenticationService.login(this.user.username, this.user.password)) {
         this.router.navigate(['/projects']);
       } else {
-        this.errorMessage = _TRANSLATE('Login Unsuccesful');
+        this.errorMessage = _TRANSLATE('Login Unsuccessful');
       }
     } catch (error) {
-      this.errorMessage = _TRANSLATE('Login Unsuccesful');
+      this.errorMessage = _TRANSLATE('Login Unsuccessful');
       console.error(error);
     }
   }

editor/src/app/groups/release-online-survey/release-online-survey.component.html

@@ -3,15 +3,7 @@
   <h2>Instructions: </h2>
 
   <div>
-    In the Unpublished Surveys section, click the
-    <button class="info-button">
-      <i class="material-icons tangy-location-list-icon">published_with_changes</i>
-    </button>
-    button to "Publish" an online survey. It will then be listed in the Published Surveys section.
-  </div>
-
-  <div>
-    In the Published Surveys section, use the link
+    In the <strong>Published Surveys</strong> section, use the link
     <button class="info-button">
       <i class="material-icons tangy-location-list-icon">link</i>
     </button> 
@@ -21,14 +13,40 @@ <h2>Instructions: </h2>
         <i class="material-icons tangy-location-list-icon">unpublished</i>
       </button>
       button to "Un-publish" an online survey.
+      The 
+      <button class="info-button">
+        <i class="material-icons tangy-location-list-icon">lock</i>
+      </button> button appears for surveys that require a Device User and Access Code.
   </div>
+
+  <div>
+    In the <strong>Unpublish Surveys</strong> section, click the
+    <button class="info-button">
+      <i class="material-icons tangy-location-list-icon">published_with_changes</i>
+    </button>
+    button to "Publish" an online survey. It will then be listed in the Published Surveys section.
+    To 'Publish' a survey and require a Device User to provide an Access Code, click the 
+    <button class="info-button">
+      <i class="material-icons tangy-location-list-icon">lock</i>
+    </button> button.
+  </div>
+
+  <div>
+
+  </div>
+
 </div>
 <h2 class="tangy-foreground-secondary">{{'Published Surveys'|translate}}</h2>
 <mat-list class="drag-list">
   <mat-list-item class="drag-item" *ngFor="let form of publishedSurveys; let index=index">
     <span>{{index+1}}</span>
-    <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+    <span>&nbsp;&nbsp;</span>
     <span class="tangy-spacer" [innerHTML]="form.title|unsanitizeHtml"></span>
+    <span *ngIf="form.locked">
+      <button mat-icon-button class="lock-button">
+        <i class="material-icons mat-32 tangy-location-list-icon">lock</i>
+      </button>
+    </span>
     <span>{{form.updatedOn|date :'medium'}}
     </span>
 
@@ -47,14 +65,15 @@ <h2 class="tangy-foreground-secondary">{{'Unpublished Surveys'|translate}}</h2>
     <span>{{index+1}}</span>
     <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
     <span class="tangy-spacer" [innerHTML]="form.title|unsanitizeHtml"></span>
-
+    <span >{{form.updatedOn|date :'medium'}}
     <span *appHasAPermission="let i;group:group._id; permission:'can_manage_forms'">
-      <button mat-icon-button (click)="publishSurvey(form.id, form.title)">
+      <button mat-icon-button (click)="publishSurvey(form.id, form.title, false)">
         <i class="material-icons mat-32 tangy-location-list-icon">published_with_changes</i>
       </button>
+      <button mat-icon-button (click)="publishSurvey(form.id, form.title, true)">
+        <i class="material-icons mat-32 tangy-location-list-icon">lock</i>
+      </button>
     </span>
-
-    <span >{{form.updatedOn|date :'medium'}}
     </span>
   </mat-list-item>
 </mat-list>