userpage: generate & display referral links

shown on a new card, with an explanation, the number of remaining uses,
and expiry of the current referral.

html/user.html

@@ -24,6 +24,7 @@
             window.matrixRequired = {{ .matrixRequired }};
             window.matrixUserID = "{{ .matrixUser }}";
             window.validationStrings = JSON.parse({{ .validationStrings }});
+            window.referralsEnabled = {{ .referralsEnabled }};
         </script>
         {{ template "header.html" . }}
         <title>{{ .strings.myAccount }}</title>
@@ -150,6 +151,20 @@
                         <div class="user-expiry-countdown"></div>
                     </div>
                 </div>
+                {{ if .referralsEnabled }}
+                    <div>
+                        <div class="card @low dark:~d_neutral unfocused" id="card-referrals">
+                            <span class="heading mb-2">{{ .strings.referrals }}</span>
+                            <aside class="aside ~neutral my-4 col">{{ .strings.referralsDescription }}</aside>
+                            <div class="row flex-expand">
+                                <div class="user-referrals-info"></div>
+                                <div class="grid my-2">
+                                    <button type="button" class="user-referrals-button button ~info dark:~d_info @low" title="Copy">{{ .strings.copyReferral }}<i class="ri-file-copy-line ml-2"></i></button>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                {{ end }}
             </div>
         </div>
         <script src="{{ .urlBase }}/js/user.js" type="module"></script>