[Web] rearrange login buttons

data/web/css/build/014-mailcow.css

@@ -81,7 +81,7 @@ body {
   align-items: center;
   padding: 0 10px !important;
 }
-.navbar-fixed-bottom .navbar-collapse, 
+.navbar-fixed-bottom .navbar-collapse,
 .navbar-fixed-top .navbar-collapse {
   max-height: 1000px
 }
@@ -143,18 +143,18 @@ body {
   }
 }
 @keyframes blink {
-  50% { 
-    color: transparent 
+  50% {
+    color: transparent
   }
 }
-.loader-dot { 
-  animation: 1s blink infinite 
+.loader-dot {
+  animation: 1s blink infinite
 }
-.loader-dot:nth-child(2) { 
-  animation-delay: 250ms 
+.loader-dot:nth-child(2) {
+  animation-delay: 250ms
 }
-.loader-dot:nth-child(3) { 
-  animation-delay: 500ms 
+.loader-dot:nth-child(3) {
+  animation-delay: 500ms
 }
 
 pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}
@@ -220,13 +220,13 @@ legend {
 }
 .haveibeenpwned {
   cursor: pointer;
-  -webkit-user-select: none;  
-  -moz-user-select: none;    
-  -ms-user-select: none;      
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
   user-select: none;
 }
 .full-width-select {
-  width: 100%!important;  
+  width: 100%!important;
 }
 .tooltip {
   font-family: inherit;
@@ -350,7 +350,7 @@ code {
 .caret {
   transform: rotate(0deg);
 }
-a[aria-expanded='true'] > .caret, 
+a[aria-expanded='true'] > .caret,
 button[aria-expanded='true'] > .caret {
   transform: rotate(-180deg);
 }
@@ -360,7 +360,7 @@ button[aria-expanded='true'] > .caret {
 }
 .list-group-header {
   background: #f7f7f7;
-} 
+}
 
 
 .bg-primary, .alert-primary, .btn-primary {
@@ -387,12 +387,12 @@ button[aria-expanded='true'] > .caret {
 }
 .btn.btn-outline-secondary {
   color: #000000 !important;
-  border-color: #cfcfcf !important;  
+  border-color: #cfcfcf !important;
 }
 .btn-check:checked+.btn-outline-secondary, .btn-check:active+.btn-outline-secondary, .btn-outline-secondary:active, .btn-outline-secondary.active, .btn-outline-secondary.dropdown-toggle.show {
     background-color: #f0f0f0 !important;
 }
-.btn-check:checked+.btn-light, .btn-check:active+.btn-light, .btn-light:active, .btn-light.active, .show>.btn-light.dropdown-toggle {    
+.btn-check:checked+.btn-light, .btn-check:active+.btn-light, .btn-light:active, .btn-light.active, .show>.btn-light.dropdown-toggle {
     color: #fff;
     background-color: #555;
     background-image: none;
@@ -410,4 +410,26 @@ button[aria-expanded='true'] > .caret {
 .badge.bg-danger > a {
     color: #fff !important;
     text-decoration: none;
+}
+
+.hr-title {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: 20px 0;
+}
+
+.hr-title::before,
+.hr-title::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid #ccc;
+}
+
+.hr-title:not(:empty)::before {
+  margin-right: 10px;
+}
+
+.hr-title:not(:empty)::after {
+  margin-left: 10px;
 }

data/web/lang/lang.cs-cz.json

@@ -747,7 +747,7 @@
         "fido2_webauthn": "FIDO2/WebAuthn Login",
         "login": "Přihlásit",
         "mobileconfig_info": "Ke stažení profilového souboru se přihlaste jako uživatel schránky.",
-        "other_logins": "Přihlášení klíčem",
+        "other_logins": "nebo přihlásit s",
         "password": "Heslo",
         "username": "Uživatelské jméno",
         "back_to_mailcow": "Zpět do mailcow",

data/web/lang/lang.da-dk.json

@@ -604,7 +604,7 @@
         "fido2_webauthn": "FIDO2/WebAuthn Login",
         "login": "Login",
         "mobileconfig_info": "Log ind som postkassebruger for at downloade den anmodede Apple-forbindelsesprofil.",
-        "other_logins": "Nøgle login",
+        "other_logins": "eller log ind med",
         "password": "Adgangskode",
         "username": "Brugernavn"
     },

data/web/lang/lang.de-de.json

@@ -772,7 +772,7 @@
         "mobileconfig_info": "Bitte als Mailbox-Benutzer einloggen, um das Verbindungsprofil herunterzuladen.",
         "new_password": "Neues Passwort",
         "new_password_confirm": "Neues Passwort bestätigen",
-        "other_logins": "Key Login",
+        "other_logins": "oder anmelden mit",
         "password": "Passwort",
         "reset_password": "Passwort zurücksetzen",
         "request_reset_password": "Passwortänderung anfordern",

data/web/lang/lang.en-gb.json

@@ -235,7 +235,7 @@
         "iam_redirect_url": "Redirect Url",
         "iam_rest_flow": "Mailpassword Flow",
         "iam_server_url": "Server Url",
-        "iam_sso": "SSO",
+        "iam_sso": "Single Sign-On",
         "iam_sync_interval": "Sync / Import interval (min)",
         "iam_test_connection": "Test Connection",
         "iam_token_url": "Token endpoint",
@@ -810,7 +810,7 @@
         "mobileconfig_info": "Please login as mailbox user to download the requested Apple connection profile.",
         "new_password": "New Password",
         "new_password_confirm": "Confirm new password",
-        "other_logins": "Key login",
+        "other_logins": "or login with",
         "password": "Password",
         "reset_password": "Reset Password",
         "request_reset_password": "Request password change",

data/web/lang/lang.fr-fr.json

@@ -695,7 +695,7 @@
         "fido2_webauthn": "FIDO2/WebAuthn Login",
         "login": "Connexion",
         "mobileconfig_info": "Veuillez vous connecter en tant qu’utilisateur de la boîte de réception pour télécharger le profil de connexion Apple demandé.",
-        "other_logins": "Clé d'authentification",
+        "other_logins": "ou se connecter avec",
         "password": "Mot de passe",
         "username": "Nom d'utilisateur",
         "back_to_mailcow": "Revenir sur mailcow",

data/web/lang/lang.it-it.json

@@ -712,7 +712,7 @@
         "fido2_webauthn": "FIDO2/WebAuthn Login",
         "login": "Login",
         "mobileconfig_info": "Please login as mailbox user to download the requested Apple connection profile.",
-        "other_logins": "Key login",
+        "other_logins": "o accedi con",
         "password": "Password",
         "username": "Nome utente",
         "request_reset_password": "Richiesta di modifica della password",

data/web/lang/lang.lt-lt.json

@@ -251,7 +251,7 @@
     "login": {
         "fido2_webauthn": "FIDO2/WebAuthn Prisijungimas",
         "login": "Prisijungti",
-        "other_logins": "Prisijungimas raktu",
+        "other_logins": "ar prisijungti su",
         "password": "Slaptažodis",
         "username": "Naudotojo vardas",
         "mobileconfig_info": "Prašome prisijungti kaip pašto dėžutės vartotojui, kad galėtumėte atsisiųsti pageidaujamą „Apple“ ryšio profilį."

data/web/lang/lang.lv-lv.json

@@ -333,7 +333,7 @@
         "username": "Lietotājvārds",
         "fido2_webauthn": "FIDO/WebAuthn pieteikšanās",
         "mobileconfig_info": "Lūgums pieteikties kā pastkastes lietotājam, lai lejupielādētu pieprasīto Apple savienojuma profilu.",
-        "other_logins": "Pieteikšanās ar atslēgu"
+        "other_logins": "vai pieslēgties ar"
     },
     "mailbox": {
         "action": "Rīcība",

data/web/lang/lang.nl-nl.json

@@ -663,7 +663,7 @@
         "fido2_webauthn": "FIDO2/WebAuthn Login",
         "login": "Aanmelden",
         "mobileconfig_info": "Log in als mailboxgebruiker om het Apple-verbindingsprofiel te downloaden.",
-        "other_logins": "Meld aan met key",
+        "other_logins": "of aanmelden met",
         "password": "Wachtwoord",
         "username": "Gebruikersnaam"
     },

data/web/lang/lang.pt-br.json

@@ -765,7 +765,7 @@
         "mobileconfig_info": "Faça login como usuário da mailbox para baixar o perfil de conexão Apple solicitado.",
         "new_password": "Nova senha",
         "new_password_confirm": "Confirmar nova senha",
-        "other_logins": "Login com chave",
+        "other_logins": "ou faça login com",
         "password": "Senha",
         "reset_password": "Recuperar a senha",
         "request_reset_password": "Solicitar troca de senha",

data/web/lang/lang.ro-ro.json

@@ -677,7 +677,7 @@
         "fido2_webauthn": "FIDO2/WebAuthn Login",
         "login": "Autentificare",
         "mobileconfig_info": "Autentificați-vă cu adresa de email pentru a descărca profilul de conexiune Apple.",
-        "other_logins": "Autentificare cu cheie",
+        "other_logins": "sau autentificare cu",
         "password": "Parolă",
         "username": "Nume de utilizator"
     },

data/web/lang/lang.ru-ru.json

@@ -770,7 +770,7 @@
         "mobileconfig_info": "Пожалуйста, войдите в систему как пользователь почтового аккаунта для загрузки профиля подключения Apple.",
         "new_password": "Новый пароль",
         "new_password_confirm": "Повторите новый пароль",
-        "other_logins": "Вход с помощью ключа",
+        "other_logins": "или войти с",
         "password": "Пароль",
         "request_reset_password": "Запросить восстановление пароля",
         "reset_password": "Восстановление пароля",

data/web/lang/lang.sk-sk.json

@@ -707,7 +707,7 @@
         "fido2_webauthn": "FIDO2/WebAuthn Login",
         "login": "Prihlásenie",
         "mobileconfig_info": "Prosím, prihláste sa ako mailový používateľ pre stiahnutie požadovaného Apple profilu.",
-        "other_logins": "Prihlásenie kľúčom",
+        "other_logins": "alebo prihlásiť sa s",
         "password": "Heslo",
         "username": "Používateľské meno alebo email"
     },

data/web/lang/lang.sv-se.json

@@ -621,7 +621,7 @@
         "fido2_webauthn": "FIDO2/WebAuthn Login",
         "login": "Logga in",
         "mobileconfig_info": "Logga in som en användare av brevlåda för att ladda ner den begärda Apple-anslutningsprofilen.",
-        "other_logins": "Loggain med nyckel",
+        "other_logins": "eller logga in med",
         "password": "Lösenord",
         "username": "Användarnamn"
     },

data/web/lang/lang.tr-tr.json

@@ -895,7 +895,7 @@
         "login": "Giriş",
         "password": "Şifre",
         "username": "Kullanıcı Adı",
-        "other_logins": "Anahtar girişi"
+        "other_logins": "veya ile giriş yap"
     },
     "success": {
         "bcc_saved": "BCC harita girişi kaydedildi",

data/web/lang/lang.uk-ua.json

@@ -722,7 +722,7 @@
     "login": {
         "fido2_webauthn": "FIDO2/WebAuthn Login",
         "login": "Увійти",
-        "other_logins": "Вхід за допомогою ключа",
+        "other_logins": "або увійти з",
         "password": "Пароль",
         "username": "Ім'я користувача",
         "delayed": "Вхід був затриманий на %s секунд.",

data/web/lang/lang.zh-cn.json

@@ -738,7 +738,7 @@
         "fido2_webauthn": "使用 FIDO2/WebAuthn Login 登录",
         "login": "登录",
         "mobileconfig_info": "请使用邮箱用户登录以下载 Apple 连接描述文件。",
-        "other_logins": "Key 登录",
+        "other_logins": "或通过以下方式登录",
         "password": "密码",
         "username": "用户名",
         "forgot_password": "> 忘记密码？",

data/web/lang/lang.zh-tw.json

@@ -731,7 +731,7 @@
         "fido2_webauthn": "FIDO2/WebAuthn Login",
         "login": "登入",
         "mobileconfig_info": "請使用信箱使用者登入以下載 Apple 連接描述檔案。",
-        "other_logins": "金鑰登入",
+        "other_logins": "或透過以下方式登入",
         "password": "密碼",
         "username": "使用者名稱",
         "back_to_mailcow": "返回至mailcow",

data/web/templates/index.twig

@@ -41,16 +41,7 @@
             </div>
           </div>
           <div class="d-flex justify-content-between mt-4" style="position: relative">
-            <div class="btn-group">
-              <button type="submit" class="btn btn-xs-lg btn-success" value="Login">{{ lang.login.login }}</button>
-              <button type="button" class="btn btn-xs-lg btn-success dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button>
-              <ul class="dropdown-menu">
-                <li><a class="dropdown-item" href="#" id="fido2-login"><i class="bi bi-shield-fill-check"></i> {{ lang.login.fido2_webauthn }}</a></li>
-                {% if has_iam_sso %}
-                <li><a class="dropdown-item" href="/?iam_sso=1"><i class="bi bi-cloud-arrow-up-fill"></i> {{ lang.admin.iam_sso }}</a></li>
-                {% endif %}
-              </ul>
-            </div>
+            <button type="submit" class="btn btn-xs-lg btn-success" value="Login">{{ lang.login.login }}</button>
             {% if not oauth2_request %}
             <div class="d-grid d-sm-block">
             <button type="button" {% if available_languages|length == 1 %}disabled="true"{% endif %} class="btn btn-secondary ms-auto dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
@@ -69,9 +60,16 @@
             {% endif %}
           </div>
         </form>
-        <div class="mt-3 mb-4">
+        <div class="mt-3">
           <a href="/reset-password">{{ lang.login.forgot_password }}</a>
         </div>
+        <div class="hr-title mt-5"><strong>{{ lang.login.other_logins }}</strong></div>
+        <div class="d-flex flex-column align-items-center">
+          <a class="btn btn-xs-lg btn-secondary w-100" style="max-width: 400px;" href="#" id="fido2-login"><i class="bi bi-shield-fill-check"></i> {{ lang.login.fido2_webauthn }}</a>
+          {% if has_iam_sso %}
+          <a class="btn btn-xs-lg btn-secondary w-100 mt-2" style="max-width: 400px;" href="/?iam_sso=1"><i class="bi bi-cloud-arrow-up-fill"></i> {{ lang.admin.iam_sso }}</a>
+          {% endif %}
+        </div>
         {% if login_delay %}
         <p><div class="my-4 alert alert-info">{{ lang.login.delayed|format(login_delay) }}</b></div></p>
         {% endif %}