By: Carl Schmitt user 10 Feb 2023 at 9:06 a.m. CST

5 Responses
Carl Schmitt gravatar
Gluu 4.5.0 File: oxauth.war/login.xhtml When logging in via OpenId, oxauth/authorize.htm has a javascript error: jquery-3.6.0.min.js:2 Uncaught TypeError: Cannot set properties of null (setting 'value') at HTMLDocument.<anonymous> (authorize.htm?[REMOVED]104:73) at e (jquery-3.6.0.min.js:2:30038) at t (jquery-3.6.0.min.js:2:30340) Everywhere in login.xhmtl, the javascript is calling document.getElementById with loginForm:elementid [EX: document.getElementById("loginForm:username")] however none of the input ids begin with loginForm: This means that when passing login_hint to authorize, it will not pre-populate with the hint. I was able to fix by replacing getElementById("loginForm: with getElementById(" in a custom login.xhtml page

By Mobarak Hosen Shakil staff 12 Feb 2023 at 5:41 p.m. CST

Mobarak Hosen Shakil gravatar
Hi, Carl! Thanks for pointing it out. We will check it. Regards ~ Shakil

By Mobarak Hosen Shakil staff 22 Feb 2023 at midnight CST

Mobarak Hosen Shakil gravatar
Hi, Carl! Can you please share your fixed `login.xhtml` if possible? We have `loginForm` id in the form. But, I see it's getting error because of null value. >> Everywhere in login.xhmtl, the javascript is calling document.getElementById with loginForm:elementid [EX: document.getElementById("loginForm:username")] however none of the input ids begin with loginForm Regards ~ Shakil

By Carl Schmitt user 22 Feb 2023 at 8:25 a.m. CST

Carl Schmitt gravatar
``` &lt;ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://xmlns.jcp.org/jsf/core" xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:h="http://xmlns.jcp.org/jsf/html" template="/WEB-INF/incl/layout/login-template.xhtml"&gt; &lt;f:metadata&gt; &lt;f:viewAction action="#{authenticator.prepareAuthenticationForStep}" /&gt; &lt;/f:metadata&gt; &lt;ui:define name="head"&gt; &lt;meta name="description" content="Gluu, Inc." /&gt; &lt;/ui:define&gt; &lt;ui:define name="pageTitle"&gt; &lt;h:outputText value="#{msgs['login.pageTitle']}" /&gt; &lt;/ui:define&gt; &lt;ui:define name="body"&gt; &lt;div class="container"&gt; &lt;h:panelGroup rendered="true"&gt; &lt;div class="login_bx_1" style="border-radius: 10px; margin-top: 0px; background: white; border: 1px solid #008b8b;"&gt; &lt;div class="row"&gt; &lt;h:messages class="text-center" style="color:#8b0000;margin:5px;margin-left:20px; font-size:2vw;" infoClass="text-center" errorClass="text-center" /&gt; &lt;/div&gt; &lt;h:form id="loginForm" style="padding:30px;" prependId="false"&gt; &lt;div class="row"&gt; &lt;div class="col-sm-3 col-md-3"&gt; &lt;h:outputText value="#{msgs['login.username']}" /&gt; &lt;/div&gt; &lt;div class="col-sm-9 col-md-9"&gt; &lt;h:inputText placeholder="#{msgs['login.username']}" id="username" name="username" required="true" colMd="10" labelColMd="2" autocomplete="off" requiredMessage="Username or Password is missing." value="#{credentials.username}" styleClass="form-control" style="width:100%"&gt; &lt;/h:inputText&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group row"&gt;&lt;/div&gt; &lt;div class="row"&gt; &lt;div class="col-sm-3 col-md-3"&gt; &lt;h:outputText value="#{msgs['login.password']}" /&gt; &lt;/div&gt; &lt;div class="col-sm-9 col-md-9"&gt; &lt;h:inputSecret placeholder="#{msgs['login.password']}" colMd="10" id="password" name="password" labelColMd="2" value="#{credentials.password}" autocomplete="off" styleClass="form-control" tyle="width:100%"&gt; &lt;/h:inputSecret&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group row"&gt;&lt;/div&gt; &lt;div class="row"&gt; &lt;div class="col-sm-5 col-md-5"&gt; &lt;h:outputLabel styleClass="col-form-label" for="rememberme" value="#{msgs['login.rememberMe']}" /&gt; &lt;/div&gt; &lt;div class="col-sm-2 col-md-2" style="padding-top: 15px"&gt; &lt;input type="checkbox" value="rememberme" id="rememberme" name="rememberme" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group row"&gt; &lt;div class="col-sm-offset-2 offset-md-2 col-sm-8 col-md-8"&gt; &lt;h:commandButton id="loginButton" style="background-color: #00BE79; color:white;" styleClass="btn col-sm-12" value=" #{msgs['login.login']}" onclick="checkRemembeMe()" iconAwesome="fa-sign-in" action="#{authenticator.authenticate}" /&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="form-group row"&gt; &lt;div class="col-sm-offset-3 offset-md-3 col-sm-7 col-md-7"&gt; &lt;div class="forgot_link"&gt; <a href="/identity/person/passwordReminder.htm"> &lt;h:outputText value="#{msgs['login.forgotYourPassword']}" /&gt; </a> &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;h:inputHidden id="platform" /&gt; &lt;/h:form&gt; &lt;div class="row"&gt; &lt;div align="center" class="col-sm-offset-4 col-sm-9"&gt; &lt;ui:repeat value="#{identity.getWorkingParameter('download_url').entrySet().toArray()}" var="_entry"&gt; &lt;ui:param name="app_name" value="#{_entry.key}" /&gt; &lt;ui:param name="app_link" value="#{_entry.value}" /&gt; &lt;h:outputLink style="margin-right:5px;" value="#{app_link}" title="#{app_name}"&gt; &lt;h:graphicImage value="img/#{app_name}.png" /&gt; &lt;/h:outputLink&gt; &lt;/ui:repeat&gt; &lt;/div&gt; &lt;h:panelGroup layout="block" rendered="#{external_registration_uri != Null}"&gt; &lt;div class="reg_link"&gt; <a href="#{external_registration_uri}"> &lt;h:outputText value="Register Now " /&gt; </a> &lt;/div&gt; &lt;/h:panelGroup&gt; &lt;/div&gt; &lt;/div&gt; &lt;/h:panelGroup&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $('.other').click(function(){ $('#social_new').toggle(); }); if (localStorage.chkbx &amp;&amp; localStorage.chkbx != '') { $('#rememberme').attr('checked', 'checked') document.getElementById("username").value = localStorage.usrname; } else { $('#rememberme').removeAttr('checked'); document.getElementById("username").value = ""; } $('#rememberme').click(function() { checkRemembeMe(); }); fillPlatformField(); var userNameField = document.getElementById("username"); var passwordField = document.getElementById("password"); passwordField.value = ""; var userName = '#{!empty authorizeAction.loginHint ? authorizeAction.loginHint : ""}'; if (userName) { userNameField.value = userName; passwordField.focus(); } else { userNameField.focus(); } var displayRegister = #{display_register_action or identity.sessionId.sessionAttributes['display_register_action']}; if (displayRegister) { var registerButton = document.getElementById("registerId"); if (registerButton != null) { registerButton.style.display = 'inline'; } } }); function checkRemembeMe() { if ($('#rememberme').is(':checked')) { localStorage.usrname = document.getElementById("username").value; localStorage.chkbx = $('#rememberme').val(); } else { localStorage.usrname = ''; localStorage.chkbx = ''; } } function fillPlatformField() { try { re = /^([^\.]+\.[^\.]+)\..+/; result = re.exec(platform.version); if (result != null) { platform.version=result[1]; } document.getElementById("platform").value = JSON.stringify(platform); } catch (e) { } } &lt;/script&gt; &lt;/ui:define&gt; &lt;/ui:composition&gt; ```

By Carl Schmitt user 22 Feb 2023 at 8:41 a.m. CST

Carl Schmitt gravatar
in Gluu 4.4.2, /oxauth/authorize.htm &lt;input id="loginForm:username" type="text" name="loginForm:username" autocomplete="off" class="form-control" style="width:100%"&gt; NOTE: the input name and id both have loginForm: in Gluu 4.5.0, /oxauth/authorize.htm &lt;input id="username" type="text" name="username" autocomplete="off" class="form-control" style="width:100%"&gt; Note: the input name and id no longer begin with loginForm:

By Mobarak Hosen Shakil staff 28 Feb 2023 at 8:47 p.m. CST

Mobarak Hosen Shakil gravatar
Thanks, Carl! We will report this issue.