[FIX] point_of_sale: display PIN as •'s across all browsers

Before this the -webkit-text-security CSS property was used. This, as
the name implies, only works in webkit based browsers. Instead we can
just render the PIN code as •'s since the value of the inputBuffer is
used (not the rendered text) when checking the PIN.

Fixes #16458

addons/point_of_sale/static/src/css/pos.css

@@ -2328,7 +2328,6 @@ td {
 }
 .pos .popup-password .popup-input {
     width: 70%;
-    -webkit-text-security: disc;
  }
 
 .pos .popup .body ul,

addons/point_of_sale/static/src/js/popups.js

@@ -238,6 +238,11 @@ var PasswordPopupWidget = NumberPopupWidget.extend({
         this._super();
         this.$('.popup').addClass('popup-password');
     },
+    click_numpad: function(event){
+        this._super.apply(this, arguments);
+        var $value = this.$('.value');
+        $value.text($value.text().replace(/./g, '•'));
+    },
 });
 gui.define_popup({name:'password', widget: PasswordPopupWidget});