Skip to content

Commit

Permalink
Merge pull request #3 from Ilhasoft/feature/design-review
Browse files Browse the repository at this point in the history
Feature/design review
  • Loading branch information
alexandre-azevdo authored Feb 2, 2021
2 parents f2631a9 + f936c6e commit 42fba16
Show file tree
Hide file tree
Showing 15 changed files with 271 additions and 360 deletions.
2 changes: 1 addition & 1 deletion Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -10,4 +10,4 @@ USER root

COPY --from=0 /project/target/*.jar /opt/jboss/keycloak/standalone/deployments/app.jar
COPY ./themes/ilhasoft/ /opt/jboss/keycloak/themes/ilhasoft/
#COPY ./standalone.xml /opt/jboss/keycloak/standalone/configuration/standalone.xml
# COPY ./standalone.xml /opt/jboss/keycloak/standalone/configuration/standalone.xml
55 changes: 55 additions & 0 deletions themes/ilhasoft/login/login-form.ftl
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<#macro loginLayout>
<form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcLabelWrapperClass!}">
<label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
</div>

<div class="${properties.kcInputWrapperClass!} ${properties.kcInputControlClass!}">
<span class="icon icon-input icon-left icon-single-neutral-actions-1"></span>
<#if usernameEditDisabled??>
<input tabindex="1" id="username" class="${properties.kcInputClass!} has-icon-left" placeholder="${msg("placeholderLoginName")}" name="username" value="${(login.username!'')}" type="text" disabled />
<#else>
<input tabindex="1" id="username" class="${properties.kcInputClass!} has-icon-left" placeholder="${msg("placeholderLoginName")}" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off" />
</#if>
</div>
</div>

<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcLabelWrapperClass!}">
<label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
</div>

<div class="${properties.kcInputWrapperClass!} ${properties.kcInputControlClass!}">
<input tabindex="2" id="password" class="${properties.kcInputClass!} has-icon-left has-icon-right" placeholder="${msg("placeholderLoginPassword")}" name="password" type="password" autocomplete="off" />
<span class="icon icon-input icon-left icon-lock-2-1"></span>
<span id="password-icon" onclick="togglePassword('password-icon', 'password')" class="icon icon-clickable icon-input icon-right icon-view-1-1"></span>
<#if realm.resetPasswordAllowed>
<div class="forgot-password ${properties.kcInputMessageClass!}"><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></div>
</#if>
<#if realm.rememberMe && !usernameEditDisabled??>
<div class="input-message">
<#if login.rememberMe??>
<input id="rememberMe" tabindex="3" name="rememberMe" type="checkbox" tabindex="3" checked> ${msg("rememberMe")}
<#else>
<input id="rememberMe" tabindex="3" name="rememberMe" type="checkbox" tabindex="3"> ${msg("rememberMe")}
</#if>
</div>
</#if>
</div>
</div>
</div>

<div class="${properties.kcFormGroupClass!}">
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">

</div>

<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<div class="${properties.kcFormButtonsWrapperClass!}">
<input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
</div>
</div>
</div>
</form>
</#macro>
30 changes: 15 additions & 15 deletions themes/ilhasoft/login/login-update-password.ftl
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
<#import "template.ftl" as layout>
<@layout.registrationLayout displayMessage=!messagesPerField.existsError('password','password-confirm') displayHeader=false displaySocial=false;; section>
<#if section = "header">
${msg("updatePasswordTitle")}
<#elseif section = "form">
<@layout.registrationLayout displayInfo=true displayHeader=false displaySocial=false; section>
<#if section = "form">
<img class="brand-password" src="${url.resourcesPath}/img/login/brand.svg" >
<div class="update-password-title">
${msg("updatePasswordTitle")}
</div>
<form id="kc-passwd-update-form" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
<input type="text" id="username" name="username" value="${username}" autocomplete="username"
readonly="readonly" style="display:none;"/>
Expand All @@ -12,37 +14,34 @@
<div class="${properties.kcLabelWrapperClass!}">
<label for="password-new" class="${properties.kcLabelClass!}">${msg("passwordNew")}</label>
</div>
<div class="${properties.kcInputWrapperClass!}">
<input type="password" id="password-new" name="password-new" class="${properties.kcInputClass!}"
<div class="${properties.kcInputWrapperClass!} ${properties.kcInputControlClass!}">
<input type="password" id="password-new" name="password-new" class="${properties.kcInputClass!} has-icon-left has-icon-right"
autofocus autocomplete="new-password"
aria-invalid="<#if messagesPerField.existsError('password','password-confirm')>true</#if>"
/>
<span class="icon icon-input icon-left icon-lock-2-1"></span>
<span id="password-icon" onclick="togglePassword('password-icon', 'password-new')" class="icon icon-clickable icon-input icon-right icon-view-1-1"></span>

<#if messagesPerField.existsError('password')>
<span id="input-error-password" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.get('password'))?no_esc}
</span>
</#if>
</div>
</div>

<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcLabelWrapperClass!}">
<label for="password-confirm" class="${properties.kcLabelClass!}">${msg("passwordConfirm")}</label>
</div>
<div class="${properties.kcInputWrapperClass!}">
<div class="${properties.kcInputWrapperClass!} ${properties.kcInputControlClass!}">
<input type="password" id="password-confirm" name="password-confirm"
class="${properties.kcInputClass!}"
class="${properties.kcInputClass!} has-icon-left has-icon-right"
autocomplete="new-password"
aria-invalid="<#if messagesPerField.existsError('password-confirm')>true</#if>"
/>
<span class="icon icon-input icon-left icon-lock-2-1"></span>
<span id="password-icon-new" onclick="togglePassword('password-icon-new', 'new-password')" class="icon icon-clickable icon-input icon-right icon-view-1-1"></span>

<#if messagesPerField.existsError('password-confirm')>
<span id="input-error-password-confirm" class="${properties.kcInputErrorMessageClass!}" aria-live="polite">
${kcSanitize(messagesPerField.get('password-confirm'))?no_esc}
</span>
</#if>

</div>
</div>

Expand All @@ -65,6 +64,7 @@
<input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonBlockClass!} ${properties.kcButtonLargeClass!}" type="submit" value="${msg("doSubmit")}" />
</#if>
</div>
<div class="password-back-link"> &larr; <a href="${properties.backUrl!}">${msg("backHome")}</span> </a>
</div>
</form>
</#if>
Expand Down
34 changes: 34 additions & 0 deletions themes/ilhasoft/login/login-verify-email.ftl
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<#import "template.ftl" as layout>
<#import "login-form.ftl" as loginLayout>
<@layout.registrationLayout displayInfo=social.displayInfo; section>
<#if section = "title">
${msg("loginTitle",(realm.displayName!''))}
<#elseif section = "header">
${msg("loginTitleHtml",(realm.displayNameHtml!''))?no_esc}
<#elseif section = "form">
<div id="modal" class="modal-background">
<div class="modal-container">
<div class="modal-content">
<div class="modal-button-container">
<span class="icon-close-1 icon-clickable" onclick="closeModal()"></span>
</div>
<div class="modal-center-icon">
<span class="icon-alert-circle-1 icon-alert"></span>
</div>
<div class="modal-title">${msg("emailVerifyTitle")}</div>
<div class="modal-text">${msg("emailVerifyInstruction1")}</div>
</div>
<div class="modal-message">${msg("emailVerifyInstruction2")} <a href="${url.loginAction}">${msg("emailVerifyInstruction3")}</a></div>
</div>
</div>
<#if realm.password>
<@loginLayout.loginLayout></@loginLayout.loginLayout>
</#if>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
<div id="kc-registration">
<span>${msg("noAccount")} <a tabindex="6" href="${url.registrationUrl}">${msg("doRegister")}</a></span>
</div>
</#if>
</#if>
</@layout.registrationLayout>
55 changes: 2 additions & 53 deletions themes/ilhasoft/login/login.ftl
Original file line number Diff line number Diff line change
@@ -1,64 +1,13 @@
<#import "template.ftl" as layout>
<#import "login-form.ftl" as loginLayout>
<@layout.registrationLayout displayInfo=social.displayInfo; section>
<#if section = "title">
${msg("loginTitle",(realm.displayName!''))}
<#elseif section = "header">
${msg("loginTitleHtml",(realm.displayNameHtml!''))?no_esc}
<#elseif section = "form">
<#if realm.password>
<form id="kc-form-login" class="${properties.kcFormClass!}" onsubmit="login.disabled = true; return true;" action="${url.loginAction}" method="post">
<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcLabelWrapperClass!}">
<label for="username" class="${properties.kcLabelClass!}"><#if !realm.loginWithEmailAllowed>${msg("username")}<#elseif !realm.registrationEmailAsUsername>${msg("usernameOrEmail")}<#else>${msg("email")}</#if></label>
</div>

<div class="${properties.kcInputWrapperClass!} ${properties.kcInputControlClass!}">
<span class="icon icon-input icon-left icon-single-neutral-actions-1"></span>
<#if usernameEditDisabled??>
<input tabindex="1" id="username" class="${properties.kcInputClass!} has-icon-left" placeholder="${msg("placeholderLoginName")}" name="username" value="${(login.username!'')}" type="text" disabled />
<#else>
<input tabindex="1" id="username" class="${properties.kcInputClass!} has-icon-left" placeholder="${msg("placeholderLoginName")}" name="username" value="${(login.username!'')}" type="text" autofocus autocomplete="off" />
</#if>
</div>
</div>

<div class="${properties.kcFormGroupClass!}">
<div class="${properties.kcLabelWrapperClass!}">
<label for="password" class="${properties.kcLabelClass!}">${msg("password")}</label>
</div>

<div class="${properties.kcInputWrapperClass!} ${properties.kcInputControlClass!}">
<input tabindex="2" id="password" class="${properties.kcInputClass!} has-icon-left has-icon-right" placeholder="${msg("placeholderLoginPassword")}" name="password" type="password" autocomplete="off" />
<span class="icon icon-input icon-left icon-lock-2-1"></span>
<span id="password-icon" onclick="togglePassword()" class="icon icon-clickable icon-input icon-right icon-view-1-1"></span>
<#if realm.resetPasswordAllowed>
<div class="forgot-password ${properties.kcInputMessageClass!}"><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></div>
</#if>
<#if realm.rememberMe && !usernameEditDisabled??>
<div class="input-message">
<#if login.rememberMe??>
<input id="rememberMe" tabindex="3" name="rememberMe" type="checkbox" tabindex="3" checked> ${msg("rememberMe")}
<#else>
<input id="rememberMe" tabindex="3" name="rememberMe" type="checkbox" tabindex="3"> ${msg("rememberMe")}
</#if>
</div>
</#if>
</div>
</div>
</div>

<div class="${properties.kcFormGroupClass!}">
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">

</div>

<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<div class="${properties.kcFormButtonsWrapperClass!}">
<input tabindex="4" class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" type="submit" value="${msg("doLogIn")}"/>
</div>
</div>
</div>
</form>
<@loginLayout.loginLayout></@loginLayout.loginLayout>
</#if>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
Expand Down
Loading

0 comments on commit 42fba16

Please sign in to comment.