From 69ec56135d83adc9a8f15272a26794f77e13b03d Mon Sep 17 00:00:00 2001
From: Michael Heppler <mheppler@hmdc.harvard.edu>
Date: Tue, 19 Jan 2021 16:37:57 -0500
Subject: [PATCH] Cleaned up responsive layout of account info, verified status
 and verify btn on account pg [ref #3438]

---
 src/main/webapp/dataverseuser.xhtml | 232 ++++++++++++++--------------
 1 file changed, 112 insertions(+), 120 deletions(-)

diff --git a/src/main/webapp/dataverseuser.xhtml b/src/main/webapp/dataverseuser.xhtml
index 893b1e7e643..bdbdab62ae1 100644
--- a/src/main/webapp/dataverseuser.xhtml
+++ b/src/main/webapp/dataverseuser.xhtml
@@ -350,126 +350,118 @@
                                     </ul>
                                 </div>
                             </div>
-                            <div class="form-horizontal" jsf:rendered="#{!empty DataverseUserPage.currentUser}">
-                                <div class="form-group" jsf:rendered="#{not DataverseUserPage.accountDetailsEditable}">
-                                    <div class="col-sm-12">
-                                        <p class="help-block">
-                                            <h:outputText value="#{bundle['user.isShibUser']}" />
-                                            <h:outputText value=" #{bundle['user.helpShibUserMigrateOffShibBeforeLink']} " />
-                                            <p:commandLink value="#{settingsWrapper.supportTeamName}" oncomplete="PF('contactForm').show()" update=":contactDialog" actionListener="#{sendFeedbackDialog.initUserInput}">
-                                                <f:setPropertyActionListener target="#{sendFeedbackDialog.messageSubject}" value=""/>
-                                                <f:setPropertyActionListener target="#{sendFeedbackDialog.recipient}" value="#{null}"/>
-                                                <f:setPropertyActionListener target="#{sendFeedbackDialog.userMessage}" value=""/>
-                                                <f:setPropertyActionListener target="#{sendFeedbackDialog.userEmail}" value=""/>
-                                            </p:commandLink>
-                                            <h:outputText value=" #{bundle['user.helpShibUserMigrateOffShibAfterLink']}" />
-                                        </p>
-                                    </div>
-                                </div>
-                                <div class="form-group" jsf:rendered="#{DataverseUserPage.userAuthProvider.OAuthProvider}">
-                                    <div class="col-sm-12">
-                                        <p class="help-block">
-                                            <h:outputFormat value="#{bundle['user.helpOAuthBeforeLink']} ">
-                                                <f:param value="#{DataverseUserPage.userAuthProvider.info.title}"/>
-                                            </h:outputFormat>
-                                            <p:commandLink value="#{settingsWrapper.supportTeamName}" oncomplete="PF('contactForm').show()" update=":contactDialog" actionListener="#{sendFeedbackDialog.initUserInput}">
-                                                <f:setPropertyActionListener target="#{sendFeedbackDialog.messageSubject}" value=""/>
-                                                <f:setPropertyActionListener target="#{sendFeedbackDialog.recipient}" value="#{null}"/>
-                                                <f:setPropertyActionListener target="#{sendFeedbackDialog.userMessage}" value=""/>
-                                                <f:setPropertyActionListener target="#{sendFeedbackDialog.userEmail}" value=""/>
-                                            </p:commandLink>
-                                            <h:outputText value=" #{bundle['user.helpOAuthAfterLink']}" />
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- Username -->
-                                <div class="form-group">
-                                    <label for="userNameEmail" class="col-sm-3 control-label">
-                                        #{bundle['user.username']}
-                                    </label>
-                                    <div class="col-sm-9">
-                                        <p class="form-control-static">#{DataverseUserPage.currentUser.identifier.replaceFirst("@", "")}</p>
-                                    </div>
-                                </div>
-                                <!-- First Name -->
-                                <div class="form-group">
-                                    <label for="firstName" class="col-sm-3 control-label">
-                                        #{bundle['user.firstName']}
-                                    </label>
-                                    <div class="col-sm-9">
-                                        <p class="form-control-static">#{DataverseUserPage.currentUser.firstName}</p>
-                                    </div>
-                                </div>
-                                <!-- Last Name -->
-                                <div class="form-group">
-                                    <label for="lastName" class="col-sm-3 control-label">
-                                        #{bundle['user.lastName']}
-                                    </label>
-                                    <div class="col-sm-9">
-                                        <p class="form-control-static">#{DataverseUserPage.currentUser.lastName}</p>
-                                    </div>
-                                </div>
-                                <!-- Email -->
-                                <div class="form-group">
-                                    <label for="email" class="col-sm-3 control-label">
-                                        #{bundle.email}
-                                    </label>
-                                    <div class="col-sm-9 form-col-container">
-                                        <div class="col-sm-4 form-col-container">
-                                            <p class="form-control-static">#{DataverseUserPage.currentUser.email}</p>
-                                        </div>
-                                        <div class="col-sm-2 form-col-container">
-                                            <p class="form-control-static #{DataverseUserPage.emailIsVerified ? 'text-success' : 'text-danger'}">
-                                                <ui:fragment rendered="#{DataverseUserPage.emailNotVerified}">
-                                                    <span class="glyphicon glyphicon-ban-circle"/> #{bundle['confirmEmail.notVerified']}
-                                                </ui:fragment>
-                                                <ui:fragment rendered="#{!DataverseUserPage.emailNotVerified}">
-                                                    <span class="glyphicon glyphicon-ok"/> #{bundle['confirmEmail.verified']}
-                                                </ui:fragment>
-                                            </p>
-                                        </div>
-                                        <div class="col-sm-1">
-                                            <p:commandLink rendered="#{DataverseUserPage.showVerifyEmailButton()}" styleClass="btn btn-default" 
-                                                            id="verifyEmailButton"
-                                                           onclick="testHasEmailToken(#{DataverseUserPage.getHasActiveVerificationToken()})">
-                                                <span class="glyphicon glyphicon-ok"></span> #{bundle['confirmEmail.submitRequest']}
-                                            </p:commandLink>
-                                            <p:remoteCommand name="sendConfirmEmailCommand" process="@this" update="@([id$=verifyEmailButton]), :messagePanel" actionListener="#{DataverseUserPage.sendConfirmEmail()}"/>
-                                        </div>
-                                    </div>
-                                </div>
-                                <!-- ORCID iD, for example -->
-                                <div class="form-group" jsf:rendered="#{DataverseUserPage.userAuthProvider.displayIdentifier}">
-                                    <label for="userPersistentId" class="col-sm-3 control-label">
-                                        #{DataverseUserPage.userAuthProvider.persistentIdName}
-                                    </label>
-                                    <div class="col-sm-9">
-                                        <p class="form-control-static">
-                                            <h:graphicImage value="#{DataverseUserPage.userAuthProvider.logo}" height="16" width="16" alt="#{of:format1(bundle['alt.logo'], DataverseUserPage.userAuthProvider.persistentIdName)}"/>&#160;
-                                            <h:outputLink value="#{DataverseUserPage.userAuthProvider.persistentIdUrlPrefix}#{DataverseUserPage.currentUser.authenticatedUserLookup.persistentUserId}" title="#{DataverseUserPage.userAuthProvider.persistentIdName}" target="_blank">
-                                                <h:outputText value="#{DataverseUserPage.userAuthProvider.persistentIdUrlPrefix}#{DataverseUserPage.currentUser.authenticatedUserLookup.persistentUserId}"/>
-                                            </h:outputLink>
-                                        </p>
-                                    </div>
-                                </div>
-                                <!-- Affiliation -->
-                                <div class="form-group" jsf:rendered="#{!empty DataverseUserPage.currentUser.affiliation}">
-                                    <label for="affiliation" class="col-sm-3 control-label">
-                                        #{bundle.affiliation}
-                                    </label>
-                                    <div class="col-sm-9">
-                                        <p class="form-control-static">#{DataverseUserPage.currentUser.affiliation}</p>
-                                    </div>
-                                </div>
-                                <!-- Position (not populated for Shibboleth users) -->
-                                <div class="form-group" jsf:rendered="#{!empty DataverseUserPage.currentUser.position}">
-                                    <label for="position" class="col-sm-3 control-label">
-                                        #{bundle['user.position']}
-                                    </label>
-                                    <div class="col-sm-9">
-                                        <p class="form-control-static">#{DataverseUserPage.currentUser.position}</p>
-                                    </div>
-                                </div>
+                            <div class="metadata-container" jsf:rendered="#{!empty DataverseUserPage.currentUser}">
+                                <!-- Shib -->
+                                <p class="help-block" id="userShib" jsf:rendered="#{true or not DataverseUserPage.accountDetailsEditable}">
+                                    <h:outputText value="#{bundle['user.isShibUser']}" />
+                                    <h:outputText value=" #{bundle['user.helpShibUserMigrateOffShibBeforeLink']} " />
+                                    <p:commandLink value="#{settingsWrapper.supportTeamName}" oncomplete="PF('contactForm').show()" update=":contactDialog" actionListener="#{sendFeedbackDialog.initUserInput}">
+                                        <f:setPropertyActionListener target="#{sendFeedbackDialog.messageSubject}" value=""/>
+                                        <f:setPropertyActionListener target="#{sendFeedbackDialog.recipient}" value="#{null}"/>
+                                        <f:setPropertyActionListener target="#{sendFeedbackDialog.userMessage}" value=""/>
+                                        <f:setPropertyActionListener target="#{sendFeedbackDialog.userEmail}" value=""/>
+                                    </p:commandLink>
+                                    <h:outputText value=" #{bundle['user.helpShibUserMigrateOffShibAfterLink']}" />
+                                </p>
+                                <!-- OAuth -->
+                                <p class="help-block" id="userOAuth" jsf:rendered="#{true or DataverseUserPage.userAuthProvider.OAuthProvider}">
+                                    <h:outputFormat value="#{bundle['user.helpOAuthBeforeLink']} ">
+                                        <f:param value="#{DataverseUserPage.userAuthProvider.info.title}"/>
+                                    </h:outputFormat>
+                                    <p:commandLink value="#{settingsWrapper.supportTeamName}" oncomplete="PF('contactForm').show()" update=":contactDialog" actionListener="#{sendFeedbackDialog.initUserInput}">
+                                        <f:setPropertyActionListener target="#{sendFeedbackDialog.messageSubject}" value=""/>
+                                        <f:setPropertyActionListener target="#{sendFeedbackDialog.recipient}" value="#{null}"/>
+                                        <f:setPropertyActionListener target="#{sendFeedbackDialog.userMessage}" value=""/>
+                                        <f:setPropertyActionListener target="#{sendFeedbackDialog.userEmail}" value=""/>
+                                    </p:commandLink>
+                                    <h:outputText value=" #{bundle['user.helpOAuthAfterLink']}" />
+                                </p>
+                                <table class="metadata">
+                                    <tbody>
+                                        <!-- Username -->
+                                        <tr id="userIdentifier">
+                                            <th scope="row">
+                                                #{bundle['user.username']}
+                                            </th>
+                                            <td>
+                                                #{DataverseUserPage.currentUser.identifier.replaceFirst("@", "")}
+                                            </td>
+                                        </tr>
+                                        <!-- First Name -->
+                                        <tr id="userFirstName">
+                                            <th scope="row">
+                                                #{bundle['user.firstName']}
+                                            </th>
+                                            <td>
+                                                #{DataverseUserPage.currentUser.firstName}
+                                            </td>
+                                        </tr>
+                                        <!-- Last Name -->
+                                        <tr id="userLastName">
+                                            <th scope="row">
+                                                #{bundle['user.lastName']}
+                                            </th>
+                                            <td>
+                                                #{DataverseUserPage.currentUser.lastName}
+                                            </td>
+                                        </tr>
+                                        <!-- Email -->
+                                        <tr id="userEmail">
+                                            <th scope="row">
+                                                #{bundle.email}
+                                            </th>
+                                            <td>
+                                                <p class="form-control-static" style="display:inline-block;">
+                                                    <span class="form-control-static">#{DataverseUserPage.currentUser.email}</span>
+                                                    &#160;
+                                                    <span class="text-danger" jsf:rendered="#{DataverseUserPage.emailNotVerified}">
+                                                        <span class="glyphicon glyphicon-ban-circle"/> #{bundle['confirmEmail.notVerified']}
+                                                    </span>
+                                                    <span class="text-success" jsf:rendered="#{!DataverseUserPage.emailNotVerified}">
+                                                        <span class="glyphicon glyphicon-ok"/> #{bundle['confirmEmail.verified']}
+                                                    </span>
+                                                </p>
+                                                &#160;
+                                                <p:commandLink rendered="#{DataverseUserPage.showVerifyEmailButton()}" styleClass="btn btn-default" 
+                                                                id="verifyEmailButton"
+                                                               onclick="testHasEmailToken(#{DataverseUserPage.getHasActiveVerificationToken()})">
+                                                    <span class="glyphicon glyphicon-ok"></span> #{bundle['confirmEmail.submitRequest']}
+                                                </p:commandLink>
+                                                <p:remoteCommand name="sendConfirmEmailCommand" process="@this" update="@([id$=verifyEmailButton]), :messagePanel" actionListener="#{DataverseUserPage.sendConfirmEmail()}"/>
+                                            </td>
+                                        </tr>
+                                        <!-- PersistentId, ORCID iD -->
+                                        <tr id="userPersistentId" jsf:rendered="#{DataverseUserPage.userAuthProvider.displayIdentifier}">
+                                            <th scope="row">
+                                                #{DataverseUserPage.userAuthProvider.persistentIdName}
+                                            </th>
+                                            <td>
+                                                <h:graphicImage value="#{DataverseUserPage.userAuthProvider.logo}" height="16" width="16" alt="#{of:format1(bundle['alt.logo'], DataverseUserPage.userAuthProvider.persistentIdName)}"/>&#160;
+                                                <h:outputLink value="#{DataverseUserPage.userAuthProvider.persistentIdUrlPrefix}#{DataverseUserPage.currentUser.authenticatedUserLookup.persistentUserId}" title="#{DataverseUserPage.userAuthProvider.persistentIdName}" target="_blank">
+                                                    <h:outputText value="#{DataverseUserPage.userAuthProvider.persistentIdUrlPrefix}#{DataverseUserPage.currentUser.authenticatedUserLookup.persistentUserId}"/>
+                                                </h:outputLink>
+                                            </td>
+                                        </tr>
+                                        <!-- Affiliation -->
+                                        <tr id="userAffiliation" jsf:rendered="#{!empty DataverseUserPage.currentUser.affiliation}">
+                                            <th scope="row">
+                                                #{bundle.affiliation}
+                                            </th>
+                                            <td>
+                                                #{DataverseUserPage.currentUser.affiliation}
+                                            </td>
+                                        </tr>
+                                        <!-- Position (not populated for Shibboleth users) -->
+                                        <tr id="userPosition" jsf:rendered="#{!empty DataverseUserPage.currentUser.position}">
+                                            <th scope="row">
+                                                #{bundle['user.position']}
+                                            </th>
+                                            <td>
+                                                #{DataverseUserPage.currentUser.position}
+                                            </td>
+                                        </tr>
+                                    </tbody>
+                                </table>
                             </div>
                         </p:tab>
                         <p:tab id="apiTokenTab" title="#{bundle['apitoken.title']}">