Changeset 35322 for main/trunk/greenstone3/web/interfaces/default/transform/pages

Timestamp:

2021-08-31T22:42:54+12:00 (3 years ago)

Author:

davidb

Message:

Front-end (web-browser) changes that introduce the option of signing in via Google Sign-in API rather than the user/password credentials stored in the JDBM Database Greenstone provides. This needs a Google Client ID, specified in servlet.xml as googlesignin_client_id as an 'init-param'. NOTE ALSO that this commit is inly the front-end part -- the backend server needed to support this is not part of the commit (more programming work needed to get this functional). The client-side commit is safe to include at this point in the sense that (without setting googlesignin_client_id) the Google Sign-in features lay dormant and are not shown

File:

• main/trunk/greenstone3/web/interfaces/default/transform/pages/login.xsl (modified) (3 diffs)

main/trunk/greenstone3/web/interfaces/default/transform/pages/login.xsl

@@ -6 +6 @@
     xmlns:util="xalan://org.greenstone.gsdl3.util.XSLTUtil"
     xmlns:gslib="http://www.greenstone.org/skinning"
+    xmlns:gsf="http://www.greenstone.org/greenstone3/schema/ConfigFormat"
     extension-element-prefixes="java util"
     exclude-result-prefixes="java util">
-  
+
     <!-- use the 'main' layout -->
     <xsl:include href="layouts/main.xsl"/>
@@ -20 +21 @@
     <!-- the page content -->
     <xsl:template match="/page">
+      <gsf:style>
+        <xsl:text disable-output-escaping="yes">
+        /* Based on: https://stackoverflow.com/questions/2812770/add-centered-text-to-the-middle-of-a-horizontal-rule */
+.hr-with-text {
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+.hr-with-text::before,
+.hr-with-text::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid #000;
+}
+
+.hr-with-text:not(:empty)::before {
+  margin-right: .25em;
+}
+
+.hr-with-text:not(:empty)::after {
+  margin-left: .25em;
+}
+
+
+input.gsloginform[type=submit] {
+    float: right;
+    margin-right: 10px;
+    margin-top: 5px;
+    width: 80px;
+    height: 30px;
+}
+  
+            </xsl:text>
+      </gsf:style>
+      
         <xsl:if test="/page/pageRequest/paramList/param[@name = 'loginMessage']/@value">
             <div id="gs_error" class="ui-state-error ui-corner-all">
@@ -26 +63 @@
         <br/>
         </xsl:if>
-        <form method="POST" action="{/page/pageRequest/paramList/param[@name = 'redirectURL']/@value}">
+        <form method="POST"
+              id="login-form"
+              action="{/page/pageRequest/paramList/param[@name = 'redirectURL']/@value}">
             <table id="loginTable">
-                <tr><td><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'authen.username')"/>: </td><td><input type="text" name="username"/></td></tr>
-                <tr><td><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'authen.password')"/>: </td><td><input type="password" name="password"/></td></tr>
-                <tr><td><input type="submit"><xsl:attribute name="value"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_b')"/></xsl:attribute></input></td><td><xsl:text> </xsl:text></td></tr>
+              <tr>
+                <td colspan="2">
+                  <input type="text" name="username" style="width:95%;">
+                <xsl:attribute name="placeholder">
+                  <xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'authen.username')"/>
+                </xsl:attribute>
+                  </input>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2">
+                  <input type="password" name="password" style="width:95%;">
+                <xsl:attribute name="placeholder">
+                  <xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'authen.password')"/>
+                </xsl:attribute>
+                </input>
+                </td>
+              </tr>
+              <tr>
+                <td colspan="2">
+                  <input type="submit" class="gsloginform"><xsl:attribute name="value"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_b')"/></xsl:attribute></input>
+                </td>
+              </tr>
+              <xsl:if test="$googlesignin_client_id">
+                <tr>
+                  <td colspan="2">
+                    <div class="hr-with-text">or</div>
+                  </td>
+                </tr>
+                <tr>
+                  <td colspan="2">
+                    <input type="hidden" id="googlesignin_id_token" name="googlesignin_id_token"></input>
+                    <gsf:div id="mygoogle-signin2" />
+                  </td>
+                </tr>
+              </xsl:if>
+
             </table>
         </form>
-        <script type="text/javascript">
+        
+        <gsf:variable name="googleSigninClientId"><xsl:value-of select="/page/pageResponse/interfaceOptions/option[@name = 'googlesignin_client_id']/@value"/></gsf:variable>
+
+        <gsf:script>
+             
+          function onGoogleSigninSuccess(googleUser)
+          {
+
+             var google_fullname = googleUser.getBasicProfile().getName();
+             console.log('Google-authenicated login as: ' + google_fullname);
+
+             var googlesignin_id_token = googleUser.getAuthResponse().id_token;
+             //console.log('Google ID Token: ' + googlesignin_id_token);
+
+             $("#googlesignin_id_token").val(googlesignin_id_token);
+             $("#login-form").submit();
+          }
+
+          function onGoogleSigninFailure(error)
+          {
+            console.error(error);
+          }
+
+          function renderButton()
+          {
+             gapi.signin2.render('mygoogle-signin2', {
+               'scope': 'profile email',
+               'width': 240,
+               'height': 50,
+               'longtitle': true,
+               'theme': 'dark',
+               'onsuccess': onGoogleSigninSuccess,
+               'onfailure': onGoogleSigninFailure
+             });
+          }
+
+          window.onload = function()  {
+            if (gs.variables['googleSigninClientId']) {
+              renderButton();
+            }
+          }
+
+         </gsf:script>
+
+         <script type="text/javascript">
             <xsl:text disable-output-escaping="yes">
             {