NIHVIVO-2829: chages template, css and minor js addition for account profile association

webapp/web/css/account/account.css

@@ -27,31 +27,22 @@ table#account th {
     background-color: #F7F9F9;
     height: 40px;
     color: #064D68;
-    padding-top: 5px;
+    padding-top: 7px;
     border: 1px solid #d9e4ea;
     border-bottom: none;
     padding-left: 6px;
-    font-size: .9em;
-}
-table#account th {
-    text-align: left;
-} /*Fix for IE8 and 9, force text in a cell to be aligned to the left*/
-table#account tr {
-    background-color: #fff;
-}
-table#account tr:nth-child(2n) {
-    background-color: rgba(200, 200, 180,.25);
 }
 table#account td {
     vertical-align: top;
     padding: .5em;
     border: 1px solid #d9e4ea; 
-    font-size: .825em;
+    font-size: .9em;
-    padding-top: .5em;
-    padding-bottom: .5em;
 }  
-table#account td  a{
+table#account tr {
-    word-wrap: break-word;
+    background-color: #fff;
+}
+table#account tr:nth-child(2n+1) {
+    background-color: rgba(200, 200, 180,.25);
 }
 #filter-roles {
     float: left;
@@ -170,8 +161,6 @@ padding-right: 5px;
 }
 #associated {
     float:right;
-    margin-top:-98px;
-    margin-right:80px;
     display:none;
 }
 #associated label {
@@ -179,8 +168,6 @@ padding-right: 5px;
 }
 #associationOptions {
     float:right;
-    margin-top:-98px;
-    margin-right:80px;
     display:none;
 }
 #verifyProfileLink {
@@ -189,3 +176,68 @@ padding-right: 5px;
 #externalAuthIdInUse {
     color: #f70;
 }
+#associateProfileBackgroundOne {
+    background-color:#fff;
+    padding:5px 0 5px 0;
+    margin-left:-8px;
+    margin-right:-8px;
+    padding-top:7px;
+    width:100%;
+    border:none;
+    border-right:none;
+	border-bottom-left-radius: 5px;
+	border-top-left-radius: 5px;
+	-moz-border-radius-bottomleft: 5px;
+	-moz-border-radius-topleft: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+	-webkit-border-top-left-radius: 5px;
+}
+#associateProfileBackgroundTwo {
+    background-color:#f1f2ee;
+    padding-top:7px;
+    padding-bottom:42px;
+    padding-right:94px;
+    margin-top:-112px;
+    margin-right:-8px;
+    border:1px solid #ccc;
+    border-left:none;
+	border-top-right-radius: 5px;
+	-moz-border-radius-topright: 5px;
+	-webkit-border-top-right-radius: 5px;
+	border-bottom-right-radius: 5px;
+	-moz-border-radius-bottomright: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+}
+#associateProfileBackgroundThree {
+    background-color:#f1f2ee;
+    padding-left:12px;
+    padding-top:7px;
+    padding-bottom:26px;
+    padding-right:94px;
+    margin-top:-112px;
+    margin-left:-12px;
+    margin-right:-8px;
+    border:1px solid #ccc;
+    border-left:none;
+    border-bottom:none;
+	border-top-right-radius: 5px;
+	-moz-border-radius-topright: 5px;
+	-webkit-border-top-right-radius: 5px;
+}
+#associateProfileBackgroundFour {
+    background-color:#f1f2ee;
+    padding-left:12px;
+    padding-bottom:26px;
+    padding-right:94px;
+    margin-top:-8px;
+    margin-left:-12px;
+    margin-right:-8px;
+    border:1px solid #ccc;
+    border-top:none;
+    border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+	-moz-border-radius-bottomleft: 5px;
+	-moz-border-radius-bottomright: 5px;
+	-webkit-border-bottom-left-radius: 5px;
+	-webkit-border-bottom-right-radius: 5px;
+}

webapp/web/js/account/accountAssociateProfile.js

@@ -51,6 +51,9 @@ var associateProfileFields = {
         // We want to associate a profile
         this.associationOptionsArea = $('#associationOptions');
         this.associateProfileNameField = $('#associateProfileName');
+
+        // Container <div> elements to provide background shading -- tlw72
+        this.associateProfileBackgroundOneArea = $('#associateProfileBackgroundOne');
     },
     
     // Initial page setup. Called only at page load.
@@ -140,6 +143,8 @@ var associateProfileFields = {
         this.externalAuthIdInUseMessage.show();
         this.associatedArea.hide();
         this.associationOptionsArea.hide();
+        this.associateProfileBackgroundOneArea.css("background-color","#fff");
+        this.associateProfileBackgroundOneArea.css("border","none");
     },
  
     showExternalAuthIdMatchesProfile: function(profileUri, profileUrl, profileLabel) {
@@ -148,6 +153,8 @@ var associateProfileFields = {
         this.externalAuthIdInUseMessage.hide();
         this.associatedArea.show();
         this.associationOptionsArea.hide();
+        this.associateProfileBackgroundOneArea.css("background-color","#f1f2ee");
+        this.associateProfileBackgroundOneArea.css("border","1px solid #ccc");
         
         this.associatedProfileNameSpan.html(profileLabel);
         this.associatedProfileUriField.val(profileUri);
@@ -160,8 +167,12 @@ var associateProfileFields = {
         
         if (this.associationEnabled && this.externalAuthIdField.val().length > 0) {
             this.associationOptionsArea.show();
+            this.associateProfileBackgroundOneArea.css("background-color","#f1f2ee");
+            this.associateProfileBackgroundOneArea.css("border","1px solid #ccc");
         } else {
             this.associationOptionsArea.hide();
+            this.associateProfileBackgroundOneArea.css("background-color","#fff");
+            this.associateProfileBackgroundOneArea.css("border","none");
         }
     },
 

webapp/web/templates/freemarker/body/accounts/userAccounts-add.ftl

@@ -74,7 +74,7 @@
         <#if emailIsEnabled??>
             <p class="note">
                 Note: An email will be sent to the address entered above 
-                notifying the user that an account has been created. 
+                notifying that an account has been created. 
                 It will include instructions for activating the account and creating a password.
             </p>
         <#else>
@@ -84,15 +84,16 @@
                         <label for="initial-password">Initial password<span class="requiredHint"> *</span></label>
                         <input type="password" name="initialPassword" value="${initialPassword}" id="initial-password" role="input "/>
                     </td>
+                    <td>&nbsp;</td>
                     <td>
                         <label for="confirm-password">Confirm initial password<span class="requiredHint"> *</span></label> 
                         <input type="password" name="confirmPassword" value="${confirmPassword}" id="confirm-password" role="input" />
                     </td>
                 </tr>
             </table>
-            <p>Minimum of ${minimumLength} characters in length.</p>
+            <p class="explanatoryText" style="margin-top:-8px">Minimum of ${minimumLength} characters in length.</p>
         </#if>
-
+        <br />
         <input type="submit" name="submitAdd" value="Add new account" class="submit"/> or <a class="cancel" href="${formUrls.list}">Cancel</a>
 
         <p class="requiredHint">* required fields</p>

webapp/web/templates/freemarker/body/accounts/userAccounts-associateProfilePanel.ftl

@@ -2,40 +2,50 @@
 
 <#-- Template for setting the account reference field, which can also associate a profile with the user account -->
 
-${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/autocomplete.css"" />',
+${stylesheets.add('<link rel="stylesheet" href="${urls.base}/edit/forms/css/autocomplete.css" />',
-                   '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css"" />')}
+                   '<link rel="stylesheet" href="${urls.base}/js/jquery-ui/css/smoothness/jquery-ui-1.8.9.custom.css" />')}
 
-    <label for="externalAuthId">External Auth. ID / Matching ID</label> 
+    <div id="associateProfileBackgroundOne">
-    <input type="text" name="externalAuthId" value="${externalAuthId}" id="externalAuthId" role="input "/>
+        <div style="margin-left:8px">
-    <span id="externalAuthIdInUse"  style="display: none;" >This Account Reference is already in use.</span>
+            <label for="externalAuthId">External Auth. ID / Matching ID</label> 
-    <p class="explanatoryText"  style="margin-top:-8px">Can be used to associate the account with the user's profile via the matching property.</p>
+            <input type="text" name="externalAuthId" value="${externalAuthId}" id="externalAuthId" role="input "/>
+            <span id="externalAuthIdInUse"  style="display: none;" >This Account Reference is already in use.</span>
+            <p class="explanatoryText" style="margin-top:-8px">Can be used to associate the account with the user's profile via the matching property.</p>
+        </div>
+    </div>
     <#-- If there is an associated profile, show these -->
     <div id="associated">
-        <p>
+        <div id="associateProfileBackgroundTwo">
-            <label for="associatedProfileName">Associated profile:</label>
+            <p>
-            <span class="acSelectionInfo" id="associatedProfileName"></span>
+                <label for="associatedProfileName">Associated profile:</label>
-            <a href="" id="verifyProfileLink">(verify this match)</a>
+                <span class="acSelectionInfo" id="associatedProfileName"></span>
-            <a href="" id="changeProfileLink">(change profile)</a>
+                <a href="" id="verifyProfileLink">(verify this match)</a>
-        </p>
+                <a href="" id="changeProfileLink">(change profile)</a>
-        <input type="hidden" id="associatedProfileUri" name="associatedProfileUri" value="" />
+            </p>
+            <input type="hidden" id="associatedProfileUri" name="associatedProfileUri" value="" />
+        </div>
     </div>
             
     <#-- If we haven't selected one, show these instead -->
     <div id="associationOptions">
-        <p>
+        <div id="associateProfileBackgroundThree">
-            <label for="associateProfileName">Select the associated profile</label>
+            <p>
-            <input type="text" id="associateProfileName" name="associateProfileName" class="acSelector" size="35">
+                <label for="associateProfileName">Select the associated profile</label>
-        </p>
+                <input type="text" id="associateProfileName" name="associateProfileName" class="acSelector" size="35">
-        <p> - or - </p>
+            </p>
-        <p> 
+        </div>
-            <label for="">Create the associated profile</label> 
+        <div id="associateProfileBackgroundFour">
-            <select name="degreeUri" id="degreeUri" >
+            <p> - or - </p>
-                <option value="" selected="selected">Select one</option>
+            <p> 
-                <#list profileTypes?keys as key>
+                <label for="">Create the associated profile</label> 
-                    <option value="${key}" >${profileTypes[key]}</option>           
+                <select name="degreeUri" id="degreeUri" >
-                </#list>    
+                    <option value="" selected="selected">Select one</option>
-            </select>    
+                    <#list profileTypes?keys as key>
-        </p>
+                        <option value="${key}" >${profileTypes[key]}</option>           
+                    </#list>    
+                </select>    
+            </p>
+        </div>
     </div>
 
 <script type="text/javascript">

webapp/web/templates/freemarker/body/accounts/userAccounts-edit.ftl

@@ -89,16 +89,17 @@
                         <label for="new-password">New password<span class="requiredHint"> *</span></label>
                         <input type="password" name="newPassword" value="${newPassword}" id="new-password" role="input" />
                     </td>
+                    <td>&nbsp;</td>
                     <td>
-                        <label for="confirm-password">Confirm initial password<span class="requiredHint"> *</span></label> 
+                        <label for="confirm-password">Confirm new password<span class="requiredHint"> *</span></label> 
                         <input type="password" name="confirmPassword" value="${confirmPassword}" id="confirm-password" role="input" />
                     </td>
                 </tr>
             </table>
-            <p>Minimum of ${minimumLength} characters in length.</p>
+            <p class="explanatoryText" style="margin-top:-8px">Minimum of ${minimumLength} characters in length.</p>
-            <p>Leaving this blank means that the password will not be changed.</p>
+            <p class="explanatoryText">Leaving this blank means that the password will not be changed.</p>
         </#if>
-
+        <br />
         <input type="submit" name="submitEdit" value="Save changes" class="submit" /> or <a class="cancel" href="${formUrls.list}">Cancel</a>
 
         <p class="requiredHint">* required fields</p>