v1.2.0 - Add manual URL generation

options/options.html

@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+
+<html>
+
+  <head>
+    <meta charset="utf-8">
+    <style>
+     body {
+         display: flex;
+         flex-direction: column;
+         padding: 5px;
+         height: 300px;
+     }
+
+     div {
+         display: flex;
+         align-items: baseline;
+     }
+
+     label {
+         padding: 0 10px;
+         width: 600px;
+         align-items: baseline;
+         padding: 5px 0;
+     }
+
+     input {
+         min-width: 150px;
+         min-height: 17px;
+         padding: 5px;
+         border: 2px solid black;
+         border-radius: 7px;
+         text-align: center;
+     }
+
+     .warning {
+         color: red;
+         display: block !important;
+     }
+
+     .note {
+         font-weight: bold;
+         margin-top: 0px;
+     }
+
+     p,
+     label {
+         font-size: 15px;
+     }
+
+     code {
+         font-weight: bold;
+     }
+
+     main {
+         display: flex;
+         flex-direction: column;
+     }
+
+     #message,
+     #message2 {
+         display: none;
+     }
+
+     .header {
+         display: flex;
+         align-items: center;
+     }
+
+     .header img {
+         padding-right: 10px;
+     }
+
+     .settings {
+         border: 2px solid black;
+         padding: 10px;
+         border-radius: 10px;
+         margin-top: 5px;
+     }
+
+     .settings h2 {
+         min-width: 110px;
+     }
+
+     .checkbox {
+         flex-wrap: wrap;
+     }
+
+    </style>
+  </head>
+
+  <body>
+    <div class="header">
+        <img src="/icons/chhoto-url-48.png"></img>
+        <h1>Chhoto URL Settings</h1>
+    </div>
+
+    <div class="settings">
+        <h2>Instance URL</h2>
+        <label>
+            <input type="text" id="host" placeholder="https://l.example.com">
+            <br>
+            <p>Don't have one? See <a target="_blank" href="https://github.com/sintan1729/chhoto-url#building-and-running-with-docker">here</a> for more information.</p>
+        </label>
+    </div>
+    <p id="message" class="note">A non-HTTPS connection is insecure! This is disallowed as per Firefox's <a target="_blank" href="https://extensionworkshop.com/documentation/publish/add-on-policies/#development-practices"">development practices</a>.</p>
+
+    <div class="settings">
+        <h2>API Key</h2>
+        <label>
+            <input type="password" id="key" placeholder="Long API Key">
+            <p>This is the API key that the extension will use to connect to your Chhoto URL instance. To enable this, set the <strong>"api_key"</strong> environment variable in the server configuration.</p>
+            <p>See <strong>Section 1.c</strong> <a target="_blank" href="https://github.com/sintan1729/chhoto-url#building-and-running-with-docker">here</a> for more information.</p>
+        </label>
+    </div>
+    <p class="note">Important: The Chhoto URL server (not the extension) will output in the console whether or not your key is secure. If it isn't, it will generate a suggested key and output it. Always follow its advice.</p>
+
+    <div class="settings checkbox">
+        <h2>Protocol Filters</h2>
+        <label>
+            Allow <code>http://</code> links
+            <input type="checkbox" id="allow-http">
+        </label>
+        <label>
+            Allow <code>https://</code> links
+            <input type="checkbox" id="allow-https">
+        </label>
+        <label>
+            Allow <code>file://</code> links
+            <input type="checkbox" id="allow-file">
+        </label>
+        <label>
+            Allow <code>ftp://</code> links
+            <input type="checkbox" id="allow-ftp">
+        </label>
+    </div>
+    <p class="note">Disabling all filters will allow a link to be created from any URL.</p>
+
+    <div class="settings checkbox">
+        <h2>URL Generation</h2>
+        <label>
+            Create shortened links with the website's title
+            <input type="checkbox" id="generate-with-title">
+        </label>
+        <label id="title-word-limit-label">
+            Short URL word limit
+            <input type="input" id="title-word-limit">
+            <p class="note">Inputting "0" will remove the character limit</p>
+        </label>
+        <p id="message2" class="note">Inputted value is not a number.</p>
+    </div>
+
+    <script type="application/javascript" src="/lib/browser-polyfill.min.js"></script>
+    <script type="application/javascript" src="/options/options.js"></script>
+  </body>
+
+</html>