Update web UI to use localization for single device pairing/unpairing

xanderfrangos · Apr 17, 2024 · 5ef7b03 · 5ef7b03
1 parent da936b8
commit 5ef7b03
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 20 deletions.
diff --git a/src_assets/common/assets/web/pin.html b/src_assets/common/assets/web/pin.html
@@ -8,11 +8,11 @@
 <body id="app" v-cloak>
   <Navbar></Navbar>
   <div id="content" class="container">
-    <h1 class="my-4">{{ $t('pin.pin_pairing') }}</h1>
+    <h1 class="my-4 text-center">{{ $t('pin.pin_pairing') }}</h1>
     <form action="" class="form d-flex flex-column align-items-center" id="form">
       <div class="card flex-column d-flex p-4 mb-4">
-        <input type="text" pattern="\d*" placeholder="PIN" id="pin-input" class="form-control my-4" />
-        <input type="text" placeholder="Device Name" id="name-input" class="form-control my-4" required />
+        <input type="text" pattern="\d*" placeholder="PIN" id="pin-input" class="form-control mt-2" required />
+        <input type="text" :placeholder="`${$t('pin.device_name')}`" id="name-input" class="form-control my-4" required />
         <button class="btn btn-primary">{{ $t('pin.send') }}</button>
       </div>
       <div class="alert alert-warning">

diff --git a/src_assets/common/assets/web/public/assets/locale/en.json b/src_assets/common/assets/web/public/assets/locale/en.json
@@ -6,6 +6,7 @@
     "cancel": "Cancel",
     "disabled": "Disabled",
     "disabled_def": "Disabled (default)",
+    "dismiss": "Dismiss",
     "do_cmd": "Do Command",
     "elevated": "Elevated",
     "enabled": "Enabled",
@@ -336,6 +337,7 @@
     "success_msg": "Password has been changed successfully! This page will reload soon, your browser will ask you for the new credentials."
   },
   "pin": {
+    "device_name": "Device Name",
     "pair_failure": "Pairing Failed: Check if the PIN is typed correctly",
     "pair_success": "Success! Please check Moonlight to continue",
     "pin_pairing": "PIN Pairing",
@@ -364,10 +366,13 @@
     "restart_sunshine_desc": "If Sunshine isn't working properly, you can try restarting it. This will terminate any running sessions.",
     "restart_sunshine_success": "Sunshine is restarting",
     "troubleshooting": "Troubleshooting",
-    "unpair_all": "Unpair All",
-    "unpair_all_desc": "Remove all your paired devices",
+    "unpair_all": "Unpair Devices",
+    "unpair_all_desc": "Remove your paired devices. Unpaired devices with an active session will remain connected, but cannot start or resume a session.",
     "unpair_all_error": "Error while unpairing",
-    "unpair_all_success": "Unpair Successful!"
+    "unpair_all_success": "However, the device(s) may still be in an active session. Use the 'Force Close' button above to end any open sessions.",
+    "unpair_single_no_devices": "There are no paired devices.",
+    "unpair_single_unknown": "Unknown Client",
+    "unpair_title": "Unpair Devices"
   },
   "welcome": {
     "confirm_password": "Confirm password",

diff --git a/src_assets/common/assets/web/troubleshooting.html b/src_assets/common/assets/web/troubleshooting.html
@@ -75,37 +75,34 @@ <h2 id="restart">{{ $t('troubleshooting.restart_sunshine') }}</h2>
         </div>
       </div>
     </div>
-    <!-- Unpair all Clients -->
+    <!-- Unpair Clients -->
     <div class="card my-4">
       <div class="card-body">
         <div class="p-2">
           <div class="d-flex justify-content-end align-items-center">
-            <h2 id="unpair">{{ $t('troubleshooting.unpair_all') }}</h2>
+            <h2 id="unpair" class="text-center me-auto">{{ $t('troubleshooting.unpair_title') }}</h2>
             <button class="btn btn-danger" :disabled="unpairAllPressed" @click="unpairAll">
               {{ $t('troubleshooting.unpair_all') }}
             </button>
           </div>
+          <br />
+          <p class="mb-0">{{ $t('troubleshooting.unpair_all_desc') }}</p>
           <div id="apply-alert" class="alert alert-success d-flex align-items-center mt-3" :style="{ 'display': (showApplyMessage ? 'flex !important': 'none !important') }">
-            <div class="me-2"><b>Success!</b> Click 'Apply' to restart Sunshine and apply changes. This will terminate any running sessions.</div>
-            <button class="btn btn-success ms-auto apply" @click="clickedApplyBanner">Apply</button>
-          </div>
-          <div class="alert alert-success" v-if="unpairAllStatus === true">
-            {{ $t('troubleshooting.unpair_all_success') }}
+            <div class="me-2"><b>{{ $t('_common.success') }}</b> {{ $t('troubleshooting.unpair_all_success') }}</div>
+            <button class="btn btn-success ms-auto apply" @click="clickedApplyBanner">{{ $t('_common.dismiss') }}</button>
           </div>
           <div class="alert alert-danger" v-if="unpairAllStatus === false">
             {{ $t('troubleshooting.unpair_all_error') }}
           </div>
-          <br />
-          <p class="mb-0">{{ $t('troubleshooting.unpair_all_desc') }}</p>
         </div>
       </div>
       <ul id="client-list" class="list-group list-group-flush list-group-item-light" v-if="clients && clients.length > 0">
         <div v-for="client in clients" class="list-group-item d-flex">
-          <div class="p-2 flex-grow-1">{{client.name != "" ? client.name : "Unknown Client"}}</div><div class="me-2 ms-auto btn btn-danger" @click="unpairSingle(client.uuid)"><i class="fas fa-trash"></i></div>
+          <div class="p-2 flex-grow-1">{{client.name != "" ? client.name : $t('troubleshooting.unpair_single_unknown')}}</div><div class="me-2 ms-auto btn btn-danger" @click="unpairSingle(client.uuid)"><i class="fas fa-trash"></i></div>
         </div>
       </ul>
       <ul v-else class="list-group list-group-flush list-group-item-light">
-        <div class="list-group-item p-3 text-center"><em>There are no paired clients.</em></div>
+        <div class="list-group-item p-3 text-center"><em>{{ $t('troubleshooting.unpair_single_no_devices') }}</em></div>
       </ul>
 
     </div>
@@ -199,6 +196,7 @@ <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
               setTimeout(() => {
                 this.unpairAllStatus = null;
               }, 5000);
+              this.refreshClients();
             });
         },
         unpairSingle(uuid) {
@@ -221,9 +219,6 @@ <h2 id="logs">{{ $t('troubleshooting.logs') }}</h2>
         },
         clickedApplyBanner() {
           this.showApplyMessage = false;
-          fetch("/api/restart", {
-            method: "POST",
-          });
         },
         copyLogs() {
           navigator.clipboard.writeText(this.actualLogs);