Skip to content

Commit 8765757

Browse files
acobdevacobdev
committed
Insertado theme personalizado para UX
1 parent 1079f0b commit 8765757

File tree

314 files changed

+47519
-50
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

314 files changed

+47519
-50
lines changed

‎README.md

+156-50
Large diffs are not rendered by default.

‎mi-primer-theme/account/index.ftl

+293
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,293 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>${msg("accountManagementTitle")}</title>
5+
6+
<meta charset="UTF-8">
7+
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
8+
<meta name="robots" content="noindex, nofollow">
9+
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
11+
<script>
12+
<#if properties.developmentMode?has_content && properties.developmentMode == "true">
13+
var developmentMode = true;
14+
var reactRuntime = 'react.development.js';
15+
var reactDOMRuntime = 'react-dom.development.js';
16+
var reactRouterRuntime = 'react-router-dom.js';
17+
<#else>
18+
var developmentMode = false;
19+
var reactRuntime = 'react.production.min.js';
20+
var reactDOMRuntime = 'react-dom.production.min.js';
21+
var reactRouterRuntime = 'react-router-dom.min.js';
22+
</#if>
23+
var authUrl = '${authUrl}';
24+
var baseUrl = '${baseUrl}';
25+
var realm = '${realm.name}';
26+
var resourceUrl = '${resourceUrl}';
27+
var isReactLoading = false;
28+
29+
<#if properties.logo?has_content>
30+
var brandImg = resourceUrl + '${properties.logo}';
31+
<#else>
32+
var brandImg = resourceUrl + '/public/logo.svg';
33+
</#if>
34+
35+
<#if properties.logoUrl?has_content>
36+
var brandUrl = '${properties.logoUrl}';
37+
<#else>
38+
var brandUrl = baseUrl;
39+
</#if>
40+
41+
var features = {
42+
isRegistrationEmailAsUsername : ${realm.registrationEmailAsUsername?c},
43+
isEditUserNameAllowed : ${realm.editUsernameAllowed?c},
44+
isInternationalizationEnabled : ${realm.isInternationalizationEnabled()?c},
45+
isLinkedAccountsEnabled : ${realm.identityFederationEnabled?c},
46+
isMyResourcesEnabled : ${(realm.userManagedAccessAllowed && isAuthorizationEnabled)?c},
47+
deleteAccountAllowed : ${deleteAccountAllowed?c},
48+
updateEmailFeatureEnabled: ${updateEmailFeatureEnabled?c},
49+
updateEmailActionEnabled: ${updateEmailActionEnabled?c},
50+
isViewGroupsEnabled : ${isViewGroupsEnabled?c}
51+
}
52+
53+
var availableLocales = [];
54+
<#list supportedLocales as locale, label>
55+
availableLocales.push({locale : '${locale}', label : '${label}'});
56+
</#list>
57+
58+
<#if referrer??>
59+
var referrer = '${referrer}';
60+
var referrerName = '${referrerName}';
61+
var referrerUri = '${referrer_uri}'.replace('&amp;', '&');
62+
</#if>
63+
64+
<#if msg??>
65+
var locale = '${locale}';
66+
<#outputformat "JavaScript">
67+
var l18nMsg = JSON.parse('${msgJSON?js_string}');
68+
</#outputformat>
69+
<#else>
70+
var locale = 'en';
71+
var l18Msg = {};
72+
</#if>
73+
</script>
74+
75+
<#if properties.favIcon?has_content>
76+
<link rel="icon" href="${resourceUrl}${properties.favIcon}" type="image/x-icon"/>
77+
<#else>
78+
<link rel="icon" href="${resourceUrl}/public/favicon.ico" type="image/x-icon"/>
79+
</#if>
80+
81+
<script src="${authUrl}js/keycloak.js"></script>
82+
83+
<#if properties.developmentMode?has_content && properties.developmentMode == "true">
84+
<!-- Don't use this in production: -->
85+
<script src="${resourceUrl}/node_modules/react/umd/react.development.js" crossorigin></script>
86+
<script src="${resourceUrl}/node_modules/react-dom/umd/react-dom.development.js" crossorigin></script>
87+
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
88+
</#if>
89+
90+
<#if properties.extensions?has_content>
91+
<#list properties.extensions?split(' ') as script>
92+
<#if properties.developmentMode?has_content && properties.developmentMode == "true">
93+
<script type="text/babel" src="${resourceUrl}/${script}"></script>
94+
<#else>
95+
<script type="text/javascript" src="${resourceUrl}/${script}"></script>
96+
</#if>
97+
</#list>
98+
</#if>
99+
100+
<#if properties.scripts?has_content>
101+
<#list properties.scripts?split(' ') as script>
102+
<script type="text/javascript" src="${resourceUrl}/${script}"></script>
103+
</#list>
104+
</#if>
105+
106+
<script>
107+
var content = <#include "resources/content.json"/>
108+
</script>
109+
110+
<link rel="stylesheet" href="${resourceCommonUrl}/node_modules/@patternfly/react-core/dist/styles/base.css"/>
111+
<link rel="stylesheet" href="${resourceCommonUrl}/node_modules/@patternfly/patternfly/patternfly-addons.css"/>
112+
<link rel="stylesheet" href="${resourceUrl}/public/app.css"/>
113+
<link rel="stylesheet" href="${resourceUrl}/public/layout.css"/>
114+
115+
<#if properties.styles?has_content>
116+
<#list properties.styles?split(' ') as style>
117+
<link href="${resourceUrl}/${style}" rel="stylesheet"/>
118+
</#list>
119+
</#if>
120+
</head>
121+
122+
<body>
123+
124+
<script>
125+
var keycloak = new Keycloak({
126+
authServerUrl: authUrl,
127+
realm: realm,
128+
clientId: 'account-console'
129+
});
130+
keycloak.init({onLoad: 'check-sso', pkceMethod: 'S256', promiseType: 'native'}).then((authenticated) => {
131+
isReactLoading = true;
132+
toggleReact();
133+
if (!keycloak.authenticated) {
134+
document.getElementById("landingSignInButton").style.display='inline';
135+
document.getElementById("landingSignInLink").style.display='inline';
136+
} else {
137+
document.getElementById("landingSignOutButton").style.display='inline';
138+
document.getElementById("landingSignOutLink").style.display='inline';
139+
document.getElementById("landingLoggedInUser").innerHTML = loggedInUserName('${msg("unknownUser")}', '${msg("fullName")}');
140+
}
141+
142+
loadjs("/Main.js");
143+
}).catch(() => {
144+
alert('failed to initialize keycloak');
145+
});
146+
</script>
147+
148+
<div id="main_react_container" style="display:none;height:100%"></div>
149+
150+
<div id="spinner_screen" style="display:block; height:100%">
151+
<div style="width: 320px; height: 328px; text-align: center; position: absolute; top:0; bottom: 0; left: 0; right: 0; margin: auto;">
152+
<#if properties.logo?has_content>
153+
<img src="${resourceUrl}${properties.logo}" alt="Logo" class="brand">
154+
<#else>
155+
<img src="${resourceUrl}/public/logo.svg" alt="Logo" class="brand">
156+
</#if>
157+
<p>${msg("loadingMessage")}</p>
158+
<div>
159+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: rgb(255, 255, 255); display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
160+
<path d="M10 50A40 40 0 0 0 90 50A40 42 0 0 1 10 50" fill="#5DBCD2" stroke="none" transform="rotate(16.3145 50 51)">
161+
<animateTransform attributeName="transform" type="rotate" dur="1s" repeatCount="indefinite" keyTimes="0;1" values="0 50 51;360 50 51"></animateTransform>
162+
</path>
163+
</svg>
164+
</div>
165+
</div>
166+
</div>
167+
168+
<div id="welcomeScreen" style="display:none;height:100%">
169+
<div class="pf-c-page" id="page-layout-default-nav">
170+
<header role="banner" class="pf-c-page__header">
171+
<div class="pf-c-page__header-brand">
172+
<#if properties.logoUrl?has_content>
173+
<a id="landingLogo" class="pf-c-page__header-brand-link" href="${properties.logoUrl}">
174+
<#else>
175+
<a id="landingLogo" class="pf-c-page__header-brand-link" href="${baseUrl}">
176+
</#if>
177+
<#if properties.logo?has_content>
178+
<img class="pf-c-brand brand" src="${resourceUrl}${properties.logo}" alt="Logo">
179+
<#else>
180+
<img class="pf-c-brand brand" src="${resourceUrl}/public/logo.svg" alt="Logo">
181+
</#if>
182+
</a>
183+
</div>
184+
<div class="pf-c-page__header-tools">
185+
<#if referrer?has_content && referrer_uri?has_content>
186+
<div class="pf-c-page__header-tools-group pf-m-icons pf-u-display-none pf-u-display-flex-on-md">
187+
<a id="landingReferrerLink" href="${referrer_uri}" class="pf-c-button pf-m-link" tabindex="0">
188+
<span class="pf-c-button__icon pf-m-start">
189+
<i class="pf-icon pf-icon-arrow" aria-hidden="true"></i>
190+
</span>
191+
${msg("backTo",referrerName)}
192+
</a>
193+
</div>
194+
</#if>
195+
196+
<div class="pf-c-page__header-tools-group pf-m-icons pf-u-display-none pf-u-display-flex-on-md pf-u-mr-md">
197+
<button id="landingSignInButton" tabindex="0" style="display:none" onclick="keycloak.login();" class="pf-c-button pf-m-primary" type="button">${msg("doSignIn")}</button>
198+
<button id="landingSignOutButton" tabindex="0" style="display:none" onclick="keycloak.logout();" class="pf-c-button pf-m-primary" type="button">${msg("doSignOut")}</button>
199+
</div>
200+
201+
<!-- Kebab for mobile -->
202+
<div class="pf-c-page__header-tools-group pf-u-display-none-on-md">
203+
<div id="landingMobileKebab" class="pf-c-dropdown pf-m-mobile" onclick="toggleMobileDropdown();"> <!-- pf-m-expanded -->
204+
<button aria-label="Actions" tabindex="0" id="landingMobileKebabButton" class="pf-c-dropdown__toggle pf-m-plain" type="button" aria-expanded="true" aria-haspopup="true">
205+
<svg fill="currentColor" height="1em" width="1em" viewBox="0 0 192 512" aria-hidden="true" role="img" style="vertical-align: -0.125em;"><path d="M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z" transform=""></path></svg>
206+
</button>
207+
<ul id="landingMobileDropdown" aria-labelledby="landingMobileKebabButton" class="pf-c-dropdown__menu pf-m-align-right" role="menu" style="display:none">
208+
<#if referrer?has_content && referrer_uri?has_content>
209+
<li role="none">
210+
<a id="landingMobileReferrerLink" href="${referrer_uri}" role="menuitem" tabindex="0" aria-disabled="false" class="pf-c-dropdown__menu-item">${msg("backTo",referrerName)}</a>
211+
</li>
212+
</#if>
213+
214+
<li id="landingSignInLink" role="none" style="display:none">
215+
<a onclick="keycloak.login();" role="menuitem" tabindex="0" aria-disabled="false" class="pf-c-dropdown__menu-item">${msg("doLogIn")}</a>
216+
</li>
217+
<li id="landingSignOutLink" role="none" style="display:none">
218+
<a onclick="keycloak.logout();" role="menuitem" tabindex="0" aria-disabled="false" class="pf-c-dropdown__menu-item">${msg("doSignOut")}</a>
219+
</li>
220+
</ul>
221+
</div>
222+
</div>
223+
224+
<span id="landingLoggedInUser"></span>
225+
226+
</div> <!-- end header tools -->
227+
</header>
228+
229+
<main role="main" class="pf-c-page__main">
230+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom">
231+
<div class="pf-c-page__main-body">
232+
<div class="pf-c-content" id="landingWelcomeMessage">
233+
<h1>${msg("accountManagementWelcomeMessage")}</h1>
234+
</div>
235+
</div>
236+
</section>
237+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll">
238+
<div class="pf-c-page__main-body">
239+
<div class="pf-l-gallery pf-m-gutter">
240+
<#assign content=theme.apply("content.json")?eval>
241+
<#list content as item>
242+
<div class="pf-l-gallery__item" id="landing-${item.id}">
243+
<div class="pf-c-card pf-m-full-height">
244+
<div>
245+
<div class="pf-c-card__title pf-c-content">
246+
<h2 class="pf-u-display-flex pf-u-w-100 pf-u-flex-direction-column">
247+
<#if item.icon??>
248+
<i class="pf-icon ${item.icon}"></i>
249+
<#elseif item.iconSvg??>
250+
<img src="${item.iconSvg}" alt="icon"/>
251+
</#if>
252+
${msg(item.label)}
253+
</h2>
254+
</div>
255+
<div class="pf-c-card__body">
256+
<#if item.descriptionLabel??>
257+
<p class="pf-u-mb-md">${msg(item.descriptionLabel)}</p>
258+
</#if>
259+
<#if item.content??>
260+
<#list item.content as sub>
261+
<div id="landing-${sub.id}">
262+
<a onclick="toggleReact(); window.location.hash='${sub.path}'">${msg(sub.label)}</a>
263+
</div>
264+
</#list>
265+
<#else>
266+
<a id="landing-${item.id}" onclick="toggleReact(); window.location.hash = '${item.path}'">${msg(item.label)}</a>
267+
</#if>
268+
</div>
269+
</div>
270+
</div>
271+
</div>
272+
</#list>
273+
</div>
274+
</div>
275+
</section>
276+
</main>
277+
</div>
278+
</div>
279+
280+
<script>
281+
const removeHidden = (content) => {
282+
content.forEach(c => {
283+
if (c.hidden && eval(c.hidden)) {
284+
document.getElementById('landing-' + c.id).remove();
285+
}
286+
if (c.content) removeHidden(c.content);
287+
});
288+
}
289+
removeHidden(content);
290+
</script>
291+
292+
</body>
293+
</html>

0 commit comments

Comments
 (0)