Skip to content

Commit

Permalink
Merge pull request #114 from szymonpoltorak/DEV-187-UserAccountManage…
Browse files Browse the repository at this point in the history
…mentTheme

Dev 187 user account management theme
  • Loading branch information
igorkedzierawski authored May 8, 2024
2 parents 1b2cbee + 5b9fd73 commit 31e8841
Show file tree
Hide file tree
Showing 22 changed files with 716 additions and 10 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ public final class ExternalConfig {
private static final String KCCFG_CREATE_PLACEHOLDER_USERS = System.getenv("KCCFG_CREATE_PLACEHOLDER_USERS");

public static final String KCCFG_LOGIN_THEME_NAME = System.getenv("KCCFG_LOGIN_THEME_NAME");
public static final String KCCFG_ACCOUNT_THEME_NAME = System.getenv("KCCFG_ACCOUNT_THEME_NAME");

private static final String KC_SERVER_URL = System.getenv("KC_SERVER_URL");

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,10 @@ public CornRealm() {
if(ExternalConfig.KCCFG_LOGIN_THEME_NAME != null) {
setLoginTheme(ExternalConfig.KCCFG_LOGIN_THEME_NAME);
}

if(ExternalConfig.KCCFG_ACCOUNT_THEME_NAME != null) {
setAccountTheme(ExternalConfig.KCCFG_ACCOUNT_THEME_NAME);
}
}

}
2 changes: 1 addition & 1 deletion auth-server/keycloak-theme/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,4 @@ testem.log
Thumbs.db

#Generated css
themes/corn/login/resources/css/styles.css
themes/corn/common/resources/css/styles.css
4 changes: 2 additions & 2 deletions auth-server/keycloak-theme/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
"name": "corn-theme",
"version": "1.0.0",
"scripts": {
"build:corn:dev": "tailwindcss -i ./styles/styles.css -o ./themes/corn/login/resources/css/styles.css --watch",
"build:corn:prod": "NODE_ENV=production tailwindcss -i ./styles/styles.css -o ./themes/corn/login/resources/css/styles.css --minify",
"build:corn:dev": "tailwindcss -i ./styles/styles.css -o ./themes/corn/common/resources/css/styles.css --watch",
"build:corn:prod": "NODE_ENV=production tailwindcss -i ./styles/styles.css -o ./themes/corn/common/resources/css/styles.css --minify",
"prettify": "prettier --write '**/*.{js,jsx}'"
},
"lint-staged": {
Expand Down
68 changes: 68 additions & 0 deletions auth-server/keycloak-theme/tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,75 @@ module.exports = {
theme: {
extend: {
colors: {
corn: {
primary: {
50: '#ffe599',
100: '#ffde7f',
200: '#ffd866',
300: '#ffd14c',
400: '#ffcb32',
500: '#ffc419',
600: '#b28500',
700: '#cc9800',
800: '#e5ab00',
900: '#ffbe00',
A100: '#ffe599',
A200: '#ffd866',
A400: '#e5ab00',
A700: '#ffbe00',
contrast: {
50: '#000000',
100: '#000000',
200: '#000000',
300: '#000000',
400: '#ffffff',
500: '#ffffff',
600: '#ffffff',
700: '#ffffff',
800: '#ffffff',
900: '#ffffff',
A100: '#000000',
A200: '#000000',
A400: '#000000',
A700: '#000000',
},
},
accent: {
50: '#b9e3c6',
100: '#73c68e',
200: '#5bbd7b',
300: '#44b368',
400: '#2caa55',
500: '#14A142',
600: '#13903b',
700: '#118035',
800: '#0f702e',
900: '#0d6028',
A100: '#8ad0a1',
A200: '#ffd866',
A400: '#e5ab00',
A700: '#ffbe00',
contrast: {
50: '#000000',
100: '#000000',
200: '#000000',
300: '#000000',
400: '#ffffff',
500: '#ffffff',
600: '#ffffff',
700: '#ffffff',
800: '#ffffff',
900: '#ffffff',
A100: '#000000',
A200: '#000000',
A400: '#000000',
A700: '#000000',
},
},
},
yellowishDark: '#282727',
yellowishDark100: '#49423f',
yellowishDark200: '#666157',
},
},
}
Expand Down
107 changes: 107 additions & 0 deletions auth-server/keycloak-theme/themes/corn/account/account.ftl
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<#import "tailwind-template.ftl" as layout>
<#import "common.ftl" as common />

<@layout.mainLayout active='account' bodyClass='user'; section>

<div class="flex justify-between items-center px-6 pb-4 border-b border-gray-300">
<h2 class="text-3xl font-bold">${msg("editAccountHtmlTitle")}</h2>
<div class="text-sm">
<@common.RED_STAR />
<span>${msg("requiredFields")}</span>
</div>
</div>

<div class="pt-4">
<form action="${url.accountUrl}" class="grid gap-2" method="post">

<input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">

<#if !realm.registrationEmailAsUsername>
<div>
<div>
<label for="username">${msg("username")}</label>
<@common.RED_STAR />
<#if messagesPerField.existsError('username')>
<span class="text-red-500">
${kcSanitize(messagesPerField.getFirstError('username'))?no_esc}
</span>
</#if>
</div>

<@common.DARK_INPUT
tabindex="0" type="text"
placeholder="${msg('username')}"
id="username" name="username"
value="${(account.username!'')}"
disabled="${(!(realm.editUsernameAllowed))?string('true', 'false')}"
/>
</div>
</#if>

<div>
<div>
<label for="email">${msg("email")}</label>
<@common.RED_STAR />
<#if messagesPerField.existsError('email')>
<span class="text-red-500">
${kcSanitize(messagesPerField.getFirstError('email'))?no_esc}
</span>
</#if>
</div>
<@common.DARK_INPUT
tabindex="0" type="text"
placeholder="${msg('email')}"
id="email" name="email"
value="${(account.email!'')}"
/>
</div>

<div>
<div>
<label for="firstName">${msg("firstName")}</label>
<@common.RED_STAR />
<#if messagesPerField.existsError('firstName')>
<span class="text-red-500">
${kcSanitize(messagesPerField.getFirstError('firstName'))?no_esc}
</span>
</#if>
</div>
<@common.DARK_INPUT
tabindex="0" type="text"
placeholder="${msg('firstName')}"
id="firstName" name="firstName"
value="${(account.firstName!'')}"
/>
</div>

<div>
<div>
<label for="lastName">${msg("lastName")}</label>
<@common.RED_STAR />
<#if messagesPerField.existsError('lastName')>
<span class="text-red-500">
${kcSanitize(messagesPerField.getFirstError('lastName'))?no_esc}
</span>
</#if>
</div>
<@common.DARK_INPUT
tabindex="0" type="text"
placeholder="${msg('lastName')}"
id="lastName" name="lastName"
value="${(account.lastName!'')}"
/>
</div>

<div class="grid gap-4 pt-2">
<@common.YELLOW_BUTTON tabindex="" type="submit" name="submitAction" id="kc-login" value="Save">
${msg("doSave")}
</@common.YELLOW_BUTTON>
<@common.WHITE_BUTTON tabindex="" type="submit" name="submitAction" id="kc-login" value="Cancel">
${msg("doCancel")}
</@common.WHITE_BUTTON>
</div>

</form>
</div>

</@layout.mainLayout>
78 changes: 78 additions & 0 deletions auth-server/keycloak-theme/themes/corn/account/applications.ftl
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<#import "tailwind-template.ftl" as layout>
<#import "common.ftl" as common />

<@layout.mainLayout active='applications' bodyClass='applications'; section>

<div class="flex justify-between items-center px-6 pb-4 border-b border-gray-300">
<h2 class="text-3xl font-bold">${msg("applicationsHtmlTitle")}</h2>
</div>

<div class="pt-4">
<form action="${url.applicationsUrl}" method="post">
<input type="hidden" id="stateChecker" name="stateChecker" value="${stateChecker}">
<input type="hidden" id="referrer" name="referrer" value="${stateChecker}">

<table class="min-w-full divide-y divide-gray-200 bg-yellowishDark100">
<thead>
<tr class="text-left text-xs font-medium text-gray-200 uppercase tracking-wider">
<th class="px-3 py-3">${msg("application")}</th>
<th class="px-3 py-3">${msg("availableRoles")}</th>
<th class="px-3 py-3">${msg("grantedPermissions")}</th>
<th class="px-3 py-3">${msg("additionalGrants")}</th>
<th class="px-3 py-3">${msg("action")}</th>
</tr>
</thead>

<tbody class="divide-y divide-gray-200">
<#list applications.applications as application>
<tr class="text-sm text-white">
<td class="px-3 py-4">
<#if application.effectiveUrl?has_content><a href="${application.effectiveUrl}"></#if>
<#if application.client.name?has_content>${advancedMsg(application.client.name)}<#else>${application.client.clientId}</#if>
<#if application.effectiveUrl?has_content></a></#if>
</td>

<td class="px-3 py-4">
<#list application.realmRolesAvailable as role>
<#if role.description??>${advancedMsg(role.description)}<#else>${advancedMsg(role.name)}</#if>
<#if role_has_next>, </#if>
</#list>
<#list application.resourceRolesAvailable?keys as resource>
<#if application.realmRolesAvailable?has_content>, </#if>
<#list application.resourceRolesAvailable[resource] as clientRole>
<#if clientRole.roleDescription??>${advancedMsg(clientRole.roleDescription)}<#else>${advancedMsg(clientRole.roleName)}</#if>
${msg("inResource")} <strong><#if clientRole.clientName??>${advancedMsg(clientRole.clientName)}<#else>${clientRole.clientId}</#if></strong>
<#if clientRole_has_next>, </#if>
</#list>
</#list>
</td>

<td class="px-3 py-4">
<#if application.client.consentRequired>
<#list application.clientScopesGranted as claim>
${advancedMsg(claim)}<#if claim_has_next>, </#if>
</#list>
<#else>
<strong>${msg("fullAccess")}</strong>
</#if>
</td>

<td class="px-3 py-4">
<#list application.additionalGrants as grant>
${advancedMsg(grant)}<#if grant_has_next>, </#if>
</#list>
</td>

<td class="px-3 py-4">
<#if (application.client.consentRequired && application.clientScopesGranted?has_content) || application.additionalGrants?has_content>
<button type='submit' class='${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!}' id='revoke-${application.client.clientId}' name='clientId' value="${application.client.id}">${msg("revoke")}</button>
</#if>
</td>
</tr>
</#list>
</tbody>
</table>
</form>
<div>

</@layout.mainLayout>
Loading

0 comments on commit 31e8841

Please sign in to comment.