Customizing the Tenant Selection Web Page
- Technische Redaktion
Replace the default form for the tenant selection web page provided by the AUTHENTICATION service by a custom form.
Table of Contents
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.
<!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.
<!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.zipfile. 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
volumessection as follows:volumes: - name: templates configMap: name: templatesExtend the
volumeMountssection 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.