Mask passwords in server manager (#190)

* mask password in server connections * add button to show or hide password * remove unused var * remove disable on mask button * remove password reveal control from ms edge * add a comment * small formatting fix * actually remove password reveal control from ms edge * mask password in server list * Fix server path redaction matching port number * Move password show/hide button to password input --------- Co-authored-by: evan.lightcap <[email protected]> Co-authored-by: mircearoata <[email protected]>
satisfactorymodding · Jun 10, 2024 · fe68238 · fe68238
1 parent 0d8672d
commit fe68238
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 7 deletions.
diff --git a/frontend/src/_global.postcss b/frontend/src/_global.postcss
@@ -137,3 +137,7 @@ button {
     margin-inline-start: 40px;
   }
 }
+
+::-ms-reveal {
+    display: none;
+}
diff --git a/frontend/src/lib/components/modals/ServerManager.svelte b/frontend/src/lib/components/modals/ServerManager.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { mdiAlert, mdiLoading, mdiServerNetwork, mdiTrashCan } from '@mdi/js';
+  import { mdiAlert, mdiEyeOffOutline, mdiEyeOutline, mdiLoading, mdiServerNetwork, mdiTrashCan } from '@mdi/js';
   import { getTranslate } from '@tolgee/svelte';
   import _ from 'lodash';
 
@@ -54,6 +54,7 @@
   let advancedMode = false;
 
   let addInProgress = false;
+  let maskPassword = true;
 
   $: authString = encodeURIComponent(newServerUsername) + (newServerPassword ? ':' + encodeURIComponent(newServerPassword) : '');
   $: actualPort = newRemoteType.type === 'remote' ? (newServerPort.length > 0 ? newServerPort : newRemoteType.defaultPort) : '';
@@ -161,6 +162,10 @@
     },
     placement: 'bottom',
   } as PopupSettings]).reduce((acc, [k, v]) => ({ ...acc, [k as string]: v as PopupSettings }), {} as Record<string, PopupSettings>);
+
+  function redactRemoteURL(path: string) {
+    return path.replace(/(?<=.+:\/\/)(?:(.+?)(?::.*?)?)?(?=@)/, '$1:********');
+  }
 </script>
 
 
@@ -175,7 +180,7 @@
           {#each $remoteServers as remoteServer}
             <tr>
               <td class="break-all">{$installsMetadata[remoteServer].info?.launcher}</td>
-              <td class="break-all">{remoteServer}</td>
+              <td class="break-all">{redactRemoteURL(remoteServer)}</td>
               <td>
                 {#if $installsMetadata[remoteServer]?.state === ficsitcli.InstallState.VALID}
                   {$installsMetadata[remoteServer].info?.type}
@@ -265,11 +270,25 @@
             placeholder={$t('server-manager.username-placeholder', 'username')}
             type="text"
             bind:value={newServerUsername}/>
-          <input
-            class="input px-4 h-full"
-            placeholder={$t('server-manager.password-placeholder', 'password')}
-            type="text"
-            bind:value={newServerPassword}/>
+          <div class="input-group h-full grid-cols-[1fr_auto]">
+            <!-- This is a conditional because svelte doesn't allow dynamic type with bind:value -->
+            {#if maskPassword}
+              <input
+                class="px-4 h-full !outline-none"
+                placeholder={$t('server-manager.password-placeholder', 'password')}
+                type="password"
+                bind:value={newServerPassword}/>
+            {:else}
+              <input
+                class="px-4 h-full !outline-none"
+                placeholder={$t('server-manager.password-placeholder', 'password')}
+                type="text"
+                bind:value={newServerPassword}/>
+            {/if}
+            <button class="!outline-none" on:click={() => maskPassword = !maskPassword}>
+              <SvgIcon class="!w-4 !h-4" icon={maskPassword ? mdiEyeOutline : mdiEyeOffOutline} />
+            </button>
+          </div>
           <input
             class="input px-4 h-full sm:col-start-2"
             placeholder={$t('server-manager.host-placeholder', 'host')}