Compare revisions

eac614b8 · eac614b8 · eac614b8 · eac614b8 · eac614b8 · eac614b8
--- a/backend/web/static/css/main.css
+++ b/backend/web/static/css/main.css
--- a/backend/web/static/favicon.ico
+++ b/backend/web/static/favicon.ico
--- a/backend/web/static/js/demo.js
+++ b/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);
+}
--- a/backend/web/static/src/input.css
+++ b/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;
+	}
+}
--- a/backend/web/static/style.css
+++ b/backend/web/static/style.css
-
-
 div.loginpanel {
    width: 644px;
    margin-left: auto;
@@ -10,3 +8,25 @@ 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;
+}
--- a/backend/web/tailwind.config.js
+++ b/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: [],
+};
--- a/backend/web/templates/base.html
+++ b/backend/web/templates/base.html
-<!doctype html>
-<html>
-    <link rel="stylesheet" href="static/css/bootstrap.min.css">
-    <link rel="stylesheet" href="static/style.css">
-    <script src="static/js/bootstrap.bundle.min.js"></script>
+<!DOCTYPE html>
+<html class="h-full bg-white">
+  <head>
+    <style>
+      :root {
+          --colour-primary-50: #F2FFFF;
+          --colour-primary-100: #D6FDFF;
+          --colour-primary-200: #B6F7FB;
+          --colour-primary-300: #7AE5EA;
+          --colour-primary-400: #55C6CC;
+          --colour-primary-500: #39A9B1;
+          --colour-primary-600: #24929C;
+          --colour-primary-700: #157983;
+          --colour-primary-800: #135D66;
+          --colour-primary-900: #0F4F57;
+          --colour-primary-950: #0A353A;
+          --colour-primary-light: #54C6CC;
+          --colour-primary-default: #54C6CC;
+          --colour-primary-dark: #1E8290;
+      }
+    </style>
+    <link rel="stylesheet" href="../style.css" />
+    <link rel="stylesheet" href="static/style.css" />
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico" />
+
+    <link rel="stylesheet" href="static/css/bootstrap.min.css" />
+    <link href="static/css/main.css" rel="stylesheet" />
    <script src="static/js/jquery-3.6.0.min.js"></script>
+    <script src="static/js/bootstrap.bundle.min.js"></script>
    <script src="static/js/js.cookie.min.js"></script>
    <script src="static/base.js"></script>
-    <title>Stackspin Account</title>
-</html>
-
-
-
-<body>
-
-<script>
-    var api_url = '{{ api_url }}';
-
-    // Actions
-    $(document).ready(function() {
-        check_flow_expired();
-    });
-
-</script>
+    {% if demo %}
+    <script src="static/js/demo.js"></script>
+    {% endif %}

-
-
-<div class="loginpanel">
-
-    <div id="contentFlowExpired" 
-        class='alert alert-warning' 
-        style='display:none'>Your request is expired. Please resubmit your request faster.</div>
-
-
-<img src='static/logo.svg'/><br/><br/>
-
-{% block content %}{% endblock %}
-
-
-</div>
+    <title>Your Stackspin Account</title>
+  </head>
+  <body class="stackspin-background h-full bg-gray-50">
+    <script>
+      var api_url = "{{ api_url }}";
+  
+      // Actions
+      $(document).ready(function () {
+              check_flow_expired();
+      });
+    </script>
+  
+    <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
+      <div
+        class="mx-auto w-full h-full md:w-2/3 md:max-w-xl bg-white shadow rounded-lg space-y-8 mb-4 md:mb-0 p-8 pt-0"
+      >
+      <div
+        id="contentFlowExpired"
+        class="alert alert-warning"
+        style="display: none"
+      >
+        Your request has expired. Please resubmit your request.
+      </div>
+  
+      <div class="login-header flex flex-col place-items-center">
+        <a href="{{ dashboard_url }}" class="block">
+          <img class="stackspin-logo mx-auto h-10 w-auto" src="static/logo.svg" />
+        </a>
+        {% if demo %}
+        <span
+          class="inline-flex items-center rounded-md bg-gray-50 px-2 py-1 text-xs font-medium text-gray-500 ring-1 ring-inset ring-gray-300"
+        >
+          Demo Instance
+        </span>
+        {% endif %}
+      </div>
+      <div id="messages"></div>
+      {% block content %}{% endblock %}
+      </div>
+    </div>
+  </body>
+</html>
--- a/backend/web/templates/clear.html
+++ b/backend/web/templates/clear.html
--- a/backend/web/templates/loggedin.html
+++ b/backend/web/templates/loggedin.html
--- a/backend/web/templates/login.html
+++ b/backend/web/templates/login.html
--- a/backend/web/templates/recover.html
+++ b/backend/web/templates/recover.html
--- a/backend/web/templates/settings.html
+++ b/backend/web/templates/settings.html
--- a/deployment/Dockerfile
+++ b/deployment/Dockerfile
-FROM nginx:latest
+FROM nginx:1.27
 COPY ./nginx.conf /etc/nginx/nginx.conf
-COPY . /usr/share/nginx/html
+COPY html /usr/share/nginx/html
--- a/deployment/helmchart/CHANGELOG.md
+++ b/deployment/helmchart/CHANGELOG.md
--- a/deployment/helmchart/Chart.lock
+++ b/deployment/helmchart/Chart.lock
--- a/deployment/helmchart/Chart.yaml
+++ b/deployment/helmchart/Chart.yaml
--- a/deployment/helmchart/templates/backend-deployment.yaml
+++ b/deployment/helmchart/templates/backend-deployment.yaml
--- a/deployment/helmchart/templates/backend-service.yaml
+++ b/deployment/helmchart/templates/backend-service.yaml
@@ -40,3 +40,4 @@ spec:
    {{- include "common.tplvalues.render" (dict "value" .Values.backend.service.extraPorts "context" $) | nindent 4 }}
    {{- end }}
  selector: {{- include "common.labels.matchLabels" . | nindent 4 }}
+    component: dashboard-backend
--- a/deployment/helmchart/templates/configmaps.yaml
+++ b/deployment/helmchart/templates/configmaps.yaml
--- a/deployment/helmchart/templates/deployment.yaml
+++ b/deployment/helmchart/templates/deployment.yaml
No results found