backend/web/static/css/main.css

+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+/*
+! tailwindcss v3.4.14 | MIT License | https://tailwindcss.com
+*/
+
+/*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  /* 1 */
+  border-width: 0;
+  /* 2 */
+  border-style: solid;
+  /* 2 */
+  border-color: #e5e7eb;
+  /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  -moz-tab-size: 4;
+  /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4;
+  /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  /* 4 */
+  font-feature-settings: normal;
+  /* 5 */
+  font-variation-settings: normal;
+  /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0;
+  /* 1 */
+  line-height: inherit;
+  /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0;
+  /* 1 */
+  color: inherit;
+  /* 2 */
+  border-top-width: 1px;
+  /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  /* 1 */
+  font-feature-settings: normal;
+  /* 2 */
+  font-variation-settings: normal;
+  /* 3 */
+  font-size: 1em;
+  /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0;
+  /* 1 */
+  border-color: inherit;
+  /* 2 */
+  border-collapse: collapse;
+  /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  /* 1 */
+  font-feature-settings: inherit;
+  /* 1 */
+  font-variation-settings: inherit;
+  /* 1 */
+  font-size: 100%;
+  /* 1 */
+  font-weight: inherit;
+  /* 1 */
+  line-height: inherit;
+  /* 1 */
+  letter-spacing: inherit;
+  /* 1 */
+  color: inherit;
+  /* 1 */
+  margin: 0;
+  /* 2 */
+  padding: 0;
+  /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button;
+  /* 1 */
+  background-color: transparent;
+  /* 2 */
+  background-image: none;
+  /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield;
+  /* 1 */
+  outline-offset: -2px;
+  /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  /* 1 */
+  font: inherit;
+  /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  /* 1 */
+  color: #9ca3af;
+  /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block;
+  /* 1 */
+  vertical-align: middle;
+  /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+
+label {
+  margin-bottom: 0.25rem;
+  display: block;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
+}
+
+#pills-tab .nav-link.active {
+  border-radius: 0px;
+  border-bottom-width: 2px;
+  border-bottom-color: var(--colour-primary-700);
+  background-color: transparent;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  text-align: left;
+  --tw-text-opacity: 1;
+  color: rgb(31 41 55 / var(--tw-text-opacity));
+}
+
+#pills-tab .nav-link.active:hover {
+  background-color: var(--colour-primary-700);
+}
+
+#pills-tab .nav-link:not(.active) {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+#pills-tab .nav-link:not(.active):hover {
+  color: var(--colour-primary-700);
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
+.mb-4 {
+  margin-bottom: 1rem;
+}
+
+.mt-0 {
+  margin-top: 0px;
+}
+
+.block {
+  display: block;
+}
+
+.flex {
+  display: flex;
+}
+
+.inline-flex {
+  display: inline-flex;
+}
+
+.contents {
+  display: contents;
+}
+
+.hidden {
+  display: none;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.min-h-full {
+  min-height: 100%;
+}
+
+.w-auto {
+  width: auto;
+}
+
+.w-full {
+  width: 100%;
+}
+
+.flex-col {
+  flex-direction: column;
+}
+
+.place-items-center {
+  place-items: center;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.gap-4 {
+  gap: 1rem;
+}
+
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(2rem * var(--tw-space-y-reverse));
+}
+
+.divide-y > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-y-reverse: 0;
+  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
+  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
+}
+
+.divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
+  --tw-divide-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-divide-opacity));
+}
+
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
+.rounded-md {
+  border-radius: 0.375rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
+.border-t-2 {
+  border-top-width: 2px;
+}
+
+.border-t-\[1px\] {
+  border-top-width: 1px;
+}
+
+.border-gray-300 {
+  --tw-border-opacity: 1;
+  border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+.border-primary-400 {
+  border-color: var(--colour-primary-400);
+}
+
+.border-transparent {
+  border-color: transparent;
+}
+
+.border-b-gray-100 {
+  --tw-border-opacity: 1;
+  border-bottom-color: rgb(243 244 246 / var(--tw-border-opacity));
+}
+
+.border-t-gray-50 {
+  --tw-border-opacity: 1;
+  border-top-color: rgb(249 250 251 / var(--tw-border-opacity));
+}
+
+.bg-gray-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+
+.bg-primary-600 {
+  background-color: var(--colour-primary-600);
+}
+
+.bg-white {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+}
+
+.p-4 {
+  padding: 1rem;
+}
+
+.p-8 {
+  padding: 2rem;
+}
+
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.px-2\.5 {
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+
+.px-6 {
+  padding-left: 1.5rem;
+  padding-right: 1.5rem;
+}
+
+.py-1 {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+.py-1\.5 {
+  padding-top: 0.375rem;
+  padding-bottom: 0.375rem;
+}
+
+.py-12 {
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+}
+
+.py-2 {
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+}
+
+.pb-5 {
+  padding-bottom: 1.25rem;
+}
+
+.pt-0 {
+  padding-top: 0px;
+}
+
+.pt-2 {
+  padding-top: 0.5rem;
+}
+
+.pt-4 {
+  padding-top: 1rem;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-lg {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+
+.text-sm {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+.text-xs {
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.font-bold {
+  font-weight: 700;
+}
+
+.font-medium {
+  font-weight: 500;
+}
+
+.leading-6 {
+  line-height: 1.5rem;
+}
+
+.text-gray-400 {
+  --tw-text-opacity: 1;
+  color: rgb(156 163 175 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-gray-900 {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+.text-primary-600 {
+  color: var(--colour-primary-600);
+}
+
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.shadow {
+  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.shadow-sm {
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.outline {
+  outline-style: solid;
+}
+
+.outline-1 {
+  outline-width: 1px;
+}
+
+.outline-primary-300 {
+  outline-color: var(--colour-primary-300);
+}
+
+.ring-1 {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.ring-inset {
+  --tw-ring-inset: inset;
+}
+
+.ring-gray-300 {
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+}
+
+.hover\:bg-primary-700:hover {
+  background-color: var(--colour-primary-700);
+}
+
+.hover\:text-primary-500:hover {
+  color: var(--colour-primary-500);
+}
+
+.hover\:text-primary-700:hover {
+  color: var(--colour-primary-700);
+}
+
+.focus\:outline-none:focus {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+
+.focus\:ring-2:focus {
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+}
+
+.focus\:ring-primary-500:focus {
+  --tw-ring-color: var(--colour-primary-500);
+}
+
+.focus\:ring-offset-2:focus {
+  --tw-ring-offset-width: 2px;
+}
+
+@media (min-width: 768px) {
+  .md\:mb-0 {
+    margin-bottom: 0px;
+  }
+
+  .md\:w-2\/3 {
+    width: 66.666667%;
+  }
+
+  .md\:max-w-xl {
+    max-width: 36rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .lg\:px-8 {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+}

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/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>

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 %}

backend/web/templates/loggedin.html

@@ -4,6 +4,7 @@
 
 <script>
     var api_url = '{{ api_url }}';
+    var dashboard_url = '{{ dashboard_url }}';
 
     // Actions
     $(document).ready(function() {
@@ -17,8 +18,7 @@
 
 <div id="contentMessages"></div>
 <div id="contentWelcome">
-    Welcome{{ name }}, you are logged in.
+    Welcome{{ name }}, you are logged in. We are redirecting you....
 </div>
 
-
 {% endblock %}

backend/web/templates/login.html

+{% extends 'base.html' %} {% block content %}
 
+<script>
+	var api_url = '{{ api_url }}';
 
-{% extends 'base.html' %}
-
-{% block content %}
+	// Actions
+	$(document).ready(function () {
+		flow_login();
+	});
 
-<script>
-    var api_url = '{{ api_url }}';
 
-    // Actions
-    $(document).ready(function() {
-        flow_login();
-    });
+	{% for message in messages %}
+	renderMessage('{{ message['id'] }}', '{{ message['message'] }}', '{{ message['type'] }}');
+	{% endfor %}
 
+	// On demo instance, submit the sign-up form via ajax
+	// so we can show the result on the same page.
+	{% if demo %}
+	$(document).ready(function(){
+		$('#signup-form').submit((event) => {
+			event.preventDefault();
+			window.console.log("signup submit");
+			submitSignup();
+		});
+	});
+	{% endif %}
 </script>
 
+{% if demo %}
+
+<div
+	class="rounded-md bg-gray-50 border border-gray-300 outline outline-1 outline-primary-300 p-4 flex flex-col gap-4 text-xs text-gray-500"
+>
+	<p>Please keep in mind this is a demo instance:</p>
+	<ul class="divide-y divide-gray-200">
+		<li class="py-2">Anyone can create an account, just like yourself.</li>
+		<li class="py-2">
+			Any data you upload, including your email address, can be accessible by
+			other users.
+		</li>
+		<li class="py-2">
+			The demo is automatically reset every night (Europe/Amsterdam time),
+			removing all users and their data.
+		</li>
+	</ul>
+</div>
+<h1 class="text-lg leading-6 font-bold text-gray-900">
+	Create your Stackspin demo account:
+</h1>
+<form id="signup-form">
+	<label for="signup-email">E-mail address</label>
+	<div class="form-group flex justify-between gap-4">
+		<input
+			type="email"
+			class="form-control"
+			id="signup-email"
+			name="signup-email"
+			placeholder="Please provide your e-mail address"
+		/>
+		<button
+			type="submit"
+			class="inline-flex pointer h-10 items-center px-2.5 py-1.5 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500"
+		>
+			Create
+		</button>
+	</div>
+	<div
+		id="signup-result"
+		class="form-group rounded-md bg-gray-50 border border-gray-300 outline outline-1 outline-primary-300 p-4 flex flex-col gap-4 text-xs text-gray-500"
+		style="visibility: hidden"
+	></div>
+</form>
 
+<h1
+	class="text-lg mt-0 leading-6 font-bold text-gray-900 pt-4 border-t-[1px] border-primary-400"
+>
+	If you already have an account, log in:
+</h1>
 
-    <div id="contentMessages"></div>
-    <div id="contentLogin"></div>
-    <div id="contentHelp">
-        <a href='recovery'>Set new password</a> | <a href='https://stackspin.net'>About stackspin</a>
-    </div>
+{% endif %}
 
-{% endblock %}
+<div id="contentMessages"></div>
+<div id="contentLogin_password"></div>
+<div id="separator_oidc" class="separator hide">Or</div>
+<div id="contentLogin_oidc"></div>
+<div id="contentLogin_totp"></div>
+<div id="contentLogin_webauthn"></div>
+<footer
+	class="font-medium text-primary-600 mt-0 pt-2 border-t-gray-50 border-t-2 flex justify-end"
+>
+	<div id="contentHelp" class="flex flex-col text-right">
+		<a id="recoveryLink" href="recovery" class="hover:text-primary-700 mb-2">Set new password</a
+		><a
+			href="https://stackspin.net"
+			class="text-sm text-gray-400 hover:text-primary-500"
+			>What is Stackspin?</a
+		>
+	</div>
+</footer>
+	{% endblock %}

backend/web/templates/recover.html

-
-
 {% extends 'base.html' %}
 
 {% block content %}
@@ -8,22 +6,26 @@
     var api_url = '{{ api_url }}';
 
     // Actions
-    $(document).ready(function() {
+    $(document).ready(function () {
         flow_recover();
 
     });
 
 </script>
 
-    <div id="contentMessages"></div>
-    <div id="contentRecover"></div>
-    <div id="contentRecoverRequested" style='display:none'>
-        Thank you for your request. We have sent you an email to recover
-        your account. Please check your e-mail and complete the account
-        recovery. You have limited time to complete this</div>
-
-    <div id="contentHelp">
-        <a href='login'>Back to login page</a> | <a href='https://stackspin.org'>About stackspin</a>
-    </div>
-
-{% endblock %}
+<div id="contentMessages"></div>
+<div id="contentRecover"></div>
+<div id="contentRecoverRequested" class="text-sm px-2 pb-5" style='display:none'>
+    Thank you for your request. If there is an account registered with the
+    given address, we have sent you an e-mail to recover your account.
+    Please check your e-mail and complete the account recovery. You have
+    limited time to complete this.</div>
+
+<div id="contentHelp" class="flex flex-col font-medium text-primary-600 mt-0 pt-2 border-t-gray-50 border-t-2">
+    <a href='login' class="block w-full text-right hover:text-primary-700 mb-2">Back to login page</a><a
+        href='https://stackspin.net' class="block text-right w-full text-sm text-gray-400 hover:text-primary-500">What
+        is
+        Stackspin?</a>
+</div>
+
+{% endblock %}
\ No newline at end of file

backend/web/templates/settings.html

-
-
 {% extends 'base.html' %}
 
 {% block content %}
@@ -8,23 +6,38 @@
     var api_url = '{{ api_url }}';
 
     // Actions
-    $(document).ready(function() {
+    $(document).ready(function () {
         flow_settings();
     });
 
 </script>
 
-
-
-    <div id="contentMessages"></div>
-    <div id="contentProfileSaved" 
-        class='alert alert-success' 
-        style='display:none'>Successfuly saved new settings.</div>
-    <div id="contentProfileSaveFailed" 
-        class='alert alert-danger' 
-        style='display:none'>Your changes are not saved. Please check the fields for errors.</div>
-    <div id="contentProfile"></div>
-    <div id="contentPassword"></div>
+<div id="contentMessages"></div>
+<div id="contentProfileSaved" class='alert alert-success' style='display:none'>Successfully saved new settings.</div>
+<div id="contentProfileSaveFailed" class='alert alert-danger' style='display:none'>Your changes are not saved. Please
+    check the fields for errors.</div>
+
+<div class="nav-pills nav flex text-sm border-b-2 border-b-gray-100" id="pills-tab" role="tablist">
+    <a class="nav-link active" id="pills-home-tab" data-toggle="pill" href="#pills-profile" role="tab"
+        aria-controls="pills-profile" aria-selected="true">Profile</a>
+    <a class="nav-link" id="pills-password-tab" data-toggle="pill" href="#pills-password" role="tab"
+        aria-controls="pills-password" aria-selected="false">Change password</a>
+    <a class="nav-link" id="pills-totp-tab" data-toggle="pill" href="#pills-totp" role="tab" aria-controls="pills-totp"
+        aria-selected="false">2nd factor: TOTP</a>
+    <a class="nav-link" id="pills-webauthn-tab" data-toggle="pill" href="#pills-webauthn" role="tab" aria-controls="pills-webauthn"
+        aria-selected="false">2nd factor: WebAuthn</a>
+</div>
+<div class="tab-content" id="pills-tabContent">
+    <div class="tab-pane fade show active" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...
+    </div>
+    <div class="tab-pane fade" id="pills-password" role="tabpanel" aria-labelledby="pills-password-tab">...</div>
+    <div class="tab-pane fade" id="pills-totp" role="tabpanel" aria-labelledby="pills-totp-tab">...</div>
+    <div class="tab-pane fade" id="pills-webauthn" role="tabpanel" aria-labelledby="pills-webauthn-tab">...</div>
+</div>
+<div id="contentProfile"></div>
+<div id="contentPassword"></div>
+<div id="contentTotp"></div>
+<div id="contentWebauthn"></div>
 
 
 {% endblock %}

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

deployment/helmchart/CHANGELOG.md

 # Changelog
 
-## [1.5.1]
+## 1.14.0
+
+* Update dashboard to version 0.14.0.
+
+## 1.13.3
+
+* Update dashboard to version 0.13.3.
+
+## 1.13.2
+
+* Update dashboard to version 0.13.2.
+
+## 1.13.1
+
+* Update dashboard to version 0.13.1.
+
+## 1.13.0
+
+* Update dashboard to version 0.13.0.
+* Add a helm value `overlay`. If enabled, mount an extra persistent volume claim
+  `dashboard-overlay` with files to be served by the frontend pod, and an rsync
+  server container to allow uploading files to the volume.
+
+## 1.12.4
+
+* Update dashboard to version 0.12.4.
+
+## 1.12.3
+
+* Update dashboard to version 0.12.3.
+
+## 1.12.2
+
+* Update dashboard to version 0.12.2.
+
+## 1.12.1
+
+* Update dashboard to version 0.12.1.
+
+## 1.12.0
+
+* Update dashboard to version 0.12.0.
+
+## 1.11.1
+
+* Update dashboard to version 0.11.1.
+
+## 1.11.0
+
+* Update dashboard to version 0.11.0.
+
+## 1.10.5
+
+* Update dashboard to version 0.10.5.
+
+## 1.10.4
+
+* Update dashboard to version 0.10.4.
+
+## 1.10.3
+
+* Update dashboard to version 0.10.3.
+
+## 1.10.2
+
+* Update dashboard to version 0.10.2.
+
+## 1.10.1
+
+* Do not add explicit app roles for Stackspin core apps when creating the first
+  admin user.
+* Update dashboard to version 0.10.1.
+
+## 1.10.0
+
+* Update dashboard to version 0.10.0.
+
+## 1.9.2
+
+* Update dashboard to version 0.9.2.
+
+## 1.9.1
+
+* Fix indentation of helm/yaml syntax in the split deployments, specifically in
+  the case of non-empty extraEnvVars.
+* Update dashboard to version 0.9.1.
+
+## 1.9.0
+
+* Update dashboard to version 0.9.0.
+* Switch to telepresence instead of home-grown proxy setup for hybrid
+  local/remote development environment.
+
+## 1.8.4
+
+* Update dashboard to version 0.8.4.
+
+## 1.8.3
+
+* Update dashboard to version 0.8.3.
+
+## 1.8.2
+
+* Update dashboard to version 0.8.2.
+
+## 1.8.1
+
+* Update dashboard to version 0.8.1.
+
+## 1.8.0
+
+* Update dashboard to version 0.8.0.
+
+## 1.7.6
+
+* Update dashboard to version 0.7.6.
+
+## 1.7.5
+
+* Update dashboard to version 0.7.5.
+
+## 1.7.4
+
+* Update dashboard to version 0.7.4.
+
+## 1.7.3
+
+- Fix kubernetes RBAC issue with new `info` api endpoint.
+* Update dashboard to version 0.7.3.
+
+## 1.7.2
+
+* Update dashboard to version 0.7.2.
+
+## 1.7.1
+
+* Update dashboard to version 0.7.1.
+* Only run the dashboard-initialize-user job on install, no longer on upgrade.
+
+## 1.7.0
+
+* Update dashboard to version 0.7.0.
+
+## 1.6.7
+
+* Increase a cypress timeout to avoid frequent false negatives when testing.
+
+## 1.6.6
+
+* Add helm test using cypress. Only tests logging in for now.
+
+## 1.6.5
+
+* Update dashboard to version 0.6.5
+
+## 1.6.4
+
+* Update dashboard to version 0.6.4
+
+## 1.6.3
+
+* Update dashboard to version 0.6.3
+
+## 1.6.2
+
+* Update dashboard to version 0.6.2
+
+## 1.6.1
+
+* Update dashboard to version 0.6.1
+
+## 1.5.2
+
+* Update dashboard to version 0.5.2
+
+## 1.5.1
 
 * Update dashboard to version 0.5.1
 
-## [1.5.0]
+## 1.5.0
 
 * Use dashboard backend container from new location
 * Use proper semver image tags
 
-## [1.4.0]
+## 1.4.0
 
 * Fetch apps from Kubernetes back-end
 * Also fetch external apps
 * Only show installed apps on dashboard
 * Use correct URLs for apps on dashboard (not hardcoded ones)
 
-## [1.2.3]
+## 1.2.3
 
 * Fix logging out of Hydra from the dashboard
 
-## [1.2.2]
+## 1.2.2
 
 ### Bug fixes
 
 * Fix invalid reference format when image.digest is missing
   see https://open.greenhost.net/stackspin/stackspin/-/merge_requests/1397#note_50785
 
-## [1.2.0]
+## 1.2.0
 
 ### Features
 
@@ -35,7 +210,7 @@
 * When an admin's dashboard access is changed to "User", their app access now
   defaults to "user"
 
-## [1.1.0]
+## 1.1.0
 
 ### Bug fixes
 
@@ -46,7 +221,7 @@
 * Dashboard admin users automatically have admin rights in all apps
 * App-specific rights for dashboard admin users are not editable
 
-## [1.0.5]
+## 1.0.5
 
 ### Bug fixes
 
@@ -57,7 +232,7 @@
 * Update dashboard to v0.2.6
 * Update dashboard-backend to v0.2.7
 
-## [1.0.4]
+## 1.0.4
 
 ### Bug fixes
 
@@ -67,13 +242,13 @@
 
 * Update dashboard-backend to v0.2.6
 
-## [1.0.3]
+## 1.0.3
 
 ### Features
 
 * Update frontend to 0.2.5
 
-## [1.0.2]
+## 1.0.2
 
 ### Features
 
@@ -83,13 +258,13 @@
 
 * Check if app exists before inserting into DB on initialization #64
 
-## [1.0.1]
+## 1.0.1
 
 ### Bug fixes
 
 * Resolve "App access role is not persistent" #63
 
-## [1.0.0]
+## 1.0.0
 
 ### Bug fixes
 

deployment/helmchart/Chart.lock

 dependencies:
 - name: common
   repository: https://charts.bitnami.com/bitnami
-  version: 2.0.3
-digest: sha256:dfd07906c97f7fca7593af69d01f6f044e10a609a03057352142766a5caca6cd
-generated: "2022-09-29T15:38:57.444746866+02:00"
+  version: 2.14.1
+digest: sha256:31e157c847d806f07ddd0518316a205c315829105cd69ef5c79eff92e2f28967
+generated: "2024-01-30T13:59:56.425668471+01:00"

deployment/helmchart/Chart.yaml

 annotations:
   category: Dashboard
 apiVersion: v2
-appVersion: 0.5.1
+appVersion: 0.14.0
 dependencies:
   - name: common
     # https://artifacthub.io/packages/helm/bitnami/common
@@ -23,4 +23,4 @@ name: stackspin-dashboard
 sources:
   - https://open.greenhost.net/stackspin/dashboard/
   - https://open.greenhost.net/stackspin/dashboard-backend/
-version: 1.5.1
+version: 1.14.0

deployment/helmchart/templates/backend-deployment.yaml

+apiVersion: {{ template "common.capabilities.deployment.apiVersion" . }}
+kind: Deployment
+metadata:
+  name: {{ template "common.names.fullname" . }}-backend
+  labels: {{- include "common.labels.standard" . | nindent 4 }}
+    component: dashboard-backend
+    {{- if .Values.commonLabels }}
+    {{- include "common.tplvalues.render" ( dict "value" .Values.commonLabels "context" $ ) | nindent 4 }}
+    {{- end }}
+  {{- if .Values.commonAnnotations }}
+  annotations: {{- include "common.tplvalues.render" ( dict "value" .Values.commonAnnotations "context" $ ) | nindent 4 }}
+  {{- end }}
+spec:
+  replicas: {{ .Values.replicaCount }}
+  selector:
+    matchLabels:
+      component: dashboard-backend
+      {{- include "common.labels.matchLabels" . | nindent 6 }}
+  {{- if .Values.updateStrategy }}
+  strategy: {{- toYaml .Values.updateStrategy | nindent 4 }}
+  {{- end }}
+  template:
+    metadata:
+      labels:
+        component: dashboard-backend
+        {{- include "common.labels.standard" . | nindent 8 }}
+        {{- if .Values.podLabels }}
+        {{- include "common.tplvalues.render" (dict "value" .Values.podLabels "context" $) | nindent 8 }}
+        {{- end }}
+      {{- if .Values.podAnnotations }}
+      annotations: {{- include "common.tplvalues.render" (dict "value" .Values.podAnnotations "context" $) | nindent 8 }}
+      {{- end }}
+    spec:
+      {{- include "dashboard.imagePullSecrets" . | nindent 6 }}
+      {{- if .Values.hostAliases }}
+      hostAliases: {{- include "common.tplvalues.render" (dict "value" .Values.hostAliases "context" $) | nindent 8 }}
+      {{- end }}
+      {{- if .Values.affinity }}
+      affinity: {{- include "common.tplvalues.render" (dict "value" .Values.affinity "context" $) | nindent 8 }}
+      {{- else }}
+      affinity:
+        podAffinity: {{- include "common.affinities.pods" (dict "type" .Values.podAffinityPreset "context" $) | nindent 10 }}
+        podAntiAffinity: {{- include "common.affinities.pods" (dict "type" .Values.podAntiAffinityPreset "context" $) | nindent 10 }}
+        nodeAffinity: {{- include "common.affinities.nodes" (dict "type" .Values.nodeAffinityPreset.type "key" .Values.nodeAffinityPreset.key "values" .Values.nodeAffinityPreset.values) | nindent 10 }}
+      {{- end }}
+      {{- if .Values.nodeSelector }}
+      nodeSelector: {{- include "common.tplvalues.render" (dict "value" .Values.nodeSelector "context" $) | nindent 8 }}
+      {{- end }}
+      {{- if .Values.tolerations }}
+      tolerations: {{- include "common.tplvalues.render" (dict "value" .Values.tolerations "context" $) | nindent 8 }}
+      {{- end }}
+      serviceAccountName: {{ include "dashboard.serviceAccountName" . }}
+      securityContext: {{- toYaml .Values.podSecurityContext | nindent 8 }}
+      initContainers:
+        {{- if .Values.initContainers }}
+        {{- include "common.tplvalues.render" (dict "value" .Values.initContainers "context" $) | nindent 8 }}
+        {{- end }}
+      containers:
+      - name: backend
+        securityContext: {{- toYaml .Values.backend.containerSecurityContext | nindent 10 }}
+        image: {{ template "backend.image" . }}
+        imagePullPolicy: {{ .Values.image.pullPolicy | quote }}
+        {{- if .Values.backend.command }}
+        command: {{- include "common.tplvalues.render" (dict "value" .Values.backend.command "context" $) | nindent 10 }}
+        {{- end }}
+        {{- if .Values.backend.args }}
+        args: {{- include "common.tplvalues.render" (dict "value" .Values.backend.args "context" $) | nindent 10 }}
+        {{- end }}
+        env:
+        - name: DASHBOARD_PASSWORD
+          valueFrom:
+            secretKeyRef:
+              name: {{ include "backend.secretName" . }}
+              key: backend-password
+        - name: HYDRA_CLIENT_SECRET
+          valueFrom:
+            secretKeyRef:
+              name: {{ include "backend.secretName" . }}
+              key: oidc-client-secret
+        - name: KRATOS_URL
+          value: {{ .Values.backend.kratos.adminUrl }}
+        {{- if (include "backend.smtp.password.enabled" .) }}
+        - name: DASHBOARD_SMTP_PASSWORD
+          valueFrom:
+            secretKeyRef:
+              name: {{ include "backend.smtp.secretName" . }}
+              key: smtp-password
+        {{- end }}
+        {{- if .Values.backend.extraEnvVars }}
+        {{- include "common.tplvalues.render" (dict "value" .Values.backend.extraEnvVars "context" $) | nindent 8 }}
+        {{- end }}
+        envFrom:
+          - configMapRef:
+              name: {{ include "common.names.fullname" . }}
+          {{- if .Values.backend.extraEnvVarsCM }}
+          - configMapRef:
+              name: {{ .Values.backend.extraEnvVarsCM }}
+          {{- end }}
+          {{- if .Values.backend.extraEnvVarsSecret }}
+          - secretRef:
+              name: {{ .Values.backend.extraEnvVarsSecret }}
+          {{- end }}
+        ports:
+          - name: backend-http
+            containerPort: 5000
+            protocol: TCP
+        {{- if .Values.backend.livenessProbe.enabled }}
+        livenessProbe:
+          httpGet:
+            path: /
+            port: backend-http
+          initialDelaySeconds: {{ .Values.backend.livenessProbe.initialDelaySeconds }}
+          periodSeconds: {{ .Values.backend.livenessProbe.periodSeconds }}
+          timeoutSeconds: {{ .Values.backend.livenessProbe.timeoutSeconds }}
+          successThreshold: {{ .Values.backend.livenessProbe.successThreshold }}
+          failureThreshold: {{ .Values.backend.livenessProbe.failureThreshold }}
+        {{- else if .Values.backend.customLivenessProbe }}
+        livenessProbe: {{- include "common.tplvalues.render" (dict "value" .Values.backend.customLivenessProbe "context" $) | nindent 10 }}
+        {{- end }}
+        {{- if .Values.backend.readinessProbe.enabled }}
+        readinessProbe:
+          httpGet:
+            path: /
+            port: backend-http
+          initialDelaySeconds: {{ .Values.backend.readinessProbe.initialDelaySeconds }}
+          periodSeconds: {{ .Values.backend.readinessProbe.periodSeconds }}
+          timeoutSeconds: {{ .Values.backend.readinessProbe.timeoutSeconds }}
+          successThreshold: {{ .Values.backend.readinessProbe.successThreshold }}
+          failureThreshold: {{ .Values.backend.readinessProbe.failureThreshold }}
+        {{- else if .Values.backend.customReadinessProbe }}
+        readinessProbe: {{- include "common.tplvalues.render" (dict "value" .Values.backend.customReadinessProbe "context" $) | nindent 10 }}
+        {{- end }}
+        volumeMounts:
+          {{- if .Values.backend.extraVolumeMounts }}
+          {{- include "common.tplvalues.render" (dict "value" .Values.backend.extraVolumeMounts "context" $) | nindent 10 }}
+          {{- end }}
+        {{- if .Values.backend.resources }}
+        resources: {{- toYaml .Values.backend.resources | nindent 10 }}
+        {{- end }}
+      {{- if .Values.sidecars }}
+      {{- include "common.tplvalues.render" (dict "value" .Values.sidecars "context" $) | nindent 6 }}
+      {{- end }}
+      volumes:
+        {{- if .Values.extraVolumes }}
+        {{- include "common.tplvalues.render" (dict "value" .Values.extraVolumes "context" $) | nindent 8 }}
+        {{- end }}

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

deployment/helmchart/templates/configmaps.yaml

@@ -18,11 +18,11 @@ data:
   TOKEN_URL: {{ .Values.backend.oidc.tokenUrl }}
   KRATOS_PUBLIC_URL: {{ .Values.backend.kratos.publicUrl }}
   KRATOS_ADMIN_URL: {{ .Values.backend.kratos.adminUrl }}
+  KRATOS_WEBHOOK_SECRET: {{ .Values.backend.kratos.webhookSecret }}
   HYDRA_PUBLIC_URL: {{ .Values.backend.oidc.baseUrl }}
-  # React can only read this env variable if it's prepended with REACT_APP
-  REACT_APP_HYDRA_PUBLIC_URL: {{ .Values.backend.oidc.baseUrl }}
   HYDRA_ADMIN_URL: {{ .Values.backend.hydra.adminUrl }}
-  LOGIN_PANEL_URL: {{ .Values.backend.loginPanelUrl }}
+  DASHBOARD_URL: {{ .Values.backend.dashboardUrl }}
+  LOGIN_PANEL_URL: {{ .Values.backend.dashboardUrl }}/web
   DATABASE_URL: {{ .Values.backend.databaseUrl }}
   LOAD_INCLUSTER_CONFIG: "true"
   # {{- if .Values.backend.smtp.enabled }}

deployment/helmchart/templates/deployment.yaml

-apiVersion: {{ template "common.capabilities.deployment.apiVersion" . }}
-kind: Deployment
-metadata:
-  name: {{ template "common.names.fullname" . }}
-  labels: {{- include "common.labels.standard" . | nindent 4 }}
-    component: dashboard
-    {{- if .Values.commonLabels }}
-    {{- include "common.tplvalues.render" ( dict "value" .Values.commonLabels "context" $ ) | nindent 4 }}
-    {{- end }}
-  {{- if .Values.commonAnnotations }}
-  annotations: {{- include "common.tplvalues.render" ( dict "value" .Values.commonAnnotations "context" $ ) | nindent 4 }}
-  {{- end }}
-spec:
-  replicas: {{ .Values.replicaCount }}
-  selector:
-    matchLabels: {{- include "common.labels.matchLabels" . | nindent 6 }}
-      component: dashboard
-  {{- if .Values.updateStrategy }}
-  strategy: {{- toYaml .Values.updateStrategy | nindent 4 }}
-  {{- end }}
-  template:
-    metadata:
-      labels: {{- include "common.labels.standard" . | nindent 8 }}
-        component: dashboard
-        {{- if .Values.podLabels }}
-        {{- include "common.tplvalues.render" (dict "value" .Values.podLabels "context" $) | nindent 8 }}
-        {{- end }}
-      {{- if .Values.podAnnotations }}
-      annotations: {{- include "common.tplvalues.render" (dict "value" .Values.podAnnotations "context" $) | nindent 8 }}
-      {{- end }}
-    spec:
-      {{- include "dashboard.imagePullSecrets" . | nindent 6 }}
-      {{- if .Values.hostAliases }}
-      hostAliases: {{- include "common.tplvalues.render" (dict "value" .Values.hostAliases "context" $) | nindent 8 }}
-      {{- end }}
-      {{- if .Values.affinity }}
-      affinity: {{- include "common.tplvalues.render" (dict "value" .Values.affinity "context" $) | nindent 8 }}
-      {{- else }}
-      affinity:
-        podAffinity: {{- include "common.affinities.pods" (dict "type" .Values.podAffinityPreset "context" $) | nindent 10 }}
-        podAntiAffinity: {{- include "common.affinities.pods" (dict "type" .Values.podAntiAffinityPreset "context" $) | nindent 10 }}
-        nodeAffinity: {{- include "common.affinities.nodes" (dict "type" .Values.nodeAffinityPreset.type "key" .Values.nodeAffinityPreset.key "values" .Values.nodeAffinityPreset.values) | nindent 10 }}
-      {{- end }}
-      {{- if .Values.nodeSelector }}
-      nodeSelector: {{- include "common.tplvalues.render" (dict "value" .Values.nodeSelector "context" $) | nindent 8 }}
-      {{- end }}
-      {{- if .Values.tolerations }}
-      tolerations: {{- include "common.tplvalues.render" (dict "value" .Values.tolerations "context" $) | nindent 8 }}
-      {{- end }}
-      serviceAccountName: {{ include "dashboard.serviceAccountName" . }}
-      securityContext: {{- toYaml .Values.podSecurityContext | nindent 8 }}
-      initContainers:
-        {{- if .Values.initContainers }}
-        {{- include "common.tplvalues.render" (dict "value" .Values.initContainers "context" $) | nindent 8 }}
-        {{- end }}
-      containers:
-        - name: dashboard
-          securityContext: {{- toYaml .Values.dashboard.containerSecurityContext | nindent 12 }}
-          image: {{ template "dashboard.image" . }}
-          imagePullPolicy: {{ .Values.image.pullPolicy | quote }}
-          {{- if .Values.dashboard.command }}
-          command: {{- include "common.tplvalues.render" (dict "value" .Values.dashboard.command "context" $) | nindent 12 }}
-          {{- end }}
-          {{- if .Values.dashboard.args }}
-          args: {{- include "common.tplvalues.render" (dict "value" .Values.dashboard.args "context" $) | nindent 12 }}
-          {{- end }}
-          env:
-            {{- if .Values.dashboard.extraEnvVars }}
-            {{- include "common.tplvalues.render" (dict "value" .Values.dashboard.extraEnvVars "context" $) | nindent 12 }}
-            {{- end }}
-          envFrom:
-            - configMapRef:
-                name: {{ include "common.names.fullname" . }}
-            {{- if .Values.dashboard.extraEnvVarsCM }}
-            - configMapRef:
-                name: {{ .Values.dashboard.extraEnvVarsCM }}
-            {{- end }}
-            {{- if .Values.dashboard.extraEnvVarsSecret }}
-            - secretRef:
-                name: {{ .Values.dashboard.extraEnvVarsSecret }}
-            {{- end }}
-          ports:
-            - name: dashboard-http
-              containerPort: 80
-              protocol: TCP
-          {{- if .Values.dashboard.livenessProbe.enabled }}
-          livenessProbe:
-            httpGet:
-              path: /
-              port: dashboard-http
-            initialDelaySeconds: {{ .Values.dashboard.livenessProbe.initialDelaySeconds }}
-            periodSeconds: {{ .Values.dashboard.livenessProbe.periodSeconds }}
-            timeoutSeconds: {{ .Values.dashboard.livenessProbe.timeoutSeconds }}
-            successThreshold: {{ .Values.dashboard.livenessProbe.successThreshold }}
-            failureThreshold: {{ .Values.dashboard.livenessProbe.failureThreshold }}
-          {{- else if .Values.dashboard.customLivenessProbe }}
-          livenessProbe: {{- include "common.tplvalues.render" (dict "value" .Values.dashboard.customLivenessProbe "context" $) | nindent 12 }}
-          {{- end }}
-          {{- if .Values.dashboard.readinessProbe.enabled }}
-          readinessProbe:
-            httpGet:
-              path: /
-              port: dashboard-http
-            initialDelaySeconds: {{ .Values.dashboard.readinessProbe.initialDelaySeconds }}
-            periodSeconds: {{ .Values.dashboard.readinessProbe.periodSeconds }}
-            timeoutSeconds: {{ .Values.dashboard.readinessProbe.timeoutSeconds }}
-            successThreshold: {{ .Values.dashboard.readinessProbe.successThreshold }}
-            failureThreshold: {{ .Values.dashboard.readinessProbe.failureThreshold }}
-          {{- else if .Values.dashboard.customReadinessProbe }}
-          readinessProbe: {{- include "common.tplvalues.render" (dict "value" .Values.dashboard.customReadinessProbe "context" $) | nindent 12 }}
-          {{- end }}
-          volumeMounts:
-            {{- if .Values.dashboard.extraVolumeMounts }}
-            {{- include "common.tplvalues.render" (dict "value" .Values.dashboard.extraVolumeMounts "context" $) | nindent 12 }}
-            {{- end }}
-          {{- if .Values.dashboard.resources }}
-          resources: {{- toYaml .Values.dashboard.resources | nindent 12 }}
-          {{- end }}
-        - name: backend
-          securityContext: {{- toYaml .Values.backend.containerSecurityContext | nindent 12 }}
-          image: {{ template "backend.image" . }}
-          imagePullPolicy: {{ .Values.image.pullPolicy | quote }}
-          {{- if .Values.backend.command }}
-          command: {{- include "common.tplvalues.render" (dict "value" .Values.backend.command "context" $) | nindent 12 }}
-          {{- end }}
-          {{- if .Values.backend.args }}
-          args: {{- include "common.tplvalues.render" (dict "value" .Values.backend.args "context" $) | nindent 12 }}
-          {{- end }}
-          env:
-            - name: DASHBOARD_PASSWORD
-              valueFrom:
-                secretKeyRef:
-                  name: {{ include "backend.secretName" . }}
-                  key: backend-password
-            - name: HYDRA_CLIENT_SECRET
-              valueFrom:
-                secretKeyRef:
-                  name: {{ include "backend.secretName" . }}
-                  key: oidc-client-secret
-            - name: KRATOS_URL
-              value: {{ .Values.backend.kratos.adminUrl }}
-            {{- if (include "backend.smtp.password.enabled" .) }}
-            - name: DASHBOARD_SMTP_PASSWORD
-              valueFrom:
-                secretKeyRef:
-                  name: {{ include "backend.smtp.secretName" . }}
-                  key: smtp-password
-            {{- end }}
-            {{- if .Values.backend.extraEnvVars }}
-            {{- include "common.tplvalues.render" (dict "value" .Values.backend.extraEnvVars "context" $) | nindent 12 }}
-            {{- end }}
-          envFrom:
-            - configMapRef:
-                name: {{ include "common.names.fullname" . }}
-            {{- if .Values.backend.extraEnvVarsCM }}
-            - configMapRef:
-                name: {{ .Values.backend.extraEnvVarsCM }}
-            {{- end }}
-            {{- if .Values.backend.extraEnvVarsSecret }}
-            - secretRef:
-                name: {{ .Values.backend.extraEnvVarsSecret }}
-            {{- end }}
-          ports:
-            - name: backend-http
-              containerPort: 5000
-              protocol: TCP
-          {{- if .Values.backend.livenessProbe.enabled }}
-          livenessProbe:
-            httpGet:
-              path: /
-              port: backend-http
-            initialDelaySeconds: {{ .Values.backend.livenessProbe.initialDelaySeconds }}
-            periodSeconds: {{ .Values.backend.livenessProbe.periodSeconds }}
-            timeoutSeconds: {{ .Values.backend.livenessProbe.timeoutSeconds }}
-            successThreshold: {{ .Values.backend.livenessProbe.successThreshold }}
-            failureThreshold: {{ .Values.backend.livenessProbe.failureThreshold }}
-          {{- else if .Values.backend.customLivenessProbe }}
-          livenessProbe: {{- include "common.tplvalues.render" (dict "value" .Values.backend.customLivenessProbe "context" $) | nindent 12 }}
-          {{- end }}
-          {{- if .Values.backend.readinessProbe.enabled }}
-          readinessProbe:
-            httpGet:
-              path: /
-              port: backend-http
-            initialDelaySeconds: {{ .Values.backend.readinessProbe.initialDelaySeconds }}
-            periodSeconds: {{ .Values.backend.readinessProbe.periodSeconds }}
-            timeoutSeconds: {{ .Values.backend.readinessProbe.timeoutSeconds }}
-            successThreshold: {{ .Values.backend.readinessProbe.successThreshold }}
-            failureThreshold: {{ .Values.backend.readinessProbe.failureThreshold }}
-          {{- else if .Values.backend.customReadinessProbe }}
-          readinessProbe: {{- include "common.tplvalues.render" (dict "value" .Values.backend.customReadinessProbe "context" $) | nindent 12 }}
-          {{- end }}
-          volumeMounts:
-            {{- if .Values.backend.extraVolumeMounts }}
-            {{- include "common.tplvalues.render" (dict "value" .Values.backend.extraVolumeMounts "context" $) | nindent 12 }}
-            {{- end }}
-          {{- if .Values.backend.resources }}
-          resources: {{- toYaml .Values.backend.resources | nindent 12 }}
-          {{- end }}
-        {{- if .Values.sidecars }}
-        {{- include "common.tplvalues.render" (dict "value" .Values.sidecars "context" $) | nindent 8 }}
-        {{- end }}
-      volumes:
-        {{- if .Values.extraVolumes }}
-        {{- include "common.tplvalues.render" (dict "value" .Values.extraVolumes "context" $) | nindent 8 }}
-        {{- end }}