vc-viewer/index.html at main · digitalbazaar/vc-viewer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
<!--
Copyright 2025 Digital Bazaar, Inc.

SPDX-License-Identifier: BSD-3-Clause
-->

<html>
  <head>
    <title>Credential Viewer</title>
    <meta http-equiv="content-security-policy" content="frame-src 'none'">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.css" integrity="sha512-PwhgdrueUt7iVICnZMjYcbiLalCztrVfzUIYXekIK8hZu4DQP141GrKh6fUHmNERWi4bGdBXIZqtBZnsSzHEMg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.min.js" integrity="sha512-HYiNpwSxYuji84SQbCU5m9kHEsRqwWypXgJMBtbRSumlx1iBB6QaxgEBZHSHEGM+fKyCX/3Kb5V5jeVXm0OglQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script type="module">
      import './app.js';
    </script>
    <script>
      // for use with 'Object.entries().sort()' to ensure 'id' and 'type' are always
      // first and the remainder is alphabetical
      function sortKeys(a, b) {
        return (a, b) => a[0] === 'id' || a[0] === 'type' ? -1 : b[0] === 'id' || b[0] === 'type' ? 1 : a[0] > b[0] ? 1 : -1
      }
    </script>
    <style>
      .ui.list .ui.list { border-left: 1px solid lightgray; }
      .force-wrap { overflow-wrap: anywhere; }
    </style>
  </head>
  <body>

    <!-- component templates -->
    <template id="svg-viewer">
      <div class="ui top attached tabular menu">
        <div class="item" :class="{ active: currentTab == 'rendered' }"
          @click="currentTab = 'rendered'">Rendered Template</div>
        <div class="item" :class="{ active: currentTab == 'code' }"
          @click="currentTab = 'code'">SVG Template Code</div>
      </div>
      <div class="ui bottom attached tab segment" :class="{ active: currentTab == 'rendered' }">
        <div class="ui massive image"><img :src="dataURLfromSVG()"></div>
      </div>
      <div class="ui bottom attached tab segment" :class="{ active: currentTab == 'code' }">
        <div class="ui form">
          <div class="field">
            <textarea v-model="code" placeholder="SVG Template"></textarea>
          </div>
        </div>
      </div>
    </template>

    <template id="html-viewer">
      <div class="ui top attached tabular menu">
        <div class="item" :class="{ active: currentTab == 'rendered' }"
          @click="currentTab = 'rendered'">Rendered Template</div>
        <div class="item" :class="{ active: currentTab == 'code' }"
          @click="currentTab = 'code'">HTML Template Code</div>
        <div class="item" :class="{ active: currentTab == 'credential' }"
          @click="currentTab = 'credential'">Filtered Credential</div>
      </div>
      <div class="ui bottom attached tab segment" :class="{ active: currentTab == 'rendered' }">
        <iframe sandbox="allow-scripts allow-modals" :srcdoc="shimCode()" style="width: 100%; border: none;"></iframe>
      </div>
      <div class="ui bottom attached tab segment" :class="{ active: currentTab == 'code' }">
        <div class="ui form">
          <div class="field">
            <textarea v-model="store.code" placeholder="HTML Template"></textarea>
          </div>
        </div>
      </div>
      <div class="ui bottom attached tab segment" :class="{ active: currentTab == 'credential' }">
        <div class="ui form">
          <div class="field">
            <textarea v-model="store.filteredCredential"></textarea>
          </div>
        </div>
      </div>
    </template>

    <template id="kv-list">
      <div class="item" v-for="[k, v] in Object.entries(value).filter(([k]) => !ignoreKeys.includes(k)).sort(sortKeys)" :key="k">
        <div class="header" v-text="k"></div>
        <div class="description" v-if="typeof(v) === 'object' && Array.isArray(v)">
          <div class="ui list">
            <div class="item" v-for="(item) in v" :key="item">
              <template v-if="typeof(item) !== 'object'">
                <div v-text="item"></div>
              </template>
              <template v-else-if="typeof(item) === 'object' && !Array.isArray(item)">
                <div class="ui list" v-scope="KVList(item)"></div>
              </template>
            </div>
          </div>
        </div>
        <div class="description" v-else-if="typeof(v) === 'object' && !Array.isArray(v)">
          <div class="ui list" v-scope="KVList(v)"></div>
        </div>
        <div class="description" v-else-if="typeof(v) === 'string' && v.substr(0, 10) === 'data:image'">
          <img :src="v" class="ui image">
        </div>
        <div class="description" v-else v-text="v"></div>
      </div>
    </template>

    <template id="render-method">
      <div class="column">
        <div class="ui list" v-scope="KVList(renderMethod, ['template'])"></div>
      </div>
      <div class="column" v-if="renderMethod.type === 'SvgRenderingTemplate2024' && renderMethod?.template">
        <div v-scope="SVGViewer({idx, credential: store.credential})" @vue:mounted="mounted"></div>
      </div>
      <div class="column" v-else-if="renderMethod.type === 'TemplateRenderMethod' && renderMethod.renderSuite === 'html'">
        <div v-scope="HTMLViewer({template: renderMethod?.template, credential: store.credential, pointers: renderMethod.renderProperty})"></div>
      </div>
      <div class="column" v-else>
        <div v-text="'No viewer available for render method type: ' + renderMethod.type"></div>
      </div>
    </template>

    <!-- main appication -->
    <main class="ui basic segment" v-scope>
      <div class="ui one column grid">
        <div class="column">
          <div class="ui form">
            <div class="ui grid">
              <div class="two wide column">
                <button class="ui button" @click="pickFile()">Choose Credential...</button>
              </div>
              <div class="fourteen wide column">
                <div class="inline field">
                  <label for="examples">Examples:</label>
                  <select id="examples" @change="loadExampleCredential">
                    <option value="" disabled selected>Select an example</option>
                    <option
                      v-for="example in examples.contains"
                      :value="example.files.credential"
                      v-text="example.title"></option>
                  </select>
                </div>
              </div>
            </div>
            <span v-text="filename"></span>
            <div class="field">
              <textarea v-model="credentialString" @input="getCredential" placeholder="Credential"></textarea>
            </div>
            <div class="ui error message" :class="{ visible: parseError.length > 0 }" v-text="parseError"></div>
          </div>
        </div>
      </div>

      <section class="ui basic segment" v-if="'type' in store.credential">
        <div class="ui bulleted horizontal list">
          <div class="item">
            <div class="content">
              <div class="header">@context</div>
            </div>
          </div>
          <a class="link item" v-for="(context) in store.credential['@context']" v-text="context" :href="context"></a>
        </div>
      </section>
      <section class="ui basic segment">

      <div class="ui three column divided grid" v-if="Object.keys(store.credential).length > 0">
        <!-- Top-level Credential keys which are not `credentialSubject`, `@context`, `issuer`, or `renderMethod` -->
        <div class="column">
          <div class="ui header">Credential</div>
          <div class="ui list" v-scope="KVList(store.credential, ['@context', 'credentialSubject', 'issuer', 'renderMethod'])"></div>
        </div>
        <div class="column" v-if="'credentialSubject' in store.credential">
          <div class="ui header">Credential Subject</div>
          <div class="ui list" v-scope="KVList(store.credential.credentialSubject)"></div>
        </div>
        <div class="column" v-if="'issuer' in store.credential">
          <div class="ui header">Issuer</div>
          <div v-if="typeof store.credential.issuer === 'string'" v-text="store.credential.issuer"></div>
          <div v-else class="ui list" v-scope="KVList(store.credential.issuer)"></div>
        </div>
      </div>

      <!-- Single Render Method Object -->
      <div class="ui two column grid" v-if="'renderMethod' in store.credential && !Array.isArray(store.credential.renderMethod)">
        <div class="ui header">Render Method</div>
        <div class="row" v-scope="RenderMethod(store.credential.renderMethod)">
        </div>
      </div>

      <!-- Multiple Render Methods in an Array -->
      <div class="ui two column grid" v-if="'renderMethod' in store.credential && Array.isArray(store.credential.renderMethod)">
        <div class="ui header">Render Methods</div>
        <template v-for="(renderMethod, idx) in store.credential.renderMethod" :key="idx">
          <div class="row" v-scope="RenderMethod(renderMethod, idx)"></div>
        </template>
      </div>

    </main>
  </body>
</html>