Skip to content

Commit 0715689

Browse files
AmandaTamandaAmandaTamanda
committed
fix: indentation and app-logo preview
1 parent ac897d3 commit 0715689

File tree

2 files changed

+98
-98
lines changed

2 files changed

+98
-98
lines changed

‎shogun-boot/src/main/resources/public/index.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,7 @@
2929
color: #fff;
3030
border-radius: .75rem;
3131
}
32+
33+
.app-icon {
34+
max-height: 25px;
35+
}

‎shogun-boot/src/main/resources/templates/index.html‎

Lines changed: 94 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -58,18 +58,16 @@
5858
<template id="shogun-app" url="">
5959
<link href="./assets/lib/fontawesome/css/all.min.css" rel="stylesheet">
6060
<div class="app-card">
61+
<slot name="app-logoPath">Default logo</slot>
62+
<h4>
63+
<slot name="app-title">Default Title</slot>
64+
</h4>
65+
<p>
66+
<slot name="app-info">description</slot>
67+
</p>
6168
<div class="app-buttons">
6269
<slot name="admin-btn"></slot>
6370
</div>
64-
<div class="app-info">
65-
<img class="app-logo" src="./assets/img/shogun_logo.png" alt="">
66-
<h4>
67-
<slot name="app-title">Default Title</slot>
68-
</h4>
69-
<p>
70-
<slot name="app-info">description</slot>
71-
</p>
72-
</div>
7371
</div>
7472
<style>
7573
.app-card {
@@ -95,13 +93,6 @@ <h4>
9593
align-items: center;
9694
justify-content: center;
9795
}
98-
99-
.app-logo {
100-
position: relative;
101-
top: -15px;
102-
left: -130px;
103-
height: 25px;
104-
}
10596
</style>
10697
</template>
10798
<!-- web component template ends -->
@@ -145,85 +136,90 @@ <h3 class="pb-2 pt-4">Applications</h3>
145136

146137
<script th:inline="javascript">
147138
window.onload = async () => {
148-
const keycloakHost = [[${@environment.getProperty('KEYCLOAK_HOST')}]];
149-
const keycloak = new Keycloak({
150-
url: `https://${keycloakHost}/auth`,
151-
realm: 'SHOGun',
152-
clientId: 'shogun-client'
139+
const keycloakHost = [[${@environment.getProperty('KEYCLOAK_HOST')
140+
}]];
141+
const keycloak = new Keycloak({
142+
url: `https://${keycloakHost}/auth`,
143+
realm: 'SHOGun',
144+
clientId: 'shogun-client'
145+
});
146+
try {
147+
const authenticated = await keycloak.init({
148+
onLoad: 'check-sso'
153149
});
154-
try {
155-
const authenticated = await keycloak.init({
156-
onLoad: 'check-sso'
157-
});
158-
} catch (error) {
159-
console.error(error);
160-
return;
161-
}
150+
} catch (error) {
151+
console.error(error);
152+
return;
153+
}
162154

163-
// Register login/logout actions
164-
document.querySelector('#login-btn').addEventListener('click', () => {
165-
keycloak.login();
166-
});
167-
document.querySelector('#logout-btn').addEventListener('click', () => {
168-
keycloak.logout();
169-
});
170-
if (keycloak.authenticated) {
171-
document.querySelector('#logout-btn').hidden = false;
172-
document.querySelector('#login-btn').hidden = true;
173-
}
155+
// Register login/logout actions
156+
document.querySelector('#login-btn').addEventListener('click', () => {
157+
keycloak.login();
158+
});
159+
document.querySelector('#logout-btn').addEventListener('click', () => {
160+
keycloak.logout();
161+
});
162+
if (keycloak.authenticated) {
163+
document.querySelector('#logout-btn').hidden = false;
164+
document.querySelector('#login-btn').hidden = true;
165+
}
174166

175-
const applications = await getApplications(keycloak.token);
176-
const appInfos = applications.map(app => ({
177-
id: app.id,
178-
name: app.name,
179-
description: app.clientConfig && app.clientConfig.description
180-
? app.clientConfig.description
181-
: ''
182-
}));
167+
const applications = await getApplications(keycloak.token);
168+
const appInfos = applications.map(app => ({
169+
id: app.id,
170+
name: app.name,
171+
logo: app.clientConfig && app.clientConfig.theme
172+
? app.clientConfig.theme.logoPath
173+
: '',
174+
description: app.clientConfig && app.clientConfig.description
175+
? app.clientConfig.description
176+
: ''
177+
}));
183178
if (!keycloak.authenticated || !applications) {
184179
document.querySelector('#app-label-visibility').hidden = false;
185180
}
186-
const appsEl = document.querySelector('.apps');
181+
const appsEl = document.querySelector('.apps');
187182

188-
// Create web components
189-
customElements.define('shogun-app',
190-
class extends HTMLElement {
191-
constructor() {
192-
super();
193-
const template = document.querySelector('#shogun-app');
194-
const templateContent = template.content;
183+
// Create web components
184+
customElements.define('shogun-app',
185+
class extends HTMLElement {
186+
constructor() {
187+
super();
188+
const template = document.querySelector('#shogun-app');
189+
const templateContent = template.content;
195190

196-
this.attachShadow({ mode: 'open' }).appendChild(
197-
templateContent.cloneNode(true)
198-
);
199-
}
200-
connectedCallback() {
201-
this.onclick = () => window.open(`/client?applicationId=${this.getAttribute('app')}`);
202-
}
203-
});
191+
this.attachShadow({ mode: 'open' }).appendChild(
192+
templateContent.cloneNode(true)
193+
);
194+
}
195+
connectedCallback() {
196+
this.onclick = () => window.open(`/client?applicationId=${this.getAttribute('app')}`);
197+
}
198+
});
204199

205200

206-
if (appsEl) {
207-
appInfos.forEach(app => {
208-
const html = `<shogun-app app='${app.id}'>` +
209-
`<a style='visibility: hidden' class='admin-btn' title='Edit application' slot='admin-btn' href='/admin/portal/application/${app.id}'>` +
210-
`<em class='fas fa-cog'></em></a>` +
211-
// `<span slot='app-logo'>${app.}</span>` +
212-
`<span slot='app-title'>${app.name}</span>` +
213-
`<span slot='app-info'>${app.description}</span>` +
214-
`</shogun-app>`;
215-
appsEl.insertAdjacentHTML('beforeend', html);
216-
});
217-
}
201+
if (appsEl) {
202+
appInfos.forEach(app => {
203+
const html = `<shogun-app app='${app.id}'>` +
204+
`<a style='visibility: hidden' class='admin-btn' title='Edit application' slot='admin-btn' href='/admin/portal/application/${app.id}'>` +
205+
`<em class='fas fa-cog'></em></a>` +
206+
`<span>${app.logo}</span>` +
207+
`<img class='app-icon' slot='app-logoPath' src='${app.logo}' alt=''>` +
208+
`<span slot='app-title'>${app.name}</span>` +
209+
`<span slot='app-info'>${app.description}</span>` +
210+
`</shogun-app>`;
211+
appsEl.insertAdjacentHTML('beforeend', html);
212+
});
213+
}
218214

219-
// Check for admin role
220-
const hasAdminRole = keycloak.hasResourceRole('admin', 'shogun-admin');
221-
if (hasAdminRole) {
222-
document.querySelectorAll(".admin-btn").forEach(btn => {
223-
btn.style.visibility = 'visible';
224-
btn.addEventListener('click', (e) => e.stopPropagation());
225-
});
226-
};
215+
// Check for admin role
216+
const hasAdminRole = keycloak.hasResourceRole('admin', 'shogun-admin');
217+
if (hasAdminRole) {
218+
document.querySelectorAll(".admin-btn").forEach(btn => {
219+
btn.style.visibility = 'visible';
220+
btn.addEventListener('click', (e) => e.stopPropagation());
221+
});
222+
};
227223
}
228224

229225
// fetches all applications depending on authentication status
@@ -246,29 +242,29 @@ <h3 class="pb-2 pt-4">Applications</h3>
246242
}
247243
}
248244
else {
249-
const graphqlQuery = {
250-
query:'query{allApplications{id name clientConfig}}'
251-
}
252-
const requestInit = {
245+
const graphqlQuery = {
246+
query: 'query{allApplications{id name clientConfig}}'
247+
}
248+
const requestInit = {
253249
method: 'POST',
254250
headers: {
255251
'Content-Type': 'application/json',
256252
},
257253
body: JSON.stringify(graphqlQuery),
258254
}
259-
try {
260-
const response = await fetch('/graphql', requestInit);
261-
const graphqlResponse = await response.json();
262-
if (graphqlResponse && graphqlResponse.data && graphqlResponse.data.allApplications) {
263-
return graphqlResponse.data.allApplications;
264-
} else {
265-
throw new Error('Error while fetching applications');
255+
try {
256+
const response = await fetch('/graphql', requestInit);
257+
const graphqlResponse = await response.json();
258+
if (graphqlResponse && graphqlResponse.data && graphqlResponse.data.allApplications) {
259+
return graphqlResponse.data.allApplications;
260+
} else {
261+
throw new Error('Error while fetching applications');
262+
}
263+
} catch (error) {
264+
console.error(error);
266265
}
267-
} catch (error) {
268-
console.error(error);
269266
}
270267
}
271-
}
272268
</script>
273269
</body>
274270

0 commit comments

Comments
 (0)