sekolah_adiwiyata/resources/views/auth/login.blade.php

135 lines
7.5 KiB
PHP

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
Login - Sekolah Adiwiyata
</title>
<meta name="description" content="Login">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="msapplication-tap-highlight" content="no">
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/vendors.bundle.css')}}">
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/app.bundle.css')}}">
<link rel="apple-touch-icon" sizes="180x180" href="{{asset('assets/logo-dinas.ico')}}">
<link rel="icon" type="image/png" sizes="32x32" href="{{asset('assets/logo-dinas.ico')}}">
<link rel="mask-icon" href="{{asset('assets/logo-dinas.ico')}}" color="#5bbad5">
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/fa-brands.css')}}">
<style type="text/css">
.bg-login{
background-image: url("{{('assets/bg-login.png')}}");
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body class="bg-login">
<div class=" d-flex align-items-center justify-content-center min-vh-100">
<div class="container py-4 py-lg-5 px-4 px-sm-0">
<div class="row justify-content-center">
<div class="col-sm-12 col-md-12 col-lg-8 col-xl-8">
@include('include.alert')
<div class="card pr-4 rounded-plus bg-faded" style="border:none;">
<div class="row">
<div class="col-md-7">
<div class="text-center">
<img src="{{asset('assets/background.png')}}" class="img-fluid rounded-plus" style="border-top-right-radius:0px; border-bottom-right-radius:0px;">
</div>
</div>
<div class="col-md-5 p-4 d-flex flex-column justify-content-center align-items-center gap-3">
<!-- <h1 class="text-left mb-3">Login</h1>
<br> -->
<div class="">
<div class="d-flex flex-column gap-3 align-items-center justify-content-center mb-5">
<div>
<img src="{{asset('assets/logo-dinas.ico')}}" width="50">
</div>
<div>
<h5 class="fw-500">Sistem Informasi Adiwiyata</h5>
</div>
</div>
<div>
<form id="js-login" method="POST" action="{{url('login')}}">
{{csrf_field()}}
<div class="form-group">
<label class="form-label">Email</label>
<input type="text" required name="email" class="form-control" placeholder="Masukan Email/NPSN anda">
</div>
<div class="form-group">
<label class="form-label">Password</label>
<div class="input-group">
<input type="password" required id="password" name="password" class="form-control" placeholder="Masukan Password">
<div class="input-group-append">
<button class="btn btn-default waves-effect waves-themed" type="button" id="togglePassword"><i class="fal fa-eye"></i></button>
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-lg-12 pr-lg-1 my-2">
<button type="submit" class="btn btn-primary btn-block">Masuk</button>
</div>
<div class="col-lg-12 pl-lg-1 my-2 text-center">
OR
</div>
<div class="col-lg-12 pl-lg-1 my-2">
<a href="{{url('register')}}" class="btn btn-success btn-block">Registrasi Sekolah</a>
</div>
</div>
</form>
<p class="text-muted mt-auto text-center mb-0 pt-3" style="font-size:12px;">
{{date('Y')}} © Dinas Lingkungan Hidup DKI Jakarta
</p>
</div>
</div>
</div>
</div>
</div>
<div class="text-center mt-3 text-black">
</div>
</div>
</div>
</div>
</div>
<script src="{{asset('assets/js/vendors.bundle.js')}}"></script>
<script src="{{asset('assets/js/app.bundle.js')}}"></script>
<script>
$(document).ready(function() {
$('#togglePassword').on('click', function() {
let passwordField = $('#password');
let icon = $(this).find('i');
// Cek apakah input saat ini bertipe password
if (passwordField.attr('type') === 'password') {
passwordField.attr('type', 'text'); // Ubah ke teks
icon.removeClass('fa-eye').addClass('fa-eye-slash'); // Ganti ikon
} else {
passwordField.attr('type', 'password'); // Ubah ke password
icon.removeClass('fa-eye-slash').addClass('fa-eye'); // Kembalikan ikon
}
});
});
$("#js-login-btn").click(function(event)
{
// Fetch form to apply custom Bootstrap validation
var form = $("#js-login")
if (form[0].checkValidity() === false)
{
event.preventDefault()
event.stopPropagation()
}
form.addClass('was-validated');
// Perform ajax submit here...
});
</script>
</body>
</html>