jonty
November 27, 2024, 10:01am
1
Good day all I am a complete noob here I have been going through the documents trying to figure out the workings of how to customize the log in page this is what I have so far. With Openremote keycloak
here is what I want it to look like I used the standalone Keycloak
I am trying to have a text logo instead of plain text at the top that’s the one problem I am struggling with.
I am also getting a 404 error on these three files which I think are preventing the text and input boxes to be in a form format
I have also check that the file path is correct in bash
C:\Intellisec>docker exec -it d24fe948477d /bin/bash
bash-5.1# ls -ld /opt/keycloak/data/tmp/kc-gzip-cache/0x4v9/common/keycloak/vendor/patternfly-v4/patternfly.min.css
-rwxr-xr-x 1 root root 1422004 Nov 21 10:16 /opt/keycloak/data/tmp/kc-gzip-cache/0x4v9/common/keycloak/vendor/patternfly-v4/patternfly.min.css
bash-5.1#
and not sure why its not picking it up.
some much needed assistance is needed if possible
jonty
November 28, 2024, 8:08am
2
So I have got the login page a bit better.
just need to do a few finishing touches.
When I try login it does not go to the open remote platform just stays on the login page here is my template code unsure where i have gone wrong.
<#macro registrationLayout bodyClass="" displayInfo=false displayMessage=true displayRequiredFields=false>
<!DOCTYPE html>
<html class="${properties.kcHtmlClass!}">
<head>
<meta charset="utf-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="robots" content="noindex, nofollow">
<#if properties.meta?has_content>
<#list properties.meta?split(' ') as meta>
<meta name="${meta?split('==')[0]}" content="${meta?split('==')[1]}"/>
</#list>
</#if>
<title>Intellisec</title>
<link rel="icon" type="image/png" href="${url.resourcesPath}/img/favicon.png"/>
<link type=text/css rel="stylesheet" href="${url.resourcesPath}/css/materialize.min.css" media="screen,projection"/>
<link rel="stylesheet" href="${url.resourcesPath}/css/styles.css"/>
<script type="text/javascript" src="${url.resourcesPath}/js/materialize.min.js"></script>
<style>
body {
background: url("${url.resourcesPath}/img/keycloak-bg.png") no-repeat center center fixed;
background-size: cover;
}
#kc-header-wrapper {
display: flex; /* Use Flexbox */
justify-content: center; /* Horizontally center the content */
align-items: center; /* Vertically center the content */
height: 150px; /* Ensure the parent has a defined height */
}
.card-pf {
background-color: #ffffff; /* Sets the box to white */
#border-radius: 8px; /* Adds rounded corners (optional) */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow (optional) */
padding: 20px; /* Adds spacing inside the box */
max-width: 500px; /* Limits the width of the box */
margin: 20px auto; /* Centers the box horizontally and adds vertical spacing */
border-top: 1.5mm solid #F45000; /* 1.5mm orange line at the top */
/* Flexbox for centering content */
display: flex;
flex-direction: column; /* Stacks child elements vertically */
justify-content: center; /* Centers elements vertically */
align-items: center; /* Centers elements horizontally */
height: auto; /* Adjust as needed or set to 100% for full height */
text-align: center; /* Ensures text is centered */
}
.form-group {
display: flex; /* Enables flexible layout */
flex-direction: column; /* Stacks children vertically */
align-items: flex-start; /* Aligns children to the left */
margin-bottom: 15px; /* Adds space between form groups */
}
.pf-c-form__label {
font-size: 14px; /* Adjust font size if needed */
margin-bottom: 5px; /* Adds space between label and input */
}
.pf-c-input-group {
display: flex; /* Aligns children side by side */
align-items: center; /* Ensures vertical alignment */
}
.pf-c-form-control {
width: 100%; /* Makes the input stretch to full width if needed */
padding: 8px; /* Adds padding for better usability */
font-size: 14px; /* Matches font size for a consistent look */
border: none; /* Removes default border */
border-bottom: 2px solid #ccc; /* Adds a default gray bottom border */
outline: none; /* Removes the default focus outline */
transition: border-color 0.3s ease; /* Smooth transition for border color */
}
.pf-c-form-control:focus {
border-bottom: 2px solid #F45000; /* Changes bottom border to orange on focus */
}
.pf-c-button.pf-m-control {
margin-left: -1px; /* Removes the gap between input and button */
padding: 8px 12px; /* Adds spacing for the button */
background-color: white; /* */
color: white; /* White text */
border: none; /* Removes default border */
border-bottom: 2px solid #ccc; /* Adds a default gray bottom border */
border-radius: 0 4px 4px 0; /* Rounds only the right corners */
cursor: pointer; /* Adds pointer cursor for usability */
}
.pf-c-button.pf-m-primary {
background-color: #F45000; /* Orange background */
color: #ffffff; /* White text */
border: none; /* Removes border */
padding: 10px 20px; /* Adds padding for better appearance */
font-size: 16px; /* Sets readable font size */
font-weight: bold; /* Makes text bold */
border-radius: 4px; /* Adds slight rounding to the corners */
cursor: pointer; /* Changes cursor to pointer on hover */
transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}
/* Hover effect */
.pf-c-button.pf-m-primary:hover {
background-color: #d64000; /* Slightly darker orange on hover */
}
</style>
</head>
<body class>
<div class="${properties.kcHtmlClass!}">
<div id="kc-header" class="login-pf-page-header">
<div id="kc-header-wrapper" class>
<div class="kc-logo-text">
<img src="${url.resourcesPath}/img/keycloak-logo-text.png" height="70px" width"290px">
</div>
</div>
</div>
<div class="card-pf">
<header class="login-pf-header">
<h1 id="kc-page-title"> Sign in to your account </h1>
</header>
<div id="kc-content">
<div id="kc-content-wrapper">
<div id="kc-form">
<div id="kc-form-wrapper">
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="https://localhost/auth/realms/master/login-actions/authenticate?session_code=dv9B84ilfL_B9-V3Vb77dYqEdS3rKrzQu4MoSJEZOus&execution=b8fbc37c-8486-4175-8bab-2ed6b2a1bb05&client_id=openremote&tab_id=vhuq9zM5bLA" method="post">
<div class="form-group">
<label for="username" class="pf-c-form__label pf-c-form__label-text">Username or email</label>
<input tabindex="2" id="username" class="pf-c-form-control" name="username" value="" type="text" autofocus="" autocomplete="username" aria-invalid="" dir="ltr">
</div>
<div class="form-group">
<label for="password" class="pf-c-form__label pf-c-form__label-text">Password</label>
<div class="pf-c-input-group" dir="ltr">
<input tabindex="3" id="password" class="pf-c-form-control" name="password" type="password" autocomplete="current-password" aria-invalid="">
<button class="pf-c-button pf-m-control" type="button" aria-label="Show password" aria-controls="password" data-password-toggle="" tabindex="4" data-icon-show="fa fa-eye" data-icon-hide="fa fa-eye-slash" data-label-show="Show password" data-label-hide="Hide password">
<i class="fa fa-eye" aria-hidden="true">
</i>
</button>
</div>
</div>
<div class="form-group login-pf-settings">
<div id="kc-form-options"> </div>
<div class=""> </div>
</div>
<div id="kc-form-buttons" class="form-group">
<input type="hidden" id="id-hidden-input" name="credentialId">
<input tabindex="7" class="pf-c-button pf-m-primary pf-m-block btn-lg" name="login" id="kc-login" type="submit" value="Sign In">
</input>
</div>
</form>
</div>
</div>
<script type="module" src="/auth/resources/0x4v9/login/custom/js/passwordVisibility.js"></script>
</div>
</div>
</div>
</div>
<div style="all: initial;-webkit-user-select: none !important;-moz-user-select: none !important;-ms-user-select: none !important;user-select: none !important;cursor: default !important;margin: 0px !important;padding: 0px !important;border: 0px !important;overflow: visible !important;visibility: visible;display: block !important;position: fixed !important;float: none !important;clear: none !important;line-height: normal !important;z-index: 2147483647 !important;opacity: 1 !important;width: 0px !important;height: 0px !important;font-family: "Segoe UI", "Helvetica Neue", sans-serif !important;font-size: 15px !important;font-weight: normal !important;color: black !important;background-color: transparent !important;text-align: left !important;" id="zkVEGySY4uyN7VnigYwe6tQ-9143360111015938" class="zkVEGySY4uyN7VnigYwe6tQ"></div>
</body>
</html>
</#macro>
jonty
November 28, 2024, 9:30am
3
so I have come right with not been able to log in.
instead of this
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="https://localhost/auth/realms/master/login-actions/authenticate?session_code=dv9B84ilfL_B9-V3Vb77dYqEdS3rKrzQu4MoSJEZOus&execution=b8fbc37c-8486-4175-8bab-2ed6b2a1bb05&client_id=openremote&tab_id=vhuq9zM5bLA" method="post">
I used this and it works
<form id="kc-form-login" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
now the fun begins with editing inside the realm
khanh
December 10, 2024, 8:19am
4
I’m new to openremote, i want to change the logo of openremote, how can i change it to intellisec like you? I have try to change it in the typescript file bit it didn’t work
You can take a look at the Appearance page in the Manager UI.
Documentation:
The Manager UI is the dashboard which gives you access to OpenRemote, and allows you to configure, monitor, and control your IoT platform. You can access it at https//localhost/manager/?realm=yourrealm, for a specific realm. We'll explain the main...
KiRiTo
December 10, 2024, 10:00am
6
I want to customize login logo but I can’t edit it in TS, is there any way?
khanh
December 10, 2024, 10:00am
7
Thank you, i have changed the logo successfully, but i cant find the place to custom login Logo
To change the styling of Keycloak pages, you’ll need to modify the Keycloak theme files.Freemarker Templates , similar to HTML and CSS.Keycloakify for this.
Check the Keycloak docs here , to learn how to modify these.
.
Quickstart
KiRiTo
December 11, 2024, 7:59am
9
Hi Martin, I’m having a problem,After changing the code in the ui component, what command should I use to update the latest code? I used npm run serve but it didn’t work.
I don’t know exactly what you mean…
npm run serve starts the local web development server.while working on the UI, as it compiles the code after each change.
If you’re talking about “making a full (production) build” of the UI code,./gradlew clean installDist command instead.everything from the UI models, components, the apps etc.
KiRiTo
December 11, 2024, 8:59am
11
What I mean is that when I edit the ui code, for example, I edit css or add components, the changes in my code are not displayed on the interface.
KiRiTo
December 12, 2024, 9:42am
13
What I mean is that when I customize the ui component , the interface does not update changes when I edit
Let’s continue this local development issue on the separate topic you’ve created.
I know the interface can change every time I change some code (I changed the language and the interface automatically changed too), the problem is that i have tried to deleted and changed code in “or-header.ts” (item inside “toolbar-top”) but the interface didn’t change.
Is there anything i can do to customize it
Is there any command i need to use to rebuild the UI (i have run ./gradlew modelWatch and tried ./gradlew clean installDist but it didn’t work too)
Closing this topic for now, but feel free to create a new one.
