diff --git a/internal/api/ui/login/static/resources/images/mfa/mfa-otp.svg b/internal/api/ui/login/static/resources/images/mfa/mfa-otp.svg deleted file mode 100644 index 2a3a326f6f..0000000000 --- a/internal/api/ui/login/static/resources/images/mfa/mfa-otp.svg +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/internal/api/ui/login/static/resources/images/mfa/mfa-u2f.svg b/internal/api/ui/login/static/resources/images/mfa/mfa-u2f.svg deleted file mode 100644 index 75e4f19202..0000000000 --- a/internal/api/ui/login/static/resources/images/mfa/mfa-u2f.svg +++ /dev/null @@ -1,51 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_base.scss b/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_base.scss index baba57416e..b53804641e 100644 --- a/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_base.scss +++ b/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_base.scss @@ -1,43 +1,46 @@ @mixin lgn-mfa-base { display: flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: space-evenly; - margin: 1rem 0; + flex-direction: column; + margin: 2rem 0; .mfa { display: flex; - flex-direction: column; + flex-direction: row; align-items: center; flex: 1; - padding: 1rem 0.5rem; + margin: 0.5rem 0; + position: relative; + + input[type="radio"] { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + } label { display: flex; - flex-direction: column; + flex-direction: row; align-items: center; - position: relative; - - input[type="radio"] { - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - } - - span { - text-align: center; - } + border-radius: 0.5rem; + padding: 1rem; + width: 100%; .mfa-img { - border-width: 1px; - border-style: solid; - border-radius: 0.5rem; - padding: 1rem; + height: 40px; + width: 40px; + object-fit: contain; + object-position: center; display: flex; - margin-bottom: 0.5rem; transition: all 0.2s ease; + + &.fingerprint, + &.email, + &.sms { + padding: 0.25rem; + box-sizing: border-box; + } } } } diff --git a/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_theme.scss b/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_theme.scss index 5437c92844..1f671f08a5 100644 --- a/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_theme.scss +++ b/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_theme.scss @@ -4,26 +4,26 @@ @mixin lgn-mfa-theme() { .lgn-mfa-options { .mfa { - label { - input[type="radio"] { - &:hover, - &:focus { - + .mfa-img { - background-color: var(--zitadel-color-card-hover); - border-color: var(--zitadel-color-input-border-hover); - } - } + input[type="radio"] { + &:hover, + &:focus { + background-color: var(--zitadel-color-card-hover); + border-color: var(--zitadel-color-input-border-hover); } + } + + label { + border: 1px solid var(--zitadel-color-input-border); .mfa-img { - border: 1px solid var(--zitadel-color-input-border); + margin-right: 1rem; } + } - input[type="radio"]:checked + .mfa-img { - background-color: var(--zitadel-color-card-hover); - border: 1px solid var(--zitadel-color-input-border-active); - box-shadow: 0 0 0 2px var(--zitadel-color-input-border-active); - } + input[type="radio"]:checked + label { + background-color: var(--zitadel-color-card-hover); + border: 1px solid var(--zitadel-color-input-border-active); + box-shadow: 0 0 0 2px var(--zitadel-color-input-border-active); } } } diff --git a/internal/api/ui/login/static/resources/themes/scss/styles/radio/radio_base.scss b/internal/api/ui/login/static/resources/themes/scss/styles/radio/radio_base.scss index 05329f0476..3c8fd1a626 100644 --- a/internal/api/ui/login/static/resources/themes/scss/styles/radio/radio_base.scss +++ b/internal/api/ui/login/static/resources/themes/scss/styles/radio/radio_base.scss @@ -61,8 +61,8 @@ $lgn-radio-label-padding: 0 0 0 ($lgn-radio-size + 10px); } &::after { - top: $lgn-radio-size / 2 - $lgn-radio-checked-size / 2; - left: $lgn-radio-size / 2 - $lgn-radio-checked-size / 2; + top: calc($lgn-radio-size / 2) - calc($lgn-radio-checked-size / 2); + left: calc($lgn-radio-size / 2) - calc($lgn-radio-checked-size / 2); width: $lgn-radio-checked-size; height: $lgn-radio-checked-size; transform: scale(0); diff --git a/internal/api/ui/login/static/templates/mfa_prompt.html b/internal/api/ui/login/static/templates/mfa_prompt.html index 17170eb0bb..8ee9ed659d 100644 --- a/internal/api/ui/login/static/templates/mfa_prompt.html +++ b/internal/api/ui/login/static/templates/mfa_prompt.html @@ -16,34 +16,74 @@ {{ range $provider := .MFAProviders}} {{ $providerName := (t (printf "InitMFAPrompt.Provider%v" $provider)) }}
-