internationalization

src/ui/common.tis

@@ -10,6 +10,15 @@ var is_file_transfer;
 var is_xfce = false;
 try { is_xfce = handler.is_xfce(); } catch(e) {}
 
+
+function translate(name) {
+    try {
+        return handler.t(name);
+    } catch(_) {
+        return name;
+    }
+}
+
 function hashCode(str) {
   var hash = 160 << 16 + 114 << 8 + 91; 
   for (var i = 0; i < str.length; i += 1) {
@@ -207,7 +216,7 @@ function getMsgboxParams() {
     return msgbox_params; 
 }
 
-function msgbox(type, title, text, callback, height, width, retry=0) {
+function msgbox(type, title, text, callback, height, width, retry=0, contentStyle="") {
     var has_msgbox = msgbox_params != null;
     if (!has_msgbox && !type) return;
     var remember = false;
@@ -217,7 +226,8 @@ function msgbox(type, title, text, callback, height, width, retry=0) {
     msgbox_params =  {
         remember: remember, type: type, text: text, title: title,
         getParams: getMsgboxParams,
-        callback: callback, retry: retry,
+        callback: callback, translate: translate,
+        retry: retry, contentStyle: contentStyle,
     };
     if (has_msgbox) return;
     var dialog = {
@@ -239,7 +249,7 @@ function msgbox(type, title, text, callback, height, width, retry=0) {
     } else if (res == "!alive") {
         // do nothing
     } else if (res.type == "input-password") {
-        if (!is_port_forward) connecting();
+        if (!is_port_forward) handler.msgbox("connecting", "Connecting...", "Logging in...");
         handler.login(res.password, res.remember);
     } else if (res.reconnect) {
         if (!is_port_forward) connecting();
@@ -251,10 +261,10 @@ function connecting() {
     handler.msgbox("connecting", "Connecting...", "Connection in progress. Please wait.");
 }
 
-handler.msgbox = function(type, title, text, callback=null, height=180, width=500, retry=0) {
+handler.msgbox = function(type, title, text, callback=null, height=180, width=500, retry=0, contentStyle="") {
     // directly call view.Dialog from native may crash, add timer here, seem safe
     // too short time, msgbox won't get focus, per my test, 150 is almost minimun
-    self.timer(150ms, function() { msgbox(type, title, text, callback, height, width, retry); });
+    self.timer(150ms, function() { msgbox(type, title, text, callback, height, width, retry, contentStyle); });
 }
 
 handler.block_msgbox = function(type, title, text, callback=null, height=180, width=500, retry=0) {
@@ -312,6 +322,47 @@ function Progress()
     this.value = "";
 }
 
+var svg_eye_cross = <svg viewBox="0 -21 511.96 511">
+<path d="m506.68 261.88c7.043-16.984 7.043-36.461 0-53.461-41.621-100.4-140.03-165.27-250.71-165.27-46.484 0-90.797 11.453-129.64 32.191l-68.605-68.609c-8.3438-8.3398-21.824-8.3398-30.168 0-8.3398 8.3398-8.3398 21.824 0 30.164l271.49 271.49 86.484 86.488 68.676 68.672c4.1797 4.1797 9.6406 6.2695 15.102 6.2695 5.4609 0 10.922-2.0898 15.082-6.25 8.3438-8.3398 8.3438-21.824 0-30.164l-62.145-62.145c36.633-27.883 66.094-65.109 84.438-109.38zm-293.91-100.1c12.648-7.5742 27.391-11.969 43.199-11.969 47.062 0 85.332 38.273 85.332 85.336 0 15.805-4.3945 30.547-11.969 43.199z"/>
+<path d="m255.97 320.48c-47.062 0-85.336-38.273-85.336-85.332 0-3.0938 0.59766-6.0195 0.91797-9.0039l-106.15-106.16c-25.344 24.707-46.059 54.465-60.117 88.43-7.043 16.98-7.043 36.457 0 53.461 41.598 100.39 140.01 165.27 250.69 165.27 34.496 0 67.797-6.3164 98.559-18.027l-89.559-89.559c-2.9844 0.32031-5.9062 0.91797-9 0.91797z"/>
+</svg>;
+
+class PasswordComponent: Reactor.Component {
+    this var visible = false;
+    this var value = '';
+    this var name = 'password';
+    
+    function this(params) {
+      if (params && params.value) {
+          this.value = params.value;
+      }
+      if (params && params.name) {
+          this.name = params.name;
+      }
+    }
+
+    function render() {
+        return <div .password>
+            <input name={this.name} value={this.value} type={this.visible ? "text" : "password"} .outline-focus />
+            {this.visible ? svg_eye_cross : svg_eye}
+        </div>;
+    }
+
+    event click $(svg) {
+        var el = this.$(input);
+        var value = el.value;
+        var start = el.xcall(#selectionStart) || 0;
+        var end = el.xcall(#selectionEnd);
+        this.update({ visible: !this.visible });
+        self.timer(30ms, function() {
+            var el = this.$(input);
+            view.focus = el;
+            el.value = value;
+            el.xcall(#setSelection, start, end);
+        });
+    }
+}
+
 function isReasonableSize(r) {
     var x = r[0];
     var y = r[1];