web/satellite: show full access credentials when not hidden

Show full AG, API key or S3 credentials when not hidden Issue #5848 Change-Id: I9e0903ed34b6f0068e9cef7f048553441ed98fc3
storj · Jun 21, 2023 · 05f92fe · 05f92fe
1 parent e06b94d
commit 05f92fe
Showing 1 changed file with 11 additions and 3 deletions.
diff --git 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;
 }