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

122 lines
7.3 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="https://banksampah.jakarta.go.id/images/logo-dinas.ico">
<link rel="icon" type="image/png" sizes="32x32" href="https://banksampah.jakarta.go.id/images/logo-dinas.ico">
<link rel="mask-icon" href="https://banksampah.jakarta.go.id/images/logo-dinas.ico" color="#5bbad5">
<link rel="stylesheet" media="screen, print" href="{{asset('assets/css/fa-brands.css')}}">
</head>
<body>
<div class="page-wrapper">
<div class="page-inner bg-brand-gradient">
<div class="page-content-wrapper bg-transparent m-0">
<div class="flex-1" style="background: url('{{asset("assets/img/background.png")}}') no-repeat center center; min-height: 100vh;width: 100%; background-size: cover; background-color: #f5f5f5; ">
<div class="container py-4 py-lg-5 my-lg-5 px-4 px-sm-0">
<div class="row">
<div class="col col-md-6 col-lg-7 hidden-sm-down mt-5 d-none">
<h2 style="font-size: 50px!important;" class="fw-900 mt-4">
Sekolah Adiwiyata
<small class="h3 fw-500 mt-3 mb-5 opacity-60">
Dinas Lingkungan Hidup Provinsi DKI Jakarta
</small>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<div class="col-sm-12 col-md-6 col-lg-5 col-xl-4 ml-auto">
<div class="card p-4 rounded-plus bg-faded">
@include('include.alert')
<form id="js-login" validate="" 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" value="" required>
</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-info 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-danger btn-block">Registrasi Sekolah</a>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="position-absolute pos-bottom pos-left pos-right p-3 text-center text-black">
{{date('Y')}} © Sekolah Adiwiyata by&nbsp;Dinas Lingkungan Hidup Provinsi DKI Jakarta
</div>
</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>