Can also change view to something like this,
<body>
<main role="main" class="container mt-3 mb-3">
<div layout:fragment="content" id="login">
<div id="content-message" class="text-center">
<h5 th:text="#{cas.mfa.registerdevice.label.title}">Register Device</h5>
<p th:text="#{cas.mfa.registerdevice.label.intro}">Please name the current device.</p>
</div>
<form method="post" id="registerform" th:object="${mfaTrustRecord}" th:action="@{/login}">
<div class="row mb-3">
<input type="hidden" id="deviceName" name="deviceName" th:field="*{deviceName}" />
<div id="expirationField" style="display:none">
<input type="hidden" id="expiration" name="expiration" value="60" />
<input type="hidden" id="timeUnit" name="timeUnit" value="DAYS" />
</div>
<script>document.getElementById("deviceName").value = randomWord();</script>
</div>
<div class="my-2 float-end">
<button class="btn btn-primary" accesskey="s">
<span th:text="#{cas.mfa.registerdevice.button.register}">Register</span>
</button>
<button class="btn btn-secondary novalidate" accesskey="k" formnovalidate onclick="$('#eventId').val('skip');">
<span th:text="#{cas.mfa.registerdevice.button.skip}">Skip</span>
</button>
<input type="hidden" id="eventId" name="_eventId" value="submit" />
<input type="hidden" name="geolocation" />
<input type="hidden" name="execution" th:value="${flowExecutionKey}" />
</div>
</form>
</div>
</main>
</body>