Better HTML for Safari OTP

[CuckooEXE]

Page: Login Page

A lot of login processes I use in Safari natively support Apple Password's OTP prompt. That is, on the main login screen, it automatically pops up with the username/password for that site, and when I click "Login" (and I have Google's TOTP enabled) it should autofill the OTP from Apple Passwords, but instead it tries to generate a new password. That is because the "Verification Code" input type is password. I'm not a web designer, so I won't tell you what it should be, but I can say that another website that successfully suggests my OTP from Apple Password has the following for their input:

<form action="#" name="phone-number">
   <div class="css-qszpxh">
      <div class="css-liy63w">
         <div class="gui css-ucod0" data-test-id="parent-input-wrapper--code">
            <label class="gui css-sn7en4" data-test-id="input-label--code" for="code" id="codeLabel">6 digit code</label>
            <div data-test-id="input-wrapper--code" class="css-2v3nbk"><input data-test-id="input--code" id="code" name="code" type="text" aria-labelledby="codeLabel codeHintText" autocomplete="one-time-code" inputmode="numeric" class="css-bql15b" value=""></div>
         </div>
         <label class="gui css-83r0dc" data-checkbox-state="active" data-test-id="remember-label" for="remember">
            <input aria-checked="true" data-test-id="remember--input" id="remember" name="remember" type="checkbox" value="">
            <div class=" css-463jce" data-test-id="checked-icon">
               <svg width="20px" height="20px" viewBox="0 0 20 20" fill="var(--theme-ui-colors-icon)" xmlns="http://www.w3.org/2000/svg" data-icon="checkedCheckbox" stroke="none">
                  <rect width="20" height="20" rx="4" fill="none"></rect>
                  <path d="M14.5 6L8.5 13.5L5 10.5" fill="transparent" stroke="current" stroke-width="2"></path>
               </svg>
            </div>
            Remember this device
         </label>
      </div>
      <div class="css-12ycwzo">
         <div class="css-14lm58u">
            <button aria-disabled="false" data-button-shape="default" data-button-size="default" type="submit" class="css-1hdxwtb">
               <div class="css-2hxqhm"><span class="gui css-1035bwx"><span class="css-1ssv12i">Primary Action</span>Verify</span></div>
            </button>
         </div>
         <div class="css-1kvfakz">
            <div class="css-vurnku">
               <button aria-disabled="false" data-button-shape="default" data-button-size="default" type="button" aria-controls="collapsible-content-2" aria-expanded="false" id="collapsible-control-1" class="css-h3x0sc">
                  <div class="css-2hxqhm">
                     <div data-test-id="expansion-panel-title" class="css-13vvbhv">
                        <div class="gui css-1f0d947">
                           Trouble logging in?
                           <div class="css-1roxkir">
                              <div class="css-463jce" data-test-id="expansion-panel-title-icon">
                                 <svg viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="chevronDown" height="12px" width="12px" stroke="var(--theme-ui-colors-icon)">
                                    <path d="M2 4L6 8L10 4" stroke="current" stroke-width="2"></path>
                                 </svg>
                              </div>
                           </div>
                        </div>
                     </div>
                  </div>
               </button>
            </div>
         </div>
      </div>
   </div>
</form>

[garrett]

I guess this is a request to change

<input type="password" class="form-control" id="conversation-input" autocomplete="one-time-code">

(@ https://github.com/cockpit-project/cockpit/blob/main/pkg/static/login.html#L114)

to

<input type="text" class="form-control" id="conversation-input" autocomplete="one-time-code">

?

(That is, to change the one-time-code to type of text instead of password.)

[CuckooEXE]

I think? Again, not a web designer and I don't have the facilities to build/test this myself, but that looks like it would do it

[garrett]

We don't have Macs to test the change, so I can't say if it'd work or not. I don't think OTPs should be marked as password, however, and examples all seem to use type of text, not password.

• https://developer.mozilla.org/en-US/docs/Web/API/WebOTP_API#examples
• https://web.dev/articles/sms-otp-form#checklist

We might also want to consider inputmode="numeric", and perhaps pattern and/ore required, depending on context.

Since it's the login page, I don't want to accidentally break things. When changing it, @martinpitt and/or @mvollmer need to be involved.