Skip to content

Commit b1c4767

Browse files
dorianimlukin
dorianim
and
lukin
committed
feat: add login x509 info page (lukin#52)
Co-authored-by: Anthony Lukin <[email protected]>
1 parent a7d7a66 commit b1c4767

File tree

4 files changed

+119
-0
lines changed

4 files changed

+119
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ Keywind is a component-based Keycloak Login Theme built with [Tailwind CSS](http
2020
- Login Update Password
2121
- Login Update Profile
2222
- Login Username
23+
- Login X.509 Info
2324
- Logout Confirm
2425
- Register
2526
- Select Authenticator

‎html/login/login-x509-info.html

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<html lang="en">
2+
<head>
3+
<title>Sign in to </title>
4+
<meta charset="utf-8">
5+
<meta name="robots" content="noindex, nofollow">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link href="../../theme/keywind/login/resources/dist/index.css" rel="stylesheet">
8+
<script defer src="../../theme/keywind/login/resources/dist/index.js" type="module"></script>
9+
</head>
10+
<body class="bg-secondary-100 flex flex-col items-center justify-center min-h-screen sm:py-16">
11+
<div class="max-w-md space-y-6 w-full">
12+
<div class="bg-white p-8 rounded-lg space-y-6">
13+
<div class="space-y-4">
14+
<div class="font-bold text-center text-2xl">
15+
Keywind
16+
</div>
17+
<h1 class="text-center text-xl">Sign In</h1>
18+
</div>
19+
<div class="space-y-4">
20+
<div class="bg-red-100 text-red-600 p-4 rounded-lg text-sm" role="alert">
21+
Example of an error message
22+
</div>
23+
<div>
24+
<div>
25+
X509 client certificate:
26+
</div>
27+
<div class="text-secondary-600">
28+
CN=User, C=US, O=Keywind
29+
</div>
30+
</div>
31+
<div>
32+
<span>You will be logged in as:</span> <b>Username</b>
33+
</div>
34+
<form class="m-0 space-y-4" method="post" action="loginAction">
35+
<div class="flex flex-col pt-4 space-y-2">
36+
<button class="bg-primary-600 text-white focus:ring-primary-600 hover:bg-primary-700 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="login" type="submit"> Continue </button> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" name="cancel" type="submit"> Ignore </button>
37+
</div>
38+
</form>
39+
<form action="loginAction" method="post">
40+
<input name="tryAnotherWay" type="hidden" value="on"> <button class="bg-secondary-100 text-secondary-600 focus:ring-secondary-600 hover:bg-secondary-200 hover:text-secondary-900 px-4 py-2 text-sm flex justify-center relative rounded-lg w-full focus:outline-none focus:ring-2 focus:ring-offset-2" type="submit"> Try Another Way </button>
41+
</form>
42+
</div>
43+
</div>
44+
<div class="flex justify-around">
45+
<div class="relative" x-data="{ open: false }">
46+
<button class="text-secondary-600 hover:text-secondary-900 inline-flex" @click="open = true" type="button">
47+
<div class="flex items-center">
48+
<span class="mr-1 text-sm">English</span>
49+
<svg class="h-5 w-5" fill="currentColor" viewbox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
50+
<path clip-rule="evenodd" d="M5.23017 7.20938C5.52875 6.92228 6.00353 6.93159 6.29063 7.23017L10 11.1679L13.7094 7.23017C13.9965 6.93159 14.4713 6.92228 14.7698 7.20938C15.0684 7.49647 15.0777 7.97125 14.7906 8.26983L10.5406 12.7698C10.3992 12.9169 10.204 13 10 13C9.79599 13 9.60078 12.9169 9.45938 12.7698L5.20938 8.26983C4.92228 7.97125 4.93159 7.49647 5.23017 7.20938Z" fill-rule="evenodd" />
51+
</svg>
52+
</div></button>
53+
<div @click.away="open = false" class="absolute bg-white bottom-0 -left-4 max-h-80 mb-6 overflow-y-scroll rounded-lg shadow-lg" x-cloak x-show="open">
54+
<div class="px-4 py-2">
55+
<a class="text-secondary-600 hover:text-secondary-900 text-sm inline-flex" href="url"> Deutsch </a>
56+
</div>
57+
<div class="px-4 py-2">
58+
<a class="text-secondary-600 hover:text-secondary-900 text-sm inline-flex" href="url"> Français </a>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
</body>
65+
</html>

‎src/test/java/org/keywind/theme/LoginDataModel.java

+13
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ public static Map<String, Object> createDataModel() {
2525
dataModel.put("url", createUrlModel());
2626
dataModel.put("user", createUserModel());
2727
dataModel.put("username", "Username");
28+
dataModel.put("x509", createX509Model());
2829
dataModel.putAll(createWebAuthnModel());
2930

3031
return dataModel;
@@ -249,4 +250,16 @@ private static Map<String, Object> createWebAuthnModel() {
249250

250251
return webAuthn;
251252
}
253+
254+
private static Map<String, Object> createX509Model() {
255+
Map<String, Object> formData = new HashMap<>();
256+
formData.put("isUserEnabled", "true");
257+
formData.put("subjectDN", "CN=User, C=US, O=Keywind");
258+
formData.put("username", "Username");
259+
260+
Map<String, Object> x509 = new HashMap<>();
261+
x509.put("formData", formData);
262+
263+
return x509;
264+
}
252265
}

‎theme/keywind/login/login-x509-info.ftl

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<#import "template.ftl" as layout>
2+
<#import "components/atoms/button.ftl" as button>
3+
<#import "components/atoms/button-group.ftl" as buttonGroup>
4+
<#import "components/atoms/form.ftl" as form>
5+
<#import "components/atoms/link.ftl" as link>
6+
7+
<@layout.registrationLayout; section>
8+
<#if section = "header">
9+
${msg("doLogIn")}
10+
<#elseif section = "form">
11+
<div>
12+
<div>${msg("clientCertificate")}</div>
13+
<div class="text-secondary-600">
14+
<#if x509.formData.subjectDN??>
15+
${(x509.formData.subjectDN!"")}
16+
<#else>
17+
${msg("noCertificate")}
18+
</#if>
19+
</div>
20+
</div>
21+
<#if x509.formData.isUserEnabled??>
22+
<div>
23+
<span>${msg("doX509Login")}</span>
24+
<b>${(x509.formData.username!'')}</b>
25+
</div>
26+
</#if>
27+
<@form.kw action=url.loginAction method="post">
28+
<@buttonGroup.kw>
29+
<@button.kw color="primary" name="login" type="submit">
30+
${msg("doContinue")}
31+
</@button.kw>
32+
<#if x509.formData.isUserEnabled??>
33+
<@button.kw color="secondary" name="cancel" type="submit">
34+
${msg("doIgnore")}
35+
</@button.kw>
36+
</#if>
37+
</@buttonGroup.kw>
38+
</@form.kw>
39+
</#if>
40+
</@layout.registrationLayout>

0 commit comments

Comments
 (0)