From eba8cf18d4f1b0d8d4411e2469be4442580ea217 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Fri, 21 Jan 2022 02:18:19 +0300
Subject: [PATCH] Add Markdown to Login Disclaimer

---
 src/controllers/dashboard/general.html   |  2 +-
 src/controllers/session/login/index.html |  4 +++-
 src/controllers/session/login/index.js   | 18 +++++++++++++++-
 src/controllers/session/login/login.scss | 26 ++++++++++++++++++++++++
 4 files changed, 47 insertions(+), 3 deletions(-)
 create mode 100644 src/controllers/session/login/login.scss

diff --git a/src/controllers/dashboard/general.html b/src/controllers/dashboard/general.html
index 67e9bfb7a..21c81eddd 100644
--- a/src/controllers/dashboard/general.html
+++ b/src/controllers/dashboard/general.html
@@ -65,7 +65,7 @@
                 <div class="verticalSection">
                     <h2>${HeaderBranding}</h2>
                     <div class="inputContainer">
-                        <input is="emby-input" type="text" id="txtLoginDisclaimer" label="${LabelLoginDisclaimer}" />
+                        <textarea is="emby-textarea" id="txtLoginDisclaimer" label="${LabelLoginDisclaimer}" class="textarea-mono"></textarea>
                         <div class="fieldDescription">${LabelLoginDisclaimerHelp}</div>
                     </div>
                     <div class="inputContainer customCssContainer">
diff --git a/src/controllers/session/login/index.html b/src/controllers/session/login/index.html
index 339d4131e..55550a194 100644
--- a/src/controllers/session/login/index.html
+++ b/src/controllers/session/login/index.html
@@ -50,7 +50,9 @@
                 <span>${ButtonChangeServer}</span>
             </button>
 
-            <p class="disclaimer" style="text-align: center; margin-top: 2em;"></p>
+            <div class="disclaimerContainer">
+                <div class="disclaimer"></div>
+            </div>
         </div>
     </div>
 </div>
diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js
index 238d6f6ff..9aecc0f54 100644
--- a/src/controllers/session/login/index.js
+++ b/src/controllers/session/login/index.js
@@ -1,3 +1,5 @@
+import DOMPurify from 'dompurify';
+import { marked } from 'marked';
 import { appHost } from '../../../components/apphost';
 import appSettings from '../../../scripts/settings/appSettings';
 import dom from '../../../scripts/dom';
@@ -14,6 +16,7 @@ import toast from '../../../components/toast/toast';
 import dialogHelper from '../../../components/dialogHelper/dialogHelper';
 import baseAlert from '../../../components/alert';
 import cardBuilder from '../../../components/cardbuilder/cardBuilder';
+import './login.scss';
 
 /* eslint-disable indent */
 
@@ -281,7 +284,20 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
                 loading.hide();
             });
             apiClient.getJSON(apiClient.getUrl('Branding/Configuration')).then(function (options) {
-                view.querySelector('.disclaimer').textContent = options.LoginDisclaimer || '';
+                const disclaimer = view.querySelector('.disclaimer');
+
+                disclaimer.innerHTML = DOMPurify.sanitize(marked(options.LoginDisclaimer || ''));
+
+                for (const elem of disclaimer.querySelectorAll('a')) {
+                    elem.target = '_blank';
+                    elem.classList.add('button-link');
+                    elem.setAttribute('is', 'emby-linkbutton');
+
+                    if (layoutManager.tv) {
+                        // Disable links navigation on TV
+                        elem.tabIndex = -1;
+                    }
+                }
             });
         });
         view.addEventListener('viewhide', function () {
diff --git a/src/controllers/session/login/login.scss b/src/controllers/session/login/login.scss
new file mode 100644
index 000000000..d84d0088d
--- /dev/null
+++ b/src/controllers/session/login/login.scss
@@ -0,0 +1,26 @@
+.disclaimerContainer {
+    display: flex;
+    margin-top: 2em;
+}
+
+.disclaimer {
+    margin: 0 auto;
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    p {
+        text-align: center;
+    }
+
+    ol,
+    ul {
+        max-width: 40em;
+        margin-left: auto;
+        margin-right: auto;
+        width: fit-content;
+    }
+}