fix(login): mfa prompt UI improvements, fix register field validation, email validation (#4672)

* 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>
2025-01-11 17:33:40 +00:00 · 2022-11-17 13:25:09 +01:00 · 2022-11-17 13:25:09 +01:00 · 2a8dfab192
commit 2a8dfab192
parent 7db87f4646
17 changed files with 240 additions and 180 deletions
--- a/internal/api/ui/login/static/resources/scripts/change_password_check.js
+++ b/internal/api/ui/login/static/resources/scripts/change_password_check.js
@ -1,16 +1,14 @@
 function CheckChangePwPolicy() {
-    let policyElement = document.getElementById("change-new-password");
-    let pwNew = policyElement.value;
-    let pwNewConfirmation = document.getElementById("change-password-confirmation").value;
+  const pwNew = document.getElementById("change-new-password");
+  const pwNewValue = pwNew.value;
+  const pwNewConfirmation = document.getElementById(
+    "change-password-confirmation"
+  );
+  const pwNewConfirmationValue = pwNewConfirmation.value;

-    if (ComplexityPolicyCheck(policyElement, pwNew, pwNewConfirmation) === false) {
-        policyElement.setAttribute("color", "warn");
-        return false;
-    } else {
-        policyElement.setAttribute("color", "primary");
-    }
+  ComplexityPolicyCheck(pwNew, pwNewConfirmation);

-    return pwNew === pwNewConfirmation;
+  return pwNewValue == pwNewConfirmationValue;
 }

 let button = document.getElementById("change-password-button");
--- a/internal/api/ui/login/static/resources/scripts/init_password_check.js
+++ b/internal/api/ui/login/static/resources/scripts/init_password_check.js
@ -1,13 +1,12 @@
 function CheckInitPwPolicy() {
-    let policyElement = document.getElementById("password");
-    let pwNew = policyElement.value;
-    let pwNewConfirmation = document.getElementById("passwordconfirm").value;
+  const pwNew = document.getElementById("password");
+  const pwNewValue = pwNew.value;
+  const pwNewConfirmation = document.getElementById("passwordconfirm");
+  const pwNewConfirmationValue = pwNewConfirmation.value;

-    if (ComplexityPolicyCheck(policyElement, pwNew, pwNewConfirmation) === false) {
-        return false;
-    }
+  ComplexityPolicyCheck(pwNew, pwNewConfirmation);

-    return pwNew == pwNewConfirmation;
+  return pwNewValue == pwNewConfirmationValue;
 }

 let button = document.getElementById("init-button");
--- a/internal/api/ui/login/static/resources/scripts/mfa.js
+++ b/internal/api/ui/login/static/resources/scripts/mfa.js
@ -0,0 +1,20 @@
+validate();
+
+document.querySelectorAll('input[name="provider"]').forEach((input) => {
+  input.addEventListener("change", validate);
+});
+
+function validate() {
+  const checkedMfaMethod = document.querySelector(
+    'input[name="provider"]:checked'
+  );
+  const submitButton = document.querySelector(
+    'button.lgn-raised-button[type="submit"]'
+  );
+
+  if (checkedMfaMethod && submitButton) {
+    submitButton.disabled = false;
+  } else if (submitButton) {
+    submitButton.disabled = true;
+  }
+}
--- a/internal/api/ui/login/static/resources/scripts/password_policy_check.js
+++ b/internal/api/ui/login/static/resources/scripts/password_policy_check.js
@ -1,77 +1,93 @@
-function ComplexityPolicyCheck(policyElement, pwNew, pwNewConfirmation) {
-    let minLength = policyElement.dataset.minlength;
-    let upperRegex = policyElement.dataset.hasUppercase;
-    let lowerRegex = policyElement.dataset.hasLowercase;
-    let numberRegex = policyElement.dataset.hasNumber;
-    let symbolRegex = policyElement.dataset.hasSymbol;
+function ComplexityPolicyCheck(passwordElement, passwordConfirmationElement) {
+  const minLength = passwordElement.dataset.minlength;
+  const upperRegex = passwordElement.dataset.hasUppercase;
+  const lowerRegex = passwordElement.dataset.hasLowercase;
+  const numberRegex = passwordElement.dataset.hasNumber;
+  const symbolRegex = passwordElement.dataset.hasSymbol;

-    let invalid = 0;
+  let invalid = 0;

-    let minlengthelem = document.getElementById('minlength');
-    if (pwNew.length >= minLength) {
-        ValidPolicy(minlengthelem);
+  const minLengthElem = document.getElementById("minlength");
+  if (passwordElement.value.length >= minLength) {
+    ValidPolicy(minLengthElem);
+  } else {
+    InvalidPolicy(minLengthElem);
+    invalid++;
+  }
+
+  const upper = document.getElementById("uppercase");
+  if (upperRegex !== "") {
+    if (RegExp(upperRegex).test(passwordElement.value)) {
+      ValidPolicy(upper);
    } else {
-        InvalidPolicy(minlengthelem);
-        invalid++;
+      InvalidPolicy(upper);
+      invalid++;
    }
-    let upper = document.getElementById('uppercase');
-    if (upperRegex !== "") {
-        if (RegExp(upperRegex).test(pwNew)) {
-            ValidPolicy(upper);
-        } else {
-            InvalidPolicy(upper);
-            invalid++;
-        }
-    }
-    let lower = document.getElementById('lowercase');
-    if (lowerRegex !== "") {
-        if (RegExp(lowerRegex).test(pwNew)) {
-            ValidPolicy(lower);
-        } else {
-            InvalidPolicy(lower);
-            invalid++;
-        }
-    }
-    let number = document.getElementById('number');
-    if (numberRegex !== "") {
-        if (RegExp(numberRegex).test(pwNew)) {
-            ValidPolicy(number);
-        } else {
-            InvalidPolicy(number);
-            invalid++;
-        }
-    }
-    let symbol = document.getElementById('symbol');
-    if (symbolRegex !== "") {
-        if (RegExp(symbolRegex).test(pwNew)) {
-            ValidPolicy(symbol);
-        } else {
-            InvalidPolicy(symbol);
-            invalid++;
-        }
-    }
-    let confirmation = document.getElementById('confirmation');
-    if (pwNew === pwNewConfirmation && pwNewConfirmation !== "" ) {
-        ValidPolicy(confirmation);
+  }
+
+  const lower = document.getElementById("lowercase");
+  if (lowerRegex !== "") {
+    if (RegExp(lowerRegex).test(passwordElement.value)) {
+      ValidPolicy(lower);
    } else {
-        InvalidPolicy(confirmation);
-        invalid++;
+      InvalidPolicy(lower);
+      invalid++;
    }
-    return invalid===0;
+  }
+
+  const number = document.getElementById("number");
+  if (numberRegex !== "") {
+    if (RegExp(numberRegex).test(passwordElement.value)) {
+      ValidPolicy(number);
+    } else {
+      InvalidPolicy(number);
+      invalid++;
+    }
+  }
+
+  const symbol = document.getElementById("symbol");
+  if (symbolRegex !== "") {
+    if (RegExp(symbolRegex).test(passwordElement.value)) {
+      ValidPolicy(symbol);
+    } else {
+      InvalidPolicy(symbol);
+      invalid++;
+    }
+  }
+
+  const confirmation = document.getElementById("confirmation");
+  if (
+    passwordElement.value === passwordConfirmationElement.value &&
+    passwordConfirmationElement.value !== ""
+  ) {
+    ValidPolicy(confirmation);
+    passwordConfirmationElement.setAttribute("color", "primary");
+  } else {
+    InvalidPolicy(confirmation);
+    passwordConfirmationElement.setAttribute("color", "warn");
+  }
+
+  if (invalid > 0) {
+    passwordElement.setAttribute("color", "warn");
+    return false;
+  } else {
+    passwordElement.setAttribute("color", "primary");
+    return true;
+  }
 }

 function ValidPolicy(element) {
-    element.classList.remove('invalid');
-    element.getElementsByTagName('i')[0].classList.remove('lgn-icon-times-solid');
-    element.getElementsByTagName('i')[0].classList.remove('lgn-warn');
-    element.getElementsByTagName('i')[0].classList.add('lgn-icon-check-solid');
-    element.getElementsByTagName('i')[0].classList.add('lgn-valid');
+  element.classList.remove("invalid");
+  element.getElementsByTagName("i")[0].classList.remove("lgn-icon-times-solid");
+  element.getElementsByTagName("i")[0].classList.remove("lgn-warn");
+  element.getElementsByTagName("i")[0].classList.add("lgn-icon-check-solid");
+  element.getElementsByTagName("i")[0].classList.add("lgn-valid");
 }

 function InvalidPolicy(element) {
-    element.classList.add('invalid');
-    element.getElementsByTagName('i')[0].classList.remove('lgn-valid');
-    element.getElementsByTagName('i')[0].classList.remove('lgn-icon-check-solid');
-    element.getElementsByTagName('i')[0].classList.add('lgn-warn');
-    element.getElementsByTagName('i')[0].classList.add('lgn-icon-times-solid');
+  element.classList.add("invalid");
+  element.getElementsByTagName("i")[0].classList.remove("lgn-valid");
+  element.getElementsByTagName("i")[0].classList.remove("lgn-icon-check-solid");
+  element.getElementsByTagName("i")[0].classList.add("lgn-warn");
+  element.getElementsByTagName("i")[0].classList.add("lgn-icon-times-solid");
 }
--- a/internal/api/ui/login/static/resources/scripts/register_check.js
+++ b/internal/api/ui/login/static/resources/scripts/register_check.js
@ -1,16 +1,14 @@
 function CheckRegisterPwPolicy() {
-    let policyElement = document.getElementById("register-password");
-    let pwNew = policyElement.value;
-    let pwNewConfirmation = document.getElementById("register-password-confirmation").value;
+  const pwNew = document.getElementById("register-password");
+  const pwNewConfirmation = document.getElementById(
+    "register-password-confirmation"
+  );
+  const pwNewValue = pwNew.value;
+  const pwNewConfirmationValue = pwNewConfirmation.value;

-    if (ComplexityPolicyCheck(policyElement, pwNew, pwNewConfirmation) === false) {
-        policyElement.setAttribute("color", "warn");
-        return false;
-    } else {
-        policyElement.setAttribute("color", "primary");
-    }
+  ComplexityPolicyCheck(pwNew, pwNewConfirmation);

-    return pwNew == pwNewConfirmation;
+  return pwNewValue == pwNewConfirmationValue;
 }

 let button = document.getElementById("register-button");
--- a/internal/api/ui/login/static/resources/themes/scss/styles/container/container.scss
+++ b/internal/api/ui/login/static/resources/themes/scss/styles/container/container.scss
@ -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;
        }
      }
    }
--- a/internal/api/ui/login/static/resources/themes/scss/styles/input/input.scss
+++ b/internal/api/ui/login/static/resources/themes/scss/styles/input/input.scss
@ -23,5 +23,6 @@ select,
    max-width: 150px;
    overflow-x: hidden;
    text-overflow: ellipsis;
+    white-space: nowrap;
  }
 }
--- a/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_base.scss
+++ b/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_base.scss
@ -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);
-          }
-        }
      }
    }
  }
--- a/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_theme.scss
+++ b/internal/api/ui/login/static/resources/themes/scss/styles/mfa/mfa_theme.scss
@ -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);
+        }
      }
    }
  }
--- a/internal/api/ui/login/static/resources/themes/scss/styles/vars.scss
+++ b/internal/api/ui/login/static/resources/themes/scss/styles/vars.scss
@ -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);

--- a/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
+++ b/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css
@ -39,6 +39,7 @@
  --zitadel-color-background-900: rgb(142, 142, 142);
  --zitadel-color-background-contrast: rgb(0, 0, 0);
  --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;
@ -135,9 +136,10 @@
  --zitadel-color-background-900: rgb(23, 23, 23);
  --zitadel-color-background-contrast: rgb(255, 255, 255);
  --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);
  --zitadel-color-text-50: rgb(255, 255, 255);
@ -654,8 +656,14 @@ a.sub-formfield-link {
 .content-container .lgn-login-profile .lgn-names .lgn-displayname {
  margin: 0.5rem 1rem;
 }
+.content-container .lgn-login-profile .lgn-names .lgn-loginname {
+  min-width: 0;
+}
 .content-container .lgn-login-profile .lgn-names .lgn-loginname p {
-  margin: 0.5rem 1rem;
+  margin: 0.5rem 0.5rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .content-container .lgn-left-action {
  position: absolute;
@ -1147,31 +1155,31 @@ i {
  flex: 1;
  padding: 0 0.5rem;
 }
-.lgn-mfa-options .mfa input[type=radio] + label {
+.lgn-mfa-options .mfa label {
  display: flex;
  flex-direction: column;
  align-items: center;
+  position: relative;
 }
-.lgn-mfa-options .mfa input[type=radio] + label span {
+.lgn-mfa-options .mfa label input[type=radio] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.lgn-mfa-options .mfa label span {
  text-align: center;
 }
-.lgn-mfa-options .mfa input[type=radio] + label .mfa-img {
-  border: 1px solid var(--zitadel-color-input-border);
+.lgn-mfa-options .mfa label .mfa-img {
+  border-width: 1px;
+  border-style: solid;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
 }
-.lgn-mfa-options .mfa input[type=radio] + label .mfa-img:hover {
-  border: 1px solid var(--zitadel-color-input-border-active);
-}
-.lgn-mfa-options .mfa input[type=radio] {
-  display: none;
-}
-.lgn-mfa-options .mfa input[type=radio]:checked + label .mfa-img {
-  border: 1px solid var(--zitadel-color-primary);
-}

 footer {
  width: 100%;
@ -1622,8 +1630,14 @@ a.sub-formfield-link {
 .content-container .lgn-login-profile .lgn-names .lgn-displayname {
  margin: 0.5rem 1rem;
 }
+.content-container .lgn-login-profile .lgn-names .lgn-loginname {
+  min-width: 0;
+}
 .content-container .lgn-login-profile .lgn-names .lgn-loginname p {
-  margin: 0.5rem 1rem;
+  margin: 0.5rem 0.5rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .content-container .lgn-left-action {
  position: absolute;
@ -2115,31 +2129,31 @@ i {
  flex: 1;
  padding: 0 0.5rem;
 }
-.lgn-mfa-options .mfa input[type=radio] + label {
+.lgn-mfa-options .mfa label {
  display: flex;
  flex-direction: column;
  align-items: center;
+  position: relative;
 }
-.lgn-mfa-options .mfa input[type=radio] + label span {
+.lgn-mfa-options .mfa label input[type=radio] {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.lgn-mfa-options .mfa label span {
  text-align: center;
 }
-.lgn-mfa-options .mfa input[type=radio] + label .mfa-img {
-  border: 1px solid var(--zitadel-color-input-border);
+.lgn-mfa-options .mfa label .mfa-img {
+  border-width: 1px;
+  border-style: solid;
  border-radius: 0.5rem;
  padding: 1rem;
  display: flex;
  margin-bottom: 0.5rem;
  transition: all 0.2s ease;
 }
-.lgn-mfa-options .mfa input[type=radio] + label .mfa-img:hover {
-  border: 1px solid var(--zitadel-color-input-border-active);
-}
-.lgn-mfa-options .mfa input[type=radio] {
-  display: none;
-}
-.lgn-mfa-options .mfa input[type=radio]:checked + label .mfa-img {
-  border: 1px solid var(--zitadel-color-primary);
-}

@font-face {
  font-family: Aileron;
@ -2480,8 +2494,14 @@ i {
 .content-container .lgn-login-profile .lgn-names .lgn-displayname {
  margin: 0.5rem 1rem;
 }
+.content-container .lgn-login-profile .lgn-names .lgn-loginname {
+  min-width: 0;
+}
 .content-container .lgn-login-profile .lgn-names .lgn-loginname p {
-  margin: 0.5rem 1rem;
+  margin: 0.5rem 0.5rem;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 .content-container .lgn-left-action {
  position: absolute;
@ -3035,15 +3055,17 @@ ul li i.lgn-valid {
  background-color: var(--zitadel-color-success-background);
 }

-.lgn-mfa-options .mfa input[type=radio] + label .mfa-img {
+.lgn-mfa-options .mfa label input[type=radio]:hover + .mfa-img, .lgn-mfa-options .mfa label input[type=radio]:focus + .mfa-img {
+  background-color: var(--zitadel-color-card-hover);
+  border-color: var(--zitadel-color-input-border-hover);
+}
+.lgn-mfa-options .mfa label .mfa-img {
  border: 1px solid var(--zitadel-color-input-border);
-  background-color: var(--zitadel-color-input-background);
 }
-.lgn-mfa-options .mfa input[type=radio] + label .mfa-img:hover {
-  border: 1px solid var(--zitadel-color-input-border-hover);
-}
-.lgn-mfa-options .mfa input[type=radio]:checked + label .mfa-img {
-  border: 1px solid var(--zitadel-color-primary);
+.lgn-mfa-options .mfa label 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);
 }

 /*# sourceMappingURL=zitadel.css.map */
--- a/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css.map
+++ b/internal/api/ui/login/static/resources/themes/zitadel/css/zitadel.css.map
--- a/internal/api/ui/login/static/templates/external_not_found_option.html
+++ b/internal/api/ui/login/static/templates/external_not_found_option.html
@ -47,7 +47,7 @@

        <div class="lgn-field double">
            <label class="lgn-label" for="email">{{t "ExternalRegistrationUserOverview.EmailLabel"}}</label>
-            <input class="lgn-input" type="text" id="email" name="email" autocomplete="email" value="{{ .Email }}" required>
+            <input class="lgn-input" type="email" id="email" name="email" autocomplete="email" value="{{ .Email }}" required>
        </div>

        <div class="lgn-field double">
--- a/internal/api/ui/login/static/templates/external_register_overview.html
+++ b/internal/api/ui/login/static/templates/external_register_overview.html
@ -47,7 +47,7 @@

        <div class="lgn-field double">
            <label class="lgn-label" for="email">{{t "ExternalRegistrationUserOverview.EmailLabel"}}</label>
-            <input class="lgn-input" type="text" id="email" name="email" autocomplete="email" value="{{ .Email }}" required>
+            <input class="lgn-input" type="email" id="email" name="email" autocomplete="email" value="{{ .Email }}" required>
        </div>

        <div class="lgn-field double">
--- a/internal/api/ui/login/static/templates/mfa_prompt.html
+++ b/internal/api/ui/login/static/templates/mfa_prompt.html
@ -16,16 +16,15 @@
    {{ range $provider := .MFAProviders}} {{ $providerName := (t (printf
    "InitMFAPrompt.Provider%v" $provider)) }}
    <div class="mfa">
-      <input
-        id="{{ $provider }}"
-        type="radio"
-        name="provider"
-        value="{{ $provider }}"
-        required
-      />
-
-      <label for="{{ $provider }}"
-        >{{ if eq $provider 0 }}
+      <label>
+        <input
+          id="{{ $provider }}"
+          type="radio"
+          name="provider"
+          value="{{ $provider }}"
+          required
+        />
+        {{ if eq $provider 0 }}
        <div class="mfa-img">
          <img width="100px" height="100px" alt="OTP" src="{{ resourceUrl
          "images/mfa/mfa-otp.svg" }}" />
@ -66,4 +65,6 @@
  </div>
 </form>

+<script src="{{ resourceUrl "scripts/mfa.js" }}"></script>
+
 {{template "main-bottom" .}}
--- a/internal/api/ui/login/static/templates/register.html
+++ b/internal/api/ui/login/static/templates/register.html
@ -34,7 +34,7 @@

        <div class="lgn-field double">
            <label class="lgn-label" for="email">{{t "RegistrationUser.EmailLabel"}}</label>
-            <input class="lgn-input" type="text" id="email" name="email" autocomplete="email" value="{{ .Email }}" required>
+            <input class="lgn-input" type="email" id="email" name="email" autocomplete="email" value="{{ .Email }}" required>
        </div>

        {{if .ShowUsername}}
--- a/internal/api/ui/login/static/templates/register_org.html
+++ b/internal/api/ui/login/static/templates/register_org.html
@ -46,7 +46,7 @@
        {{end}}
        <div class="lgn-field">
            <label class="lgn-label" for="email">{{t "RegistrationOrg.EmailLabel"}}</label>
-            <input class="lgn-input" type="text" id="email" name="email" autocomplete="email" value="{{ .Email }}"
+            <input class="lgn-input" type="email" id="email" name="email" autocomplete="email" value="{{ .Email }}"
                autofocus required>
        </div>
       <div class="double-col">