source: main/trunk/greenstone3/web/interfaces/default/transform/pages/login.xsl@ 37391

<?xml version="1.0" encoding="UTF-8"?>
<!-- this page is used when the user clicks the Login button. If they have been directed to Login by trying to access a restricted page when they are not already logged in, then they will go to the Login section of authen.xsl -->
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
    xmlns:java="http://xml.apache.org/xslt/java"
    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:import href="layouts/main.xsl"/>

    <!-- set page title -->
    <xsl:template name="pageTitle"><xsl:value-of select="util:getInterfaceText($interface_name, /page/@lang, 'login_b')"/></xsl:template>

    <!-- set page breadcrumbs -->
    <xsl:template name="breadcrumbs"><gslib:siteLink/></xsl:template>

    <!-- 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: 3px;
    margin-top: 5px;
    width: 80px;
    height: 30px;
}
  
            </xsl:text>
      </gsf:style>

        <gsf:variable name="loginErrorMessage"><xsl:value-of select="/page/pageRequest/paramList/param[@name = 'loginMessage']/@value"/></gsf:variable>

        <!--
        <xsl:if test="/page/pageRequest/paramList/param[@name = 'loginMessage']/@value">
        -->
        <xsl:if test="$loginErrorMessage != ''">
          <div id="gs_error" class="ui-state-error ui-corner-all">
            <span class="ui-icon ui-icon-alert" style="float: left;">
              <xsl:text> </xsl:text>
            </span>
            <xsl:value-of select="$loginErrorMessage"/>
          </div>
        <br/>
        </xsl:if>
        <form method="POST"
              id="login-form"
              action="{/page/pageRequest/paramList/param[@name = 'redirectURL']/@value}">
            <table id="loginTable">
              <tr>
                <td colspan="2">
                  <input type="text" name="username" style="width:95%;" autocomplete="username">
                <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%;" autocomplete="current-password">
                <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 name="googleidentity-signin" type="hidden" value="0" />
                  <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">
                    <gsf:variable name="serlvetProtocol"><xsl:value-of select="/page/pageResponse/interfaceOptions/option[@name='servlet_protocol']/@value"/></gsf:variable>
                    <gsf:variable name="baseURL"><xsl:value-of select="/page/pageRequest/@baseURL"/></gsf:variable>
                    <gsf:variable name="redirectURL"><xsl:value-of select="/page/pageRequest/paramList/param[@name = 'redirectURL']/@value"/></gsf:variable>
                    <gsf:div id="g_id_onload"
                         data-client_id="{$googlesignin_client_id}"
                         data-ux_mode="redirect"
                         data-login_uri="{$servletProtocol}:{$baseURL}{$redirectURL}&amp;googleidentity-signin=1">
                    </gsf:div>
                    <gsf:div class="g_id_signin" data-type="standard"/>
                    
                  </td>
                </tr>
              </xsl:if>

            </table>
        </form>

        <gsf:variable name="googleSigninClientId"><xsl:value-of select="/page/pageResponse/interfaceOptions/option[@name = 'googlesignin_client_id']/@value"/></gsf:variable>

        <gsf:script>

          function decodeJwtResponse(jwt) {
            // Split the JWT into its three parts
            var parts = jwt.split('.');

            // Decode the header and payload parts using base64
            var header = JSON.parse(atob(parts[0]));
            var payload = JSON.parse(atob(parts[1]));

            // Return an object containing the decoded header and payload
            //return {
            //  header: header,
            //  payload: payload
            //};
            return payload;
            
          }
            
          function googleSigninHandleCredentialResponseUNUSED(response)
          {
            console.log("onGoogleSignin() called");

            const responsePayload = decodeJwtResponse(response.credential);

            console.log("ID: " + responsePayload.sub);
            console.log('Full Name: ' + responsePayload.name);
            console.log('Given Name: ' + responsePayload.given_name);
            console.log('Family Name: ' + responsePayload.family_name);
            console.log("Image URL: " + responsePayload.picture);
            console.log("Email: " + responsePayload.email);
            console.log("Email verified: " + responsePayload.email_verified);


             var google_fullname = responsePayload.name;
             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();

            
          }

         </gsf:script>

         <script type="text/javascript">
            <xsl:text disable-output-escaping="yes">
            {
                $("#loginTable input[name=\"username\"]").focus();
            }
            </xsl:text>
        </script>
    </xsl:template>
</xsl:stylesheet>