inji-config/credential-template.html at master · tw-mosip/inji-config · 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
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>$titleName</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
</head>
<body style="width: 100%; #if ($textColor) color: $textColor; #end">
<div style="border-radius: 15px; padding: 10px;
     #if ($backgroundColor) background: $backgroundColor; border: 1px $textColor solid;
     #else border: 2px black solid; #end">
    <div style="text-align: center; margin-top: 40px; font-weight: bold;">
        <span style="font-family: 'Inter', sans-serif; font-weight: 600; font-size: 22px; vertical-align: middle;">$titleName</span>
    </div>
    <div style="display: flex; flex-direction: row; justify-content: space-between;">
        <div style="margin: 40px 60px 0 50px ; justify-content: center; align-items: center;">
            #if (!$face)
            <div style="float: left; height:100px;width:100px;background-color:white;border-radius:10px;border:1px solid grey">
                <img style="margin: 25px;width: 50px; height:50px;"
                     src="https://inji.github.io/inji-config/logos/user-icon.png" alt="Logo"/>
            </div>
            #else
            <img style="height:100px; width:100px; border-radius:10px;" src="$face" alt="Logo"/>
            #end
            <div style="float: left; height:100px;width:100px; border-radius:10px; margin-top: 20px;">
                <img style="width: 100px; height:auto;" src="$logoUrl" alt="Logo"/>
            </div>
        </div>

        <div style="padding-top: 50px;">
            #foreach($entry in $rowProperties.entrySet()) ## Iterate over the outer map
            #if($entry.value) ## Check if the value exists for this entry
            #set($nestedMap = $entry.value) ## Get the nested value
            #if($nestedMap && $nestedMap.size() > 0) ## Check if nestedMap is a Map with entries
            #foreach($nestedEntry in $nestedMap.entrySet()) ## Iterate over the nested map
            #if($nestedEntry.value) ## Ensure that there’s a value for this nested entry
            <div style="margin-bottom: 20px; float: left; width: 450px;">
                <div style="font-family: 'Inter', sans-serif; font-weight: 400; font-size: 18px; margin-bottom: 5px; word-wrap: break-word;">
                    $nestedEntry.key
                </div>  <!-- Use nested entry key as label -->
                #if($nestedEntry.value.startsWith("data:image/"))
                <img src="$nestedEntry.value" alt="Embedded Image"
                     style="height:100px; width:100px; border: 1px solid #ccc; border-radius: 8px;"/>
                #else
                <div style="font-family: 'Inter', sans-serif; font-weight: 600; font-size: 18px; word-wrap: break-word;">
                    $nestedEntry.value
                </div>
                <!-- Show nested entry value -->
                #end
            </div>
            #end
            #end
            #else
            <div style="margin-bottom: 10px; float: left; width: 450px;">
                <div style="font-family: 'Inter', sans-serif; font-weight: 400; font-size: 18px; margin-bottom: 5px; word-wrap: break-word;">
                    $entry.key
                </div> <!-- Outer key -->
                #if($entry.value.startsWith("data:image/"))
                <img src="$entry.value" alt="Embedded Image"
                     style="height:100px; width:100px; border: 1px solid #ccc; border-radius: 8px;"/>
                <!-- Outer value -->
                #else
                <div style="font-family: 'Inter', sans-serif; font-weight: 600; font-size: 18px; word-wrap: break-word;">
                    $entry.value
                </div>
                #end
            </div>
            #end
            #end
            #end
        </div>
    </div>
</div>

#if($isSdJwtWithDisclosures)
#if($isMaskedOn)
<div style="display: flex; width: 100%; padding: 12px; border-radius: 8px; border: 2px solid #f6dfbe; background-color: #FFF7E5; margin: 15px 0 15px 0; align-items: flex-start;">
                <span style="display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; border-radius: 50%; padding: 1px; margin-top: 1px;
                border: 0.125em solid #973C00; color: #973C00; font-weight: bold; font-size: 12px; flex-shrink: 0; background-color: transparent; box-sizing: border-box;"
                >i</span>
    <div style="font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px;  padding: 0 10px 0px 5px; text-align: left; color: #973C00; background-color: transparent;">
        Your card includes specific details marked by the issuer as selectively disclosable. Fields marked (X) are selectively disclosable and can be shared independently during credential presentation. Other fields not listed here can only be disclosed as part of the full credential, if requested by the verifier.
    </div>
</div>
#else
<div style="display: flex; width: 100%; padding: 12px; border-radius: 8px; border: 2px solid #f6dfbe; background-color: #FFF7E5; margin: 15px 0 15px 0; align-items: flex-start;">
                <span style="display: flex; justify-content: center; align-items: center; width: 15px; height: 15px; border-radius: 50%; padding: 1px; margin-top: 1px;
                border: 0.125em solid #973C00; color: #973C00; font-weight: bold; font-size: 12px; flex-shrink: 0; background-color: transparent; box-sizing: border-box;"
                >i</span>
    <div style="font-family: 'Inter', sans-serif; font-weight: 400; font-size: 12px;  padding: 0 10px 0px 5px; text-align: left; color: #973C00; background-color: transparent;">
        Your credential includes fields that can be shared selectively. These fields are not marked separately for you to identify visually, but you will see and choose them when presenting this credential to a verifier.
    </div>
</div>
#end
#end

<div style="border-radius: 15px; padding: 50px; text-align: center; #if ($backgroundColor) background: $backgroundColor; border: 1px $textColor solid;
     #else border: 2px black solid; #end">
    <img src="data:image/png;base64,$qrCodeImage" alt="QR Code"/>
</div>
<div style="display: flex; width: 100%; padding: 8px; border-radius: 8px; border: 2px solid #f6dfbe; background-color: #FFF7E5; margin: 32px 0;">
    <div style="font-family: 'Inter', sans-serif; font-size: 13px; padding: 0 16px; text-align: left; color: #973C00;">
        <span style="font-weight: 700;">Please note:</span>
        <span style="font-weight: 500;">
            #if ($credentialValidity != -1)
            This credential is limited to a maximum of [$credentialValidity] verifications by authorized verifiers. Once the specified number of verifications has been reached, this credential will no longer be valid for further verification attempts.
            #else
            This credential can be used for verification by authorized verifiers without any limit on the number of verifications. It provides
            continuous, secure access for credential validation.
            #end
        </span>
    </div>
</div>
</body>
</html>