Replace the default form for the tenant selection web page provided by the AUTHENTICATION service by a custom form.

Introduction

Users accessing yuuvis® Momentum via a browser have to select their tenant before their credentials are requested. This tenant selection web page is provided by the AUTHENTICATION Service. In order to customize the design, it is possible to replace the underlying default form files by a set of custom form files.

Required Sources

A directory public has to be available in the root of the AUTHENTICATION service's container when the service is started. In this public directory, there must be at least the files tenant.html and error.html.

In the tenant.html file, the reference on http://www.thymeleaf.org (line 2) and the corresponding form definition are required (lines 11–12) in order to provide the tenant selection functionality.

Example 'tenant.html'

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="res/tenant.css" />
	</head>
	<body>
		<span id="container">
			<span>
				<h3>Type in your tenant.</h3><br>
				<form id="tenant" th:action="@{/tenant}" method="post">
					<input type="text" name="tenant" placeholder="Tenant" /><br>
					<img src="res/next-btn.svg" onclick="document.getElementById('tenant').submit()">
				</form>
			</span>
		</span>
	</body>
</html>

In the error.html file, the reference on http://www.thymeleaf.org (line 2) and the three span definitions are required (lines 8–10) in order to provide error details.

Example 'error.html'

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8" />
</head>
	<body>
		An error has occurred <br /><br />
		<span th:text="${status}" /> (<span th:text="${reason}" />) <br />
		<span th:utext="${message}" /> <br />
		<span th:text="'timestamp: '+${timestamp}" style="display: none" />
	</body>
</html>

The usage of resource files is possible if they are located in the sub directory /public/res/ or if they are stored by a client application.

The example custom form files used in this article are available for download as public.zip file.
>> Download example 'public.zip'

Possible Procedures

There are different ways to proceed:

Kubernetes ConfigMaps
Manual replacement after starting the pod
A custom Docker image with the custom form files in a separated layer
Integration of the custom form files via Kubernetes Volumes

In this article, only the first procedure via Kubernetes ConfigMaps is described. The replacement of the default form files is explained by means of a simple example.

Configuration via Kubernetes ConfigMaps

By following these steps, you configure a simple custom web page for the tenant selection dialog:

Add the following line in the authentication-prod.yml configuration file:
```
spring.thymeleaf.prefix: 'file:/public/'
```
Unpack the public.zip file.
Create a ConfigMap for the files in the public directory via the command:
```
kubectl -n yuuvis create configmap templates --from-file=./public/
```
Adjust the Kubernetes deployment of the AUTHENTICATION service via the command:
```
kubectl -n yuuvis edit deploy authentication
```

Extend the volumes section as follows:

volumes:
- name: templates
  configMap:
    name: templates

Extend the volumeMounts section as follows:

volumeMounts:
- name: templates
  mountPath: /public/tenant.html
  subPath: tenant.html
- name: templates
  mountPath: /public/error.html
  subPath: error.html
- name: templates
  mountPath: /public/res/tenant.css
  subPath: tenant.css
- name: templates
  mountPath: /public/res/next-btn.svg
  subPath: next-btn.svg

Restart the AUTHENTICATION service.

Read on

Installation Guide

Instructions for the installation of a yuuvis® Momentum system operating in a Kubernetes cluster via Helm Charts. Start with Helm charts for testing purposes and replace default third-party software according to your preferences. Keep reading

Access Authorization and Permissions

A yuuvis® Momentum user has to be authorized to the functionality of the system by assigning roles. For the individual roles, permissions can be set to allow actions on objects restricted by defined conditions where appropriate and the usage of specific endpoints can be controlled. Keep reading

Authentication against the Core API

This article details the authentication methods compatible with the yuuvis® Core API and how to choose the correct one for your use case. Keep reading

Customizing the Tenant Selection Web Page

Table of Contents