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>

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" .}}