From ddbe10c2911da7f506d9a0cde6a3bb247c875e71 Mon Sep 17 00:00:00 2001
From: Jonas Herzig <me@johni0702.de>
Date: Sun, 3 May 2020 18:49:43 +0200
Subject: [PATCH] Allow a bunch more dialogs to be localized

---
 app/index.html | 131 +++++++++++++++++++++++++++++++++----------------
 app/index.js   |  43 ++++++++++++++++
 loc/en.json    |  43 +++++++++++++++-
 3 files changed, 173 insertions(+), 44 deletions(-)

diff --git a/app/index.html b/app/index.html
index 6ecfc9a..349addf 100644
--- a/app/index.html
+++ b/app/index.html
@@ -94,46 +94,64 @@
           </div>
           <form data-bind="submit: connect">
             <table>
-                <tr>
+                <tr class="reason">
                   <td colspan=2>
                     <!-- ko if: type() == 0 || type() == 8 -->
-                    The connection has been refused.
+                    <span class="refused">
+                      The connection has been refused.
+                    </span>
                     <!-- /ko -->
                     <!-- ko if: type() == 1 -->
-                    The server uses an incompatible version.
+                    <span class="version">
+                      The server uses an incompatible version.
+                    </span>
                     <!-- /ko -->
                     <!-- ko if: type() == 2 -->
-                    Your user name was rejected. Maybe try a different one?
+                    <span class="username">
+                      Your user name was rejected. Maybe try a different one?
+                    </span>
                     <!-- /ko -->
                     <!-- ko if: type() == 3 -->
-                    The given password is incorrect.
-                    The user name you have chosen requires a special one.
+                    <span class="userpassword">
+                      The given password is incorrect.
+                      The user name you have chosen requires a special one.
+                    </span>
                     <!-- /ko -->
                     <!-- ko if: type() == 4 -->
-                    The given password is incorrect.
+                    <span class="serverpassword">
+                      The given password is incorrect.
+                    </span>
                     <!-- /ko -->
                     <!-- ko if: type() == 5 -->
-                    The user name you have chosen is already in use.
+                    <span class="username-in-use">
+                      The user name you have chosen is already in use.
+                    </span>
                     <!-- /ko -->
                     <!-- ko if: type() == 6 -->
-                    The server is full.
+                    <span class="full">
+                      The server is full.
+                    </span>
                     <!-- /ko -->
                     <!-- ko if: type() == 7 -->
-                    The server requires you to provide a client certificate
-                    which is not supported by this web application.
+                    <span class="clientcert">
+                      The server requires you to provide a client certificate
+                      which is not supported by this web application.
+                    </span>
                     <!-- /ko -->
                     <br>
-                    The server reports:
+                    <span class="server">
+                      The server reports:
+                    </span>
                     <br>
                     "<span class="connect-error-reason" data-bind="text: reason"></span>"
                   </td>
                 </tr>
                 <tr data-bind="if: type() == 2 || type() == 3 || type() == 5">
-                  <td>Username</td>
+                  <td class="alternate-username">Username</td>
                   <td><input id="username" type="text" data-bind="value: username" required></td>
                 </tr>
                 <tr data-bind="if: type() == 3 || type() == 4">
-                  <td>Password</td>
+                  <td class="alternate-password">Password</td>
                   <td><input id="password" type="password" data-bind="value: password" required></td>
                 </tr>
             </table>
@@ -284,80 +302,97 @@
       <img class="avatar-view" data-bind="visible: avatarView, attr: { src: avatarView },
                                           click: function () { avatarView(null) }"></img>
       <!-- ko with: userContextMenu -->
-      <ul class="context-menu" data-bind="if: target,
+      <ul class="context-menu user-context-menu" data-bind="if: target,
                                           style: { left: posX() + 'px',
                                                    top:  posY() + 'px' }">
 
         <!-- ko with: target -->
-        <li data-bind="css: { disabled: !canChangeMute() }">
+        <li data-bind="css: { disabled: !canChangeMute() }"
+            class="mute">
           Mute
         </li>
-        <li data-bind="css: { disabled: !canChangeDeafen() }">
+        <li data-bind="css: { disabled: !canChangeDeafen() }"
+            class="deafen">
           Deafen
         </li>
-        <li data-bind="css: { disabled: !canChangePrioritySpeaker() }">
+        <li data-bind="css: { disabled: !canChangePrioritySpeaker() }"
+            class="priority-speaker">
           Priority Speaker
         </li>
 
-        <li data-bind="css: { disabled: !canLocalMute() }">
+        <li data-bind="css: { disabled: !canLocalMute() }"
+            class="local-mute">
           Local Mute
         </li>
-        <li data-bind="css: { disabled: !canIgnoreMessages() }">
+        <li data-bind="css: { disabled: !canIgnoreMessages() }"
+            class="ignore-messages">
           Ignore Messages
         </li>
 
-        <li data-bind="css: { disabled: !canChangeComment() }, visible: comment">
+        <li data-bind="css: { disabled: !canChangeComment() }, visible: comment"
+            class="view-comment">
           View Comment
         </li>
         <!-- ko if: $data === $root.thisUser() -->
-        <li data-bind="css: { disabled: !canChangeComment() }, visible: true">
+        <li data-bind="css: { disabled: !canChangeComment() }, visible: true"
+            class="change-comment">
           Change Comment
         </li>
         <!-- /ko -->
         <!-- ko if: $data !== $root.thisUser() -->
-        <li data-bind="css: { disabled: !canChangeComment() }, visible: comment">
+        <li data-bind="css: { disabled: !canChangeComment() }, visible: comment"
+            class="reset-comment">
           Reset Comment
         </li>
         <!-- /ko -->
 
         <li data-bind="css: { disabled: !canChangeAvatar() }, visible: texture,
-                       click: viewAvatar">
+                       click: viewAvatar"
+            class="view-avatar">
           View Avatar
         </li>
         <!-- ko if: $data === $root.thisUser() -->
         <li data-bind="css: { disabled: !canChangeAvatar() }, visible: true,
-                       click: changeAvatar">
+                       click: changeAvatar"
+            class="change-avatar">
           Change Avatar
         </li>
         <!-- /ko -->
         <li data-bind="css: { disabled: !canChangeAvatar() }, visible: texture,
-                       click: removeAvatar">
+                       click: removeAvatar",
+            class="reset-avatar">
           Reset Avatar
         </li>
 
-        <li data-bind="css: { disabled: true }, visible: true">
+        <li data-bind="css: { disabled: true }, visible: true"
+            class="send-message">
           Send Message
         </li>
-        <li data-bind="css: { disabled: true }, visible: true">
+        <li data-bind="css: { disabled: true }, visible: true"
+            class="information">
           Information
         </li>
 
         <li data-bind="visible: $data === $root.thisUser(),
                        css: { checked: selfMute },
-                       click: toggleMute">
+                       click: toggleMute"
+            class="self-mute">
           Self Mute
         </li>
         <li data-bind="visible: $data === $root.thisUser(),
                        css: { checked: selfDeaf },
-                       click: toggleDeaf">
+                       click: toggleDeaf"
+            class="self-deafen">
           Self Deafen
         </li>
 
         <!-- ko if: $data !== $root.thisUser() -->
-        <li data-bind="css: { disabled: true }, visible: true">
+        <li data-bind="css: { disabled: true }, visible: true"
+            class="add-friend">
           Add Friend
         </li>
-        <li data-bind="css: { disabled: true }, visible: false">
+        <li data-bind="css: { disabled: true }, visible: false"
+            class="remove-friend">
           Remove Friend
         </li>
         <!-- /ko -->
@@ -366,43 +401,53 @@
       </ul>
       <!-- /ko -->
       <!-- ko with: channelContextMenu -->
-      <ul class="context-menu" data-bind="if: target,
+      <ul class="context-menu channel-context-menu" data-bind="if: target,
                                           style: { left: posX() + 'px',
                                                    top:  posY() + 'px' }">
 
         <!-- ko with: target -->
         <li data-bind="visible: users.indexOf($root.thisUser()) === -1,
                        css: { disabled: !canJoin() },
-                       click: $root.requestMove.bind($root, $root.thisUser())">
+                       click: $root.requestMove.bind($root, $root.thisUser())"
+            class="join">
           Join Channel
         </li>
-        <li data-bind="css: { disabled: !canAdd() }">
+        <li data-bind="css: { disabled: !canAdd() }"
+            class="add">
           Add
         </li>
-        <li data-bind="css: { disabled: !canEdit() }">
+        <li data-bind="css: { disabled: !canEdit() }"
+            class="edit">
           Edit
         </li>
-        <li data-bind="css: { disabled: !canRemove() }">
+        <li data-bind="css: { disabled: !canRemove() }"
+            class="remove">
           Remove
         </li>
 
-        <li data-bind="css: { disabled: !canLink() }">
+        <li data-bind="css: { disabled: !canLink() }"
+            class="link">
           Link
         </li>
-        <li data-bind="css: { disabled: !canUnlink() }">
+        <li data-bind="css: { disabled: !canUnlink() }"
+            class="unlink">
           Unlink
         </li>
-        <li data-bind="css: { disabled: !canUnlink() }">
+        <li data-bind="css: { disabled: !canUnlink() }"
+            class="unlink-all">
           Unlink All
         </li>
 
-        <li data-bind="css: { disabled: true }">
+        <li data-bind="css: { disabled: true }"
+            class="copy-mumble-url">
           Copy Mumble URL
         </li>
-        <li data-bind="css: { disabled: true }">
+        <li data-bind="css: { disabled: true }"
+            class="copy-mumble-web-url">
           Copy Mumble-Web URL
         </li>
-        <li data-bind="css: { disabled: !canSendMessage() }">
+        <li data-bind="css: { disabled: !canSendMessage() }"
+            class="send-message">
           Send Message
         </li>
 
diff --git a/app/index.js b/app/index.js
index 1070ac1..15c30d6 100644
--- a/app/index.js
+++ b/app/index.js
@@ -1051,6 +1051,49 @@ function translateEverything() {
   translatePiece('#connect-dialog_controls_add', 'textcontent', {}, 'connectdialog.add');
   translatePiece('#connect-dialog_controls_cancel', 'attribute', {'name': 'value'}, 'connectdialog.cancel');
   translatePiece('#connect-dialog_controls_connect', 'attribute', {'name': 'value'}, 'connectdialog.connect');
+  translatePiece('.connect-dialog.error-dialog .dialog-header', 'textcontent', {}, 'connectdialog.error.title');
+  translatePiece('.connect-dialog.error-dialog .reason .refused', 'textcontent', {}, 'connectdialog.error.reason.refused');
+  translatePiece('.connect-dialog.error-dialog .reason .version', 'textcontent', {}, 'connectdialog.error.reason.version');
+  translatePiece('.connect-dialog.error-dialog .reason .username', 'textcontent', {}, 'connectdialog.error.reason.username');
+  translatePiece('.connect-dialog.error-dialog .reason .userpassword', 'textcontent', {}, 'connectdialog.error.reason.userpassword');
+  translatePiece('.connect-dialog.error-dialog .reason .serverpassword', 'textcontent', {}, 'connectdialog.error.reason.serverpassword');
+  translatePiece('.connect-dialog.error-dialog .reason .username-in-use', 'textcontent', {}, 'connectdialog.error.reason.username_in_use');
+  translatePiece('.connect-dialog.error-dialog .reason .full', 'textcontent', {}, 'connectdialog.error.reason.full');
+  translatePiece('.connect-dialog.error-dialog .reason .clientcert', 'textcontent', {}, 'connectdialog.error.reason.clientcert');
+  translatePiece('.connect-dialog.error-dialog .reason .server', 'textcontent', {}, 'connectdialog.error.reason.server');
+  translatePiece('.connect-dialog.error-dialog .alternate-username', 'textcontent', {}, 'connectdialog.username');
+  translatePiece('.connect-dialog.error-dialog .alternate-password', 'textcontent', {}, 'connectdialog.password');
+  translatePiece('.connect-dialog.error-dialog .dialog-submit', 'attribute', {'name': 'value'}, 'connectdialog.error.retry');
+  translatePiece('.connect-dialog.error-dialog .dialog-close', 'attribute', {'name': 'value'}, 'connectdialog.error.cancel');
+  translatePiece('.join-dialog .dialog-header', 'textcontent', {}, 'joindialog.title');
+  translatePiece('.join-dialog .dialog-submit', 'attribute', {'name': 'value'}, 'joindialog.connect');
+  translatePiece('.user-context-menu .mute', 'textcontent', {}, 'contextmenu.mute');
+  translatePiece('.user-context-menu .deafen', 'textcontent', {}, 'contextmenu.deafen');
+  translatePiece('.user-context-menu .priority-speaker', 'textcontent', {}, 'usercontextmenu.priority_speaker');
+  translatePiece('.user-context-menu .local-mute', 'textcontent', {}, 'usercontextmenu.local_mute');
+  translatePiece('.user-context-menu .ignore-messages', 'textcontent', {}, 'usercontextmenu.ignore_messages');
+  translatePiece('.user-context-menu .view-comment', 'textcontent', {}, 'usercontextmenu.view_comment');
+  translatePiece('.user-context-menu .change-comment', 'textcontent', {}, 'usercontextmenu.change_comment');
+  translatePiece('.user-context-menu .reset-comment', 'textcontent', {}, 'usercontextmenu.reset_comment');
+  translatePiece('.user-context-menu .view-avatar', 'textcontent', {}, 'usercontextmenu.view_avatar');
+  translatePiece('.user-context-menu .change-avatar', 'textcontent', {}, 'usercontextmenu.change_avatar');
+  translatePiece('.user-context-menu .reset-avatar', 'textcontent', {}, 'usercontextmenu.reset_avatar');
+  translatePiece('.user-context-menu .send-message', 'textcontent', {}, 'usercontextmenu.send_message');
+  translatePiece('.user-context-menu .information', 'textcontent', {}, 'usercontextmenu.information');
+  translatePiece('.user-context-menu .self-mute', 'textcontent', {}, 'usercontextmenu.self_mute');
+  translatePiece('.user-context-menu .self-deafen', 'textcontent', {}, 'usercontextmenu.self_deafen');
+  translatePiece('.user-context-menu .add-friend', 'textcontent', {}, 'usercontextmenu.add_friend');
+  translatePiece('.user-context-menu .remove-friend', 'textcontent', {}, 'usercontextmenu.remove_friend');
+  translatePiece('.channel-context-menu .join', 'textcontent', {}, 'channelcontextmenu.join');
+  translatePiece('.channel-context-menu .add', 'textcontent', {}, 'channelcontextmenu.add');
+  translatePiece('.channel-context-menu .edit', 'textcontent', {}, 'channelcontextmenu.edit');
+  translatePiece('.channel-context-menu .remove', 'textcontent', {}, 'channelcontextmenu.remove');
+  translatePiece('.channel-context-menu .link', 'textcontent', {}, 'channelcontextmenu.link');
+  translatePiece('.channel-context-menu .unlink', 'textcontent', {}, 'channelcontextmenu.unlink');
+  translatePiece('.channel-context-menu .unlink-all', 'textcontent', {}, 'channelcontextmenu.unlink_all');
+  translatePiece('.channel-context-menu .copy-mumble-url', 'textcontent', {}, 'channelcontextmenu.copy_mumble_url');
+  translatePiece('.channel-context-menu .copy-mumble-web-url', 'textcontent', {}, 'channelcontextmenu.copy_mumble_web_url');
+  translatePiece('.channel-context-menu .send-message', 'textcontent', {}, 'channelcontextmenu.send_message');
 }
 
 async function main() {
diff --git a/loc/en.json b/loc/en.json
index 62c28f1..6b50d2e 100644
--- a/loc/en.json
+++ b/loc/en.json
@@ -8,6 +8,47 @@
   "connectdialog.remove": "Remove",
   "connectdialog.add": "Add",
   "connectdialog.cancel": "Cancel",
-  "connectdialog.connect": "Connect"
+  "connectdialog.connect": "Connect",
+  "connectdialog.error.title": "Failed to connect",
+  "connectdialog.error.reason.refused": "The connection has been refused.",
+  "connectdialog.error.reason.version": "The server uses an incompatible version.",
+  "connectdialog.error.reason.username": "Your user name was rejected. Maybe try a different one?",
+  "connectdialog.error.reason.userpassword": "The given password is incorrect.\nThe user name you have chosen requires a special one.",
+  "connectdialog.error.reason.serverpassword": "The given password is incorrect.",
+  "connectdialog.error.reason.username_in_use": "The user name you have chosen is already in use.",
+  "connectdialog.error.reason.full": "The server is full.",
+  "connectdialog.error.reason.clientcert": "The server requires you to provide a client certificate which is not supported by this web application.",
+  "connectdialog.error.reason.server": "The server reports:",
+  "connectdialog.error.retry": "Retry",
+  "connectdialog.error.cancel": "Cancel",
+  "joindialog.title": "Mumble Voice Conference",
+  "joindialog.connect": "Join Conference",
+  "usercontextmenu.mute": "Mute",
+  "usercontextmenu.deafen": "Deafen",
+  "usercontextmenu.priority_speaker": "Priority Speaker",
+  "usercontextmenu.local_mute": "Local Mute",
+  "usercontextmenu.ignore_messages": "Ignore Messages",
+  "usercontextmenu.view_comment": "View Comment",
+  "usercontextmenu.change_comment": "Change Comment",
+  "usercontextmenu.reset_comment": "Reset Comment",
+  "usercontextmenu.view_avatar": "View Avatar",
+  "usercontextmenu.change_avatar": "Change Avatar",
+  "usercontextmenu.reset_avatar": "Reset Avatar",
+  "usercontextmenu.send_message": "Send Message",
+  "usercontextmenu.information": "Information",
+  "usercontextmenu.self_mute": "Self Mute",
+  "usercontextmenu.self_deafen": "Self Deafen",
+  "usercontextmenu.add_friend": "Add Friend",
+  "usercontextmenu.remove_friend": "Remove Friend",
+  "channelcontextmenu.join": "Join Channel",
+  "channelcontextmenu.add": "Add",
+  "channelcontextmenu.edit": "Edit",
+  "channelcontextmenu.remove": "Remove",
+  "channelcontextmenu.link": "Link",
+  "channelcontextmenu.unlink": "Unlink",
+  "channelcontextmenu.unlink_all": "Unlink All",
+  "channelcontextmenu.copy_mumble_url": "Copy Mumble URL",
+  "channelcontextmenu.copy_mumble_web_url": "Copy Mumble-Web URL",
+  "channelcontextmenu.send_message": "Send Message"
 }