Разработано веб-приложение

2026-03-13 00:36:35 +03:00
commit 7b703f3f97
3 changed files with 127 additions and 0 deletions
--- a/index.html
+++ b/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <title>OTP AUTH Parser</title>
+        <link rel="stylesheet" href="/style.css" type="text/css" />
+        <script src="/script.js"></script>
+    </head>
+    <body>
+        <form id="form">
+            <div>
+                <label for="url">URL:</label>
+                <input id="url" />
+            </div>
+
+            <div>
+                <label for="type">type:</label>
+                <input id="type" />
+            </div>
+
+            <div>
+                <label for="label">label:</label>
+                <input id="label" />
+            </div>
+
+            <div>
+                <label for="secret">secret:</label>
+                <input id="secret" />
+            </div>
+
+            <div>
+                <label for="issuer">issuer:</label>
+                <input id="issuer" />
+            </div>
+
+            <br />
+
+            <div id="dynamic"></div>
+
+            <br />
+
+            <input type="reset" />
+        </form>
+    </body>
+</html>
--- a/script.js
+++ b/script.js
@@ -0,0 +1,65 @@
+window.addEventListener('DOMContentLoaded', () => {
+    const $url = document.querySelector('#url')
+    const $type = document.querySelector('#type')
+    const $label = document.querySelector('#label')
+    const $secret = document.querySelector('#secret')
+    const $issuer = document.querySelector('#issuer')
+    const $dynamic = document.querySelector('#dynamic')
+
+    $url.oninput = () => {
+        const url = new URL($url.value)
+
+        $type.value = decodeURIComponent(url.hostname || 'totp')
+        $type.oninput = () => {
+            url.hostname = encodeURIComponent($type.value)
+            $url.value = url.href
+        }
+
+        $label.value = decodeURIComponent(url.pathname.replace(/^\//, '') || '')
+        $label.oninput = () => {
+            url.pathname = encodeURIComponent($label.value)
+            $url.value = url.href
+        }
+
+        const onInput = ($input, key) => {
+            $input.value = url.searchParams.get(key) || ''
+            $input.oninput = () => {
+                if ($input.value)
+                    url.searchParams.set(key, $input.value || '')
+                else
+                    url.searchParams.delete(key)
+                $url.value = url.href
+            }
+        }
+
+        onInput($secret, 'secret')
+        onInput($issuer, 'issuer')
+
+        let dynamicCount = 0
+
+        $dynamic.innerHTML = ''
+
+        url.searchParams.keys().forEach(key => {
+            switch (key) {
+                case 'secret':
+                case 'issuer':
+                    break;
+
+                default:
+                    dynamicCount += 1
+                    const id = `dynamic-${dynamicCount}`
+                    const $label = document.createElement('label')
+                    $label.for = id
+                    $label.textContent = key
+                    const $input = document.createElement('input')
+                    $input.id = id
+                    onInput($input, key)
+                    const $div = document.createElement('div')
+                    $div.appendChild($label)
+                    $div.appendChild($input)
+                    $dynamic.appendChild($div)
+                    break;
+            }
+        })
+    }
+})
--- a/style.css
+++ b/style.css
@@ -0,0 +1,17 @@
+#form, #dynamic {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+}
+
+label {
+    font-family: sans-serif;
+    font-weight: bold;
+}
+
+input {
+    margin-top: .25rem;
+    width: 100%;
+    box-sizing: border-box;
+    font-size: 1.5rem;
+}