[ALS-5540] Add copy changes and parameter for registration page (#162)

- Add a parameter to add pic-sure specific links and wording to registration page. - Fix bug where html import removes target _blank attributes on terms and register pages.
hms-dbmi · Mar 21, 2024 · 67f3153 · 67f3153
1 parent aff13f6
commit 67f3153
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 28 deletions.
diff --git a/addons/addon-base-ui/packages/base-ui/src/helpers/settings.js b/addons/addon-base-ui/packages/base-ui/src/helpers/settings.js
@@ -31,6 +31,7 @@ const branding = {
     summary: process.env.REACT_APP_USER_REGISTRATION_SUMMARY,
     success: process.env.REACT_APP_USER_REGISTRATION_SUCCESS,
     tosRequired: process.env.REACT_APP_USER_REGISTRATION_TOS_REQUIRED === 'true',
+    picsure: process.env.REACT_APP_USER_REGISTRATION_PICSURE === 'true',
   },
   tos: {
     onLanding: process.env.REACT_APP_TOS_LINK_ON_LANDING === 'true',

diff --git a/addons/addon-custom/packages/main/src/parts/Register.js b/addons/addon-custom/packages/main/src/parts/Register.js
@@ -65,7 +65,7 @@ class Register extends React.Component {
   }
 
   renderHTML(content) {
-    const cleanContent = DOMPurify.sanitize(content, { USE_PROFILES: { html: true } });
+    const cleanContent = DOMPurify.sanitize(content, { USE_PROFILES: { html: true }, ADD_ATTR: ['target'] });
 
     // This method sets html from a string. We're pulling this from the config file made by
     // an approved admin, and we're sanitizing using dompurify package.
@@ -112,10 +112,6 @@ class Register extends React.Component {
   renderRegisterationForm() {
     return (
       <Form size="large" loading={this.loading} onSubmit={this.handleSubmit}>
-        <Header as="h2" textAlign="center" className="header">
-          {branding.register.title}
-        </Header>
-        {this.renderHTML(branding.register.summary)}
         <Segment basic className="ui fluid form">
           <Dimmer active={this.formProcessing} inverted>
             <Loader inverted>Submitting registration</Loader>
@@ -153,39 +149,89 @@ class Register extends React.Component {
 
   renderConfirmation() {
     return (
-      <div>
-        <Header as="h2" textAlign="center" style={styles.header}>
-          SUCCESS!
-        </Header>
-        {this.renderHTML(branding.register.success)}
-      </div>
+      <Grid.Row columns={1}>
+        <Grid.Column className="bodyText">
+          <div>
+            <Header as="h2" textAlign="center" style={styles.header}>
+              SUCCESS!
+            </Header>
+            {this.renderHTML(branding.register.success)}
+          </div>
+        </Grid.Column>
+      </Grid.Row>
+    );
+  }
+
+  renderRegister() {
+    const borders = { margin: '0px 10px', border: 'solid #2A5FA3 2px', borderRadius: '4px', padding: '10px' };
+    return (
+      <>
+        <Grid.Row columns={1}>
+          <Grid.Column className="bodyText">
+            <div className="center">
+              <Header as="h2" textAlign="center" className="header">
+                {branding.register.title}
+              </Header>
+              {this.renderHTML(branding.register.summary)}
+            </div>
+          </Grid.Column>
+        </Grid.Row>
+        {branding.register.picsure && (
+          <Grid.Row columns={2}>
+            <Grid.Column>
+              <div className="bordered center" style={borders}>
+                <h3 className="header" style={{ textTransform: 'uppercase' }}>
+                  Service Workbench
+                </h3>
+                <p>Simple, accessible cloud computing & secure data storage.</p>
+                <a href="https://pic-sure.gitbook.io/service-workbench/" target="_blank" rel="noreferrer">
+                  Learn More
+                </a>
+              </div>
+            </Grid.Column>
+            <Grid.Column>
+              <div className="bordered center" style={borders}>
+                <h3 className="header" style={{ textTransform: 'uppercase' }}>
+                  PIC-Sure
+                </h3>
+                <p>A self-service, easily navigable patient-level clinical data search and cohort tool.</p>
+                <a href="https://pic-sure.gitbook.io/aim-ahead-pic-sure/" target="_blank" rel="noreferrer">
+                  Learn More
+                </a>
+              </div>
+            </Grid.Column>
+          </Grid.Row>
+        )}
+        <Grid.Row columns={1}>
+          <Grid.Column className="bodyText">{this.renderRegisterationForm()}</Grid.Column>
+        </Grid.Row>
+      </>
     );
   }
 
   renderContent() {
     const { location } = this.props;
+    const maxImageWidth = { height: 'auto', maxWidth: '600px', margin: 'auto' };
 
     return (
       <Grid
         id="register-user"
         verticalAlign="middle"
         className="animated fadeIn"
-        style={{ height: '100%', maxWidth: '800px', margin: '0 auto' }}
+        style={{ height: '100%', maxWidth: '800px', margin: '0 auto', fontSize: '1.2em' }}
       >
-        <Grid.Row columns={2}>
-          <Grid.Column>
-            <Image fluid src={this.props.assets.images.registerLogo} />
-          </Grid.Column>
+        <Grid.Row columns={branding.register.picsure ? 1 : 2}>
           <Grid.Column>
-            <Image fluid src={this.props.assets.images.registerAws} />
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.Row columns={1}>
-          <Grid.Column className="bodyText">
-            {location.pathname === '/register' && this.renderRegisterationForm()}
-            {location.pathname === '/register-confirmation' && this.renderConfirmation()}
+            <Image fluid src={this.props.assets.images.registerLogo} style={maxImageWidth} />
           </Grid.Column>
+          {!branding.register.picsure && (
+            <Grid.Column>
+              <Image fluid src={this.props.assets.images.registerAws} style={maxImageWidth} />
+            </Grid.Column>
+          )}
         </Grid.Row>
+        {location.pathname === '/register' && this.renderRegister()}
+        {location.pathname === '/register-confirmation' && this.renderConfirmation()}
       </Grid>
     );
   }

diff --git a/addons/addon-custom/packages/main/src/parts/Terms.js b/addons/addon-custom/packages/main/src/parts/Terms.js
@@ -8,7 +8,7 @@ const readableStyle = { fontSize: 'max(12pt, 1.2rem)', fontFamily: 'Calibri' };
 
 class Terms extends React.PureComponent {
   renderHTML(content) {
-    const cleanContent = DOMPurify.sanitize(content, { USE_PROFILES: { html: true } });
+    const cleanContent = DOMPurify.sanitize(content, { USE_PROFILES: { html: true }, ADD_ATTR: ['target'] });
 
     // This method sets html from a string. We're pulling this from the config file made by
     // an approved admin, and we're sanitizing using dompurify package.

diff --git a/main/config/settings/example.yml b/main/config/settings/example.yml
@@ -155,6 +155,7 @@ HostedZoneId: 'Z02455261RJ9QQPVHFZGA'
 #userRegistrationTitle: "WELCOME TO SERVICE WORKBENCH"
 #userRegistrationSummary: "<p>Service Workbench provides a self-service, three-click, on-demand service for researchers to build research environments in minutes without needing cloud infrastructure knowledge. Fill out the form below to create your account on Service Workbench hosted on AWS.</p>"
 #userRegistrationSuccess: "<p>Your Service Workbench account has been successfully created. What you should expect next:</p><ol><li>The Service Workbench administrator will review your account.</li><li>Once your account is activated, you can login to Service Workbench and start your research.</li></ol>"
+#userRegistrationPicsure: true # Should the register page also include a link to PIC-Sure
 #loginWarning: "WARNING: You are entering a secure environment."
 
 # Require the TOS to be accepted before registration can occur.

diff --git a/main/solution/ui/config/environment/env-template.yml b/main/solution/ui/config/environment/env-template.yml
@@ -24,6 +24,7 @@ REACT_APP_ENABLE_FLOW_LOGS: ${self:custom.settings.enableFlowLogs}
 REACT_APP_USER_REGISTRATION_TITLE: ${self:custom.settings.userRegistrationTitle}
 REACT_APP_USER_REGISTRATION_SUMMARY: ${self:custom.settings.userRegistrationSummary}
 REACT_APP_USER_REGISTRATION_SUCCESS: ${self:custom.settings.userRegistrationSuccess}
+REACT_APP_USER_REGISTRATION_PICSURE: ${self:custom.settings.userRegistrationPicsure}
 REACT_APP_LOGIN_WARNING: ${self:custom.settings.loginWarning}
 REACT_APP_HELP_URL: ${self:custom.settings.helpUrl}
 REACT_APP_USER_REGISTRATION_TOS_REQUIRED: ${self:custom.settings.tosRequired}

diff --git a/main/solution/ui/config/settings/.defaults.yml b/main/solution/ui/config/settings/.defaults.yml
@@ -29,10 +29,11 @@ versionAndDate: 'Version ${self:custom.settings.versionNumber} (${self:custom.se
 autoLogoutTimeoutInMinutes: 30
 
 # Registration page
-enableCustomRegistration: false
-userRegistrationTitle: "WELCOME TO SERVICE WORKBENCH"
-userRegistrationSummary: "<p>Service Workbench provides a self-service, three-click, on-demand service for researchers to build research environments in minutes without needing cloud infrastructure knowledge. Fill out the form below to create your account on Service Workbench hosted on AWS.</p>"
-userRegistrationSuccess: "<p>Your Service Workbench account has been successfully created. What you should expect next:</p><ol><li>The Service Workbench administrator will review your account.</li><li>Once your account is activated, you can login to Service Workbench and start your research.</li></ol>"
+enableCustomRegistration: true
+userRegistrationTitle: "WELCOME TO AIM-AHEAD!"
+userRegistrationSummary: "<p>Create a Data Exploration + Analysis Login to access available tools:</p>"
+userRegistrationSuccess: "<p>Your AIM-AHEAD account has been successfully created. What you should expect next:</p><ol><li>The AIM-AHEAD administrator will review your account.</li><li>You will receive an email sent from Okta to create a password.</li><li>Login to AIM-AHEAD and start your research.</li></ol><p><a href=\"https://pic-sure.gitbook.io/service-workbench/general-user-guide/introduction\" target=\"_blank\">AIM-AHEAD Service Workbench User Guide</a></p><p><a href=\"https://pic-sure.gitbook.io/aim-ahead-pic-sure/\" target=\"_blank\">AIM-AHEAD PIC-SURE User Guide</a></p>"
+userRegistrationPicsure: true # Should the register page also include a link to PIC-Sure
 loginWarning: ""
 
 # Require the TOS to be accepted before registration can occur.