Merge pull request #388 from devforth/AdminForth/915

feat: move login error message to the bottom of authentication modal

Author: ivictbor

adminforth/spa/src/views/LoginView.vue

@@ -27,7 +27,7 @@
       overflow-x-hidden z-50 min-w-[350px]  justify-center items-center md:inset-0 h-[calc(100%-1rem)] max-h-full">
         <div class="relative p-4 w-full max-h-full max-w-[400px]">
             <!-- Modal content -->
-            <div class="af-login-modal-content relative bg-lightLoginViewBackground rounded-lg shadow dark:bg-darkLoginViewBackground dark:shadow-black" >
+            <div class="af-login-modal-content relative bg-lightLoginViewBackground rounded-lg shadow dark:bg-darkLoginViewBackground dark:shadow-black" :class=" { 'rounded-b-none  overflow-hidden': error } ">
                 <!-- Modal header -->
                 <div class="af-login-modal-header flex items-center justify-between flex-col p-4 md:p-5 border-b rounded-t dark:border-gray-600">
 
@@ -92,8 +92,6 @@
                           :meta="c.meta"
                           @update:disableLoginButton="setDisableLoginButton($event)"
                         />
-
-                        <ErrorMessage :error="error" />
 
                         <div v-if="loginPromptHTML"
                           class="flex items-center p-4 mb-4 text-sm text-lightLoginViewPromptText rounded-lg bg-lightLoginViewPromptBackground dark:bg-darkLoginViewPromptBackground dark:text-darkLoginViewPromptText" role="alert"
@@ -108,9 +106,9 @@
                           {{ $t('Login to your account') }}
                         </Button>
                     </form>
-
                 </div>
             </div>
+            <ErrorMessage v-if="error" :error="error" class="absolute left-4 right-4 rounded-t-none mb-0 shadow px-9" />
         </div>
     </div>