Add Markdown to Login Disclaimer

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">

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>

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 () {

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;
+    }
+}