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

fix(login): improve multifactor prompt (#4474)

Browse Source 
* login mfa improvements

* mfa toggles

* styles

* mfa styles

* go rel

* better translations for mfa u2f

* revert goreleaser format
This commit is contained in:
Max Peintner
2022-10-03 13:48:24 +02:00
committed by GitHub
parent c6bb797d58
commit f517077be3
17 changed files with 376 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa.scss Normal file
View File

@@ -0,0 +1,5 @@
@import "mfa_base";
.lgn-mfa-options {
@include lgn-mfa-base;
}

49
internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_base.scss Normal file
View File

@@ -0,0 +1,49 @@
@mixin lgn-mfa-base {
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin: 2rem 0;
.mfa {
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
padding: 0 0.5rem;
input[type="radio"] + label {
display: flex;
flex-direction: column;
align-items: center;
span {
text-align: center;
}
.mfa-img {
border: 1px solid var(--zitadel-color-input-border);
border-radius: 0.5rem;
padding: 1rem;
display: flex;
margin-bottom: 0.5rem;
transition: all 0.2s ease;
&:hover {
border: 1px solid var(--zitadel-color-input-border-active);
}
}
}
input[type="radio"] {
display: none;
&:checked {
& + label {
.mfa-img {
border: 1px solid var(--zitadel-color-primary);
}
}
}
}
}
}

29
internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_theme.scss Normal file
View File

@@ -0,0 +1,29 @@
@import "../theming/theming";
@import "mfa";
@mixin lgn-mfa-theme() {
.lgn-mfa-options {
.mfa {
input[type="radio"] + label {
.mfa-img {
border: 1px solid var(--zitadel-color-input-border);
background-color: var(--zitadel-color-input-background);
&:hover {
border: 1px solid var(--zitadel-color-input-border-hover);
}
}
}
input[type="radio"] {
&:checked {
& + label {
.mfa-img {
border: 1px solid var(--zitadel-color-primary);
}
}
}
}
}
}
}

78
internal/api/ui/login/static/resources/themes/scss/styles/theming/all.scss
View File

@@ -1,41 +1,43 @@
@import '../core/core';
@import '../footer/footer_theme';
@import '../header/header_theme';
@import '../button/button_theme';
@import '../input/input_theme';
@import '../label/label_theme';
@import '../radio/radio_theme';
@import '../a/a_theme';
@import '../identity_provider/identity_provider_theme';
@import '../error/error_theme';
@import '../qrcode/qrcode_theme';
@import '../container/container_theme';
@import '../account_selection/account_selection_theme';
@import '../avatar/avatar_theme';
@import '../checkbox/checkbox_theme';
@import '../select/select_theme';
@import '../list/list_theme';
@import '../typography/typography';
@import '../success_label/success_label_theme';
@import 'theming';
@import "../core/core";
@import "../footer/footer_theme";
@import "../header/header_theme";
@import "../button/button_theme";
@import "../input/input_theme";
@import "../label/label_theme";
@import "../radio/radio_theme";
@import "../a/a_theme";
@import "../identity_provider/identity_provider_theme";
@import "../error/error_theme";
@import "../qrcode/qrcode_theme";
@import "../container/container_theme";
@import "../account_selection/account_selection_theme";
@import "../avatar/avatar_theme";
@import "../checkbox/checkbox_theme";
@import "../select/select_theme";
@import "../list/list_theme";
@import "../typography/typography";
@import "../success_label/success_label_theme";
@import "../mfa/mfa_theme";
@import "theming";
@mixin zitadel-lgn-theme() {
@include lgn-core-theme();
@include lgn-header-theme();
@include lgn-button-theme();
@include lgn-input-theme();
@include lgn-radio-theme();
@include lgn-checkbox-theme();
@include lgn-label-theme();
@include lgn-footer-theme();
@include lgn-a-theme();
@include lgn-error-theme();
@include lgn-qrcode-theme();
@include lgn-container-theme();
@include lgn-account-selection-theme();
@include lgn-avatar-theme();
@include lgn-select-theme();
@include lgn-list-theme();
@include lgn-idp-theme();
@include lgn-success-label-theme();
@include lgn-core-theme();
@include lgn-header-theme();
@include lgn-button-theme();
@include lgn-input-theme();
@include lgn-radio-theme();
@include lgn-checkbox-theme();
@include lgn-label-theme();
@include lgn-footer-theme();
@include lgn-a-theme();
@include lgn-error-theme();
@include lgn-qrcode-theme();
@include lgn-container-theme();
@include lgn-account-selection-theme();
@include lgn-avatar-theme();
@include lgn-select-theme();
@include lgn-list-theme();
@include lgn-idp-theme();
@include lgn-success-label-theme();
@include lgn-mfa-theme();
}