Skip to content

Commit

Permalink
feat: add miscrosoft login button
Browse files Browse the repository at this point in the history
  • Loading branch information
@mateuseduardomedeiros
mateuseduardomedeiros committed Jul 2, 2024
1 parent 8c6ead0 commit 215425e
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 143 deletions.
104 changes: 43 additions & 61 deletions themes/ilhasoft/login/login-form.ftl
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,76 +7,58 @@
${msg("greetings")}
</div>

<form id="kc-form-login" ref="kc-form-login" class="${properties.kcFormClass!}" action="${url.loginAction}" method="post">
<form id="kc-form-login" ref="kc-form-login" class="${properties.kcFormClass!}" action="${url.loginAction}"
method="post">
<unnnic-form-element
label="<#if !realm.loginWithEmailAllowed>${msg('username')}<#elseif !realm.registrationEmailAsUsername>${msg('usernameOrEmail')}<#else>${msg('email')}</#if>"
>
<unnnic-input
ref="loginUsername"
v-model="usernameInput"
icon-left="single-neutral-actions-1"
placeholder="${msg('placeholderLoginName')}"
name="username"
:disabled="<#if usernameEditDisabled??>true<#else>false</#if>"
autofocus
></unnnic-input>
label="<#if !realm.loginWithEmailAllowed>${msg('username')}<#elseif !realm.registrationEmailAsUsername>${msg('usernameOrEmail')}<#else>${msg('email')}</#if>">
<unnnic-input ref="loginUsername" v-model="usernameInput" icon-left="single-neutral-actions-1"
placeholder="${msg('placeholderLoginName')}" name="username"
:disabled="<#if usernameEditDisabled??>true<#else>false</#if>" autofocus></unnnic-input>
</unnnic-form-element>

<unnnic-form-element
label="${msg('password')}"
>
<unnnic-input
ref="password"
v-model="passwordInput"
native-type="password"
icon-left="lock-2-1"
placeholder="${msg('placeholderLoginPassword')}"
name="password"
allow-toggle-password
></unnnic-input>
<unnnic-form-element label="${msg('password')}">
<unnnic-input ref="password" v-model="passwordInput" native-type="password" icon-left="lock-2-1"
placeholder="${msg('placeholderLoginPassword')}" name="password" allow-toggle-password></unnnic-input>
</unnnic-form-element>

<div class="${properties.kcFormGroupClass!}">
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<div class="${properties.kcFormButtonsWrapperClass!} login-buttons">
<unnnic-button
class="login-button"
size="small"
text="${msg('doLogIn')}"
type="primary"
></unnnic-button>
<div class="${properties.kcFormGroupClass!}">
<div id="kc-form-buttons" class="${properties.kcFormButtonsClass!}">
<div class="${properties.kcFormButtonsWrapperClass!} login-buttons">
<unnnic-button class="login-button" size="small" text="${msg('doLogIn')}"
type="primary"></unnnic-button>

<#if realm.password?? && social.providers??>
<#list social.providers as p>
<a id="zocial-${p.alias}" class="social-link" href="${p.loginUrl}">
<button type="button" class="social-button button-control" id="button-${p.alias}">
<img src="${url.resourcesPath}/img/login/icon-${p.alias}.svg" class="icon-image icon-button-left" >
<span>${msg("loginWith")} ${p.displayName} </span>
</button>
</a>
</#list>
</#if>
</div>
</div>
<#if realm.password?? && social.providers??>
<#list social.providers as p>
<a id="zocial-${p.alias}" class="social-link" href="${p.loginUrl}">
<button type="button" class="social-button button-control" id="button-${p.alias}">
<img src="${url.resourcesPath}/img/login/icon-${p.alias}.svg"
class="icon-image icon-button-left">
</button>
</a>
</#list>
</#if>
</div>
</div>
</div>

<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
<#if realm.rememberMe && !usernameEditDisabled??>
<div class="input-message remember-me">
<#if login.rememberMe??>
<input id="rememberMe" tabindex="3" name="rememberMe" type="checkbox" tabindex="3" checked>
<#else>
<input id="rememberMe" tabindex="3" name="rememberMe" type="checkbox" tabindex="3">
</#if>

<label for="rememberMe"></label>
<label for="rememberMe">${msg("rememberMe")}</label>
</div>
<div id="kc-form-options" class="${properties.kcFormOptionsClass!}">
<#if realm.rememberMe && !usernameEditDisabled??>
<div class="input-message remember-me">
<#if login.rememberMe??>
<input id="rememberMe" tabindex="3" name="rememberMe" type="checkbox" tabindex="3" checked>
<#else>
<input id="rememberMe" tabindex="3" name="rememberMe" type="checkbox" tabindex="3">
</#if>

<#if realm.resetPasswordAllowed>
<div class="forgot-password ${properties.kcInputMessageClass!}"><a tabindex="5" href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></div>
</#if>
<label for="rememberMe"></label>
<label for="rememberMe">${msg("rememberMe")}</label>
</div>
</form>
</#if>

<#if realm.resetPasswordAllowed>
<div class="forgot-password ${properties.kcInputMessageClass!}"><a tabindex="5"
href="${url.loginResetCredentialsUrl}">${msg("doForgotPassword")}</a></div>
</#if>
</div>
</form>
</#macro>
69 changes: 34 additions & 35 deletions themes/ilhasoft/login/login.ftl
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,36 @@
<#import "template.ftl" as layout>
<#import "login-form.ftl" as loginLayout>
<@layout.registrationLayout displayInfo=social.displayInfo displayLoginFormScriptsAndStyles=true; section>
<#if section = "title">
${msg("loginTitle",(realm.displayName!''))}
<#elseif section = "header">
${msg("loginTitleHtml",(realm.displayNameHtml!''))?no_esc}
<#elseif section = "form">
<#if realm.password>
<@loginLayout.loginLayout></@loginLayout.loginLayout>
</#if>
<#elseif section = "info" >
<#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
<div id="separator-group">
<div class="separator"></div>
<span class="separator-text"> ${msg("separatorMessage")} </span>
<div class="separator"></div>
</div>
<#import "login-form.ftl" as loginLayout>
<@layout.registrationLayout displayInfo=social.displayInfo displayLoginFormScriptsAndStyles=true; section>
<#if section="title">
${msg("loginTitle",(realm.displayName!''))}
<#elseif section="header">
${msg("loginTitleHtml",(realm.displayNameHtml!''))?no_esc}
<#elseif section="form">
<#if realm.password>
<@loginLayout.loginLayout></@loginLayout.loginLayout>
</#if>
<#elseif section="info">
<#if realm.password && realm.registrationAllowed && !usernameEditDisabled??>
<div id="separator-group">
<div class="separator"></div>
<span class="separator-text"> ${msg("separatorMessage")} </span>
<div class="separator"></div>
</div>

<div id="kc-registration">
<#-- <input class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}" name="login" id="kc-login" ref="kc-login" type="submit" value="${msg("doLogIn")}" /> -->
<unnnic-button
class="sign-up-button"
size="small"
text="${msg('doRegisterForFree')}"
type="terciary"
@click.prevent="location.href = '${url.registrationUrl}'"
></unnnic-button>
</div>
</#if>
<div class="footer">
<a class="privacy-policy" target="_blank" href="${properties.urlPrivacyPolicy!}">
${msg('termsOfService')}
</a>
</div>
</#if>
</@layout.registrationLayout>
<div id="kc-registration">
<#-- <input
class="${properties.kcButtonClass!} ${properties.kcButtonPrimaryClass!} ${properties.kcButtonLargeClass!}"
name="login" id="kc-login" ref="kc-login" type="submit" value="${msg("
doLogIn")}" /> -->
<unnnic-button class="sign-up-button" size="small"
text="${msg('doRegisterForFree')}" type="terciary"
@click.prevent="location.href = '${url.registrationUrl}'"></unnnic-button>
</div>
</#if>
<div class="footer">
<a class="privacy-policy" target="_blank" href="${properties.urlPrivacyPolicy!}">
${msg('termsOfService')}
</a>
</div>
</#if>
</@layout.registrationLayout>
Loading

0 comments on commit 215425e

Please sign in to comment.