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): mfa prompt UI improvements, fix register field validation, email validation (#4672)

Browse Source 
* fix: mfa prompt styling

* register password field validation

* loginname overflow, mfa hover effect

* cleanup

* Update internal/api/ui/login/static/resources/scripts/password_policy_check.js

Co-authored-by: Silvan <silvan.reusser@gmail.com>

* prettier if check

* cleanup

* Update internal/api/ui/login/static/resources/scripts/password_policy_check.js

Co-authored-by: Livio Spring <livio.a@gmail.com>

* fix confirmation validation, cleanup

* rm log

* email type validation

* add email validation

* change pattern

* pattern

* comment RFC 2822

* dont wrapp org name

* rm email validation

Co-authored-by: Silvan <silvan.reusser@gmail.com>
Co-authored-by: Livio Spring <livio.a@gmail.com>
This commit is contained in:
Max Peintner
2022-11-17 13:25:09 +01:00
committed by GitHub
parent 7db87f4646
commit 2a8dfab192
17 changed files with 240 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
internal/api/ui/login/static/resources/themes/scss/styles/container/container.scss
View File

@@ -89,9 +89,15 @@ $lgn-container-bottom-margin: 50px;
.lgn-displayname {
margin: 0.5rem 1rem;
}
.lgn-loginname {
min-width: 0;
p {
margin: 0.5rem 1rem;
margin: 0.5rem 0.5rem;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}

1
internal/api/ui/login/static/resources/themes/scss/styles/input/input.scss
View File

@@ -23,5 +23,6 @@ select,
max-width: 150px;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}

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

@@ -11,38 +11,32 @@
flex: 1;
padding: 0 0.5rem;
input[type="radio"] + label {
label {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
input[type="radio"] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
span {
text-align: center;
}
.mfa-img {
border: 1px solid var(--zitadel-color-input-border);
border-width: 1px;
border-style: solid;
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);
}
}
}
}
}

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

@@ -4,25 +4,26 @@
@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);
label {
input[type="radio"] {
&:hover,
&:focus {
+ .mfa-img {
background-color: var(--zitadel-color-card-hover);
border-color: var(--zitadel-color-input-border-hover);
}
}
}
.mfa-img {
border: 1px solid var(--zitadel-color-input-border);
}
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);
}
}
}
}

6
internal/api/ui/login/static/resources/themes/scss/styles/vars.scss
View File

@@ -44,6 +44,8 @@
--zitadel-color-footer-line: rgba(0, 0, 0, 0.12);
--zitadel-color-card-hover: #ffffff;
--zitadel-color-input-background: #00000003;
--zitadel-color-input-border: #1a191938;
--zitadel-color-input-border-hover: #1a1b1b;
@@ -155,9 +157,11 @@
--zitadel-color-footer-line: rgba(255, 255, 255, 0.12);
--zitadel-color-card-hover: #ffffff20;
--zitadel-color-input-background: rgba(0, 0, 0, 0.2);
--zitadel-color-input-border: #f9f7f725;
--zitadel-color-input-border-hover: #aeafb1;
--zitadel-color-input-border-hover: #ffffff;
--zitadel-color-input-border-active: var(--zitadel-color-primary-500);
--zitadel-color-input-placeholder: var(--zitadel-color-grey-600);