PageRenderTime 63ms CodeModel.GetById 21ms RepoModel.GetById 0ms app.codeStats 0ms

/app/modules/login/views/login_view.php

https://bitbucket.org/universitasproklamasi45/up45-gaji
PHP | 272 lines | 262 code | 10 blank | 0 comment | 5 complexity | eaf2515b79e6a7c9a96ca751fac2a4e8 MD5 | raw file
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Sistem Informasi Penggajian Universitas Proklamasi 45</title>
  5. <meta charset="utf-8"/>
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  7. <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
  8. <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  9. <link rel="icon" href="<?php echo base_url()."favicon.ico"; ?>" type="image/x-icon" />
  10. <link rel="shortcut icon" href="<?php echo base_url()."favicon.ico"; ?>" type="image/x-icon" />
  11. <link rel="stylesheet" type="text/css" href="<?php echo base_url()."assets/frontend/bootstrap/css/bootstrap.min.css"; ?>" media="screen" />
  12. <link rel="stylesheet" type="text/css" href="<?php echo base_url()."assets/frontend/style/css/ionicons.min.css";?>">
  13. <link rel="stylesheet" type="text/css" href="<?php echo base_url()."assets/frontend/style/css/login.css"; ?>" media="screen" />
  14. <link rel="stylesheet" type="text/css" href="<?php echo base_url()."assets/frontend/style/css/color.css"; ?>" />
  15. <style type="text/css">
  16. .field-icon {
  17. color: black;
  18. float: right;
  19. font-size: 20px;
  20. margin-top: -30px;
  21. margin-right: 10px;
  22. position: relative;
  23. z-index: 9999;
  24. }
  25. </style>
  26. <script src="<?php echo base_url().'assets/frontend/jquery/jquery.min.js'; ?>"></script>
  27. <script src="<?php echo base_url().'assets/frontend/bootstrap/js/bootstrap.min.js'; ?>"></script>
  28. <script src="<?php echo base_url().'assets/frontend/style/js/sweetalert2.min.js'; ?>"></script>
  29. <script src="<?php echo base_url().'assets/frontend/style/js/login.js'; ?>"></script>
  30. </head>
  31. <body id="login">
  32. <div class="container">
  33. <div class="content">
  34. <div class="row justify-content-center">
  35. <div class="col-md-7 col-sm-12">
  36. <div class="content-logo">
  37. <center>
  38. <img src="<?=base_url()?>assets/frontend/style/img/logo/logo.png" class="img-responsive">
  39. </center>
  40. </div>
  41. <div class="content-title">
  42. <div class="">
  43. <h1 class="title">Sistem Informasi Penggajian<br>Universitas Proklamasi 45</h1>
  44. </div>
  45. </div>
  46. <div class="content-copyright copyright-big">
  47. <p>&copy; 2018 Universitas Prokalamasi 45</p>
  48. </div>
  49. </div>
  50. <div class="col-md-5 col-sm-7">
  51. <div id="action-box">
  52. <div class="action-section login-section">
  53. <form method="POST" action="<?=base_url()?>login/open_login">
  54. <div class="login-box">
  55. <div class="login-title">
  56. <h3>Login Sistem</h3>
  57. </div>
  58. <div class="panel-body">
  59. <div class="form-group">
  60. <label>Pilih Level</label>
  61. <select class="form-control" name="level" required="">
  62. <option selected="" disabled="">Pilih</option>
  63. <option value="karyawan">Karyawan</option>
  64. <option value="SDM">SDM</option>
  65. <option value="AKD">Akademik</option>
  66. <option value="KEU">Keuangan</option>
  67. <option value="REK">Pimpinan</option>
  68. </select>
  69. </div>
  70. <div class="form-group">
  71. <label for="username">Username</label>
  72. <div class="input-group">
  73. <div class="input-group-addon"><i class="icon ion-person" style="font-size: 18px;"></i></div>
  74. <input type="text" class="form-control" name="username" id="username" placeholder="Username" autocomplete="off" required="" />
  75. </div>
  76. </div>
  77. <div class="form-group">
  78. <label for="password">Password</label>
  79. <div class="input-group">
  80. <div class="input-group-addon"><i class="icon ion-locked" style="font-size: 18px;"></i></div>
  81. <input type="password" class="form-control" name="password" id="password-field" placeholder="Password" autocomplete="off" required="" />
  82. <span toggle="#password-field" class="icon ion-eye field-icon toggle-password"></span>
  83. </div>
  84. </div>
  85. <?php if((isset($flash_message) and !empty($flash_message)) or($this->session->flashdata('login_message'))): ?>
  86. <div class="alert alert-danger alert-dismissible" role="alert">
  87. <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  88. <?php echo $this->session->flashdata('login_message'); ?>
  89. </div>
  90. <?php endif; ?>
  91. <div class="form-group">
  92. <div class="">
  93. <button class="btn blue darken-2 z-depth-1 login-btn" type="submit">Login&nbsp;&nbsp;<span class="navicon-right"><i class="icon ion-log-in"></i></span></button>
  94. </div>
  95. <div>
  96. <a class="white-text activate-section" href="#" data-section="forgot-section">Lupa Password ?</a>
  97. <a class="white-text activate-section" href="#" data-section="aktivasi-section" style="float: right;">Aktivasi Akun</a>
  98. </div>
  99. </div>
  100. </div>
  101. </div>
  102. </form>
  103. </div>
  104. <div class="action-section forgot-section">
  105. <form method="POST" action="<?=base_url()?>login/forget_password/submit">
  106. <div class="login-box">
  107. <div class="login-title">
  108. <h3>Lupa Password</h3>
  109. </div>
  110. <div class="panel-body">
  111. <div class="form-group">
  112. <label for="email">Alamat Email</label>
  113. <div class="input-group">
  114. <div class="input-group-addon"><i class="icon ion-email" style="font-size: 18px;"></i></div>
  115. <input type="text" class="form-control" name="email" id="email" placeholder="Masukan Email Anda" autocomplete="off" required="" />
  116. </div>
  117. </div>
  118. <div class="form-group">
  119. <button class="btn blue darken-2 z-depth-1 login-btn" type="submit">Reset Password&nbsp;&nbsp;<span class="navicon-right"><i class="icon ion-unlocked"></i></span></button>
  120. </div>
  121. <div class="form-group">
  122. <div class="alert alert-danger alert-dismissible text-center" role="alert">
  123. Reset token hanya berlaku 24 jam
  124. </div>
  125. <div>
  126. <a class="white-text activate-section" href="#" data-section="login-section">Login</a>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </form>
  132. </div>
  133. <div class="action-section aktivasi-section">
  134. <form method="POST" action="<?=base_url()?>login/aktivasi/submit">
  135. <div class="login-box">
  136. <div class="login-title">
  137. <h3>Aktivasi Akun</h3>
  138. </div>
  139. <div class="panel-body">
  140. <div class="form-group">
  141. <label for="nip">NIP Pegawai</label>
  142. <div class="input-group">
  143. <div class="input-group-addon"><i class="icon ion-person" style="font-size: 18px;"></i></div>
  144. <input type="text" class="form-control" name="nip" id="nip" placeholder="Masukan NIP Anda" autocomplete="off" required="" />
  145. </div>
  146. </div>
  147. <div class="form-group">
  148. <div class="input-group">
  149. <div class="input-group-addon"><button type="button" id="btn_cek" class="btn btn-sm btn-success">Cek</button></div>
  150. <input type="text" class="form-control" name="nama" id="nama" placeholder="Nama Anda" readonly="" />
  151. </div>
  152. </div>
  153. <div class="form-group">
  154. <input type="hidden" name="nip_pegawai" id="nip_pegawai">
  155. <label for="email_pegawai">Alamat Email Anda</label>
  156. <div class="input-group">
  157. <div class="input-group-addon"><i class="icon ion-ios-email" style="font-size: 18px;"></i></div>
  158. <input type="email" class="form-control" name="email_pegawai" id="email_pegawai" placeholder="Masukan Email Anda" autocomplete="off" required="" />
  159. </div>
  160. </div>
  161. <div class="form-group">
  162. <button id="btn_aktivasi" class="btn red darken-2 z-depth-1 login-btn" type="submit" disabled="">Aktivasi Akun&nbsp;&nbsp;<span class="navicon-right"><i class="icon ion-unlocked"></i></span></button>
  163. </div>
  164. <div class="form-group">
  165. <div class="text-center">
  166. <a href="#" class="btn btn-sm btn-success" data-toggle="modal" data-target="#ModalPanduan">Panduan Aktivasi Akun</a>
  167. </div>
  168. <div>
  169. <a class="white-text activate-section" href="#" data-section="login-section">Login</a>
  170. </div>
  171. </div>
  172. </div>
  173. </div>
  174. </form>
  175. </div>
  176. </div>
  177. <br>
  178. <div class="copyright-wrapper">
  179. <div class="content-copyright copyright-small">
  180. <p>&copy; 2018 Universitas Prokalamasi 45</p>
  181. </div>
  182. </div>
  183. </div>
  184. </div>
  185. </div>
  186. </div>
  187. <div class="modal fade bs-example-modal-md" id="ModalPanduan" role="dialog" aria-hidden="true">
  188. <div class="modal-dialog modal-md">
  189. <div class="modal-content">
  190. <div class="modal-header">
  191. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span>
  192. </button>
  193. <h4 class="modal-title" id="myModalLabel">Panduan Aktivasi Akun</h4>
  194. </div>
  195. <div class="modal-body">
  196. <div class="row">
  197. <div class="col-md-12">
  198. <h5>Panduan Aktivasi:</h5>
  199. <ul>
  200. <li>Masukkan NIP Anda. Abaikan tanda titik ( . ) dan tanda garis miring ( / ) pada NIP jika ada.</li>
  201. <li>Tekan tombol <strong>Cek</strong>, dan sistem akan melakukan pengecekan apakah NIP yang Anda masukkan valid.</li>
  202. <li>Apabila NIP valid, tombol <strong>Aktivasi Akun</strong> akan berubah menjadi warna biru.</li>
  203. <li>Masukkan alamat email Anda yang valid.</li>
  204. <li>Tekan tombol <strong>Aktivasi Akun</strong>, dan sistem akan memproses permintaan Anda.</li>
  205. <li>Apabila email Anda valid, maka sistem akan mengirimkan email kepada Anda. Silakan cek kotak masuk email Anda.</li>
  206. </ul>
  207. </div>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. <script type="text/javascript">
  214. (function ($) {
  215. "use strict";
  216. var actionBox = $('#action-box'),
  217. modalSections = actionBox.find('.action-section');
  218. $('.activate-section').on('click', function (event) {
  219. var targetSection = $(this).data('section');
  220. modalSections.slideUp();
  221. actionBox.find('.' + targetSection).slideDown();
  222. event.preventDefault();
  223. });
  224. })(jQuery);
  225. $(".toggle-password").click(function() {
  226. $(this).toggleClass("ion-eye ion-eye-disabled");
  227. var input = $($(this).attr("toggle"));
  228. if (input.attr("type") == "password") {
  229. input.attr("type", "text");
  230. } else {
  231. input.attr("type", "password");
  232. }
  233. });
  234. $('#btn_cek').click(function(e){
  235. var nip = $('#nip').val();
  236. $.ajax({
  237. type : "POST",
  238. url : "<?php echo ajaxpublic_url()?>get_pegawai_by_nip",
  239. dataType : "json",
  240. data : {nip:nip},
  241. beforeSend: function(){
  242. $("#nama").val("");
  243. },
  244. success: function(response){
  245. if (response[0].code==200) {
  246. $("#nama").val(response[0].nama);
  247. $("#nip_pegawai").val(response[0].nip);
  248. $("#btn_aktivasi").removeClass('red').addClass('blue');
  249. document.getElementById("btn_aktivasi").disabled = false;
  250. }
  251. else{
  252. $("#nama").val("NIP Tidak Valid");
  253. $("#btn_aktivasi").removeClass('blue').addClass('red');
  254. document.getElementById("btn_aktivasi").disabled = true;
  255. }
  256. }
  257. });
  258. e.preventDefault();
  259. });
  260. </script>
  261. </body>
  262. </html>