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/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">

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

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

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

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