Oauth UI improvements

68publishers · Feb 27, 2024 · da34b5c · da34b5c
1 parent 731b3e0
commit da34b5c
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 30 deletions.
diff --git a/...b/AdminModule/UserModule/Control/ExternalAuthList/templates/externalAuthListControl.latte b/...b/AdminModule/UserModule/Control/ExternalAuthList/templates/externalAuthListControl.latte
@@ -1,26 +1,28 @@
 {templateType App\Web\AdminModule\UserModule\Control\ExternalAuthList\ExternalAuthListTemplate}
 
-<div class="px-4 sm:px-6 lg:px-8 py-4">
-    <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
-        <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
-            <table class="min-w-full divide-y divide-gray-300">
-                <thead>
-                    <tr>
-                        <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">{_auth_type}</th>
-                        <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">{_resource_owner_id}</th>
-                        </th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-200">
-                    <tr n:foreach="$externalAuths as $externalAuth">
-                        <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-0">{$externalAuth->providerCode}</td>
-                        <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{$externalAuth->resourceOwnerId}</td>
-                    </tr>
-                    <tr n:if="0 >= count($externalAuths)">
-                        <td colspan="2" class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-0">{_no_rows}</td>
-                    </tr>
-                </tbody>
-            </table>
+{if 0 < count($externalAuths)}
+    <div class="px-4 sm:px-6 lg:px-8 py-4">
+        <div class="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+            <div class="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+                <table class="min-w-full divide-y divide-gray-300">
+                    <thead>
+                        <tr>
+                            <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-0">{_auth_type}</th>
+                            <th scope="col" class="px-3 py-3.5 text-left text-sm font-semibold text-gray-900">{_resource_owner_id}</th>
+                        </tr>
+                    </thead>
+                    <tbody class="divide-y divide-gray-200">
+                        <tr n:foreach="$externalAuths as $externalAuth">
+                            <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-0">{$externalAuth->providerCode}</td>
+                            <td class="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{$externalAuth->resourceOwnerId}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
         </div>
     </div>
-</div>
+{else}
+    <div class="px-8 py-4">
+        <div class="whitespace-nowrap py-4 text-sm text-gray-500">{_no_rows}</div>
+    </div>
+{/if}
diff --git a/src/Web/FrontModule/Presenter/templates/SignIn.default.latte b/src/Web/FrontModule/Presenter/templates/SignIn.default.latte
@@ -3,15 +3,25 @@
 {block #content}
     {control signIn}
 
-    <div class="space-y-2">
-        <a n:foreach="$enabledOauthTypes as $oauthType"
-            n:href=":Front:OAuth:authorize, type => $oauthType, backLink => $backLink"
-            class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 cursor-pointer"
-            data-spinner-for="self">
+    <div n:if="0 < count($enabledOauthTypes)">
+        <div class="relative mb-6">
+            <div class="absolute inset-0 flex items-center" aria-hidden="true">
+                <div class="w-full border-t border-gray-300"></div>
+            </div>
+            <div class="relative flex justify-center">
+                <span class="bg-white px-2 text-sm text-gray-500">{_oauth_divider}</span>
+            </div>
+        </div>
+        <div class="space-y-2">
+            <a n:foreach="$enabledOauthTypes as $oauthType"
+               n:href=":Front:OAuth:authorize, type => $oauthType, backLink => $backLink"
+               class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300 cursor-pointer"
+               data-spinner-for="self">
 
-            {ifset block "login-icon-$oauthType"}{include block "login-icon-$oauthType"}{/ifset}
-            {_'login_with.' . $oauthType}
-        </a>
+                {ifset block "login-icon-$oauthType"}{include block "login-icon-$oauthType"}{/ifset}
+                {_'login_with.' . $oauthType}
+            </a>
+        </div>
     </div>
 
     <div class="mt-6 text-sm text-right">

diff --git a/translations/App_Web_FrontModule_Presenter_SignInPresenter.cs.neon b/translations/App_Web_FrontModule_Presenter_SignInPresenter.cs.neon
@@ -1,5 +1,6 @@
 page_title: Přihlášení
 forgot_your_password: Zapomenuté heslo?
+oauth_divider: Nebo
 
 login_with:
     azure: Přihlásit se přes Azure

diff --git a/translations/App_Web_FrontModule_Presenter_SignInPresenter.en.neon b/translations/App_Web_FrontModule_Presenter_SignInPresenter.en.neon
@@ -1,5 +1,6 @@
 page_title: Sign in
 forgot_your_password: Forgot Password?
+oauth_divider: Or
 
 login_with:
     azure: Sign in with Azure