MIF_E31211908/resources/views/page/auth/index.blade.php

61 lines
2.7 KiB
PHP

@extends('layout.auth')
@section('content')
<div class="bg-white w-[500px] h-[400px] shadow-lg rounded-lg p-5">
<div class="flex justify-center items-center bg-[#ee69b1] p-10 rounded-lg mt-[-50px]">
<h1 class="text-4xl font-bold text-white text-center">RUMAH PAMPERS ALIN</h1>
</div>
<form id="formLogin" onsubmit="event.preventDefault(); login();" class="p-5" >
@csrf
<div class="my-3">
<label for="Email">Email</label>
<input type="text" name="email" id="email" placeholder="Masukkan Email" class="w-full border border-black rounded-lg p-3">
</div>
<div class="my-3 relative">
<label for="password" class="inline-block">Password</label>
<input type="password" name="password" id="password" placeholder="*****************" class="w-full border border-black rounded-lg p-3">
<button type="button" id="togglePassword" class="absolute bottom-1 right-3 transform -translate-y-1/2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6" id="toggleIcon">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 0 0 1.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.451 10.451 0 0 1 12 4.5c4.756 0 8.773 3.162 10.065 7.498a10.522 10.522 0 0 1-4.293 5.774M6.228 6.228 3 3m3.228 3.228 3.65 3.65m7.894 7.894L21 21m-3.228-3.228-3.65-3.65m0 0a3 3 0 1 0-4.243-4.243m4.242 4.242L9.88 9.88" />
</svg>
</button>
</div>
<button id="loginButton" class="mt-5 w-full bg-[#ee69b1] p-2 rounded-lg text-white">Login</button>
</form>
</div>
@endsection
@section('script')
<script>
async function login() {
const formData = $('#formLogin').serialize();
try {
$('#loginButton').html('<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> Loading...');
const response = await $.ajax({
url: "{{ route('login') }}",
method: 'POST',
data: formData,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
if (response.message === 'Berhasil Login!') {
window.location.href = response.redirect;
} else {
alert(response.message);
}
} catch (error) {
alert('An error occurred while processing your request. Please try again later.');
console.error(error);
} finally {
$('#loginButton').html('Login');
}
}
</script>
@endsection