TheArchive/zitadel
1
0
Fork 0
mirror of https://github.com/zitadel/zitadel.git synced 2025-12-10 07:32:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(login): mfa prompt styles (#6366)

Browse Source 
* feat: login with otp

* fix(i18n): japanese translation

* add missing files

* fix provider change

* add event types translations to en

* add tests

* resourceOwner

* remove unused handler

* fix: secret generators and add comments

* add setup step

* rename

* linting

* fix setup

* improve otp handling

* fix autocomplete

* translations for login and notifications

* translations for event types

* fix: mfa prompt styles

* fix merge

* fix merge

* fix html

* rm unused files

---------

Co-authored-by: Livio Spring <livio.a@gmail.com>
This commit is contained in:
Max Peintner
2023-08-15 16:05:00 +02:00
committed by GitHub
parent 7c494fd219
commit d83681a928
6 changed files with 100 additions and 166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_base.scss
View File

@@ -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;
}
}
}
}

30
internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_theme.scss
View File

@@ -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);
}
}
}

4
internal/api/ui/login/static/resources/themes/scss/styles/radio/radio_base.scss
View File

@@ -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);