alice.pds.demo.boltless.dev
This repository has no description
1{{ define "user/fragments/vouchPopover" }}
2{{ $vr := index . "VouchRelationship" }}
3{{ $ev := index . "Evidences" }}
4{{ $isVouched := false }}
5{{ $isDenounced := false }}
6{{ $isUndecided := false }}
7{{ if $vr }}
8 {{ if $vr.IsDirectVouch }}
9 {{ $isVouched = true }}
10 {{ else if $vr.IsDirectDenounce }}
11 {{ $isDenounced = true }}
12 {{ else }}
13 {{ $isUndecided = true }}
14 {{ end }}
15{{ else }}
16 {{ $isUndecided = true }}
17{{ end }}
18
19{{ $userIdent := "" }}
20{{ $userDid := "" }}
21{{ with $vr }}
22 {{ $userDid = .SubjectDid.String }}
23 {{ $userIdent = resolve .SubjectDid.String }}
24{{ end }}
25{{ $popoverId := index . "PopoverId" }}
26{{ if not $popoverId }}{{ $popoverId = printf "vouch-modal-%s" (normalizeForHtmlId $userDid) }}{{ end }}
27<div
28 id="{{ $popoverId }}"
29 popover
30 class="bg-white w-[95%] md:w-96 dark:bg-gray-800 p-4 rounded border border-gray-200 dark:border-gray-700 drop-shadow dark:text-white backdrop:bg-gray-400/50 dark:backdrop:bg-gray-800/50 space-y-2">
31
32 <form
33 hx-post="/vouch"
34 hx-swap="none"
35 hx-on::after-request="if(event.detail.successful) this.reset()"
36 class="flex flex-col gap-6 group">
37
38 <div>
39 <p class="font-semibold mb-1 text-base">Vouch for {{ $userIdent }}</p>
40 <p class="text-gray-600 dark:text-gray-400 text-sm">
41 {{ with $vr }}
42 {{ with .GetDirectVouch }}
43 You {{if $isVouched}}vouched{{else}}denounced{{end}} {{ $userIdent }} {{ relTimeFmt .CreatedAt }}.
44 You can change your decision below.
45 {{ else }}
46 Vouching builds a web-of-trust across Tangled. Vouch for users you
47 have had positive interactions with. <a href="https://blog.tangled.org/vouching" class="inline-flex items-center gap-1">Read more {{ i "arrow-right" "size-3" }}</a>
48 {{ end }}
49 {{ end }}
50 </p>
51 </div>
52
53 {{ if $vr }}
54 {{ if $vr.IndirectVouches }}
55 <div>
56 <p class="font-semibold mb-1 text-sm">From your network:</p>
57 {{ template "user/fragments/networkVouches" $vr }}
58 </div>
59 {{ end }}
60 {{ end }}
61
62 <input type="hidden" name="subject" value="{{ $userDid }}" />
63 {{ range $ev }}
64 <input type="hidden" name="evidences" value="{{ . }}" />
65 {{ end }}
66
67 {{ $labelClass := "grid grid-cols-[auto_1fr_auto] items-center gap-2 rounded p-2 py- ring-1 ring-gray-200 dark:ring-gray-700 cursor-pointer" }}
68
69 <div class="grid grid-cols-3 gap-2">
70 <input
71 id="vouch-{{ $popoverId }}"
72 type="radio"
73 name="kind"
74 value="vouch"
75 {{ if $isVouched }}checked{{ end }}
76 class="peer/vouch hidden appearance-none" />
77 <input
78 id="denounce-{{ $popoverId }}"
79 type="radio"
80 name="kind"
81 value="denounce"
82 {{ if $isDenounced }}checked{{ end }}
83 class="peer/denounce hidden appearance-none" />
84 <input
85 id="none-{{ $popoverId }}"
86 type="radio"
87 name="kind"
88 value="none"
89 {{ if $isUndecided }}checked{{ end }}
90 class="peer/none hidden appearance-none" />
91
92 <label
93 for="vouch-{{ $popoverId }}"
94 class="
95 {{ $labelClass }}
96 hover:bg-gray-100 peer-checked/vouch:bg-green-200 peer-checked/vouch:text-green-800 peer-checked/vouch:ring-green-400
97 dark:hover:bg-white/5 dark:peer-checked/vouch:bg-green-700 dark:peer-checked/vouch:text-green-200 dark:peer-checked/vouch:ring-green-600">
98 {{ i "shield-check" "size-5" }}
99 <span class="text-sm font-medium">Vouch</span>
100 </label>
101 <label
102 for="denounce-{{ $popoverId }}"
103 class="
104 {{ $labelClass }}
105 hover:bg-gray-100 peer-checked/denounce:bg-red-200 peer-checked/denounce:text-red-800 peer-checked/denounce:ring-red-400
106 dark:hover:bg-white/5 dark:peer-checked/denounce:bg-red-700 dark:peer-checked/denounce:text-red-200 dark:peer-checked/denounce:ring-red-600">
107 {{ i "shield-ban" "size-5" }}
108 <span class="text-sm font-medium">Denounce</span>
109 </label>
110 <label
111 for="none-{{ $popoverId }}"
112 class="
113 {{ $labelClass }}
114 hover:bg-gray-100 peer-checked/none:bg-gray-200 peer-checked/none:text-gray-800 peer-checked/none:ring-gray-400
115 dark:hover:bg-white/5 dark:peer-checked/none:bg-gray-700 dark:peer-checked/none:text-gray-200 dark:peer-checked/none:ring-gray-600">
116 {{ i "shield-off" "size-5" }}
117 <span class="text-sm font-medium">None</span>
118 </label>
119
120 <textarea
121 id="reason-{{ $popoverId }}"
122 name="reason"
123 rows="1"
124 maxlength="300"
125 placeholder="Write a reason..."
126 class="w-full resize-none col-span-3 peer-checked/none:hidden">
127 {{- with $vr -}}
128 {{- with .GetDirectVouch -}}
129 {{- with .Reason -}}
130 {{- . -}}
131 {{- end -}}
132 {{- end -}}
133 {{- end -}}
134 </textarea>
135 </div>
136
137 <div class="flex gap-2">
138 <button
139 type="button"
140 popovertarget="{{ $popoverId }}"
141 popovertargetaction="hide"
142 class="btn flex-1 flex items-center justify-center gap-2">
143 {{ i "x" "size-4" }}
144 Cancel
145 </button>
146 <button
147 type="submit"
148 class="btn-create flex-1 flex items-center justify-center gap-2 text-white group">
149 {{ i "check" "size-4 inline group-[.htmx-request]:hidden" }}
150 {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }}
151 {{ if and $vr $vr.GetDirectVouch }} Update {{ else }} Save {{end}}
152 </button>
153 </div>
154 </form>
155
156 <div id="error" class="w-full error"></div>
157</div>
158{{ end }}