From 215425ea8f226e3dfc7ae03959ce0c0c4dd48ff5 Mon Sep 17 00:00:00 2001 From: Eduardo Medeiros Date: Tue, 2 Jul 2024 15:56:56 -0300 Subject: [PATCH] feat: add miscrosoft login button --- themes/ilhasoft/login/login-form.ftl | 104 ++++++-------- themes/ilhasoft/login/login.ftl | 69 +++++---- themes/ilhasoft/login/resources/css/login.css | 132 ++++++++++++------ .../login/resources/img/login/icon-github.svg | 4 +- .../resources/img/login/icon-microsoft.svg | 6 + 5 files changed, 172 insertions(+), 143 deletions(-) create mode 100644 themes/ilhasoft/login/resources/img/login/icon-microsoft.svg diff --git a/themes/ilhasoft/login/login-form.ftl b/themes/ilhasoft/login/login-form.ftl index 37fccde..b21beaa 100644 --- a/themes/ilhasoft/login/login-form.ftl +++ b/themes/ilhasoft/login/login-form.ftl @@ -7,76 +7,58 @@ ${msg("greetings")} -
+ - + label="<#if !realm.loginWithEmailAllowed>${msg('username')}<#elseif !realm.registrationEmailAsUsername>${msg('usernameOrEmail')}<#else>${msg('email')}"> + - - + + -
-
- +
-
- <#if realm.rememberMe && !usernameEditDisabled??> -
- <#if login.rememberMe??> - - <#else> - - - - - -
+
+ <#if realm.rememberMe && !usernameEditDisabled??> +
+ <#if login.rememberMe??> + + <#else> + - <#if realm.resetPasswordAllowed> -
${msg("doForgotPassword")}
- + +
- + + + <#if realm.resetPasswordAllowed> +
${msg("doForgotPassword")}
+ +
+ \ No newline at end of file diff --git a/themes/ilhasoft/login/login.ftl b/themes/ilhasoft/login/login.ftl index 82fdd96..9c856b2 100644 --- a/themes/ilhasoft/login/login.ftl +++ b/themes/ilhasoft/login/login.ftl @@ -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> - - <#elseif section = "info" > - <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??> -
-
- ${msg("separatorMessage")} -
-
+ <#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> + + <#elseif section="info"> + <#if realm.password && realm.registrationAllowed && !usernameEditDisabled??> +
+
+ ${msg("separatorMessage")} +
+
-
- <#-- --> - -
- -
- - ${msg('termsOfService')} - -
- - +
+ <#-- --> + +
+ +
+ + ${msg('termsOfService')} + +
+ + \ No newline at end of file diff --git a/themes/ilhasoft/login/resources/css/login.css b/themes/ilhasoft/login/resources/css/login.css index 49bcfb1..25eae9a 100644 --- a/themes/ilhasoft/login/resources/css/login.css +++ b/themes/ilhasoft/login/resources/css/login.css @@ -79,7 +79,7 @@ h1 { outline: none; } -.input-control:focus-within .icon{ +.input-control:focus-within .icon { color: var(--unnic-color-brand-weni); } @@ -111,7 +111,8 @@ h1 { cursor: pointer; } -.icon-left, .icon-right { +.icon-left, +.icon-right { top: 25%; z-index: 1; } @@ -132,10 +133,13 @@ h1 { ::placeholder { color: var(--unnic-color-brand-sec); - opacity: 1; /* Firefox */ + opacity: 1; + /* Firefox */ } - -:-ms-input-placeholder, ::-ms-input-placeholder { /* Internet Explorer 10-11 */ + +:-ms-input-placeholder, +::-ms-input-placeholder { + /* Internet Explorer 10-11 */ color: var(--unnic-color-brand-sec); } @@ -162,7 +166,9 @@ label { width: 100%; } -button, .btn, .bt-lg { +button, +.btn, +.bt-lg { background: var(--unnic-color-neutral-light); border-radius: var(--unnic-border-radius-sm); font-size: var(--unnic-font-size-body-lg); @@ -174,7 +180,7 @@ button, .btn, .bt-lg { outline: none; } -.form-group + .form-group { +.form-group+.form-group { margin: var(--unnic-spacing-stack-md) 0 0 0; } @@ -182,11 +188,11 @@ button, .btn, .bt-lg { display: flex; } -.form-group-nested > :not(:last-child) { +.form-group-nested> :not(:last-child) { margin: 0 var(--unnic-inline-sm) 0 0; } -.form-group-nested > :last-child { +.form-group-nested> :last-child { margin: 0; } @@ -279,14 +285,15 @@ button, .btn, .bt-lg { display: flex; } -.card-pf .left-side-content > .content, .card-pf #kc-content > .content { +.card-pf .left-side-content>.content, +.card-pf #kc-content>.content { display: flex; flex-direction: column; max-width: 624px; width: 100%; } -.card-pf .left-side-content > .content { +.card-pf .left-side-content>.content { padding: 32px 16px; padding-right: 44px; box-sizing: border-box; @@ -294,7 +301,7 @@ button, .btn, .bt-lg { row-gap: 48px; } -.card-pf #kc-content > .content { +.card-pf #kc-content>.content { padding: 32px 112px; row-gap: 16px; box-sizing: border-box; @@ -389,13 +396,14 @@ a:has(.brand-title) { .card-pf #kc-content .login-buttons { display: grid; - grid-gap: 16px; - grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); + grid-gap: 20px 8px; + grid-template-columns: repeat(3, 1fr); } -.card-pf #kc-content .login-buttons .login-button:not(:disabled), .card-pf #kc-content #kc-form-buttons .login-button:not(:disabled) { +.card-pf #kc-content .login-buttons .login-button:not(:disabled), +.card-pf #kc-content #kc-form-buttons .login-button:not(:disabled) { background-color: var(--color-weni-600, #00A49F); - grid-area: 1/1/2/3; + grid-column: span 3; } .card-pf #kc-content .footer a.privacy-policy { @@ -438,12 +446,12 @@ a:has(.brand-title) { margin-left: initial; } - .card-pf .left-side-content > .content { + .card-pf .left-side-content>.content { padding-left: 44px; justify-content: flex-start; } - .card-pf #kc-content > .content { + .card-pf #kc-content>.content { padding-left: 16px; padding-right: 16px; } @@ -457,11 +465,13 @@ a:has(.brand-title) { display: none; } - .card-pf .left-side-content .brand-title, .card-pf .left-side-content .brand-title-spacing { + .card-pf .left-side-content .brand-title, + .card-pf .left-side-content .brand-title-spacing { display: none; } - .card-pf #kc-content .language-select.top, .card-pf #kc-content .language-select-counterpoint { + .card-pf #kc-content .language-select.top, + .card-pf #kc-content .language-select-counterpoint { display: none; } @@ -491,7 +501,8 @@ a:has(.brand-title) { text-align: center; } - .card-pf #kc-content .greetings .brand-title, .card-pf #kc-content .greetings a:has(.brand-title) { + .card-pf #kc-content .greetings .brand-title, + .card-pf #kc-content .greetings a:has(.brand-title) { display: inline-block; } } @@ -504,7 +515,8 @@ a:has(.brand-title) { grid-column: 1 / 6; } -#kc-registration, .back-link { +#kc-registration, +.back-link { text-align: center; color: var(--unnic-color-neutral-cloudy); } @@ -515,7 +527,9 @@ a:has(.brand-title) { font-size: var(--unnic-font-size-body-gt); } -#kc-info-wrapper a, #kc-registration a, #kc-form-options a { +#kc-info-wrapper a, +#kc-registration a, +#kc-form-options a { color: var(--unnic-color-brand-weni); text-decoration: none; font-weight: var(--unnic-font-weight-bold); @@ -540,7 +554,7 @@ a:has(.brand-title) { } .social-button img { - height: 16px; + height: 20px; } .social-link { @@ -549,8 +563,23 @@ a:has(.brand-title) { } #button-github { - background-color: var(--unnic-color-neutral-black); - color: var(--unnic-color-neutral-snow); + background-color: var(--unnic-color-neutral-snow); + color: var(--unnic-color-neutral-darkest); + + outline-style: solid; + outline-color: var(--unnic-color-neutral-soft); + outline-width: 1px; + outline-offset: -1px; +} + +#button-microsoft { + background-color: var(--unnic-color-neutral-snow); + color: var(--unnic-color-neutral-darkest); + + outline-style: solid; + outline-color: var(--unnic-color-neutral-soft); + outline-width: 1px; + outline-offset: -1px; } #button-google { @@ -563,7 +592,9 @@ a:has(.brand-title) { outline-offset: -1px; } -#button-github:hover, #button-google:hover { +#button-github:hover, +#button-google:hover, +#button-microsoft:hover { opacity: var(--unnic-opacity-level-clear); } @@ -606,7 +637,7 @@ a:has(.brand-title) { border: var(--unnic-border-width-thinner) solid var(--unnic-color-neutral-clean); } -.btn-secondary:hover{ +.btn-secondary:hover { border: none; } @@ -617,11 +648,11 @@ a:has(.brand-title) { } .btn-tertiary { - background-color: rgba(0,0,0,0); + background-color: rgba(0, 0, 0, 0); color: var(--unnic-color-neutral-dark); } -.btn-tertiary:hover{ +.btn-tertiary:hover { border: var(--unnic-border-width-thinner) solid var(--unnic-color-neutral-soft); } @@ -630,7 +661,7 @@ a:has(.brand-title) { color: var(--unnic-color-neutral-cloudy); } -#kc-form-wrapper #kc-register-form .form-group .btn-tertiary{ +#kc-form-wrapper #kc-register-form .form-group .btn-tertiary { margin-top: var(--unnic-spacing-stack-sm); } @@ -680,7 +711,7 @@ a:has(.brand-title) { color: var(--unnic-color-neutral-dark); } -.text-body-gt{ +.text-body-gt { font-family: var(--unnic-font-family-secondary); font-size: var(--unnic-font-size-body-gt); margin: 0 0 var(--unnic-spacing-stack-xs) 0; @@ -742,7 +773,8 @@ a:has(.brand-title) { color: var(--unnic-color-feedback-red); } -.home-back-link, .home-back-link * { +.home-back-link, +.home-back-link * { color: var(--unnic-color-neutral-dark) } @@ -777,7 +809,7 @@ a:has(.brand-title) { font-size: var(--unnic-font-size-body-md); } -#kc-form-options .forgot-password a{ +#kc-form-options .forgot-password a { color: var(--unnic-color-neutral-dark); text-decoration: none; font-weight: var(--unnic-font-weight-normal); @@ -1036,24 +1068,34 @@ a:has(.brand-title) { } -.input-itself { - -} +.input-itself {} -.input-itself:-webkit-autofill, .input-itself:autofill { +.input-itself:-webkit-autofill, +.input-itself:autofill { animation-name: onAutoFillStart; - } +} -.input-itself:not(:-webkit-autofill), .input-itself:not(:autofill) { +.input-itself:not(:-webkit-autofill), +.input-itself:not(:autofill) { animation-name: onAutoFillCancel; } @keyframes onAutoFillStart { - from {/**/} - to {/**/} + from { + /**/ + } + + to { + /**/ + } } @keyframes onAutoFillCancel { - from {/**/} - to {/**/} -} + from { + /**/ + } + + to { + /**/ + } +} \ No newline at end of file diff --git a/themes/ilhasoft/login/resources/img/login/icon-github.svg b/themes/ilhasoft/login/resources/img/login/icon-github.svg index 07524fc..2c64b1f 100644 --- a/themes/ilhasoft/login/resources/img/login/icon-github.svg +++ b/themes/ilhasoft/login/resources/img/login/icon-github.svg @@ -1,3 +1,3 @@ - - + + diff --git a/themes/ilhasoft/login/resources/img/login/icon-microsoft.svg b/themes/ilhasoft/login/resources/img/login/icon-microsoft.svg new file mode 100644 index 0000000..7576403 --- /dev/null +++ b/themes/ilhasoft/login/resources/img/login/icon-microsoft.svg @@ -0,0 +1,6 @@ + + + + + +