Merge branch 'Issue-29-improve-options-page'

raykov · Jul 26, 2020 · b1ec6b8 · b1ec6b8
2 parents b2a3c62 + bcc8985
commit b1ec6b8
Show file tree

Hide file tree

Showing 5 changed files with 200 additions and 78 deletions.
diff --git a/css/options.css b/css/options.css
@@ -1,13 +1,76 @@
-.form {
-  color: #777777;
-  font-family: 'Arial', sans-serif;
+.tabbed figure {
+  display: block;
+  margin-left: 0;
+  border-bottom: 1px solid silver;
+  clear: both;
+}
+
+.tabbed > input,
+.tabbed figure > div { display: none; }
+
+.tabbed figure>div {
+  padding: 20px;
+  width: 100%;
+  border: 1px solid silver;
+  background: #fff;
+  line-height: 1.5em;
+  letter-spacing: 0.3px;
+  color: #444;
+}
+
+#github-tab:checked ~ figure .github-tab,
+#azure-tab:checked ~ figure .azure-tab { display: block; }
+
+nav label {
+  float: left;
+  padding: 15px 25px;
+  border-top: 1px solid silver;
+  border-right: 1px solid silver;
+  background: #464646;
+  color: #eee;
+  cursor:pointer;
+}
+
+nav label:nth-child(1) { border-left: 1px solid silver; }
+nav label:hover { background: #464646; }
+nav label:active { background: #ffffff; }
+
+#github-tab:checked ~ nav label[for="github-tab"],
+#azure-tab:checked ~ nav label[for="azure-tab"]{
+  background: white;
+  color: #111;
+  position: relative;
+  border-bottom: none;
 }
 
-.form label span {
-  width: 400px;
+#github-tab:checked ~ nav label[for="github-tab"]:after,
+#azure-tab:checked ~ nav label[for="azure-tab"]:after{
+  content: "";
   display: block;
+  position: absolute;
+  height: 2px;
+  width: 100%;
+  background: white;
+  left: 0;
+  bottom: -1px;
+}
+
+#github-tab:checked ~ nav label[for="github-tab"].valid,
+#azure-tab:checked ~ nav label[for="azure-tab"].valid,
+#github-tab ~ nav label[for="github-tab"].valid,
+#azure-tab ~ nav label[for="azure-tab"].valid{
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%2328a745' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: center right 5px;
+  background-size: 15px;
 }
 
-.form label input {
-  width: 400px;
+#github-tab:checked ~ nav label[for="github-tab"].invalid,
+#azure-tab:checked ~ nav label[for="azure-tab"].invalid,
+#github-tab ~ nav label[for="github-tab"].invalid,
+#azure-tab ~ nav label[for="azure-tab"].invalid {
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23dc3545' viewBox='-2 -2 7 7'%3e%3cpath stroke='%23dc3545' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center right 5px;
+  background-size: 15px;
 }
diff --git a/js/options.js b/js/options.js
@@ -1,10 +1,5 @@
 saveOptions = () => {
-  console.log({
-    configs: {
-      github: fieldsToData("github"),
-      azure: fieldsToData("azure")
-    }
-  });
+
   chrome.storage.local.set(
     {
       configs: {
@@ -16,6 +11,8 @@ saveOptions = () => {
       const status = document.getElementById("status");
       status.innerHTML = "Options saved";
 
+      restoreOptions()
+
       setTimeout(() => status.innerHTML = "&nbsp;", 750);
       new Storage().load();
     });
@@ -52,20 +49,33 @@ function fieldsToData(provider) {
 }
 
 function fieldValue(field, provider) {
-  return backgrounds[provider === "github" ? "githubConfigs": "azureConfigs"][FIELDS_MAPPING[provider][field] || field] || defaultFieldValue(field, provider);
+  return backgrounds[configByProvider(provider)][FIELDS_MAPPING[provider][field] || field] || defaultFieldValue(field, provider);
+}
+
+function configByProvider(provider) {
+  return provider === "github" ? "githubConfigs": "azureConfigs"
 }
 
 function defaultFieldValue(field, provider) {
   return FIELD_DEFAULTS[provider][field] || ""
 }
 
+function providerByName(provider) {
+  return provider === "github" ? new Github(backgrounds[configByProvider(provider)]) : new Azure(backgrounds[configByProvider(provider)])
+}
+
+function validOrNot(provider) {
+  document.getElementById(provider + "-tab-label").className = providerByName(provider).isEnabled() ? "valid" : "invalid";
+}
+
 restoreOptions = () => {
   new Storage().load(() => {
     ["github", "azure"].forEach(provider => {
       FIELDS[provider].forEach(field => {
-        console.log(fieldValue(field, provider));
         document.getElementById(`${provider}-${field}`).value = fieldValue(field, provider);
-      })
+      });
+
+      validOrNot(provider);
     });
   });
 };

diff --git a/js/providers/azure.js b/js/providers/azure.js
@@ -13,6 +13,10 @@ class Azure {
   request() {
     let self = this;
 
+    if (!self.isEnabled()) {
+      return
+    }
+
     window.requestsData.setProviderLoading(self.name);
 
     if (self.configuration.token === "" || self.configuration.token === null || self.configuration.token === undefined) {
@@ -61,6 +65,18 @@ class Azure {
     request.send();
   }
 
+  isEnabled() {
+    return !this._misconfigured()
+  }
+
+  _misconfigured() {
+    let conf = this.configuration;
+
+    return conf.user === undefined || conf.user === null || conf.user === "" ||
+      conf.token === undefined || conf.token === null || conf.token === "" ||
+      conf.workspace === undefined || conf.workspace === null || conf.workspace === ""
+  }
+
   _authorization() {
     return `Basic ${window.btoa(this.configuration.user + ":" + this.configuration.token)}`
   }

diff --git a/js/providers/github.js b/js/providers/github.js
@@ -13,6 +13,10 @@ class Github {
   request() {
     let self = this;
 
+    if (!self.isEnabled()) {
+      return
+    }
+
     window.requestsData.setProviderLoading(self.name);
 
     const request = new XMLHttpRequest();
@@ -44,6 +48,17 @@ class Github {
     request.send();
   }
 
+  isEnabled() {
+    return !this._misconfigured()
+  }
+
+  _misconfigured() {
+    let conf = this.configuration;
+
+    return conf.username === undefined || conf.username === null || conf.username === "" ||
+      conf.authToken === undefined || conf.authToken === null || conf.authToken === ""
+  }
+
   _authorization() {
     return `token ${this.configuration.authToken}`; // should be this.configuration.token
   }

diff --git a/options.html b/options.html
@@ -10,69 +10,85 @@
     <link href="css/options.css" rel="stylesheet">
   </head>
   <body>
-    <div class="form">
-      <p>
-        <label>
-          <span>Your <a href="https://github.com/settings/tokens" target="_blank">github token</a>: </span>
-          <input type="password" id="github-token">
-        </label>
-      </p>
-      <p><label><span>Your github username: </span><input type="text" id="github-review-requested"></label></p>
+    <div class="tabbed">
+      <input checked="checked" id="github-tab" type="radio" name="tabs" />
+      <input id="azure-tab" type="radio" name="tabs" />
+
+      <nav>
+        <label for="github-tab" id="github-tab-label" class="">Github</label>
+        <label for="azure-tab" id="azure-tab-label" class="">Azure</label>
+      </nav>
+
+      <figure class="form">
+        <div class="github-tab">
+          <p>
+            <label>
+              <span>Your <a href="https://github.com/settings/tokens" target="_blank">github token</a>: </span>
+              <input type="password" id="github-token">
+            </label>
+          </p>
+          <p><label><span>Your github username: </span><input type="text" id="github-review-requested"></label></p>
+
+          <p><a href="#" id="advanced-options-link">Advanced options</a></p>
+          <div id="advanced-options" style="display:none;">
+            <p>
+              <label>
+                <span>What are you looking for: </span>
+                <select id="github-is">
+                  <option value="pr" selected="selected">Pull Request</option>
+                  <option value="issue">Issue</option>
+                </select>
+              </label>
+            </p>
+            <p>
+              <label>
+                <span>In the state: </span>
+                <select id="github-state">
+                  <option value="open" selected="selected">Open</option>
+                  <option value="closed">Closed</option>
+                </select>
+              </label>
+            </p>
+            <p>
+              <label>
+                <span>From these owners: </span>
+                <input type="text" id="github-user">
+              </label>
+            </p>
+            <p>
+              <label>
+                <span>In these repositories: </span>
+                <input type="text" id="github-repo">
+              </label>
+            </p>
+            <p>
+              <label>
+                <span>Opened by the author: </span>
+                <input type="text" id="github-author">
+              </label>
+            </p>
+            <p>
+              <label>
+                <span>Mentioning the users: </span>
+                <input type="text" id="github-mentions">
+              </label>
+            </p>
+          </div>
+        </div>
+
+
+        <div class="azure-tab">
+          <p>
+            <label>
+              <span>Your <a href="https://dev.azure.com/" target="_blank">Azure Personal Access Tokens</a>: </span>
+              <input type="password" id="azure-token">
+            </label>
+          </p>
+          <p><label><span>Your Azure user: </span><input type="text" id="azure-user"></label></p>
+          <p><label><span>Your Azure Organization: </span><input type="text" id="azure-workspace"></label></p>
+        </div>
+      </figure>
 
-      <p><a href="#" id="advanced-options-link">Advanced options</a></p>
-      <div id="advanced-options" style="display:none;">
-        <p>
-          <label>
-            <span>What are you looking for: </span>
-            <select id="github-is">
-              <option value="pr" selected="selected">Pull Request</option>
-              <option value="issue">Issue</option>
-            </select>
-          </label>
-        </p>
-        <p>
-          <label>
-            <span>In the state: </span>
-            <select id="github-state">
-              <option value="open" selected="selected">Open</option>
-              <option value="closed">Closed</option>
-            </select>
-          </label>
-        </p>
-        <p>
-          <label>
-            <span>From these owners: </span>
-            <input type="text" id="github-user">
-          </label>
-        </p>
-        <p>
-          <label>
-            <span>In these repositories: </span>
-            <input type="text" id="github-repo">
-          </label>
-        </p>
-        <p>
-          <label>
-            <span>Opened by the author: </span>
-            <input type="text" id="github-author">
-          </label>
-        </p>
-        <p>
-          <label>
-            <span>Mentioning the users: </span>
-            <input type="text" id="github-mentions">
-          </label>
-        </p>
-      </div>
-      <hr />
-      <p>
-        <label>
-          <span>Your <a href="https://dev.azure.com/" target="_blank">Azure Personal Access Tokens</a>: </span>
-          <input type="password" id="azure-token">
-        </label>
-      </p>
-      <p><label><span>Your Azure user: </span><input type="text" id="azure-user"></label></p>
-      <p><label><span>Your Azure Organization: </span><input type="text" id="azure-workspace"></label></p>
       <div id="status">&nbsp;</div>
       <button id="save">Save</button>
     </div>
@@ -82,6 +98,8 @@
     <script src="js/badge.js"></script>
     <script src="js/notifications.js"></script>
     <script src="js/requests-data.js"></script>
+    <script src="js/providers/github.js"></script>
+    <script src="js/providers/azure.js"></script>
     <script src="js/options.js"></script>
   </body>
 </html>