From 6c69c243baf64ad5a9fb5c3022e8a1bdf9350132 Mon Sep 17 00:00:00 2001 From: Igor Kedzierawski Date: Tue, 7 May 2024 12:28:06 +0200 Subject: [PATCH 01/10] added redirect to user management page when clicked on users profile --- .../src/app/pages/boards/userinfo/userinfo.component.html | 2 +- .../src/app/pages/boards/userinfo/userinfo.component.ts | 1 + corn-frontend/src/app/shared/toolbar/toolbar.component.html | 1 + corn-frontend/src/app/shared/toolbar/toolbar.component.ts | 5 +++++ 4 files changed, 8 insertions(+), 1 deletion(-) diff --git a/corn-frontend/src/app/pages/boards/userinfo/userinfo.component.html b/corn-frontend/src/app/pages/boards/userinfo/userinfo.component.html index 75930118..a61e32d8 100644 --- a/corn-frontend/src/app/pages/boards/userinfo/userinfo.component.html +++ b/corn-frontend/src/app/pages/boards/userinfo/userinfo.component.html @@ -2,7 +2,7 @@ -
+
diff --git a/corn-frontend/src/app/pages/boards/userinfo/userinfo.component.ts b/corn-frontend/src/app/pages/boards/userinfo/userinfo.component.ts index b50a18b8..86cf00a0 100644 --- a/corn-frontend/src/app/pages/boards/userinfo/userinfo.component.ts +++ b/corn-frontend/src/app/pages/boards/userinfo/userinfo.component.ts @@ -25,5 +25,6 @@ export class UserinfoComponent { @Input() username: string = ''; @Output() logout = new EventEmitter(); + @Output() profileClicked = new EventEmitter(); } diff --git a/corn-frontend/src/app/shared/toolbar/toolbar.component.html b/corn-frontend/src/app/shared/toolbar/toolbar.component.html index 39adc95f..ebb450fa 100644 --- a/corn-frontend/src/app/shared/toolbar/toolbar.component.html +++ b/corn-frontend/src/app/shared/toolbar/toolbar.component.html @@ -30,6 +30,7 @@ @if (isLoggedIn && userProfile) { } diff --git a/corn-frontend/src/app/shared/toolbar/toolbar.component.ts b/corn-frontend/src/app/shared/toolbar/toolbar.component.ts index 4c288120..d35b41e2 100644 --- a/corn-frontend/src/app/shared/toolbar/toolbar.component.ts +++ b/corn-frontend/src/app/shared/toolbar/toolbar.component.ts @@ -61,4 +61,9 @@ export class ToolbarComponent implements OnInit { this.storage.deleteProjectFromStorage(); this.keycloak.logout(); } + + profileClicked(): void { + (this.keycloak as any)._instance.accountManagement(); + } + } From 0d974a0d22177fb762167dec9c985f7916612958 Mon Sep 17 00:00:00 2001 From: Igor Kedzierawski Date: Tue, 7 May 2024 13:43:35 +0200 Subject: [PATCH 02/10] created account theme directory and updated keycloak initialization --- .../src/main/java/keycloakinitializer/ExternalConfig.java | 1 + .../main/java/keycloakinitializer/realm/corn/CornRealm.java | 4 ++++ .../keycloak-theme/themes/corn/account/theme.properties | 1 + docker-compose.dev.yml | 1 + docker-compose.prod.yml | 1 + 5 files changed, 8 insertions(+) create mode 100644 auth-server/keycloak-theme/themes/corn/account/theme.properties diff --git a/auth-server/keycloak-initializer/src/main/java/keycloakinitializer/ExternalConfig.java b/auth-server/keycloak-initializer/src/main/java/keycloakinitializer/ExternalConfig.java index 237266e3..af92fd7d 100644 --- a/auth-server/keycloak-initializer/src/main/java/keycloakinitializer/ExternalConfig.java +++ b/auth-server/keycloak-initializer/src/main/java/keycloakinitializer/ExternalConfig.java @@ -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"); diff --git a/auth-server/keycloak-initializer/src/main/java/keycloakinitializer/realm/corn/CornRealm.java b/auth-server/keycloak-initializer/src/main/java/keycloakinitializer/realm/corn/CornRealm.java index 1e001673..a2fb644c 100644 --- a/auth-server/keycloak-initializer/src/main/java/keycloakinitializer/realm/corn/CornRealm.java +++ b/auth-server/keycloak-initializer/src/main/java/keycloakinitializer/realm/corn/CornRealm.java @@ -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); + } } } diff --git a/auth-server/keycloak-theme/themes/corn/account/theme.properties b/auth-server/keycloak-theme/themes/corn/account/theme.properties new file mode 100644 index 00000000..ee3f1d1e --- /dev/null +++ b/auth-server/keycloak-theme/themes/corn/account/theme.properties @@ -0,0 +1 @@ +parent=keycloak diff --git a/docker-compose.dev.yml b/docker-compose.dev.yml index 170b6098..ddfb0525 100644 --- a/docker-compose.dev.yml +++ b/docker-compose.dev.yml @@ -77,6 +77,7 @@ services: - KCCFG_OVERRIDE_EXISTING=true - KCCFG_CREATE_PLACEHOLDER_USERS=true - KCCFG_LOGIN_THEME_NAME=corn + - KCCFG_ACCOUNT_THEME_NAME=corn - KC_SERVER_URL=http://corn-keycloak:8080 volumes: - "./auth-server/keycloak-initializer:/keycloak-initializer" diff --git a/docker-compose.prod.yml b/docker-compose.prod.yml index d2adb465..005bfe14 100644 --- a/docker-compose.prod.yml +++ b/docker-compose.prod.yml @@ -64,6 +64,7 @@ services: environment: - KCCFG_OVERRIDE_EXISTING=false - KCCFG_LOGIN_THEME_NAME=corn + - KCCFG_ACCOUNT_THEME_NAME=corn - KC_SERVER_URL=http://corn-keycloak:8080 corn-keycloak: From fe63d83a7a4225021d3ed0edff19ce041ef12c0e Mon Sep 17 00:00:00 2001 From: Igor Kedzierawski Date: Tue, 7 May 2024 15:39:30 +0200 Subject: [PATCH 03/10] created environment for account theme development --- auth-server/keycloak-theme/.gitignore | 2 +- auth-server/keycloak-theme/package.json | 4 +- .../themes/corn/account/account.ftl | 70 ++++++++++++ .../themes/corn/account/applications.ftl | 76 ++++++++++++ .../themes/corn/account/password.ftl | 59 ++++++++++ .../themes/corn/account/sessions.ftl | 44 +++++++ .../themes/corn/account/tailwind-template.ftl | 108 ++++++++++++++++++ .../{login => common}/resources/css/.gitkeep | 0 .../{login => common}/resources/img/corn.png | Bin .../themes/corn/login/tailwind-template.ftl | 6 +- 10 files changed, 363 insertions(+), 6 deletions(-) create mode 100644 auth-server/keycloak-theme/themes/corn/account/account.ftl create mode 100644 auth-server/keycloak-theme/themes/corn/account/applications.ftl create mode 100644 auth-server/keycloak-theme/themes/corn/account/password.ftl create mode 100644 auth-server/keycloak-theme/themes/corn/account/sessions.ftl create mode 100644 auth-server/keycloak-theme/themes/corn/account/tailwind-template.ftl rename auth-server/keycloak-theme/themes/corn/{login => common}/resources/css/.gitkeep (100%) rename auth-server/keycloak-theme/themes/corn/{login => common}/resources/img/corn.png (100%) diff --git a/auth-server/keycloak-theme/.gitignore b/auth-server/keycloak-theme/.gitignore index 95a35a5d..d2cbeae2 100644 --- a/auth-server/keycloak-theme/.gitignore +++ b/auth-server/keycloak-theme/.gitignore @@ -42,4 +42,4 @@ testem.log Thumbs.db #Generated css -themes/corn/login/resources/css/styles.css +themes/corn/common/resources/css/styles.css diff --git a/auth-server/keycloak-theme/package.json b/auth-server/keycloak-theme/package.json index 2afcf96a..ec6ef1cc 100644 --- a/auth-server/keycloak-theme/package.json +++ b/auth-server/keycloak-theme/package.json @@ -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": { diff --git a/auth-server/keycloak-theme/themes/corn/account/account.ftl b/auth-server/keycloak-theme/themes/corn/account/account.ftl new file mode 100644 index 00000000..43d1fcde --- /dev/null +++ b/auth-server/keycloak-theme/themes/corn/account/account.ftl @@ -0,0 +1,70 @@ +<#import "tailwind-template.ftl" as layout> +<@layout.mainLayout active='account' bodyClass='user'; section> + +
+
+

${msg("editAccountHtmlTitle")}

+
+
+ * ${msg("requiredFields")} +
+
+ +
+ + + + <#if !realm.registrationEmailAsUsername> +
+
+ <#if realm.editUsernameAllowed>* +
+ +
+ disabled="disabled" value="${(account.username!'')}"/> +
+
+ + +
+
+ * +
+ +
+ +
+
+ +
+
+ * +
+ +
+ +
+
+ +
+
+ * +
+ +
+ +
+
+ +
+
+
+ <#if url.referrerURI??>${kcSanitize(msg("backToApplication")?no_esc)} + + +
+
+
+
+ + diff --git a/auth-server/keycloak-theme/themes/corn/account/applications.ftl b/auth-server/keycloak-theme/themes/corn/account/applications.ftl new file mode 100644 index 00000000..b8e5ecb0 --- /dev/null +++ b/auth-server/keycloak-theme/themes/corn/account/applications.ftl @@ -0,0 +1,76 @@ +<#import "tailwind-template.ftl" as layout> +<@layout.mainLayout active='applications' bodyClass='applications'; section> + +
+
+

${msg("applicationsHtmlTitle")}

+
+
+ +
+ + + + + + + + + + + + + + + + <#list applications.applications as application> + + + + + + + + + + + + + +
${msg("application")}${msg("availableRoles")}${msg("grantedPermissions")}${msg("additionalGrants")}${msg("action")}
+ <#if application.effectiveUrl?has_content> + <#if application.client.name?has_content>${advancedMsg(application.client.name)}<#else>${application.client.clientId} + <#if application.effectiveUrl?has_content> + + <#list application.realmRolesAvailable as role> + <#if role.description??>${advancedMsg(role.description)}<#else>${advancedMsg(role.name)} + <#if role_has_next>, + + <#list application.resourceRolesAvailable?keys as resource> + <#if application.realmRolesAvailable?has_content>, + <#list application.resourceRolesAvailable[resource] as clientRole> + <#if clientRole.roleDescription??>${advancedMsg(clientRole.roleDescription)}<#else>${advancedMsg(clientRole.roleName)} + ${msg("inResource")} <#if clientRole.clientName??>${advancedMsg(clientRole.clientName)}<#else>${clientRole.clientId} + <#if clientRole_has_next>, + + + + <#if application.client.consentRequired> + <#list application.clientScopesGranted as claim> + ${advancedMsg(claim)}<#if claim_has_next>, + + <#else> + ${msg("fullAccess")} + + + <#list application.additionalGrants as grant> + ${advancedMsg(grant)}<#if grant_has_next>, + + + <#if (application.client.consentRequired && application.clientScopesGranted?has_content) || application.additionalGrants?has_content> + + +
+
+ + \ No newline at end of file diff --git a/auth-server/keycloak-theme/themes/corn/account/password.ftl b/auth-server/keycloak-theme/themes/corn/account/password.ftl new file mode 100644 index 00000000..3df41462 --- /dev/null +++ b/auth-server/keycloak-theme/themes/corn/account/password.ftl @@ -0,0 +1,59 @@ +<#import "tailwind-template.ftl" as layout> +<@layout.mainLayout active='password' bodyClass='password'; section> + +
+
+

${msg("changePasswordHtmlTitle")}

+
+
+ ${msg("allFieldsRequired")} +
+
+ +
+ + + <#if password.passwordSet> +
+
+ +
+ +
+ +
+
+ + + + +
+
+ +
+ +
+ +
+
+ +
+
+ +
+ +
+ +
+
+ +
+
+
+ +
+
+
+
+ + diff --git a/auth-server/keycloak-theme/themes/corn/account/sessions.ftl b/auth-server/keycloak-theme/themes/corn/account/sessions.ftl new file mode 100644 index 00000000..3c3c7102 --- /dev/null +++ b/auth-server/keycloak-theme/themes/corn/account/sessions.ftl @@ -0,0 +1,44 @@ +<#import "tailwind-template.ftl" as layout> +<@layout.mainLayout active='sessions' bodyClass='sessions'; section> + +
+
+

${msg("sessionsHtmlTitle")}

+
+
+ + + + + + + + + + + + + + <#list sessions.sessions as session> + + + + + + + + + + +
${msg("ip")}${msg("started")}${msg("lastAccess")}${msg("expires")}${msg("clients")}
${session.ipAddress}${session.started?datetime}${session.lastAccess?datetime}${session.expires?datetime} + <#list session.clients as client> + ${client}
+ +
+ +
+ + +
+ + diff --git a/auth-server/keycloak-theme/themes/corn/account/tailwind-template.ftl b/auth-server/keycloak-theme/themes/corn/account/tailwind-template.ftl new file mode 100644 index 00000000..48c6e916 --- /dev/null +++ b/auth-server/keycloak-theme/themes/corn/account/tailwind-template.ftl @@ -0,0 +1,108 @@ +<#macro mainLayout active bodyClass> + + + + + + + + <#if properties.meta?has_content> + <#list properties.meta?split(' ') as meta> + + + + + ${msg("accountManagementTitle")} + + + + + + +<#-- + + + + + ${msg("accountManagementTitle")} + + <#if properties.stylesCommon?has_content> + <#list properties.stylesCommon?split(' ') as style> + + + + <#if properties.styles?has_content> + <#list properties.styles?split(' ') as style> + + + + <#if properties.scripts?has_content> + <#list properties.scripts?split(' ') as script> + + + + --> + + +

TW works

+ +
+ +
+ +
+
+ +
+ +
+ <#if message?has_content> +
+ <#if message.type=='success' > + <#if message.type=='error' > + +
+ + + <#nested "content"> +
+
+ + + + \ No newline at end of file diff --git a/auth-server/keycloak-theme/themes/corn/login/resources/css/.gitkeep b/auth-server/keycloak-theme/themes/corn/common/resources/css/.gitkeep similarity index 100% rename from auth-server/keycloak-theme/themes/corn/login/resources/css/.gitkeep rename to auth-server/keycloak-theme/themes/corn/common/resources/css/.gitkeep diff --git a/auth-server/keycloak-theme/themes/corn/login/resources/img/corn.png b/auth-server/keycloak-theme/themes/corn/common/resources/img/corn.png similarity index 100% rename from auth-server/keycloak-theme/themes/corn/login/resources/img/corn.png rename to auth-server/keycloak-theme/themes/corn/common/resources/img/corn.png diff --git a/auth-server/keycloak-theme/themes/corn/login/tailwind-template.ftl b/auth-server/keycloak-theme/themes/corn/login/tailwind-template.ftl index b6f8e611..868f845c 100644 --- a/auth-server/keycloak-theme/themes/corn/login/tailwind-template.ftl +++ b/auth-server/keycloak-theme/themes/corn/login/tailwind-template.ftl @@ -14,8 +14,8 @@ ${msg("loginTitle",(realm.displayName!''))} - - + + @@ -23,7 +23,7 @@
- +
From 0a4c6d011368a84f1c2d4887589b74706d03954e Mon Sep 17 00:00:00 2001 From: Igor Kedzierawski Date: Wed, 8 May 2024 16:10:07 +0200 Subject: [PATCH 04/10] added corn theme colors --- auth-server/keycloak-theme/tailwind.config.js | 68 +++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/auth-server/keycloak-theme/tailwind.config.js b/auth-server/keycloak-theme/tailwind.config.js index d7147e5b..f2d4d0a7 100644 --- a/auth-server/keycloak-theme/tailwind.config.js +++ b/auth-server/keycloak-theme/tailwind.config.js @@ -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', }, }, } From 49a955ba88b8b15ed050e1039e852cb245b750e9 Mon Sep 17 00:00:00 2001 From: Igor Kedzierawski Date: Tue, 7 May 2024 17:15:19 +0200 Subject: [PATCH 05/10] implemented basic template --- .../themes/corn/account/common.ftl | 169 ++++++++++++++++++ .../themes/corn/account/tailwind-template.ftl | 148 +++++++-------- 2 files changed, 246 insertions(+), 71 deletions(-) create mode 100644 auth-server/keycloak-theme/themes/corn/account/common.ftl diff --git a/auth-server/keycloak-theme/themes/corn/account/common.ftl b/auth-server/keycloak-theme/themes/corn/account/common.ftl new file mode 100644 index 00000000..6da8d4fe --- /dev/null +++ b/auth-server/keycloak-theme/themes/corn/account/common.ftl @@ -0,0 +1,169 @@ +<#macro SPACER> +
+ + +<#macro MID_SPACER> +
+ + +<#macro LINE_TEXT_LINE textParam> +
+
+
${textParam}
+
+
+ + +<#macro WHITE_A_BUTTON href id> + + <#nested> + + + +<#macro YELLOW_BUTTON tabindex type name id> + + + +<#macro DARK_INPUT tabindex id name value type placeholder> + + + +<#macro GITHUB_ICON> + + + +<#macro GOOGLE_ICON> + + + + + +<#macro SOCIAL_PROVIDERS> + <#if realm.password && social.providers??> + <@common.SPACER /> + <@common.LINE_TEXT_LINE textParam="or" /> + <@common.SPACER /> +
+ <#list social.providers as p> + <@common.WHITE_A_BUTTON href="${p.loginUrl}" id="social-${p.alias}"> + <#if p.providerId = "github"> + <@common.GITHUB_ICON /> + <#elseif p.providerId = "google"> + <@common.GOOGLE_ICON /> + + Login with ${p.displayName!} + + +
+ + + +<#macro FIRST_NAME_INPUT tabindex> + <@common.DARK_INPUT + tabindex="${tabindex}" type="text" + placeholder="${msg(\"firstName\")}" + id="firstName" name="firstName" + value="${(firstName!'')}" + /> + + +<#macro LAST_NAME_INPUT tabindex> + <@common.DARK_INPUT + tabindex="${tabindex}" type="text" + placeholder="${msg(\"lastName\")}" + id="lastName" name="lastName" + value="${(lastName!'')}" + /> + + +<#macro USERNAME_INPUT tabindex> + <@common.DARK_INPUT + tabindex="${tabindex}" type="text" + placeholder="${msg(\"username\")}" + id="username" name="username" + value="${(username!'')}" + /> + + +<#macro EMAIL_INPUT tabindex> + <@common.DARK_INPUT + tabindex="${tabindex}" type="text" + placeholder="${msg(\"email\")}" + id="email" name="email" + value="${(email!'')}" + /> + + +<#macro PASSWORD_INPUT tabindex> + <@common.DARK_INPUT + tabindex="${tabindex}" type="password" + placeholder="${msg(\"password\")}" + id="password" name="password" + value="${(password!'')}" + /> + + +<#macro PASSWORD_CONFIRM_INPUT tabindex> + <@common.DARK_INPUT + tabindex="${tabindex}" type="password" + placeholder="${msg(\"passwordConfirm\")}" + id="password-confirm" name="password-confirm" + value="${(passwordConfirm!'')}" + /> + + +<#-- new YELLOW_A_BUTTON --> +<#macro YELLOW_A_BUTTON href id> + + <#nested> + + + +<#-- new CORNACCENT_A_BUTTON --> +<#macro CORNACCENT_A_BUTTON href id> + + <#nested> + + + +<#-- new ACTIVATABLE_BUTTON --> +<#macro ACTIVATABLE_BUTTON href id expected actual> + <#if "${expected}"=="${actual}"> + <@CORNACCENT_A_BUTTON href="#" id="${id}"> + <#nested> + + <#else> + <@WHITE_A_BUTTON href="${href}" id="${id}"> + <#nested> + + + \ No newline at end of file diff --git a/auth-server/keycloak-theme/themes/corn/account/tailwind-template.ftl b/auth-server/keycloak-theme/themes/corn/account/tailwind-template.ftl index 48c6e916..85268867 100644 --- a/auth-server/keycloak-theme/themes/corn/account/tailwind-template.ftl +++ b/auth-server/keycloak-theme/themes/corn/account/tailwind-template.ftl @@ -1,3 +1,5 @@ +<#import "common.ftl" as common /> + <#macro mainLayout active bodyClass> @@ -18,87 +20,91 @@ + -<#-- - - - - - ${msg("accountManagementTitle")} - - <#if properties.stylesCommon?has_content> - <#list properties.stylesCommon?split(' ') as style> - - - - <#if properties.styles?has_content> - <#list properties.styles?split(' ') as style> - - - - <#if properties.scripts?has_content> - <#list properties.scripts?split(' ') as script> - - - - --> - - -

TW works

- -
-