191 lines
		
	
	
		
			11 KiB
		
	
	
	
		
			PHP
		
	
	
			
		
		
	
	
			191 lines
		
	
	
		
			11 KiB
		
	
	
	
		
			PHP
		
	
	
<!DOCTYPE html>
 | 
						|
<html lang="en">
 | 
						|
    <head>
 | 
						|
        <meta charset="utf-8">
 | 
						|
        <title>
 | 
						|
            Lupa Kata Sandi - SIDIA Jakarta
 | 
						|
        </title>
 | 
						|
        <meta name="description" content="Login">
 | 
						|
        <meta name="csrf-token" content="{{ csrf_token() }}">
 | 
						|
        <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" href="{{asset('assets/css/toast.min.css')}}">
 | 
						|
        <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-5 col-xl-5">
 | 
						|
                        @include('include.alert')
 | 
						|
                        <div class="card rounded-plus bg-faded" style="border:none;">
 | 
						|
                            <div class="row">
 | 
						|
                                <div class="col-md-12 p-4 d-flex mx-auto 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">SIDIA Jakarta</h5>
 | 
						|
                                            </div>
 | 
						|
                                        </div>
 | 
						|
                                        <div>
 | 
						|
                                            <h6 class="mb-3">Lupa Password</h6>
 | 
						|
                                            {{-- <form action="#"> --}}
 | 
						|
                                                <div class="form-group divEmail">
 | 
						|
                                                    <label class="form-label">Email</label>
 | 
						|
                                                    <div class="input-group">
 | 
						|
                                                    <input type="text" required name="email" class="form-control" placeholder="Masukan Email Anda" id="email">
 | 
						|
                                                    <div class="input-group-append">
 | 
						|
                                                        <button class="btn btn-default waves-effect waves-themed" type="button" id="togglePassword"><i class="fal fa-envelope"></i></button>
 | 
						|
                                                    </div>
 | 
						|
                                                </div>
 | 
						|
                                                <div class="form-group divKode mb-2 d-none">
 | 
						|
                                                    <div class="alert alert-info">
 | 
						|
                                                        Silahkan cek email anda dan masukan kode
 | 
						|
                                                    </div>
 | 
						|
                                                </div>
 | 
						|
                                                <div class="form-group divKode d-none">
 | 
						|
                                                    <label class="form-label">Kode</label>
 | 
						|
                                                    <input type="text" required name="kode" class="form-control" placeholder="Masukan Kode Anda" id="kode">
 | 
						|
                                                </div>
 | 
						|
                                                <div class="form-group divPassword d-none">
 | 
						|
                                                    <label class="form-label">Kata Sandi</label>
 | 
						|
                                                    <div class="input-group">
 | 
						|
                                                        <input type="password" required id="password" name="password" class="form-control" placeholder="Masukan Kata Sandi">
 | 
						|
                                                        <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 id="emailFeedback" class="mt-2 text-sm"></div>
 | 
						|
                                                </div>
 | 
						|
                                                <div class="row no-gutters">
 | 
						|
                                                    <div class="col-lg-12 pr-lg-1 my-2">
 | 
						|
                                                        <button type="submit" disabled class="btn btn-primary btnProses btn-block">Proses <i class="fal fa-sign-in"></i></button>
 | 
						|
                                                    </div>
 | 
						|
                                                </div>
 | 
						|
                                            {{-- </form> --}}
 | 
						|
                                            <p class="text-muted mt-auto text-center mb-0 pt-3" style="font-size:12px;">
 | 
						|
                                                {{date('Y')}} © Dinas Lingkungan Hidup Provinsi DKI Jakarta
 | 
						|
                                            </p>
 | 
						|
                                        </div>
 | 
						|
                                    </div>
 | 
						|
                                </div>
 | 
						|
                            </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 src="{{asset('assets/js/toast.min.js')}}"></script>
 | 
						|
        <script>
 | 
						|
            let typingTimer;
 | 
						|
            $('#email').on('keyup',function(){
 | 
						|
                clearTimeout(typingTimer);
 | 
						|
                const email = $(this).val().trim();
 | 
						|
                if (email.length > 0) {
 | 
						|
                    typingTimer = setTimeout(function () {
 | 
						|
                        checkEmail(email);
 | 
						|
                    }, 800);
 | 
						|
                } else {
 | 
						|
                    $('#emailFeedback').html('');
 | 
						|
                }
 | 
						|
            });
 | 
						|
            function checkEmail(email) {
 | 
						|
                let base_url = "{{ url('/') }}";
 | 
						|
                $.ajax({
 | 
						|
                    url: base_url+'/checkEmail',
 | 
						|
                    method: 'POST',
 | 
						|
                    data: {
 | 
						|
                        email: email,
 | 
						|
                        _token: $('meta[name="csrf-token"]').attr('content')
 | 
						|
                    },
 | 
						|
                    success: function(response) {
 | 
						|
                        if (response.exists) {
 | 
						|
                            $('.btnProses').removeAttr('disabled');
 | 
						|
                            // $('#emailFeedback').html('<span class="text-green-600">Email terdaftar ✔️</span>');
 | 
						|
                        } else {
 | 
						|
                            toastr.error("Email Tidak Ditemukan", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | 
						|
                        }
 | 
						|
                    },
 | 
						|
                    error: function(response) {
 | 
						|
                        toastr.error('Email Tidak Valid', 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | 
						|
                    }
 | 
						|
                });
 | 
						|
            }
 | 
						|
            $(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
 | 
						|
                    }
 | 
						|
                });
 | 
						|
            });
 | 
						|
 | 
						|
            $('.btnProses').on('click',function(){
 | 
						|
                let base_url = "{{ url('/') }}";
 | 
						|
                let email = $('#email').val();
 | 
						|
                $.ajax({
 | 
						|
                    url: base_url+'/sendCode',
 | 
						|
                    method: 'POST',
 | 
						|
                    data: {
 | 
						|
                        email: email,
 | 
						|
                        _token: $('meta[name="csrf-token"]').attr('content')
 | 
						|
                    },
 | 
						|
                    success: function(response) {
 | 
						|
                        if (response.status == true) {
 | 
						|
                            if(response.code == true){
 | 
						|
                                $('.divKode').removeClass('d-none');
 | 
						|
                                $('.divEmail').addClass('d-none');
 | 
						|
                            }
 | 
						|
 | 
						|
                            if(response.password == true){
 | 
						|
                                $('.divPassword').removeClass('d-none');
 | 
						|
                                $('.divKode').addClass('d-none');
 | 
						|
                                $('.divEmail').addClass('d-none');
 | 
						|
                            }
 | 
						|
                            
 | 
						|
                            // toastr.success("Berhasil Request Ubah Kata Sandi", 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | 
						|
                        } else {
 | 
						|
                            toastr.error(response.message, 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | 
						|
                        }
 | 
						|
                    },
 | 
						|
                    error: function(response) {
 | 
						|
                        toastr.error('Email Tidak Valid', 'Error!', {positionClass: 'toast-bottom-right', containerId: 'toast-bottom-right'});
 | 
						|
                    }
 | 
						|
                });
 | 
						|
            });
 | 
						|
 | 
						|
 | 
						|
        </script>
 | 
						|
    </body>
 | 
						|
</html>
 |