closes #1706

frontend/projects/ui/src/app/pages/apps-routes/app-properties/app-properties.page.html

@@ -75,7 +75,7 @@
             <h2>{{ prop.key }}</h2>
             <p class="courier-new">
               {{ prop.value.masked && !unmasked[prop.key] ? (prop.value.value |
-              mask ) : prop.value.value }}
+              mask : 64) : prop.value.value }}
             </p>
           </ion-label>
           <div slot="end" *ngIf="prop.value.copyable || prop.value.qr">
@@ -87,7 +87,6 @@
               <ion-icon
                 slot="icon-only"
                 [name]="unmasked[prop.key] ? 'eye-off-outline' : 'eye-outline'"
-                [color]="unmasked[prop.key] ? 'danger' : 'dark'"
                 size="small"
               ></ion-icon>
             </ion-button>

frontend/projects/ui/src/app/pipes/mask/mask.pipe.ts

@@ -4,7 +4,8 @@ import { Pipe, PipeTransform } from '@angular/core'
   name: 'mask',
 })
 export class MaskPipe implements PipeTransform {
-  transform(val: string): string {
-    return val && '●'.repeat(val.length)
+  transform(val: string, max?: number): string {
+    const length = max ? Math.min(max, val.length) : val.length
+    return '●'.repeat(length)
   }
 }

frontend/projects/ui/src/app/services/api/api.fixures.ts

@@ -1131,12 +1131,12 @@ export module Mock {
   export const PackageProperties: RR.GetPackagePropertiesRes<2> = {
     version: 2,
     data: {
-      Test: {
+      lndconnect: {
         type: 'string',
         description: 'This is some information about the thing.',
         copyable: true,
         qr: true,
-        masked: false,
+        masked: true,
         value:
           'lndconnect://udlyfq2mxa4355pt7cqlrdipnvk2tsl4jtsdw7zaeekenufwcev2wlad.onion:10009?cert=MIICJTCCAcugAwIBAgIRAOyq85fqAiA3U3xOnwhH678wCgYIKoZIzj0EAwIwODEfMB0GAkUEChMWbG5kIGF1dG9nZW5lcmF0ZWQgY2VydDEVMBMGA1UEAxMMNTc0OTkwMzIyYzZlMB4XDTIwMTAyNjA3MzEyN1oXDTIxMTIyMTA3MzEyN1owODEfMB0GA1UEChMWbG5kIGF1dG9nZW5lcmF0ZWQgY2VydDEVMBMGA1UEAxMMNTc0OTkwMzIyYzZlMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEKqfhAMMZdY-eFnU5P4bGrQTSx0lo7m8u4V0yYkzUM6jlql_u31_mU2ovLTj56wnZApkEjoPl6fL2yasZA2wiy6OBtTCBsjAOBgNVHQ8BAf8EBAMCAqQwEwYDVR0lBAwwCgYIKwYBBQUHAwEwDwYDVR0TAQH_BAUwAwEB_zAdBgNVHQ4EFgQUYQ9uIO6spltnVCx4rLFL5BvBF9IwWwYDVR0RBFQwUoIMNTc0OTkwMzIyYzZlgglsb2NhbGhvc3SCBHVuaXiCCnVuaXhwYWNrZXSCB2J1ZmNvbm6HBH8AAAGHEAAAAAAAAAAAAAAAAAAAAAGHBKwSAAswCgYIKoZIzj0EAwIDSAAwRQIgVZH2Z2KlyAVY2Q2aIQl0nsvN-OEN49wreFwiBqlxNj4CIQD5_JbpuBFJuf81I5J0FQPtXY-4RppWOPZBb-y6-rkIUQ&macaroon=AgEDbG5kAusBAwoQuA8OUMeQ8Fr2h-f65OdXdRIBMBoWCgdhZGRyZXNzEgRyZWFkEgV3cml0ZRoTCgRpbmZvEgRyZWFkEgV3cml0ZRoXCghpbnZvaWNlcxIEcmVhZBIFd3JpdGUaFAoIbWFjYXJvb24SCGdlbmVyYXRlGhYKB21lc3NhZ2USBHJlYWQSBXdyaXRlGhcKCG9mZmNoYWluEgRyZWFkEgV3cml0ZRoWCgdvbmNoYWluEgRyZWFkEgV3cml0ZRoUCgVwZWVycxIEcmVhZBIFd3JpdGUaGAoGc2lnbmVyEghnZW5lcmF0ZRIEcmVhZAAABiCYsRUoUWuAHAiCSLbBR7b_qULDSl64R8LIU2aqNIyQfA',
       },