From 2b4519a4ad08eecf02b75d778588e389744afcfc Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Wed, 8 May 2019 19:33:47 -0700
Subject: [PATCH] Fixed: Loading of fonts.css with a URL Base

Fixes #3103
---
 frontend/src/Styles/globals.css |   5 +-
 frontend/src/index.html         |  59 ++--
 frontend/src/login.html         | 483 ++++++++++++++++++--------------
 3 files changed, 315 insertions(+), 232 deletions(-)
diff --git a/frontend/src/Styles/globals.css b/frontend/src/Styles/globals.css
index ffdc885c2..aa30af147 100644
--- a/frontend/src/Styles/globals.css
+++ b/frontend/src/Styles/globals.css
@@ -1,7 +1,6 @@
 /* stylelint-disable */
 
-@import '~normalize.css/normalize.css';
-@import 'scaffolding.css';
-@import '/Content/Fonts/fonts.css';
+@import "~normalize.css/normalize.css";
+@import "scaffolding.css";
 
 /* stylelint-enable */
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 799deaf44..7c9bfa2c6 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -1,28 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
-
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <meta name="mobile-web-app-capable" content="yes"/>
-    <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
 
     <!-- Chrome, Opera, and Firefox OS -->
-    <meta name="theme-color" content="#3a3f51"/>
+    <meta name="theme-color" content="#3a3f51" />
     <!-- Windows Phone -->
-    <meta name="msapplication-navbutton-color" content="#3a3f51"/>
+    <meta name="msapplication-navbutton-color" content="#3a3f51" />
 
-    <meta name="description" content="Sonarr (Preview)">
+    <meta name="description" content="Sonarr (Preview)" />
 
-    <link rel="apple-touch-icon" sizes="180x180" href="/Content/Images/Icons/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="/Content/Images/Icons/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="/Content/Images/Icons/favicon-16x16.png">
-    <link rel="manifest" href="/Content/Images/Icons/manifest.json">
-    <link rel="mask-icon" href="/Content/Images/Icons/safari-pinned-tab.svg" color="#00ccff">
-    <link rel="shortcut icon" type="image/ico" href="/favicon.ico" data-no-hash />
-    <meta name="msapplication-config" content="/Content/Images/Icons/browserconfig.xml">
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/Content/Images/Icons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/Content/Images/Icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/Content/Images/Icons/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/Content/Images/Icons/manifest.json" />
+    <link
+      rel="mask-icon"
+      href="/Content/Images/Icons/safari-pinned-tab.svg"
+      color="#00ccff"
+    />
+    <link
+      rel="shortcut icon"
+      type="image/ico"
+      href="/favicon.ico"
+      data-no-hash
+    />
+    <meta
+      name="msapplication-config"
+      content="/Content/Images/Icons/browserconfig.xml"
+    />
 
-    <link rel="stylesheet" type="text/css" href="/Content/styles.css">
+    <link rel="stylesheet" type="text/css" href="/Content/styles.css" />
+    <link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css" />
 
     <title>Sonarr (Preview)</title>
 
@@ -57,5 +83,4 @@
   <script src="/vendor.js"></script>
   <script src="/preload.js"></script>
   <script src="/index.js"></script>
-
 </html>
diff --git a/frontend/src/login.html b/frontend/src/login.html
index d3cf47b99..cf778fb49 100644
--- a/frontend/src/login.html
+++ b/frontend/src/login.html
@@ -1,232 +1,291 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
 
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <meta name="mobile-web-app-capable" content="yes"/>
-  <meta name="apple-mobile-web-app-capable" content="yes"/>
+    <!-- Chrome, Opera, and Firefox OS -->
+    <meta name="theme-color" content="#3a3f51" />
+    <!-- Windows Phone -->
+    <meta name="msapplication-navbutton-color" content="#3a3f51" />
 
-  <!-- Chrome, Opera, and Firefox OS -->
-  <meta name="theme-color" content="#3a3f51"/>
-  <!-- Windows Phone -->
-  <meta name="msapplication-navbutton-color" content="#3a3f51"/>
+    <meta name="description" content="Sonarr (Preview)" />
 
-  <meta name="description" content="Sonarr (Preview)">
+    <link
+      rel="apple-touch-icon"
+      sizes="180x180"
+      href="/Content/Images/Icons/apple-touch-icon.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="32x32"
+      href="/Content/Images/Icons/favicon-32x32.png"
+    />
+    <link
+      rel="icon"
+      type="image/png"
+      sizes="16x16"
+      href="/Content/Images/Icons/favicon-16x16.png"
+    />
+    <link rel="manifest" href="/Content/Images/Icons/manifest.json" />
+    <link
+      rel="mask-icon"
+      href="/Content/Images/Icons/safari-pinned-tab.svg"
+      color="#00ccff"
+    />
+    <link
+      rel="shortcut icon"
+      type="image/ico"
+      href="/favicon.ico"
+      data-no-hash
+    />
+    <meta
+      name="msapplication-config"
+      content="/Content/Images/Icons/browserconfig.xml"
+    />
 
-  <link rel="apple-touch-icon" sizes="180x180" href="/Content/Images/Icons/apple-touch-icon.png">
-  <link rel="icon" type="image/png" sizes="32x32" href="/Content/Images/Icons/favicon-32x32.png">
-  <link rel="icon" type="image/png" sizes="16x16" href="/Content/Images/Icons/favicon-16x16.png">
-  <link rel="manifest" href="/Content/Images/Icons/manifest.json">
-  <link rel="mask-icon" href="/Content/Images/Icons/safari-pinned-tab.svg" color="#00ccff">
-  <link rel="shortcut icon" type="image/ico" href="/favicon.ico" data-no-hash />
-  <meta name="msapplication-config" content="/Content/Images/Icons/browserconfig.xml">
+    <link rel="stylesheet" type="text/css" href="/Content/styles.css" />
+    <link rel="stylesheet" type="text/css" href="/Content/Fonts/fonts.css" />
 
-  <link rel="stylesheet" type="text/css" href="/Content/styles.css">
+    <title>Login - Sonarr</title>
 
-  <title>Login - Sonarr</title>
-
-  <style>
-    body {
-      background-color: #f5f7fa;
-      color: #656565;
-      font-family: "Roboto", "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-    }
-
-    .center {
-      display: flex;
-      justify-content: center;
-    }
-
-    .content {
-      flex: 0 0 325px;
-    }
-
-    .logo {
-      width: 32px;
-      height: 32px;
-    }
-
-    .panel {
-      margin-top: 50px;
-      border-radius: 4px;
-    }
-
-    .panel-header {
-      display: flex;
-      justify-content: center;
-      padding: 10px;
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-      background-color: #3a3f51;
-    }
-
-    .panel-body {
-      padding: 20px;
-      border-bottom-right-radius: 4px;
-      border-bottom-left-radius: 4px;
-      background-color: #fff;
-    }
-
-    .sign-in {
-      padding: 10px 0;
-      text-align: center;
-    }
-
-    .form-group {
-      margin: 20px 0;
-    }
-
-    .form-input {
-      box-sizing: border-box;
-      padding: 6px 16px;
-      width: 100%;
-      height: 35px;
-      border: 1px solid #dde6e9;
-      border-radius: 4px;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-    }
-
-    .form-input:focus {
-      outline: 0;
-      border-color: #66afe9;
-      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
-    }
-
-    .button {
-      overflow: hidden;
-      margin-top: 20px;
-      padding: 10px 0;
-      width: 100%;
-      border: 1px solid;
-      border-color: #5899eb;
-      border-radius: 4px;
-      background-color: #5d9cec;
-      color: #fff;
-      vertical-align: middle;
-      text-align: center;
-      white-space: nowrap;
-      line-height: normal;
-    }
-
-    .button:hover {
-      border-color: #3483e7;
-      background-color: #4b91ea;
-      color: #fff;
-      text-decoration: none;
-    }
-
-    .copy {
-      margin-top: 15px;
-      text-align: center;
-      font-size: 14px;
-    }
-
-    .remember-me-container {
-      display: flex;
-      justify-content: space-between;
-      line-height: 25px;
-    }
-
-    .remember-me {
-      font-size: 14px;
-    }
-
-    .forgot-password {
-      margin-left: auto;
-      color: #909fa7;
-      text-decoration: none;
-      font-size: 13px;
-    }
-
-    .forgot-password:focus,
-    .forgot-password:hover {
-      color: #748690;
-      text-decoration: underline;
-    }
-
-    .forgot-password:visited {
-      color: #748690;
-    }
-
-    .login-failed {
-      margin-top: 20px;
-      color: #f05050;
-      font-size: 14px;
-    }
-
-    .hidden {
-      display: none;
-    }
-
-    @media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
-      .form-input {
-        font-size: 16px;
+    <style>
+      body {
+        background-color: #f5f7fa;
+        color: #656565;
+        font-family: "Roboto", "open sans", "Helvetica Neue", Helvetica, Arial,
+          sans-serif;
       }
-    }
-  </style>
-</head>
 
-<body>
-<div class="center">
-  <div class="content">
-    <div class="panel">
-      <div class="panel-header">
-        <img src="/Content/Images/logo.svg" alt="Image" class="logo">
-      </div>
+      .center {
+        display: flex;
+        justify-content: center;
+      }
 
-      <div class="panel-body">
-        <div class="sign-in">
-          SIGN IN TO CONTINUE
+      .content {
+        flex: 0 0 325px;
+      }
+
+      .logo {
+        width: 32px;
+        height: 32px;
+      }
+
+      .panel {
+        margin-top: 50px;
+        border-radius: 4px;
+      }
+
+      .panel-header {
+        display: flex;
+        justify-content: center;
+        padding: 10px;
+        border-top-left-radius: 4px;
+        border-top-right-radius: 4px;
+        background-color: #3a3f51;
+      }
+
+      .panel-body {
+        padding: 20px;
+        border-bottom-right-radius: 4px;
+        border-bottom-left-radius: 4px;
+        background-color: #fff;
+      }
+
+      .sign-in {
+        padding: 10px 0;
+        text-align: center;
+      }
+
+      .form-group {
+        margin: 20px 0;
+      }
+
+      .form-input {
+        box-sizing: border-box;
+        padding: 6px 16px;
+        width: 100%;
+        height: 35px;
+        border: 1px solid #dde6e9;
+        border-radius: 4px;
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+      }
+
+      .form-input:focus {
+        outline: 0;
+        border-color: #66afe9;
+        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),
+          0 0 8px rgba(102, 175, 233, 0.6);
+      }
+
+      .button {
+        overflow: hidden;
+        margin-top: 20px;
+        padding: 10px 0;
+        width: 100%;
+        border: 1px solid;
+        border-color: #5899eb;
+        border-radius: 4px;
+        background-color: #5d9cec;
+        color: #fff;
+        vertical-align: middle;
+        text-align: center;
+        white-space: nowrap;
+        line-height: normal;
+      }
+
+      .button:hover {
+        border-color: #3483e7;
+        background-color: #4b91ea;
+        color: #fff;
+        text-decoration: none;
+      }
+
+      .copy {
+        margin-top: 15px;
+        text-align: center;
+        font-size: 14px;
+      }
+
+      .remember-me-container {
+        display: flex;
+        justify-content: space-between;
+        line-height: 25px;
+      }
+
+      .remember-me {
+        font-size: 14px;
+      }
+
+      .forgot-password {
+        margin-left: auto;
+        color: #909fa7;
+        text-decoration: none;
+        font-size: 13px;
+      }
+
+      .forgot-password:focus,
+      .forgot-password:hover {
+        color: #748690;
+        text-decoration: underline;
+      }
+
+      .forgot-password:visited {
+        color: #748690;
+      }
+
+      .login-failed {
+        margin-top: 20px;
+        color: #f05050;
+        font-size: 14px;
+      }
+
+      .hidden {
+        display: none;
+      }
+
+      @media only screen and (min-device-width: 375px) and (max-device-width: 812px) {
+        .form-input {
+          font-size: 16px;
+        }
+      }
+    </style>
+  </head>
+
+  <body>
+    <div class="center">
+      <div class="content">
+        <div class="panel">
+          <div class="panel-header">
+            <img src="/Content/Images/logo.svg" alt="Image" class="logo" />
+          </div>
+
+          <div class="panel-body">
+            <div class="sign-in">
+              SIGN IN TO CONTINUE
+            </div>
+
+            <form
+              role="form"
+              data-parsley-validate=""
+              novalidate=""
+              class="mb-lg"
+              method="POST"
+            >
+              <div class="form-group">
+                <input
+                  type="email"
+                  name="username"
+                  class="form-input"
+                  placeholder="Username"
+                  autocomplete="off"
+                  pattern=".{1,}"
+                  required
+                  title="User name is required"
+                  autoFocus="true"
+                />
+              </div>
+
+              <div class="form-group">
+                <input
+                  type="password"
+                  name="password"
+                  class="form-input"
+                  placeholder="Password"
+                  required
+                />
+              </div>
+
+              <div class="remember-me-container">
+                <span class="remember-me">
+                  <input
+                    type="checkbox"
+                    name="rememberMe"
+                    id="rememberMe"
+                    checked="checked"
+                  />
+                  <label for="rememberMe">Remember Me</label>
+                </span>
+
+                <a
+                  href="https://github.com/Sonarr/Sonarr/wiki/Forgot-my-Password"
+                  class="forgot-password"
+                  >Forgot your password?</a
+                >
+              </div>
+              <button type="submit" class="button">Login</button>
+
+              <div id="login-failed" class="login-failed hidden">
+                Incorrect Username or Password
+              </div>
+            </form>
+          </div>
         </div>
 
-        <form role="form" data-parsley-validate="" novalidate="" class="mb-lg" method="POST">
-          <div class="form-group">
-            <input type="email" name="username" class="form-input" placeholder="Username" autocomplete="off" pattern=".{1,}" required title="User name is required" autoFocus="true">
-          </div>
-
-          <div class="form-group">
-            <input type="password" name="password" class="form-input" placeholder="Password" required>
-          </div>
-
-          <div class="remember-me-container">
-            <span class="remember-me">
-              <input type="checkbox" name="rememberMe" id="rememberMe" checked="checked">
-              <label for="rememberMe">Remember Me</label>
-            </span>
-
-            <a href="https://github.com/Sonarr/Sonarr/wiki/Forgot-my-Password" class="forgot-password">Forgot your password?</a>
-          </div>
-          <button type="submit" class="button">Login</button>
-
-          <div id="login-failed" class="login-failed hidden">
-            Incorrect Username or Password
-          </div>
-        </form>
+        <div id="copy" class="copy hidden">
+          <span>&copy;</span>
+          <span id="year"></span>
+          <span>-</span>
+          <span>Sonarr</span>
+        </div>
       </div>
     </div>
+  </body>
 
-    <div id="copy" class="copy hidden">
-      <span>&copy;</span>
-      <span id="year"></span>
-      <span>-</span>
-      <span>Sonarr</span>
-    </div>
-  </div>
-</div>
-</body>
+  <script type="text/javascript">
+    var yearSpan = document.getElementById("year");
+    yearSpan.innerHTML = "2010-" + new Date().getFullYear();
 
-<script type="text/javascript">
-  var yearSpan = document.getElementById('year');
-  yearSpan.innerHTML = '2010-' + new Date().getFullYear();
+    var copyDiv = document.getElementById("copy");
+    copyDiv.classList.remove("hidden");
 
-  var copyDiv = document.getElementById('copy');
-  copyDiv.classList.remove('hidden');
+    if (window.location.search.indexOf("loginFailed=true") > -1) {
+      var loginFailedDiv = document.getElementById("login-failed");
 
-  if (window.location.search.indexOf('loginFailed=true') > -1) {
-    var loginFailedDiv = document.getElementById('login-failed');
-
-    loginFailedDiv.classList.remove('hidden');
-  }
-</script>
+      loginFailedDiv.classList.remove("hidden");
+    }
+  </script>
 </html>
