Getting 1Password working on a network webapp (w/ AJAX)

Options
DragoslaV030
DragoslaV030
Community Member
in 1Password in the Browser

Hello,

I am trying to get 1Password working on a local network webapp that controls a 3d printer. (e.g. OctoPrint) I have made an implementation that triggers all the built-in browsers password manager. Since this is a single page application, we are using an AJAX form.

I have followed "How to design your website to work best with 1Password" but it seems that I cannot get 1password to play along.

Details of the implementation:
Commit: https://github.com/foosel/OctoPrint/commit/e52fbf061dde4639cb5ba81cdc73235e0cd46b7b

Causes of not working?
1. Autofill Attributes are not specific enough?
2. preventDefault in the submit event is blocking 1password?

Or am I missing something else?

Thanks in advance.

1Password Version: Not Provided
Extension Version: Not Provided
OS Version: Not Provided
Sync Type: Not Provided

Comments

  • jxpx777
    jxpx777
    1Password Alumni
    Options

    Hi, @DragoslaV030. Thanks for your post. We haven't always enjoyed such a friendly relationship with web developers, so for someone that's been around here more than a few years (like me), it's definitely not something we take for granted that you would reach out about making your site better for 1Password users. Seriously, thanks. :)

    I don't think you need the autocomplete="on" bit. This is the default and for that matter, browsers are now starting to ignore autocomplete="off". From the looks of things, your form is really nicely coded. Since you're monitoring for the submit event, I would remove the keyup handlers. Pressing return (keyCode 13) will trigger the submit event, so you can simplify that pathway.

    Our submit event handler is a capturing event handler at the document level, so we should get first crack at seeing the event. I'm not familiar with this particular JS framework (Doesn't look like React to me. Maybe Backbone or Ember? ¯\_(ツ)_/¯) but I would be curious to see how the event handlers that you specify with the event property are attached. Are they attached unobtrusively using addEventListener or are they inline with the markup as onkeyup or similar? My gut says to assume it's all done unobtrusively, but I would want to be double sure.

    Here's how we bind on the submit event: window.document.addEventListener("submit", handlerFunctionName, true); Can you add an additional event handler with the same pattern and see if it gets triggered with your current markup? This would let you know if there's something swallowing the event before it gets to the handler or if 1Password is especially ignoring it. (It shouldn't be ignoring it from what I can see given your markup there, but I've been wrong before… that one time… back in '88. :blush:) If you have a demo site up somewhere where I could take a closer look at it in action, that would be helpful. Should be pretty easy to spot at that point.

    --
    Jamie Phelps
    Code Wrangler @ AgileBits
    Fort Worth, Texas

  • DragoslaV030
    DragoslaV030
    Community Member
    Options

    Hi Jamie,

    Thank you very much for your response, first off also thank you for pointing out that legacy code I forgot to remove. We are using Knockout, and that is eventually looking for jquery (which on his turn uses addEventListener). After removing all the unnecessary code and installing 1password myself, I can now say it perfectly works fine.

    Thanks again for your help!

    With kind regards,
    Paul

  • jxpx777
    jxpx777
    1Password Alumni
    Options

    That's great, Paul! Thanks for letting us know. If you ever have any other questions or issues, please don't hesitate to let us know. :)

This discussion has been closed.