fix(i18n): update localization docs and js strings (LizardByte#2325)

docs/source/contributing/localization.rst

@@ -48,6 +48,11 @@ Extraction
       .. note:: The json keys should be sorted alphabetically. You can use `jsonabc <https://novicelab.org/jsonabc/>`__
          to sort the keys.
 
+      .. attention:: Due to the integration with Crowdin, it is important to only add strings to the `en.json` file,
+         and to not modify any other language files. After the PR is merged, the translations can take place
+         on `CrowdIn <https://translate.lizardbyte.dev/>`__. Once the translations are complete, a PR will be made
+         to merge the translations into Sunshine.
+
    - Use the string in a Vue component.
       .. code-block:: html
 
@@ -101,3 +106,8 @@ Extraction
       .. code-block:: bash
 
          python ./scripts/_locale.py --compile
+
+   .. attention:: Due to the integration with Crowdin, it is important to not include any extracted or compiled files in
+      Pull Requests. The files are automatically generated and updated by the workflow. Once the PR is merged, the
+      translations can take place on `CrowdIn <https://translate.lizardbyte.dev/>`__. Once the translations are
+      complete, a PR will be made to merge the translations into Sunshine.

src_assets/common/assets/web/pin.html

@@ -50,12 +50,12 @@ <h1 class="my-4">{{ $t('pin.pin_pairing') }}</h1>
         if (response.status.toString().toLowerCase() === "true") {
           document.querySelector(
             "#status"
-          ).innerHTML = `<div class="alert alert-success" role="alert">Success! Please check Moonlight to continue</div>`;
+          ).innerHTML = `<div class="alert alert-success" role="alert">$t('pin.pair_success')</div>`;
           document.querySelector("#pin-input").value = "";
         } else {
           document.querySelector(
             "#status"
-          ).innerHTML = `<div class="alert alert-danger" role="alert">Pairing Failed: Check if the PIN is typed correctly</div>`;
+          ).innerHTML = `<div class="alert alert-danger" role="alert">$t('pin.pair_failure')</div>`;
         }
       });
   });

src_assets/common/assets/web/public/assets/locale/en.json

@@ -336,6 +336,8 @@
     "success_msg": "Password has been changed successfully! This page will reload soon, your browser will ask you for the new credentials."
   },
   "pin": {
+    "pair_failure": "Pairing Failed: Check if the PIN is typed correctly",
+    "pair_success": "Success! Please check Moonlight to continue",
     "pin_pairing": "PIN Pairing",
     "send": "Send",
     "warning_msg": "Make sure you have access to the client you are pairing with. This software can give total control to your computer, so be careful!"