commit ccdabd93505057b5eb97f037903ec1755c440efd
Author: Admin <admin@MacBook-Air.local>
Date:   Fri May 16 15:02:12 2025 +0700

    first commit

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000..30b1a79
Binary files /dev/null and b/.DS_Store differ
diff --git a/assets/css/index.css b/assets/css/index.css
new file mode 100644
index 0000000..68bea98
--- /dev/null
+++ b/assets/css/index.css
@@ -0,0 +1,134 @@
+/* #bid-extension body {
+  margin: 0;
+  padding: 0;
+  background-color: #121212;
+  color: #e0e0e0;
+  font-family: 'Segoe UI', Tahoma, sans-serif;
+  width: 320px;
+} */
+
+#bid-extension {
+  margin: 0;
+  padding: 0;
+  background-color: #121212;
+  color: #e0e0e0;
+  font-family: "Segoe UI", Tahoma, sans-serif;
+  width: 320px;
+}
+
+#bid-extension .container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+#bid-extension h2 {
+  text-align: center;
+  margin-bottom: 12px;
+  font-size: 22px;
+  color: #ffffff;
+}
+
+#bid-extension label {
+  font-size: 13px;
+  margin-bottom: 2px;
+}
+
+#bid-extension input,
+#bid-extension textarea {
+  padding: 8px;
+  background-color: #1e1e1e;
+  color: #ffffff;
+  border: 1px solid #333;
+  border-radius: 6px;
+  font-size: 14px;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+#bid-extension input:focus,
+#bid-extension textarea:focus {
+  border-color: #4a90e2;
+  outline: none;
+}
+
+#bid-extension .row {
+  display: flex;
+  gap: 10px;
+}
+
+#bid-extension .col {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+#bid-extension .inputs .col {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+#bid-extension button {
+  margin-top: 10px;
+  padding: 10px;
+  background: linear-gradient(to right, #4a90e2, #357abd);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 15px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+#bid-extension button:hover {
+  background: linear-gradient(to right, #3a78c2, #2d5faa);
+}
+
+#bid-extension #errorMessage {
+  margin-top: 2px;
+  font-size: 11px;
+}
+
+#bid-extension .wrapper {
+  position: relative;
+}
+
+#bid-extension .key-container {
+  position: absolute;
+  top: 20px;
+  left: 20px;
+}
+
+#bid-extension .key-container a {
+  color: #ffffff;
+  font-size: 14px;
+  padding: 4px 10px;
+  background: linear-gradient(to right, #4a90e2, #357abd);
+  border-radius: 6px;
+  text-decoration: none;
+  display: inline-block;
+  transition: all 0.3s ease;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+#bid-extension .key-container a:hover {
+  background: linear-gradient(to right, #3a78c2, #2d5faa);
+  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
+  transform: translateY(-2px);
+}
+
+#bid-extension .inputs {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+#bid-extension svg {
+  width: 14px;
+  height: 14px;
+}
+
+#toggle-bid-extension svg {
+  width: 20px;
+  height: 20px;
+}
diff --git a/assets/icons/128.png b/assets/icons/128.png
new file mode 100644
index 0000000..c7de32f
Binary files /dev/null and b/assets/icons/128.png differ
diff --git a/assets/icons/16.png b/assets/icons/16.png
new file mode 100644
index 0000000..46986c5
Binary files /dev/null and b/assets/icons/16.png differ
diff --git a/assets/icons/32.png b/assets/icons/32.png
new file mode 100644
index 0000000..b82bd11
Binary files /dev/null and b/assets/icons/32.png differ
diff --git a/background.js b/background.js
new file mode 100644
index 0000000..9e69979
--- /dev/null
+++ b/background.js
@@ -0,0 +1,4 @@
+chrome.action.onClicked.addListener((tab) => {
+  // Lấy URL của tab hiện tại
+  console.log("Current URL:", tab.url);
+});
diff --git a/content.js b/content.js
new file mode 100644
index 0000000..31be8d2
--- /dev/null
+++ b/content.js
@@ -0,0 +1,389 @@
+const CONFIG = {
+  API_BASE_URL: "http://localhost:4000/api/v1",
+  // API_BASE_URL: "https://bids.apactech.io/api/v1",
+};
+
+let PREV_DATA = null;
+
+function removeFalsyValues(obj, excludeKeys = []) {
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    if (value || excludeKeys.includes(key)) {
+      acc[key] = value;
+    }
+    return acc;
+  }, {});
+}
+
+function extractDomain(url) {
+  try {
+    const parsedUrl = new URL(url);
+    return parsedUrl.origin;
+  } catch (error) {
+    return null;
+  }
+}
+
+function extractModelId(url) {
+  switch (extractDomain(url)) {
+    case "https://www.grays.com": {
+      const match = url.match(/\/lot\/([\d-]+)\//);
+      return match ? match[1] : null;
+    }
+    case "https://www.langtons.com.au": {
+      const match = url.match(/auc-var-\d+/);
+      return match[0];
+    }
+    case "https://www.lawsons.com.au": {
+      const match = url.split("_");
+      return match ? match[1] : null;
+    }
+    case "https://www.pickles.com.au": {
+      const model = url.split("/").pop();
+      return model ? model : null;
+    }
+  }
+}
+
+const showPage = async (pageLink = "pages/popup/popup.html") => {
+  const res = await fetch(chrome.runtime.getURL(pageLink));
+  const html = await res.text();
+
+  const wrapper = document.createElement("div");
+  wrapper.innerHTML = html;
+  document.body.appendChild(wrapper);
+};
+
+const getKey = () => {
+  return new Promise((resolve, reject) => {
+    chrome.storage.local.get("key", (result) => {
+      if (chrome.runtime.lastError) {
+        reject(chrome.runtime.lastError);
+      } else {
+        resolve(result.key || null);
+      }
+    });
+  });
+};
+
+async function handleCreate(event, formElements) {
+  event.preventDefault();
+
+  const key = await getKey();
+  if (!key) {
+    showKey();
+    return;
+  }
+
+  const maxPrice = parseFloat(formElements.maxPrice.value);
+  const plusPrice = parseFloat(formElements.plusPrice.value);
+  const quantity = parseInt(formElements.quantity.value, 10);
+
+  const payload = {
+    url: formElements.url.value.trim(),
+    max_price: isNaN(maxPrice) ? null : maxPrice,
+    plus_price: isNaN(plusPrice) ? null : plusPrice,
+    quantity: isNaN(quantity) ? null : quantity,
+  };
+
+  // Validate required fields
+  if (!payload.url || payload.max_price === null) {
+    alert("Please fill out the URL and Max Price fields correctly.");
+    return;
+  }
+
+  try {
+    const response = await fetch(`${CONFIG.API_BASE_URL}/bids`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: key,
+      },
+      body: JSON.stringify(removeFalsyValues(payload)),
+    });
+
+    const result = await response.json();
+
+    alert(result.message);
+
+    // showInfo
+    await showInfo(extractModelId(payload.url), formElements);
+    // handleChangeTitleButton
+    handleChangeTitleButton(true, formElements);
+  } catch (error) {
+    alert("Error: " + error.message);
+    console.error("API Error:", error);
+  }
+}
+
+async function handleUpdate(event, formElements, id) {
+  event.preventDefault();
+
+  const key = await getKey();
+  if (!key) {
+    showKey();
+    return;
+  }
+
+  const maxPrice = parseFloat(formElements.maxPrice.value);
+  const plusPrice = parseFloat(formElements.plusPrice.value);
+  const quantity = parseInt(formElements.quantity.value, 10);
+
+  const payload = {
+    max_price: isNaN(maxPrice) ? null : maxPrice,
+    plus_price: isNaN(plusPrice) ? null : plusPrice,
+    quantity: isNaN(quantity) ? null : quantity,
+  };
+
+  // Validate required fields
+  if (payload.max_price === null) {
+    alert("Please fill out the URL and Max Price fields correctly.");
+    return;
+  }
+
+  try {
+    const response = await fetch(`${CONFIG.API_BASE_URL}/bids/info/${id}`, {
+      method: "PUT",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: key,
+      },
+      body: JSON.stringify(removeFalsyValues(payload)),
+    });
+
+    const result = await response.json();
+
+    alert(result.message);
+  } catch (error) {
+    alert("Error: " + error.message);
+    console.error("API Error:", error);
+  }
+}
+
+const showBid = () => {
+  const formKey = document.getElementById("form-key");
+  const formBid = document.getElementById("form-bid");
+
+  formKey.style.display = "none";
+  formBid.style.display = "block";
+};
+
+const showKey = async () => {
+  chrome.storage.local.set({ key: null }, async () => {
+    console.log("abc");
+  });
+
+  const key = await getKey();
+
+  const formKey = document.getElementById("form-key");
+  const formBid = document.getElementById("form-bid");
+
+  const keyEl = document.querySelector("#form-key #key");
+
+  formBid.style.display = "none";
+  formKey.style.display = "block";
+
+  if (key && keyEl) {
+    keyEl.value = key;
+  }
+};
+
+const handleToogle = async () => {
+  const btn = document.getElementById("toggle-bid-extension");
+  const panel = document.getElementById("bid-extension");
+
+  if (btn && panel) {
+    btn.addEventListener("click", async () => {
+      const isHidden = panel.style.display === "none";
+      panel.style.display = isHidden ? "block" : "none";
+
+      if (isHidden) {
+        await handleShowForm();
+      }
+    });
+  } else {
+    console.error("Không tìm thấy nút hoặc panel!");
+  }
+};
+
+const handleShowForm = async () => {
+  const formBid = document.getElementById("form-bid");
+  const formKey = document.getElementById("form-key");
+  const keyBtn = document.getElementById("key-btn");
+
+  const currentKey = await getKey();
+
+  if (!currentKey) {
+    await showKey();
+  } else {
+    showBid();
+  }
+
+  keyBtn?.addEventListener("click", () => {
+    showKey();
+  });
+};
+const handleChangeTitleButton = (result, formElements) => {
+  if (result) {
+    formElements.createBtn.textContent = "Update";
+  } else {
+    formElements.createBtn.textContent = "Create";
+  }
+};
+
+const handleSaveKey = () => {
+  const form = document.querySelector("#form-key form");
+  if (!form) return;
+
+  form.addEventListener("submit", async (e) => {
+    e.preventDefault();
+
+    const inputKey = form.querySelector("#key");
+    if (!inputKey) return;
+
+    const keyValue = inputKey.value.trim();
+    if (!keyValue) {
+      alert("Please enter a key");
+      return;
+    }
+
+    // Lưu vào chrome.storage.local
+    chrome.storage.local.set({ key: keyValue }, async () => {
+      alert("Key saved successfully!");
+      showBid();
+
+      if (!isValidModel()) return;
+
+      await showInfo();
+    });
+  });
+};
+
+const isValidModel = () => {
+  const currentUrl = window.location.href;
+
+  const model = extractModelId(currentUrl);
+
+  return !!model;
+};
+
+const createInfoColumn = (data, formElements) => {
+  const inputsContainer = document.querySelector("#bid-extension .inputs");
+  const urlCol = document.querySelector("#url-col");
+
+  if (!inputsContainer || !urlCol) return;
+
+  // 1. Thêm ID và Name vào đầu inputsContainer
+  const otherEls = `
+    <div class="col">
+      <label>ID</label>
+      <input readonly value="${data?.id || "None"}" type="text" id="id" />
+    </div>
+
+    <div class="col">
+      <label>Name</label>
+      <textarea readonly id="maxPrice">${data?.name || "None"}</textarea>
+    </div>
+  `;
+
+  inputsContainer.insertAdjacentHTML("afterbegin", otherEls);
+
+  // 2. Tạo và chèn Current Price ngay sau #url-col
+  const currentPriceDiv = document.createElement("div");
+  currentPriceDiv.className = "col";
+  currentPriceDiv.innerHTML = `
+    <label>Current price</label>
+    <input readonly type="text" value="${
+      data?.current_price || "None"
+    }" id="currentPrice" />
+  `;
+
+  urlCol.parentNode.insertBefore(currentPriceDiv, urlCol.nextSibling);
+
+  formElements.quantity.value = data?.quantity || 1;
+  formElements.plusPrice.value = data?.plus_price || 0;
+};
+
+const showInfo = async (model, formElements) => {
+  const key = await getKey();
+  if (!key) {
+    showKey();
+    return;
+  }
+
+  try {
+    const response = await fetch(`${CONFIG.API_BASE_URL}/bids/${model}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: key,
+      },
+    });
+
+    const result = await response.json();
+
+    if (!result || result?.status_code !== 200 || !result?.data) {
+      if (result.status_code !== 404) {
+        alert(result.message);
+      }
+
+      PREV_DATA = null;
+      return null;
+    }
+
+    formElements.maxPrice.value = result.data.max_price;
+
+    createInfoColumn(result.data, formElements);
+
+    PREV_DATA = result;
+    return result;
+  } catch (error) {
+    alert("Error: " + error.message);
+    console.error("API Error:", error);
+  }
+};
+
+(async () => {
+  await showPage();
+  handleToogle();
+
+  const formElements = {
+    url: document.querySelector("#form-bid #url"),
+    maxPrice: document.querySelector("#form-bid #maxPrice"),
+    plusPrice: document.querySelector("#form-bid #plusPrice"),
+    quantity: document.querySelector("#form-bid #quantity"),
+    createBtn: document.querySelector("#form-bid #createBtn"),
+    form: document.querySelector("#form-bid form"),
+  };
+
+  const style = document.createElement("link");
+  style.rel = "stylesheet";
+  style.href = chrome.runtime.getURL("assets/css/index.css");
+  document.head.appendChild(style);
+
+  const script = document.createElement("script");
+  script.type = "module";
+  script.src = chrome.runtime.getURL("pages/popup/popup.js");
+  script.defer = true;
+
+  document.body.appendChild(script);
+
+  handleSaveKey();
+
+  const currentUrl = window.location.href;
+
+  const model = extractModelId(currentUrl);
+
+  if (!model) return;
+
+  // set url on form
+  formElements.url.value = currentUrl;
+
+  await showInfo(model, formElements);
+  handleChangeTitleButton(!!PREV_DATA, formElements);
+
+  formElements.form.addEventListener("submit", (e) =>
+    PREV_DATA
+      ? handleUpdate(e, formElements, PREV_DATA.data.id)
+      : handleCreate(e, formElements)
+  );
+})();
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..b07736c
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,41 @@
+{
+  "manifest_version": 3,
+  "name": "Bid Extension",
+  "version": "1.0",
+  "description": "Bid Extension",
+  "action": {
+    "default_popup": "pages/popup/popup.html",
+    "default_icon": {
+      "16": "assets/icons/16.png",
+      "32": "assets/icons/32.png",
+      "128": "assets/icons/128.png"
+    }
+  },
+  "background": {
+    "service_worker": "background.js"
+  },
+  "permissions": ["storage"],
+  "host_permissions": ["http://*/*", "https://*/*"],
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content.js"]
+    }
+  ],
+  "web_accessible_resources": [
+    {
+      "resources": [
+        "pages/popup/popup.html",
+        "assets/css/index.css",
+        "config.js",
+        "assets/icons/*"
+      ],
+      "matches": ["<all_urls>"]
+    }
+  ],
+  "icons": {
+    "16": "assets/icons/16.png",
+    "32": "assets/icons/32.png",
+    "128": "assets/icons/128.png"
+  }
+}
diff --git a/pages/popup/popup.html b/pages/popup/popup.html
new file mode 100644
index 0000000..68ead10
--- /dev/null
+++ b/pages/popup/popup.html
@@ -0,0 +1,170 @@
+<div
+  id="bid-toggle-container"
+  style="position: fixed; bottom: 20px; left: 20px; z-index: 9999"
+>
+  <button
+    id="toggle-bid-extension"
+    style="
+      padding: 12px 20px;
+      background: #2c2f36;
+      color: #ffffff;
+      border: none;
+      border-radius: 9999px;
+      font-size: 15px;
+      font-weight: 500;
+      cursor: pointer;
+      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+      transition: background 0.3s ease, transform 0.2s ease;
+    "
+    onmouseover="this.style.background='#3a3d44'; this.style.transform='scale(1.05)'"
+    onmouseout="this.style.background='#2c2f36'; this.style.transform='scale(1)'"
+  >
+    <svg
+      fill="#ffffff"
+      version="1.1"
+      id="Capa_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+      x="0px"
+      y="0px"
+      width="20px"
+      height="20px"
+      viewBox="0 0 494.212 494.212"
+      style="enable-background: new 0 0 494.212 494.212"
+      xml:space="preserve"
+    >
+      <g>
+        <path
+          d="M483.627,401.147L379.99,297.511c-7.416-7.043-16.084-10.567-25.981-10.567c-10.088,0-19.222,4.093-27.401,12.278
+   l-73.087-73.087l35.98-35.976c2.663-2.667,3.997-5.901,3.997-9.71c0-3.806-1.334-7.042-3.997-9.707
+   c0.377,0.381,1.52,1.569,3.423,3.571c1.902,2,3.142,3.188,3.72,3.571c0.571,0.378,1.663,1.328,3.278,2.853
+   c1.625,1.521,2.901,2.475,3.856,2.853c0.958,0.378,2.245,0.95,3.867,1.713c1.615,0.761,3.183,1.283,4.709,1.57
+   c1.522,0.284,3.237,0.428,5.14,0.428c7.228,0,13.703-2.665,19.411-7.995c0.574-0.571,2.286-2.14,5.14-4.712
+   c2.861-2.574,4.805-4.377,5.855-5.426c1.047-1.047,2.621-2.806,4.716-5.28c2.091-2.475,3.569-4.57,4.425-6.283
+   c0.853-1.711,1.708-3.806,2.57-6.28c0.855-2.474,1.279-4.949,1.279-7.423c0-7.614-2.665-14.087-7.994-19.417L236.41,8.003
+   c-5.33-5.33-11.802-7.994-19.413-7.994c-2.474,0-4.948,0.428-7.426,1.283c-2.475,0.854-4.567,1.713-6.28,2.568
+   c-1.714,0.855-3.806,2.331-6.28,4.427c-2.474,2.094-4.233,3.665-5.282,4.712c-1.047,1.049-2.855,3-5.424,5.852
+   c-2.572,2.856-4.143,4.57-4.712,5.142c-5.327,5.708-7.994,12.181-7.994,19.414c0,1.903,0.144,3.616,0.431,5.137
+   c0.288,1.525,0.809,3.094,1.571,4.714c0.76,1.618,1.331,2.903,1.713,3.853c0.378,0.95,1.328,2.24,2.852,3.858
+   c1.525,1.615,2.475,2.712,2.856,3.284c0.378,0.575,1.571,1.809,3.567,3.715c2,1.902,3.193,3.049,3.571,3.427
+   c-2.664-2.667-5.901-3.999-9.707-3.999s-7.043,1.331-9.707,3.999l-99.371,99.357c-2.667,2.666-3.999,5.901-3.999,9.707
+   c0,3.809,1.331,7.045,3.999,9.71c-0.381-0.381-1.524-1.574-3.427-3.571c-1.902-2-3.14-3.189-3.711-3.571
+   c-0.571-0.378-1.665-1.328-3.283-2.852c-1.619-1.521-2.905-2.474-3.855-2.853c-0.95-0.378-2.235-0.95-3.854-1.714
+   c-1.615-0.76-3.186-1.282-4.71-1.569c-1.521-0.284-3.234-0.428-5.137-0.428c-7.233,0-13.709,2.664-19.417,7.994
+   c-0.568,0.57-2.284,2.144-5.138,4.712c-2.856,2.572-4.803,4.377-5.852,5.426c-1.047,1.047-2.615,2.806-4.709,5.281
+   c-2.093,2.474-3.571,4.568-4.426,6.283c-0.856,1.709-1.709,3.806-2.568,6.28C0.432,212.061,0,214.535,0,217.01
+   c0,7.614,2.665,14.082,7.994,19.414l116.485,116.481c5.33,5.328,11.803,7.991,19.414,7.991c2.474,0,4.948-0.422,7.426-1.277
+   c2.475-0.855,4.567-1.714,6.28-2.569c1.713-0.855,3.806-2.327,6.28-4.425s4.233-3.665,5.28-4.716
+   c1.049-1.051,2.856-2.995,5.426-5.855c2.572-2.851,4.141-4.565,4.712-5.14c5.327-5.709,7.994-12.184,7.994-19.411
+   c0-1.902-0.144-3.617-0.431-5.14c-0.288-1.526-0.809-3.094-1.571-4.716c-0.76-1.615-1.331-2.902-1.713-3.854
+   c-0.378-0.951-1.328-2.238-2.852-3.86c-1.525-1.615-2.475-2.71-2.856-3.285c-0.38-0.571-1.571-1.807-3.567-3.717
+   c-2.002-1.902-3.193-3.045-3.571-3.429c2.663,2.669,5.902,4.001,9.707,4.001c3.806,0,7.043-1.332,9.707-4.001l35.976-35.974
+   l73.086,73.087c-8.186,8.186-12.278,17.312-12.278,27.401c0,10.283,3.621,18.843,10.849,25.7L401.42,483.643
+   c7.042,7.035,15.604,10.561,25.693,10.561c9.896,0,18.555-3.525,25.981-10.561l30.546-30.841
+   c7.043-7.043,10.571-15.605,10.571-25.693C494.212,417.231,490.684,408.566,483.627,401.147z"
+        />
+      </g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+      <g></g>
+    </svg>
+    
+  </button>
+</div>
+
+<div
+  id="bid-extension"
+  class="wrapper"
+  style="
+    display: none;
+    position: fixed;
+    bottom: 90px;
+    left: 20px;
+    z-index: 9999;
+    background-color: #1e1e1e;
+    border-radius: 12px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+    padding: 20px;
+    width: 320px;
+  "
+>
+  <!-- Form bid -->
+  <div style="display: none" id="form-bid">
+    <form class="container">
+      <h2>Bid</h2>
+      <div class="inputs">
+        <div id="url-col" class="col">
+          <label>Url</label>
+          <input readonly type="text" id="url" />
+        </div>
+
+        <div class="col">
+          <label>Max price</label>
+          <input type="number" id="maxPrice" />
+        </div>
+
+        <div class="col">
+          <label>Plus price</label>
+          <input type="number" id="plusPrice" />
+        </div>
+
+        <div class="col">
+          <label>Quantity</label>
+          <input type="number" id="quantity" />
+        </div>
+      </div>
+      <button type="submit" id="createBtn">Create</button>
+    </form>
+
+    <div class="key-container">
+      <span id="key-btn" class="key-btn">
+        <svg
+          fill="#ffffff"
+          height="14px"
+          width="14px"
+          viewBox="0 0 367.578 367.578"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M281.541,97.751c0-53.9-43.851-97.751-97.751-97.751S86.038,43.851,86.038,97.751
+            c0,44.799,30.294,82.652,71.472,94.159v144.668c0,4.026,1.977,9.1,4.701,12.065l14.514,15.798
+            c1.832,1.993,4.406,3.136,7.065,3.136s5.233-1.143,7.065-3.136l14.514-15.798
+            c2.724-2.965,4.701-8.039,4.701-12.065v-7.387l14.592-9.363
+            c2.564-1.646,4.035-4.164,4.035-6.909c0-2.744-1.471-5.262-4.036-6.907l-14.591-9.363v-0.207
+            l14.592-9.363c2.564-1.646,4.035-4.164,4.035-6.909c0-2.744-1.471-5.262-4.036-6.907l-14.591-9.363v-0.207
+            l14.592-9.363c2.564-1.646,4.035-4.164,4.035-6.908c0-2.745-1.471-5.263-4.036-6.909l-14.591-9.363V191.91
+            C251.246,180.403,281.541,142.551,281.541,97.751z
+            M183.789,104.948c-20.985,0-37.996-17.012-37.996-37.996s17.012-37.996,37.996-37.996
+            s37.996,17.012,37.996,37.996S204.774,104.948,183.789,104.948z"
+          />
+        </svg>
+      </span>
+    </div>
+  </div>
+
+  <!-- Form key -->
+  <div style="display: block" id="form-key">
+    <form class="container">
+      <h2>Key</h2>
+      <div class="inputs">
+        <div class="col">
+          <label>Key</label>
+          <input type="password" id="key" />
+        </div>
+      </div>
+      <button type="submit" id="saveKeyBtn">Save</button>
+    </form>
+  </div>
+</div>