form.html

 1<!DOCTYPE html>
 2<html lang="en-US">
 3    <head>
 4        <title>Credentials submission area | {{ .Org.Name }}</title>
 5        <meta charset="utf-8">
 6        <meta http-equiv="x-ua-compatible" content="ie=edge">
 7        <meta name="description" content="Securely send credentials to {{ .Org.Name }}">
 8        <meta name="viewport" content="width=device-width, initial-scale=1">
 9        <link rel="stylesheet" href="/static/pico.classless.min.css">
10        <script src="/static/wasm_exec.js"></script>
11        <script>
12            const go = new Go();
13            WebAssembly.instantiateStreaming(fetch("/static/age.wasm"), go.importObject).then((result) => {
14                go.run(result.instance);
15            });
16        </script>
17        <style>
18         :root {
19             --primary: {{ .Org.Primarycolour }} !important;
20         }
21        </style>
22    </head>
23    <body>
24        <main>
25            <section>
26                <hgroup>
27                    <h2>Credentials submission area</h2>
28                    <h3>Securely submit credentials to {{ .Org.Name }}</h3>
29                </hgroup>
30            </section>
31            <section>
32                <p>This is a tool run by {{ .Org.Name }} that allows us to receive clients' credentials in a secure manner. Sending usernames and passwords over SMS or email is <i>not</i> secure and asking our clients to do so would be irresponsible. Please use this form when sending us usernames and passwords. We will never ask for them any other way.</p>
33            </section>
34            <section>
35                <form id="encryptform">
36                    <label for="orgname">Name</label>
37                    <input type="text" id="orgname" name="orgname" placeholder="Your name or that of your business/organisation" required>
38                    <label for="servicename">Service name</label>
39                    <input type="text" id="servicename" name="servicename" placeholder="Name of the service these credentials are for" required>
40                    <label for="username">Service username</label>
41                    <input type="text" id="username" name="username" placeholder="Username or email address you enter when logging in" required>
42                    <label for="password">Service password</label>
43                    <input type="password" id="password" name="password" placeholder="Password you enter when logging in" required>
44                    <label for="notes">Notes</label>
45                    <textarea rows="5" id="notes" name="notes" placeholder="Any additional notes about the service or these credentials"></textarea>
46                    <button type="submit">Submit</button>
47                </form>
48            </section>
49        </main>
50        <footer>
51        </footer>
52        <script>
53        document.getElementById("encryptform").addEventListener("submit", function(e) {
54            e.preventDefault();
55            const orgname = document.getElementById("orgname").value;
56            const servicename = document.getElementById("servicename").value;
57            const username = document.getElementById("username").value;
58            const password = document.getElementById("password").value;
59            const notes = document.getElementById("notes").value;
60            const message = `Age-encrypted credentials from ${orgname}\nService: ${servicename}\nUsername: ${username}\nPassword: ${password}\nNotes: ${notes}\n`;
61
62            const result = encrypt("{{ .Org.Agepubkey }}", message);
63
64            if (result.error) {
65                alert("An error occured while encrypting your data. Please contact {{ .Org.Name }}.");
66            } else {
67                fetch(window.location.href, {
68                    method: "POST",
69                    body: result.output
70                }).then((response) => {
71                    if (response.ok) {
72                        window.location.href = "/success";
73                    } else {
74                        alert("An error occured while submitting your data. Please contact {{ .Org.Name }}.");
75                    }
76                });
77            }
78        })
79        </script>
80    </body>
81</html>