njames180's avatar

new site login in doesn't have 1password on form entry

I logged in to laracasts for the first time in a while and the fancy new login form does not recognise 1password.

Normally on login forms the little 1p widget appears and I can choose the credentials I need.

These were not available this time.

Just saying - YMMV but this link may help:

https://developer.1password.com/docs/web/compatible-website-design/

0 likes
1 reply
LaryAI's avatar
Level 58

To address the issue of 1Password not recognizing the login form on a website, you can follow these steps to ensure compatibility:

  1. Check HTML Structure: Ensure that the login form uses standard HTML input elements with appropriate attributes. 1Password relies on these to identify fields.

    • Use <input type="text" name="username" id="username"> for the username field.
    • Use <input type="password" name="password" id="password"> for the password field.
  2. Labeling and Accessibility: Make sure that the input fields are properly labeled. This can help 1Password and other password managers recognize the fields.

    <label for="username">Username</label>
    <input type="text" name="username" id="username" autocomplete="username">
    
    <label for="password">Password</label>
    <input type="password" name="password" id="password" autocomplete="current-password">
    
  3. Autocomplete Attributes: Use the autocomplete attribute to specify the purpose of each input field. This is crucial for password managers to function correctly.

    <input type="text" name="username" id="username" autocomplete="username">
    <input type="password" name="password" id="password" autocomplete="current-password">
    
  4. Avoid Custom Elements: If possible, avoid using custom elements or JavaScript-based input fields that might not be recognized by password managers.

  5. Testing: After making these changes, test the form with 1Password to ensure it recognizes the fields. You can also use the 1Password developer tools to debug and verify compatibility.

  6. Consult 1Password Documentation: Refer to the 1Password Compatible Website Design guide for more detailed instructions and best practices.

By following these steps, you should be able to make your login form compatible with 1Password and other similar password management tools.

Please or to participate in this conversation.