mapping_sso.blade.php 6.42 KB
@extends('auth.index')
@section('content')
<style>
    .help-block {
        color: red;
    }
    .hidden {
        display: none;
    }
</style>
<div class="page-wrapper">
    <div class="page-inner bg-brand-gradient">
        <div class="page-content-wrapper bg-transparent m-0">
            <div class="height-10 w-100 shadow-lg px-4 bg-brand-gradient">
                <div class="d-flex align-items-center container p-0">
                    @include('auth.logo')
                </div>
            </div>
            <div class="flex-1"
                style="background: url({{ asset('backend/img/svg/pattern-1.svg') }}) no-repeat center bottom fixed; background-size: cover;">
                <div class="container py-4 py-lg-5 my-lg-5 px-4 px-sm-0">
                    <div class="row d-flex justify-content-center">
                        <div class="col-sm-6 col-md-6 col-lg-4 col-xl-4">
                            <h1 class="text-white fw-300 mb-3 d-sm-block d-md-none">
                                Secure login
                            </h1>
                            <div class="card p-4 rounded-plus bg-faded">
                                <h1 style="text-align:center; font-weight:bold;">
                                    CONNECT SSO RIAU
                                </h1>
                                <h3 style="text-align:center; font-size: 12px; border-bottom: 1px dotted red">
                                    Hubungkan akun SSO anda dengan akun lokal aplikasi
                                </h3>
                                <form method="POST" action="{{ route('login') }}">
                                    @csrf
                                    <div class="form-group">
                                        <label class="form-label" for="sso_email">SSO Email</label>
                                        <input type="text" name="sso_email" id="sso_email"
                                            class="form-control form-control-lg @error('email') is-invalid @enderror"
                                            placeholder="Username" required value="<?php echo (isset($ssoUserInfo->email))?$ssoUserInfo->email:''; ?>" disabled>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="username">Username</label>
                                        <input type="text" name="username" id="username"
                                            class="form-control form-control-lg @error('email') is-invalid @enderror"
                                            placeholder="Username" required>
                                        <div class="username-error help-block hidden"></div>
                                    </div>
                                    <div class="form-group">
                                        <label class="form-label" for="password">Password</label>
                                        <input type="password" name="password" id="password"
                                            class="form-control form-control-lg @error('password') is-invalid @enderror"
                                            placeholder="Password" required>
                                        <div class="password-error help-block hidden"></div>
                                    </div>
                                    <center><span class='pesan'></span></center>
                                    <div class="row no-gutters">
                                        <div class="col-lg-12 pl-lg-1 my-2">
                                            <button type="button"
                                                class="btn btn-danger btn-block btn-connect-sso">{{ __('Hubungkan') }}</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    @include('auth.footer')
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

<script src="{{ asset('resources/vendor/jquery/jquery-2.1.4.min.js') }}"></script>
<script>
$(document).ready(function(){

	$("#username, #password").keyup(function(e){ 
        $(".help-block").addClass('hidden');
        $(".pesan").html('');
	});

	$(".btn-connect-sso").click(function(){
		$('.form-group').removeClass('has-error');
		var password = $("#password").val();
		var username = $("#username").val();
		var sso_email = $("#sso_email").val();
		var _token = $("[name='_token']").val();
		var dataString = {'username': username, 'password': password, 'sso_email': sso_email, '_token': _token};
        console.log(dataString);
		$.ajax({
			type: "POST",
			url: "{{ url('sso/attempt') }}",
			data: dataString,
			dataType: 'json',
			cache: false,
			beforeSend: function(){
				$(".btn-connect-sso").prop("disabled", true);
				$(".btn-connect-sso").html('Connecting...');
			},
			success: function(data){
                console.log(data);
				if(data.status == true){
					$(".pesan").show();
					$(".pesan").html('<div class="alert alert-success" role="alert"><i class="fa fa-check-circle"></i> Berhasil login, Harap tunggu...</div>');
                    console.log(data);
					setTimeout(function() { 
						location.href="{{ url('/home') }}";
					},500);
				}else{
                    console.log(data.pesan);
                    console.log(data.pesan.msg);
                    if(data.pesan.hasOwnProperty('msg')) {
						$(".pesan").html('<div class="alert alert-danger" role="alert"><i class="fa fa-ban"></i> '+ data.pesan.msg +'</div>');
                    }else{
                        $(".pesan").show();
                        $.each(data.pesan, function(i, item) {
                            $('#'+i).focus();
                            $("."+i+'-error').removeClass('hidden');
                            $("."+i+'-error').html(item[0]);
                        });
                    }
				}
				$(".btn-connect-sso").html('Hubungkan');
				$(".btn-connect-sso").prop("disabled", false);
			},error:function(x, e){
				$(".pesan").show();
				$(".btn-connect-sso").prop("disabled", false);
				$(".pesan").html('<div class="alert alert-danger" role="alert"><i class="fa fa-ban"></i> Terjadi kesalahan. Error '+ x.status +'</div>');
				$(".fa-sign-in").show();
				$(".btn-connect-sso").html('Hubungkan');
			}
		});
		return false;
	});
});
</script>