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

fix(console, login): console - ensure permission is available, login - i18n fixes, input borders, lgn-touched script to add class on blur (#3760)

Browse Source 
* permission restriction, member, login i18n input borders, secondary text

* add touched js
This commit is contained in:
Max Peintner
2022-06-07 11:25:56 +02:00
committed by GitHub
parent c1f59c7950
commit 233d80502d
30 changed files with 333 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
internal/api/ui/login/static/i18n/de.yaml
View File

@@ -6,7 +6,7 @@ Login:
LoginNameLabel: Loginname
UsernamePlaceHolder: username
LoginnamePlaceHolder: username@domain
ExternalUserDescription: Melde dich mit einem externen Benutzer an
ExternalUserDescription: oder melde dich mit einem externen Benutzer an
MustBeMemberOfOrg: Der Benutzer muss der Organisation {{.OrgName}} angehören.
RegisterButtonText: registrieren
NextButtonText: weiter
@@ -159,7 +159,7 @@ PasswordlessRegistrationDone:
PasswordChange:
Title: Passwort ändern
Description: Ändere dein Password in dem du dein altes und dann dein neuen Passwort eingibst.
Description: Ändere dein Passwort in dem du dein altes und dann dein neues Passwort eingibst.
OldPasswordLabel: Altes Passwort
NewPasswordLabel: Neues Passwort
NewPasswordConfirmLabel: Passwort Bestätigung

13
internal/api/ui/login/static/resources/scripts/touched.js Normal file
View File

@@ -0,0 +1,13 @@
let inputs = document.getElementsByTagName("input");
if (inputs && inputs.length) {
for (let input of inputs) {
input.addEventListener("focus", () => {
input.classList.add("lgn-focused");
});
input.addEventListener("blur", () => {
input.classList.add("lgn-touched");
input.classList.remove("lgn-focused");
});
}
}

2
internal/api/ui/login/static/resources/themes/scss/styles/identity_provider/identity_provider.scss
View File

@@ -1,4 +1,4 @@
@import 'identity_provider_base';
@import "identity_provider_base";
.lgn-idp {
@include lgn-idp-base;

9
internal/api/ui/login/static/resources/themes/scss/styles/identity_provider/identity_provider_theme.scss
View File

@@ -1,11 +1,10 @@
@import 'identity_provider';
@import "identity_provider";
@mixin lgn-idp-theme() {
@include lgn-idp-color();
}
@mixin lgn-idp-color() {
.lgn-idp {
border-color: var(--zitadel-color-divider);
@@ -20,6 +19,12 @@
background-color: var(--zitadel-color-google-background);
}
}
.lgn-idp-providers {
.lgn-idp-desc {
color: var(--zitadel-color-label);
}
}
}
@mixin lgn-idp-elevation($zValue, $opacity: $lgn-elevation-opacity) {

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

@@ -31,7 +31,7 @@
}
// overwrite if state is warn
&[color="warn"] {
&.lgn-touched[color="warn"] {
border-color: var(--zitadel-color-warn);
}
}

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

@@ -45,7 +45,7 @@
--zitadel-color-footer-line: rgba(0, 0, 0, 0.12);
--zitadel-color-input-background: #00000003;
--zitadel-color-input-border: #00000040;
--zitadel-color-input-border: #1a191938;
--zitadel-color-input-border-hover: #1a1b1b;
--zitadel-color-input-border-active: var(--zitadel-color-primary-500);
--zitadel-color-input-placeholder: var(--zitadel-color-grey-600);
@@ -156,7 +156,7 @@
--zitadel-color-footer-line: rgba(255, 255, 255, 0.12);
--zitadel-color-input-background: rgba(0, 0, 0, 0.2);
--zitadel-color-input-border: #403e3e;
--zitadel-color-input-border: #f9f7f725;
--zitadel-color-input-border-hover: #aeafb1;
--zitadel-color-input-border-active: var(--zitadel-color-primary-500);
--zitadel-color-input-placeholder: var(--zitadel-color-grey-600);

14
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
View File

@@ -40,7 +40,7 @@
--zitadel-color-background-contrast: rgb(0, 0, 0);
--zitadel-color-footer-line: rgba(0, 0, 0, 0.12);
--zitadel-color-input-background: #00000003;
--zitadel-color-input-border: #00000040;
--zitadel-color-input-border: #1a191938;
--zitadel-color-input-border-hover: #1a1b1b;
--zitadel-color-input-border-active: var(--zitadel-color-primary-500);
--zitadel-color-input-placeholder: var(--zitadel-color-grey-600);
@@ -136,7 +136,7 @@
--zitadel-color-background-contrast: rgb(255, 255, 255);
--zitadel-color-footer-line: rgba(255, 255, 255, 0.12);
--zitadel-color-input-background: rgba(0, 0, 0, 0.2);
--zitadel-color-input-border: #403e3e;
--zitadel-color-input-border: #f9f7f725;
--zitadel-color-input-border-hover: #aeafb1;
--zitadel-color-input-border-active: var(--zitadel-color-primary-500);
--zitadel-color-input-placeholder: var(--zitadel-color-grey-600);
@@ -2721,9 +2721,9 @@ select:focus,
.lgn-select:focus {
border-color: var(--zitadel-color-input-border-active);
}
.lgn-input[color=warn],
select[color=warn],
.lgn-select[color=warn] {
.lgn-input.lgn-touched[color=warn],
select.lgn-touched[color=warn],
.lgn-select.lgn-touched[color=warn] {
border-color: var(--zitadel-color-warn);
}
@@ -2921,6 +2921,10 @@ ul li i.lgn-valid {
background-color: var(--zitadel-color-google-background);
}
.lgn-idp-providers .lgn-idp-desc {
color: var(--zitadel-color-label);
}
.lgn-success-label {
color: var(--zitadel-color-success);
background-color: var(--zitadel-color-success-background);

2
internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css.map
View File

File diff suppressed because one or more lines are too long

2
internal/api/ui/login/static/templates/login.html
View File

@@ -42,7 +42,7 @@
{{if hasExternalLogin }}
<div class="lgn-idp-providers">
<p>{{t "Login.ExternalUserDescription"}}</p>
<p class="lgn-idp-desc">{{t "Login.ExternalUserDescription"}}</p>
{{ $reqid := .AuthReqID}}
{{range $provider := .IDPProviders}}

1
internal/api/ui/login/static/templates/main.html
View File

@@ -33,6 +33,7 @@
</div>
</div>
<script src="{{ resourceUrl "scripts/avatar.js" }}"></script>
<script src="{{ resourceUrl "scripts/touched.js" }}"></script>
</body>
<footer>
{{template "footer" .}}