Add standard attributes (id or name) to login <input> tags in html template


#1

More of a “use standardized coding” rather than a “feature request”
my dilemma https://forum.kee.pm/t/help-getting-kee-to-recognize-fields-in-poorly-coded-template-form/1916

The html template for the login form at
https://.../frontend_latest/authorize.html
image

does not contain any standard attributes for the username and password <input> tags.

those are id and/or name attributes

for example navigate here https://www.wellsfargo.com/ to wells fargo banking
then right click on the username field and open the inspector. You see this.

<input type="text" accesskey="U" id="userid" class="formElement formElementText" name="j_username" maxlength="14" value="" placeholder="Username" autocomplete="off" style="cursor: auto; background-image:) !important; .....">

see the id="userid" that’s what I am talking about.
alternatively a name=userid works as well

Here is a list of common used values. Any would be suitable, username being the most common.

username,j_username,user_name,user,user-name,login,vb_login_username,name,user name,user id,user-id,userid,email,e-mail,id,form_loginname,wpname,mail,loginid,login id,login_name,openid_identifier,authentication_email,openid,auth_email,auth_id,authentication_identifier,authentication_id,customer_number,customernumber,onlineid

the same goes for the password field.
<input type="password" accesskey="P" id="password" class="formElement formElementPassword" name="j_password" maxlength="32" placeholder="Password" autocomplete="off" style="cursor: auto; background-image: ...;">

see the id="password" that’s what I am talking about.
alternatively a name=password works as well

but the value should definitely be, no surprise 'password`

further the form itself should have an id or 'name` attribute indicating this it is a login or signon form.

once again from wells fargo site you see they did that.
<form autocomplete="off" name="signon" id="frmSignon" action="https://connect.secure.wellsfargo.com/auth/login/do" method="post" data-login-app="true"></form>

When the template includes those password managers are easily able to inject them. In their absence it’s nearly impossible and only possible by having the password manager parse in a custom way.

So my request this that you add these simple attributes (either id=, name=) to the template found here
<script src="/frontend_latest/authorize-f75b5d04.js"></script>

specifically two these three tags like I show here with id attributes added.

The form tag

<form id="login" >
        <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
        <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
              <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
            <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
            <ha-form></ha-form>
          <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
          <div class="action">
            <paper-button raised="" role="button" tabindex="0" animated="" elevation="1" aria-disabled="false">Next</paper-button>
          </div>
        <dom-if style="display: none;"><template is="dom-if"></template></dom-if>
      </form>

The username input tag

<input id="username" autocomplete="off" placeholder="" autocapitalize="none" autocorrect="off" aria-describedby="paper-input-add-on-1" aria-labelledby="paper-input-label-1">

The password input tag

<input id="password" , autocomplete="off" placeholder="" autocapitalize="none" autocorrect="off" aria-describedby="paper-input-add-on-2" aria-labelledby="paper-input-label-2" type="password">

It’s a very small thing with big consequences. ALL home assistant users will thank you for standardizing your template including myself. Without these simple additions users are more likely to choose insecure credentials or curse HA for being one of the few sites where theirpassword manager does not work.


#2

This may have something to do also with the new fangled shadow root construction in the template