From 05f92fed11aaafe9e1d22ba9765a07c6e6104afc Mon Sep 17 00:00:00 2001
From: Lizzy Thomson <lizzythomson17@gmail.com>
Date: Thu, 1 Jun 2023 08:48:28 -0600
Subject: [PATCH] web/satellite: show full access credentials when not hidden

Show full AG, API key or S3 credentials when not hidden

Issue https://github.com/storj/storj/issues/5848

Change-Id: I9e0903ed34b6f0068e9cef7f048553441ed98fc3
---
 .../createFlow/components/ValueWithBlur.vue        | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/web/satellite/src/components/accessGrants/createFlow/components/ValueWithBlur.vue b/web/satellite/src/components/accessGrants/createFlow/components/ValueWithBlur.vue
index f43e44274..4d767d7ca 100644
--- a/web/satellite/src/components/accessGrants/createFlow/components/ValueWithBlur.vue
+++ b/web/satellite/src/components/accessGrants/createFlow/components/ValueWithBlur.vue
@@ -16,7 +16,7 @@
         </div>
         <div class="blured-container__wrap" :class="{justify: !isMnemonic}">
             <p v-if="isMnemonic" tabindex="0" class="blured-container__wrap__mnemonic" @keyup.space="onCopy">{{ value }}</p>
-            <p v-else tabindex="0" class="blured-container__wrap__text" @keyup.space="onCopy">{{ value }}</p>
+            <p v-else tabindex="0" class="blured-container__wrap__text" :class="{ shown: isValueShown }" @keyup.space="onCopy">{{ value }}</p>
             <div
                 v-if="!isMnemonic"
                 tabindex="0"
@@ -135,12 +135,12 @@ function onCopy(): void {
 
         &__text {
             font-size: 14px;
-            line-height: 20px;
             color: var(--c-grey-7);
+            margin-right: 16px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
-            margin-right: 16px;
+            line-height: 24px;
         }
 
         &__copy {
@@ -160,6 +160,14 @@ function onCopy(): void {
     }
 }
 
+.shown {
+    white-space: unset;
+    text-overflow: unset;
+    overflow-wrap: break-word;
+    text-align: left;
+    font-family: 'Courier', monospace;
+}
+
 .justify {
     justify-content: space-between;
 }