backend/web/static/js/demo.js

+//////////////////////////////////////
+// sign up form for the demo instance
+//////////////////////////////////////
+
+function submitSignup() {
+	let result = document.querySelector("#signup-result");
+	let email = document.querySelector("#signup-email");
+	let xhr = new XMLHttpRequest();
+	xhr.responseType = "json";
+	let url = "/web/demo-user";
+	xhr.open("POST", url, true);
+	xhr.setRequestHeader("Content-Type", "application/json");
+	xhr.onreadystatechange = function () {
+		if (xhr.readyState === 4) {
+			// In the success case, we get a plain (json) string; in the error
+			// case, we get an object with `errorMessage` property.
+			if (typeof this.response == "object" && "errorMessage" in this.response) {
+				window.console.log("Error in sign-up request.");
+				result.classList.remove("alert-success");
+				result.classList.add("alert-danger");
+				if (
+					this.response.errorMessage ==
+					"[KratosError] Unable to insert or update resource because a resource with that value exists already"
+				) {
+					result.innerHTML = "A user with that email address already exists.";
+				} else if (
+					this.response.errorMessage ==
+					"[KratosError] The request was malformed or contained invalid parameters"
+				) {
+					result.innerHTML = "That doesn't appear to be a valid email address.";
+				} else {
+					result.innerHTML = this.response.errorMessage;
+				}
+			} else {
+				result.classList.add("alert-success");
+				result.classList.remove("alert-danger");
+				result.innerHTML = this.response;
+			}
+			result.style.visibility = "visible";
+		}
+	};
+	// Converting JSON data to string
+	var data = JSON.stringify({ email: email.value });
+	// Sending data with the request
+	xhr.send(data);
+}

backend/web/static/src/input.css

+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	label {
+		@apply block text-sm font-medium text-gray-700 mb-1;
+	}
+}
+
+@layer components {
+	#pills-tab .nav-link.active {
+		@apply bg-transparent text-gray-800 border-b-2 text-left border-b-primary-700 hover:bg-primary-700 py-2 px-4 rounded-none;
+	}
+	#pills-tab .nav-link:not(.active) {
+		@apply text-gray-500 hover:text-primary-700;
+	}
+}

backend/web/static/style.css

-
-
 div.loginpanel {
     width: 644px;
     margin-left: auto;
@@ -10,3 +8,46 @@ div.loginpanel {
 button {
     margin-top: 10px;
 }
+
+.form-display {
+    font-family: monospace;
+    display: block;
+    width: 100%;
+    padding: .375rem .75rem;
+    font-size: 1rem;
+    line-height: 1.5;
+    color: #495057;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    border-radius: .25rem;
+}
+
+#pills-tab {
+    margin-bottom: 1rem;
+}
+
+#totp_qr {
+    padding: 2rem;
+}
+
+.hide {
+    display: none !important;
+}
+
+.separator {
+    display: flex;
+    align-items: center;
+    text-align: center;
+}
+.separator::before, .separator::after {
+    content: '';
+    flex: 1;
+    border-bottom: 0.15rem solid #1e8290;
+}
+.separator:not(:empty)::before {
+    margin-right: .4em;
+}
+.separator:not(:empty)::after {
+    margin-left: .4em;
+}

backend/web/tailwind.config.js

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  mode: "jit",
+  content: ["./templates/**/*.{html,htm}", "./static/base.js"],
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: "var(--colour-primary-50)",
+          100: "var(--colour-primary-100)",
+          200: "var(--colour-primary-200)",
+          300: "var(--colour-primary-300)",
+          400: "var(--colour-primary-400)",
+          500: "var(--colour-primary-500)",
+          600: "var(--colour-primary-600)",
+          700: "var(--colour-primary-700)",
+          800: "var(--colour-primary-800)",
+          900: "var(--colour-primary-900)",
+          950: "var(--colour-primary-950)",
+          light: "var(--colour-primary-light)",
+          DEFAULT: "var(--colour-primary-default)",
+          dark: "var(--colour-primary-dark)",
+        },
+      },
+    },
+  },
+  plugins: [],
+};

backend/web/templates/clear.html

+{% extends 'base.html' %}
+
+{% block content %}
+
+<script>
+    // Wipe the local storage
+    localStorage.removeItem("persist:root");
+    // Redirect
+    window.location = '{{ url | safe }}';
+</script>
+
+Clearing session data and redirecting...
+
+{% endblock %}