Make confirmation input type in delete admin

administration/templates/kelola_admin.html

@@ -62,12 +62,21 @@
                         </button>
                       </div>
                       <div class="modal-body">
-                        <p>Sila konfirmasi penghapusan akun dengan tekan tombol hapus di bawah</p>
-                      </div>
-                      <div class="modal-footer">
-                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
-                        <a href="/administration/hapus-admin/{{current.id}}/" type="button" class="btn btn-danger">Hapus</a>
+                        <p>Anda akan menghapus akun admin dengan email 
+                          <span class="bg-danger pr-1 pl-1 text-white" style="text-transform: lowercase">{{current.email}}</span>
+                          . Lakukan konfirmasi penghapusan dengan mengetik: </p>
+                        <p class="bg-danger text-white p-1"> {{current.email}} </p>
                       </div>
+                      <form/>
+                        {% csrf_token %}
+                        <div class="form-group pl-3 pr-3">
+                          <input name="{{ current.email }}" class="form-control" id="{{ current.id }}"required pattern="{{current.email}}" oninput="checkValue(this)">
+                        </div>
+                        <div class="modal-footer">
+                          <button type="button" class="btn btn-secondary" data-dismiss="modal">Batal</button>
+                          <a href="/administration/hapus-admin/{{current.id}}/" id="btn-hapus-{{current.id}}" type="button" class="btn btn-danger disabled">Hapus</a>
+                        </div>
+                      </form>
                     </div>
                   </div>
                 </div>
@@ -118,4 +127,14 @@
     </div>
   </div>
 </div>
+<script type="text/javascript">
+  function checkValue(element){
+    buttonElement = document.getElementById("btn-hapus-" + element.id)
+    if(element.value != element.name) { 
+        buttonElement.classList.add("disabled"); 
+    } else { 
+        buttonElement.classList.remove("disabled");
+    }
+}
+</script>
 {% endblock %}
\ No newline at end of file