Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
HTML
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159{{ define "user/fragments/vouchPopover" }}{{ $vr := index . "VouchRelationship" }}{{ $ev := index . "Evidences" }}{{ $isVouched := false }}{{ $isDenounced := false }}{{ $isUndecided := false }}{{ if $vr }} {{ if $vr.IsDirectVouch }} {{ $isVouched = true }} {{ else if $vr.IsDirectDenounce }} {{ $isDenounced = true }} {{ else }} {{ $isUndecided = true }} {{ end }}{{ else }} {{ $isUndecided = true }}{{ end }}
{{ $userIdent := "" }}{{ $userDid := "" }}{{ with $vr }} {{ $userDid = .SubjectDid.String }} {{ $userIdent = resolve .SubjectDid.String }}{{ end }}{{ $popoverId := index . "PopoverId" }}{{ if not $popoverId }}{{ $popoverId = printf "vouch-modal-%s" (normalizeForHtmlId $userDid) }}{{ end }}<div id="{{ $popoverId }}" popover 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">
<form hx-post="/vouch" hx-swap="none" hx-on::after-request="if(event.detail.successful) this.reset()" class="flex flex-col gap-6 group">
<div> <p class="font-semibold mb-1 text-base">Vouch for {{ $userIdent }}</p> <p class="text-gray-600 dark:text-gray-400 text-sm"> {{ with $vr }} {{ with .GetDirectVouch }} You {{if $isVouched}}vouched{{else}}denounced{{end}} {{ $userIdent }} {{ relTimeFmt .CreatedAt }}. You can change your decision below. {{ else }} Vouching builds a web-of-trust across Tangled. Vouch for users you 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> {{ end }} {{ end }} </p> </div>
{{ if $vr }} {{ if $vr.IndirectVouches }} <div> <p class="font-semibold mb-1 text-sm">From your network:</p> {{ template "user/fragments/networkVouches" $vr }} </div> {{ end }} {{ end }}
<input type="hidden" name="subject" value="{{ $userDid }}" /> {{ range $ev }} <input type="hidden" name="evidences" value="{{ . }}" /> {{ end }}
{{ $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" }}
<div class="grid grid-cols-3 gap-2"> <input id="vouch-{{ $popoverId }}" type="radio" name="kind" value="vouch" {{ if $isVouched }}checked{{ end }} class="peer/vouch hidden appearance-none" /> <input id="denounce-{{ $popoverId }}" type="radio" name="kind" value="denounce" {{ if $isDenounced }}checked{{ end }} class="peer/denounce hidden appearance-none" /> <input id="none-{{ $popoverId }}" type="radio" name="kind" value="none" {{ if $isUndecided }}checked{{ end }} class="peer/none hidden appearance-none" />
<label for="vouch-{{ $popoverId }}" class=" {{ $labelClass }} hover:bg-gray-100 peer-checked/vouch:bg-green-200 peer-checked/vouch:text-green-800 peer-checked/vouch:ring-green-400 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"> {{ i "shield-check" "size-5" }} <span class="text-sm font-medium">Vouch</span> </label> <label for="denounce-{{ $popoverId }}" class=" {{ $labelClass }} hover:bg-gray-100 peer-checked/denounce:bg-red-200 peer-checked/denounce:text-red-800 peer-checked/denounce:ring-red-400 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"> {{ i "shield-ban" "size-5" }} <span class="text-sm font-medium">Denounce</span> </label> <label for="none-{{ $popoverId }}" class=" {{ $labelClass }} hover:bg-gray-100 peer-checked/none:bg-gray-200 peer-checked/none:text-gray-800 peer-checked/none:ring-gray-400 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"> {{ i "shield-off" "size-5" }} <span class="text-sm font-medium">None</span> </label>
<textarea id="reason-{{ $popoverId }}" name="reason" rows="1" maxlength="300" placeholder="Write a reason..." class="w-full resize-none col-span-3 peer-checked/none:hidden"> {{- with $vr -}} {{- with .GetDirectVouch -}} {{- with .Reason -}} {{- . -}} {{- end -}} {{- end -}} {{- end -}} </textarea> </div>
<div class="flex gap-2"> <button type="button" popovertarget="{{ $popoverId }}" popovertargetaction="hide" class="btn flex-1 flex items-center justify-center gap-2"> {{ i "x" "size-4" }} Cancel </button> <button type="submit" class="btn-create flex-1 flex items-center justify-center gap-2 text-white group"> {{ i "check" "size-4 inline group-[.htmx-request]:hidden" }} {{ i "loader-circle" "size-4 animate-spin hidden group-[.htmx-request]:inline" }} {{ if and $vr $vr.GetDirectVouch }} Update {{ else }} Save {{end}} </button> </div> </form>
<div id="error" class="w-full error"></div></div>{{ end }}