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

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

* add touched js

internal/api/ui/login/static/resources/scripts/touched.js

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

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

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

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

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

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

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

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

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

internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css

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