Improve display of data

7 files changed, 92 insertions, 23 deletions

diff --git a/assets/src/components/DataView.svelte b/assets/src/components/DataView.svelte
new file mode 100644
index 0000000..7955d84
--- /dev/null
+++ b/assets/src/components/DataView.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+    import data from "../stores/data";
+    import EyeOpenedIcon from "./icons/EyeOpenedIcon.svelte";
+    import EyeClosedIcon from "./icons/EyeClosedIcon.svelte";
+
+    let hidden = true;
+
+    function toggle() {
+        hidden = !hidden;
+    }
+</script>
+
+<div class="data-view">
+    <input type={hidden ? "password" : "text"} value={$data.data} readonly />
+    <button on:click={toggle} class="icon">
+        {#if hidden}
+            <EyeOpenedIcon color="black" />
+        {:else}
+            <EyeClosedIcon color="black" />
+        {/if}
+    </button>
+</div>
+
+<style>
+    .data-view {
+        font-size: 14px;
+        width: 100%;
+        box-sizing: border-box;
+        padding: 10px 20px;
+        display: flex;
+        align-items: center;
+    }
+
+    .icon {
+        border: none;
+        background: none;
+        display: flex;
+        align-items: center;
+    }
+
+    input {
+        flex: 1;
+        outline: none;
+        border: none;
+        padding: 0;
+    }
+</style>
diff --git a/assets/src/components/RequestPage.svelte b/assets/src/components/RequestPage.svelte
index d8cf31d..1297891 100644
--- a/assets/src/components/RequestPage.svelte
+++ b/assets/src/components/RequestPage.svelte
@@ -19,6 +19,10 @@
             background-color: white;
             color: black;
         }
+
+        .data-view {
+            border: solid 1px #cccccc;
+        }
     </style>
 </svelte:head>
 
diff --git a/assets/src/components/SharePage.svelte b/assets/src/components/SharePage.svelte
index 19138ef..dff6ba0 100644
--- a/assets/src/components/SharePage.svelte
+++ b/assets/src/components/SharePage.svelte
@@ -26,5 +26,10 @@
             background-color: black;
             color: white;
         }
+
+        .data-view {
+            background-color: white;
+            color: black;
+        }
     </style>
 </svelte:head>
diff --git a/assets/src/components/icons/EyeClosedIcon.svelte b/assets/src/components/icons/EyeClosedIcon.svelte
new file mode 100644
index 0000000..5da2405
--- /dev/null
+++ b/assets/src/components/icons/EyeClosedIcon.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let color: "white" | "black";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+>
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+        d="M9.342 18.782l-1.931-.518.787-2.939a10.988 10.988 0 0 1-3.237-1.872l-2.153 2.154-1.415-1.415 2.154-2.153a10.957 10.957 0 0 1-2.371-5.07l1.968-.359C3.903 10.812 7.579 14 12 14c4.42 0 8.097-3.188 8.856-7.39l1.968.358a10.957 10.957 0 0 1-2.37 5.071l2.153 2.153-1.415 1.415-2.153-2.154a10.988 10.988 0 0 1-3.237 1.872l.787 2.94-1.931.517-.788-2.94a11.072 11.072 0 0 1-3.74 0l-.788 2.94z"
+        fill={color}
+    />
+</svg>
diff --git a/assets/src/components/icons/EyeOpenedIcon.svelte b/assets/src/components/icons/EyeOpenedIcon.svelte
new file mode 100644
index 0000000..bb799fd
--- /dev/null
+++ b/assets/src/components/icons/EyeOpenedIcon.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+    export let color: "white" | "black";
+</script>
+
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="16"
+    height="16"
+>
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+        d="M1.181 12C2.121 6.88 6.608 3 12 3c5.392 0 9.878 3.88 10.819 9-.94 5.12-5.427 9-10.819 9-5.392 0-9.878-3.88-10.819-9zM12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0-2a3 3 0 1 1 0-6 3 3 0 0 1 0 6z"
+        fill={color}
+    />
+</svg>
diff --git a/assets/src/components/request/RequestStatus.svelte b/assets/src/components/request/RequestStatus.svelte
index b4c9ef9..16efad7 100644
--- a/assets/src/components/request/RequestStatus.svelte
+++ b/assets/src/components/request/RequestStatus.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-    import data from "../../stores/data";
     import {
         initializeRequest,
         OwnRequestState,
     } from "../../models/own_request";
     import { startRequestConnection } from "../../network/channel/request_connection";
+    import DataView from "../DataView.svelte";
 
     const request = initializeRequest();
     const state = request.state;
@@ -29,7 +29,7 @@
         Transferring...
     {:else}
         <p>Congratulations! You can access the received data below:</p>
-        <div class="data">{$data.data}</div>
+        <DataView />
     {/if}
 {:else if $state === OwnRequestState.DECLINED}
     <h1>Your request was <b>declined!</b></h1>
@@ -39,13 +39,3 @@
     <h1>Eek!</h1>
     <p>An error occured during your request.</p>
 {/if}
-
-<style>
-    .data {
-        font-size: 14px;
-        width: 100%;
-        border: solid 1px #cccccc;
-        padding: 10px 20px;
-        box-sizing: border-box;
-    }
-</style>
diff --git a/assets/src/components/share/ShareStatus.svelte b/assets/src/components/share/ShareStatus.svelte
index 15d1ee9..7c22a04 100644
--- a/assets/src/components/share/ShareStatus.svelte
+++ b/assets/src/components/share/ShareStatus.svelte
@@ -5,6 +5,7 @@
         getStateStore,
     } from "../../network/channel/connection";
     import data from "../../stores/data";
+    import DataView from "../DataView.svelte";
     import DataSelector from "./DataSelector.svelte";
 
     let connection = getStateStore();
@@ -23,8 +24,7 @@
             Your share is available under: <br />
             rook.rnrd.eu/<span>{getOwnToken()}</span>
         </p>
-        <!-- TODO: Display actual data. -->
-        <div class="data">••••••••••••••••••••••••••••••</div>
+        <DataView />
     {:else}
         <p>Connecting to signaling server...</p>
     {/if}
@@ -34,13 +34,4 @@
     span {
         color: white;
     }
-
-    .data {
-        font-size: 14px;
-        width: 100%;
-        background-color: white;
-        color: black;
-        padding: 10px 20px;
-        box-sizing: border-box;
-    }
 </style>