1
<!doctype html>
2
<html>
3
 
4
<head>
5
    <meta charset="UTF-8">
6
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
    <title>Config Migrator</title>
8
    <script src="https://cdn.tailwindcss.com"></script>
9
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"
10
        integrity="sha512-CSBhVREyzHAjAFfBlIBakjoRUKp5h7VSweP0InR/pAJyptH7peuhCsqAI/snV+TwZmXZqoUklpXp6R6wMnYf5Q=="
11
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
12
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsrsasign/10.8.0/jsrsasign-all-min.min.js"
13
        integrity="sha512-mXeUv7ZNMSyVwU1Sf6jr+4PnJTJwfvnJnSZ/3ftVdK4Ucrys5g/rsMZXvmnQfm2JpCZbCYEjzSqVeLtaqVM1wg=="
14
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
15
</head>
16
 
17
<body>
18
    <div class="container mx-auto max-w-screen-xl mt-10">
19
        <form spellcheck="false">
20
            <div class="w-full bg-gray-50 rounded-lg border border-gray-200 dark:bg-gray-700 dark:border-gray-600">
21
                <div class="py-2 px-4 bg-white rounded-t-lg dark:bg-gray-800">
22
                    <label for="config" class="sr-only">Config</label>
23
                    <textarea id="config" rows="10"
24
                        class="px-0 w-full text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
25
                        placeholder="content of v1 specter.yaml" required></textarea>
26
                </div>
27
                <div class="flex justify-between items-center py-2 px-3 border-t dark:border-gray-600">
28
                    <button type="submit"
29
                        class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-blue-700 rounded-lg focus:ring-4 focus:ring-blue-200 dark:focus:ring-blue-900 hover:bg-blue-800">
30
                        Migrate
31
                    </button>
32
                </div>
33
            </div>
34
        </form>
35
        <pre id="result" class="mx-auto px-5 my-5 text-sm"></pre>
36
        </p>
37
    </div>
38
    <script>
39
        const element = document.querySelector('form');
40
        const config = document.getElementById("config")
41
        const result = document.getElementById("result")
42
        element.addEventListener('submit', async (event) => {
43
            event.preventDefault();
44
            const resp = await fetch(new Request(window.location.href, {
45
                method: 'POST',
46
                body: config.value,
47
            }))
48
            if (resp.status === 200) {
49
                const yaml = await resp.text()
50
                const parsed = jsyaml.load(yaml)
51
                const cert = new X509()
52
                cert.readCertPEM(parsed.certificate)
53
                result.innerText = `${cert.getSubjectString()}\n\n${yaml}`
54
            } else {
55
                result.innerText = `Error (${resp.status}):\n${await resp.text()}`
56
            }
57
        });
58
    </script>
59
</body>
60
 
61
</html>