From d8d478a95e10929969d5c44e2b3922971fe91e9d Mon Sep 17 00:00:00 2001
From: Harvey Tindall <hrfee@protonmail.ch>
Date: Fri, 8 Sep 2023 13:31:05 +0100
Subject: [PATCH] form: move referral info message to aside, change wording

---
 html/form.html       | 10 +++++-----
 lang/form/en-us.json |  2 +-
 ts/form.ts           |  5 +++++
 3 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/html/form.html b/html/form.html
index 787cdb0..fbeecbe 100644
--- a/html/form.html
+++ b/html/form.html
@@ -43,7 +43,7 @@
         <div id="notification-box"></div>
         <div class="page-container">
             <div class="card dark:~d_neutral @low">
-                <div class="flex flex-col justify-between md:flex-row gap-3 items-baseline mb-2">
+                <div class="flex flex-col md:flex-row gap-3 items-baseline mb-2">
                     <span class="heading mr-5">
                         {{ if .passwordReset }}
                         {{ .strings.passwordReset }}
@@ -58,9 +58,6 @@
                             {{ .helpMessage }}
                         {{ end }}
                     </span>
-                    {{ if .fromUser }}
-                        <span class="badge ~positive text-lg p-1 px-2 self-center">{{ .strings.invitedBy }} {{ .fromUser }}</span>
-                    {{ end }}
                 </div>
                 <div class="flex flex-col md:flex-row gap-3">
                     <div class="flex-1">
@@ -126,6 +123,9 @@
                         </form>
                     </div>
                     <div class="flex-initial">
+                        {{ if .fromUser }}
+                            <aside class="col aside sm ~positive mb-4" id="invite-from-user" data-from="{{ .fromUser }}">{{ .strings.invitedBy }}</aside>
+                        {{ end }}
                         <div class="card ~neutral @low mb-4">
                             <span class="label supra">{{ .strings.passwordRequirementsHeader }}</span>
                             <ul>
@@ -146,7 +146,7 @@
                         </div>
                         {{ end }}
                         {{ if .contactMessage }}
-                        <aside class="col aside sm ~info mt-4">{{ .contactMessage }}</aside>
+                            <aside class="col aside sm ~info mt-4">{{ .contactMessage }}</aside>
                         {{ end }}
                     </div>
                 </div>
diff --git a/lang/form/en-us.json b/lang/form/en-us.json
index 14f7acf..4a43ce1 100644
--- a/lang/form/en-us.json
+++ b/lang/form/en-us.json
@@ -37,7 +37,7 @@
         "changePassword": "Change Password",
         "referralsDescription": "Invite friends & family to Jellyfin with this link. Come back here for a new one if it expires.",
         "copyReferral": "Copy Link",
-        "invitedBy": "Invited By"
+        "invitedBy": "You were invited by user {user}."
     },
     "notifications": {
         "errorUserExists": "User already exists.",
diff --git a/ts/form.ts b/ts/form.ts
index de996d0..f278d86 100644
--- a/ts/form.ts
+++ b/ts/form.ts
@@ -392,3 +392,8 @@ const create = (event: SubmitEvent) => {
 validator.validate();
 
 form.onsubmit = create;
+
+const invitedByAside = document.getElementById("invite-from-user");
+if (typeof(invitedByAside) != "undefined" && invitedByAside != null) {
+    invitedByAside.textContent = invitedByAside.textContent.replace("{user}", invitedByAside.getAttribute("data-from"));
+}