Add basic daemon connection authentication

ext/src/ui/options/Bridge.svelte

@@ -4,7 +4,11 @@
 
     import LoadingIndicator from "../LoadingIndicator.svelte";
 
-    import bridge, { BridgeInfo, BridgeTimedOutError } from "../../lib/bridge";
+    import bridge, {
+        BridgeInfo,
+        BridgeTimedOutError,
+        BridgeAuthenticationError
+    } from "../../lib/bridge";
     import logger from "../../lib/logger";
 
     import { Options } from "../../lib/options";
@@ -14,42 +18,54 @@
     export let opts: Options;
 
     let bridgeInfo: Nullable<BridgeInfo> = null;
+    let bridgeInfoError: Nullable<Error> = null;
     let isLoadingInfo = true;
-    let isLoadingInfoTimedOut = false;
 
     // Status
-    let infoClass = "bridge__info";
     let statusIcon: string;
     let statusTitle: string;
     let statusText: Nullable<string> = null;
 
-    onMount(async () => {
+    async function checkBridgeStatus() {
+        // Reset state
+        bridgeInfo = null;
+        bridgeInfoError = null;
+        isLoadingInfo = true;
+        statusText = null;
+
         try {
             bridgeInfo = await bridge.getInfo();
         } catch (err) {
             logger.error("Failed to fetch bridge/platform info.");
-            if (err instanceof BridgeTimedOutError) {
-                isLoadingInfoTimedOut = true;
+            if (err instanceof Error) {
+                bridgeInfoError = err;
             }
         }
 
         isLoadingInfo = false;
 
-        infoClass += ` ${
-            !bridgeInfo
-                ? isLoadingInfoTimedOut
-                    ? "bridge__info--timed-out"
-                    : "bridge__info--not-found"
-                : "bridge__info--found"
-        }`;
-
         if (!bridgeInfo) {
-            statusIcon = "assets/icons8-cancel-120.png";
-            statusTitle = _("optionsBridgeNotFoundStatusTitle");
-            statusText = _("optionsBridgeNotFoundStatusText");
-        } else if (isLoadingInfoTimedOut) {
-            statusIcon = "assets/icons8-warn-120.png";
-            statusTitle = _("optionsBridgeIssueStatusTitle");
+            if (
+                bridgeInfoError instanceof BridgeTimedOutError ||
+                bridgeInfoError instanceof BridgeAuthenticationError
+            ) {
+                statusIcon = "assets/icons8-warn-120.png";
+                statusTitle = _("optionsBridgeIssueStatusTitle");
+
+                if (bridgeInfoError instanceof BridgeTimedOutError) {
+                    statusText = _("optionsBridgeIssueStatusTextTimedOut");
+                } else if (
+                    bridgeInfoError instanceof BridgeAuthenticationError
+                ) {
+                    statusText = _(
+                        "optionsBridgeIssueStatusTextAuthentication"
+                    );
+                }
+            } else {
+                statusIcon = "assets/icons8-cancel-120.png";
+                statusTitle = _("optionsBridgeNotFoundStatusTitle");
+                statusText = _("optionsBridgeNotFoundStatusText");
+            }
         } else {
             if (bridgeInfo.isVersionCompatible) {
                 statusIcon = "assets/icons8-ok-120.png";
@@ -59,6 +75,10 @@
                 statusTitle = _("optionsBridgeIssueStatusTitle");
             }
         }
+    }
+
+    onMount(() => {
+        checkBridgeStatus();
     });
 
     // Updates
@@ -155,7 +175,11 @@
             <progress />
         </div>
     {:else}
-        <div class={infoClass}>
+        <div
+            class="bridge__info"
+            class:bridge__info--found={!!bridgeInfo}
+            class:bridge__info--error={!bridgeInfo}
+        >
             <div class="bridge__status">
                 <img
                     class="bridge__status-icon"
@@ -168,6 +192,15 @@
                 {#if statusText}
                     <p class="bridge__status-text">{statusText}</p>
                 {/if}
+
+                <button
+                    type="button"
+                    class="ghost bridge__refresh"
+                    title={_("optionsBridgeRefresh")}
+                    on:click={checkBridgeStatus}
+                >
+                    <img src="assets/photon_refresh.svg" alt="icon, refresh" />
+                </button>
             </div>
 
             {#if bridgeInfo}
@@ -209,44 +242,59 @@
                 </table>
             {/if}
         </div>
+    {/if}
 
-        <div class="bridge__options">
-            <div class="option option--inline">
-                <div class="option__control">
-                    <input
-                        name="bridgeBackupEnabled"
-                        id="bridgeBackupEnabled"
-                        type="checkbox"
-                        bind:checked={opts.bridgeBackupEnabled}
-                    />
-                </div>
-                <label class="option__label" for="bridgeBackupEnabled">
-                    {backupMessageStart}
-                    <input
-                        class="bridge__backup-host"
-                        name="bridgeBackupHost"
-                        type="text"
-                        required
-                        bind:value={opts.bridgeBackupHost}
-                    />
-                    :
-                    <input
-                        class="bridge__backup-port"
-                        name="bridgeBackupPort"
-                        type="number"
-                        required
-                        min="1025"
-                        max="65535"
-                        bind:value={opts.bridgeBackupPort}
-                    />
-                    {backupMessageEnd}
-                </label>
-                <div class="option__description">
-                    {_("optionsBridgeBackupEnabledDescription")}
-                </div>
+    <div class="bridge__options">
+        <div class="option option--inline">
+            <div class="option__control">
+                <input
+                    name="bridgeBackupEnabled"
+                    id="bridgeBackupEnabled"
+                    type="checkbox"
+                    bind:checked={opts.bridgeBackupEnabled}
+                />
+            </div>
+            <label class="option__label" for="bridgeBackupEnabled">
+                {backupMessageStart}
+                <input
+                    class="bridge__backup-host"
+                    name="bridgeBackupHost"
+                    type="text"
+                    required
+                    bind:value={opts.bridgeBackupHost}
+                />
+                :
+                <input
+                    class="bridge__backup-port"
+                    name="bridgeBackupPort"
+                    type="number"
+                    required
+                    min="1025"
+                    max="65535"
+                    bind:value={opts.bridgeBackupPort}
+                />
+                {backupMessageEnd}
+
+                {#if opts.showAdvancedOptions}
+                    <label class="bridge__backup-password">
+                        {_("optionsBridgeBackupPassword")}
+
+                        <input
+                            id="bridgeBackupPassword"
+                            placeholder="Password"
+                            type="password"
+                            bind:value={opts.bridgeBackupPassword}
+                        />
+                    </label>
+                {/if}
+            </label>
+            <div class="option__description">
+                {_("optionsBridgeBackupEnabledDescription")}
             </div>
         </div>
+    </div>
 
+    {#if !isLoadingInfo}
         <div class="bridge__update-info">
             {#if isUpdateAvailable}
                 <div class="bridge__update">

ext/src/ui/options/assets/photon_refresh.svg

@@ -0,0 +1,13 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+    <style>
+        @media (prefers-color-scheme: dark) {
+            path {
+                fill: rgba(249, 249, 250, .8);
+            }
+        }
+    </style>
+    <path fill="rgba(12, 12, 13, .8)" d="M15 1a1 1 0 0 0-1 1v2.418A6.995 6.995 0 1 0 8 15a6.954 6.954 0 0 0 4.95-2.05 1 1 0 0 0-1.414-1.414A5.019 5.019 0 1 1 12.549 6H10a1 1 0 0 0 0 2h5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1z"></path>
+</svg>

ext/src/ui/options/styles/index.css

@@ -99,16 +99,10 @@ button.ghost:not(:hover) {
 .bridge__info {
     display: flex;
     padding-inline-start: 25px;
+    position: relative;
 }
 
-.bridge__status {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    margin-inline-end: 25px;
-}
-
-.bridge__info--not-found {
+.bridge__info--error {
     padding-inline-end: 25px;
 }
 .bridge__info--found .bridge__status {
@@ -116,13 +110,36 @@ button.ghost:not(:hover) {
     padding-inline-end: 25px;
 }
 
-.bridge__info--timed-out .bridge__status {
-    display: flex;
-    flex-direction: row;
-    gap: 20px;
+.bridge__info--error .bridge__status {
+    display: grid;
+    grid-template-columns: min-content 1fr;
+    grid-template-rows: min-content 1fr;
+    grid-template-areas:
+        "status-icon status-title"
+        "status-icon status-text";
+    gap: 5px 20px;
 }
-.bridge__info--timed-out .bridge__status-title {
-    font-size: 1.75em;
+.bridge__info--found .bridge__status-icon {
+    margin-block-end: 5px;
+}
+.bridge__info--error .bridge__status-icon {
+    grid-area: status-icon;
+}
+.bridge__info--error .bridge__status-title {
+    grid-area: status-title;
+    white-space: normal;
+}
+.bridge__info--error .bridge__status-text {
+    grid-area: status-text;
+    margin-top: initial;
+    align-self: start;
+}
+
+.bridge__status {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    margin-inline-end: 25px;
 }
 
 .bridge__status-title {
@@ -138,31 +155,6 @@ button.ghost:not(:hover) {
     font-size: 1.15em;
     text-align: center;
 }
-
-.bridge__info--not-found .bridge__status {
-    display: grid;
-    grid-template-columns: min-content 1fr;
-    grid-template-rows: min-content min-content;
-    grid-template-areas:
-        "status-icon status-title"
-        "status-icon status-text";
-}
-.bridge__info--found .bridge__status-icon {
-    margin-block-end: 5px;
-}
-.bridge__info--not-found .bridge__status-icon {
-    grid-area: status-icon;
-    margin-inline-end: 10px;
-}
-.bridge__info--not-found .bridge__status-title {
-    grid-area: status-title;
-    white-space: normal;
-}
-.bridge__info--not-found .bridge__status-text {
-    grid-area: status-text;
-    margin-top: initial;
-}
-
 .bridge__stats {
     border-collapse: collapse;
     border-spacing: 0;
@@ -176,6 +168,12 @@ button.ghost:not(:hover) {
     white-space: nowrap;
 }
 
+.bridge__refresh {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
 .bridge__options {
     margin-top: 30px;
 }
@@ -215,10 +213,14 @@ button.ghost:not(:hover) {
 .bridge__backup-host {
     width: 125px;
 }
-
 .bridge__backup-port {
     width: 75px;
 }
+.bridge__backup-password {
+    display: block;
+    margin-left: 20px;
+    margin-top: 5px;
+}
 
 .category {
     border: initial;
@@ -423,6 +425,9 @@ button.ghost:not(:hover) {
 input[id^="customUserAgentString-"] {
     width: -moz-available;
 }
+#bridgeBackupPassword {
+    margin-inline-start: 5px;
+}
 
 @media (prefers-color-scheme: dark) {
     .whitelist__item:nth-child(even) {