Replace sign_in.js by webcomponent

[jorg-vr]

This pull request replaces sign_in.j by a webcomponent. This is part of our js modernization.

I also added tabcompletion and higlighting matches to the datalist component. Which has a wider impact.

Old

New

Part of #3590

[lgtm-com]

This pull request introduces 1 alert when merging bdabab2 into 7231018 - view on LGTM.com

new alerts:

• 1 for Unused variable, import, function or class

[lgtm-com]

This pull request introduces 1 alert when merging 999109a into 7231018 - view on LGTM.com

new alerts:

• 1 for Unused variable, import, function or class

[bmesuere]

I'm a bit hesitant about adding this function because it's incomplete. (and in combination with the unsafeHTML function where it's called). Is there an alternative?

[jorg-vr]

I don't see a way without the unsafe html that also marks the search results. And as the institution names are user input we need some kind of html encoding.

This method is an often suggested solution:

• https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript
• https://stackoverflow.com/questions/24816/escaping-html-strings-with-jquery

Some indeed change more keys. I will add those. They are more relevant when the string is used within html tags. But for a general util method it should cover all cases.

There is weirdly no standard javascript method for this. JQuery and lodash provide solutions, but we dont want to include those.

This might be a better alternative:

  var text = document.createTextNode(html);
  var p = document.createElement('p');
  p.appendChild(text);
  return p.innerHTML;
}```

[bmesuere]

Soon™️ https://developer.mozilla.org/en-US/docs/Web/API/HTML_Sanitizer_API