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