Merge pull request #3 from nurmuhammet-ali/auth-pages

ajax request login blade

resources/views/vendor/nova/pages/login.blade.php

@@ -1,5 +1,20 @@
 @extends('vendor.nova.partials.auth-layout')
 
+@push('js')
+<script>
+    async function login(event) {
+        const response = await postData(event.target.action, getFormData(event))
+        console.log(response)
+    
+    if (response.errors) {
+    loopObject(response.errors, item => addValidationClasses(item))
+    } else {
+        removeValidationClasess()
+    }
+    }
+</script>
+@endpush
+
 @section('content')
     <div class="login-section d-center items-center h-screen">
         <div class="d-none h-full max-w-4xl">
@@ -9,7 +24,12 @@
             {{--  <div class="logo">
                 <img src="assets/images/logo-login.png" width="100px">
             </div> --}}
-            <form class="bg-white dark:bg-gray-800 rounded-lg p-8 w-[25rem] mx-auto" method="POST" action="{{ route('login') }}">
+            <form  
+                method="POST" 
+                action="{{ route('login') }}"
+                onsubmit="event.preventDefault();login(event)"
+                class="bg-white dark:bg-gray-800 rounded-lg p-8 w-[25rem] mx-auto"
+                >
                 @csrf
                 <h2 class="text-2xl text-center font-normal mb-6">{{ __('Online panel') }}</h2>
                 <svg class="block mx-auto mb-6" xmlns="http://www.w3.org/2000/svg" width="100" height="2" viewBox="0 0 100 2">
@@ -19,25 +39,30 @@
                     <label class="block mb-2" for="username">
                         {{ __('Username') }}
                     </label>
-                    <input class="form-control form-input form-input-bordered w-full @error('username') form-input-border-error @enderror" id="username" type="text" name="username" autofocus="" value="{{ old('username') }}">
+                    <input class="form-control form-input form-input-bordered w-full" 
+                        id="username" 
+                        type="text" 
+                        name="username" 
+                        autofocus="" 
+                        value="{{ old('username') }}"
+                    >
+
+                    <span id="username-error-box" class="text-red-500 text-italic error-box"></span>
 
-                    @error('username')
-                        <span class="text-red-500 text-italic">
-                            <strong>{{ $message }}</strong>
-                        </span>
-                    @enderror
                 </div>
                 <div class="mb-6">
                     <label class="block mb-2" for="password">
                         {{ __('Password') }}
                     </label>
-                    <input class="form-control form-input form-input-bordered w-full @error('username') form-input-border-error @enderror" id="password" type="password" name="password">
+                    <input 
+                        class="form-control form-input form-input-bordered w-full" 
+                        id="password" 
+                        type="password" 
+                        name="password"
+                    >
 
-                    @error('password')
-                        <span class="text-red-500 text-italic">
-                            <strong>{{ $message }}</strong>
-                        </span>
-                    @enderror
+                    <span id="password-error-box" class="text-red-500 text-italic error-box"></span>
+                  
                 </div>
                 <div class="flex mb-6">
                     <div class="ml-auto">

resources/views/vendor/nova/pages/reset-password.blade.php

@@ -1,5 +1,49 @@
 @extends('vendor.nova.partials.auth-layout')
 
+@push('js')
+<script>
+async function resetPassword(event) {
+const response = await postData(event.target.action, getFormData(event))
+
+if (response.errors) {
+    loopObject(response.errors, item => addValidationClasses(item))
+} else {
+    removeValidationClasess()
+
+    if (response.step === 1) {
+        showVerificationCodeBox()
+
+        Swal.fire({
+            title: '{{ __('Verification code') }}',
+            text: response.message,
+            icon: 'info'
+            })
+    }
+
+    if (response.step === 2) {
+        showPasswordBox()
+
+        Swal.fire({
+            title: '{{ __('Reset Password') }}',
+            text: response.message,
+            icon: 'warning'
+        })
+    }
+
+    if (response.step === 3) {
+        await Swal.fire({
+            title: response.message,
+            showDenyButton: false,
+            showCancelButton: false,
+        })
+
+        window.location.href = '{{ route('login') }}'
+    }
+}
+}
+</script>
+@endpush
+
 @section('content')
     <div class="login-section d-center items-center h-screen">
          <div class="d-none h-full max-w-4xl">

resources/views/vendor/nova/partials/auth-layout.blade.php

@@ -46,48 +46,14 @@
     <script src="/assets/js/sweetalert2@11.js"></script>
     <script src="/assets/js/fn.js"></script>
     <script>
-        new Inputmask("+(\\9\\93)-99-99-99-99").mask(document.getElementById('phone'));
+        const phone = document.getElementById('phone');
 
-        async function resetPassword(event) {
-        const response = await postData(event.target.action, getFormData(event))
-
-        if (response.errors) {
-            loopObject(response.errors, item => addValidationClasses(item))
-        } else {
-            removeValidationClasess()
-
-            if (response.step === 1) {
-                showVerificationCodeBox()
-
-                Swal.fire({
-                    title: '{{ __('Verification code') }}',
-                    text: response.message,
-                    icon: 'info'
-                  })
-            }
-
-            if (response.step === 2) {
-                showPasswordBox()
-
-                Swal.fire({
-                  title: '{{ __('Reset Password') }}',
-                  text: response.message,
-                  icon: 'warning'
-                })
-            }
-
-            if (response.step === 3) {
-                await Swal.fire({
-                  title: response.message,
-                  showDenyButton: false,
-                  showCancelButton: false,
-                })
-
-                window.location.href = '{{ route('login') }}'
-            }
+        if (phone) {
+            new Inputmask("+(\\9\\93)-99-99-99-99").mask(document.getElementById('phone'));
         }
-    }
     </script>
+    
+    @stack('js')
 </body>
 </html>