fix: improvements for login and oidc (#227)

* add csrf

* caching

* caching

* caching

* caching

* security headers

* csp and security headers

* error handler csp

* select user with display name

* csp

* user selection styling

* username to loginname

* regenerate grpc

* regenerate

* change to login name

internal/login/static/i18n/de.yaml

@@ -6,7 +6,6 @@ Password:
 Login:
   Title: Anmeldung
   Description: Gib deine Benutzerdaten ein.
-  Username: Benutzername
   Loginname: Loginname
   LoginnamePlaceHolder: username@domain
 

internal/login/static/i18n/en.yaml

@@ -1,7 +1,6 @@
 Login:
   Title: Login
   Description: Enter your logindata.
-  Username: Username
   Loginname: Loginname
   LoginnamePlaceHolder: username@domain
 
@@ -91,7 +90,7 @@ EmailVerificationDone:
 
 Registration:
   Title: Registration
-  Description: Enter your Userdata. Your email address will be used as username.
+  Description: Enter your Userdata. Your email address will be used as loginname.
   Email: E-Mail
   Firstname: Firstname
   Lastname: Lastname

internal/login/static/resources/scripts/copy_to_clipboard.js

@@ -0,0 +1,6 @@
+const copyToClipboard = str => {
+    navigator.clipboard.writeText(str);
+}
+
+let copyButton = document.getElementsByClassName("copy")[0];
+copyButton.addEventListener("click", copyToClipboard(copyButton.getAttribute("data-copy").value));

internal/login/static/resources/themes/caos/css/dark.css

@@ -95,7 +95,7 @@ h1 {
 }
 
 p {
-  font-width: 300;
+  font-weight: 300;
 }
 
 header {
@@ -151,9 +151,6 @@ button.primary {
 button.primary:hover {
   background-color: #f60075;
 }
-button > .sessionstate {
-  text-transform: lowercase;
-}
 
 input:not([type=radio]), select {
   background-color: #252525;
@@ -200,6 +197,102 @@ form .actions .right {
 form .actions button, form .actions a {
   margin: 10px 0;
 }
+form button.clean {
+  border: none;
+  height: auto;
+  color: white;
+  text-align: left;
+  text-transform: unset;
+  display: flex;
+  padding: 15px;
+}
+form button.clean:hover {
+  border: none;
+  background-color: #252525;
+}
+form button.clean * {
+  font-weight: 300;
+}
+form .user-selection-list {
+  margin-bottom: 80px;
+}
+form button.user-selection .profile-image {
+  width: 100px;
+  height: 100px;
+  background-image: url("/resources/images/icon-user-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-dark@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-dark-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection .sessionstate {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border-radius: 20px;
+  border-color: #595959;
+  border-style: solid;
+  border-width: 1px;
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+}
+form button.user-selection .sessionstate.sessionstate-0 {
+  background-color: #138D00;
+}
+form button.user-selection .sessionstate.sessionstate-1 {
+  background-color: #BC372E;
+}
+form button.user-selection > div {
+  position: relative;
+}
+form button.user-selection > div.names {
+  margin: 15px;
+}
+form button.user-selection > div.names .displayname {
+  font-size: 1.4rem;
+}
+form button.user-selection > div.names .loginname {
+  color: #898989;
+}
+.user-selection + form button.other-user {
+  margin-top: 80px;
+}
+form button.other-user .other-user-image {
+  width: 100px;
+  height: 75px;
+  background-image: url("/resources/images/icon-newuser-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user:hover .other-user-image {
+  background-image: url("/resources/images/icon-newuser-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user > div:nth-of-type(2) {
+  margin: 15px;
+  font-size: 1.4rem;
+}
 
 #copy-secret {
   visibility: hidden;
@@ -209,11 +302,11 @@ form .actions button, form .actions a {
 #qrcode {
   text-align: center;
 }
-#qrcode svg rect[style*="fill:white"] {
-  fill: #282828 !important;
+#qrcode svg rect.color {
+  fill: white;
 }
-#qrcode svg rect[style*="fill:black"] {
-  fill: white !important;
+#qrcode svg rect.bg-color {
+  fill: #282828;
 }
 
 #secret .copy {

internal/login/static/resources/themes/caos/css/dark.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCGW;EDFX;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBCDc;EDEd,OCDQ;;;ADIZ;EACI,OCLQ;EDMR,aCZS;EDaT;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCnCW;EDoCX;EACA;EACA;;AAEA;EACI,OCxCY;;;AD4CpB;EACI;EACA,kBCjDc;EDkDd,OChDW;EDiDX;EACA;EACA;EACA;EACA,QE/DU;EFgEV;EACA;EACA;;AACA;EACI,kBCzDY;ED0DZ;;AAGJ;EACI,kBC/DO;EDgEP,OCjEI;EDkEJ;;AACA;EACI,kBClEQ;;ADsEhB;EACI;;;AAIR;EACI,kBE7EmB;EF8EnB,OC/EQ;EDgFR,QEzFU;EF0FV;EACA;EACA;;;AAIA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI,OE9GK;EF+GL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;;;AAKJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA","file":"dark.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCGW;EDFX;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBCDc;EDEd,OCDQ;;;ADIZ;EACI,OCLQ;EDMR,aCZS;EDaT;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCnCW;EDoCX;EACA;EACA;;AAEA;EACI,OCxCY;;;AD4CpB;EACI;EACA,kBCjDc;EDkDd,OChDW;EDiDX;EACA;EACA;EACA;EACA,QE/DU;EFgEV;EACA;EACA;;AACA;EACI,kBCzDY;ED0DZ;;AAGJ;EACI,kBC/DO;EDgEP,OCjEI;EDkEJ;;AACA;EACI,kBClEQ;;;ADuEpB;EACI,kBE5DmB;EF6DnB,OC3EQ;ED4ER,QErFU;EFsFV;EACA;EACA;;;AAIA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI,OE7FK;EF8FL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OCnII;EDoIJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBE7HW;;AFgIf;EACI;;AAIR;EACI;;AAIA;EACI;EACA;EE1JV;;AACA;EFuJM;IEtJJ;IACA;;;AF4JQ;EE/JV;;AACA;EF8JU;IE7JR;IACA;;;AFiKI;EACI;EACA;EACA;EACA;EACA,cE5JO;EF6JP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OExLP;;AF+LL;EACI;;AAEJ;EACI;EACA;EEhNV;;AACA;EF6MM;IE5MJ;IACA;;;AFkNQ;EErNV;;AACA;EFoNU;IEnNR;IACA;;;AFuNI;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MC1OI;;AD6OR;EACI,MC/OU;;;ADoPd;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA","file":"dark.css"}

internal/login/static/resources/themes/caos/css/light.css

@@ -95,7 +95,7 @@ h1 {
 }
 
 p {
-  font-width: 300;
+  font-weight: 300;
 }
 
 header {
@@ -151,9 +151,6 @@ button.primary {
 button.primary:hover {
   background-color: #f60075;
 }
-button > .sessionstate {
-  text-transform: lowercase;
-}
 
 input:not([type=radio]), select {
   background-color: #252525;
@@ -200,6 +197,102 @@ form .actions .right {
 form .actions button, form .actions a {
   margin: 10px 0;
 }
+form button.clean {
+  border: none;
+  height: auto;
+  color: white;
+  text-align: left;
+  text-transform: unset;
+  display: flex;
+  padding: 15px;
+}
+form button.clean:hover {
+  border: none;
+  background-color: #252525;
+}
+form button.clean * {
+  font-weight: 300;
+}
+form .user-selection-list {
+  margin-bottom: 80px;
+}
+form button.user-selection .profile-image {
+  width: 100px;
+  height: 100px;
+  background-image: url("/resources/images/icon-user-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-dark@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-dark-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection .sessionstate {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border-radius: 20px;
+  border-color: #595959;
+  border-style: solid;
+  border-width: 1px;
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+}
+form button.user-selection .sessionstate.sessionstate-0 {
+  background-color: #138D00;
+}
+form button.user-selection .sessionstate.sessionstate-1 {
+  background-color: #BC372E;
+}
+form button.user-selection > div {
+  position: relative;
+}
+form button.user-selection > div.names {
+  margin: 15px;
+}
+form button.user-selection > div.names .displayname {
+  font-size: 1.4rem;
+}
+form button.user-selection > div.names .loginname {
+  color: #898989;
+}
+.user-selection + form button.other-user {
+  margin-top: 80px;
+}
+form button.other-user .other-user-image {
+  width: 100px;
+  height: 75px;
+  background-image: url("/resources/images/icon-newuser-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user:hover .other-user-image {
+  background-image: url("/resources/images/icon-newuser-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user > div:nth-of-type(2) {
+  margin: 15px;
+  font-size: 1.4rem;
+}
 
 #copy-secret {
   visibility: hidden;
@@ -209,11 +302,11 @@ form .actions button, form .actions a {
 #qrcode {
   text-align: center;
 }
-#qrcode svg rect[style*="fill:white"] {
-  fill: #282828 !important;
+#qrcode svg rect.color {
+  fill: white;
 }
-#qrcode svg rect[style*="fill:black"] {
-  fill: white !important;
+#qrcode svg rect.bg-color {
+  fill: #282828;
 }
 
 #secret .copy {
@@ -282,6 +375,48 @@ html button.primary {
 html button.primary:hover {
   background-color: #f60075;
 }
+html button.clean {
+  color: #282828;
+}
+html button.user-selection .profile-image {
+  background-image: url("/resources/images/icon-user-light.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-light@2x.png");
+    background-size: 100px 100px;
+  }
+}
+html button.user-selection:hover {
+  background-color: #252525;
+}
+html button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-light-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-light-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+html button.other-user .other-user-image {
+  background-image: url("/resources/images/icon-newuser-light.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-light@2x.png");
+    background-size: 100px 75px;
+  }
+}
+html button.other-user:hover .other-user-image {
+  background-image: url("/resources/images/icon-newuser-light-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-light-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
 html input {
   background-color: white;
   color: #282828;

internal/login/static/resources/themes/caos/css/light.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCGW;EDFX;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBCDc;EDEd,OCDQ;;;ADIZ;EACI,OCLQ;EDMR,aCZS;EDaT;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCnCW;EDoCX;EACA;EACA;;AAEA;EACI,OCxCY;;;AD4CpB;EACI;EACA,kBCjDc;EDkDd,OChDW;EDiDX;EACA;EACA;EACA;EACA,QE/DU;EFgEV;EACA;EACA;;AACA;EACI,kBCzDY;ED0DZ;;AAGJ;EACI,kBC/DO;EDgEP,OCjEI;EDkEJ;;AACA;EACI,kBClEQ;;ADsEhB;EACI;;;AAIR;EACI,kBE7EmB;EF8EnB,OC/EQ;EDgFR,QEzFU;EF0FV;EACA;EACA;;;AAIA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI,OE9GK;EF+GL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;;;AAKJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AG1MJ;EACI,kBFYQ;EEXR,OFUc;;AERd;EACI;;AAGJ;EACI,OFGU;;AEAd;EACI;EACA;EACA;;AAEA;EACI,kBFIa;EEHb;;AAGJ;EACI,kBFTG;EEUH,OFXA;EEYA;EACA;;AACA;EACI,kBFbI;;AEkBhB;EACI,kBFrBI;EEsBJ,OFvBU;;AE2BV;EACI;;AAGJ;EACI;;AAIR;EACI","file":"light.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/caos/variables.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCGW;EDFX;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBCDc;EDEd,OCDQ;;;ADIZ;EACI,OCLQ;EDMR,aCZS;EDaT;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCnCW;EDoCX;EACA;EACA;;AAEA;EACI,OCxCY;;;AD4CpB;EACI;EACA,kBCjDc;EDkDd,OChDW;EDiDX;EACA;EACA;EACA;EACA,QE/DU;EFgEV;EACA;EACA;;AACA;EACI,kBCzDY;ED0DZ;;AAGJ;EACI,kBC/DO;EDgEP,OCjEI;EDkEJ;;AACA;EACI,kBClEQ;;;ADuEpB;EACI,kBE5DmB;EF6DnB,OC3EQ;ED4ER,QErFU;EFsFV;EACA;EACA;;;AAIA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI,OE7FK;EF8FL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OCnII;EDoIJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBE7HW;;AFgIf;EACI;;AAIR;EACI;;AAIA;EACI;EACA;EE1JV;;AACA;EFuJM;IEtJJ;IACA;;;AF4JQ;EE/JV;;AACA;EF8JU;IE7JR;IACA;;;AFiKI;EACI;EACA;EACA;EACA;EACA,cE5JO;EF6JP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OExLP;;AF+LL;EACI;;AAEJ;EACI;EACA;EEhNV;;AACA;EF6MM;IE5MJ;IACA;;;AFkNQ;EErNV;;AACA;EFoNU;IEnNR;IACA;;;AFuNI;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MC1OI;;AD6OR;EACI,MC/OU;;;ADoPd;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AGtSJ;EACI,kBFYQ;EEXR,OFUc;;AERd;EACI;;AAGJ;EACI,OFGU;;AEAd;EACI;EACA;EACA;;AAEA;EACI,kBFIa;EEHb;;AAGJ;EACI,kBFTG;EEUH,OFXA;EEYA;EACA;;AACA;EACI,kBFbI;;AEiBZ;EACI,OFrBM;;AEyBN;EDxBV;;AACA;ECuBU;IDtBR;IACA;;;ACyBQ;EACI,kBDfO;;ACiBP;ED/Bd;;AACA;EC8Bc;ID7BZ;IACA;;;ACmCQ;EDtCV;;AACA;ECqCU;IDpCR;IACA;;;ACwCY;ED3Cd;;AACA;EC0Cc;IDzCZ;IACA;;;AC+CA;EACI,kBFnDI;EEoDJ,OFrDU;;AEyDV;EACI;;AAGJ;EACI;;AAIR;EACI","file":"light.css"}

internal/login/static/resources/themes/scss/light.scss

@@ -30,6 +30,36 @@ html {
                 background-color: $primaryColorHover;
             }
         }
+
+        &.clean {
+            color: $fontColorLight;
+        }
+
+        &.user-selection {
+            .profile-image {
+                @include retina-background-image($profileImgLight, "png", false, 100px, 100px);
+            }
+
+            &:hover {
+                background-color: $buttonBackgroundColorHover;
+
+                .profile-image {
+                    @include retina-background-image($profileImgLight, "png", true, 100px, 100px);
+                }
+            }
+        }
+
+        &.other-user {
+            .other-user-image {
+                @include retina-background-image($otherUserImgLight, "png", false, 100px, 75px);
+            }
+
+            &:hover {
+                .other-user-image {
+                    @include retina-background-image($otherUserImgLight, "png", true, 100px, 75px);
+                }
+            }
+        }
     }
 
     input {

internal/login/static/resources/themes/scss/main.scss

@@ -25,7 +25,7 @@ h1 {
 }
 
 p {
-    font-width: 300;
+    font-weight: 300;
 }
 
 header {
@@ -83,10 +83,6 @@ button {
             background-color: $primaryColorHover;
         }
     }
-
-    & > .sessionstate {
-        text-transform: lowercase;
-    }
 }
 
 input:not([type='radio']), select {
@@ -143,6 +139,102 @@ form {
             margin: 10px 0;
         }
     }
+
+    button.clean {
+        border: none;
+        height: auto;
+        color: $fontColor;
+        text-align: left;
+        text-transform: unset;
+        display: flex;
+        padding: 15px;
+
+        &:hover {
+            border: none;
+            background-color: $buttonBackgroundColorHover;
+        }
+
+        * {
+            font-weight: 300;
+        }
+    }
+
+    .user-selection-list {
+        margin-bottom: 80px;
+    }
+
+    button.user-selection {
+        .profile-image {
+            width: 100px;
+            height: 100px;
+            @include retina-background-image($profileImgDark, "png", false, 100px, 100px);
+        }
+
+        &:hover {
+            .profile-image {
+                @include retina-background-image($profileImgDark, "png", true, 100px, 100px);
+            }
+        }
+
+        .sessionstate {
+            display: inline-block;
+            height: 20px;
+            width: 20px;
+            border-radius: 20px;
+            border-color: $inputBorderColor;
+            border-style: solid;
+            border-width: 1px;
+            position: absolute;
+            bottom: 0px;
+            right: 10px;
+
+            &.sessionstate-0 {
+                background-color: #138D00;
+            }
+
+            &.sessionstate-1 {
+                background-color: #BC372E;
+            }
+        }
+
+
+        & > div {
+            position: relative;
+
+            &.names {
+                margin: 15px;
+
+                .displayname {
+                    font-size: 1.4rem;
+                }
+                .loginname {
+                    color: $labelColor;
+                }
+            }
+        }
+    }
+
+    button.other-user {
+        .user-selection+&{
+            margin-top: 80px;
+        }
+        .other-user-image {
+            width: 100px;
+            height: 75px;
+            @include retina-background-image($otherUserImgDark, "png", false, 100px, 75px);
+        }
+
+        &:hover {
+            .other-user-image {
+                @include retina-background-image($otherUserImgDark, "png", true, 100px, 75px);
+            }
+        }
+
+        & > div:nth-of-type(2) {
+            margin: 15px;
+            font-size: 1.4rem;
+        }
+    }
 }
 
 #copy-secret {
@@ -153,12 +245,12 @@ form {
 #qrcode {
     text-align: center;
 
-    svg rect[style*="fill:white"] {
-        fill: $backgroundColor !important;
+    svg rect.color {
+        fill: $fontColor;
     }
 
-    svg rect[style*="fill:black"] {
-        fill: $fontColor !important;
+    svg rect.bg-color {
+        fill: $backgroundColor;
     }
 }
 

internal/login/static/resources/themes/scss/variables.scss

@@ -4,7 +4,20 @@ $headerFont: Aileron;
 
 // ----- LAYOUT ------------
 $inputHeight: 50px;
+$retina: "only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx)";
 
+@mixin retina-background-image($file, $type, $hover, $width, $height) {
+  $hovername: '';
+  @if $hover {
+    $hovername: '-hover';
+  }
+  $filename :$file + $hovername;
+  background-image: url($filename + '.' + $type);
+  @media #{$retina} {
+    background-image: url($filename + '@2x.' + $type);
+    background-size: $width $height;
+  }
+}
 
 // ----- DARK-THEME --------
 $backgroundColor: #282828;
@@ -14,10 +27,16 @@ $primaryColorHover: lighten($primaryColor, 10%);
 $labelColor: #898989;
 $inputBorderColor: #595959;
 $inputBackgroundColor: #252525;
+$buttonBackgroundColorHover: $inputBackgroundColor;
+$profileImgDark: "/resources/images/icon-user-dark";
+$otherUserImgDark: "/resources/images/icon-newuser-dark";
 
 
 // ----- LIGHT-THEME --------
 $backgroundColorLight: $fontColor;
 $fontColorLight: $backgroundColor;
 $primaryColorLight: $primaryColor;
-$primaryColorHoverLight: lighten($primaryColorLight, 10%);
+$primaryColorHoverLight: lighten($primaryColorLight, 10%);
+$buttonBackgroundColorHoverLight: #EFEFEF;
+$profileImgLight: "/resources/images/icon-user-light";
+$otherUserImgLight: "/resources/images/icon-newuser-light";

internal/login/static/resources/themes/zitadel/css/dark.css

@@ -95,7 +95,7 @@ h1 {
 }
 
 p {
-  font-width: 300;
+  font-weight: 300;
 }
 
 header {
@@ -151,9 +151,6 @@ button.primary {
 button.primary:hover {
   background-color: #6778f8;
 }
-button > .sessionstate {
-  text-transform: lowercase;
-}
 
 input:not([type=radio]), select {
   background-color: #252525;
@@ -200,6 +197,102 @@ form .actions .right {
 form .actions button, form .actions a {
   margin: 10px 0;
 }
+form button.clean {
+  border: none;
+  height: auto;
+  color: #FFFFFF;
+  text-align: left;
+  text-transform: unset;
+  display: flex;
+  padding: 15px;
+}
+form button.clean:hover {
+  border: none;
+  background-color: #252525;
+}
+form button.clean * {
+  font-weight: 300;
+}
+form .user-selection-list {
+  margin-bottom: 80px;
+}
+form button.user-selection .profile-image {
+  width: 100px;
+  height: 100px;
+  background-image: url("/resources/images/icon-user-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-dark@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-dark-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection .sessionstate {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border-radius: 20px;
+  border-color: #595959;
+  border-style: solid;
+  border-width: 1px;
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+}
+form button.user-selection .sessionstate.sessionstate-0 {
+  background-color: #138D00;
+}
+form button.user-selection .sessionstate.sessionstate-1 {
+  background-color: #BC372E;
+}
+form button.user-selection > div {
+  position: relative;
+}
+form button.user-selection > div.names {
+  margin: 15px;
+}
+form button.user-selection > div.names .displayname {
+  font-size: 1.4rem;
+}
+form button.user-selection > div.names .loginname {
+  color: #898989;
+}
+.user-selection + form button.other-user {
+  margin-top: 80px;
+}
+form button.other-user .other-user-image {
+  width: 100px;
+  height: 75px;
+  background-image: url("/resources/images/icon-newuser-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user:hover .other-user-image {
+  background-image: url("/resources/images/icon-newuser-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user > div:nth-of-type(2) {
+  margin: 15px;
+  font-size: 1.4rem;
+}
 
 #copy-secret {
   visibility: hidden;
@@ -209,11 +302,11 @@ form .actions button, form .actions a {
 #qrcode {
   text-align: center;
 }
-#qrcode svg rect[style*="fill:white"] {
-  fill: #282828 !important;
+#qrcode svg rect.color {
+  fill: #FFFFFF;
 }
-#qrcode svg rect[style*="fill:black"] {
-  fill: #FFFFFF !important;
+#qrcode svg rect.bg-color {
+  fill: #282828;
 }
 
 #secret .copy {

internal/login/static/resources/themes/zitadel/css/dark.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCHW;EDIX;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBCLc;EDMd,OCLQ;;;ADQZ;EACI,OCTQ;EDUR,aClBS;EDmBT;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCvCW;EDwCX;EACA;EACA;;AAEA;EACI,OC5CY;;;ADgDpB;EACI;EACA,kBCrDc;EDsDd,OCpDW;EDqDX;EACA;EACA;EACA;EACA,QC/DU;EDgEV;EACA;EACA;;AACA;EACI,kBC7DY;ED8DZ;;AAGJ;EACI,kBCnEO;EDoEP,OCrEI;EDsEJ;;AACA;EACI,kBCtEQ;;AD0EhB;EACI;;;AAIR;EACI,kBC7EmB;ED8EnB,OCnFQ;EDoFR,QCzFU;ED0FV;EACA;EACA;;;AAIA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI,OC9GK;ED+GL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;;;AAKJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA","file":"dark.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCHW;EDIX;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBCQc;EDPd,OCQQ;;;ADLZ;EACI,OCIQ;EDHR,aClBS;EDmBT;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OC1BW;ED2BX;EACA;EACA;;AAEA;EACI,OC/BY;;;ADmCpB;EACI;EACA,kBCxCc;EDyCd,OCvCW;EDwCX;EACA;EACA;EACA;EACA,QC/DU;EDgEV;EACA;EACA;;AACA;EACI,kBChDY;EDiDZ;;AAGJ;EACI,kBCtDO;EDuDP,OCxDI;EDyDJ;;AACA;EACI,kBCzDQ;;;AD8DpB;EACI,kBC5DmB;ED6DnB,OClEQ;EDmER,QCrFU;EDsFV;EACA;EACA;;;AAIA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI,OC7FK;ED8FL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OC1HI;ED2HJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBC7HW;;ADgIf;EACI;;AAIR;EACI;;AAIA;EACI;EACA;EC1JV;;AACA;EDuJM;ICtJJ;IACA;;;AD4JQ;EC/JV;;AACA;ED8JU;IC7JR;IACA;;;ADiKI;EACI;EACA;EACA;EACA;EACA,cC5JO;ED6JP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OCxLP;;AD+LL;EACI;;AAEJ;EACI;EACA;EChNV;;AACA;ED6MM;IC5MJ;IACA;;;ADkNQ;ECrNV;;AACA;EDoNU;ICnNR;IACA;;;ADuNI;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MCjOI;;ADoOR;EACI,MCtOU;;;AD2Od;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA","file":"dark.css"}

internal/login/static/resources/themes/zitadel/css/light.css

@@ -95,7 +95,7 @@ h1 {
 }
 
 p {
-  font-width: 300;
+  font-weight: 300;
 }
 
 header {
@@ -151,9 +151,6 @@ button.primary {
 button.primary:hover {
   background-color: #6778f8;
 }
-button > .sessionstate {
-  text-transform: lowercase;
-}
 
 input:not([type=radio]), select {
   background-color: #252525;
@@ -200,6 +197,102 @@ form .actions .right {
 form .actions button, form .actions a {
   margin: 10px 0;
 }
+form button.clean {
+  border: none;
+  height: auto;
+  color: #FFFFFF;
+  text-align: left;
+  text-transform: unset;
+  display: flex;
+  padding: 15px;
+}
+form button.clean:hover {
+  border: none;
+  background-color: #252525;
+}
+form button.clean * {
+  font-weight: 300;
+}
+form .user-selection-list {
+  margin-bottom: 80px;
+}
+form button.user-selection .profile-image {
+  width: 100px;
+  height: 100px;
+  background-image: url("/resources/images/icon-user-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-dark@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-dark-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+form button.user-selection .sessionstate {
+  display: inline-block;
+  height: 20px;
+  width: 20px;
+  border-radius: 20px;
+  border-color: #595959;
+  border-style: solid;
+  border-width: 1px;
+  position: absolute;
+  bottom: 0px;
+  right: 10px;
+}
+form button.user-selection .sessionstate.sessionstate-0 {
+  background-color: #138D00;
+}
+form button.user-selection .sessionstate.sessionstate-1 {
+  background-color: #BC372E;
+}
+form button.user-selection > div {
+  position: relative;
+}
+form button.user-selection > div.names {
+  margin: 15px;
+}
+form button.user-selection > div.names .displayname {
+  font-size: 1.4rem;
+}
+form button.user-selection > div.names .loginname {
+  color: #898989;
+}
+.user-selection + form button.other-user {
+  margin-top: 80px;
+}
+form button.other-user .other-user-image {
+  width: 100px;
+  height: 75px;
+  background-image: url("/resources/images/icon-newuser-dark.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user:hover .other-user-image {
+  background-image: url("/resources/images/icon-newuser-dark-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  form button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-dark-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
+form button.other-user > div:nth-of-type(2) {
+  margin: 15px;
+  font-size: 1.4rem;
+}
 
 #copy-secret {
   visibility: hidden;
@@ -209,11 +302,11 @@ form .actions button, form .actions a {
 #qrcode {
   text-align: center;
 }
-#qrcode svg rect[style*="fill:white"] {
-  fill: #282828 !important;
+#qrcode svg rect.color {
+  fill: #FFFFFF;
 }
-#qrcode svg rect[style*="fill:black"] {
-  fill: #FFFFFF !important;
+#qrcode svg rect.bg-color {
+  fill: #282828;
 }
 
 #secret .copy {
@@ -282,6 +375,48 @@ html button.primary {
 html button.primary:hover {
   background-color: #6778f8;
 }
+html button.clean {
+  color: #282828;
+}
+html button.user-selection .profile-image {
+  background-image: url("/resources/images/icon-user-light.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.user-selection .profile-image {
+    background-image: url("/resources/images/icon-user-light@2x.png");
+    background-size: 100px 100px;
+  }
+}
+html button.user-selection:hover {
+  background-color: #252525;
+}
+html button.user-selection:hover .profile-image {
+  background-image: url("/resources/images/icon-user-light-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.user-selection:hover .profile-image {
+    background-image: url("/resources/images/icon-user-light-hover@2x.png");
+    background-size: 100px 100px;
+  }
+}
+html button.other-user .other-user-image {
+  background-image: url("/resources/images/icon-newuser-light.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.other-user .other-user-image {
+    background-image: url("/resources/images/icon-newuser-light@2x.png");
+    background-size: 100px 75px;
+  }
+}
+html button.other-user:hover .other-user-image {
+  background-image: url("/resources/images/icon-newuser-light-hover.png");
+}
+@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+  html button.other-user:hover .other-user-image {
+    background-image: url("/resources/images/icon-newuser-light-hover@2x.png");
+    background-size: 100px 75px;
+  }
+}
 html input {
   background-color: #FFFFFF;
   color: #282828;

internal/login/static/resources/themes/zitadel/css/light.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCHW;EDIX;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBCLc;EDMd,OCLQ;;;ADQZ;EACI,OCTQ;EDUR,aClBS;EDmBT;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OCvCW;EDwCX;EACA;EACA;;AAEA;EACI,OC5CY;;;ADgDpB;EACI;EACA,kBCrDc;EDsDd,OCpDW;EDqDX;EACA;EACA;EACA;EACA,QC/DU;EDgEV;EACA;EACA;;AACA;EACI,kBC7DY;ED8DZ;;AAGJ;EACI,kBCnEO;EDoEP,OCrEI;EDsEJ;;AACA;EACI,kBCtEQ;;AD0EhB;EACI;;;AAIR;EACI,kBC7EmB;ED8EnB,OCnFQ;EDoFR,QCzFU;ED0FV;EACA;EACA;;;AAIA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI,OC9GK;ED+GL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI;;AAGJ;EACI;;;AAKJ;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AE1MJ;EACI,kBDQQ;ECPR,ODMc;;ACJd;EACI;;AAGJ;EACI,ODDU;;ACId;EACI,kBDJI;ECKJ,ODJO;ECKP;;AAEA;EACI,kBDGa;ECFb;;AAGJ;EACI,kBDbG;ECcH,ODfA;ECgBA;EACA;;AACA;EACI,kBDjBI;;ACsBhB;EACI,kBDzBI;EC0BJ,OD3BU;;AC+BV;EACI;;AAGJ;EACI;;AAIR;EACI","file":"light.css"}
+{"version":3,"sourceRoot":"","sources":["../../scss/fonts.scss","../../scss/main.scss","../../scss/variables.scss","../../scss/light.scss"],"names":[],"mappings":"AACA;EACI;EACA;;AAIJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAEJ;EACI;EACA;EACA;EACA;;AAIJ;EACI;EACA;EACA;EACA;AAA6D;EAC7D;;AC5EJ;EACI;EACA,aCHW;EDIX;EACA;;;AAGJ;EACI;;;AAGJ;EACI,kBCQc;EDPd,OCQQ;;;ADLZ;EACI,OCIQ;EDHR,aClBS;EDmBT;EACA;EACA;;;AAGJ;EACI;;;AAGJ;EACI;;AAEA;EACI;EACA;EACA;EACA;EACA;;;AAIR;EACI;EACA;EACA;EACA;;;AAGJ;EACI,OC1BW;ED2BX;EACA;EACA;;AAEA;EACI,OC/BY;;;ADmCpB;EACI;EACA,kBCxCc;EDyCd,OCvCW;EDwCX;EACA;EACA;EACA;EACA,QC/DU;EDgEV;EACA;EACA;;AACA;EACI,kBChDY;EDiDZ;;AAGJ;EACI,kBCtDO;EDuDP,OCxDI;EDyDJ;;AACA;EACI,kBCzDQ;;;AD8DpB;EACI,kBC5DmB;ED6DnB,OClEQ;EDmER,QCrFU;EDsFV;EACA;EACA;;;AAIA;EACI;EACA;;AAGJ;EACI;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAIR;EACI,OC7FK;ED8FL;EACA;EACA;;AAEA;EACI;EACA;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;EACA;EACA,OC1HI;ED2HJ;EACA;EACA;EACA;;AAEA;EACI;EACA,kBC7HW;;ADgIf;EACI;;AAIR;EACI;;AAIA;EACI;EACA;EC1JV;;AACA;EDuJM;ICtJJ;IACA;;;AD4JQ;EC/JV;;AACA;ED8JU;IC7JR;IACA;;;ADiKI;EACI;EACA;EACA;EACA;EACA,cC5JO;ED6JP;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;;AAKR;EACI;;AAEA;EACI;;AAEA;EACI;;AAEJ;EACI,OCxLP;;AD+LL;EACI;;AAEJ;EACI;EACA;EChNV;;AACA;ED6MM;IC5MJ;IACA;;;ADkNQ;ECrNV;;AACA;EDoNU;ICnNR;IACA;;;ADuNI;EACI;EACA;;;AAKZ;EACI;EACA;;;AAGJ;EACI;;AAEA;EACI,MCjOI;;ADoOR;EACI,MCtOU;;;AD2Od;EACI;EACA;;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;AAAkB;EAClB;EACA;EACA;EACA;EACA;EACA;EACA;AAEA;EACA;AACA;EACA;AAEA;EACA;AAEA;EACA;;;AEtSJ;EACI,kBDqBQ;ECpBR,ODmBc;;ACjBd;EACI;;AAGJ;EACI,ODYU;;ACTd;EACI,kBDSI;ECRJ,ODSO;ECRP;;AAEA;EACI,kBDmBa;EClBb;;AAGJ;EACI;EACA,ODFA;ECGA;EACA;;AACA;EACI,kBDJI;;ACQZ;EACI,ODZM;;ACgBN;EDxBV;;AACA;ECuBU;IDtBR;IACA;;;ACyBQ;EACI,kBDfO;;ACiBP;ED/Bd;;AACA;EC8Bc;ID7BZ;IACA;;;ACmCQ;EDtCV;;AACA;ECqCU;IDpCR;IACA;;;ACwCY;ED3Cd;;AACA;EC0Cc;IDzCZ;IACA;;;AC+CA;EACI,kBD1CI;EC2CJ,OD5CU;;ACgDV;EACI;;AAGJ;EACI;;AAIR;EACI","file":"light.css"}

internal/login/static/templates/change_password.html

@@ -6,6 +6,8 @@
 
 <form action="{{ changePasswordUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
     <div class="fields">

internal/login/static/templates/change_password_done.html

@@ -6,6 +6,8 @@
 
 <form action="{{ loginUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
 

internal/login/static/templates/init_password.html

@@ -6,6 +6,8 @@
 
 <form action="{{ initPasswordUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
     <input type="hidden" name="userID" value="{{ .UserID }}" />
 

internal/login/static/templates/init_password_done.html

@@ -5,6 +5,8 @@
 <p>{{t "PasswordSetDone.Description"}}</p>
 <form action="{{ loginUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
     <div class="actions">

internal/login/static/templates/init_user.html

@@ -6,6 +6,8 @@
 
 <form action="{{ initUserUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
     <input type="hidden" name="userID" value="{{ .UserID }}" />
 

internal/login/static/templates/init_user_done.html

@@ -5,6 +5,8 @@
 <p>{{t "InitUserDone.Description"}}</p>
 <form action="{{ loginUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
     <div class="actions">

internal/login/static/templates/login.html

@@ -4,14 +4,16 @@
 <h1>{{t "Login.Title"}}</h1>
 <p>{{t "Login.Description"}}</p>
 
-<form action="{{ usernameUrl }}" method="POST">
+<form action="{{ loginNameUrl }}" method="POST">
+
+    {{ .CSRF }}
 
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
     <div class="fields">
         <div class="field">
-            <label class="label" for="username">{{t "Login.Loginname"}}</label>
-            <input class="input" type="text" id="username" name="username" placeholder="{{t "Login.LoginnamePlaceHolder"}}" value="{{ .UserName }}" autocomplete="username" autofocus required>
+            <label class="label" for="loginName">{{t "Login.Loginname"}}</label>
+            <input class="input" type="text" id="loginName" name="loginName" placeholder="{{t "Login.LoginnamePlaceHolder"}}" value="{{ .LoginName }}" autocomplete="username" autofocus required>
         </div>
     </div>
 

internal/login/static/templates/logout_done.html

@@ -5,6 +5,8 @@
 <p>{{t "LogoutDone.Description"}}</p>
 <form action="{{ loginUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <div class="actions">
         <button class="primary right" type="submit">{{t "Actions.Login"}}</button>
     </div>

internal/login/static/templates/mail_verification.html

@@ -6,6 +6,8 @@
 
 <form action="{{ mailVerificationUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
     <input type="hidden" name="userID" value="{{ .UserID }}" />
 

internal/login/static/templates/mail_verified.html

@@ -6,6 +6,8 @@
 
 <form action="{{ loginUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
 

internal/login/static/templates/mfa_init_done.html

@@ -6,6 +6,8 @@
 
 <form action="{{ loginUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
     <input type="hidden" name="mfaType" value="{{ .MfaType }}" />
 

internal/login/static/templates/mfa_init_verify.html

@@ -6,6 +6,8 @@
 
 <form action="{{ mfaInitVerifyUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
     <input type="hidden" name="mfaType" value="{{ .MfaType }}" />
     <input type="hidden" name="url" value="{{ .Url }}" />
@@ -21,7 +23,7 @@
                 <span class="label" for="secret">{{t "MfaInitVerify.Secret"}}</span>
                 <span class="input" id="secret">
                     {{.Secret}}
-                    <span class="copy material-icons" onclick="copyToClipboard('{{ .Secret }}')">content_copy</span>
+                    <span class="copy material-icons" data-copy="{{ .Secret }}" >content_copy</span>
                 </span>
             </div>
             <div class="field">
@@ -36,12 +38,7 @@
     </div>
 </form>
 
-<script>
-    const copyToClipboard = str => {
-        navigator.clipboard.writeText(str);
-    }
-</script>
-
+<script src="{{ resourceUrl "scripts/copy_to_clipboard.js" }}"></script>
 
 {{template "main-bottom" .}}
  

internal/login/static/templates/mfa_prompt.html

@@ -5,6 +5,8 @@
 
 <form action="{{ mfaPromptUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
     
     <div class="fields">

internal/login/static/templates/mfa_verify.html

@@ -6,6 +6,8 @@
 
 <form action="{{ mfaVerifyUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
     <input type="hidden" name="mfaType" value="{{ .SelectedMfaProvider }}" />
 

internal/login/static/templates/password.html

@@ -5,8 +5,10 @@
 
 <form action="{{ passwordUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
-    <input type="hidden" name="username" value="{{ .UserName }}" />
+    <input type="hidden" name="loginName" value="{{ .LoginName }}" />
 
     <div class="fields">
         <div class="field">
@@ -19,7 +21,7 @@
 
     <div class="actions">
         <button class="primary right" type="submit">{{t "Actions.Next"}}</button>
-        <a href="{{ usernameChangeUrl .AuthReqID }}">
+        <a href="{{ loginNameChangeUrl .AuthReqID }}">
             <button class="secondary" type="button">{{t "Actions.Back"}}</button>
         </a>
         <a href="{{ passwordResetUrl .AuthReqID }}">

internal/login/static/templates/password_reset_done.html

@@ -5,6 +5,8 @@
 <p>{{t "PasswordResetDone.Description"}}</p>
 <form action="{{ loginUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
     <div class="actions">

internal/login/static/templates/register.html

@@ -5,6 +5,8 @@
 
 <form action="{{ registrationUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
     <div class="fields">

internal/login/static/templates/select_user.html

@@ -6,17 +6,32 @@
 
 <form action="{{ userSelectionUrl }}" method="POST">
 
+    {{ .CSRF }}
+
     <input type="hidden" name="authRequestID" value="{{ .AuthReqID }}" />
 
     <div class="actions">
-        {{ range $user := .Users }}
-        {{ $sessionState := (t (printf "UserSelection.SessionState%v" $user.UserSessionState)) }}
-        <button type="submit" name="userID" value="{{$user.UserID}}" class="primary">
-            <span class="username">{{$user.UserName}}</span>
-            <span class="sessionstate">({{$sessionState}})</span>
-        </button>
+        {{ if .Users }}
+        <div class="user-selection-list">
+            {{ range $user := .Users }}
+            {{ $sessionState := (printf "sessionstate-%v" $user.UserSessionState) }}
+            <button type="submit" name="userID" value="{{$user.UserID}}" class="clean user-selection">
+                <div>
+                    <div class="profile-image"></div>
+                    <div class="sessionstate {{$sessionState}}"></div>
+                </div>
+                <div class="names">
+                    <div class="displayname">{{$user.DisplayName}}</div>
+                    <div class="loginname">{{$user.LoginName}}</div>
+                </div>
+            </button>
+            {{ end }}
+        </div>
         {{ end }}
-        <button type="submit" name="userID" value="0" class="primary">{{t "UserSelection.OtherUser"}}</button>
+        <button type="submit" name="userID" value="0" class="clean other-user">
+            <div class="other-user-image"></div>
+            <div>{{t "UserSelection.OtherUser"}}</div>
+        </button>
     </div>
 </form>