From cc39bf253570df318a323ccb643653ee434523c7 Mon Sep 17 00:00:00 2001
From: "Florine W. Dekker" <florine@fwdekker.com>
Date: Tue, 22 Nov 2022 20:27:44 +0100
Subject: [PATCH] Upgrade template to v3

Fixes #46. Fixes #49. Fixes #51.
---
 package-lock.json             | Bin 215305 -> 211992 bytes
 package.json                  |  14 +-
 src/main/css/main.css         |  56 ++--
 src/main/index.html           | 165 ++++++------
 src/main/js/DOM.ts            | 471 ----------------------------------
 src/main/js/InterlangTable.ts | 136 ++++++++++
 src/main/js/Main.ts           | 163 +++++-------
 src/main/js/MediaWiki.ts      |  22 +-
 src/main/js/Shared.ts         |   2 +-
 9 files changed, 340 insertions(+), 689 deletions(-)
 delete mode 100644 src/main/js/DOM.ts
 create mode 100644 src/main/js/InterlangTable.ts

diff --git a/package-lock.json b/package-lock.json
index 9d26c3b0adfdd86894b9d5e54454db7d57a3efe1..a8debacddbc72a1ed1e23350b1fbd38904b14a9d 100644
GIT binary patch
delta 8705
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
H&B}iVDFutG

delta 9218
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

diff --git a/package.json b/package.json
index 12f3f43..d84a61c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "interlanguage-checker",
-    "version": "1.13.6",
+    "version": "1.13.7",
     "description": "Check the consistency of MediaWiki interlanguage links in a simple overview.",
     "author": "Florine W. Dekker",
     "browser": "dist/bundle.js",
@@ -16,17 +16,17 @@
         "deploy": "grunt deploy"
     },
     "devDependencies": {
-        "grunt": "^1.4.1",
+        "grunt": "^1.5.3",
         "grunt-cli": "^1.4.3",
-        "grunt-contrib-clean": "^2.0.0",
+        "grunt-contrib-clean": "^2.0.1",
         "grunt-contrib-copy": "^1.0.0",
         "grunt-contrib-watch": "^1.1.0",
         "grunt-focus": "^1.0.0",
         "grunt-text-replace": "^0.4.0",
         "grunt-webpack": "^5.0.0",
-        "ts-loader": "^9.2.6",
-        "typescript": "^4.5.5",
-        "webpack": "^5.69.1",
-        "webpack-cli": "^4.9.2"
+        "ts-loader": "^9.4.1",
+        "typescript": "^4.9.3",
+        "webpack": "^5.75.0",
+        "webpack-cli": "^5.0.0"
     }
 }
diff --git a/src/main/css/main.css b/src/main/css/main.css
index 78c3a21..930522f 100644
--- a/src/main/css/main.css
+++ b/src/main/css/main.css
@@ -20,12 +20,12 @@ summary {
 /***
  * Table
  **/
-#networkTableForm {
+#network-table-form {
     /* Center table */
     width: 100%;
 }
 
-#networkTable {
+#network-table {
     /* Center table */
     margin: 0 auto;
 
@@ -36,27 +36,32 @@ summary {
 
 
 /* Text alignment */
-#networkTable th.sourceLabel, #networkTable td.sourceLabel {
+#network-table th.sourceLabel,
+#network-table td.sourceLabel {
     text-align: right;
 }
 
-#networkTable th:not(.sourceLabel), #networkTable td:not(.sourceLabel) {
+#network-table th:not(.sourceLabel),
+#network-table td:not(.sourceLabel) {
     text-align: center;
 }
 
 
 /* Borders */
-#networkTable th, #networkTable td {
+#network-table th,
+#network-table td {
     border-right: 1px solid var(--table-border-color);
     border-bottom: 1px solid var(--table-border-color);
 }
 
-#networkTable tr:last-child {
+#network-table tr:last-child {
     border-bottom: none;
 }
 
-#networkTable th:first-child, #networkTable td:first-child,
-#networkTable th:last-child, #networkTable td:last-child {
+#network-table th:first-child,
+#network-table td:first-child,
+#network-table th:last-child,
+#network-table td:last-child {
     /* Undo Milligram padding because it looks bad with column borders */
     padding-left: 1.5rem;
     padding-right: 1.5rem;
@@ -64,26 +69,31 @@ summary {
 
 
 /* Table colors */
-#networkTable tbody tr:nth-child(odd) {
+#network-table tbody tr:nth-child(odd) {
     background-color: var(--table-row-color);
 }
 
-#networkTable th a i {
+#network-table th a i {
     font-size: 0.9em;
     font-weight: normal;
 }
 
-#networkTable a {
+#network-table a {
     cursor: pointer;
 }
 
+#network-table a::after {
+    display: none;
+}
+
 
 /* Shared colors */
-.redLink a {
+.red-link a {
     color: var(--fandom-redlink);
 }
 
-span.success, i.success {
+span.success,
+i.success {
     color: var(--success-color);
 }
 
@@ -92,7 +102,8 @@ div.success {
     background-color: var(--success-bg-color);
 }
 
-span.error, i.error {
+span.error,
+i.error {
     color: var(--error-color);
 }
 
@@ -101,7 +112,8 @@ div.error {
     background-color: var(--error-bg-color);
 }
 
-span.warning, i.warning {
+span.warning,
+i.warning {
     color: var(--warning-color);
 }
 
@@ -110,7 +122,8 @@ div.warning {
     background-color: var(--warning-bg-color);
 }
 
-span.info, i.info {
+span.info,
+i.info {
     color: var(--info-color);
 }
 
@@ -123,20 +136,23 @@ div.info {
 /***
  * Messages, errors, etc.
  **/
-#errors, #messages {
+#errors,
+#messages {
     width: 100%;
     text-align: center;
 }
 
-.errorOuter, .messageOuter {
+.error-outer,
+.message-outer {
     display: inline-block;
 }
 
-.errorInner {
+.error-inner {
     margin-bottom: 1em;
 }
 
-.errorInner, .messageInner {
+.error-inner,
+.message-inner {
     padding: 1em;
 
     border-width: 1px;
diff --git a/src/main/index.html b/src/main/index.html
index 2bb6fd7..303ad37 100644
--- a/src/main/index.html
+++ b/src/main/index.html
@@ -8,18 +8,25 @@
     <meta name="description" content="Check the consistency of MediaWiki interlanguage links in a simple overview." />
     <meta name="theme-color" content="#0033cc" />
 
+    <meta name="fwd:auto:show-main" />
+    <meta name="fwd:nav:target" content="#nav" />
+    <meta name="fwd:nav:highlight-path" content="/Tools/Interlanguage Checker/" />
+    <meta name="fwd:footer:target" content="#footer" />
+    <meta name="fwd:footer:vcs-url" content="https://git.fwdekker.com/tools/interlanguage-checker/" />
+    <meta name="fwd:footer:version" content="v%%VERSION_NUMBER%%" />
+    <meta name="fwd:validation:load-forms" />
+
     <title>Interlanguage Checker | FWDekker</title>
 
-    <link rel="stylesheet" href="https://static.fwdekker.com/fonts/roboto/roboto.css" />
     <link rel="stylesheet" href="https://static.fwdekker.com/fonts/fork-awesome/1.x.x/fork-awesome.css" />
-    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/2.x.x/template.css" />
+    <link rel="stylesheet" href="https://static.fwdekker.com/lib/template/3.x.x/template.css?v=%%VERSION_NUMBER%%" />
     <!--suppress HtmlUnknownTarget -->
     <link rel="stylesheet" href="main.css?v=%%VERSION_NUMBER%%" />
     <script async src="https://stats.fwdekker.com/count.js"
             data-goatcounter="https://stats.fwdekker.com/count"></script>
 </head>
 <body>
-<noscript>
+<noscript class="fwd-js-notice">
     <img src="https://stats.fwdekker.com/count?p=/tools/interlanguage-checker/" alt="Counting pixel" />
 
     <p>
@@ -28,92 +35,92 @@
         instructions on how to enable JavaScript in your web browser</a>.
     </p>
 </noscript>
+<nav id="nav"></nav>
 <main class="hidden">
-    <div id="nav"></div>
-    <div id="contents">
-        <div id="header"></div>
-
-        <!-- About -->
+    <div role="document">
         <section class="container">
-            <div class="row">
-                <div class="column">
-                    <details open id="about">
-                        <summary><b>About</b></summary>
-                        <span>
-                        <a href="https://community.fandom.com/wiki/Help:Interlanguage_link">&#9099; Interlanguage links</a>
-                        allow wikis to tell users where to find translations of articles.
-                        Without the
-                        <a href="https://www.mediawiki.org/wiki/Extension:Interlanguage">&#9099; interlanguage extension</a>,
-                        each translation is responsible for maintaining its own outgoing links.
-                        As the number of translations grows, the network of links becomes more <b>complex</b>, and the
-                        number of errors grows.<br />
-                        <br />
-                        The <b>Interlanguage Checker</b> traverses the network of interlanguage links starting from a
-                        given article and shows you that network in a table.
-                        If there are missing or incorrect links, you can quickly spot them and <b>fix</b>
-                        them.<br />
-                        <br />
-                        To use the tool, you should enter the link to the
-                        <a href="https://www.mediawiki.org/wiki/API:Main_page">&#9099; API of the wiki</a> you want to
-                        check.
-                        For <b>Wikimedia</b> wikis, this is <code>https://&lt;example.org&gt;/w/api.php</code>.
-                        For <b>Fandom</b> wikis, this is <code>https://&lt;wiki&gt;.fandom.com/api.php</code>.<br />
-                        <br />
-                        If the application <b>refuses to connect</b> to the API and you are certain the URL is correct,
-                        make sure that you allow scripts to be executed from the API you have entered by checking the
-                        configuration of your <b>tracking blockers</b>.
-                        These <b>external scripts</b> are necessary to provide support to older wikis that rely on
-                        <a href="https://en.wikipedia.org/wiki/JSONP">&#9099; JSONP requests</a> to interact with the
-                        API.<br />
-                        <br />
-                        If you need <b>help</b>, have a question, or found a bug, please
-                        <a href="https://git.fwdekker.com/FWDekker/interlanguage-checker/issues/new">&#9099; open an issue</a>
-                        or <a href="https://fallout.fandom.com/wiki/User_talk:FDekker">&#9099; leave a talk message</a>.
-                    </span>
-                    </details>
-                    <p></p>
-                </div>
-            </div>
+            <header class="fwd-header">
+                <hgroup>
+                    <h1><a href=".">Interlanguage Checker</a></h1>
+                    <h2>Check the consistency of MediaWiki interlanguage links in a simple overview.</h2>
+                </hgroup>
+            </header>
+
+            <details open id="about">
+                <summary><b>About</b></summary>
+                <p>
+                    <a href="https://community.fandom.com/wiki/Help:Interlanguage_link" target="_blank">
+                        Interlanguage links</a>
+                    allow wikis to tell users where to find translations of articles.
+                    Without the
+                    <a href="https://www.mediawiki.org/wiki/Extension:Interlanguage" target="_blank">
+                        interlanguage extension</a>,
+                    each translation is responsible for maintaining its own outgoing links.
+                    As the number of translations grows, the network of links becomes more <b>complex</b>, and the
+                    number of errors grows.
+                </p>
+                <p>
+                    The <b>Interlanguage Checker</b> traverses the network of interlanguage links starting from a
+                    given article and shows you that network in a table.
+                    If there are missing or incorrect links, you can quickly spot them and <b>fix</b> them.
+                </p>
+                <p>
+                    To use the tool, you should enter the link to the
+                    <a href="https://www.mediawiki.org/wiki/API:Main_page" target="_blank">API of the wiki</a> you want
+                    to check.
+                    For <b>Wikimedia</b> wikis, this is <code>https://&lt;example.org&gt;/w/api.php</code>.
+                    For <b>Fandom</b> wikis, this is <code>https://&lt;wiki&gt;.fandom.com/api.php</code>.
+                </p>
+                <p>
+                    If the application <b>refuses to connect</b> to the API and you are certain the URL is correct,
+                    make sure that you allow scripts to be executed from the API you have entered by checking the
+                    configuration of your <b>tracking blockers</b>.
+                    These <b>external scripts</b> are necessary to provide support to older wikis that rely on
+                    <a href="https://en.wikipedia.org/wiki/JSONP" target="_blank">JSONP requests</a> to interact with
+                    the API.
+                </p>
+                <p>
+                    If you need <b>help</b>, have a question, or found a bug, please
+                    <a href="https://git.fwdekker.com/FWDekker/interlanguage-checker/issues/new" target="_blank">
+                        open an issue</a>
+                    or
+                    <a href="https://fallout.fandom.com/wiki/User_talk:FDekker" target="_blank">
+                        leave a talk message</a>.
+                </p>
+            </details>
+
+            <form id="inputs">
+                <label for="url">API</label>
+                <input id="url" type="url" placeholder="https://fallout.fandom.com/api.php" autocomplete="url"
+                       autofocus />
+                <small id="url-hint" data-hint-for="url" data-hint="The URL to the wiki's api.php."></small>
+
+                <label for="article">Article</label>
+                <input id="article" type="text" placeholder="Master" />
+                <small id="article-hint" data-hint-for="article" data-hint="The title of the article to check."></small>
+
+                <button id="submit">Check</button>
+            </form>
+
+            <hr />
+            <article class="status-card hidden" data-status-for="inputs">
+                <output></output>
+            </article>
         </section>
 
-        <!-- Input -->
-        <section class="container">
-            <div class="row">
-                <div class="column">
-                    <form>
-                        <label for="url">
-                            API&nbsp;
-                            <i class="fa fa-question-circle-o" title="The URL to the wiki's api.php"></i>
-                        </label>
-                        <input id="url" type="url" autofocus />
-
-                        <label for="article">
-                            Article&nbsp;
-                            <i class="fa fa-question-circle-o" title="The title of the article to check"></i>
-                        </label>
-                        <input id="article" type="text" />
-                        <br />
-                        <button id="check" type="button">Check</button>
-                    </form>
-                </div>
-            </div>
-        </section>
-
-        <!-- Output -->
         <section>  <!-- No `container` class, to allow use of whole width -->
-            <hr />
-            <div id="errors"></div>
-            <div id="messages"></div>
-            <hr />
-            <form id="networkTableForm">
-                <table id="networkTable"></table>
+            <form id="network-table-form">
+                <table id="network-table"></table>
             </form>
         </section>
+
+        <section class="container">
+            <footer id="footer"></footer>
+        </section>
     </div>
-    <div id="footer"></div>
 </main>
 
-<script src="https://static.fwdekker.com/lib/template/2.x.x/template.js"></script>
+<script src="https://static.fwdekker.com/lib/template/3.x.x/template.js?v=%%VERSION_NUMBER%%"></script>
 <!--suppress HtmlUnknownTarget -->
 <script src="bundle.js?v=%%VERSION_NUMBER%%"></script>
 </body>
diff --git a/src/main/js/DOM.ts b/src/main/js/DOM.ts
deleted file mode 100644
index c07ef3e..0000000
--- a/src/main/js/DOM.ts
+++ /dev/null
@@ -1,471 +0,0 @@
-// @ts-ignore
-const {stringToHtml} = window.fwdekker;
-import {InterlangNetwork, LinkVerdict, Page, PageVerdict} from "./MediaWiki";
-
-
-/**
- * An input that can be validated.
- */
-export class ValidatableInput {
-    /**
-     * The validatable input.
-     */
-    readonly input: HTMLInputElement;
-    /**
-     * Returns an empty string if the given input string is valid, and a string explaining why it is invalid otherwise.
-     *
-     * @private
-     */
-    private readonly isValid: (input: string) => string;
-
-
-    /**
-     * Constructs a new validatable input.
-     *
-     * @param input the input that is validatable
-     * @param isValid returns an empty string if the given input string is valid, and a string explaining why it is is
-     * invalid otherwise
-     */
-    constructor(input: HTMLInputElement, isValid: ((input: string) => string)) {
-        this.input = input;
-        this.isValid = isValid;
-    }
-
-
-    /**
-     * Returns the value of the underlying input element.
-     *
-     * @return the value of the underlying input element
-     */
-    getValue(): string {
-        return this.input.value;
-    }
-
-    /**
-     * Sets the value of the underlying input element.
-     *
-     * @param value the value to set
-     */
-    setValue(value: string): void {
-        this.input.value = value;
-    }
-
-    /**
-     * Validates the input.
-     *
-     * @return an empty string if the input string is valid, and a string explaining why it is is invalid otherwise
-     */
-    validate(): string {
-        const validity = this.isValid(this.input.value);
-
-        if (validity.length === 0) this.showSuccess();
-        else this.showError();
-
-        return validity;
-    }
-
-    /**
-     * Marks the input as neither valid nor invalid.
-     */
-    showBlank(): void {
-        this.input.dataset["entered"] = "false";
-        this.input.setCustomValidity("");
-    }
-
-    /**
-     * Marks the input as invalid and moves focus to it.
-     */
-    showError(): void {
-        this.input.dataset["entered"] = "true";
-        this.input.setCustomValidity("Incorrect");
-        this.input.focus();
-    }
-
-    /**
-     * Marks the input as valid.
-     */
-    showSuccess(): void {
-        this.input.dataset["entered"] = "true";
-        this.input.setCustomValidity("");
-    }
-}
-
-/**
- * The types of error that can be displayed by an `ErrorHandler`.
- */
-export type ErrorLevel = "warning" | "error" | null;
-
-/**
- * Interacts with the DOM to delegate errors to the user.
- */
-export class ErrorHandler {
-    /**
-     * The outer div that wraps around all displayed errors.
-     *
-     * @private
-     */
-    private readonly outerDiv: HTMLDivElement;
-
-
-    /**
-     * Constructs a new error handler, inserting relevant new elements into the DOM.
-     *
-     * @param parent the element to insert elements into
-     */
-    constructor(parent: HTMLElement) {
-        this.outerDiv = document.createElement("div");
-        this.outerDiv.classList.add("errorOuter", "hidden");
-        parent.appendChild(this.outerDiv);
-    }
-
-
-    /**
-     * Handles the displaying of the given error.
-     *
-     * @param level the level of message to display, determines the style of the text
-     * @param message the message to display
-     * @return this `ErrorHandler`
-     */
-    handle(level: ErrorLevel, message: string): ErrorHandler {
-        this.outerDiv.classList.remove("hidden");
-
-        const errorInner = document.createElement("div");
-        errorInner.classList.add("errorInner");
-        if (level !== null) errorInner.classList.add(level);
-        errorInner.innerText = message;
-        this.outerDiv.appendChild(errorInner);
-
-        return this;
-    }
-
-    /**
-     * Clears all errors from the DOM.
-     *
-     * @return this `ErrorHandler`
-     */
-    clear(): ErrorHandler {
-        this.outerDiv.classList.add("hidden");
-        this.outerDiv.innerHTML = "";
-
-        return this;
-    }
-}
-
-/**
- * The types of message that can be displayed by a `MessageHandler`.
- */
-export type MessageLevel = "complete" | "progress" | "warning" | "error" | "neutral" | null;
-
-/**
- * Interacts with the DOM to delegate messages to the user.
- */
-export class MessageHandler {
-    /**
-     * The outer div, wrapping around all of the handler's elements.
-     *
-     * @private
-     */
-    private readonly outerDiv: HTMLDivElement;
-    /**
-     * The inner div, wrapping around the icon, spacing, and current message.
-     *
-     * @private
-     */
-    private readonly innerDiv: HTMLDivElement;
-    /**
-     * A loading icon, optionally displayed before the current message.
-     *
-     * @private
-     */
-    private readonly loadingIcon: HTMLElement;
-    /**
-     * Spacing between the loading icon and the current message.
-     *
-     * @private
-     */
-    private readonly spacing: HTMLSpanElement;
-    /**
-     * The span containing the current message.
-     *
-     * @private
-     */
-    private readonly textSpan: HTMLSpanElement;
-
-    /**
-     * The callback to be executed whenever a message is handler by this handler.
-     *
-     * @private
-     */
-    private callback: ((level: MessageLevel, message: string) => void) | undefined;
-    /**
-     * The currently displayed message level.
-     *
-     * @private
-     */
-    private currentLevel: MessageLevel | undefined;
-
-
-    /**
-     * Constructs a new `MessageHandler`, inserting relevant new elements into the DOM to interact with.
-     *
-     * @param parent the element to insert elements into
-     */
-    constructor(parent: HTMLElement) {
-        this.outerDiv = document.createElement("div");
-        this.outerDiv.classList.add("messageOuter", "hidden");
-        parent.appendChild(this.outerDiv);
-
-        this.innerDiv = document.createElement("div");
-        this.innerDiv.classList.add("messageInner");
-        this.outerDiv.appendChild(this.innerDiv);
-
-        this.loadingIcon = document.createElement("i");
-        this.loadingIcon.classList.add("fa", "fa-spinner", "fa-spin");
-        this.innerDiv.appendChild(this.loadingIcon);
-
-        this.spacing = document.createElement("span");
-        this.spacing.innerHTML = "&nbsp;";
-        this.innerDiv.appendChild(this.spacing);
-
-        this.textSpan = document.createElement("span");
-        this.innerDiv.appendChild(this.textSpan);
-
-        this.callback = undefined;
-        this.currentLevel = undefined;
-    }
-
-
-    /**
-     * Handles the displaying of the given message.
-     *
-     * If no message is given, the current message and the loading icon are hidden. To display an empty message next to
-     * the loading icon, give an empty string.
-     *
-     * @param level the level of message to display, or `null` if the entire message handler should be hidden
-     * @param message the message to display
-     * @return this `MessageHandler`
-     */
-    handle(level: MessageLevel, message: string): MessageHandler {
-        this.displayLevel(level);
-        if (level === undefined) return this;  // No need to handle the rest
-
-        if (this.callback !== undefined) this.callback(level, message);
-        this.textSpan.innerHTML = message;
-        return this;
-    }
-
-    /**
-     * Clears the message handler's contents and hides it.
-     *
-     * @return this `MessageHandler`
-     */
-    clear(): MessageHandler {
-        return this.handle(null, "");
-    }
-
-    /**
-     * Sets the callback to be executed whenever a message is handler by this handler.
-     *
-     * @param callback the function to execute whenever a message is handled
-     * @return this `MessageHandler`
-     */
-    setCallback(callback: ((level: MessageLevel, message: string) => void)): MessageHandler {
-        this.callback = callback;
-
-        return this;
-    }
-
-
-    /**
-     * Changes the appearance of the message handler to that of the given level.
-     *
-     * @param level the level to change appearance to
-     * @return this `MessageHandler`
-     * @private
-     */
-    private displayLevel(level: MessageLevel): MessageHandler {
-        if (level === this.currentLevel) return this;
-        this.currentLevel = level;
-
-        this.outerDiv.classList.remove("hidden");
-        this.innerDiv.classList.remove("success", "warning", "error");
-
-        switch (level) {
-            case "complete":
-                this.innerDiv.classList.add("success");
-                this.toggleLoadingIcon(false);
-                break;
-            case "progress":
-                this.toggleLoadingIcon(true);
-                break;
-            case "warning":
-                this.innerDiv.classList.add("warning");
-                this.toggleLoadingIcon(false);
-                break;
-            case "error":
-                this.innerDiv.classList.add("error");
-                this.toggleLoadingIcon(false);
-                break;
-            case "neutral":
-                this.toggleLoadingIcon(false);
-                break;
-            default:
-                this.outerDiv.classList.add("hidden");
-                break;
-        }
-
-        return this;
-    }
-
-    /**
-     * Turns the loading icon on or off.
-     *
-     * @param state `true` if and only if the loading icon should be on
-     * @return this `MessageHandler`
-     * @private
-     */
-    private toggleLoadingIcon(state: boolean): MessageHandler {
-        if (state) {
-            this.loadingIcon.classList.remove("hidden");
-            this.spacing.classList.remove("hidden");
-        } else {
-            this.loadingIcon.classList.add("hidden");
-            this.spacing.classList.add("hidden");
-        }
-
-        return this;
-    }
-}
-
-/**
- * A network of interlanguage links.
- */
-export class InterlangTable {
-    /**
-     * Generates an icon element with the given title and additional classes.
-     *
-     * @param icon the name of the icon to display, or `null` if an empty span should be returned
-     * @param title the title of the icon, used for the `title` attribute
-     * @param classes the additional classes to apply to the icon
-     * @return an icon element with the given title and additional classes
-     * @private
-     */
-    private static createIcon(icon: string | null, title: string, classes: string[]): string {
-        if (icon === null) return `<span></span>`;
-
-        return `<i class="fa fa-${icon} ${(classes || []).join(" ")}" title="${title}"></i>`;
-    }
-
-    /**
-     * Returns an appropriate label for the given page.
-     *
-     * The label contains a link to the page and a few buttons to help the user interact with that page. The label's
-     * appearance and contents depend both on the properties of the page (e.g. whether it exists and whether it's a
-     * redirect page) and on the other pages in this network (e.g. whether it's the only page in its language).
-     *
-     * @param pages a list of all pages
-     * @param page the page to generate a label of
-     * @return an appropriate label with icons for the given page
-     * @private
-     */
-    private generateLabel(pages: Page[], page: Page): string {
-        const labelText = pages.some(it => it.link.lang === page.link.lang && !it.link.equals(page.link))
-            ? page.link.toString()
-            : page.link.lang;
-
-        return "" +
-            `<span class="${page.exists ? "" : "redLink"}">` +
-            /**/`<a href="${page.url}" target="_blank" title="${page.link}">${labelText}</a>` +
-            /**/`<span> </span>` +
-            /**/`<a href="${page.url}?action=edit" target="_blank" title="Edit"><i class="fa fa-pencil"></i></a>` +
-            /**/`<span> </span>` +
-            /**/`<a title="Copy"><i class="fa fa-clipboard copyIcon" data-clipboarddata="${page.link}"></i></a>` +
-            `</span>`;
-    }
-
-    /**
-     * Generates the head of the table generated by `#toTable`.
-     *
-     * @param network the network to generate the head for
-     * @return the head of the table generated by `#toTable`
-     * @private
-     */
-    private generateTableHead(network: InterlangNetwork): string {
-        return "" +
-            `<thead>` +
-            /**/`<tr>` +
-            /****/`<th rowspan="2"></th>` +
-            /****/`<th class="sourceLabel" rowspan="2">Source</th>` +
-            /****/`<th colspan="${network.pages.length}">Destination</th>` +
-            /**/`</tr>` +
-            /**/`<tr>${network.pages.map(page => `<th>${this.generateLabel(network.pages, page)}</th>`)}</tr>` +
-            `</thead>`;
-    }
-
-    /**
-     * Generates the body of the table generated by `#toTable`.
-     *
-     * @param network the network to generate the body for
-     * @return the body of the table generated by `#toTable`
-     * @private
-     */
-    private generateTableBody(network: InterlangNetwork): string {
-        const rows = network.pages.map(srcPage => {
-            const {self: selfVerdict, links: linkVerdicts} = network.getPageVerdict(srcPage);
-
-            const icons = selfVerdict
-                .map(state => {
-                    const props = PageVerdict.props[state];
-                    return InterlangTable.createIcon(props.icon, props.message, props.style);
-                })
-                .map(it => `${it}<span> </span>`);
-            const label = this.generateLabel(network.pages, srcPage);
-            const cells = network.pages.map(dstPage => {
-                const linkState = linkVerdicts.get(dstPage.link)!;
-                const props = LinkVerdict.props[linkState];
-                return InterlangTable.createIcon(props.icon, props.message, props.style);
-            });
-
-            return "" +
-                `<tr>` +
-                /**/`<th>${icons}</th>` +
-                /**/`<th class="sourceLabel">${label}</th>` +
-                /**/cells.map(it => `<td>${it}</td>`) +
-                `</tr>`;
-        });
-
-        return `<tbody>${rows}</tbody>`;
-    }
-
-    /**
-     * Renders the the table describing the interlanguage network.
-     *
-     * @param id the ID to assign to the table element
-     * @param network the network of pages to render
-     * @return the generated table
-     */
-    render(id: string, network: InterlangNetwork): HTMLElement {
-        const table = stringToHtml(
-            `<table id="${id}">` +
-            /**/this.generateTableHead(network) +
-            /**/this.generateTableBody(network) +
-            `</table>`,
-            "table"
-        ) as HTMLElement;
-
-        // Add event handlers
-        table.querySelectorAll(".copyIcon").forEach(icon => {
-            if (!(icon instanceof HTMLElement)) return;
-
-            icon.addEventListener("click", () => {
-                // noinspection JSIgnoredPromiseFromCall
-                navigator.clipboard.writeText(`[[${icon.dataset.clipboarddata}]]`);
-
-                icon.classList.replace("fa-clipboard", "fa-check");
-                setTimeout(() => icon.classList.replace("fa-check", "fa-clipboard"), 1000);
-            });
-        });
-
-        return table;
-    }
-}
diff --git a/src/main/js/InterlangTable.ts b/src/main/js/InterlangTable.ts
new file mode 100644
index 0000000..562d43b
--- /dev/null
+++ b/src/main/js/InterlangTable.ts
@@ -0,0 +1,136 @@
+const {stringToHtml} = (window as any).fwdekker;
+import {InterlangNetwork, LinkVerdict, Page, PageVerdict} from "./MediaWiki";
+
+
+/**
+ * A network of interlanguage links.
+ */
+export class InterlangTable {
+    /**
+     * Generates an icon element with the given title and additional classes.
+     *
+     * @param icon the name of the icon to display, or `null` if an empty span should be returned
+     * @param title the title of the icon, used for the `title` attribute
+     * @param classes the additional classes to apply to the icon
+     * @return an icon element with the given title and additional classes
+     * @private
+     */
+    private static createIcon(icon: string | null, title: string, classes: string[]): string {
+        if (icon === null) return `<span></span>`;
+
+        return `<i class="fa fa-${icon} ${(classes || []).join(" ")}" title="${title}"></i>`;
+    }
+
+    /**
+     * Returns an appropriate label for the given page.
+     *
+     * The label contains a link to the page and a few buttons to help the user interact with that page. The label's
+     * appearance and contents depend both on the properties of the page (e.g. whether it exists and whether it's a
+     * redirect page) and on the other pages in this network (e.g. whether it's the only page in its language).
+     *
+     * @param pages a list of all pages
+     * @param page the page to generate a label of
+     * @return an appropriate label with icons for the given page
+     * @private
+     */
+    private generateLabel(pages: Page[], page: Page): string {
+        const labelText = pages.some(it => it.link.lang === page.link.lang && !it.link.equals(page.link))
+            ? page.link.toString()
+            : page.link.lang;
+
+        return "" +
+            `<span class="${page.exists ? "" : "red-link"}">` +
+            /**/`<a href="${page.url}" target="_blank" title="${page.link}">${labelText}</a>` +
+            /**/`<span> </span>` +
+            /**/`<a href="${page.url}?action=edit" target="_blank" title="Edit"><i class="fa fa-pencil"></i></a>` +
+            /**/`<span> </span>` +
+            /**/`<a title="Copy"><i class="fa fa-clipboard copy-icon" data-clipboarddata="${page.link}"></i></a>` +
+            `</span>`;
+    }
+
+    /**
+     * Generates the head of the table generated by `#toTable`.
+     *
+     * @param network the network to generate the head for
+     * @return the head of the table generated by `#toTable`
+     * @private
+     */
+    private generateTableHead(network: InterlangNetwork): string {
+        return "" +
+            `<thead>` +
+            /**/`<tr>` +
+            /****/`<th rowspan="2"></th>` +
+            /****/`<th class="source-label" rowspan="2">Source</th>` +
+            /****/`<th colspan="${network.pages.length}">Destination</th>` +
+            /**/`</tr>` +
+            /**/`<tr>${network.pages.map(page => `<th>${this.generateLabel(network.pages, page)}</th>`)}</tr>` +
+            `</thead>`;
+    }
+
+    /**
+     * Generates the body of the table generated by `#toTable`.
+     *
+     * @param network the network to generate the body for
+     * @return the body of the table generated by `#toTable`
+     * @private
+     */
+    private generateTableBody(network: InterlangNetwork): string {
+        const rows = network.pages.map(srcPage => {
+            const {self: selfVerdict, links: linkVerdicts} = network.getPageVerdict(srcPage);
+
+            const icons = selfVerdict
+                .map(state => {
+                    const props = PageVerdict.props[state];
+                    return InterlangTable.createIcon(props.icon, props.message, props.style);
+                })
+                .map(it => `${it}<span> </span>`);
+            const label = this.generateLabel(network.pages, srcPage);
+            const cells = network.pages.map(dstPage => {
+                const linkState = linkVerdicts.get(dstPage.link)!;
+                const props = LinkVerdict.props[linkState];
+                return InterlangTable.createIcon(props.icon, props.message, props.style);
+            });
+
+            return "" +
+                `<tr>` +
+                /**/`<th>${icons}</th>` +
+                /**/`<th class="source-label">${label}</th>` +
+                /**/cells.map(it => `<td>${it}</td>`) +
+                `</tr>`;
+        });
+
+        return `<tbody>${rows}</tbody>`;
+    }
+
+    /**
+     * Renders the table describing the interlanguage network.
+     *
+     * @param id the ID to assign to the table element
+     * @param network the network of pages to render
+     * @return the generated table
+     */
+    render(id: string, network: InterlangNetwork): HTMLElement {
+        const table = stringToHtml(
+            `<table id="${id}">` +
+            /**/this.generateTableHead(network) +
+            /**/this.generateTableBody(network) +
+            `</table>`,
+            "table"
+        ) as HTMLElement;
+
+        // Add event handlers
+        table.querySelectorAll(".copy-icon").forEach(icon => {
+            if (!(icon instanceof HTMLElement)) return;
+
+            icon.addEventListener("click", () => {
+                // noinspection JSIgnoredPromiseFromCall
+                navigator.clipboard.writeText(`[[${icon.dataset.clipboarddata}]]`);
+
+                icon.classList.replace("fa-clipboard", "fa-check");
+                setTimeout(() => icon.classList.replace("fa-check", "fa-clipboard"), 1000);
+            });
+        });
+
+        return table;
+    }
+}
diff --git a/src/main/js/Main.ts b/src/main/js/Main.ts
index 785bba4..8e8a30b 100644
--- a/src/main/js/Main.ts
+++ b/src/main/js/Main.ts
@@ -1,28 +1,16 @@
-// @ts-ignore
-const {$, doAfterLoad, footer, header, nav} = window.fwdekker;
-import {ErrorHandler, InterlangTable, MessageHandler, ValidatableInput} from "./DOM";
+const {$, doAfterLoad} = (window as any).fwdekker;
+const {
+    clearFormValidity, showInputInvalid, showMessageBusy, showMessageError, showMessageInfo, showMessageType
+} = (window as any).fwdekker.validation;
+
+import {InterlangTable} from "./InterlangTable";
 import {discoverNetwork, InterlangNetwork, MediaWiki, MediaWikiManager, NetworkVerdict} from "./MediaWiki";
 
 
 // Contains global functions for debugging
-// @ts-ignore
-window.ilc = {};
+(window as any).ilc = {};
 
 
-// Set up template
-doAfterLoad(() => {
-    $("#nav").appendChild(nav("/Tools/Interlanguage Checker/"));
-    $("#header").appendChild(header({
-        title: "Interlanguage Checker",
-        description: "Check the consistency of MediaWiki interlanguage links in a simple overview"
-    }));
-    $("#footer").appendChild(footer({
-        vcsURL: "https://git.fwdekker.com/tools/interlanguage-checker/",
-        version: "v%%VERSION_NUMBER%%"
-    }));
-    $("main").classList.remove("hidden");
-});
-
 // Handle "About" toggle
 doAfterLoad(() => {
     const about = $("#about");
@@ -31,138 +19,109 @@ doAfterLoad(() => {
     about.addEventListener("toggle", () => localStorage.setItem(key, "" + !!about.open));
 
     const storedState = localStorage.getItem(key);
-    if (storedState === null) about.open = true;
-    else about.open = storedState === "true";
+    about.open = storedState === null || storedState === "true";
 });
 
 // Handle input
 doAfterLoad(async () => {
-    const urlInput = new ValidatableInput($("#url"), (value) => {
-        if (value.trim() === "")
-            return "API URL must not be empty.";
-
-        try {
-            new URL(value);  // Throws exception if invalid
-            return "";
-        } catch (error) {
-            try {
-                // noinspection HttpUrlsUsage
-                const url = `http://${value}`;
-                new URL(url);  // Throws exception if invalid
-                $("#url").value = url;
-                return "";
-            } catch {
-                if (!(error instanceof Error))
-                    throw Error(`Error while processing connection error:\n${error}`);
-
-                return error.message;
-            }
-        }
-    });
-    const articleInput = new ValidatableInput($("#article"), (value) => {
-        return value.trim() === "" ? "Article must not be empty" : "";
-    });
-    const checkButton = $("#check");
-
-    const errorHandler = new ErrorHandler($("#errors"));
-    const messageHandler = new MessageHandler($("#messages"))
-        .setCallback((level, message) => {
-            if (level === "error") console.error(message);
-        });
-
+    const form = $("#inputs");
+    const urlInput = $("#url");
+    const articleInput = $("#article");
 
+    // Form submission
     let previousUrl: string | undefined;
     let mwm: MediaWikiManager | undefined;
 
     const submit = async () => {
-        localStorage.setItem("/tools/interlanguage-checker//api-url", urlInput.getValue());
+        localStorage.setItem("/tools/interlanguage-checker//api-url", urlInput.value);
 
         // Clean up
-        urlInput.showBlank();
-        articleInput.showBlank();
-        errorHandler.clear();
-        messageHandler.clear();
-
-        const oldTable = $("#networkTable");
-        if (oldTable !== null)
-            oldTable.parentNode.removeChild(oldTable);
+        clearFormValidity(form);
+        $("#network-table")?.remove();
 
         // Validate
-        const urlValidity = urlInput.validate();
-        if (urlValidity !== "") return messageHandler.handle("error", urlValidity);
+        const urlValue = urlInput.value;
+        const articleValue = articleInput.value;
 
-        const articleValidity = articleInput.validate();
-        if (articleValidity !== "") return messageHandler.handle("error", articleValidity);
+        if (urlValue.trim() === "")
+            return showInputInvalid(urlInput, "Enter the API URL.");
+
+        try {
+            new URL(urlValue);  // Throws exception if invalid
+        } catch (error) {
+            try {
+                const url = `http://${urlValue}`;
+                new URL(url);  // Throws exception if invalid
+                $("#url").value = url;
+                return "";
+            } catch {
+                return showInputInvalid(urlInput, (error as Error).message);
+            }
+        }
+
+        if (articleValue.trim() === "")
+            return showInputInvalid(articleInput, "Enter the name of the article to check.");
 
         // Initialize
-        if (urlInput.getValue() !== previousUrl) {
-            messageHandler.handle("progress", `Initializing <code>${urlInput.getValue()}</code>`);
+        if (urlValue !== previousUrl) {
+            showMessageBusy(form, `Initializing <code>${urlValue}</code>`);
 
             try {
-                const mw = await new MediaWiki(urlInput.getValue()).init();
+                const mw = await new MediaWiki(urlValue).init();
                 mwm = await new MediaWikiManager().init(mw);
             } catch (error) {
-                if (!(error instanceof Error))
-                    throw Error(`Error while processing initialization error:\n${error}`);
-
-                messageHandler.handle("error", error.message);
-                return;
+                return showMessageError(form, (error as Error).message);
             }
 
-            previousUrl = urlInput.getValue();
+            previousUrl = urlValue;
         }
 
         // Discover
         discoverNetwork(
             mwm!,
-            articleInput.getValue(),
-            (level, message) => errorHandler.handle(level, message),
-            it => messageHandler.handle("progress", it)
+            articleInput.value,
+            (type, message) => showMessageType(form, message, type),
+            it => showMessageType(form, it, "busy")
         )
             .then(it => new InterlangNetwork(it.pages, it.redirects))
             .then(network => {
-                messageHandler.handle("progress", "Creating table");
+                showMessageType(form, "Creating table", "busy");
 
-                const form = $("#networkTableForm");
-                form.textContent = "";
-                form.appendChild((new InterlangTable()).render("networkTable", network));
+                const tableForm = $("#network-table-form");
+                tableForm.textContent = "";
+                tableForm.appendChild((new InterlangTable()).render("network-table", network));
 
                 const props = NetworkVerdict.props[network.getNetworkVerdict()];
-                messageHandler.handle(props.style, props.message);
+                showMessageType(form, props.message, props.type);
             })
-            .catch(error => messageHandler.handle("error", error));
+            .catch(error => showMessageError(form, error));
     };
-
-    urlInput.input.addEventListener("keypress", (event) => {
-        if (event.key.toLowerCase() === "enter") submit();
+    form.addEventListener("submit", (event: SubmitEvent) => {
+        event.preventDefault();
+        submit();
     });
-    articleInput.input.addEventListener("keypress", (event) => {
-        if (event.key.toLowerCase() === "enter") submit();
-    });
-    checkButton.addEventListener("click", () => submit());
 
-    urlInput.input.focus() // Default focus
+    urlInput.focus(); // Default focus
 
     // Read inputs from cookies
     const apiUrl = localStorage.getItem("/tools/interlanguage-checker//api-url");
     if (apiUrl !== null && apiUrl.trim() !== "") {
-        urlInput.setValue(apiUrl);
-        articleInput.input.focus();
+        urlInput.value = apiUrl;
+        articleInput.focus();
     }
 
     // Read inputs from URL
     const currentParams = new URLSearchParams(window.location.search);
     if (currentParams.has("api")) {
-        urlInput.setValue(currentParams.get("api")!);
-        articleInput.input.focus();
+        urlInput.value = currentParams.get("api")!;
+        articleInput.focus();
     }
-    if (currentParams.has("article")) articleInput.setValue(currentParams.get("article")!);
+    if (currentParams.has("article")) articleInput.value = currentParams.get("article")!;
     if (currentParams.has("api") && currentParams.has("article")) await submit();
 
     // Set global debug function
-    // @ts-ignore
-    window.ilc.getCurrentInputAsUrl = () =>
+    (window as any).ilc.getCurrentInputAsUrl = () =>
         location.href.split("?")[0] +
-        `?api=${encodeURI(urlInput.getValue())}` +
-        `&article=${encodeURI(articleInput.getValue())}`;
+        `?api=${encodeURI(urlInput.value)}` +
+        `&article=${encodeURI(articleInput.value)}`;
 });
diff --git a/src/main/js/MediaWiki.ts b/src/main/js/MediaWiki.ts
index 79e06d1..fcfb915 100644
--- a/src/main/js/MediaWiki.ts
+++ b/src/main/js/MediaWiki.ts
@@ -1,4 +1,3 @@
-import {MessageLevel} from "./DOM";
 import {couldNotConnectMessage, mergeMaps, mergeSets} from "./Shared";
 
 
@@ -621,7 +620,7 @@ export class MediaWikiManager {
 export const discoverNetwork = async function(
     mwm: MediaWikiManager,
     title: string,
-    errorCb: (level: "error" | "warning" | null, message: string) => void,
+    errorCb: (type: "error" | "warning" | null, message: string) => void,
     progressCb: (message: string) => void
 ): Promise<{ pages: Page[], redirects: Redirect[] }> {
     const pages = [];
@@ -630,7 +629,7 @@ export const discoverNetwork = async function(
     const history: InterlangLink[] = [];
     const queue: InterlangLink[] = [new InterlangLink(mwm.baseLang, title)];
     while (queue.length > 0) {
-        progressCb("Checking <code>" + queue[queue.length - 1] + "</code>");
+        progressCb("Checking <code>" + queue[queue.length - 1] + "</code>.");
 
         let next = queue.pop()!;
         if (history.some(it => it.equals(next)))
@@ -644,7 +643,10 @@ export const discoverNetwork = async function(
             if (history.length === 1)
                 throw new Error(couldNotConnectMessage);
             else {
-                errorCb("warning", `Could not connect to the wiki for language '${next.lang}'. Maybe the wiki no longer exists?`);
+                errorCb(
+                    "warning",
+                    `Could not connect to the wiki for language '${next.lang}'. Maybe the wiki no longer exists?`
+                );
                 continue;
             }
         }
@@ -765,17 +767,19 @@ export namespace NetworkVerdict {
     export const props = {
         "perfect": {
             message: "A perfect network! 🙂",
-            style: "complete" as MessageLevel
+            type: "success"
         },
         "flawed": {
-            message: "The network is complete but flawed 😕<br />" +
+            message:
+                "The network is complete but flawed 😕<br />" +
                 "Hover over an icon in the left column for more information.",
-            style: "warning" as MessageLevel
+            type: "warning"
         },
         "broken": {
-            message: "The network is broken 😞<br />" +
+            message:
+                "The network is broken 😞<br />" +
                 "Hover over an icon in the left column for more information.",
-            style: "warning" as MessageLevel
+            type: "warning"
         },
     };
 
diff --git a/src/main/js/Shared.ts b/src/main/js/Shared.ts
index 0eab05e..0b8bda8 100644
--- a/src/main/js/Shared.ts
+++ b/src/main/js/Shared.ts
@@ -2,7 +2,7 @@
  * The message that is displayed when the application fails to connect to the API.
  */
 export const couldNotConnectMessage: string =
-    "Could not to connect to API. Is the URL correct? Are you using a script blocker? " +
+    "Could not connect to API. Is the URL correct? Are you using a script blocker? " +
     "See the <b>About</b> section for more information.";
 
 /**